Compare commits
No commits in common. "9a42c45df7abf946cf508292f0c8af1dbad717d2" and "566a54ea1a83b479a411a3952380f9ef7893ffd1" have entirely different histories.
9a42c45df7
...
566a54ea1a
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
|
|
@ -323,7 +323,7 @@ const map = {
|
||||||
};
|
};
|
||||||
dispatch.runtime.setCameraTarget({
|
dispatch.runtime.setCameraTarget({
|
||||||
center: [114.88069, 31.171967],
|
center: [114.88069, 31.171967],
|
||||||
zoom: 13,
|
zoom: 12,
|
||||||
pitch: 60,
|
pitch: 60,
|
||||||
bearing: 0
|
bearing: 0
|
||||||
});
|
});
|
||||||
|
|
@ -582,189 +582,189 @@ const map = {
|
||||||
dispatch.map.setLayerSetting({ dom: false });
|
dispatch.map.setLayerSetting({ dom: false });
|
||||||
// map.setLayoutProperty('卫星图', 'visibility', 'none');
|
// map.setLayoutProperty('卫星图', 'visibility', 'none');
|
||||||
}
|
}
|
||||||
// if (id == 203) {
|
if (id == 203) {
|
||||||
// const skdata = [
|
const skdata = [
|
||||||
// {
|
{
|
||||||
// "stcd": "61614200",
|
"stcd": "61614200",
|
||||||
// "type": "sk",
|
"type": "sk",
|
||||||
// "hasRz": true,
|
"hasRz": true,
|
||||||
// "stnm": "浮桥河水库",
|
"stnm": "浮桥河水库",
|
||||||
// "adcd": "421181100000",
|
"adcd": "421181100000",
|
||||||
// "wscd": null,
|
"wscd": null,
|
||||||
// "importancy": 0,
|
"importancy": 0,
|
||||||
// "lgtd": 114.875,
|
"lgtd": 114.875,
|
||||||
// "lttd": 31.166667,
|
"lttd": 31.166667,
|
||||||
// "elev": 0,
|
"elev": 0,
|
||||||
// "damel": 71.33,
|
"damel": 71.33,
|
||||||
// "dsflz": 68.04,
|
"dsflz": 68.04,
|
||||||
// "fsltdz": 64.89,
|
"fsltdz": 64.89,
|
||||||
// "ddz": 51.78,
|
"ddz": 51.78,
|
||||||
// "zcxsw": 64.89,
|
"zcxsw": 64.89,
|
||||||
// "drpTm": "2025-06-03T02:00:00.000Z",
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
// "today": 0,
|
"today": 0,
|
||||||
// "h1": 5,
|
"h1": 5,
|
||||||
// "h3": 6,
|
"h3": 6,
|
||||||
// "h6": 7.5,
|
"h6": 7.5,
|
||||||
// "h12": 8,
|
"h12": 8,
|
||||||
// "h24": 9,
|
"h24": 9,
|
||||||
// "h48": 26,
|
"h48": 26,
|
||||||
// "drpState": 1,
|
"drpState": 1,
|
||||||
// "rz": 60.71,
|
"rz": 60.71,
|
||||||
// "w": 162.8,
|
"w": 162.8,
|
||||||
// "a_fsltdz": -4.18,
|
"a_fsltdz": -4.18,
|
||||||
// "rzTm": "2025-06-03T02:00:00.000Z",
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||||
// "rzWarning": 0,
|
"rzWarning": 0,
|
||||||
// "rzState": 1,
|
"rzState": 1,
|
||||||
// "aRz": -4.18
|
"aRz": -4.18
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "stcd": "61613010",
|
"stcd": "61613010",
|
||||||
// "type": "sk",
|
"type": "sk",
|
||||||
// "hasRz": true,
|
"hasRz": true,
|
||||||
// "stnm": "明山水库",
|
"stnm": "明山水库",
|
||||||
// "adcd": "421181103000",
|
"adcd": "421181103000",
|
||||||
// "wscd": null,
|
"wscd": null,
|
||||||
// "importancy": 0,
|
"importancy": 0,
|
||||||
// "lgtd": 115.066667,
|
"lgtd": 115.066667,
|
||||||
// "lttd": 31.016667,
|
"lttd": 31.016667,
|
||||||
// "elev": 0,
|
"elev": 0,
|
||||||
// "damel": 98.7,
|
"damel": 98.7,
|
||||||
// "dsflz": 96.07,
|
"dsflz": 96.07,
|
||||||
// "fsltdz": 93,
|
"fsltdz": 93,
|
||||||
// "ddz": 78.02,
|
"ddz": 78.02,
|
||||||
// "zcxsw": 93,
|
"zcxsw": 93,
|
||||||
// "drpTm": "2025-06-03T02:00:00.000Z",
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
// "today": 0,
|
"today": 0,
|
||||||
// "h1": 7,
|
"h1": 7,
|
||||||
// "h3": 8.4,
|
"h3": 8.4,
|
||||||
// "h6": 10.5,
|
"h6": 10.5,
|
||||||
// "h12": 11.200000000000001,
|
"h12": 11.200000000000001,
|
||||||
// "h24": 12.6,
|
"h24": 12.6,
|
||||||
// "h48": 25.799999999999997,
|
"h48": 25.799999999999997,
|
||||||
// "drpState": 1,
|
"drpState": 1,
|
||||||
// "rz": 84.43,
|
"rz": 84.43,
|
||||||
// "w": 49.5,
|
"w": 49.5,
|
||||||
// "a_fsltdz": -8.569999999999993,
|
"a_fsltdz": -8.569999999999993,
|
||||||
// "rzTm": "2025-06-03T02:00:00.000Z",
|
"rzTm": "2025-06-03T02:00:00.000Z",
|
||||||
// "rzWarning": 0,
|
"rzWarning": 0,
|
||||||
// "rzState": 1,
|
"rzState": 1,
|
||||||
// "aRz": -8.57
|
"aRz": -8.57
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "stcd": "61612610",
|
"stcd": "61612610",
|
||||||
// "type": "sk",
|
"type": "sk",
|
||||||
// "hasRz": true,
|
"hasRz": true,
|
||||||
// "stnm": "三河口水库",
|
"stnm": "三河口水库",
|
||||||
// "adcd": "421181109000",
|
"adcd": "421181109000",
|
||||||
// "wscd": null,
|
"wscd": null,
|
||||||
// "importancy": 0,
|
"importancy": 0,
|
||||||
// "lgtd": 115.166667,
|
"lgtd": 115.166667,
|
||||||
// "lttd": 31.333333,
|
"lttd": 31.333333,
|
||||||
// "elev": 0,
|
"elev": 0,
|
||||||
// "damel": 156.8,
|
"damel": 156.8,
|
||||||
// "dsflz": 154.99,
|
"dsflz": 154.99,
|
||||||
// "fsltdz": 149,
|
"fsltdz": 149,
|
||||||
// "ddz": 124,
|
"ddz": 124,
|
||||||
// "zcxsw": 149,
|
"zcxsw": 149,
|
||||||
// "drpTm": "2025-06-03T02:00:00.000Z",
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
// "today": 0,
|
"today": 0,
|
||||||
// "h1": 7,
|
"h1": 7,
|
||||||
// "h3": 8.4,
|
"h3": 8.4,
|
||||||
// "h6": 10.5,
|
"h6": 10.5,
|
||||||
// "h12": 11.200000000000001,
|
"h12": 11.200000000000001,
|
||||||
// "h24": 12.6,
|
"h24": 12.6,
|
||||||
// "h48": 25.799999999999997,
|
"h48": 25.799999999999997,
|
||||||
// "drpState": 1,
|
"drpState": 1,
|
||||||
// "rz": 141.45,
|
"rz": 141.45,
|
||||||
// "w": 77.8,
|
"w": 77.8,
|
||||||
// "a_fsltdz": -7.550000000000011,
|
"a_fsltdz": -7.550000000000011,
|
||||||
// "rzTm": "2025-06-03T01:00:00.000Z",
|
"rzTm": "2025-06-03T01:00:00.000Z",
|
||||||
// "rzWarning": 0,
|
"rzWarning": 0,
|
||||||
// "rzState": 1,
|
"rzState": 1,
|
||||||
// "aRz": -7.55
|
"aRz": -7.55
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// "stcd": "61612700",
|
"stcd": "61612700",
|
||||||
// "type": "sk",
|
"type": "sk",
|
||||||
// "hasRz": true,
|
"hasRz": true,
|
||||||
// "stnm": "碧绿河水库",
|
"stnm": "碧绿河水库",
|
||||||
// "adcd": "421181109000",
|
"adcd": "421181109000",
|
||||||
// "wscd": null,
|
"wscd": null,
|
||||||
// "importancy": 0,
|
"importancy": 0,
|
||||||
// "lgtd": 115.214444,
|
"lgtd": 115.214444,
|
||||||
// "lttd": 31.299722,
|
"lttd": 31.299722,
|
||||||
// "elev": 0,
|
"elev": 0,
|
||||||
// "damel": 142.9,
|
"damel": 142.9,
|
||||||
// "dsflz": 139.08,
|
"dsflz": 139.08,
|
||||||
// "fsltdz": 137,
|
"fsltdz": 137,
|
||||||
// "ddz": 105,
|
"ddz": 105,
|
||||||
// "zcxsw": 137,
|
"zcxsw": 137,
|
||||||
// "drpTm": "2025-06-03T02:00:00.000Z",
|
"drpTm": "2025-06-03T02:00:00.000Z",
|
||||||
// "today": 0,
|
"today": 0,
|
||||||
// "h1": 4,
|
"h1": 4,
|
||||||
// "h3": 4.8,
|
"h3": 4.8,
|
||||||
// "h6": 6,
|
"h6": 6,
|
||||||
// "h12": 6.4,
|
"h12": 6.4,
|
||||||
// "h24": 7.2,
|
"h24": 7.2,
|
||||||
// "h48": 22.6,
|
"h48": 22.6,
|
||||||
// "drpState": 1,
|
"drpState": 1,
|
||||||
// "rz": 119.6,
|
"rz": 119.6,
|
||||||
// "w": 13.15,
|
"w": 13.15,
|
||||||
// "a_fsltdz": -17.400000000000006,
|
"a_fsltdz": -17.400000000000006,
|
||||||
// "rzTm": "2025-06-03T00:00:00.000Z",
|
"rzTm": "2025-06-03T00:00:00.000Z",
|
||||||
// "rzWarning": 0,
|
"rzWarning": 0,
|
||||||
// "rzState": 2,
|
"rzState": 2,
|
||||||
// "aRz": -17.4
|
"aRz": -17.4
|
||||||
// }
|
}
|
||||||
// ]
|
]
|
||||||
// const layer = map.getLayer('关联站点')
|
const layer = map.getLayer('关联站点')
|
||||||
// if (layer) {
|
if (layer) {
|
||||||
// map.removeLayer('关联站点');
|
map.removeLayer('关联站点');
|
||||||
// map.removeSource('关联站点');
|
map.removeSource('关联站点');
|
||||||
// }
|
}
|
||||||
// map.addLayer({
|
map.addLayer({
|
||||||
// 'id': '关联站点',//+new Date().getTime(),
|
'id': '关联站点',//+new Date().getTime(),
|
||||||
// 'type': 'symbol',
|
'type': 'symbol',
|
||||||
// 'source': {
|
'source': {
|
||||||
// 'type': 'geojson',
|
'type': 'geojson',
|
||||||
// 'data': {
|
'data': {
|
||||||
// 'type': 'FeatureCollection',
|
'type': 'FeatureCollection',
|
||||||
// 'features': [],
|
'features': [],
|
||||||
// },
|
},
|
||||||
// },
|
},
|
||||||
// 'layout': {
|
'layout': {
|
||||||
// 'icon-allow-overlap': true,
|
'icon-allow-overlap': true,
|
||||||
// 'text-allow-overlap': true,
|
'text-allow-overlap': true,
|
||||||
// 'icon-image': '水库-离线',
|
'icon-image': '水库-离线',
|
||||||
// 'icon-size': [
|
'icon-size': [
|
||||||
// 'interpolate', ['linear'], ['zoom'],
|
'interpolate', ['linear'], ['zoom'],
|
||||||
// 10, 0.4,
|
10, 0.4,
|
||||||
// 14, 0.8,
|
14, 0.8,
|
||||||
// ],
|
],
|
||||||
// 'text-allow-overlap': true,
|
'text-allow-overlap': true,
|
||||||
// 'text-size': [
|
'text-size': [
|
||||||
// 'interpolate', ['linear'], ['zoom'],
|
'interpolate', ['linear'], ['zoom'],
|
||||||
// 10, 10,
|
10, 10,
|
||||||
// 14, 14,
|
14, 14,
|
||||||
// ],
|
],
|
||||||
// 'text-font': ['Roboto Black'],
|
'text-font': ['Roboto Black'],
|
||||||
// 'text-field': [
|
'text-field': [
|
||||||
// 'step',
|
'step',
|
||||||
// ['zoom'],
|
['zoom'],
|
||||||
// '',
|
'',
|
||||||
// 12, ['get', 'stnm']
|
12, ['get', 'stnm']
|
||||||
// ],
|
],
|
||||||
// 'text-anchor': 'top',
|
'text-anchor': 'top',
|
||||||
// 'text-offset': [0, 1],
|
'text-offset': [0, 1],
|
||||||
|
|
||||||
// },
|
},
|
||||||
// 'paint': {
|
'paint': {
|
||||||
// 'text-color': '#fff'
|
'text-color': '#fff'
|
||||||
// },
|
},
|
||||||
// 'visibility': 'visible',
|
'visibility': 'visible',
|
||||||
// });
|
});
|
||||||
// map.getSource('关联站点').setData(parseGeoJSON(skdata))
|
map.getSource('关联站点').setData(parseGeoJSON(skdata))
|
||||||
// }
|
}
|
||||||
|
|
||||||
if(id!==200&&id!==203&&id!==205&&id!==206){
|
if(id!==200&&id!==203&&id!==205&&id!==206){
|
||||||
const layer = map.getLayer('临时水库tz')
|
const layer = map.getLayer('临时水库tz')
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ const shyjview = {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// dispatch.runtime.setHome();
|
dispatch.runtime.setHome();
|
||||||
},
|
},
|
||||||
async showWeatherRadar(_, state) {
|
async showWeatherRadar(_, state) {
|
||||||
dispatch.map.setCalculating(true);
|
dispatch.map.setCalculating(true);
|
||||||
|
|
@ -49,7 +49,7 @@ const shyjview = {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// dispatch.runtime.setHome();
|
dispatch.runtime.setHome();
|
||||||
},
|
},
|
||||||
|
|
||||||
async showYj24hContour(latest) {
|
async showYj24hContour(latest) {
|
||||||
|
|
|
||||||
|
|
@ -1,239 +0,0 @@
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { Card, Row, Col, Table, Tag, Form, Input, DatePicker, Tabs } from 'antd';
|
|
||||||
import './index.less';
|
|
||||||
import moment from 'moment';
|
|
||||||
import ModalView from './view'
|
|
||||||
const TaskInspectionDetail = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [activeTab, setActiveTab] = useState('dam');
|
|
||||||
const [visible, setVisible] = useState(false)
|
|
||||||
|
|
||||||
// 表单初始值
|
|
||||||
const initialValues = {
|
|
||||||
taskTitle: '06-02浮桥河日常巡查',
|
|
||||||
taskType: '日常巡查',
|
|
||||||
taskContent: '20250602每日巡检任务',
|
|
||||||
startTime: moment('2025-06-02 00:00:00'),
|
|
||||||
endTime: moment('2025-06-08 23:59:59'),
|
|
||||||
receiveTime: moment('2025-06-02 09:07:31'),
|
|
||||||
completeTime: moment('2025-06-02 09:08:05'),
|
|
||||||
inspector: '姜兴军',
|
|
||||||
taskStatus: '已完成'
|
|
||||||
};
|
|
||||||
|
|
||||||
// 巡查类别数据
|
|
||||||
const categories = [
|
|
||||||
{ key: 'dam', label: '大坝', count: 0 },
|
|
||||||
{ key: 'spillway', label: '溢洪道', count: 0 },
|
|
||||||
{ key: 'waterPipe', label: '输水管', count: 0 },
|
|
||||||
{ key: 'facilities', label: '管理设施', count: 0 },
|
|
||||||
{ key: 'valve', label: '阀门与启闭机', count: 0 },
|
|
||||||
{ key: 'others', label: '其他情况', count: 0 }
|
|
||||||
];
|
|
||||||
|
|
||||||
const detailModal = (row) => {
|
|
||||||
setVisible(true)
|
|
||||||
}
|
|
||||||
// 表格列定义
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '序号',
|
|
||||||
dataIndex: 'index',
|
|
||||||
key: 'index',
|
|
||||||
width: 80
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查项',
|
|
||||||
dataIndex: 'item',
|
|
||||||
key: 'item'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
render: (status) => (
|
|
||||||
<Tag color={status === '正常' ? 'success' : 'error'}>{status}</Tag>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '问题描述',
|
|
||||||
dataIndex: 'description',
|
|
||||||
key: 'description'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查图片',
|
|
||||||
dataIndex: 'images',
|
|
||||||
key: 'images'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查视频',
|
|
||||||
dataIndex: 'videos',
|
|
||||||
key: 'videos'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '是否处理',
|
|
||||||
dataIndex: 'handled',
|
|
||||||
key: 'handled'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '处理人',
|
|
||||||
dataIndex: 'handler',
|
|
||||||
key: 'handler'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
render: (v,r) => (
|
|
||||||
<span style={{background:'#1890ff',padding:'8px 15px',color:'#fff'}} onClick={()=>detailModal(r)}>详情</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
index: 1,
|
|
||||||
item: '上游坝',
|
|
||||||
status: '正常',
|
|
||||||
handler: '姜兴军'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
index: 2,
|
|
||||||
item: '下游坝',
|
|
||||||
status: '正常',
|
|
||||||
handler: '姜兴军'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const handleTabChange = (key) => {
|
|
||||||
setActiveTab(key);
|
|
||||||
// 这里可以根据选中的tab加载对应的数据
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="task-inspection-detail" >
|
|
||||||
{/* 任务基本信息 */}
|
|
||||||
<Card className="info-card" title={<span style={{color:"#fff"}}>基本信息</span>}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
initialValues={initialValues}
|
|
||||||
layout="horizontal"
|
|
||||||
labelCol={{ span: 6 }}
|
|
||||||
wrapperCol={{ span: 18 }}
|
|
||||||
>
|
|
||||||
<Row gutter={[24, 16]}>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务标题"
|
|
||||||
name="taskTitle"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务类型"
|
|
||||||
name="taskType"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={24}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务内容"
|
|
||||||
name="taskContent"
|
|
||||||
labelCol={{ span: 3 }}
|
|
||||||
wrapperCol={{ span: 21 }}
|
|
||||||
>
|
|
||||||
<Input.TextArea />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="开始时间"
|
|
||||||
name="startTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="结束时间"
|
|
||||||
name="endTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="接收时间"
|
|
||||||
name="receiveTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="完成时间"
|
|
||||||
name="completeTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="巡查人"
|
|
||||||
name="inspector"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务状态"
|
|
||||||
name="taskStatus"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Form>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 巡查信息 */}
|
|
||||||
<Card className="inspection-card" title={<span style={{color:"#fff"}}>巡查信息</span>}>
|
|
||||||
<div className="category-tabs">
|
|
||||||
{categories.map(category => (
|
|
||||||
<div
|
|
||||||
key={category.key}
|
|
||||||
className={`category-tab ${activeTab === category.key ? 'active' : ''}`}
|
|
||||||
onClick={() => handleTabChange(category.key)}
|
|
||||||
>
|
|
||||||
<span className="category-label">{category.label}</span>
|
|
||||||
<span className="category-count" style={{color:activeTab === category.key?'#1890ff':''}}>({category.count})</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="table-info">
|
|
||||||
<span className="total-info">
|
|
||||||
(异常项：0，正常项：13)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Table
|
|
||||||
columns={columns}
|
|
||||||
dataSource={tableData}
|
|
||||||
pagination={false}
|
|
||||||
className="inspection-table"
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
<ModalView
|
|
||||||
open={visible}
|
|
||||||
onClose={() => setVisible(false)}
|
|
||||||
></ModalView>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TaskInspectionDetail;
|
|
||||||
|
|
@ -1,140 +0,0 @@
|
||||||
.task-inspection-detail {
|
|
||||||
padding: 5px;
|
|
||||||
background-color: transparent;
|
|
||||||
min-height: 100vh;
|
|
||||||
|
|
||||||
.info-card {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
.ant-card-body {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-form-item-label > label {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-input,
|
|
||||||
.ant-picker {
|
|
||||||
background-color: rgba(255, 255, 255, 0.04);
|
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
border-color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker {
|
|
||||||
.ant-picker-input > input {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker-suffix,
|
|
||||||
.ant-picker-separator {
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker-clear {
|
|
||||||
background: #1a1a27;
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-input-textarea {
|
|
||||||
.ant-input {
|
|
||||||
min-height: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker-suffix {
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.inspection-card {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
.category-tabs {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding-bottom: 16px;
|
|
||||||
|
|
||||||
.category-tab {
|
|
||||||
padding: 8px 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #1890ff;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -16px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-label {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-count {
|
|
||||||
margin-left: 4px;
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .category-label,
|
|
||||||
&.active .category-label {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-info {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
.total-info {
|
|
||||||
color: rgba(255, 255, 255, 0.65);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.inspection-table {
|
|
||||||
.ant-table {
|
|
||||||
background-color: transparent;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.ant-table-thead > tr > th {
|
|
||||||
background-color: rgba(255, 255, 255, 0.04);
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr > td {
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: rgba(255, 255, 255, 0.65);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr:hover > td {
|
|
||||||
background-color: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import DpTab from '../../../../../layouts/mui/DpTab';
|
|
||||||
import Dialog from '@material-ui/core/Dialog';
|
|
||||||
import DialogContent from '@material-ui/core/DialogContent';
|
|
||||||
import DpPaperComponent from '../../../../../layouts/mui/DpPaperCompanent';
|
|
||||||
import DpTabs from '../../../../../layouts/mui/DpTabs';
|
|
||||||
import DpAppBar from '../../../../../layouts/mui/DpAppBar';
|
|
||||||
import DpBackgroundDrop from '../../../../../layouts/mui/DpBackdrop';
|
|
||||||
import DpCloseButton from '../../../../../layouts/mui/DpCloseButton';
|
|
||||||
import { Grid } from '@material-ui/core';
|
|
||||||
import DescriptionItem from '../../../components/DescrptionItem'
|
|
||||||
function HDStDlg({ record, onClose,open }) {
|
|
||||||
const [value, setValue] = React.useState(0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog
|
|
||||||
open={open}
|
|
||||||
onClose={onClose}
|
|
||||||
maxWidth="xl"
|
|
||||||
style={{ borderRadius: 0 }}
|
|
||||||
PaperComponent={DpPaperComponent}
|
|
||||||
BackdropComponent={DpBackgroundDrop}
|
|
||||||
>
|
|
||||||
<div className="boxhead"></div>
|
|
||||||
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden',height:'40rem' }}>
|
|
||||||
<DpAppBar position="sticky">
|
|
||||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
|
||||||
<DpTab label="处理详情" />
|
|
||||||
</DpTabs>
|
|
||||||
<DpCloseButton onClick={onClose} />
|
|
||||||
</DpAppBar>
|
|
||||||
<div style={{padding:10}}>
|
|
||||||
{/* <img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img> */}
|
|
||||||
<Grid container size="small">
|
|
||||||
<DescriptionItem label="处理图片" span={2}></DescriptionItem>
|
|
||||||
<DescriptionItem label="处理视频" span={2}></DescriptionItem>
|
|
||||||
<DescriptionItem label="处理描述" span={2}></DescriptionItem>
|
|
||||||
</Grid>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
<div className="boxfoot"></div>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(HDStDlg);
|
|
||||||
|
|
@ -7,7 +7,7 @@ import DpTabs from '../../../../layouts/mui/DpTabs';
|
||||||
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
||||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||||
import TaskInspectionDetail from './TaskInspectionDetail'
|
|
||||||
function HDStDlg({ record, onClose }) {
|
function HDStDlg({ record, onClose }) {
|
||||||
const [value, setValue] = React.useState(0);
|
const [value, setValue] = React.useState(0);
|
||||||
|
|
||||||
|
|
@ -21,16 +21,15 @@ function HDStDlg({ record, onClose }) {
|
||||||
BackdropComponent={DpBackgroundDrop}
|
BackdropComponent={DpBackgroundDrop}
|
||||||
>
|
>
|
||||||
<div className="boxhead"></div>
|
<div className="boxhead"></div>
|
||||||
<DialogContent style={{ padding: 0, width: '80rem', overflowX: 'hidden',height:'80rem' }}>
|
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden',height:'80rem' }}>
|
||||||
<DpAppBar position="sticky">
|
<DpAppBar position="sticky">
|
||||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
||||||
<DpTab label="任务信息" />
|
<DpTab label="任务信息" />
|
||||||
</DpTabs>
|
</DpTabs>
|
||||||
<DpCloseButton onClick={onClose} />
|
<DpCloseButton onClick={onClose} />
|
||||||
</DpAppBar>
|
</DpAppBar>
|
||||||
<div >
|
<div style={{padding:10}}>
|
||||||
{/* <img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img> */}
|
<img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img>
|
||||||
<TaskInspectionDetail />
|
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
<div className="boxfoot"></div>
|
<div className="boxfoot"></div>
|
||||||
|
|
|
||||||
|
|
@ -1,239 +0,0 @@
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { Card, Row, Col, Table, Tag, Form, Input, DatePicker, Tabs } from 'antd';
|
|
||||||
import './index.less';
|
|
||||||
import moment from 'moment';
|
|
||||||
import ModalView from './view'
|
|
||||||
const TaskInspectionDetail = () => {
|
|
||||||
const [form] = Form.useForm();
|
|
||||||
const [activeTab, setActiveTab] = useState('dam');
|
|
||||||
const [visible, setVisible] = useState(false)
|
|
||||||
|
|
||||||
// 表单初始值
|
|
||||||
const initialValues = {
|
|
||||||
taskTitle: '06-02浮桥河日常巡查',
|
|
||||||
taskType: '日常巡查',
|
|
||||||
taskContent: '20250602每日巡检任务',
|
|
||||||
startTime: moment('2025-06-02 00:00:00'),
|
|
||||||
endTime: moment('2025-06-08 23:59:59'),
|
|
||||||
receiveTime: moment('2025-06-02 09:07:31'),
|
|
||||||
completeTime: moment('2025-06-02 09:08:05'),
|
|
||||||
inspector: '姜兴军',
|
|
||||||
taskStatus: '已完成'
|
|
||||||
};
|
|
||||||
|
|
||||||
// 巡查类别数据
|
|
||||||
const categories = [
|
|
||||||
{ key: 'dam', label: '大坝', count: 0 },
|
|
||||||
{ key: 'spillway', label: '溢洪道', count: 0 },
|
|
||||||
{ key: 'waterPipe', label: '输水管', count: 0 },
|
|
||||||
{ key: 'facilities', label: '管理设施', count: 0 },
|
|
||||||
{ key: 'valve', label: '阀门与启闭机', count: 0 },
|
|
||||||
{ key: 'others', label: '其他情况', count: 0 }
|
|
||||||
];
|
|
||||||
|
|
||||||
const detailModal = (row) => {
|
|
||||||
setVisible(true)
|
|
||||||
}
|
|
||||||
// 表格列定义
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '序号',
|
|
||||||
dataIndex: 'index',
|
|
||||||
key: 'index',
|
|
||||||
width: 80
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查项',
|
|
||||||
dataIndex: 'item',
|
|
||||||
key: 'item'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查状态',
|
|
||||||
dataIndex: 'status',
|
|
||||||
key: 'status',
|
|
||||||
render: (status) => (
|
|
||||||
<Tag color={status === '正常' ? 'success' : 'error'}>{status}</Tag>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '问题描述',
|
|
||||||
dataIndex: 'description',
|
|
||||||
key: 'description'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查图片',
|
|
||||||
dataIndex: 'images',
|
|
||||||
key: 'images'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '巡查视频',
|
|
||||||
dataIndex: 'videos',
|
|
||||||
key: 'videos'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '是否处理',
|
|
||||||
dataIndex: 'handled',
|
|
||||||
key: 'handled'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '处理人',
|
|
||||||
dataIndex: 'handler',
|
|
||||||
key: 'handler'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
render: (v,r) => (
|
|
||||||
<span style={{background:'#1890ff',padding:'8px 15px',color:'#fff'}} onClick={()=>detailModal(r)}>详情</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// 表格数据
|
|
||||||
const tableData = [
|
|
||||||
{
|
|
||||||
key: '1',
|
|
||||||
index: 1,
|
|
||||||
item: '上游坝',
|
|
||||||
status: '正常',
|
|
||||||
handler: '姜兴军'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: '2',
|
|
||||||
index: 2,
|
|
||||||
item: '下游坝',
|
|
||||||
status: '正常',
|
|
||||||
handler: '姜兴军'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const handleTabChange = (key) => {
|
|
||||||
setActiveTab(key);
|
|
||||||
// 这里可以根据选中的tab加载对应的数据
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="task-inspection-detail" >
|
|
||||||
{/* 任务基本信息 */}
|
|
||||||
<Card className="info-card" title={<span style={{color:"#fff"}}>基本信息</span>}>
|
|
||||||
<Form
|
|
||||||
form={form}
|
|
||||||
initialValues={initialValues}
|
|
||||||
layout="horizontal"
|
|
||||||
labelCol={{ span: 6 }}
|
|
||||||
wrapperCol={{ span: 18 }}
|
|
||||||
>
|
|
||||||
<Row gutter={[24, 16]}>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务标题"
|
|
||||||
name="taskTitle"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务类型"
|
|
||||||
name="taskType"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={24}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务内容"
|
|
||||||
name="taskContent"
|
|
||||||
labelCol={{ span: 3 }}
|
|
||||||
wrapperCol={{ span: 21 }}
|
|
||||||
>
|
|
||||||
<Input.TextArea />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="开始时间"
|
|
||||||
name="startTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="结束时间"
|
|
||||||
name="endTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="接收时间"
|
|
||||||
name="receiveTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="完成时间"
|
|
||||||
name="completeTime"
|
|
||||||
>
|
|
||||||
<DatePicker showTime style={{ width: '100%' }} />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="巡查人"
|
|
||||||
name="inspector"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Form.Item
|
|
||||||
label="任务状态"
|
|
||||||
name="taskStatus"
|
|
||||||
>
|
|
||||||
<Input />
|
|
||||||
</Form.Item>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Form>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* 巡查信息 */}
|
|
||||||
<Card className="inspection-card" title={<span style={{color:"#fff"}}>巡查信息</span>}>
|
|
||||||
<div className="category-tabs">
|
|
||||||
{categories.map(category => (
|
|
||||||
<div
|
|
||||||
key={category.key}
|
|
||||||
className={`category-tab ${activeTab === category.key ? 'active' : ''}`}
|
|
||||||
onClick={() => handleTabChange(category.key)}
|
|
||||||
>
|
|
||||||
<span className="category-label">{category.label}</span>
|
|
||||||
<span className="category-count" style={{color:activeTab === category.key?'#1890ff':''}}>({category.count})</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="table-info">
|
|
||||||
<span className="total-info">
|
|
||||||
(异常项：0，正常项：13)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<Table
|
|
||||||
columns={columns}
|
|
||||||
dataSource={tableData}
|
|
||||||
pagination={false}
|
|
||||||
className="inspection-table"
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
<ModalView
|
|
||||||
open={visible}
|
|
||||||
onClose={() => setVisible(false)}
|
|
||||||
></ModalView>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TaskInspectionDetail;
|
|
||||||
|
|
@ -1,140 +0,0 @@
|
||||||
.task-inspection-detail {
|
|
||||||
padding: 5px;
|
|
||||||
background-color: transparent;
|
|
||||||
min-height: 100vh;
|
|
||||||
|
|
||||||
.info-card {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
.ant-card-body {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-form-item-label > label {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-input,
|
|
||||||
.ant-picker {
|
|
||||||
background-color: rgba(255, 255, 255, 0.04);
|
|
||||||
border-color: rgba(255, 255, 255, 0.1);
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
border-color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker {
|
|
||||||
.ant-picker-input > input {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker-suffix,
|
|
||||||
.ant-picker-separator {
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker-clear {
|
|
||||||
background: #1a1a27;
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-input-textarea {
|
|
||||||
.ant-input {
|
|
||||||
min-height: 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker-suffix {
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.inspection-card {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
.category-tabs {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding-bottom: 16px;
|
|
||||||
|
|
||||||
.category-tab {
|
|
||||||
padding: 8px 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: #1890ff;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -16px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-label {
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
.category-count {
|
|
||||||
margin-left: 4px;
|
|
||||||
color: rgba(255, 255, 255, 0.45);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .category-label,
|
|
||||||
&.active .category-label {
|
|
||||||
color: #1890ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-info {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
|
|
||||||
.total-info {
|
|
||||||
color: rgba(255, 255, 255, 0.65);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.inspection-table {
|
|
||||||
.ant-table {
|
|
||||||
background-color: transparent;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.ant-table-thead > tr > th {
|
|
||||||
background-color: rgba(255, 255, 255, 0.04);
|
|
||||||
color: rgba(255, 255, 255, 0.85);
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr > td {
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
color: rgba(255, 255, 255, 0.65);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr:hover > td {
|
|
||||||
background-color: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import DpTab from '../../../../../layouts/mui/DpTab';
|
|
||||||
import Dialog from '@material-ui/core/Dialog';
|
|
||||||
import DialogContent from '@material-ui/core/DialogContent';
|
|
||||||
import DpPaperComponent from '../../../../../layouts/mui/DpPaperCompanent';
|
|
||||||
import DpTabs from '../../../../../layouts/mui/DpTabs';
|
|
||||||
import DpAppBar from '../../../../../layouts/mui/DpAppBar';
|
|
||||||
import DpBackgroundDrop from '../../../../../layouts/mui/DpBackdrop';
|
|
||||||
import DpCloseButton from '../../../../../layouts/mui/DpCloseButton';
|
|
||||||
import { Grid } from '@material-ui/core';
|
|
||||||
import DescriptionItem from '../../../components/DescrptionItem'
|
|
||||||
function HDStDlg({ record, onClose,open }) {
|
|
||||||
const [value, setValue] = React.useState(0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Dialog
|
|
||||||
open={open}
|
|
||||||
onClose={onClose}
|
|
||||||
maxWidth="xl"
|
|
||||||
style={{ borderRadius: 0 }}
|
|
||||||
PaperComponent={DpPaperComponent}
|
|
||||||
BackdropComponent={DpBackgroundDrop}
|
|
||||||
>
|
|
||||||
<div className="boxhead"></div>
|
|
||||||
<DialogContent style={{ padding: 0, width: '60rem', overflowX: 'hidden',height:'40rem' }}>
|
|
||||||
<DpAppBar position="sticky">
|
|
||||||
<DpTabs value={value} indicatorColor="primary" onChange={(_, v) => setValue(v)}>
|
|
||||||
<DpTab label="处理详情" />
|
|
||||||
</DpTabs>
|
|
||||||
<DpCloseButton onClick={onClose} />
|
|
||||||
</DpAppBar>
|
|
||||||
<div style={{padding:10}}>
|
|
||||||
{/* <img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img> */}
|
|
||||||
<Grid container size="small">
|
|
||||||
<DescriptionItem label="处理图片" span={2}></DescriptionItem>
|
|
||||||
<DescriptionItem label="处理视频" span={2}></DescriptionItem>
|
|
||||||
<DescriptionItem label="处理描述" span={2}></DescriptionItem>
|
|
||||||
</Grid>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
<div className="boxfoot"></div>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default React.memo(HDStDlg);
|
|
||||||
|
|
@ -138,7 +138,7 @@ const TaskList = () => {
|
||||||
city: '黄冈市',
|
city: '黄冈市',
|
||||||
district: '麻城市',
|
district: '麻城市',
|
||||||
location: '',
|
location: '',
|
||||||
taskType: '06-02浮桥河水库日常巡查',
|
taskType: '06-02明山水库日常巡查',
|
||||||
taskContent: '20250602每日巡检',
|
taskContent: '20250602每日巡检',
|
||||||
status: '未完成',
|
status: '未完成',
|
||||||
person: '姜兴军',
|
person: '姜兴军',
|
||||||
|
|
@ -170,7 +170,7 @@ const TaskList = () => {
|
||||||
city: '黄冈市',
|
city: '黄冈市',
|
||||||
district: '麻城市',
|
district: '麻城市',
|
||||||
location: '',
|
location: '',
|
||||||
taskType: '06-02浮桥河水库特别检查',
|
taskType: '06-02永丰水库特别检查',
|
||||||
taskContent: '20250602每日巡检',
|
taskContent: '20250602每日巡检',
|
||||||
status: '未完成',
|
status: '未完成',
|
||||||
person: '白斌',
|
person: '白斌',
|
||||||
|
|
@ -186,7 +186,7 @@ const TaskList = () => {
|
||||||
city: '黄冈市',
|
city: '黄冈市',
|
||||||
district: '麻城市',
|
district: '麻城市',
|
||||||
location: '',
|
location: '',
|
||||||
taskType: '06-02浮桥河水库日常巡查',
|
taskType: '06-02永红水库日常巡查',
|
||||||
taskContent: '20250602每日巡检',
|
taskContent: '20250602每日巡检',
|
||||||
status: '未完成',
|
status: '未完成',
|
||||||
person: '于静',
|
person: '于静',
|
||||||
|
|
@ -201,7 +201,7 @@ const TaskList = () => {
|
||||||
city: '黄冈市',
|
city: '黄冈市',
|
||||||
district: '麻城市',
|
district: '麻城市',
|
||||||
location: '',
|
location: '',
|
||||||
taskType: '06-02浮桥河水库日常巡查',
|
taskType: '06-02四新水库日常巡查',
|
||||||
taskContent: '20250602每日巡检',
|
taskContent: '20250602每日巡检',
|
||||||
status: '未完成',
|
status: '未完成',
|
||||||
person: '何义红',
|
person: '何义红',
|
||||||
|
|
@ -213,12 +213,9 @@ const TaskList = () => {
|
||||||
creator: ''
|
creator: ''
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const flyTo = (row) => {
|
const flyTo = () => {
|
||||||
// dispatch?.runtime.setInfoDlg({ layerId: 'ChaoshiDetailLayer', properties: {} })
|
// dispatch?.runtime.setInfoDlg({ layerId: 'ChaoshiDetailLayer', properties: {} })
|
||||||
if (row.sequence == 1) {
|
setVisible(true)
|
||||||
setVisible(true)
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
const [params, setParams] = useState({ tm: [] })
|
const [params, setParams] = useState({ tm: [] })
|
||||||
|
|
||||||
|
|
@ -230,7 +227,20 @@ const TaskList = () => {
|
||||||
tm: e,
|
tm: e,
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
useEffect(() => {
|
||||||
|
let options = "";
|
||||||
|
options = {
|
||||||
|
etm: moment().add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
|
||||||
|
stm: moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }).format("YYYY-MM-DD HH:mm"),
|
||||||
|
tm: [
|
||||||
|
moment().subtract(7, 'days').add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
moment().add(1, 'hour').set({ minute: 0, second: 0 }),
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
setParams(options)
|
||||||
|
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Paper className={classes.root}>
|
<Paper className={classes.root}>
|
||||||
|
|
@ -294,7 +304,7 @@ const TaskList = () => {
|
||||||
showTime={{
|
showTime={{
|
||||||
format: 'HH:mm',
|
format: 'HH:mm',
|
||||||
}}
|
}}
|
||||||
value={[moment('2025-06-02 00:00'),moment('2025-06-02 23:00')]}
|
value={params.tm}
|
||||||
getPopupContainer={trigger => trigger.parentElement}
|
getPopupContainer={trigger => trigger.parentElement}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -347,7 +357,7 @@ const TaskList = () => {
|
||||||
<TableCell>{row.problems}</TableCell>
|
<TableCell>{row.problems}</TableCell>
|
||||||
<TableCell>{row.processed}</TableCell>
|
<TableCell>{row.processed}</TableCell>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<IconButton className={classes.actionButton} size="small" onClick={()=>flyTo(row)}>
|
<IconButton className={classes.actionButton} size="small" onClick={flyTo}>
|
||||||
查看
|
查看
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import DpTabs from '../../../../layouts/mui/DpTabs';
|
||||||
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
import DpAppBar from '../../../../layouts/mui/DpAppBar';
|
||||||
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
import DpBackgroundDrop from '../../../../layouts/mui/DpBackdrop';
|
||||||
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
import DpCloseButton from '../../../../layouts/mui/DpCloseButton';
|
||||||
import TaskInspectionDetail from './TaskInspectionDetail'
|
|
||||||
function HDStDlg({ record, onClose,open }) {
|
function HDStDlg({ record, onClose,open }) {
|
||||||
const [value, setValue] = React.useState(0);
|
const [value, setValue] = React.useState(0);
|
||||||
|
|
||||||
|
|
@ -28,9 +28,8 @@ function HDStDlg({ record, onClose,open }) {
|
||||||
</DpTabs>
|
</DpTabs>
|
||||||
<DpCloseButton onClick={onClose} />
|
<DpCloseButton onClick={onClose} />
|
||||||
</DpAppBar>
|
</DpAppBar>
|
||||||
<div style={{ padding: 10 }}>
|
<div style={{padding:10}}>
|
||||||
<TaskInspectionDetail />
|
<img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img>
|
||||||
{/* <img src={`${process.env.PUBLIC_URL}/assets/xcxq.png`} style={{width:'100%'}}></img> */}
|
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
<div className="boxfoot"></div>
|
<div className="boxfoot"></div>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1366,7 +1366,7 @@ useEffect(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
</TableContainer>
|
</TableContainer>
|
||||||
{/* <div style={{ height: '30px', overflow: 'hidden',position:'absolute',top:40,right:1224 }}>
|
<div style={{ height: '30px', overflow: 'hidden',position:'absolute',top:40,right:1224 }}>
|
||||||
<Select
|
<Select
|
||||||
labelId="analysis-select-label"
|
labelId="analysis-select-label"
|
||||||
value={dimension}
|
value={dimension}
|
||||||
|
|
@ -1375,9 +1375,9 @@ useEffect(() => {
|
||||||
>
|
>
|
||||||
<MenuItem value="浮桥河水库">浮桥河水库</MenuItem>
|
<MenuItem value="浮桥河水库">浮桥河水库</MenuItem>
|
||||||
<MenuItem value="明山水库">明山水库</MenuItem>
|
<MenuItem value="明山水库">明山水库</MenuItem>
|
||||||
<MenuItem value="永丰水库">三河口水库</MenuItem>
|
<MenuItem value="永丰水库">永丰水库</MenuItem>
|
||||||
</Select>
|
</Select>
|
||||||
</div> */}
|
</div>
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ import {
|
||||||
} from '@material-ui/core';
|
} from '@material-ui/core';
|
||||||
const reservoirData = [
|
const reservoirData = [
|
||||||
{
|
{
|
||||||
name: '浮桥河水库',
|
name: '明山水库',
|
||||||
maxInflow: {
|
maxInflow: {
|
||||||
value: 12.32,
|
value: 12.32,
|
||||||
time: '03-23 14:32'
|
time: '03-23 14:32'
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ function HDReal({ style }) {
|
||||||
{
|
{
|
||||||
"guid": "42118120003",
|
"guid": "42118120003",
|
||||||
"code": "",
|
"code": "",
|
||||||
"name": "浮桥河水库",
|
"name": "明山水库",
|
||||||
"resRegCode": "42000020030-A4",
|
"resRegCode": "42000020030-A4",
|
||||||
"adName": "白果镇",
|
"adName": "白果镇",
|
||||||
"engScal": "大（2）型",
|
"engScal": "大（2）型",
|
||||||
|
|
@ -92,7 +92,7 @@ function HDReal({ style }) {
|
||||||
{
|
{
|
||||||
"guid": "42118120003",
|
"guid": "42118120003",
|
||||||
"code": "",
|
"code": "",
|
||||||
"name": "浮桥河水库",
|
"name": "永红水库",
|
||||||
"resRegCode": "42000020030-A4",
|
"resRegCode": "42000020030-A4",
|
||||||
"adName": "白果镇",
|
"adName": "白果镇",
|
||||||
"engScal": "大（2）型",
|
"engScal": "大（2）型",
|
||||||
|
|
@ -107,7 +107,7 @@ function HDReal({ style }) {
|
||||||
{
|
{
|
||||||
"guid": "42118120003",
|
"guid": "42118120003",
|
||||||
"code": "",
|
"code": "",
|
||||||
"name": "浮桥河水库",
|
"name": "永丰水库",
|
||||||
"resRegCode": "42000020030-A4",
|
"resRegCode": "42000020030-A4",
|
||||||
"adName": "白果镇",
|
"adName": "白果镇",
|
||||||
"engScal": "大（2）型",
|
"engScal": "大（2）型",
|
||||||
|
|
|
||||||
|
|
@ -14,26 +14,26 @@ function DrpReal({ style }) {
|
||||||
style={style}
|
style={style}
|
||||||
title="水库预报"
|
title="水库预报"
|
||||||
color="green"
|
color="green"
|
||||||
// extra={
|
extra={
|
||||||
// <>
|
<>
|
||||||
// {/* <img src='/assets/年下拉3.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/> */}
|
{/* <img src='/assets/年下拉3.jpg' style={{width:'100px', height:'30px',marginRight:'10px'}}/> */}
|
||||||
// <div style={{height:'30px',overflow:'hidden'}}>
|
<div style={{height:'30px',overflow:'hidden'}}>
|
||||||
// <Select
|
<Select
|
||||||
// labelId="analysis-select-label"
|
labelId="analysis-select-label"
|
||||||
// value={dimension}
|
value={dimension}
|
||||||
// label=""
|
label=""
|
||||||
// onChange={(event) => {
|
onChange={(event) => {
|
||||||
// const value = event.target.value;
|
const value = event.target.value;
|
||||||
// setDimension(value);
|
setDimension(value);
|
||||||
// }}
|
}}
|
||||||
// >
|
>
|
||||||
// <MenuItem value="ft">浮桥河水库</MenuItem>
|
<MenuItem value="ft">浮桥河水库</MenuItem>
|
||||||
// </Select>
|
</Select>
|
||||||
// </div>
|
</div>
|
||||||
// </>
|
</>
|
||||||
// }
|
}
|
||||||
>
|
>
|
||||||
{/* <div className='skyb-box'>
|
<div className='skyb-box'>
|
||||||
<div className='rain-yb'>
|
<div className='rain-yb'>
|
||||||
<div className='title-yb'>水库雨量预报</div>
|
<div className='title-yb'>水库雨量预报</div>
|
||||||
<TableYb />
|
<TableYb />
|
||||||
|
|
@ -45,9 +45,7 @@ function DrpReal({ style }) {
|
||||||
style={{ width: '100%',height:200 }}
|
style={{ width: '100%',height:200 }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div> */}
|
</div>
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/skyb.png`} />
|
|
||||||
|
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1701,14 +1701,14 @@ const data4 = [
|
||||||
const data = [
|
const data = [
|
||||||
{
|
{
|
||||||
"guid": "42118120003",
|
"guid": "42118120003",
|
||||||
"code": "1",
|
"code": "",
|
||||||
"name": "浮桥河水库-日常管理",
|
"name": "明山水库-日常管理",
|
||||||
"resRegCode": "42000020030-A4",
|
"resRegCode": "42000020030-A4",
|
||||||
"adName": "白果镇",
|
"adName": "白果镇",
|
||||||
"engScal": "大（2）型",
|
"engScal": "大（2）型",
|
||||||
"place": "湖北省-黄冈市-麻城市-白果镇",
|
"place": "湖北省-黄冈市-麻城市-白果镇",
|
||||||
"lgtd": "114.88169",
|
"lgtd": "115.066667",
|
||||||
"lttd": "31.171967",
|
"lttd": "31.016667",
|
||||||
'username': '余静',
|
'username': '余静',
|
||||||
taskType: '混凝土护坡开裂',
|
taskType: '混凝土护坡开裂',
|
||||||
tm: '2025-06-02 00:10:00',
|
tm: '2025-06-02 00:10:00',
|
||||||
|
|
@ -1717,7 +1717,7 @@ const data = [
|
||||||
{
|
{
|
||||||
"guid": "42118120003",
|
"guid": "42118120003",
|
||||||
"code": "",
|
"code": "",
|
||||||
"name": "浮桥河水库-日常管理",
|
"name": "永红水库-日常管理",
|
||||||
"resRegCode": "42000020030-A4",
|
"resRegCode": "42000020030-A4",
|
||||||
"adName": "白果镇",
|
"adName": "白果镇",
|
||||||
"engScal": "大（2）型",
|
"engScal": "大（2）型",
|
||||||
|
|
@ -1732,7 +1732,7 @@ const data = [
|
||||||
{
|
{
|
||||||
"guid": "42118120003",
|
"guid": "42118120003",
|
||||||
"code": "",
|
"code": "",
|
||||||
"name": "浮桥河水库-汛前检查",
|
"name": "永丰水库-汛前检查",
|
||||||
"resRegCode": "42000020030-A4",
|
"resRegCode": "42000020030-A4",
|
||||||
"adName": "白果镇",
|
"adName": "白果镇",
|
||||||
"engScal": "大（2）型",
|
"engScal": "大（2）型",
|
||||||
|
|
@ -1750,24 +1750,22 @@ const data = [
|
||||||
function DrpReal({ style }) {
|
function DrpReal({ style }) {
|
||||||
const [tab, setTab] = useState('1')
|
const [tab, setTab] = useState('1')
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const [dimension, setDimension] = useState('浮桥河水库');
|
const [dimension, setDimension] = useState('ft');
|
||||||
const onChange = (event) => {
|
const onChange = (event) => {
|
||||||
const value = event.target.value;
|
const value = event.target.value;
|
||||||
setDimension(value);
|
setDimension(value);
|
||||||
}
|
}
|
||||||
const jumpTo = (record) => {
|
const jumpTo = (record) => {
|
||||||
const { lgtd, lttd } = record;
|
const { lgtd, lttd } = record;
|
||||||
const lgtdNum = Number(lgtd);
|
const lgtdNum = Number(lgtd) + 0.0019;
|
||||||
const lttdNum = Number(lttd)
|
const lttdNum = Number(lttd)
|
||||||
if (record.code == 1) {
|
if (lgtdNum && lttdNum) {
|
||||||
if (lgtdNum && lttdNum) {
|
dispatch.runtime.setCameraTarget({
|
||||||
dispatch.runtime.setCameraTarget({
|
center: [lgtdNum, lttdNum + config.poiPositionOffsetY.hd],
|
||||||
center: [lgtdNum, lttdNum],
|
zoom: config.poiPositionZoom.hd,
|
||||||
zoom: 17,
|
pitch: config.poiPitch,
|
||||||
pitch: config.poiPitch,
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<PanelBox
|
<PanelBox
|
||||||
|
|
@ -1823,18 +1821,19 @@ function DrpReal({ style }) {
|
||||||
<img src={`${process.env.PUBLIC_URL}/assets/sjyf.jpg`} alt="" style={{ width: 420 }} />
|
<img src={`${process.env.PUBLIC_URL}/assets/sjyf.jpg`} alt="" style={{ width: 420 }} />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{/* <div style={{ height: '30px', overflow: 'hidden',position:'absolute',top:40,right:1224 }}>
|
<div style={{ height: '30px', overflow: 'hidden',position:'absolute',top:80,right:520 }}>
|
||||||
<Select
|
<Select
|
||||||
labelId="analysis-select-label"
|
labelId="analysis-select-label"
|
||||||
value={dimension}
|
value={dimension}
|
||||||
label="请选择水库"
|
label="请选择水库"
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
>
|
>
|
||||||
|
<MenuItem value="ft">请选择水库</MenuItem>
|
||||||
<MenuItem value="浮桥河水库">浮桥河水库</MenuItem>
|
<MenuItem value="浮桥河水库">浮桥河水库</MenuItem>
|
||||||
<MenuItem value="明山水库">明山水库</MenuItem>
|
<MenuItem value="明山水库">明山水库</MenuItem>
|
||||||
<MenuItem value="永丰水库">三河口水库</MenuItem>
|
<MenuItem value="永丰水库">永丰水库</MenuItem>
|
||||||
</Select>
|
</Select>
|
||||||
</div> */}
|
</div>
|
||||||
</PanelBox>
|
</PanelBox>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,16 +16,31 @@ import XcCard from './xcCard'
|
||||||
import config from '../../../../config';
|
import config from '../../../../config';
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
|
{
|
||||||
|
"guid": "42118120003",
|
||||||
|
"code": "",
|
||||||
|
"name": "明山水库-日常管理",
|
||||||
|
"resRegCode": "42000020030-A4",
|
||||||
|
"adName": "白果镇",
|
||||||
|
"engScal": "大（2）型",
|
||||||
|
"place": "湖北省-黄冈市-麻城市-白果镇",
|
||||||
|
"lgtd": "115.066667",
|
||||||
|
"lttd": "31.016667",
|
||||||
|
'username': '余静',
|
||||||
|
taskType: '特别巡查',
|
||||||
|
tm: '2025-06-02 00:10:00',
|
||||||
|
status: '未完成'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"guid": "42118120003",
|
"guid": "42118120003",
|
||||||
"code": "1",
|
"code": "",
|
||||||
"name": "浮桥河水库-汛前检查",
|
"name": "浮桥河水库-汛前检查",
|
||||||
"resRegCode": "42000020030-A4",
|
"resRegCode": "42000020030-A4",
|
||||||
"adName": "白果镇",
|
"adName": "白果镇",
|
||||||
"engScal": "大（2）型",
|
"engScal": "大（2）型",
|
||||||
"place": "湖北省-黄冈市-麻城市-白果镇",
|
"place": "湖北省-黄冈市-麻城市-白果镇",
|
||||||
"lgtd": "114.88169",
|
"lgtd": "114.875",
|
||||||
"lttd": "31.171967",
|
"lttd": "31.166667",
|
||||||
'username': '熊杰',
|
'username': '熊杰',
|
||||||
taskType: '日常巡查',
|
taskType: '日常巡查',
|
||||||
tm: '2025-06-02 00:08:00',
|
tm: '2025-06-02 00:08:00',
|
||||||
|
|
@ -50,7 +65,7 @@ const data = [
|
||||||
{
|
{
|
||||||
"guid": "42118120003",
|
"guid": "42118120003",
|
||||||
"code": "",
|
"code": "",
|
||||||
"name": "浮桥河水库-日常管理",
|
"name": "永红水库-日常管理",
|
||||||
"resRegCode": "42000020030-A4",
|
"resRegCode": "42000020030-A4",
|
||||||
"adName": "白果镇",
|
"adName": "白果镇",
|
||||||
"engScal": "大（2）型",
|
"engScal": "大（2）型",
|
||||||
|
|
@ -65,7 +80,7 @@ const data = [
|
||||||
{
|
{
|
||||||
"guid": "42118120003",
|
"guid": "42118120003",
|
||||||
"code": "",
|
"code": "",
|
||||||
"name": "浮桥河水库-汛前检查",
|
"name": "永丰水库-汛前检查",
|
||||||
"resRegCode": "42000020030-A4",
|
"resRegCode": "42000020030-A4",
|
||||||
"adName": "白果镇",
|
"adName": "白果镇",
|
||||||
"engScal": "大（2）型",
|
"engScal": "大（2）型",
|
||||||
|
|
@ -87,16 +102,14 @@ function DrpReal({ style }) {
|
||||||
}
|
}
|
||||||
const jumpTo = (record) => {
|
const jumpTo = (record) => {
|
||||||
const { lgtd, lttd } = record;
|
const { lgtd, lttd } = record;
|
||||||
const lgtdNum = Number(lgtd);
|
const lgtdNum = Number(lgtd) + 0.0019;
|
||||||
const lttdNum = Number(lttd)
|
const lttdNum = Number(lttd)
|
||||||
if (record.code == 1) {
|
if (lgtdNum && lttdNum) {
|
||||||
if (lgtdNum && lttdNum) {
|
dispatch.runtime.setCameraTarget({
|
||||||
dispatch.runtime.setCameraTarget({
|
center: [lgtdNum, lttdNum + config.poiPositionOffsetY.hd],
|
||||||
center: [lgtdNum, lttdNum],
|
zoom: config.poiPositionZoom.hd,
|
||||||
zoom: 17,
|
pitch: config.poiPitch,
|
||||||
pitch: config.poiPitch,
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
import React from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import './index.less';
|
import './index.less';
|
||||||
|
|
||||||
const WaterLevelAlert = () => {
|
const WaterLevelAlert = () => {
|
||||||
|
const [position, setPosition] = useState(0);
|
||||||
|
|
||||||
const alerts = [
|
const alerts = [
|
||||||
{
|
{
|
||||||
reservoir: '浮桥河水库',
|
reservoir: '浮桥河水库',
|
||||||
|
|
@ -11,19 +13,42 @@ const WaterLevelAlert = () => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
reservoir: '浮桥河水库',
|
reservoir: '浮桥河水库',
|
||||||
time: '06月08日03时',
|
time: '06月08日02时',
|
||||||
level: '66.4',
|
level: '93.4',
|
||||||
overLimit: '1.51',
|
overLimit: '0.40',
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
// 复制多组数据以确保滚动效果连续
|
useEffect(() => {
|
||||||
const displayAlerts = [...alerts, ...alerts, ...alerts, ...alerts];
|
const height = 24; // 每个项目的高度
|
||||||
|
const totalHeight = height * alerts.length;
|
||||||
|
let currentPosition = 0;
|
||||||
|
|
||||||
|
const animate = () => {
|
||||||
|
currentPosition += height;
|
||||||
|
if (currentPosition >= totalHeight) {
|
||||||
|
currentPosition = 0;
|
||||||
|
}
|
||||||
|
setPosition(currentPosition);
|
||||||
|
};
|
||||||
|
|
||||||
|
const timer = setInterval(animate, 3000);
|
||||||
|
return () => clearInterval(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 复制一份数据用于无缝滚动
|
||||||
|
const displayAlerts = [...alerts, ...alerts];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="water-level-alert">
|
<div className="water-level-alert">
|
||||||
<div className="alert-container">
|
<div className="alert-container">
|
||||||
<div className="alert-wrapper">
|
<div
|
||||||
|
className="alert-wrapper"
|
||||||
|
style={{
|
||||||
|
transform: `translateY(-${position}px)`,
|
||||||
|
transition: position === 0 ? 'none' : 'transform 0.5s ease-in-out'
|
||||||
|
}}
|
||||||
|
>
|
||||||
{displayAlerts.map((alert, index) => (
|
{displayAlerts.map((alert, index) => (
|
||||||
<div key={index} className="alert-item">
|
<div key={index} className="alert-item">
|
||||||
<span className="alert-text">
|
<span className="alert-text">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
.water-level-alert {
|
.water-level-alert {
|
||||||
width: 650px;
|
|
||||||
background: rgba(0, 32, 51, 0.9);
|
background: rgba(0, 32, 51, 0.9);
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -8,19 +7,10 @@
|
||||||
.alert-container {
|
.alert-container {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-wrapper {
|
.alert-wrapper {
|
||||||
position: absolute;
|
will-change: transform;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
animation: scrollUp 12s linear infinite; // 6秒 * 2条数据
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
animation-play-state: paused; // 鼠标悬停时暂停动画
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-item {
|
.alert-item {
|
||||||
|
|
@ -40,12 +30,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scrollUp {
|
|
||||||
0% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateY(-50%); // 滚动一半的高度，因为我们复制了4组数据
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -170,7 +170,7 @@ export default function Warn({ style }) {
|
||||||
</div> */}
|
</div> */}
|
||||||
</div>}
|
</div>}
|
||||||
|
|
||||||
<div style={{ color: "#fff", position: 'absolute', top: 160, right: 600 }}>
|
<div style={{ color: "#fff", position: 'absolute', top: 90, right: 600 }}>
|
||||||
<WaterLevelAlert />
|
<WaterLevelAlert />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue