fix(EC_RealTimeInfo): 组件服务优化

config/proxy.js

@@ -16,4 +16,14 @@ export default {
       '/PandaMonitor': '/PandaMonitor',
     },
   },
+  '/PandaCore': {
+    target: proxyURL,
+    changeOrigin: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    pathRewrite: {
+      '/PandaCore': '/PandaCore',
+    },
+  },
 };

packages/extend-components/EC_RealTimeInfo/apis/index.js

+import { request } from '@wisdom-utils/utils';
+
+const REQUEST_METHOD_GET = 'get';
+const REQUEST_METHOD_POST = 'post';
+// eslint-disable-next-line no-undef
+const baseUrl = typeof DUMI_TYPE !== 'undefined' && DUMI_TYPE === 'dumi' ? '/api' : '';
+
+// 获取监控展示配置
+export function getMonitorConfig({ params, data } = {}) {
+  return request({
+    url: `/PandaMonitor/Monitor/MonitorConfig/GetMonitorConf`,
+    method: REQUEST_METHOD_GET,
+    params,
+    data,
+  });
+}
+
+// 获取传感器类型
+export function getSensorType({ params, data } = {}) {
+  return request({
+    url: `/PandaCore/GCK/Sensor/GetSensorType`,
+    method: REQUEST_METHOD_GET,
+    params,
+    data,
+  });
+}
+
+// 获取设备实时数据
+export function getDeviceRealInfo({ params, data } = {}) {
+  return request({
+    url: `/PandaMonitor/Monitor/Device/GetDeviceRealInfo`,
+    method: REQUEST_METHOD_POST,
+    params,
+    data,
+  });
+}
+
+// 获取点表地址
+export function getPointAddressEntry({ params, data } = {}) {
+  return request({
+    url: `/PandaMonitor/Monitor/PointAddress/GetPointAddressEntry`,
+    method: REQUEST_METHOD_GET,
+    params,
+    data,
+  });
+}
+
+// 获取点表版本
+export function getPointAddress({ params, data } = {}) {
+  return request({
+    url: `/PandaMonitor/Monitor/PointAddress/GetPointAddress`,
+    method: REQUEST_METHOD_GET,
+    params,
+    data,
+  });
+}

packages/extend-components/EC_RealTimeInfo/src/demos/Basic.tsx

@@ -20,53 +20,55 @@ const GET_DEVICE_REAL_INFO =
 // const GET_SENSOR_TYPE = '/api/Publish/GCK/Sensor/GetSensorType'; //获取传感器类型
 // const GET_DEVICE_REAL_INFO = '/api/Publish/GCK/Device/DeviceRealInfo'; //获取设备实时数据
 
-const realTimeInfoService = {
-  getDeviceConf: {
-    url: GET_DEVICE_CONF,
-    method: REQUEST_METHOD_GET,
-    type: REQUEST_HTTP,
-  },
-  getPointAddressEntry: {
-    url: GET_POINT_ADDRESS_ENTRY,
-    method: REQUEST_METHOD_GET,
-    type: REQUEST_HTTP,
-  },
-  getSensorType: {
-    url: GET_SENSOR_TYPE,
-    method: REQUEST_METHOD_GET,
-    type: REQUEST_HTTP,
-  },
-  getDeviceRealInfo: {
-    url: GET_DEVICE_REAL_INFO,
-    method: REQUEST_METHOD_POST,
-    type: REQUEST_HTTP,
-  },
-};
+// const realTimeInfoService = {
+//   getDeviceConf: {
+//     url: GET_DEVICE_CONF,
+//     method: REQUEST_METHOD_GET,
+//     type: REQUEST_HTTP,
+//   },
+//   getPointAddressEntry: {
+//     url: GET_POINT_ADDRESS_ENTRY,
+//     method: REQUEST_METHOD_GET,
+//     type: REQUEST_HTTP,
+//   },
+//   getSensorType: {
+//     url: GET_SENSOR_TYPE,
+//     method: REQUEST_METHOD_GET,
+//     type: REQUEST_HTTP,
+//   },
+//   getDeviceRealInfo: {
+//     url: GET_DEVICE_REAL_INFO,
+//     method: REQUEST_METHOD_POST,
+//     type: REQUEST_HTTP,
+//   },
+// };
 
