电排远控

web/client/src/sections/bigScreen/components/capacity.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { Spin, Card, Modal, Select, Carousel, Progress } from 'antd';
-import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form';
 import moment from 'moment'
 import ReactECharts from 'echarts-for-react';
 import './index.less'
@@ -603,15 +602,9 @@ const Capacity = ({ actions, dispatch, user, }) => {
                   value={strucId}
                   style={{ width: 155 }}
                   optionFilterProp="children"
-                  onChange={() => {
-
-                  }}
-                  onSearch={() => {
-
+                  onSelect={v => {
+                     setStrucId(v)
                   }}
-                  filterOption={(input, option) =>
-                     (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
-                  }
                   options={siteList}
                />
             </div>
@@ -683,7 +676,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
             width: '31%', height: '100%',
          }}>
             <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-               <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>液位趋势</div>
+               <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>液位趋势</div>
             </div>
             <ReactECharts
                option={{
@@ -748,7 +741,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
                }}
                notMerge={true}
                lazyUpdate={true}
-               style={{ width: "100%", height: "90%" }}
+               style={{ width: "100%", height: "100%" }}
                theme={'ReactEChart'}
             />
 
@@ -761,7 +754,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
             width: '31%', height: '100%',
          }}>
             <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-               <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>电流趋势</div>
+               <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>电流趋势</div>
                <Select
                   className='bigscreen-select'
                   bordered={false}
@@ -828,7 +821,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
                }}
                notMerge={true}
                lazyUpdate={true}
-               style={{ width: "100%", height: "90%" }}
+               style={{ width: "100%", height: "100%" }}
                theme={'ReactEChart'}
             />
          </div>
@@ -840,7 +833,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
             width: '31%', height: '100%',
          }}>
             <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-               <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>用电趋势</div>
+               <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>用电趋势</div>
                <Select
                   className='bigscreen-select'
                   bordered={false}
@@ -907,7 +900,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
                }}
                notMerge={true}
                lazyUpdate={true}
-               style={{ width: "100%", height: "90%" }}
+               style={{ width: "100%", height: "100%" }}
                theme={'ReactEChart'}
             />
          </div>

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

@@ -1,17 +1,289 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import { Spin, Card, Modal, TreeSelect, message } from 'antd';
-import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form';
-import Title from 'antd/lib/skeleton/Title';
+import { Select } from 'antd';
+import moment from 'moment'
+import ReactECharts from 'echarts-for-react';
+import RealTimeStatus from '../components/electrity/realTimeStatus';
+import LineBoxStatus from '../components/electrity/lineBoxStatus';
+import VoltageTrend from '../components/electrity/voltageTrend';
+import LevelTrend from '../components/electrity/levelTrend';
 
-const Electrical = ({ user, module, setModule }) => {
+const Electrical = ({ dispatch, actions, user, module, setModule }) => {
 
+   const { bigScreen } = actions
+   const [pageLeft, setPageLeft] = useState(0)  //左边翻页
+   const [pageRight, setPageRight] = useState(0)  //左边翻页
+   const [siteList, setSiteList] = useState([])    //站点列表
+   const [pumpList, setPumpList] = useState([])    //水泵列表
+   const [cabinetList, setCabinetList] = useState([])    //水泵列表
+   const [strucId, setStrucId] = useState() //站点ID
+   const [pumpId, setPumpId] = useState() //水泵id
+   const [cabinetId, setCabinetId] = useState() //进线柜id
+   const [usePumpId, setUsePumpId] = useState() //水泵id
+   const [voltagePumpId, setVoltagePumpId] = useState([]) //水泵电压id
+   const [pumpOne, setPumpOne] = useState({ data: [] })  //单个水泵数据
+   const [voltagepump, setVoltagePump] = useState([])  //单个水泵数据
 
+   const [cabinetOne, setCabinetOne] = useState({ data: [] })  //单个进线柜数据
+   const [cabinetData, setCabinetData] = useState([])   //进线柜数据
+   const [centreData, setCentreData] = useState({})   //中间数据
+   const [depthWater, setDepthWater] = useState([]) //液位趋势
+   const [electricityTrend, setElectricityTrend] = useState([])   //电流趋势
+   const [useTrend, setUseTrend] = useState([])   //用电趋势
 
+   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 })) || [])
+            setStrucId(res.payload.data[0]?.id)
+         }
+      })
+   }, [])
 
