|
|
|
@ -1,14 +1,99 @@ |
|
|
|
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 <div style={{ |
|
|
|
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|
|
|
@ -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', |
|
|
|
}}> |
|
|
|
<div style={{ marginLeft: 6, fontFamily: 'YouSheBiaoTiHei' }}>{pumpOne?.name}</div> |
|
|
|
<div style={{ width: 52, height: 20, marginRight: 6, textAlign: "center", lineHeight: "20px", background: "#ffc8802e", boxShadow: 'inset 0 0 8px 1px #ffc88080' }}>控制</div> |
|
|
|
<div |
|
|
|
style={{ width: 52, height: 20, marginRight: 6, textAlign: "center", lineHeight: "20px", background: "#ffc8802e", boxShadow: 'inset 0 0 8px 1px #ffc88080', cursor: 'pointer' }} |
|
|
|
onClick={showModal} |
|
|
|
> |
|
|
|
控制 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ |
|
|
|
height: 30, borderBottom: '1px solid #96b8bcba', |
|
|
|
@ -95,16 +186,36 @@ const RealTimeStatus = ({ user, pumpId, pumpList, setPumpId, pumpOne }) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<Modal |
|
|
|
footer={null} open={isModalOpen} onCancel={handleCancel} |
|
|
|
bodyStyle={{ background: 'url(/assets/images/electrical/control-bg.png) no-repeat center center', backgroundSize: '100% 100%', padding: '12px 16px' }} |
|
|
|
closeIcon={<img src='/assets/images/electrical/close.svg' style={{ width: 16, height: 16 }} />} |
|
|
|
width={287} |
|
|
|
> |
|
|
|
<div style={{ |
|
|
|
background: 'url(/assets/images/electrical/control-title-bg.svg) no-repeat center center', |
|
|
|
width: '100%', height: 32, fontFamily: 'YouSheBiaoTiHei', fontSize: 18, color: '#FFF', display: 'flex', alignItems: 'center' |
|
|
|
}}> |
|
|
|
<span style={{ marginLeft: '10px' }}>{pumpName}</span> |
|
|
|
</div> |
|
|
|
{ |
|
|
|
['模式切换', '启动控制', '停止控制'].map(label => <div style={{ display: 'flex', alignItems: 'center', marginTop: 16 }}> |
|
|
|
<img src='/assets/images/electrical/rectangle.svg' style={{ width: 10, height: 10, marginLeft: 5 }} /> |
|
|
|
<span style={{ color: '#FFF', fontFamily: 'SourceHanSansCN-Medium', fontWeight: 500, fontSize: 16, margin: '0 33px 0 8px' }}>{label}</span> |
|
|
|
<Switch disabled={checked.模式切换 && label !== '模式切换'} checkedChildren="开" unCheckedChildren="关" checked={checked[label]} onChange={(checked => onChange(label, checked))} /> |
|
|
|
</div>) |
|
|
|
} |
|
|
|
</Modal> |
|
|
|
</div> |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
function mapStateToProps(state) { |
|
|
|
const { auth, global } = state; |
|
|
|
return { |
|
|
|
user: auth.user, |
|
|
|
clientHeight: global.clientHeight, |
|
|
|
actions: global.actions, |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
|
