feat(): 闸孔运行情况模块开发

src/service/apiurl.js

@@ -183,6 +183,9 @@ const apiurl = {
     }
   },
   gcyx: {
+    yxqk: {
+      list:service_ykz + '/gateInfo/list'
+    },
     jbqk: {
       list: service_ykz + '/projectBasicInfo/list',
       edit: service_ykz + '/projectBasicInfo/update',

src/views/Gcyx/InformationSearch/RunSituation/index.js

@@ -1,52 +1,94 @@
 import React, {  useMemo,useEffect,useState } from 'react';
-import { Table } from 'antd';
+import { Table,Space } from 'antd';
 import apiurl from '../../../../service/apiurl';
-import usePageTable from '../../../../components/crud/usePageTable2';
+import { httppost2 } from '../../../../utils/request';
-import { createCrudService } from '../../../../components/crud/_';
 import clsx from 'clsx'
 import './index.less'
 const Page = () => {
-  const types = {
+
-    0: "防汛物资",
+
-    1: '食品和饮水',
+  const StatusPower = ({ val }) => {
-    2: "防护用具",
+    return (
-    3: "照明设备",
+      <Space>
-    4: "金属材料类",
+        <div style={{ width: 12, height: 12, borderRadius: 6, border: '1px solid #888', backgroundColor: val ? 'yellowgreen' : 'red', display: 'inline-block' }} />
-    5:"其它",
+        <span>{val ? '正常' : '消失'}</span>
+      </Space>
+    )
   }
-  const [searchVal, setSearchVal] = useState({})
+
-  const columns = [
+  const StatusFault = ({ val }) => {
-    { title: '闸孔编号', key: 'inx', dataIndex: 'inx', width: 80},
+    const v = !val;
-    {
+    return (
-      title: '闸门电源状态', key: 'name', dataIndex: 'name', width: 150,
+      <Space>
-      render: (v) => <div style={{display:'flex',alignItems:'center',columnGap:10}}>
+        <div style={{ width: 12, height: 12, borderRadius: 6, border: '1px solid #888', backgroundColor: v ? 'yellowgreen' : 'red', display: 'inline-block' }} />
-        <span className={clsx({noOpen_style:true,open_style:true})}></span>
+        <span>{v ? '正常' : '异常'}</span>
-        <span>正常</span>
+      </Space>
+    )
+  }
+
+  const Status1 = ({ val }) => {
+    if (val === undefined) {
+      return null;
+    }
+    return (
+      <div style={{ width: 12, height: 12, borderRadius: 6, border: '1px solid #888', backgroundColor: val ? 'yellowgreen' : undefined, display: 'inline-block' }}>
       </div>
-     },
+    )
-    { title: '闸门上升中', key: 'adress', dataIndex: 'adress', width: 150},
+  }
-    { title: '闸门下降中', key: 'type', dataIndex: 'type', width: 150},
+  const columns = [
-    { title: '闸门故障状态', key: 'type', dataIndex: 'type', width: 150},
+    { title: '闸孔编号', key: 'gateNumber', dataIndex: 'gateNumber', width: 80},
-    { title: '上限位', key: 'type', dataIndex: 'type', width: 140},
-    { title: '下限位', key: 'type', dataIndex: 'type', width: 140},
-    { title: '实时开度(m)', key: 'type', dataIndex: 'type', width: 140},
     {
-      title: '监测时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 150,
+      title: '闸门电源状态', key: 'powerSignal', dataIndex: 'powerSignal', width: 150,
+      // render: (v) => <div style={{display:'flex',alignItems:'center',columnGap:10}}>
+      //   <span className={clsx({noOpen_style:true,open_style:true})}></span>
+      //   <span>正常</span>
+      // </div>
+      render: (v) => <StatusPower val={!v} />
+     },
+    {
+      title: '闸门上升中', key: 'openingSignal', dataIndex: 'openingSignal', width: 150,
+      render: (v) => <Status1 val={v} />
+    },
+    {
+      title: '闸门下降中', key: 'closeingSignal', dataIndex: 'closeingSignal', width: 150,
+      render: (v) => <Status1 val={v} />
+    },
+    {
+      title: '闸门故障状态', key: 'errorSignal', dataIndex: 'errorSignal', width: 150,
+      render: (v) => <StatusFault val={v} />
+    },
+    {
+      title: '上限位', key: 'openedSignal', dataIndex: 'openedSignal', width: 140,
+      render: (v) => <Status1 val={v} />
+    },
+    {
+      title: '下限位', key: 'closedSignal', dataIndex: 'closedSignal', width: 140,
+      render: (v) => <Status1 val={v} />
+      
+    },
+    { title: '实时开度(m)', key: 'realAperture', dataIndex: 'realAperture', width: 140},
+    {
+      title: '监测时间', key: 'tm', dataIndex: 'tm', width: 150,
     },
   ];
 
   
   const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
 
-  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
+ const [gateList, setGateList] = useState([])
-  useEffect(()=>{
+  const getGateStatus = async () => {
-    const params = {
+    try {
-      search: {
+      const res = await httppost2(apiurl.gcyx.yxqk.list)
-        ...searchVal,
+      if (res.code == 200) {
+        setGateList(res.data)
       }
-    };
+    } catch (error) {
-    search(params)
+      console.log(error);
-  }, [searchVal])
+    }
+  }
+  useEffect(() => {
+    getGateStatus();
+  }, []);
   
   
   return (
@@ -54,7 +96,13 @@ const Page = () => {
       <div className='content-root clearFloat xybm' style={{paddingBottom:"0"}}>
         <div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
           <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
-          <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
+            <Table
+              columns={columns}
+              rowKey="stcd"
+              pagination={false}
+              dataSource={gateList}
+              scroll={{ x: width, y: "calc( 100vh - 400px )" }}
+            />
           </div>
         </div>
       </div>

src/views/Home/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { useNavigate } from 'react-router';
 import {
-  RightCircleFilled, LeftCircleFilled
+  RightCircleFilled, LeftCircleFilled, BarsOutlined
 } from '@ant-design/icons';
 import autofit from 'autofit.js'
 import Zmjk from "./zmjk"
@@ -26,6 +26,8 @@ const MenuTitleCard = ({ key, title }) => {
 export default function Home() {
   const menu = useSelector((state) => state.auth.menu);
   const [title, setTitle] = useState([])
+  const [showTabLeft, setShowTabLeft] = useState(false)
+  const [showTabRight, setShowTabRight] = useState(false)
   // const title = menu.map(item => ({ title: item.menuName, key: item.path || item.redirect }))
   const jcdType = {
     0: "闸后流量",
@@ -246,6 +248,21 @@ export default function Home() {
       <div className='content-box'>
         <Zmjk />
       </div>
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 25,
+        height: 50,
+        backgroundColor: "#3b7cff",
+        position: "fixed",
+        top: "57%",
+        left: !showTabLeft ? "20.7%" : 0,
+        cursor: "pointer",
+      }}
+        onClick={() => setShowTabLeft(!showTabLeft)}
+      ><BarsOutlined style={{ color: "#fff" }} /></div>
+      {!showTabLeft &&
         <div className='content-left'>
           {/* 工程简介 */}
           <div className='project-introduce'>
@@ -309,7 +326,24 @@ export default function Home() {
               </div>
             </div>
           </div>
-      </div>
+
+        </div>}
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 25,
+        height: 50,
+        backgroundColor: "#3b7cff",
+        position: "fixed",
+        top: "57%",
+        right: !showTabRight ? "20.7%" : 0,
+        cursor: "pointer",
+      }}
+        onClick={() => setShowTabRight(!showTabRight)}
+      ><BarsOutlined style={{ color: "#fff" }} /></div>
+      {
+        !showTabRight &&
         <div className='content-right'>
           {/* 操作日志 */}
           <div className='operate-log'>
@@ -381,6 +415,7 @@ export default function Home() {
             </div>
           </div>
         </div>
+      }
     </div>
   )
 }

src/views/Home/index.less

@@ -73,6 +73,7 @@
     .content-box{
         display: flex;
         justify-content: center;
+       
     }
     .content-left{
         position: absolute;