+   useEffect(async () => {
+      if (strucId) {
+         await dispatch(bigScreen.axyData({ type: 'get', url: `structures/${strucId}/factors` })).then(async r => {
+            if (r.success) {
+               //水泵信息
+               let waterId = r.payload.data?.find(v => v.name == '泵站水泵')?.id
+               if (waterId) {
+                  await dispatch(bigScreen.axyData({
+                     type: 'get', url: `structures/${strucId}/stations`,
+                     params: { query: { factorId: waterId } }
+                  })).then(async p => {
+                     if (p.success) {
+                        let dataId = []
+                        let voltageId = []
+                        p.payload.data?.map(v => {
+                           v.groups?.map(s => {
+                              s.stations?.map(f => {
+                                 dataId.push(f.id)
+                                 if (voltageId?.length < 3) {
+                                    voltageId.push(f.id)
+                                 }
+                              })
+                           })
+                        })
+                        setPumpList(p.payload.data[0]?.groups[0]?.stations)
+                        setPumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
+                        setVoltagePumpId(voltageId)
+                        setUsePumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
+                        // if (dataId.length) {
+                        //    // 当前时间
+                        //    await dispatch(bigScreen.axyData({
+                        //       type: 'get', url: `stations/theme/data`, params: {
+                        //          query: {
+                        //             stations: dataId.join(),
+                        //             startTime: moment().startOf('day').format('YYYY:MM:DD HH:mm:ss'),
+                        //             endTime: moment().endOf('day').format('YYYY:MM:DD HH:mm:ss'),
+                        //             limit: 1
+                        //          }
+                        //       }
+                        //    })).then(d => {
+                        //       if (d.success) {
+                        //       }
+                        //    })
+                        // }
 
-   return <div style={{ width: '100%', height: '100%' }}>
-      电排远控
+                     }
+                  })
+               }
+               // 进线柜
+               let wireCabinetId = r.payload.data?.find(v => v.name == '泵站进线柜')?.id
+               if (wireCabinetId) {
+                  await dispatch(bigScreen.axyData({
+                     type: 'get', url: `structures/${strucId}/stations`,
+                     params: { query: { factorId: wireCabinetId } }
+                  })).then(async p => {
+                     if (p.success) {
+                        let dataId = []
+                        p.payload.data?.map(v => {
+                           v.groups?.map(s => {
+                              s.stations?.map(f => {
+                                 dataId.push({ value: f.id, label: f.name })
+                              })
+                           })
+                        })
+                        setCabinetList(dataId)
+                        setCabinetId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
+                        // if (dataId.length) {
+                        //    // 当前时间
+                        //    await dispatch(bigScreen.axyData({
+                        //       type: 'get', url: `stations/theme/data`, params: {
+                        //          query: {
+                        //             stations: dataId.join(),
+                        //             startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+                        //             endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
+                        //             limit: 1
+                        //          }
+                        //       }
+                        //    })).then(d => {
+                        //       if (d.success) {
+
+                        //       }
+                        //    })
+
+                        // }
+                     }
+                  })
+               }
+
+
+               // //泵站信息
+               let informationId = r.payload.data?.find(v => v.name == '泵站信息')?.id
+               if (informationId) {
+                  await dispatch(bigScreen.axyData({
+                     type: 'get', url: `structures/${strucId}/stations`,
+                     params: { query: { factorId: informationId } }
+                  })).then(async p => {
+                     if (p.success) {
+
+                        // 液位趋势
+                        await dispatch(bigScreen.axyData({
+                           type: 'get', url: `stations/theme/data`, params: {
+                              query: {
+                                 stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
+                                 startTime: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
+                                 endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+                                 limit: 1440
+                              }
+                           }
+                        })).then(d => {
+                           if (d.success) {
+                              setDepthWater(d.payload.data?.stations[0]?.data)
+                           }
+                        })
+                     }
+
+                  })
+               }
+            }
+         })
+      }
+
+   }, [strucId])
+
+   useEffect(async () => {
+      if (pumpId) {
+         await dispatch(bigScreen.axyData({
+            type: 'get', url: `stations/theme/data`, params: {
+               query: {
+                  stations: pumpId,
+                  startTime: moment().startOf('day').format('YYYY:MM:DD HH:mm:ss'),
+                  endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+                  limit: 1
+               }
+            }
+         })).then(d => {
+            if (d.success) {
+               setPumpOne(d.payload.data?.stations[0] || { data: [] })
+            }
+         })
+
+      }
+   }, [pumpId])
+
+   useEffect(async () => {
+      if (cabinetId) {
+         await dispatch(bigScreen.axyData({
+            type: 'get', url: `stations/theme/data`, params: {
+               query: {
+                  stations: cabinetId,
+                  startTime: moment().startOf('day').format('YYYY:MM:DD HH:mm:ss'),
+                  endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+                  limit: 1
+               }
+            }
+         })).then(d => {
+            if (d.success) {
+               setCabinetOne(d.payload.data?.stations[0] || { data: [] })
+            }
+         })
+
+      }
+   }, [cabinetId])
+
+   useEffect(async () => {
+      if (voltagePumpId?.length > 0) {
+         await dispatch(bigScreen.axyData({
+            type: 'get', url: `stations/theme/data`, params: {
+               query: {
+                  stations: voltagePumpId?.join(),
+                  startTime: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
+                  endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
+                  limit: 1440
+               }
+            }
+         })).then(d => {
+            if (d.success) {
+               setVoltagePump(d.payload.data?.stations || [])
+            }
+         })
+
+      }
+   }, [voltagePumpId])
+
+
+
+   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} />
+         <LineBoxStatus cabinetId={cabinetId} cabinetList={cabinetList} setCabinetId={setCabinetId} cabinetOne={cabinetOne} />
+         <VoltageTrend pumpList={pumpList} voltagePumpId={voltagePumpId} setVoltagePumpId={setVoltagePumpId} data={voltagepump} />
+         <LevelTrend depthWater={depthWater} />
+         <div style={{
+            width: "30%", height: 160, position: "absolute", left: '35%', top: "8%",
+            display: 'flex', justifyContent: 'space-between',
+         }}>
+            <div style={{
+               backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
+               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
+               fontSize: 20, width: 160, height: 160, textAlign: 'center',
+            }}>
+               <div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
+                  环境湿度：</div>{depthWater[0]?.sHumidity}  %
+            </div>
+            <div style={{
+               backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
+               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
+               fontSize: 20, width: 160, height: 160, textAlign: 'center',
+            }}>
+               <div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
+                  环境湿度：</div>{depthWater[0]?.sTEMP || "--"}  ℃
+            </div>
+            <div style={{
+               backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
+               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
+               fontSize: 20, width: 160, height: 160, textAlign: 'center',
+            }}>
+               <div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
+                  信号：</div>{depthWater[0]?.CSQ4G}
+            </div>
+         </div>
+         <img style={{ width: "44%", height: "46%", position: "absolute", left: "28%", top: "34%" }} src={`/assets/images/electrical/centre.png`} />
+         <div className='site' style={{
+            display: 'flex', justifyContent: 'center', alignItems: 'center',
+            width: '40%', bottom: 10, position: 'absolute', left: "28%"
+         }}>
+            <img style={{ width: 67, height: 68, marginLeft: 94 }} src='/assets/images/monitor/site.png' />
+            <div style={{
+               width: 180, height: 41, backgroundImage: 'url(/assets/images/monitor/title.png)',
+               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
+               textAlign: 'center', lineHeight: '41px', fontSize: 20, color: '#FFF', fontStyle: "italic"
+            }}>{siteList?.filter(v => v.value == strucId)[0]?.label}</div>
+            <Select
+               showSearch
+               placeholder="请选择站点"
+               value={strucId}
+               style={{ width: 155 }}
+               optionFilterProp="children"
+               onSelect={v => {
+                  setStrucId(v)
+               }}
+               options={siteList}
+            />
+         </div>
+      </div>
 
    </div >
 }