-const rtService = service(realTimeInfoService);
+// const rtService = service(realTimeInfoService);
 
-const getDeviceConf = rtService.getDeviceConf;
-const getPointAddressEntry = rtService.getPointAddressEntry;
-const getSensorType = rtService.getSensorType;
-const getDeviceRealInfo = rtService.getDeviceRealInfo;
+// const getDeviceConf = rtService.getDeviceConf;
+// const getPointAddressEntry = rtService.getPointAddressEntry;
+// const getSensorType = rtService.getSensorType;
+// const getDeviceRealInfo = rtService.getDeviceRealInfo;
 
 const Demo = () => {
   return (
     <div style={{ width: '200px', height: '60px', background: 'black' }}>
       <RealTimeInfo
-        deviceConfService={getDeviceConf}
-        pointAddressEntryService={getPointAddressEntry}
-        sensorTypeService={getSensorType}
-        deviceRealInfoService={getDeviceRealInfo}
-        deviceRealInfoParams={{
-          userID: '1',
-          pageIndex: 1,
-          pageSize: 20,
-          isFocus: false,
-          accountFieldParams: [{ AName: '二供泵房' }, { AName: '二供机组' }],
-          equipmentCode: 'EGBF00000001',
-        }}
-        user={'1'}
+        deviceParams={[
+          {
+            deviceType: '二供泵房',
+            deviceCode: 'EGBF00000001',
+          },
+          {
+            deviceType: '二供机组',
+            deviceCode: 'EGJZ00000001',
+          },
+          {
+            deviceType: '二供机组',
+            deviceCode: 'EGJZ00000002',
+          },
+        ]}
+        user={1}
       />
     </div>
   );

packages/extend-components/EC_RealTimeInfo/src/index.js

-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Empty from '@wisdom-components/empty';
 import classNames from 'classnames';
-import { Modal, Button, Tabs, Input, Radio, ConfigProvider } from 'antd';
+import { Modal, Button, Tabs, Input, Radio, ConfigProvider, message } from 'antd';
 import BasicTable from '@wisdom-components/basictable';
+import {
+  getMonitorConfig,
+  getSensorType,
+  getDeviceRealInfo,
+  getPointAddressEntry,
+  getPointAddress,
+} from '../apis';
 import './index.less';
 
 const { TabPane } = Tabs;
 
+const defaultColumns = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    width: 60,
+  },
+  {
+    title: '指标名称',
+    dataIndex: 'name',
+    width: 150,
+  },
+  {
+    title: '最新指标',
+    dataIndex: 'value',
+    render: (text) => <a>{text}</a>,
+  },
+  {
+    title: '单位',
+    dataIndex: 'unit',
+  },
+  {
+    title: '指标类型',
+    dataIndex: 'type',
+  },
+  {
+    title: '数据描述',
+    dataIndex: 'desc',
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'time',
+  },
+];
+
 const RealTimeInfo = (props) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('realtime-info');
 
-  const {
-    deviceConfService,
-    pointAddressEntryService,
-    sensorTypeService,
-    deviceRealInfoService,
-    deviceRealInfoParams,
-    user,
-    placeholder,
-    defaultTargetValue,
-    modalTitle,
-    buttonText,
-  } = props;
+  const { deviceParams, user, placeholder, defaultTargetValue, modalTitle, buttonText } = props;
 
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [targetValue, setTargetValue] = useState(defaultTargetValue); // 重点/全部
   const [searchValue, setSearchValue] = useState(''); // 搜索框内容
-  const [columns, setColumns] = useState(defaultColumns); // 搜索框内容
-  const [tabData, setTabData] = useState([]);
   const [tabKey, setTabKey] = useState('');
   const [guid, setGuid] = useState('');
   const [deviceConf, setDeviceConf] = useState([]); // 设备配置
   const [deviceInfo, setDeviceInfo] = useState({}); // 设备实时数据
-  const [sensorType, setSensorType] = useState({}); // sensorType
+  const [sensorType, setSensorType] = useState([]); // sensorType
   const [pointAddress, setPointAddress] = useState([]); // pointAddress
