(*) 电排远控-实时状态 移动端适配

web/client/RZqpT7Q7lM.txt

@@ -0,0 +1 @@
+bd7228e19d69b5cc220f4d419e7815e2

web/client/index.html

@@ -74,6 +74,7 @@
    <div id='App'></div>
    <script type="text/javascript" src="http://localhost:5901/client/build/vendor.js"></script>
    <script type="text/javascript" src="http://localhost:5901/client/build/app.js"></script>
+   <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 </body>
 
 </html>

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

@@ -9,7 +9,7 @@ import VoltageTrend from '../components/electrity/voltageTrend';
 import LevelTrend from '../components/electrity/levelTrend';
 
 const Electrical = ({ dispatch, actions, siteList, waterLevelSix, currentSix, cabinet }) => {
-
+   const isMobile = window.innerWidth <= 1080 ? true : false;
    const { bigScreen } = actions
    const [pumpList, setPumpList] = useState([])    //水泵列表
    const [cabinetList, setCabinetList] = useState([])    //水泵列表
@@ -64,13 +64,54 @@ const Electrical = ({ dispatch, actions, siteList, waterLevelSix, currentSix, ca
       }
    }, [strucId])
 
-
-
-
-
+   const renderMobilePage = () => {
+      return <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+         <div style={{ width: "90%", height: 320, display: 'flex', justifyContent: 'space-between' }}>
+            <div style={{
+               backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
+               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
+               fontSize: 40, width: 320, height: 320, textAlign: 'center',
+            }}>
+               <div style={{ fontSize: 40, color: '#E2F8FF', fontWeight: 600 }}>
+                  环境湿度：</div>
+               <span style={{ color: '#00FFF8', fontFamily: "D-DIN-Italic" }}>{waterLevelSix[waterLevelSix.length - 1]?.sHumidity || "--"}  %</span>
+            </div>
+            <div style={{
+               backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
+               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
+               fontSize: 40, width: 320, height: 320, textAlign: 'center',
+            }}>
+               <div style={{ fontSize: 40, color: '#E2F8FF', fontWeight: 600 }}>
+                  环境温度：
+               </div>
+               <span style={{ color: '#00FFF8', fontFamily: "D-DIN-Italic" }}>{waterLevelSix[waterLevelSix.length - 1]?.sTEMP || "--"}  ℃</span>
+            </div>
+            <div style={{
+               backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
+               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
+               fontSize: 40, width: 320, height: 320, textAlign: 'center',
+            }}>
+               <div style={{ fontSize: 40, color: '#E2F8FF', fontWeight: 600 }}>
+                  信号：</div>
+               <img width={40} height={40} src='/assets/images/electrical/signal_3.png' />
+            </div>
+         </div>
+         <RealTimeStatus
+            setPumpOne={setPumpOne}
+            pumpId={pumpId}
+            pumpList={pumpList}
+            setPumpId={setPumpId}
+            pumpOne={pumpOne}
+            strucId={strucId}
+            siteList={siteList}
+            currentSix={currentSix}
+            isMobile={isMobile}
+         />
+      </div>
+   }
 
    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', }}>
+      {isMobile ? renderMobilePage() : <div style={{ width: '100%', height: "100%", position: 'relative', }}>
          <RealTimeStatus
             setPumpOne={setPumpOne}
             pumpId={pumpId}
@@ -159,8 +200,7 @@ const Electrical = ({ dispatch, actions, siteList, waterLevelSix, currentSix, ca
                options={siteList}
             />}
          </div>
-      </div>
-
+      </div>}
    </div>
 }
 

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

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import moment from 'moment'
-
 import { Select, Modal, Switch, Input, Button, Form, message } from 'antd';
+import './realTimeStatus.less'
 
