(*) 大屏显示优化

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'
          }}>
+            <div className='pump-title' style={{
+               display: 'flex', justifyContent: 'center', alignItems: 'center',
+               width: '40%', top: 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"
+               }}>
+                  {changeable ? <Select
+                     popupClassName="pump-title-select-popup"
+                     bordered={false}
+                     style={{ minWidth: 150, fontSize: 20 }}
+                     showSearch
+                     filterOption={(input, option) =>
+                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                     }
+                     placeholder="请选择站点"
+                     value={strucId}
+                     optionFilterProp="children"
+                     onSelect={v => {
+                        setStrucId(v)
+                     }}
+                     options={siteList}
+                  /> : siteList?.filter(v => v.value == strucId)[0]?.label}
+               </div>
+            </div>
+
             <div style={{
                backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
                backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
                color: '#00FFF8', fontSize: 20, width: 160, height: 160, textAlign: 'center',
-               position: 'absolute', top: '6%', left: 10,
+               position: 'absolute', top: '16%', left: 10,
             }}>
                <div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
                   湿度：</div>
                <span style={{ fontFamily: "D-DIN-Italic" }}>{capacity?.sun?.sHumidity}</span>  %
             </div>
-            <div style={{ width: 240, color: '#00FFF8', fontSize: 20, position: 'absolute', top: '15%', left: "calc(50% - 120px)", display: 'inline-block' }}>
+            <div style={{ width: 240, color: '#00FFF8', fontSize: 20, position: 'absolute', top: '25%', left: "calc(50% - 120px)", display: 'inline-block' }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                   <span style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600, }}>
                      总用量：</span><span title={capacity?.sun?.daySun?.toFixed(2)} style={{ fontFamily: "D-DIN-Italic", lineHeight: "16px", display: "inline-block", marginRight: 6 }}>{capacity?.sun?.daySun?.toFixed(2)}</span>  kWh
@@ -213,7 +242,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren
                backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
                backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
                color: '#00FFF8', fontSize: 20, width: 160, height: 160, textAlign: 'center',
-               position: 'absolute', top: '6%', right: -10,
+               position: 'absolute', top: '16%', right: -10,
             }}>
                <div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
                   温度：</div>
@@ -224,7 +253,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren
                backgroundImage: 'url(/assets/images/monitor/oblique.png)',
                backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
                color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center',
-               position: 'absolute', top: '35%', left: -60,
+               position: 'absolute', top: '45%', left: -60,
             }}>
                <div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
                   今年用电：</div>
@@ -234,7 +263,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren
                backgroundImage: 'url(/assets/images/monitor/oblique.png)',
                backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
                color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center',
-               position: 'absolute', top: '54%', left: 0,
+               position: 'absolute', top: '64%', left: 0,
             }}>
                <div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
                   当月用电：</div>
@@ -244,7 +273,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren
                backgroundImage: 'url(/assets/images/monitor/oblique.png)',
                backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
                color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center',
-               position: 'absolute', top: '67%', left: 'calc(50% - 80px)',
+               position: 'absolute', top: '77%', left: 'calc(50% - 80px)',
             }}>
                <div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
                   当日用电：</div>
@@ -254,7 +283,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren
             <div style={{
                backgroundImage: 'url(/assets/images/monitor/oblique.png)',
                backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
-               height: 130, width: 180, position: 'absolute', top: '37%', right: 0,
+               height: 130, width: 180, position: 'absolute', top: '47%', right: 0,
                display: 'flex', flexDirection: 'column', alignItems: 'center'
             }}>
                <div style={{ width: "100%", height: "100%", position: "relative" }}>
@@ -327,32 +356,8 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren
                      theme={'ReactEChart'}
                   />
                </div>
-
             </div>
 
-
-            <div className='site' style={{
-               display: 'flex', justifyContent: 'center', alignItems: 'center',
-               width: '100%', tpo: '80%', position: 'absolute', top: '80%'
-            }}>
-               <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>
-               {changeable && <Select
-                  showSearch
-                  placeholder="请选择站点"
-                  value={strucId}
-                  style={{ width: 155 }}
-                  optionFilterProp="children"
-                  onSelect={v => {
-                     setStrucId(v)
-                  }}
-                  options={siteList}
-               />}
-            </div>
          </div>
          {/* 进线柜 */}
          <div style={{ width: '30%', height: '100%', display: 'flex', justifyContent: 'center', }}>
