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

2025-01-06 17:37:06 +08:00 · 2025-01-06 17:37:06 +08:00 · 99b0a5e9c0
parent d1cef224b3
commit 99b0a5e9c0
4 changed files with 306 additions and 219 deletions
--- a/src/service/apiurl.js
+++ b/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',
--- a/src/views/Gcyx/InformationSearch/RunSituation/index.js
+++ b/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 { createCrudService } from '../../../../components/crud/_';
+import { httppost2 } from '../../../../utils/request';
 import clsx from 'clsx'
 import './index.less'
 const Page = () => {
-  const types = {
-    0: "防汛物资",
-    1: '食品和饮水',
-    2: "防护用具",
-    3: "照明设备",
-    4: "金属材料类",
-    5:"其它",
+
+
+  const StatusPower = ({ val }) => {
+    return (
+      <Space>
+        <div style={{ width: 12, height: 12, borderRadius: 6, border: '1px solid #888', backgroundColor: val ? 'yellowgreen' : 'red', display: 'inline-block' }} />
+        <span>{val ? '正常' : '消失'}</span>
+      </Space>
+    )
  }
-  const [searchVal, setSearchVal] = useState({})
-  const columns = [
-    { title: '闸孔编号', key: 'inx', dataIndex: 'inx', width: 80},
-    {
-      title: '闸门电源状态', key: 'name', dataIndex: 'name', width: 150,
-      render: (v) => <div style={{display:'flex',alignItems:'center',columnGap:10}}>
-        <span className={clsx({noOpen_style:true,open_style:true})}></span>
-        <span>正常</span>
+
+  const StatusFault = ({ val }) => {
+    const v = !val;
+    return (
+      <Space>
+        <div style={{ width: 12, height: 12, borderRadius: 6, border: '1px solid #888', backgroundColor: v ? 'yellowgreen' : 'red', display: 'inline-block' }} />
+        <span>{v ? '正常' : '异常'}</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},
-    { title: '闸门故障状态', key: 'type', dataIndex: 'type', width: 150},
-    { title: '上限位', key: 'type', dataIndex: 'type', width: 140},
-    { title: '下限位', key: 'type', dataIndex: 'type', width: 140},
-    { title: '实时开度(m)', key: 'type', dataIndex: 'type', width: 140},
+    )
+  }
+  const columns = [
+    { title: '闸孔编号', key: 'gateNumber', dataIndex: 'gateNumber', width: 80},
    {
-      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);
-  useEffect(()=>{
-    const params = {
-      search: {
-        ...searchVal,
+ const [gateList, setGateList] = useState([])
+  const getGateStatus = async () => {
+    try {
+      const res = await httppost2(apiurl.gcyx.yxqk.list)
+      if (res.code == 200) {
+        setGateList(res.data)
      }
-    };
-    search(params)
-  }, [searchVal])
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  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>
--- a/src/views/Home/index.js
+++ b/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,
-          time:item.tm
+          value: item.val,
+          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,
-          dateTimeRangeSo:{
+      type: val.type,
+      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'  }}>
-                {operateData.length > 0 ?operateData.map((item, i) => (
+                <tbody style={{ height: 170, overflow: operateData.length > 6 ? 'scroll' : 'hidden' }}>
+                  {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>
  )
 }
--- a/src/views/Home/index.less
+++ b/src/views/Home/index.less
@ -73,6 +73,7 @@
    .content-box{
        display: flex;
        justify-content: center;
+       
    }
    .content-left{
        position: absolute;