diff --git a/web/client/assets/images/electrical/centre2.png b/web/client/assets/images/electrical/centre2.png new file mode 100644 index 0000000..75f5e2e Binary files /dev/null and b/web/client/assets/images/electrical/centre2.png differ diff --git a/web/client/assets/images/electrical/pump_close.png b/web/client/assets/images/electrical/pump_close.png new file mode 100644 index 0000000..ad0c72d Binary files /dev/null and b/web/client/assets/images/electrical/pump_close.png differ diff --git a/web/client/assets/images/electrical/pump_fault.png b/web/client/assets/images/electrical/pump_fault.png new file mode 100644 index 0000000..574a1e3 Binary files /dev/null and b/web/client/assets/images/electrical/pump_fault.png differ diff --git a/web/client/assets/images/electrical/pump_open.png b/web/client/assets/images/electrical/pump_open.png new file mode 100644 index 0000000..75a0f98 Binary files /dev/null and b/web/client/assets/images/electrical/pump_open.png differ diff --git a/web/client/assets/images/electrical/signal_4.png b/web/client/assets/images/electrical/signal_4.png new file mode 100644 index 0000000..64dabb2 Binary files /dev/null and b/web/client/assets/images/electrical/signal_4.png differ diff --git a/web/client/src/sections/bigScreen/components/capacity.js b/web/client/src/sections/bigScreen/components/capacity.js index 132d57b..d18643f 100644 --- a/web/client/src/sections/bigScreen/components/capacity.js +++ b/web/client/src/sections/bigScreen/components/capacity.js @@ -188,21 +188,50 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren width: '40%', height: '100%', backgroundImage: 'url(/assets/images/monitor/pillar.png)', backgroundSize: '80% 80%', - backgroundPosition: 'center', + backgroundPosition: 'bottom', backgroundRepeat: 'no-repeat', position: 'relative' }}> +
+ +
+ {changeable ? { - setStrucId(v) - }} - options={siteList} - />} -
{/* 进线柜 */}
@@ -682,7 +687,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren
} -function mapStateToProps (state) { +function mapStateToProps(state) { const { auth, global, capacity, waterLevelSix, currentSix } = state; diff --git a/web/client/src/sections/bigScreen/components/electrical.js b/web/client/src/sections/bigScreen/components/electrical.js index f9590f4..0e4712e 100644 --- a/web/client/src/sections/bigScreen/components/electrical.js +++ b/web/client/src/sections/bigScreen/components/electrical.js @@ -1,8 +1,9 @@ import React, { useEffect, useState } from 'react'; import { connect } from 'react-redux'; -import { Select } from 'antd'; +import { Select, Tooltip } from 'antd'; import moment from 'moment' import ReactECharts from 'echarts-for-react'; +import Scale from './scale/scale'; import RealTimeStatus from '../components/electrity/realTimeStatus'; import LineBoxStatus from '../components/electrity/lineBoxStatus'; import VoltageTrend from '../components/electrity/voltageTrend'; @@ -97,7 +98,7 @@ const Electrical = ({ dispatch, actions, siteList, waterLevelSix, currentSix, ca }}>
信号:
- + +
+ +
+ {changeable ? { - setStrucId(v) - }} - options={siteList} - />} + + + { + pumpList?.map((pump, index) => { + const src = `/assets/images/electrical/${[1, 3, 5].includes(pump?.data[0]?.sMotor_State) + ? 'pump_close' : [2, 4, 6].includes(pump?.data[0]?.sMotor_State) + ? 'pump_open' : pump?.data[0]?.sMotor_State == 7 + ? 'pump_fault' : 'pump_fault'}.png` + const left = index <= 5 ? 57.6 + index * 0.25 : 51.5 + index * 0.08; + const top = index <= 5 ? 54.3 + index * 2.7 : 38 + index * 2.7; + return + + + }) + } + {/*
集水池水位{waterLevelSix[waterLevelSix?.length - 1]?.sLiquid_level?.toFixed(2) || 0}
+
池前上游水位{waterLevelSix[waterLevelSix?.length - 1]?.sGrille_level?.toFixed(2) || 0}
*/} +
+ +
+
+
}
diff --git a/web/client/src/sections/bigScreen/components/electrity/levelTrend.js b/web/client/src/sections/bigScreen/components/electrity/levelTrend.js index efff899..9fb5ac9 100644 --- a/web/client/src/sections/bigScreen/components/electrity/levelTrend.js +++ b/web/client/src/sections/bigScreen/components/electrity/levelTrend.js @@ -35,11 +35,14 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate dataZoom: [ { type: 'slider', - showDetail: false + showDetail: false, + start: 90, + end: 100, }, { type: 'inside', - + start: 90, + end: 100, }, ], tooltip: { @@ -101,7 +104,7 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate } -function mapStateToProps (state) { +function mapStateToProps(state) { const { auth, global } = state; return { user: auth.user, diff --git a/web/client/src/sections/bigScreen/components/header.js b/web/client/src/sections/bigScreen/components/header.js index d356f74..15606c8 100644 --- a/web/client/src/sections/bigScreen/components/header.js +++ b/web/client/src/sections/bigScreen/components/header.js @@ -5,11 +5,11 @@ import Weather from './public/weather'; const Header = ({ dispatch, actions, user, module, setModule, history }) => { const [tabs, setTabs] = useState([ + { title: '视频监控', key: 'video' }, { title: '基础信息', key: 'basis' }, { title: '能耗监测', key: 'capacity' }, { title: '电排远控', key: 'electrical' }, { title: '实时监测', key: 'realTime' }, - { title: '视频监控', key: 'video' }, ]) useEffect(() => { diff --git a/web/client/src/sections/bigScreen/components/index.less b/web/client/src/sections/bigScreen/components/index.less index b45a53c..070b4bc 100644 --- a/web/client/src/sections/bigScreen/components/index.less +++ b/web/client/src/sections/bigScreen/components/index.less @@ -4,10 +4,49 @@ background-image: linear-gradient(180deg, #6187e400 30%, #6187e480 100%); color: #fff; } + .ant-select:not(.ant-select-customize-input) .ant-select-selector { background-color: transparent; } + .ant-select-arrow { color: #fff; } } + +.pump-title { + .ant-select:not(.ant-select-customize-input) .ant-select-selector { + border: none; + background-color: transparent; + color: #fff; + } + + .ant-select:not(.ant-select-customize-input) .ant-select-selector { + background-color: transparent; + } + + .ant-select-arrow { + color: #fff; + } +} + +.pump-title-select-popup { + background-color: #042553; + color: #fff; + + .ant-select-item-option { + color: #fff; + } + + .ant-select-item-option-selected { + background-color: #2b78e4; + } + + .ant-select-item-option-active { + background-color: #1c56a7; + } + + .ant-empty-description { + color: #fff; + } +} \ No newline at end of file diff --git a/web/client/src/sections/bigScreen/components/realTime.js b/web/client/src/sections/bigScreen/components/realTime.js index 71cabdc..02958ba 100644 --- a/web/client/src/sections/bigScreen/components/realTime.js +++ b/web/client/src/sections/bigScreen/components/realTime.js @@ -293,8 +293,37 @@ const RealTime = ({ dispatch, actions, user, siteList, }) => { +
+ +
+ {changeable ? { - setStrucId(v) - }} - options={siteList} - />} -
+
} -function mapStateToProps (state) { +function mapStateToProps(state) { const { auth, global } = state; return { user: auth.user, diff --git a/web/client/src/sections/bigScreen/components/scale/scale.js b/web/client/src/sections/bigScreen/components/scale/scale.js new file mode 100644 index 0000000..cc0b957 --- /dev/null +++ b/web/client/src/sections/bigScreen/components/scale/scale.js @@ -0,0 +1,26 @@ +import React from 'react' +import './scale.less' +export default function Scale({ title, value }) { + return (<> +
+ +
+
-20
+
-18
+
-16
+
-14
+
-12
+
-10
+
-8
+
-6
+
-4
+
-2
+
-0
+
+
+ {value}m +
+
+
{title}
+ ) +} diff --git a/web/client/src/sections/bigScreen/components/scale/scale.less b/web/client/src/sections/bigScreen/components/scale/scale.less new file mode 100644 index 0000000..1704226 --- /dev/null +++ b/web/client/src/sections/bigScreen/components/scale/scale.less @@ -0,0 +1,44 @@ +.meter-box { + background-color: #042553; + width: 52px; + opacity: 0.8; + height: 220px; + margin-left: 16px; + position: relative; + + .electrical-meter { + display: block; + writing-mode: vertical-lr; + width: 20px; + height: 180px; + position: absolute; + left: 5px; + top: 10px; + } + + .electrical-meter::-webkit-meter-bar { + /* 设置整个进度条的颜色 */ + background-color: #415488; + } + + .electrical-meter::-webkit-meter-optimum-value { + /* 设置已完成部分的颜色 */ + background-color: #1978E5; + } + + .meter-scale { + position: absolute; + line-height: 18px; // 180 / 10 + top: 1px; // 10 - line-height / 2 + right: 10px; + font-size: 12px; + } + + .meter-text { + position: absolute; + bottom: 0px; + width: 100%; + padding-left: 3px; + background-image: linear-gradient(180deg, #6f90c400 0%, #135DFF 100%); + } +} \ No newline at end of file diff --git a/web/client/src/sections/bigScreen/containers/systemManagement.js b/web/client/src/sections/bigScreen/containers/systemManagement.js index 13add72..b8030f7 100644 --- a/web/client/src/sections/bigScreen/containers/systemManagement.js +++ b/web/client/src/sections/bigScreen/containers/systemManagement.js @@ -18,7 +18,7 @@ const SystemManagement = ({ dispatch, actions, user, history }) => { const { bigScreen } = actions const isMobile = window.innerWidth <= 1080 ? true : false; - const [module, setModule] = useState('basis') + const [module, setModule] = useState('video') const [showData, setshowData] = useState([]) const [siteList, setSiteList] = useState([]) //站点列表 const [siteData, setSitData] = useState() //站点列表 @@ -53,6 +53,7 @@ const SystemManagement = ({ dispatch, actions, user, history }) => { {!isMobile &&
} + {module === 'video' &&