-const RealTimeStatus = ({ dispatch, actions, user, pumpId, pumpList, setPumpId, strucId, siteList, pumpOne, setPumpOne, currentSix }) => {
+const RealTimeStatus = ({ dispatch, actions, user, pumpId, pumpList, setPumpId, strucId, siteList, pumpOne, setPumpOne, currentSix, isMobile }) => {
 
    const { bigScreen } = actions;
 
@@ -175,17 +175,24 @@ const RealTimeStatus = ({ dispatch, actions, user, pumpId, pumpList, setPumpId,
       })
    }
 
-   return <div style={{
+   return <div className='main' 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
+      width: isMobile ? '90%' : '26%', height: isMobile ? 'auto' : '40%', minWidth: 360, position: isMobile ? '' : "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>
+         <div style={{
+            lineHeight: isMobile ? '72px' : "36px",
+            color: '#E2F8FF', fontSize: isMobile ? 40 : 20,
+            textIndent: isMobile ? 40 : 20,
+            fontFamily: 'YouSheBiaoTiHei'
+         }}>实时状态</div>
          <Select
-            className='bigscreen-select'
+            size={isMobile ? 'large' : 'middle'}
+            className={isMobile ? 'mobile-select' : 'bigscreen-select'}
+            popupClassName={isMobile ? 'mobile-popup' : ''}
             bordered={false}
             value={pumpId}
             optionFilterProp="children"
@@ -198,39 +205,43 @@ const RealTimeStatus = ({ dispatch, actions, user, pumpId, pumpList, setPumpId,
          />
       </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', }}>
+         <div style={{ width: '100%', height: isMobile ? 232 : 116, marginTop: 20, display: 'flex', justifyContent: 'space-between', }}>
             {pumpOne?.data ? <img src={`/assets/images/electrical/${[1, 3, 5].includes(pumpOne?.data[0]?.sMotor_State)
                ? 'close' : [2, 4, 6].includes(pumpOne?.data[0]?.sMotor_State)
                   ? 'open' : pumpOne?.data[0]?.sMotor_State == 7
-                     ? 'fault' : '无状态'}.png`} style={{ width: 98, height: 115 }} />
-               : <img src={`/assets/images/electrical/open.png`} style={{ width: 98, height: 115 }} />}
+                     ? 'fault' : '无状态'}.png`} style={{ width: isMobile ? 196 : 98, height: isMobile ? 230 : 115 }} />
+               : <img src={`/assets/images/electrical/open.png`} style={{ width: isMobile ? 196 : 98, height: isMobile ? 230 : 115 }} />}
             <div style={{ width: 'calc(100% - 110px)', display: 'flex', flexDirection: "column", justifyContent: 'space-between' }}>
                <div style={{
-                  height: 30,
+                  height: isMobile ? 60 : 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={{ marginLeft: 6, fontFamily: 'YouSheBiaoTiHei', fontSize: isMobile ? 32 : 16 }}>{pumpOne?.name}</div>
                   <div
-                     style={{ width: 52, height: 20, marginRight: 6, textAlign: "center", lineHeight: "20px", background: "#ffc8802e", boxShadow: 'inset 0 0 8px 1px #ffc88080', cursor: 'pointer' }}
+                     style={{
+                        width: isMobile ? 104 : 52, height: isMobile ? 40 : 20, marginRight: 6, textAlign: "center",
+                        lineHeight: isMobile ? "40px" : "20px", background: "#ffc8802e", boxShadow: 'inset 0 0 8px 1px #ffc88080',
+                        cursor: 'pointer', fontSize: isMobile ? 32 : 16
+                     }}
                      onClick={showModal}
                   >
                      控制
                   </div>
                </div>
                <div style={{
-                  height: 30, borderBottom: '1px solid #96b8bcba',
+                  height: isMobile ? 60 : 30, borderBottom: '1px solid #96b8bcba',
                   display: 'flex', alignItems: "center", justifyContent: 'space-between',
                }}>
-                  <div style={{ marginLeft: 6 }}>控制方式：</div>
-                  <div style={{ marginRight: 6 }}>{pumpOne?.data[0]?.sMotor_LR ? "平台远程" : '现场就地'}</div>
+                  <div style={{ marginLeft: 6, fontSize: isMobile ? 32 : '' }}>控制方式：</div>
+                  <div style={{ marginRight: 6, fontSize: isMobile ? 32 : '' }}>{pumpOne?.data[0]?.sMotor_LR ? "平台远程" : '现场就地'}</div>
                </div>
                <div style={{
-                  height: 30, borderBottom: '1px solid #96b8bcba',
+                  height: isMobile ? 60 : 30, borderBottom: '1px solid #96b8bcba',
                   display: 'flex', alignItems: "center", justifyContent: 'space-between',
                }}>
-                  <div style={{ marginLeft: 6 }}>远程模式：</div>
-                  <div style={{ marginRight: 6 }}>
+                  <div style={{ marginLeft: 6, fontSize: isMobile ? 32 : '' }}>远程模式：</div>
+                  <div style={{ marginRight: 6, fontSize: isMobile ? 32 : '' }}>
                      {pumpOne?.data[0]?.sMotor_RunMode == 1 ? '就地手动'
                         : pumpOne?.data[0]?.sMotor_RunMode == 3 ? "平台手动"
                            : pumpOne?.data[0]?.sMotor_RunMode == 2 ? "平台液控" : "--"}
@@ -241,49 +252,51 @@ const RealTimeStatus = ({ dispatch, actions, user, pumpId, pumpList, setPumpId,
          <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'
+            width: '100%', height: isMobile ? 86 : 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 style={{ width: isMobile ? 180 : 80, fontSize: isMobile ? 32 : '', textIndent: 10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>单次时间：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: isMobile ? 32 : 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 style={{ width: isMobile ? 180 : 80, fontSize: isMobile ? 32 : '', textIndent: 10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>积累时间：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: isMobile ? 32 : 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'
+            width: '100%', height: isMobile ? 86 : 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} A</div>
+               <div style={{ width: isMobile ? 180 : 80, fontSize: isMobile ? 32 : '', textIndent: 10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>运行电流：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: isMobile ? 32 : 16, fontFamily: "YouSheBiaoTiHei" }}>{pumpOne?.data[0]?.eMotor_A_A} A</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} V</div>
+               <div style={{ width: isMobile ? 180 : 80, fontSize: isMobile ? 32 : '', textIndent: 10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>运行电压：</div>
+               <div style={{ flex: 1, textAlign: "end", fontSize: isMobile ? 32 : 16, fontFamily: "YouSheBiaoTiHei" }}>{pumpOne?.data[0]?.eMotor_A_V} V</div>
             </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', backgroundColor: '#344e6b' }}
-         closeIcon={<img src='/assets/images/electrical/close.svg' style={{ width: 16, height: 16 }} />}
-         width={287}
+         closeIcon={<img src='/assets/images/electrical/close.svg' style={{ width: isMobile ? 32 : 16, height: isMobile ? 32 : 16 }} />}
+         width={isMobile ? 500 : 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'
+            width: '100%', height: isMobile ? 64 : 32, fontFamily: 'YouSheBiaoTiHei', fontSize: 18, color: '#FFF', display: 'flex', alignItems: 'center'
          }}>
-            <span style={{ marginLeft: '10px' }}>{pumpName}</span>
+            <span style={{ marginLeft: '10px', fontSize: isMobile ? 32 : '' }}>{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>
+               <span style={{ color: '#FFF', fontFamily: 'SourceHanSansCN-Medium', fontWeight: 500, fontSize: isMobile ? 32 : 16, margin: '0 33px 0 8px' }}>{label}</span>
+               <div className={isMobile ? 'mobile-switch-box' : ''}>
                   <Switch disabled={checked.模式切换 && label !== '模式切换'} checkedChildren="开" unCheckedChildren="关" checked={checked[label]} onChange={(checked => onChange(label, checked))} />
+               </div>
             </div>)
          }
       </Modal>
@@ -293,14 +306,14 @@ const RealTimeStatus = ({ dispatch, actions, user, pumpId, pumpList, setPumpId,
             background: 'url(/assets/images/electrical/control-bg.png) no-repeat center center',
             backgroundSize: '100% 100%', padding: '12px 16px', backgroundColor: '#344e6b'
          }}
-         closeIcon={<img src='/assets/images/electrical/close.svg' style={{ width: 16, height: 16 }} />}
-         width={287}
+         closeIcon={<img src='/assets/images/electrical/close.svg' style={{ width: isMobile ? 32 : 16, height: isMobile ? 32 : 16 }} />}
+         width={isMobile ? 500 : 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'
+            width: '100%', height: isMobile ? 64 : 32, fontFamily: 'YouSheBiaoTiHei', fontSize: 18, color: '#FFF', display: 'flex', alignItems: 'center'
          }}>
-            <span style={{ marginLeft: '10px' }}>请输入密码</span>
+            <span style={{ marginLeft: '10px', fontSize: isMobile ? 32 : '' }}>请输入密码</span>
          </div>
          <Form onFinish={handlePwFinish} autoComplete="off" form={form} >
             <Form.Item
@@ -311,9 +324,13 @@ const RealTimeStatus = ({ dispatch, actions, user, pumpId, pumpList, setPumpId,
                   message: '请输入密码',
                }]}
             >
-               <Input.Password />
+               <div className={isMobile ? 'mobile-input-box' : ''}>
+                  <Input.Password size={isMobile ? "large" : "middle"} />
+               </div>
             </Form.Item>
-            <Button type="primary" htmlType="submit" style={{ width: '30%', marginLeft: '35%' }}>确定</Button>
+            <Button type="primary" htmlType="submit"
+               style={{ width: '30%', marginLeft: '35%', fontSize: isMobile ? 32 : '', height: isMobile ? 56 : '' }}
+            >确定</Button>
          </Form>
       </Modal>
    </div>

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

@@ -0,0 +1,85 @@
+.mobile-select {
+    font-size: 32px;
+
+    .ant-select-selector {
+        background-color: transparent !important;
+        height: 46px !important;
+    }
+
+    .ant-select-focused {
+        border: 0px;
+    }
+
+    .ant-select-selection-item {
+        color: #fff;
+        font-family: YouSheBiaoTiHei;
+        height: 42px !important;
+        line-height: 30px !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;
+    }
+
+}
+
+.mobile-popup {
+    .ant-select-item-option {
+        height: 56px;
+
+        .ant-select-item-option-content {
+            font-size: 32px;
+            height: 36px;
+            line-height: 36px;
+        }
+    }
+}
+
+.mobile-switch-box {
+    .ant-switch {
+        min-width: 88px;
+        height: 44px;
+
+        // 修改字体大小
+        .ant-switch-inner {
+            font-size: 28px;
+        }
+
+        // 修改白色圆点大小
+        .ant-switch-handle {
+            width: 36px;
+            height: 36px;
+            top: 4px;
+            left: 4px;
+        }
+
+        .ant-switch-handle::before {
+            border-radius: 18px;
+        }
+    }
+
+    .ant-switch-checked .ant-switch-handle {
+        left: calc(100% - 36px - 4px);
+    }
+}
+
+.mobile-input-box {
+    .ant-input-affix-wrapper {
+        line-height: 3;
+    }
+}

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

@@ -16,13 +16,13 @@ const TreeNode = Tree.TreeNode;
 
 const SystemManagement = ({ dispatch, actions, user, history }) => {
    const { bigScreen } = actions
+   const isMobile = window.innerWidth <= 1080 ? true : false;
 
    const [module, setModule] = useState('basis')
    const [showData, setshowData] = useState([])
    const [siteList, setSiteList] = useState([])    //站点列表
    const [siteData, setSitData] = useState()    //站点列表
 
-
    useEffect(() => {
       const tabKey = sessionStorage.getItem('tabKey');
       if (tabKey) { setModule(tabKey) };
@@ -33,6 +33,12 @@ const SystemManagement = ({ dispatch, actions, user, history }) => {
             setSitData(res.payload.data)
          }
       })
+      // 监听返回事件，用于小程序webview返回
+      if (isMobile && window.history && window.history.pushState) {
+         window.onpopstate = function () {
+            wx.miniProgram.navigateBack()
+         }
+      }
    }, [])
 
    return (
@@ -44,9 +50,9 @@ const SystemManagement = ({ dispatch, actions, user, history }) => {
       }}>
          <img src='/assets/images/monitor/bg-header.png' className='super-screen-top'></img>
          <img src='/assets/images/monitor/bg-bottom.png' className='super-screen-bottom'></img>
-         <div className='header'>
+         {!isMobile && <div className='header'>
             <Header module={module} setModule={setModule} history={history} />
-         </div>
+         </div>}
          {module == 'basis' ? <>
             <div className='map' ><Amap showData={showData} /></div>
             <Basis setshowData={setshowData} siteList={siteList} siteData={siteData} />