@@ -21,6 +293,7 @@ function mapStateToProps (state) {
    return {
       user: auth.user,
       clientHeight: global.clientHeight,
+      actions: global.actions,
    };
 }
 

web/client/src/sections/bigScreen/components/electrity/levelTrend.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Select } from 'antd';
+import ReactECharts from 'echarts-for-react';
+import moment from 'moment'
+
+const { Option } = Select;
+
+const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWater }) => {
+
+
+
+
+
+   return <div style={{
+      backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
+      backgroundSize: '100% 36px',
+      backgroundPosition: '0 0',
+      backgroundRepeat: 'no-repeat', zIndex: 2,
+      width: '26%', height: '60%', minWidth: 360, position: "absolute", left: 10, top: "44%"
+   }}>
+      <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+         <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>液位趋势</div>
+      </div>
+      <div style={{ width: '100%', height: 'calc(100% - 46px)', marginTop: 10, backgroundImage: "linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)" }}>
+         <ReactECharts
+            option={{
+               title: {
+                  // text: v.name, 
+               },
+               grid: {
+                  // width: 300,
+                  // height: 200
+               },
+               dataZoom: [
+                  {
+                     type: 'slider',
+                     // startValue: depthWater?.map(v=>v.time) 
+                  },
+                  {
+                     type: 'inside',
+                  },
+               ],
+               tooltip: {
+                  trigger: 'axis'
+               },
+               legend: {
+                  data: ['集水池液位', '池前（上游）液位'],
+                  right: '10%',
+                  textStyle: {
+                     color: '#FFF',
+                  },
+               },
+               xAxis: {
+                  type: 'category',
+                  // name: "时间",
+                  boundaryGap: false,
+                  data: depthWater?.map(v => moment(v.time).format('MM-DD HH:mm'))
+               },
+               yAxis: {
+                  type: 'value',
+                  name: "单位：M",
+                  areaStyle: {
+                     color: '#FFF',
+                  },
+               },
+               series: [
+                  {
+                     type: 'line',
+                     name: '集水池液位',
+                     smooth: true,
+                     areaStyle: {
+                        color: '#0e9cff26',
+                     },
+                     data: depthWater?.map(v => v.sLiquid_level)
+                  }, {
+                     type: 'line',
+                     name: '池前（上游）液位',
+                     smooth: true,
+                     areaStyle: {
+                        color: '#0e9cff26',
+                     },
+                     data: depthWater?.map(v => v.sGrille_level)
+                  },
+               ]
+            }}
+            notMerge={true}
+            lazyUpdate={true}
+            style={{ width: "100%", height: "100%" }}
+            theme={'ReactEChart'}
+         />
+      </div>
+   </div>
+
+}
+
+function mapStateToProps (state) {
+   const { auth, global } = state;
+   return {
+      user: auth.user,
+      clientHeight: global.clientHeight,
+   };
+}
+
+export default connect(mapStateToProps)(LevelTrend);