-  const [tableData, setTableData] = useState([]); // 表格数据
-  const [searchData, setSearchData] = useState([]); // 表格搜索数据
 
-  const handleTabData = (data = {}) => {
+  const tabData = useMemo(() => {
+    const data = deviceInfo;
     let tData = [];
+    if (!data) return tData;
     tData.push({
       key: data.code,
       title: data.name,
@@ -59,43 +87,92 @@ const RealTimeInfo = (props) => {
         });
       });
     }
-    setTabData(tData);
-    setTabKey(tData[0].key);
-  };
+    return tData;
+  }, [deviceInfo]);
 
-  // 过滤重点指标
-  const filterEmphasis = (dataSource) => {
+  // 过滤重点指标（带搜索）
+  const filterEmphasis = (dataSource, searchValue) => {
     const cur = tabData.filter((item) => item.key === tabKey);
     const conf =
       cur.length > 0 ? deviceConf.filter((item) => item.deviceType === cur[0].deviceType) : [];
     const dPoints = conf.length > 0 && conf[0].dPoints ? conf[0].dPoints.split(',') : [];
-    const data = dataSource.filter((item) => dPoints.includes(item.name));
-    setSearchData(data);
+    const data = dataSource.filter((item) =>
+      searchValue
+        ? dPoints.indexOf(searchValue) > -1 && dPoints.includes(item.name)
+        : dPoints.includes(item.name),
+    );
+    return data;
+  };
+
+  // 过滤普通指标（带搜索）
+  const filterSearch = (dataSource, searchValue) => {
+    return !searchValue ? dataSource : dataSource.filter((item) => item.name.includes(searchValue));
   };
 
-  const handleFilterColumns = (data = []) => {
-    const keyArr = defaultColumns.map((item) => item.dataIndex);
-    const filter = [];
-    keyArr.forEach((key) => {
-      let length = 0;
-      data.forEach((item) => {
-        if (item[key] === '--' || item[key] === '') {
-          length++;
+  const getData = () => {
+    const deviceType =
+      deviceParams.length > 0
+        ? Array.from(new Set(deviceParams.map((item) => item.deviceType))).join(',')
+        : '二供泵房,二供机组';
+    const configReq = getMonitorConfig({
+      params: {
+        user,
+        showAll: true,
+        deviceType,
+      },
+    });
+    const sensorReq = getSensorType();
+    const realDataReq = getDeviceRealInfo({
+      data: {
+        pageIndex: 1,
+        pageSize: 200,
+        param: deviceParams,
+        useID: user,
+      },
+    });
+    Promise.all([configReq, sensorReq, realDataReq])
+      .then((results) => {
+        if (results.some((item) => item.code !== 0)) message.error('获取数据失败');
+        const [configRes, sensorRes, realDataRes] = results;
+        setSensorType(sensorRes.data);
+        setDeviceConf(configRes.data);
+        setDeviceInfo(realDataRes.data.list[0]);
+        setTabKey(realDataRes?.data?.list?.[0]?.code);
+      })
+      .catch((err) => {
+        message.error('获取数据失败');
+      });
+  };
+
+  useEffect(() => {
+    if (!isModalVisible || !deviceParams || !deviceParams.length) return;
+    getData();
+  }, [deviceParams, user, isModalVisible]);
+
+  const GetPointAddressEntry = () => {
+    const cur = tabData.filter((item) => item.key === tabKey);
+    !!cur.length &&
+      getPointAddressEntry({
+        params: {
+          versionId: cur[0].versionID,
+        },
+      }).then((res) => {
+        if (res.code === 0 && res.data.length) {
+          setPointAddress(res.data);
         }
       });
-      if (data.length === length) {
-        filter.push(key);
-      }
-    });
-    const column = defaultColumns.filter((item) => !filter.includes(item.dataIndex));
-    setColumns(column);
-    setTableData(data);
   };
 
-  const handleData = (data1 = [], data2 = [], data3 = {}) => {
-    let time = data3.pt;
+  useEffect(() => {
+    if (!tabKey || !tabData || !tabData.length) return;
+    GetPointAddressEntry();
+  }, [tabKey]);
+
+  const formatData = (data = [], sensorType = [], deviceInfo = {}) => {
+    if (!deviceInfo) return [];
+    let time = deviceInfo.pt;
     if (time) time = time.slice(5, 19).replace('-', '/');
-    let newData = data1.map((item, index) => {
+    let newData = data.map((item, index) => {
       return {
         id: item.id,
         key: item.id,
@@ -110,8 +187,8 @@ const RealTimeInfo = (props) => {
       };
     });
     newData.forEach((item) => {
-      let curData1 = data2.filter((child) => child.id == item.sensorTypeID);
-      let curData2 = data3.dataList.filter((child) => child.paid == item.id);
+      let curData1 = sensorType.filter((child) => child.id == item.sensorTypeID);
+      let curData2 = deviceInfo.dataList.filter((child) => child.paid == item.id);
       if (curData1.length) {
         item.unit = curData1[0].unit || '--';
         item.type = curData1[0].name || '--';
@@ -120,90 +197,29 @@ const RealTimeInfo = (props) => {
         item.value = curData2[0].pv || '--';
       }
     });
-    handleFilterColumns(newData);
-    const data = searchValue
-      ? newData.filter((item) => item.name.indexOf(searchValue) !== -1)
-      : newData;
-    if (targetValue === 'emphasis') {
-      filterEmphasis(data);
-    } else {
-      setSearchData(data);
-    }
+    return newData;
   };
 
-  const GetDeviceConf = () => {
-    const deviceType =
-      deviceRealInfoParams.accountFieldParams.length > 0
-        ? deviceRealInfoParams.accountFieldParams.map((item) => item.AName).join(',')
-        : '二供泵房,二供机组';
-    deviceConfService({
-      user,
-      showAll: true,
-      deviceType,
-    }).then((res) => {
-      if (res.code === 0 && res.data.length) {
-        setDeviceConf(res.data);
-      }
-    });
-  };
-
-  const GetDeviceRealInfo = () => {
-    deviceRealInfoService(deviceRealInfoParams).then((res) => {
-      if (res.code === 0 && res.data) {
-        setDeviceInfo(res.data.list[0]);
-        handleTabData(res.data.list[0]);
-      }
-    });
-  };
-
-  const GetSensorType = () => {
-    sensorTypeService({}).then((res) => {
-      if (res.code === 0 && res.data.length) {
-        setSensorType(res.data);
-      }
-    });
-  };
-
-  const GetPointAddressEntry = () => {
-    const cur = tabData.filter((item) => item.key === tabKey);
-    !!cur.length &&
-      pointAddressEntryService({ versionID: cur[0].versionID }).then((res) => {
-        if (res.code === 0 && res.data.length) {
-          setPointAddress(res.data);
-        }
-      });
-  };
-
-  useEffect(() => {
-    if (isModalVisible) {
-      GetDeviceConf();
-      GetDeviceRealInfo();
-      GetSensorType();
-    }
-  }, [isModalVisible]);
-
-  useEffect(() => {
-    GetPointAddressEntry();
-  }, [tabKey]);
-
-  useEffect(() => {
-    handleData(pointAddress, sensorType, deviceInfo);
-  }, [pointAddress]);
-
-  useEffect(() => {
+  const tableData = useMemo(() => {
+    // 过滤数据
+    let points = [];
     if (targetValue === 'emphasis') {
-      // 重点指标
-      filterEmphasis(searchData);
+      points = filterEmphasis(pointAddress, searchValue);
     } else {
-      // 全部
-      if (searchValue) {
-        const data = tableData.filter((item) => item.name.indexOf(searchValue) !== -1);
-        setSearchData(data);
-      } else {
-        setSearchData(tableData);
-      }
+      points = filterSearch(pointAddress, searchValue);
     }
-  }, [targetValue]);
+
+    const deviceData =
+      deviceInfo.code === tabKey
+        ? deviceInfo
+        : deviceInfo?.child?.find((item) => item.code === tabKey);
+    const newData = formatData(points, sensorType, deviceData);
+    return newData;
+  }, [targetValue, searchValue, pointAddress, deviceInfo]);
+
+  const columns = useMemo(() => {
+    return defaultColumns;
+  }, []);
 
   const showModal = () => {
     setIsModalVisible(true);
@@ -217,33 +233,13 @@ const RealTimeInfo = (props) => {
     setIsModalVisible(false);
   };
 
-  const onSearch = (e) => {
+  const changeSearch = (e) => {
+    e.target && e.target.value === '' && setSearchValue('');
+  };
+
+  const onSearch = (value) => {
     // 前端搜索
-    if (e.target.value) {
-      if (targetValue === 'emphasis') {
-        // 重点指标
-        const cur = tabData.filter((item) => item.key === tabKey);
-        const conf =
-          cur.length > 0 ? deviceConf.filter((item) => item.deviceType === cur[0].deviceType) : [];
-        const dPoints = conf.length > 0 && conf[0].dPoints ? conf[0].dPoints.split(',') : [];
-        const data = tableData.filter((item) => dPoints.includes(item.name));
-        const newDate = data.filter((item) => item.name.indexOf(e.target.value) !== -1);
-        setSearchData(newDate);
-      } else {
-        // 全部
-        const data = tableData.filter((item) => item.name.indexOf(e.target.value) !== -1);
-        setSearchData(data);
-      }
-    } else {
-      if (targetValue === 'emphasis') {
-        // 重点指标
-        filterEmphasis(tableData);
-      } else {
-        // 全部
-        setSearchData(tableData);
-      }
-    }
-    setSearchValue(e.target.value);
+    setSearchValue(value);
   };
 
   const onTabChange = (key) => {
@@ -291,7 +287,7 @@ const RealTimeInfo = (props) => {
           <div className={classNames(`${prefixCls}-search-wrap`)}>
             <div className={classNames(`${prefixCls}-search`)}>
               <div className={classNames(`${prefixCls}-label`)}>搜索：</div>
-              <Input placeholder={placeholder} onChange={onSearch} value={searchValue} />
+              <Input.Search placeholder={placeholder} onSearch={onSearch} onChange={changeSearch} />
             </div>
             <div className={classNames(`${prefixCls}-target`)}>
               <div className={classNames(`${prefixCls}-label`)}>指标：</div>
@@ -311,7 +307,7 @@ const RealTimeInfo = (props) => {
               columns={columns}
               locale={{ emptyText: <Empty /> }}
               pagination={false}
-              dataSource={searchData}
+              dataSource={tableData}
               {...props}
             />
           </div>
@@ -327,6 +323,7 @@ RealTimeInfo.defaultProps = {
   placeholder: '输入指标名称等',
   defaultTargetValue: 'emphasis',
   user: null,
+  deviceParams: [],
   deviceRealInfoParams: {},
   deviceConfService: () => {},
   pointAddressEntryService: () => {},
@@ -339,7 +336,8 @@ RealTimeInfo.propTypes = {
   modalTitle: PropTypes.string,
   placeholder: PropTypes.string,
   defaultTargetValue: PropTypes.string,
-  user: PropTypes.string,
+  user: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  deviceParams: PropTypes.array,
   deviceRealInfoParams: PropTypes.object,
   deviceConfService: PropTypes.func,
   pointAddressEntryService: PropTypes.func,
@@ -348,37 +346,3 @@ RealTimeInfo.propTypes = {
 };
 
 export default RealTimeInfo;
-
-const defaultColumns = [
-  {
-    title: '序号',
-    dataIndex: 'index',
-    width: 60,
-  },
-  {
-    title: '指标名称',
-    dataIndex: 'name',
-    width: 150,
-  },
-  {
-    title: '最新指标',
-    dataIndex: 'value',
-    render: (text) => <a>{text}</a>,
-  },
-  {
-    title: '单位',
-    dataIndex: 'unit',
-  },
-  {
-    title: '指标类型',
-    dataIndex: 'type',
-  },
-  {
-    title: '数据描述',
-    dataIndex: 'desc',
-  },
-  {
-    title: '更新时间',
-    dataIndex: 'time',
-  },
-];