@@ -682,7 +687,7 @@ const Capacity = ({ actions, dispatch, siteList, capacity, waterLevelSix, curren
    </div >
 }
 
-function mapStateToProps (state) {
+function mapStateToProps(state) {
    const { auth, global, capacity, waterLevelSix, currentSix } = state;
 
 

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
             }}>
                <div style={{ fontSize: 40, color: '#E2F8FF', fontWeight: 600 }}>
                   信号：</div>
-               <img width={40} height={40} src='/assets/images/electrical/signal_3.png' />
+               <img width={40} height={40} src='/assets/images/electrical/signal_4.png' />
             </div>
          </div>
          <RealTimeStatus
@@ -145,8 +146,37 @@ const Electrical = ({ dispatch, actions, siteList, waterLevelSix, currentSix, ca
          <LevelTrend
             depthWater={waterLevelSix}
          />
+         <div className='pump-title' style={{
+            display: 'flex', justifyContent: 'center', alignItems: 'center',
+            width: '40%', top: 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"
+            }}>
+               {changeable ? <Select
+                  popupClassName="pump-title-select-popup"
+                  bordered={false}
+                  style={{ minWidth: 150, fontSize: 20 }}
+                  showSearch
+                  filterOption={(input, option) =>
+                     (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                  }
+                  placeholder="请选择站点"
+                  value={strucId}
+                  optionFilterProp="children"
+                  onSelect={v => {
+                     setStrucId(v)
+                  }}
+                  options={siteList}
+               /> : siteList?.filter(v => v.value == strucId)[0]?.label}
+            </div>
+         </div>
+
          <div style={{
-            width: "30%", height: 160, position: "absolute", left: '35%', top: "8%",
+            width: "30%", height: 160, position: "absolute", left: '35%', top: "18%",
             display: 'flex', justifyContent: 'space-between',
          }}>
             <div style={{
@@ -176,33 +206,40 @@ const Electrical = ({ dispatch, actions, siteList, waterLevelSix, currentSix, ca
                <div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
                   信号：</div>
                {/* <span style={{ color: '#00FFF8', fontFamily: "D-DIN-Italic" }}>{waterLevelSix[waterLevelSix.length - 1]?.CSQ4G || "--"}</span> */}
-               <img src='/assets/images/electrical/signal_3.png' />
+               <img src='/assets/images/electrical/signal_4.png' />
             </div>
          </div>
-         <img style={{ width: "44%", height: "46%", position: "absolute", left: "28%", top: "34%" }} src={`/assets/images/electrical/centre.png`} />
-         <div style={{ background: '#102d4c94', border: '1px solid #4CA1FF', position: "absolute", left: "33%", top: "58%" }}>集水池水位<span style={{ color: '#FFCB00', fontFamily: 'DIN-Medium' }}>{waterLevelSix[waterLevelSix?.length - 1]?.sLiquid_level?.toFixed(2) || 0}</span>米</div>
-         <div style={{ background: '#102d4c94', border: '1px solid #4CA1FF', position: "absolute", left: "36%", top: "70%" }}>池前上游水位<span style={{ color: '#FFCB00', fontFamily: 'DIN-Medium' }}>{waterLevelSix[waterLevelSix?.length - 1]?.sGrille_level?.toFixed(2) || 0}</span>米</div>
-         <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>
-            {changeable && <Select
-               showSearch
-               placeholder="请选择站点"
-               value={strucId}
-               style={{ width: 155 }}
-               optionFilterProp="children"
-               onSelect={v => {
-                  setStrucId(v)
-               }}
-               options={siteList}
-            />}
+
+         <img style={{ width: "46%", height: "84%", position: "absolute", left: "27%", top: "25%" }} src={`/assets/images/electrical/centre2.png`} />
+         {
+            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 <Tooltip title={pump.name} color="#042553">
+                  <img src={src} style={{
+                     width: 82,
+                     height: 41,
+                     position: "absolute",
+                     left: `${left}%`,
+                     top: `${top}%`,
+                     transform: `scaleX(${index <= 5 ? 1 : -1})`,
+                     cursor: 'pointer',
+                  }}
+                  />
+               </Tooltip>
+            })
+         }
+         {/* <div style={{ background: '#102d4c94', border: '1px solid #4CA1FF', position: "absolute", left: "33%", top: "58%" }}>集水池水位<span style={{ color: '#FFCB00', fontFamily: 'DIN-Medium' }}>{waterLevelSix[waterLevelSix?.length - 1]?.sLiquid_level?.toFixed(2) || 0}</span>米</div>
+         <div style={{ background: '#102d4c94', border: '1px solid #4CA1FF', position: "absolute", left: "36%", top: "70%" }}>池前上游水位<span style={{ color: '#FFCB00', fontFamily: 'DIN-Medium' }}>{waterLevelSix[waterLevelSix?.length - 1]?.sGrille_level?.toFixed(2) || 0}</span>米</div> */}
+         <div style={{ position: "absolute", left: "29%", top: "48%" }}>
+            <Scale title="池前(上游)液位" value={waterLevelSix[waterLevelSix?.length - 1]?.sGrille_level?.toFixed(2) || 0} />
+         </div>
+         <div style={{ position: "absolute", left: "50%", top: "48%" }}>
+            <Scale title="集水池液位" value={waterLevelSix[waterLevelSix?.length - 1]?.sLiquid_level?.toFixed(2) || 0} />
          </div>
       </div>}
    </div>

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,

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(() => {

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;
+  }
+}

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

@@ -293,8 +293,37 @@ const RealTime = ({ dispatch, actions, user, siteList, }) => {
          <RunTime softStartData={softStartData} />
          <AccumulateTime softStartData={softStartData} />
          <Below stations={stations} level={level} strucId={strucId} />
+         <div className='pump-title' style={{
+            display: 'flex', justifyContent: 'center', alignItems: 'center',
+            width: '40%', top: 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"
+            }}>
+               {changeable ? <Select
+                  popupClassName="pump-title-select-popup"
+                  bordered={false}
+                  style={{ minWidth: 150, fontSize: 20 }}
+                  showSearch
+                  filterOption={(input, option) =>
+                     (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+                  }
+                  placeholder="请选择站点"
+                  value={strucId}
+                  optionFilterProp="children"
+                  onSelect={v => {
+                     setStrucId(v)
+                  }}
+                  options={siteList}
+               /> : siteList?.filter(v => v.value == strucId)[0]?.label}
+            </div>
+         </div>
+
          <div style={{
-            width: 182, position: "absolute", left: '29%', top: '4%',
+            width: 182, position: "absolute", left: '29%', top: '14%',
          }}>
             <div style={{
                backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
@@ -304,7 +333,7 @@ const RealTime = ({ dispatch, actions, user, siteList, }) => {
             <img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-week.png`} />
          </div>
          <div style={{
-            width: 182, position: "absolute", left: '59%', top: "13%",
+            width: 182, position: "absolute", left: '59%', top: "23%",
          }}>
             <div style={{
                backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
@@ -314,7 +343,7 @@ const RealTime = ({ dispatch, actions, user, siteList, }) => {
             <img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-year.png`} />
          </div>
          <div style={{
-            width: 182, position: "absolute", left: '31%', top: '28%',
+            width: 182, position: "absolute", left: '31%', top: '38%',
          }}>
             <div style={{
                backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
@@ -323,35 +352,13 @@ const RealTime = ({ dispatch, actions, user, siteList, }) => {
             </div>
             <img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-day.png`} />
          </div>
-         <img style={{ width: '20%', height: '40%', position: "absolute", left: "40%", top: '3%' }} src={`/assets/images/realTime/center.png`} />
-         <div className='site' style={{
-            display: 'flex', justifyContent: 'center', alignItems: 'center',
-            width: '40%', top: "calc(60% - 70px)", position: 'absolute', left: "30%"
-         }}>
-            <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>
-            {changeable && <Select
-               showSearch
-               placeholder="请选择站点"
-               value={strucId}
-               style={{ width: 155 }}
-               optionFilterProp="children"
-               onSelect={v => {
-                  setStrucId(v)
-               }}
-               options={siteList}
-            />}
-         </div>
+         <img style={{ width: '20%', height: '40%', position: "absolute", left: "40%", top: '13%' }} src={`/assets/images/realTime/center.png`} />
       </div>
 
    </div >
 }
 
-function mapStateToProps (state) {
+function mapStateToProps(state) {
    const { auth, global } = state;
    return {
       user: auth.user,

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 (<>
+        <div className='meter-box'>
+            <meter className='electrical-meter' value={value} max="20"></meter>
+            <div className='meter-scale'>
+                <div>-20</div>
+                <div>-18</div>
+                <div>-16</div>
+                <div>-14</div>
+                <div>-12</div>
+                <div>-10</div>
+                <div>-8</div>
+                <div>-6</div>
+                <div>-4</div>
+                <div>-2</div>
+                <div>-0</div>
+            </div>
+            <div className='meter-text'>
+                {value}m
+            </div>
+        </div>
+        <div>{title}</div>
+    </>)
+}

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%);
+    }
+}

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 && <div className='header'>
             <Header module={module} setModule={setModule} history={history} />
          </div>}
+         {module === 'video' && <Video siteList={siteList} />}
          {module == 'basis' ? <>
             <div className='map' ><Amap showData={showData} /></div>
             <Basis setshowData={setshowData} siteList={siteList} siteData={siteData} />
@@ -60,7 +61,6 @@ const SystemManagement = ({ dispatch, actions, user, history }) => {
          {module == 'capacity' ? <Capacity siteList={siteList} /> : ""}
          {module == 'electrical' ? <Electrical siteList={siteList} /> : ""}
          {module == 'realTime' ? <RealTime siteList={siteList} /> : ""}
-         {module === 'video' && <Video siteList={siteList} />}
       </div>
    )
 }