web/client/src/sections/bigScreen/components/electrity/lineBoxStatus.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Select } from 'antd';
+
+
+
+const LineBoxStatus = ({ user, cabinetId, cabinetList, setCabinetId, cabinetOne }) => {
+
+
+
+
+
+   return <div style={{
+      backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
+      backgroundSize: '100% 36px', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat',zIndex:2,
+      width: '26%', height: '40%', minWidth: 360, position: "absolute", right: 10, top: 0
+   }}>
+      <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+         <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>进线柜状态</div>
+         <Select
+            className='bigscreen-select'
+            bordered={false}
+            value={cabinetId}
+            optionFilterProp="children"
+            onSelect={v => {
+               setCabinetId(v)
+            }}
+            options={cabinetList || []}
+         />
+      </div>
+      <div style={{ height: "calc(100% - 36px)", display: 'flex', flexDirection: "column", justifyContent: 'space-between' }}>
+         <div style={{ width: '100%', height: 116, marginTop: 20, display: 'flex', justifyContent: 'space-between', }}>
+
+            <img src={`/assets/images/electrical/cabinet.png`} style={{ width: 98, height: 115 }} />
+            <div style={{ width: 'calc(100% - 110px)', display: 'flex', flexDirection: "column", justifyContent: 'space-between' }}>
+               <div style={{
+                  height: 30,
+                  display: 'flex', alignItems: "center", justifyContent: 'space-between', backgroundImage: 'url(/assets/images/electrical/end-b1.png)',
+                  backgroundSize: '100% 560%', backgroundPosition: '0 16px', backgroundRepeat: 'no-repeat',
+               }}>
+                  <div style={{ marginLeft: 6, fontFamily: 'YouSheBiaoTiHei' }}>{cabinetOne?.name}</div>
+                  <div style={{ marginRight: 6 }}>进线柜型号</div>
+               </div>
+               <div style={{
+                  height: 30, borderBottom: '1px solid #96b8bcba',
+                  display: 'flex', alignItems: "center", justifyContent: 'space-between',
+               }}>
+                  <div style={{ marginLeft: 6 }}>电柜状态：</div>
+                  <div style={{ marginRight: 6, color: cabinetOne?.data[0]?.sQF_CLOSING ? "#00D748" : "#E83E2B" }}>{cabinetOne?.data[0]?.sQF_CLOSING ? "合闸" : "分闸"}</div>
+               </div>
+               <div style={{
+                  height: 30, borderBottom: '1px solid #96b8bcba',
+                  display: 'flex', alignItems: "center", justifyContent: 'space-between',
+               }}>
+                  <div style={{ marginLeft: 6 }}>总用电量：</div>
+                  <div style={{ marginRight: 6 }}>{cabinetOne?.data[0]?.eQF_EQ} kwh</div>
+               </div>
+            </div>
+         </div>
+         <div style={{
+            backgroundImage: 'url(/assets/images/electrical/end-b.png)',
+            backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat',
+            width: '100%', height: 43, display: 'flex', justifyContent: "space-between", alignItems: 'center'
+         }}>
+            <div style={{ display: 'flex', width: "48%" }}>
+               <div style={{ width: 80,textIndent:10,fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>A相电流：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{cabinetOne?.data[0]?.eQF_A_A} A</div>
+            </div>
+            <div style={{ display: 'flex', width: "48%" }}>
+               <div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>A相电压：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{cabinetOne?.data[0]?.eQF_A_V} V</div>
+            </div>
+         </div>
+         <div style={{
+            backgroundImage: 'url(/assets/images/electrical/end-b.png)',
+            backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat',
+            width: '100%', height: 43, display: 'flex', justifyContent: "space-between", alignItems: 'center'
+         }}>
+            <div style={{ display: 'flex', width: "48%" }}>
+               <div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>B相电流：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{cabinetOne?.data[0]?.eQF_B_A} A</div>
+            </div>
+            <div style={{ display: 'flex', width: "48%" }}>
+               <div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>B相电压：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{cabinetOne?.data[0]?.eQF_B_V} V</div>
+            </div>
+         </div>
+         <div style={{
+            backgroundImage: 'url(/assets/images/electrical/end-b.png)',
+            backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat',
+            width: '100%', height: 43, display: 'flex', justifyContent: "space-between", alignItems: 'center'
+         }}>
+            <div style={{ display: 'flex', width: "48%" }}>
+               <div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>C相电流：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{cabinetOne?.data[0]?.eQF_C_A} A</div>
+            </div>
+            <div style={{ display: 'flex', width: "48%" }}>
+               <div style={{ width: 70, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>B相电压：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{cabinetOne?.data[0]?.eQF_C_V} V</div>
+            </div>
+         </div>
+      </div>
+
+   </div>
+
+}
+
+function mapStateToProps (state) {
+   const { auth, global } = state;
+   return {
+      user: auth.user,
+      clientHeight: global.clientHeight,
+   };
+}
+
+export default connect(mapStateToProps)(LineBoxStatus);

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

@@ -0,0 +1,107 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Select } from 'antd';
+
+
+
+const RealTimeStatus = ({ user, pumpId, pumpList, setPumpId, pumpOne }) => {
+
+
+
+
+
+   return <div style={{
+      backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
+      backgroundSize: '100% 36px',
+      backgroundPosition: '0 0',
+      backgroundRepeat: 'no-repeat',zIndex:2,
+      width: '26%', height: '40%', minWidth: 360, position: "absolute", left: 10, top: 0
+   }}>
+      <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+         <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>实时状态</div>
+         <Select
+            className='bigscreen-select'
+            bordered={false}
+            value={pumpId}
+            optionFilterProp="children"
+            onSelect={v => {
+               setPumpId(v)
+            }}
+            options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []}
+         />
+      </div>
+      <div style={{ height: "calc(100% - 36px)", display: 'flex', flexDirection: "column", justifyContent: 'space-between' }}>
+         <div style={{ width: '100%', height: 116, marginTop: 20, display: 'flex', justifyContent: 'space-between', }}>
+            {pumpOne?.data ? <img src={`/assets/images/electrical/${[1, 3, 5].includes(pumpOne?.data[0]?.sMotor_RunMode)
+               ? 'close' : [2, 4, 6].includes(pumpOne?.data[0]?.sMotor_RunMode)
+                  ? 'open' : pumpOne?.data[0]?.sMotor_RunMode == 7
+                     ? '故障' : '无状态'}.png`} style={{ width: 98, height: 115 }} />
+               : <img src={`/assets/images/electrical/open.png`} style={{ width: 98, height: 115 }} />}
+            <div style={{ width: 'calc(100% - 110px)', display: 'flex', flexDirection: "column", justifyContent: 'space-between' }}>
+               <div style={{
+                  height: 30,
+                  display: 'flex', alignItems: "center", justifyContent: 'space-between', backgroundImage: 'url(/assets/images/electrical/end-b1.png)',
+                  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>
+               <div style={{
+                  height: 30, borderBottom: '1px solid #96b8bcba',
+                  display: 'flex', alignItems: "center", justifyContent: 'space-between',
+               }}>
+                  <div style={{ marginLeft: 6 }}>控制方式：</div>
+                  <div style={{ marginRight: 6 }}>现场就地</div>
+               </div>
+               <div style={{
+                  height: 30, borderBottom: '1px solid #96b8bcba',
+                  display: 'flex', alignItems: "center", justifyContent: 'space-between',
+               }}>
+                  <div style={{ marginLeft: 6 }}>远程模式：</div>
+                  <div style={{ marginRight: 6 }}>平台手动</div>
+               </div>
+            </div>
+         </div>
+         <div style={{
+            backgroundImage: 'url(/assets/images/electrical/end-b.png)',
+            backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat',
+            width: '100%', height: 43, display: 'flex', justifyContent: "space-between", alignItems: 'center'
+         }}>
+            <div style={{ display: 'flex', width: "48%" }}>
+               <div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>单次时间：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{pumpOne?.data[0]?.dPump_T_S} min</div>
+            </div>
+            <div style={{ display: 'flex', width: "48%" }}>
+               <div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>积累时间：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{pumpOne?.data[0]?.dPump_T_T} h</div>
+            </div>
+         </div>
+         <div style={{
+            backgroundImage: 'url(/assets/images/electrical/end-b.png)',
+            backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat',
+            width: '100%', height: 43, display: 'flex', justifyContent: "space-between", alignItems: 'center'
+         }}>
+            <div style={{ display: 'flex', width: "48%" }}>
+               <div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>运行电流：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{pumpOne?.data[0]?.eMotor_A_A} min</div>
+            </div>
+            <div style={{ display: 'flex', width: "48%" }}>
+               <div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>运行电压：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{pumpOne?.data[0]?.eMotor_A_V} h</div>
+            </div>
+         </div>
+      </div>
+
+   </div>
+
+}
+
+function mapStateToProps (state) {
+   const { auth, global } = state;
+   return {
+      user: auth.user,
+      clientHeight: global.clientHeight,
+   };
+}
+
+export default connect(mapStateToProps)(RealTimeStatus);

web/client/src/sections/bigScreen/components/electrity/voltageTrend.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Select } from 'antd';
+import ReactECharts from 'echarts-for-react';
+import moment from 'moment'
+
+const { Option } = Select;
+
+const VoltageTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, data }) => {
+
+
+
+
+
+   return <div style={{
+      backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
+      backgroundSize: '100% 36px',
+      backgroundPosition: '0 0',
+      backgroundRepeat: 'no-repeat',zIndex:2,
+      width: '26%', height: '60%', minWidth: 360, position: "absolute", right: 10, top: "44%"
+   }}>
+      <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+         <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>电压趋势</div>
+         <Select
+            className='bigscreen-select'
+            bordered={false}
+            style={{ width: 150 }}
+            value={voltagePumpId}
+            mode="multiple"
+            maxTagCount={1}
+            optionFilterProp="children"
+            onChange={v => {
+               if (v?.length < 4) {
+                  setVoltagePumpId(v)
+               }
+            }}
+
+         >
+            {pumpList?.map(v => <Option value={v.id}>{v.name}</Option>)}
+         </Select>
+      </div>
+      <div style={{ width: '100%', height: 'calc(100% - 46px)', marginTop: 10, backgroundImage: "linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)" }}>
+         <ReactECharts
+            option={{
+               title: {
+                  // text: v.name, 
+               },
+               grid: {
+                  // width: 300,
+                  // height: 200
+               },
+               dataZoom: [
+                  {
+                     type: 'slider',
+                     // startValue: depthWater?.map(v=>v.time) 
+                  },
+                  {
+                     type: 'inside',
+                  },
+               ],
+               tooltip: {
+                  trigger: 'axis'
+               },
+               legend: {
+                  data: data?.map(v => v.name) || [],
+                  right: '10%',
+                  textStyle: {
+                     color: '#FFF',
+                  },
+               },
+               xAxis: {
+                  type: 'category',
+                  // name: "时间",
+                  boundaryGap: false,
+                  data: data[0]?.data?.map(v => moment(v.time).format('MM-DD HH:mm')) || []
+               },
+               yAxis: {
+                  type: 'value',
+                  name: "单位：M",
+                  areaStyle: {
+                     color: '#FFF',
+                  },
+               },
+               series: data?.map(v => ({
+                  type: 'line',
+                  name: v.name,
+                  smooth: true,
+                  areaStyle: {
+                     color: '#0e9cff26',
+                  },
+                  data: v.data?.map(s => s.eMotor_A_V) || []
+               })) || []
+
+            }}
+            notMerge={true}
+            lazyUpdate={true}
+            style={{ width: "100%", height: "90%" }}
+            theme={'ReactEChart'}
+         />
+      </div>
+   </div>
+
+}
+
+function mapStateToProps (state) {
+   const { auth, global } = state;
+   return {
+      user: auth.user,
+      clientHeight: global.clientHeight,
+   };
+}
+
+export default connect(mapStateToProps)(VoltageTrend);

web/client/src/sections/bigScreen/components/header.js

@@ -7,8 +7,6 @@ import Title from 'antd/lib/skeleton/Title';
 const Header = ({ dispatch, actions, user, module, setModule, history }) => {
 
 
-
-
    return <div style={{ width: '100%', height: 160 }}>
       <div style={{
          width: '100%', height: 130,
@@ -46,7 +44,7 @@ const Header = ({ dispatch, actions, user, module, setModule, history }) => {
          }}>
             {[{ title: '基础信息', key: 'basis' },
             { title: '能耗监测', key: 'capacity' },
-            { title: '电排远控', key: 'electrical ' },
+            { title: '电排远控', key: 'electrical' },
             { title: '实时监测', key: 'realTime' },].map(v => {
                return <div key={v.key} style={{
                   width: 100, height: 30, lineHeight: '30px',

web/client/src/sections/bigScreen/containers/style.less

@@ -1,58 +1,66 @@
 .map {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .super-screen-top {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 130px;
-    z-index: 6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 130px;
+  z-index: 6;
 }
 
 .super-screen-bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 6;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 6;
 }
 
 .header {
-    position: absolute;
-    width: 100%;
-    z-index: 6;
+  position: absolute;
+  width: 100%;
+  z-index: 6;
 }
 
 .bigscreen-select {
-    .ant-select-selector {
-        background-color: transparent !important;
-        height: 18px !important;
-    }
-
-    .ant-select-focused {
-        border: 0px;
-    }
-
-    .ant-select-selection-item {
-        color: #fff;
-        font-family: YouSheBiaoTiHei;
-        height: 16px !important;
-        line-height: 16px !important;
-        text-align: right;
-    }
-
-    .ant-select-selection-search {
-        color: #fff;
-    }
-
-    .ant-select-arrow {
-        color: #fff;
-    }
+  .ant-select-selector {
+    background-color: transparent !important;
+    height: 18px !important;
+  }
+
+  .ant-select-focused {
+    border: 0px;
+  }
+
+  .ant-select-selection-item {
+    color: #fff;
+    font-family: YouSheBiaoTiHei;
+    height: 16px !important;
+    line-height: 10px !important;
+    text-align: right;
+  }
+
+  .ant-select-selection-search {
+    color: #fff;
+  }
+
+  .ant-select-arrow {
+    color: #fff;
+  }
+  .ant-select-selection-item {
+    background: transparent;
+    border: 0;
+  }
+  .ant-select-multiple,
+  .ant-select-selection-item-remove {
+    color: #fff;
+  }
 }

web/client/src/sections/bigScreen/containers/systemManagement.js

@@ -15,7 +15,7 @@ const TreeNode = Tree.TreeNode;
 
 const SystemManagement = ({ clientHeight, user, history }) => {
 
-   const [module, setModule] = useState('capacity')
+   const [module, setModule] = useState('basis')
    const [showData, setshowData] = useState([])
    useEffect(() => {