首页巡查巡检
parent
b2ea45ba64
commit
33484c9156
|
|
@ -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 (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal2">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='homeModal2_content'>
|
||||
daichuli
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Wxq);
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<div className="dp-popup" style={{ position: 'absolute', top: '10px', left: 0, width, lineHeight: 1, background:'#ffffff' ,transform: 'translateX(-50%)' }}>
|
||||
<div className="dp-popup-tip" style={{marginTop:'-10px',borderBottomColor:'#f7f7f7'}}></div>
|
||||
<div className="dp-popup-content">
|
||||
<div className="content-body tyb" id='tyb'>
|
||||
<div className="title">
|
||||
<div className="name flex flexac">
|
||||
<div className='nameBorder'></div>
|
||||
{data.stnm}
|
||||
</div>
|
||||
<div style={{cursor:'pointer',marginRight:'10px'}} onClick={()=>{setVisible(true)}}>详情</div>
|
||||
<div className="extra">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="body">
|
||||
<Descriptions labelStyle={{padding:"5px 0"}}>
|
||||
<Descriptions.Item label="巡查完成日期" span={3} contentStyle={{ padding: "5px 0" }}>{data?.adnm || detail?.adnm}</Descriptions.Item>
|
||||
<Descriptions.Item label="检查人" span={3} contentStyle={{padding:"5px 0"}}>{data?.ptcount || detail?.ptcount}</Descriptions.Item>
|
||||
<Descriptions.Item label="任务类型" span={3} contentStyle={{padding:"5px 0"}}>{data?.etcount || detail?.etcount}</Descriptions.Item>
|
||||
<Descriptions.Item label="问题数量" span={3} contentStyle={{padding:"5px 0"}}>{data.htcount || detail?.htcount}</Descriptions.Item>
|
||||
<Descriptions.Item label="待处理" span={3} contentStyle={{padding:"5px 0"}}>{data.htcount || detail?.htcount}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
</div>
|
||||
<div className="boxfoot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Modal
|
||||
visible={visible}
|
||||
title={'巡查任务详情'}
|
||||
footer={null}
|
||||
onCancel={()=>{setVisible(false)}}
|
||||
width="60vw"
|
||||
destroyOnClose
|
||||
className="queryDrpModal"
|
||||
style={{top:"15px", height:"58vh"}}
|
||||
>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Wxq);
|
||||
|
|
@ -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 }) {
|
|||
<WeiYi id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
}else if (type === 'xunjian'){
|
||||
Comp = XunJian
|
||||
}else if (type === 'daichuli'){
|
||||
return (
|
||||
<Modal width={1050} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<DaiChuLi id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
else{
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 === '水质' ? <ShuiZhi/>:null }
|
||||
{ checkedObj.label === '视频点' ? <ShiPinDian/>:null }
|
||||
|
||||
{ checkedObj.label === '巡查巡检' ? <XunChaXunJian/>:null }
|
||||
|
||||
{ checkedObj.label === '水库' ? <GCShuiKu/>:null }
|
||||
{ checkedObj.label === '大坝' ? <DaBa/>:null }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="xunchaxunjian">
|
||||
<div className="bodyBox">
|
||||
<div className="bodyBoxItem">
|
||||
<div className="num" style={{color:'#04D919'}}>{dataObj.qxWarn?.length||0}</div>
|
||||
<div className="content">本月巡查</div>
|
||||
</div>
|
||||
<div className="bodyBoxItem">
|
||||
<div className="num" style={{color:'#04D919'}}>{dataObj.shiftWarn?.length||0}</div>
|
||||
<div className="content">本年巡查</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div className="bodyBoxItem">
|
||||
<div className="num">{dataObj.pressWarn?.length||0}</div>
|
||||
<div className="content">未处理异常</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{width:'100%',borderBottom:'1px solid #eee',margin:'10px 0 10px 0'}}></div>
|
||||
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{margin:'0 10px'}} />
|
||||
{'本月巡查记录'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ant-card-body" style={{padding:"10px"}}>
|
||||
<Table rowKey="adcd"
|
||||
sticky
|
||||
columns={columns1}
|
||||
pagination={false}
|
||||
dataSource={[
|
||||
{stnm:'05-19 日常巡检',drp:10,data:{"type":"MultiLineString","coordinates":[[[108.946468916,29.839743716],[108.94648914,29.839752481],[108.946539808,29.839746046],[108.946613728,29.839728456],[108.946710354,29.839695317]]]}},
|
||||
{stnm:'2',drp:11,data:{"type":"MultiLineString","coordinates":[[[108.81539631,29.812984419],[108.815424872,29.813001491],[108.815487593,29.813061075],[108.815576108,29.813157977],[108.815677919,29.813283716]]]}},
|
||||
]}
|
||||
scroll={{ y: "300px"}}
|
||||
onRow={
|
||||
(data)=>({
|
||||
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],
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{width:'100%',borderBottom:'1px solid #eee',margin:'10px 0 10px 0'}}></div>
|
||||
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{margin:'0 10px'}} />
|
||||
{'待处理问题清单'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ant-card-body" style={{padding:"10px"}}>
|
||||
<Table rowKey="adcd"
|
||||
sticky
|
||||
columns={columns2}
|
||||
pagination={false}
|
||||
dataSource={[
|
||||
{stnm:'1',drp:10},
|
||||
{stnm:'2',drp:11},
|
||||
]}
|
||||
scroll={{ y: "300px"}}
|
||||
onRow={
|
||||
(data)=>({
|
||||
onClick:()=>{
|
||||
// dispatch.map.setLayerVisible({"HdswLayer":true});
|
||||
dispatch.runtime.setFeaturePop({
|
||||
id: data.stnm,
|
||||
data: data,
|
||||
type: 'daichuli',
|
||||
lgtd: data.lgtd,
|
||||
lttd: data.lttd,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
Loading…
Reference in New Issue