From 33484c91566f6a881af8c3dfc0a1d619947ff265 Mon Sep 17 00:00:00 2001 From: qzc Date: Tue, 24 Sep 2024 16:59:13 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=B7=A1=E6=9F=A5=E5=B7=A1?= =?UTF-8?q?=E6=A3=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Home/MapCtrl/Pops/DaiChuLi.js | 49 +++++ src/views/Home/MapCtrl/Pops/XunJian.js | 78 +++++++ src/views/Home/MapCtrl/Pops/index.js | 13 +- src/views/Home/homePanelsLayoutPage/index.js | 2 + .../Home/homePanelsLayoutPage/index.less | 48 +++++ .../item_xunchaxunjian.js | 198 ++++++++++++++++++ 6 files changed, 385 insertions(+), 3 deletions(-) create mode 100644 src/views/Home/MapCtrl/Pops/DaiChuLi.js create mode 100644 src/views/Home/MapCtrl/Pops/XunJian.js create mode 100644 src/views/Home/homePanelsLayoutPage/item_xunchaxunjian.js diff --git a/src/views/Home/MapCtrl/Pops/DaiChuLi.js b/src/views/Home/MapCtrl/Pops/DaiChuLi.js new file mode 100644 index 000000000..64fbeabc7 --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/DaiChuLi.js @@ -0,0 +1,49 @@ +import React, { useEffect, useState } from 'react'; +import { Descriptions, Modal } from 'antd'; +import {CloseOutlined} from '@ant-design/icons'; +import { httpget2 } from '../../../../utils/request'; +import apiurl from '../../../../service/apiurl'; +import moment from "moment" + +function Wxq({ id, data, dispatch }) { + console.log(data); + const width = 400; + const [detail, setDetail] = useState({}) + const [visible,setVisible] = useState(false) + const closePop = () => { + dispatch.runtime.closeFeaturePop(id); + }; + const getDetailData = async(id) => { + try { + const res = await httpget2(`${apiurl.home.wxqdetail}/${id}`); + setDetail(res.data) + } catch (error) { + + } + } + useEffect(() => { + if (data?.PID) { + getDetailData(data?.PID) + } + }, [data]) + + + return ( + <> +
+
+
+ {data.stationCode} +
+ +
+
+
+ daichuli +
+
+ + ) +} + +export default React.memo(Wxq); diff --git a/src/views/Home/MapCtrl/Pops/XunJian.js b/src/views/Home/MapCtrl/Pops/XunJian.js new file mode 100644 index 000000000..4318121e0 --- /dev/null +++ b/src/views/Home/MapCtrl/Pops/XunJian.js @@ -0,0 +1,78 @@ +import React, { useEffect, useState } from 'react'; +import { Descriptions, Modal } from 'antd'; +import {CloseOutlined} from '@ant-design/icons'; +import { httpget2 } from '../../../../utils/request'; +import apiurl from '../../../../service/apiurl'; +import moment from "moment" + +function Wxq({ id, data, dispatch }) { + console.log(data); + const width = 400; + const [detail, setDetail] = useState({}) + const [visible,setVisible] = useState(false) + const closePop = () => { + dispatch.runtime.closeFeaturePop(id); + }; + const getDetailData = async(id) => { + try { + const res = await httpget2(`${apiurl.home.wxqdetail}/${id}`); + setDetail(res.data) + } catch (error) { + + } + } + useEffect(() => { + if (data?.PID) { + getDetailData(data?.PID) + } + }, [data]) + + + return ( + <> +
+
+
+
+
+
+
+ {data.stnm} +
+
{setVisible(true)}}>详情
+
+ +
+
+ +
+ + {data?.adnm || detail?.adnm} + {data?.ptcount || detail?.ptcount} + {data?.etcount || detail?.etcount} + {data.htcount || detail?.htcount} + {data.htcount || detail?.htcount} + +
+
+
+
+
+ + + {setVisible(false)}} + width="60vw" + destroyOnClose + className="queryDrpModal" + style={{top:"15px", height:"58vh"}} + > + + + ) +} + +export default React.memo(Wxq); diff --git a/src/views/Home/MapCtrl/Pops/index.js b/src/views/Home/MapCtrl/Pops/index.js index c04e342e4..9ae934a41 100644 --- a/src/views/Home/MapCtrl/Pops/index.js +++ b/src/views/Home/MapCtrl/Pops/index.js @@ -38,6 +38,8 @@ import YHJMH from './YHJMH' import ShenYa from './ShenYa/index.js'; import ShenLiu from './ShenLiu/index.js'; import WeiYi from './WeiYi/index.js'; +import XunJian from './XunJian.js' +import DaiChuLi from './DaiChuLi.js' import YinShuiGongCheng from './YinShuiGongCheng';//这个先不搞 @@ -201,10 +203,15 @@ function FeaturePops({ mapobj }) { ) + }else if (type === 'xunjian'){ + Comp = XunJian + }else if (type === 'daichuli'){ + return ( + dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}> + + + ) } - - - else{ return null; } diff --git a/src/views/Home/homePanelsLayoutPage/index.js b/src/views/Home/homePanelsLayoutPage/index.js index b3079f5ec..9bf2a3b84 100644 --- a/src/views/Home/homePanelsLayoutPage/index.js +++ b/src/views/Home/homePanelsLayoutPage/index.js @@ -11,6 +11,7 @@ import GongCheng from './item_gongcheng' import JianCe from './item_jiance' import ShuiZhi from './item_shuizhi' import ShiPinDian from './item_shipindian' +import XunChaXunJian from './item_xunchaxunjian' import GCShuiKu from './item_gongchengshuiku' import DaBa from './item_daba' @@ -206,6 +207,7 @@ const HomePage = ({showPanels}) => { { checkedObj.label === '水质' ? :null } { checkedObj.label === '视频点' ? :null } + { checkedObj.label === '巡查巡检' ? :null } { checkedObj.label === '水库' ? :null } { checkedObj.label === '大坝' ? :null } diff --git a/src/views/Home/homePanelsLayoutPage/index.less b/src/views/Home/homePanelsLayoutPage/index.less index 4ee8e66f3..88cde57d3 100644 --- a/src/views/Home/homePanelsLayoutPage/index.less +++ b/src/views/Home/homePanelsLayoutPage/index.less @@ -151,6 +151,54 @@ } } + + .xunchaxunjian{ + .title{ + width: 100%; + height: 35px; + line-height: 35px; + padding: 0 10px; + background-color: #f2f2f2; + letter-spacing: -0.5px; + font-size: 14px; + font-weight: 500; + margin-bottom: 10px; + } + .bodyBox{ + width: 100%; + display: flex; + flex-wrap: wrap; + .bodyBoxItem{ + width: calc( 33% - 10px); + margin: 5px; + height: 90px; + background-color: rgba(234, 244, 254, 1); + border-radius: 5px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + cursor: pointer; + .num{ + height: 45%; + font-weight: 500; + font-size: 22px; + color: #D9001B; + } + .sw{ + color: #04D919; + } + .content{ + display: block; + font-size: 17px; + color: #409EFF; + font-weight: 500; + } + } + } + } + .home_gongshui{ width: 100%; padding: 5px; diff --git a/src/views/Home/homePanelsLayoutPage/item_xunchaxunjian.js b/src/views/Home/homePanelsLayoutPage/item_xunchaxunjian.js new file mode 100644 index 000000000..4a9234cc2 --- /dev/null +++ b/src/views/Home/homePanelsLayoutPage/item_xunchaxunjian.js @@ -0,0 +1,198 @@ +import { useEffect, useState } from "react" +import { Button, Modal, message, Table } from 'antd'; +import {useDispatch, useSelector} from "react-redux"; + +import GeoJSONFormat from "ol/format/GeoJSON"; +import Feature from "ol/Feature"; +import FillStyle from "ol/style/Fill"; +import VectorLayer from "ol/layer/Vector"; +import Style from "ol/style/Style"; +import StrokeStyle from "ol/style/Stroke"; +import { Vector as VectorSource } from "ol/source"; + +import { httppost2 } from "../../../utils/request"; +import apiurl from "../../../service/apiurl"; +import { geometryCenter } from "../../../utils/tools"; +import moment from "moment"; + + + +const Page = ({mySetTms}) => { + const dispatch = useDispatch(); + let mapObj = useSelector(s => s.map.map) + const [ dataObj, setDataObj ] = useState({}) + const [ open, setOpen ] = useState(false) + const [ key , setkey ] = useState('') + const [ tms , setTms ] = useState([ + moment().add(-1,'days').format('YYYY-MM-DD HH:mm:ss'), + moment().format('YYYY-MM-DD HH:mm:ss'), + ]) + + const columns1 = [ + { title: '巡查完成日期', key: 'stnm', dataIndex: 'stnm',align: "center", ellipsis: true }, + { title: '巡查人', key: 'drp', dataIndex: 'drp',align: "center" }, + { title: '异常项次', key: 'drp', dataIndex: 'drp',align: "center" }, + ]; + + const columns2 = [ + { title: '上报时间', key: 'stnm', dataIndex: 'stnm',align: "center", ellipsis: true }, + { title: '巡检问题描述', key: 'drp', dataIndex: 'drp',align: "center" }, + ]; + + useEffect(()=>{ + (async()=>{ + const params = { + start:tms[0], + end:tms[1] + } + const { code, data } = await httppost2(apiurl.home.yj_qxyj,params) + if(code!==200){ + message.error('请求失败') + return + } + mySetTms([ + moment(tms[0]), + moment(tms[1]) + ]) + setDataObj(data) + })() + },[]) + + + const addHlLayer = (geojsonrv,name,color,item)=>{ + mapObj && mapObj.getLayers().getArray().forEach((layer)=> { + if( (layer.values_.name) && ((layer.values_.name).indexOf("HlSX_") !== -1 || (layer.values_.name).indexOf("HlItem_") !== -1 || (layer.values_.name).indexOf("LyItem_") !== -1) ){ + layer.getSource().clear(); + } + }) + + if(!geojsonrv){ + return + } + const geojsonFormat = new GeoJSONFormat(); + let geometry = geojsonFormat.readGeometry(geojsonrv, { + featureProjection: 'EPSG:3857', + }); + const feature = new Feature({ + geometry, + data: item, + name: name + }); + + var vectorSource = new VectorSource({ + features: [feature] + }); + + const vectorLayer = new VectorLayer({ + // @ts-ignore + name: name, + source: vectorSource, + style: new Style({ + stroke: new StrokeStyle({ + color: color, + width: 4, + }), + }), + zIndex:100 + }); + + mapObj.addLayer(vectorLayer); + } + + + return ( +
+
+
+
{dataObj.qxWarn?.length||0}
+
本月巡查
+
+
+
{dataObj.shiftWarn?.length||0}
+
本年巡查
+
+
+
+
{dataObj.pressWarn?.length||0}
+
未处理异常
+
+
+
+ +
+ +
+
+ + {'本月巡查记录'} +
+
+ +
+ ({ + onClick:()=>{ + addHlLayer(data.data,'HlItem_'+data.stnm,'#00FFFF',data) + const center = geometryCenter({type:"LineString",coordinates:data.data.coordinates[0]}); + dispatch.runtime.setFeaturePop({ + id: data.stnm, + data: data, + type: 'xunjian', + lgtd: center[0], + lttd: center[1], + }) + } + }) + } + /> + + +
+ +
+
+ + {'待处理问题清单'} +
+
+ +
+
({ + onClick:()=>{ + // dispatch.map.setLayerVisible({"HdswLayer":true}); + dispatch.runtime.setFeaturePop({ + id: data.stnm, + data: data, + type: 'daichuli', + lgtd: data.lgtd, + lttd: data.lttd, + }) + } + }) + } + /> + + + ) +} + +export default Page