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"
@@ -15,7 +15,7 @@ import apiurl from '../../service/apiurl';
 import { useDispatch, useSelector } from 'react-redux';
 import HFivePlayer from '../../components/video1Plary';
 import moment from 'moment';
-import {loadMenu,loadRole} from '../../models/auth/_'
+import { loadMenu, loadRole } from '../../models/auth/_'
 const MenuTitleCard = ({ key, title }) => {
   return (
     <div className='menuItem_style' key={key} title={title}>
@@ -26,11 +26,13 @@ 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: "闸后流量",
     2: '闸前水位',
-    3:'闸后水位'
+    3: '闸后水位'
   }
   const types1 = {
     0: "闸后流量(m³/s)",
@@ -69,8 +71,8 @@ export default function Home() {
         const uptData = res.data.map(item => ({
           ...item,
           name: types1[item.type],
-          value:item.val,
+          value: item.val,
-          time:item.tm
+          time: item.tm
         }))
         setRealData(uptData)
         getHistoryData(uptData[0])
@@ -91,21 +93,21 @@ export default function Home() {
   }, [historyList])
 
   const getHistoryData = async (val) => {
-      const start  = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
+    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
     const end = moment().format('YYYY-MM-DD 23:59:59')
     let params = {
       pageSo: {
         pageSize: 999,
-          pageNumber:1
+        pageNumber: 1
       },
-          type:val.type,
+      type: val.type,
-          dateTimeRangeSo:{
+      dateTimeRangeSo: {
         start,
         end
       }
     }
     try {
-          const res = await httppost2(apiurl.jcsj.jcsj.historyList,params)
+      const res = await httppost2(apiurl.jcsj.jcsj.historyList, params)
       if (res.code == 200) {
         setHistoryList(res.data)
       }
@@ -118,14 +120,14 @@ export default function Home() {
   //操作日志 
   const [operateData, setOperateData] = useState([])
   const getLogData = async () => {
-    const start  = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
+    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
     const end = moment().format('YYYY-MM-DD 23:59:59')
     let params = {
       pageSo: {
         pageSize: 999,
-        pageNumber:1
+        pageNumber: 1
       },
-        dateTimeRangeSo:{
+      dateTimeRangeSo: {
         start,
         end
       }
@@ -143,20 +145,20 @@ export default function Home() {
   //报警信息
   const [policeData, setPoliceData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, zd: '闸前水位', watchvalue: "10.23", limit: 0, max: 10, time: '2024-08-15 15:00:00' })))
   const getPoliceData = async (val) => {
-    const start  = moment().subtract(7,'days').format('YYYY-MM-DD 00:00:00')
+    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
     const end = moment().format('YYYY-MM-DD 23:59:59')
     let params = {
       pageSo: {
         pageSize: 999,
-        pageNumber:1
+        pageNumber: 1
       },
-        dateTimeRangeSo:{
+      dateTimeRangeSo: {
         start,
         end
       }
     }
     try {
-        const res = await httppost2(apiurl.jcsj.bjgl.bjjl.page,params)
+      const res = await httppost2(apiurl.jcsj.bjgl.bjjl.page, params)
       if (res.code == 200) {
         setPoliceData(res.data.records)
       }
@@ -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'>
@@ -261,7 +278,7 @@ export default function Home() {
             <div className='project-title'>运行监测数据</div>
             <div className='project-content'>
               {RealData.map((item, i) => (
-              <div className={clsx({ 'run_list': true, active: activeOne == i })} key={item.name} onClick={() => { setActiveOne(i); getHistoryData(item)}}>
+                <div className={clsx({ 'run_list': true, active: activeOne == i })} key={item.name} onClick={() => { setActiveOne(i); getHistoryData(item) }}>
                   <span style={{ width: 94 }}>{item.name}</span>
                   <span>{item.value}</span>
                   <span>{item.time}</span>
@@ -274,7 +291,7 @@ export default function Home() {
                     style={{ width: "100%", height: '100%' }}
                     notMerge={true}
                   />
-                :<Empty style={{marginTop:20}}/>
+                  : <Empty style={{ marginTop: 20 }} />
                 }
               </div>
             </div>
@@ -294,14 +311,14 @@ export default function Home() {
                     </tr>
                   </thead>
                   <tbody style={{ overflowY: safeData.length > 4 ? 'scroll' : 'hidden' }}>
-                  {safeData.length >0 ? safeData.map((item, i) => (
+                    {safeData.length > 0 ? safeData.map((item, i) => (
                       <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
                         <td>{item.cd}</td>
                         <td>{item.dm}</td>
                         <td>{item.kpa}</td>
                         <td style={{ width: 137 }}>{item.time}</td>
                       </tr>
-                  )):<Empty  />
+                    )) : <Empty />
                     }
                   </tbody>
 
@@ -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'>
@@ -324,15 +358,15 @@ export default function Home() {
                     <th style={{ width: 137 }}>操作时间</th>
                   </tr>
                 </thead>
-              <tbody style={{ height: 170,overflow: operateData.length > 6 ? 'scroll' : 'hidden'  }}>
+                <tbody style={{ height: 170, overflow: operateData.length > 6 ? 'scroll' : 'hidden' }}>
-                {operateData.length > 0 ?operateData.map((item, i) => (
+                  {operateData.length > 0 ? operateData.map((item, i) => (
                     <tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
                       <td>{item.gatePoreCode}</td>
                       <td>{item.opContent}</td>
                       <td>{item.createUserName}</td>
                       <td style={{ width: 137 }}>{item.createTime}</td>
                     </tr>
-                )):<Empty  />
+                  )) : <Empty />
                   }
                 </tbody>
 
@@ -362,7 +396,7 @@ export default function Home() {
                       <td style={{ width: 58 }}>{item.upperLimit}</td>
                       <td style={{ width: 129 }}>{item.warnTime}</td>
                     </tr>
-                )):<Empty  />
+                  )) : <Empty />
                   }
                 </tbody>
 
@@ -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;