wenlele 1 year ago
parent
commit
a2a94d57cf
  1. 3
      web/client/assets/images/electrical/close.svg
  2. BIN
      web/client/assets/images/electrical/control-bg.png
  3. 27
      web/client/assets/images/electrical/control-title-bg.svg
  4. 14
      web/client/assets/images/electrical/rectangle.svg
  5. 2
      web/client/src/sections/bigScreen/components/electrical.js
  6. 125
      web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js

3
web/client/assets/images/electrical/close.svg

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="design-iconfont">
<path d="M9.06559375,7.96073438 L11.8277344,5.19860938 L10.7228906,4.09375 L7.96071875,6.85589062 L5.19860938,4.09375 L4.09375,5.19859375 L6.85589062,7.96073437 L4.09375,10.722875 L5.19859375,11.8277344 L7.96073437,9.06559375 L10.722875,11.8277344 L11.8277344,10.7228906 L9.06559375,7.96073438 L9.06559375,7.96073438 Z M8,15.03125 C4.11675,15.03125 0.96875,11.88325 0.96875,8 C0.96875,4.11675 4.11675,0.96875 8,0.96875 C11.88325,0.96875 15.03125,4.11675 15.03125,8 C15.03125,11.88325 11.88325,15.03125 8,15.03125 Z" fill="#4CA1FF" fill-rule="nonzero"/>
</svg>

After

Width:  |  Height:  |  Size: 647 B

BIN
web/client/assets/images/electrical/control-bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

27
web/client/assets/images/electrical/control-title-bg.svg

@ -0,0 +1,27 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 249 32" class="design-iconfont">
<defs>
<linearGradient x1="1.94992316%" y1="50.3595892%" x2="90.3485741%" y2="50%" id="bp2qll04p__z3ov8zc3va">
<stop stop-color="#1B82F5" offset="0%"/>
<stop stop-color="#1B82F5" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="35.0958665%" y1="55.8252996%" x2="191.263966%" y2="55.8252996%" id="bp2qll04p__n6p2pl7vab">
<stop stop-color="#1B82F5" offset="0%"/>
<stop stop-color="#1B82F5" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="35.0958665%" y1="54.3540556%" x2="79.3936886%" y2="64.37203%" id="bp2qll04p__fv0ear6bic">
<stop stop-color="#1B82F5" offset="0%"/>
<stop stop-color="#1B82F5" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="35.0958665%" y1="54.3540556%" x2="59.3820406%" y2="61.4109805%" id="bp2qll04p__891se4fmnd">
<stop stop-color="#1B82F5" offset="0%"/>
<stop stop-color="#1B82F5" stop-opacity="0" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="url(#bp2qll04p__z3ov8zc3va)" d="M1.71330859e-16 0L162.489815 0 138.129447 32 0 31.964261z"/>
<path fill="url(#bp2qll04p__n6p2pl7vab)" opacity=".30829148" d="M165.32681 0.502047546L176.884114 0 152.523746 32 139.870446 31.964261z"/>
<path fill="url(#bp2qll04p__fv0ear6bic)" opacity=".26813616" d="M189.143718 0.502047546L200.701023 0 176.340655 32 163.687355 31.964261z"/>
<path fill="url(#bp2qll04p__891se4fmnd)" opacity=".19798642" d="M212.960627 0.502047546L224.517932 0 200.157564 32 187.504264 31.964261z"/>
<path fill="url(#bp2qll04p__891se4fmnd)" opacity=".10053943" d="M236.777535 0.502047546L248.33484 0 223.974472 32 211.321172 31.964261z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

14
web/client/assets/images/electrical/rectangle.svg

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 14 14" class="design-iconfont">
<defs>
<filter x="-100%" y="-100%" width="300%" height="300%" filterUnits="objectBoundingBox" id="gvdu74gaa__b8eccrvxea">
<feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.97254902 0 0 0 1 0" in="shadowBlurOuter1"/>
</filter>
<path id="gvdu74gaa__aj5fpei4wb" d="M0 5H6V11H0z"/>
</defs>
<g transform="translate(4 -1)" fill="none" fill-rule="evenodd">
<use fill="#000" filter="url(#gvdu74gaa__b8eccrvxea)" xlink:href="#gvdu74gaa__aj5fpei4wb"/>
<use fill="#00FFF8" xlink:href="#gvdu74gaa__aj5fpei4wb"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 831 B

2
web/client/src/sections/bigScreen/components/electrical.js

@ -204,7 +204,7 @@ const Electrical = ({ dispatch, actions, siteList}) => {
return <div style={{ width: '100%', height: 'calc(100% - 200px', color: '#FFF', position: 'absolute', top: 160, left: 0 }}>
<div style={{ width: '100%', height: "100%", position: 'relative', }}>
<RealTimeStatus pumpId={pumpId} pumpList={pumpList} setPumpId={setPumpId} pumpOne={pumpOne} />
<RealTimeStatus pumpId={pumpId} pumpList={pumpList} setPumpId={setPumpId} pumpOne={pumpOne} strucId={strucId} siteList={siteList} />
<LineBoxStatus cabinetId={cabinetId} cabinetList={cabinetList} setCabinetId={setCabinetId} cabinetOne={cabinetOne} />
<VoltageTrend pumpList={pumpList} voltagePumpId={voltagePumpId} setVoltagePumpId={setVoltagePumpId} data={voltagepump} />
<LevelTrend depthWater={depthWater} />

125
web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js

@ -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,
};
}

Loading…
Cancel
Save