feat(): 闸孔运行情况模块开发
parent
d1cef224b3
commit
99b0a5e9c0
|
|
@ -183,6 +183,9 @@ const apiurl = {
|
|||
}
|
||||
},
|
||||
gcyx: {
|
||||
yxqk: {
|
||||
list:service_ykz + '/gateInfo/list'
|
||||
},
|
||||
jbqk: {
|
||||
list: service_ykz + '/projectBasicInfo/list',
|
||||
edit: service_ykz + '/projectBasicInfo/update',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)",
|
||||
|
|
@ -66,12 +68,12 @@ export default function Home() {
|
|||
try {
|
||||
const res = await httppost2(apiurl.jcsj.jcsj.realData)
|
||||
if (res.code == 200) {
|
||||
const uptData = res.data.map(item => ({
|
||||
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])
|
||||
}
|
||||
|
|
@ -81,91 +83,91 @@ export default function Home() {
|
|||
}
|
||||
|
||||
const [historyList, setHistoryList] = useState([])
|
||||
|
||||
const pxOptions = useMemo(() => {
|
||||
if (historyList) {
|
||||
return options(historyList)
|
||||
} else {
|
||||
return options([])
|
||||
}
|
||||
}, [historyList])
|
||||
|
||||
const pxOptions = useMemo(() => {
|
||||
if (historyList) {
|
||||
return options(historyList)
|
||||
} else {
|
||||
return options([])
|
||||
}
|
||||
}, [historyList])
|
||||
|
||||
const getHistoryData = async (val) => {
|
||||
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
|
||||
},
|
||||
type:val.type,
|
||||
dateTimeRangeSo:{
|
||||
start,
|
||||
end
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await httppost2(apiurl.jcsj.jcsj.historyList,params)
|
||||
if (res.code == 200) {
|
||||
setHistoryList(res.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
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
|
||||
},
|
||||
type: val.type,
|
||||
dateTimeRangeSo: {
|
||||
start,
|
||||
end
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await httppost2(apiurl.jcsj.jcsj.historyList, params)
|
||||
if (res.code == 200) {
|
||||
setHistoryList(res.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
//安全监测数据
|
||||
const [safeData, setSafeData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, cd: "SY01", dm: '1#断面', kpa: 2749, time: '2024-08-15 15:00:00' })))
|
||||
//操作日志
|
||||
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
|
||||
},
|
||||
dateTimeRangeSo:{
|
||||
start,
|
||||
end
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await httppost2(apiurl.gcyx.czrz.page, params)
|
||||
if (res.code == 200) {
|
||||
setOperateData(res.data?.records)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
pageNumber: 1
|
||||
},
|
||||
dateTimeRangeSo: {
|
||||
start,
|
||||
end
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await httppost2(apiurl.gcyx.czrz.page, params)
|
||||
if (res.code == 200) {
|
||||
setOperateData(res.data?.records)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
//报警信息
|
||||
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
|
||||
},
|
||||
dateTimeRangeSo:{
|
||||
start,
|
||||
end
|
||||
}
|
||||
}
|
||||
try {
|
||||
const res = await httppost2(apiurl.jcsj.bjgl.bjjl.page,params)
|
||||
if (res.code == 200) {
|
||||
setPoliceData(res.data.records)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
pageNumber: 1
|
||||
},
|
||||
dateTimeRangeSo: {
|
||||
start,
|
||||
end
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
const res = await httppost2(apiurl.jcsj.bjgl.bjjl.page, params)
|
||||
if (res.code == 200) {
|
||||
setPoliceData(res.data.records)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
const jumpMenu = (item) => {
|
||||
navigate(item.key)
|
||||
|
|
@ -246,141 +248,174 @@ export default function Home() {
|
|||
<div className='content-box'>
|
||||
<Zmjk />
|
||||
</div>
|
||||
<div className='content-left'>
|
||||
{/* 工程简介 */}
|
||||
<div className='project-introduce'>
|
||||
<div className='project-title'>工程简介</div>
|
||||
<div className='project-content'>
|
||||
<img alt='' className='content-img' src={`${process.env.PUBLIC_URL}/assets/them.jpg`}></img>
|
||||
盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农
|
||||
业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。
|
||||
</div>
|
||||
</div>
|
||||
{/* 运行监测数据 */}
|
||||
<div className='runWatch'>
|
||||
<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)}}>
|
||||
<span style={{ width: 94 }}>{item.name}</span>
|
||||
<span>{item.value}</span>
|
||||
<span>{item.time}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className='run_chart'>
|
||||
{historyList.length > 0 ?
|
||||
<ReactEcharts
|
||||
option={pxOptions || {}}
|
||||
style={{ width: "100%", height: '100%' }}
|
||||
notMerge={true}
|
||||
/>
|
||||
:<Empty style={{marginTop:20}}/>
|
||||
}
|
||||
<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'>
|
||||
<div className='project-title'>工程简介</div>
|
||||
<div className='project-content'>
|
||||
<img alt='' className='content-img' src={`${process.env.PUBLIC_URL}/assets/them.jpg`}></img>
|
||||
盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农
|
||||
业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 安全监测数据 */}
|
||||
<div className='safeWatch'>
|
||||
<div className='project-introduce'>
|
||||
<div className='project-title'>安全监测数据</div>
|
||||
{/* 运行监测数据 */}
|
||||
<div className='runWatch'>
|
||||
<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) }}>
|
||||
<span style={{ width: 94 }}>{item.name}</span>
|
||||
<span>{item.value}</span>
|
||||
<span>{item.time}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className='run_chart'>
|
||||
{historyList.length > 0 ?
|
||||
<ReactEcharts
|
||||
option={pxOptions || {}}
|
||||
style={{ width: "100%", height: '100%' }}
|
||||
notMerge={true}
|
||||
/>
|
||||
: <Empty style={{ marginTop: 20 }} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 安全监测数据 */}
|
||||
<div className='safeWatch'>
|
||||
<div className='project-introduce'>
|
||||
<div className='project-title'>安全监测数据</div>
|
||||
<div className='project-content'>
|
||||
<table style={{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
|
||||
<th>测点编号</th>
|
||||
<th>监测断面</th>
|
||||
<th>渗压(KPa)</th>
|
||||
<th style={{ width: 137 }}>监测时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody style={{ overflowY: safeData.length > 4 ? 'scroll' : 'hidden' }}>
|
||||
{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 />
|
||||
}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</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'>
|
||||
<div className='project-title'>操作日志</div>
|
||||
<div className='project-content'>
|
||||
<table style={{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
|
||||
<th>测点编号</th>
|
||||
<th>监测断面</th>
|
||||
<th>渗压(KPa)</th>
|
||||
<th style={{ width: 137 }}>监测时间</th>
|
||||
<th>闸孔编号</th>
|
||||
<th>操作内容</th>
|
||||
<th>操作人员</th>
|
||||
<th style={{ width: 137 }}>操作时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody style={{ overflowY: safeData.length > 4 ? 'scroll' : 'hidden' }}>
|
||||
{safeData.length >0 ? safeData.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.cd}</td>
|
||||
<td>{item.dm}</td>
|
||||
<td>{item.kpa}</td>
|
||||
<td style={{ width: 137 }}>{item.time}</td>
|
||||
<td>{item.gatePoreCode}</td>
|
||||
<td>{item.opContent}</td>
|
||||
<td>{item.createUserName}</td>
|
||||
<td style={{ width: 137 }}>{item.createTime}</td>
|
||||
</tr>
|
||||
)):<Empty />
|
||||
}
|
||||
)) : <Empty />
|
||||
}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='content-right'>
|
||||
{/* 操作日志 */}
|
||||
<div className='operate-log'>
|
||||
<div className='project-title'>操作日志</div>
|
||||
<div className='project-content'>
|
||||
<table style={{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
|
||||
<th>闸孔编号</th>
|
||||
<th>操作内容</th>
|
||||
<th>操作人员</th>
|
||||
<th style={{ width: 137 }}>操作时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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>
|
||||
{/* 报警信息 */}
|
||||
<div className='operate-log'>
|
||||
<div className='project-title'>报警信息</div>
|
||||
<div className='project-content'>
|
||||
<table style={{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
|
||||
<th>监测点</th>
|
||||
<th>监测值</th>
|
||||
<th style={{ width: 58 }}>阈值下限</th>
|
||||
<th style={{ width: 60 }}>阈值上限</th>
|
||||
<th style={{ width: 129 }}>报警时间</th>
|
||||
</tr>
|
||||
)):<Empty />
|
||||
}
|
||||
</tbody>
|
||||
</thead>
|
||||
<tbody style={{ height: 170, overflow: policeData.length > 6 ? 'scroll' : 'hidden' }} >
|
||||
{policeData.length > 0 ? policeData.map((item, i) => (
|
||||
<tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
|
||||
<td style={{ width: 58 }}>{jcdType[item.type]}</td>
|
||||
<td>{item.val}</td>
|
||||
<td style={{ width: 58 }}>{item.lowerLimit}</td>
|
||||
<td style={{ width: 58 }}>{item.upperLimit}</td>
|
||||
<td style={{ width: 129 }}>{item.warnTime}</td>
|
||||
</tr>
|
||||
)) : <Empty />
|
||||
}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/* 视频监控 */}
|
||||
<div className='operate-log'>
|
||||
<div className='project-title'>
|
||||
视频监控
|
||||
</div>
|
||||
<div className='project-content video-style'>
|
||||
{index !== 0 && <LeftCircleFilled className="leftIcon" onClick={() => delClick()} />}
|
||||
<HFivePlayer wsUrl={videoArr} playerID={'111'} />
|
||||
{index !== videoList.length - 1 && <RightCircleFilled className="rightIcon" onClick={() => addClick()} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 报警信息 */}
|
||||
<div className='operate-log'>
|
||||
<div className='project-title'>报警信息</div>
|
||||
<div className='project-content'>
|
||||
<table style={{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr style={{ background: '#455a87', height: 35, fontSize: 14 }}>
|
||||
<th>监测点</th>
|
||||
<th>监测值</th>
|
||||
<th style={{ width: 58 }}>阈值下限</th>
|
||||
<th style={{ width: 60 }}>阈值上限</th>
|
||||
<th style={{ width: 129 }}>报警时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody style={{ height: 170, overflow: policeData.length > 6 ? 'scroll' : 'hidden' }} >
|
||||
{policeData.length > 0 ? policeData.map((item, i) => (
|
||||
<tr style={{ borderBottom: '2px solid #536cc6', textAlign: 'center' }} className={clsx({ 'odd_row': i % 2 })} key={i}>
|
||||
<td style={{ width: 58 }}>{jcdType[item.type]}</td>
|
||||
<td>{item.val}</td>
|
||||
<td style={{ width: 58 }}>{item.lowerLimit}</td>
|
||||
<td style={{ width: 58 }}>{item.upperLimit}</td>
|
||||
<td style={{ width: 129 }}>{item.warnTime}</td>
|
||||
</tr>
|
||||
)):<Empty />
|
||||
}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/* 视频监控 */}
|
||||
<div className='operate-log'>
|
||||
<div className='project-title'>
|
||||
视频监控
|
||||
</div>
|
||||
<div className='project-content video-style'>
|
||||
{index !== 0 && <LeftCircleFilled className="leftIcon" onClick={() => delClick()} />}
|
||||
<HFivePlayer wsUrl={videoArr} playerID={'111'} />
|
||||
{index !== videoList.length - 1 && <RightCircleFilled className="rightIcon" onClick={() => addClick()} />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@
|
|||
.content-box{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.content-left{
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in New Issue