// @ts-ignore import React, { useEffect, useState } from 'react'; import request from 'umi-request'; import { UnorderedListOutlined, SearchOutlined } from '@ant-design/icons'; import PandaQuotaSelect from '../index'; import { service } from '@wisdom-utils/utils'; import { getMonitorConf } from '../apis'; const REQUEST_HTTP = 'http'; const REQUEST_METHOD_GET = 'get'; const REQUEST_METHOD_POST = 'post'; const GET_QUOTA_LIST = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/Device/GetQuotaList'; //获取指标列表 // '/api/Publish/GCK/Device/GetQuotaList'; //获取指标列表 const GET_DEVICE_CONF = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //根据设备类型、方案名称、用户工号获取对应设备监控配置 // '/api/Publish/GCK/MonitorConfig/GetMonitorConf'; //根据设备类型、方案名称、用户工号获取对应设备监控配置 const UPDATE_DEVICE_CONF = 'https://www.fastmock.site/mock/162c15dca15c4dba9ba51e0a0b76929b/api/Publish/GCK/MonitorConfig/AddOrUpdateMonitorConf'; //添加或修改设备监控配置 // '/api/Publish/GCK/MonitorConfig/AddOrUpdateMonitorConf'; //添加或修改设备监控配置 const quotaSelectService = { getQuotaList: { url: GET_QUOTA_LIST, method: REQUEST_METHOD_GET, type: REQUEST_HTTP, }, getDeviceConf: { url: GET_DEVICE_CONF, method: REQUEST_METHOD_GET, type: REQUEST_HTTP, }, updateDeviceConfService: { url: UPDATE_DEVICE_CONF, method: REQUEST_METHOD_POST, type: REQUEST_HTTP, }, }; const qsService = service(quotaSelectService); const getQuotaList = qsService.getQuotaList; const getDeviceConf = getMonitorConf; const updateDeviceConfService = qsService.updateDeviceConfService; const pointType = 'cardPoints'; const Demo = () => { const [deviceList, setDeviceList] = useState([]); // 设备列表 const [confList, setConfList] = useState([]); // 设备配置列表 const fetchData = () => { getDeviceConf({ user: 'admin', showAll: true, deviceType: '二供泵房,二供机组', }) .then(function (response) { if (response.code == '0') { let curData = response.data; DeviceList.forEach((item) => { curData.forEach((child) => { if (item.deviceType === child.deviceType) item.confList = child[pointType].split(','); }); }); setConfList(curData); setDeviceList(DeviceList); } }) .catch(function (error) { console.log(error); }); }; useEffect(() => { fetchData(); }, []); const onModalOk = () => { console.log('onModalOk'); }; const onModalClose = () => { console.log('onModalClose'); }; const onModalCancel = () => { console.log('onModalCancel'); }; const onSelect = ({ device, selectKey, selectList }) => { let list = [...deviceList]; list.forEach((child) => { if (child.stationID === device.stationID) { child.confList = selectKey; } }); setDeviceList(list); }; return ( <> <h3>无 user, 无“保存修改”按钮</h3> <PandaQuotaSelect buttonProps={{}} // defaultSelect={'all'} deviceList={deviceList} pointType={pointType} onSelect={onSelect} // onModalCancel={onModalCancel} // onModalOk={onModalOk} // onModalClose={onModalClose} maximum={5} /> <br /> <h3>带 user, 有“保存修改”按钮</h3> <PandaQuotaSelect buttonProps={{}} deviceList={deviceList} confList={confList} pointType={pointType} onSelect={onSelect} onModalCancel={onModalCancel} onModalOk={onModalOk} onModalClose={onModalClose} maximum={5} user={'admin'} /> </> ); }; export default Demo; const DeviceList = [ { deviceName: '001东北明珠', shortName: '001东北明珠', code: 'EGBF00000001', fatherCode: null, deviceType: '二供泵房', entryTime: '2020-03-29 04:20:49', deviceGroup: '箱式变频', pointAddressID: 4, children: [], stationID: 27, }, { deviceName: '低区', shortName: '低区', code: 'EGJZ00000162', fatherCode: 'EGBF00000001', deviceType: '二供机组', entryTime: '2020-03-29 04:20:49', deviceGroup: '箱式变频', pointAddressID: 30, children: [], stationID: 28, }, { deviceName: '002世元国际', shortName: '002世元国际', code: 'EGBF00000002', fatherCode: null, deviceType: '二供机组', entryTime: '2020-03-29 04:24:19', deviceGroup: '智慧标准泵房', pointAddressID: 4, children: [], stationID: 29, }, ];