diff --git a/web/client/assets/images/electrical/close.svg b/web/client/assets/images/electrical/close.svg new file mode 100644 index 0000000..c5848f9 --- /dev/null +++ b/web/client/assets/images/electrical/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/client/assets/images/electrical/control-bg.png b/web/client/assets/images/electrical/control-bg.png new file mode 100644 index 0000000..3d16ab2 Binary files /dev/null and b/web/client/assets/images/electrical/control-bg.png differ diff --git a/web/client/assets/images/electrical/control-title-bg.svg b/web/client/assets/images/electrical/control-title-bg.svg new file mode 100644 index 0000000..8397799 --- /dev/null +++ b/web/client/assets/images/electrical/control-title-bg.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/client/assets/images/electrical/rectangle.svg b/web/client/assets/images/electrical/rectangle.svg new file mode 100644 index 0000000..9ee4fb1 --- /dev/null +++ b/web/client/assets/images/electrical/rectangle.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/web/client/src/sections/bigScreen/components/electrical.js b/web/client/src/sections/bigScreen/components/electrical.js index dbfaa3e..d363557 100644 --- a/web/client/src/sections/bigScreen/components/electrical.js +++ b/web/client/src/sections/bigScreen/components/electrical.js @@ -34,7 +34,7 @@ const Electrical = ({ dispatch, actions, user, module, setModule }) => { useEffect(() => { dispatch(bigScreen.axyData({ type: 'get', url: `organizations/{orgId}/structures` })).then(res => { if (res.success) { - setSiteList(res.payload.data?.map(v => ({ value: v.id, label: v.name })) || []) + setSiteList(res.payload.data?.map(v => ({ value: v.id, label: v.name, iotaThingId: v.iotaThingId })) || []) setStrucId(res.payload.data[0]?.id) } }) @@ -226,7 +226,7 @@ const Electrical = ({ dispatch, actions, user, module, setModule }) => { return
- + diff --git a/web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js b/web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js index b5e5562..8ca61b9 100644 --- a/web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js +++ b/web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js @@ -1,20 +1,105 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { connect } from 'react-redux'; -import { Select } from 'antd'; +import { Select, Modal, Switch } from 'antd'; +const RealTimeStatus = (props) => { + const { dispatch, actions, user, pumpId, pumpList, setPumpId, pumpOne, strucId, siteList } = props; + const { bigScreen } = actions; + const [isModalOpen, setIsModalOpen] = useState(false); + const [pumpName, setPumpName] = useState(''); + const [checked, setChecked] = useState({ + '模式切换': false, // 平台手动/平台液控 + '启动控制': false, + '停止控制': false, + }); -const RealTimeStatus = ({ user, pumpId, pumpList, setPumpId, pumpOne }) => { + useEffect(() => { + setPumpName(pumpList?.length ? pumpList[0].name : '') + }, [pumpList]) + useEffect(() => { + if (pumpOne?.data.length) { + setChecked({ + '模式切换': pumpOne.data[0].sMotor_State === 1 ? false : true, + '启动控制': pumpOne.data[0].cMotor_START, + '停止控制': pumpOne.data[0].cMotor_START, + }) + } + }, [pumpOne]) + const showModal = () => { + setIsModalOpen(true); + }; + + const handleCancel = () => { + setIsModalOpen(false); + }; + + const onChange = (label, isChecked) => { + const nextChecked = { ...checked, [label]: isChecked }; + setChecked(nextChecked); + + const thingId = siteList?.find(s => s.value === strucId)?.iotaThingId; + let deviceId = null; + let sensorId = null; + let dimCapId = null; + const promiseArr = [ + dispatch(bigScreen.axyData({ + type: 'get', url: `/metrics/things/${thingId}/devices/link_status` + })), + dispatch(bigScreen.axyData({ + type: 'get', url: `/things/${thingId}/devices/deploy` + })) + ] + Promise.all(promiseArr).then(resArr => { + if (resArr[0].success && resArr[1].success) { + deviceId = resArr[0].payload.data?.devices[0].deviceId; + sensorId = resArr[1].payload.data.instances[Object.keys(pumpList?.find(p => p.id === pumpId)?.iotaDevices)[0]].instance.properties.sensorId; + for (const instance of Object.values(resArr[1].payload.data.instances)) { + if (instance.name === "泵站数据采集仪") { + for (const interfaces of Object.values(instance.instance.interfaces)) { + if (interfaces.capabilities) { + for (const capabilitie of Object.values(interfaces.capabilities)) { + if (capabilitie.dimension?.dimensionId === null) { + dimCapId = capabilitie.dimension.id; + } + } + } + } + break; + } + } + dispatch(bigScreen.axyData({ + type: 'post', url: `/capabilities/invoke`, + params: { + data: { + thingId, + deviceId, + dimCapId, + timeout: 15000, + param: JSON.stringify({ + id: sensorId, + order: label === '模式切换' ? 'mode' : label === '启动控制' ? 'run' : 'stop', + value: nextChecked.模式切换 ? 1 : 0 // 0：平台手动，1：启动泵/停止泵/平台液控） + }) + } + } + })).then(res => { + console.log('控制res', res) + }) + } else { + } + }) + } return
@@ -24,8 +109,9 @@ const RealTimeStatus = ({ user, pumpId, pumpList, setPumpId, pumpOne }) => { bordered={false} value={pumpId} optionFilterProp="children" - onSelect={v => { + onSelect={(v, option) => { setPumpId(v) + setPumpName(option.label) }} options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []} /> @@ -44,7 +130,12 @@ const RealTimeStatus = ({ user, pumpId, pumpList, setPumpId, pumpOne }) => { backgroundSize: '100% 560%', backgroundPosition: '0 16px', backgroundRepeat: 'no-repeat', }}>
{pumpOne?.name}
-
控制
+
+ 控制 +
{ width: '100%', height: 43, display: 'flex', justifyContent: "space-between", alignItems: 'center' }}>
-
单次时间：
+
单次时间：
{pumpOne?.data[0]?.dPump_T_S} min
-
积累时间：
+
积累时间：
{pumpOne?.data[0]?.dPump_T_T} h
@@ -82,25 +173,45 @@ const RealTimeStatus = ({ user, pumpId, pumpList, setPumpId, pumpOne }) => { width: '100%', height: 43, display: 'flex', justifyContent: "space-between", alignItems: 'center' }}>
-
运行电流：
+
运行电流：
{pumpOne?.data[0]?.eMotor_A_A} min
-
运行电压：
+
运行电压：
{pumpOne?.data[0]?.eMotor_A_V} h
- + } + width={287} + > +
+ {pumpName} +
+ { + ['模式切换', '启动控制', '停止控制'].map(label =>
+ + {label} + onChange(label, checked))} /> +
) + } +
} -function mapStateToProps (state) { +function mapStateToProps(state) { const { auth, global } = state; return { user: auth.user, clientHeight: global.clientHeight, + actions: global.actions, }; }