You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
905 lines
48 KiB
905 lines
48 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import request from 'superagent'
|
|
import Hua from '../footer/leadership/centerleft/hudong'
|
|
import moment from 'moment';
|
|
import { OlMapRequest } from '$utils'
|
|
import { useRef } from 'react';
|
|
import { getReportList } from '../../../fillion/actions/patrol'
|
|
import AutoRollComponent from '../footer/build/AutoRollComponent'
|
|
import { Carousel } from 'antd'
|
|
import { CloseOutlined } from '@ant-design/icons'
|
|
|
|
export const busWillRun = [
|
|
{ text: '非运营', value: '0' },
|
|
{ text: '运营', value: '1' },
|
|
{ text: '维修', value: '2' },
|
|
{ text: '保养', value: '3' },
|
|
{ text: '专车', value: '4' },
|
|
{ text: '机动车', value: '5' },
|
|
{ text: '包车', value: '6' },
|
|
{ text: '班车', value: '7' },
|
|
{ text: '检车', value: '8' },
|
|
]
|
|
|
|
const codeMap = {
|
|
x: 'gpsxd',
|
|
y: 'gpsyd',
|
|
c: 'gpscd',
|
|
}
|
|
const OlMap = (props) => {
|
|
const { dispatch, actions, user, olMapArcgisHost, olMapGeoDataHost, patrolList, roadProjectList, tab, busRunTime, busLine, projectList } = props
|
|
|
|
const [olMapOpenData, setOlMapOpenData] = useState([])
|
|
const [olMap, setOlMap] = useState()
|
|
const [curClickCoordinate, setCurClickCoordinate] = useState([])
|
|
const [pointItem, setPointItem] = useState({})
|
|
//
|
|
const [busRunData, setBusRunData] = useState([])
|
|
const [reportRoadData, setReportRoadData] = useState([])
|
|
//
|
|
const curTab = useRef(tab)
|
|
|
|
useEffect(() => {
|
|
curTab.current = tab
|
|
setOlMapOpenData([])
|
|
setPointItem({})
|
|
setReportRoadData([])
|
|
if (olMap) {
|
|
olMap.closeOverlay('clickOpen')
|
|
olMap.closeOverlay('pointClickOpen')
|
|
olMap.removeGeometryLayer('geometry0')
|
|
if (tab != 'conserve') {
|
|
patrolList.forEach((d, index) => {
|
|
olMap.removeGeometryLayer('geometry_patrol_' + index)
|
|
})
|
|
}
|
|
if (tab != 'build') {
|
|
roadProjectList.forEach((d, index) => {
|
|
olMap.removeGeometryLayer('geometry_road_' + index)
|
|
olMap.removeGeometryLayer('geometry_road_' + d.id)
|
|
})
|
|
}
|
|
if (tab != 'operation') {
|
|
busRunData.forEach((d, index) => {
|
|
olMap.removeGeometryLayer('geometry_bus_' + index)
|
|
})
|
|
}
|
|
}
|
|
}, [tab])
|
|
|
|
useEffect(() => {
|
|
if (olMapGeoDataHost) {
|
|
let config = {
|
|
layerName: 'nanchang',
|
|
center: [116.08706, 28.602018], // 中心坐标
|
|
zoom: 10, // 缩放
|
|
minZoom: 8,
|
|
maxZoom: 21,
|
|
isMoveSelect: false, // 鼠标滑过是否选中
|
|
projection: 'EPSG:4326' // 坐标系
|
|
}
|
|
let arcgisUrls = {
|
|
nanchang: {
|
|
url: `${olMapArcgisHost || 'http://36.2.6.33:6080'}/arcgis/rest/services/PBDT/nachang/MapServer`,
|
|
},
|
|
}
|
|
|
|
let option = {
|
|
target: 'olMap', // 元素ID
|
|
config: config,
|
|
arcgisUrls, // 动态底图图层
|
|
onEvent: {
|
|
// 选中回调
|
|
onSelectClick: function (p) {
|
|
// console.log(p)
|
|
},
|
|
// 鼠标滑过回调
|
|
onPointerMove: function (p) {
|
|
// console.log(p)
|
|
},
|
|
}
|
|
}
|
|
let olMapTool = new OlMapTool(option)
|
|
olMapTool.map.on('dblclick', function (p) {
|
|
// console.log(p)
|
|
})
|
|
olMapTool.map.on('singleclick', function (p) {
|
|
setOlMapOpenData([])
|
|
setPointItem({})
|
|
setReportRoadData([])
|
|
olMapTool.closeOverlay('clickOpen')
|
|
olMapTool.closeOverlay('pointClickOpen')
|
|
olMapTool.removeGeometryLayer('geometry0')
|
|
|
|
setCurClickCoordinate(p.coordinate)
|
|
if (curTab.current == 'build') {
|
|
return
|
|
}
|
|
// 请求路线坐标
|
|
request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/bufferSearch`)
|
|
.type('form')
|
|
.send({
|
|
params: `{"layerName":"view_by_line","pageSize":1,"pageNum":1,"filter":"","isReturnGeometry":"true","spatialRel":"INTERSECTS","orderByFields":" sort1, sort2, lxbm, sxxfx, qdzh asc", "spatialFilter":"point(${p.coordinate[0]} ${p.coordinate[1]})","distance":20}`
|
|
})
|
|
.then(res => {
|
|
if (res.status == 200 && res.body && res.body.code == 1) {
|
|
const data = res.body.data
|
|
const { datalist } = data
|
|
let index = 0
|
|
for (let d of datalist.list) {
|
|
olMapTool.addGeometryJMLayer({
|
|
features: [
|
|
{
|
|
geometry: d.shape,
|
|
geometryType: 'LineString',
|
|
// geometryType: 'Point',
|
|
},
|
|
],
|
|
style: { stroke: { width: 5, color: '#9933FF' } },
|
|
selectStyle: { stroke: { width: 8, color: '#9933FF' } },
|
|
layerName: 'geometry' + index++
|
|
});
|
|
const config = {
|
|
id: 'clickOpen',
|
|
offset: [0, 25], // 偏移
|
|
position: p.coordinate, // 坐标
|
|
autoPan: true,
|
|
autoPanMargin: 100,
|
|
positioning: 'top-right'
|
|
}
|
|
// 注意 现在只取第一条数据 所以能在这里请求
|
|
// 这里请求的是路线的信息
|
|
request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/search`)
|
|
.type('form')
|
|
.send({
|
|
params: `{"layerName":"${d.tablename.toLowerCase()}","filter":"(roadcode = '${d.roadcode}')","spatialFilter":"","isReturnGeometry":"false","orderByFields":"roadcode, roadstart asc","spatialRel":"INTERSECTS","pageNum":1,"pageSize":1}`
|
|
})
|
|
.then(detailRes => {
|
|
if (detailRes.status == 200 && detailRes.body && detailRes.body.code == 1) {
|
|
const detailData = detailRes.body.data
|
|
const { datalist: detailDatalist } = detailData
|
|
for (let de of detailDatalist.list) {
|
|
setOlMapOpenData([{
|
|
n: '路段编码',
|
|
v: de['roadcode'],
|
|
}, {
|
|
n: '路段名称',
|
|
v: de['roadname'],
|
|
}, {
|
|
n: '起点名称',
|
|
v: de['f006'],
|
|
}, {
|
|
n: '起点桩号',
|
|
v: de['roadstart'],
|
|
}, {
|
|
n: '止点名称',
|
|
v: de['f010'],
|
|
}, {
|
|
n: '止点桩号',
|
|
v: de['roadends'],
|
|
}, {
|
|
n: '路段里程',
|
|
v: de['f067']
|
|
// !isNaN(de['roadends']) && !isNaN(de['roadstart']) ?
|
|
// de['roadends'] - de['roadstart']
|
|
// : '-',
|
|
}, {
|
|
n: '技术等级',
|
|
v: de['f014'],
|
|
map: [{ text: '高速公路', value: '1' }, { text: '一级公路', value: '2' }, { text: '二级公路', value: '3' }, { text: '三级公路', value: '4' }, { text: '四级公路', value: '5' }, { text: '等外公路', value: '6' }],
|
|
}, {
|
|
n: '路面类型',
|
|
v: de['f016'],
|
|
map: [{ text: '沥青混凝土', value: '11' }, { text: '水泥混凝土', value: '12' }, { text: '沥青贯入式', value: '21' }, { text: '沥青碎石', value: '22' }, { text: '沥青表面处治', value: '23' }, { text: '砂石路面', value: '31' }, { text: '石质路面', value: '32' }, { text: '渣石路面', value: '33' }, { text: '砖铺路面', value: '34' }, { text: '砼预制块', value: '35' }, { text: '无路面', value: '36' }]
|
|
},])
|
|
break
|
|
}
|
|
}
|
|
})
|
|
olMapTool.addOverlay('clickOpen', config)
|
|
break
|
|
}
|
|
}
|
|
})
|
|
})
|
|
setOlMap(olMapTool)
|
|
}
|
|
}, [olMapGeoDataHost])
|
|
|
|
useEffect(() => {
|
|
if (patrolList.length && olMap && tab == 'conserve') {
|
|
busRunData.forEach((d, index) => {
|
|
olMap.removeGeometryLayer('geometry_bus_' + index)
|
|
})
|
|
|
|
patrolList.forEach((d, index) => {
|
|
olMap.addGeometryLayer({
|
|
features: [
|
|
{
|
|
name: 'patrolPoint',
|
|
attributes: {
|
|
callbackParams: {
|
|
type: 'patrolPoint',
|
|
id: d.id,
|
|
},
|
|
callback: (p) => {
|
|
setPointItem(d)
|
|
olMap.addOverlay('pointClickOpen', {
|
|
id: 'pointClickOpen',
|
|
offset: [0, 4], // 偏移
|
|
position: [d.longitude, d.latitude], // 坐标
|
|
autoPan: true,
|
|
autoPanMargin: 100,
|
|
positioning: 'top-right'
|
|
})
|
|
// 请求路线坐标
|
|
if (d.code_road) {
|
|
let roadCodeStart = d.code_road[0]
|
|
let layerName = codeMap[roadCodeStart.toLowerCase()]
|
|
if (layerName) {
|
|
request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/search`)
|
|
.type('form')
|
|
.send({
|
|
params: `{"layerName":"${layerName}","filter":"(roadcode = '${d.code_road}')","spatialFilter":"","isReturnGeometry":"true","orderByFields":"roadcode, roadstart asc","spatialRel":"INTERSECTS","pageNum":1,"pageSize":99}`
|
|
})
|
|
.then(res => {
|
|
if (res.status == 200 && res.body && res.body.code == 1) {
|
|
const data = res.body.data
|
|
const { datalist } = data
|
|
if (datalist?.list?.length) {
|
|
let index = 0
|
|
for (let d of datalist.list) {
|
|
olMap.addGeometryJMLayer({
|
|
features: [
|
|
{
|
|
geometry: d.shape,
|
|
geometryType: 'LineString',
|
|
// geometryType: 'Point',
|
|
},
|
|
],
|
|
style: { stroke: { width: 5, color: '#9933FF' } },
|
|
selectStyle: { stroke: { width: 8, color: '#9933FF' } },
|
|
layerName: 'geometry' + index++
|
|
});
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
},
|
|
geometry: [d.longitude, d.latitude],
|
|
geometryType: 'Point',
|
|
},
|
|
],
|
|
style: {
|
|
icon: {
|
|
src: '/assets/images/gis/pointer.png',
|
|
scale: 1, // 图标引用
|
|
},
|
|
// stroke: { width: 1, color: '#ffff00' },
|
|
// circle: {
|
|
// radius: 12, // 直径
|
|
// fill: '#ff0000', // 颜色
|
|
// stroke: { width: 1, color: '#ffff00' },
|
|
// },
|
|
},
|
|
selectStyle: {
|
|
icon: {
|
|
src: '/assets/images/gis/pointer.png',
|
|
scale: 1, // 图标引用
|
|
},
|
|
// circle: {
|
|
// radius: 16, // 直径
|
|
// fill: '#ff0000', // 颜色
|
|
// stroke: { width: 2, color: '#ffff00' },
|
|
// },
|
|
// stroke: { width: 2, color: '#ffff00' },
|
|
},
|
|
layerName: 'geometry_patrol_' + index
|
|
});
|
|
});
|
|
}
|
|
}, [patrolList, olMap, tab])
|
|
|
|
useEffect(() => {
|
|
if (roadProjectList.length && olMap && tab == 'build') {
|
|
// roadProjectList.forEach((d, index) => {
|
|
// olMap.addGeometryLayer({
|
|
// features: [
|
|
// {
|
|
// name: 'roadPoint',
|
|
// attributes: {
|
|
// callbackParams: {
|
|
// type: 'roadPoint',
|
|
// id: d.id,
|
|
// },
|
|
// callback: (p) => {
|
|
// setPointItem(d)
|
|
// olMap.addOverlay('pointClickOpen', {
|
|
// id: 'pointClickOpen',
|
|
// offset: [0, 4], // 偏移
|
|
// position: [d.longitude, d.latitude], // 坐标
|
|
// // position: [115.944220000000, 28.545380000000],
|
|
// autoPan: true,
|
|
// autoPanMargin: 100,
|
|
// positioning: 'top-right'
|
|
// })
|
|
// // 查路线
|
|
|
|
// }
|
|
// },
|
|
// geometry: [d.longitude, d.latitude],
|
|
// // geometry: [115.944220000000, 28.545380000000],
|
|
// geometryType: 'Point',
|
|
// },
|
|
// ],
|
|
// style: {
|
|
// icon: {
|
|
// src: '/assets/images/gis/pointer.png',
|
|
// scale: 1, // 图标引用
|
|
// },
|
|
// },
|
|
// selectStyle: {
|
|
// icon: {
|
|
// src: '/assets/images/gis/pointer.png',
|
|
// scale: 1, // 图标引用
|
|
// },
|
|
// },
|
|
// layerName: 'geometry_road_' + index
|
|
// });
|
|
// });
|
|
}
|
|
}, [roadProjectList, olMap, tab])
|
|
|
|
useEffect(() => {
|
|
if (busRunTime && busRunTime.length) {
|
|
setBusRunData(busRunTime)
|
|
}
|
|
}, [busRunTime])
|
|
|
|
const drawBusRunPoint = () => {
|
|
patrolList.forEach((d, index) => {
|
|
olMap.removeGeometryLayer('geometry_patrol_' + index)
|
|
})
|
|
|
|
busRunData.forEach((d, index) => {
|
|
olMap.addGeometryLayer({
|
|
features: [
|
|
{
|
|
name: 'busPoint',
|
|
attributes: {
|
|
callbackParams: {
|
|
type: 'busPoint',
|
|
busNo: d.busNo,
|
|
},
|
|
callback: (p) => {
|
|
setPointItem(p)
|
|
setOlMapOpenData([{
|
|
n: '车牌号',
|
|
v: d.busNoChar
|
|
}, {
|
|
n: '司机',
|
|
v: d.employeeName
|
|
}, {
|
|
n: '工号',
|
|
v: d.opNo
|
|
}, {
|
|
n: '调度状态',
|
|
v: d.willRun,
|
|
map: busWillRun,
|
|
}, {
|
|
n: '实际发车时间',
|
|
v: d.lastDepTime
|
|
}, {
|
|
n: '定位时间',
|
|
v: d.siteTime
|
|
},])
|
|
olMap.addOverlay('clickOpen', {
|
|
id: 'clickOpen',
|
|
offset: [0, 4], // 偏移
|
|
position: [d.lng, d.lat], // 坐标
|
|
// position: [115.944220000000, 28.545380000000],
|
|
autoPan: true,
|
|
autoPanMargin: 100,
|
|
positioning: 'top-right'
|
|
})
|
|
}
|
|
},
|
|
geometry: [d.lng, d.lat],
|
|
// geometry: [115.944220000000, 28.545380000000],
|
|
geometryType: 'Point',
|
|
},
|
|
],
|
|
style: {
|
|
icon: {
|
|
src: '/assets/images/gis/bus.png',
|
|
scale: 0.7, // 图标引用
|
|
},
|
|
},
|
|
selectStyle: {
|
|
icon: {
|
|
src: '/assets/images/gis/bus.png',
|
|
scale: 0.8, // 图标引用
|
|
},
|
|
},
|
|
layerName: 'geometry_bus_' + index
|
|
});
|
|
});
|
|
}
|
|
useEffect(() => {
|
|
if (busRunData.length && olMap && tab == 'operation') {
|
|
if (!busLine.length) {
|
|
drawBusRunPoint()
|
|
}
|
|
}
|
|
}, [busRunData, olMap, tab])
|
|
|
|
useEffect(() => {
|
|
if (busLine && olMap && tab == 'operation') {
|
|
if (busLine.length) {
|
|
olMap.closeOverlay('clickOpen')
|
|
busRunData.forEach((d, index) => {
|
|
olMap.removeGeometryLayer('geometry_bus_' + index)
|
|
})
|
|
olMap.addGeometryLayer({
|
|
features: [
|
|
{
|
|
name: 'busLine',
|
|
attributes: {
|
|
},
|
|
geometry: busLine.map(b => {
|
|
return [b.pointLng, b.pointLat]
|
|
}),
|
|
// geometry: [115.944220000000, 28.545380000000],
|
|
geometryType: 'LineString',
|
|
style: { stroke: { width: 5, color: '#9933FF' } },
|
|
selectStyle: { stroke: { width: 8, color: '#9933FF' } },
|
|
},
|
|
],
|
|
style: { stroke: { width: 5, color: '#9933FF' } },
|
|
selectStyle: { stroke: { width: 8, color: '#9933FF' } },
|
|
layerName: 'geometry_bus_line'
|
|
});
|
|
olMap.setCenter([
|
|
(busLine[0].pointLng + busLine[busLine.length - 1].pointLng) / 2,
|
|
(busLine[0].pointLat + busLine[busLine.length - 1].pointLat) / 2
|
|
])
|
|
|
|
} else {
|
|
drawBusRunPoint()
|
|
}
|
|
} else if (tab != 'operation' && olMap) {
|
|
olMap.removeGeometryLayer('geometry_bus_line')
|
|
}
|
|
}, [busLine, olMap, tab])
|
|
|
|
useEffect(async () => {
|
|
if (olMap) {
|
|
if (tab == 'build') {
|
|
const roadRes = await Promise.all(projectList.map((d, index) => {
|
|
let roadCodeStart = d.roadCodeStart ? d.roadCodeStart[0] : 'N'
|
|
let layerName = codeMap[roadCodeStart.toLowerCase()]
|
|
if (layerName) {
|
|
return request.post(`${olMapGeoDataHost || 'http://36.2.6.32:8811'}/geoserver-pg/rest/search`)
|
|
.type('form')
|
|
.send({
|
|
params: `{"layerName":"${layerName}","filter":"(roadcode = '${d.roadCodeStart}')","spatialFilter":"","isReturnGeometry":"true","orderByFields":"roadcode, roadstart asc","spatialRel":"INTERSECTS","pageNum":1,"pageSize":99}`
|
|
})
|
|
} else {
|
|
return new Promise(resolve => setTimeout(() => resolve(), 0));
|
|
}
|
|
}))
|
|
|
|
let renderIndex = 0
|
|
for (let res of roadRes) {
|
|
const corData = projectList[renderIndex]
|
|
if (res) {
|
|
if (res.status == 200 && res.body && res.body.code == 1) {
|
|
const data = res.body.data
|
|
const { datalist } = data
|
|
if (datalist?.list?.length) {
|
|
let dataIndex = 0
|
|
for (let d of datalist.list) {
|
|
|
|
olMap.addGeometryJMLayer({
|
|
features: [
|
|
{
|
|
geometry: d.shape,
|
|
geometryType: 'LineString',
|
|
// geometryType: 'Point',
|
|
attributes: {
|
|
callbackParams: {},
|
|
callback: (p, x) => {
|
|
let extent = p?.selected[0]?.values_?.geometry?.flatCoordinates
|
|
let coordinate = []
|
|
if (extent && extent.length) {
|
|
let coordinateIndex = Math.ceil((extent.length - 1) / 2)
|
|
if (coordinateIndex % 2) {
|
|
coordinateIndex -= 1
|
|
}
|
|
coordinate = [extent[coordinateIndex], extent[coordinate + 1]]
|
|
}
|
|
if (coordinate.length) {
|
|
setReportRoadData([])
|
|
setPointItem(corData)
|
|
setOlMapOpenData([{
|
|
n: '项目名称',
|
|
v: corData.entryName
|
|
}, {
|
|
n: '项目规模(公里)',
|
|
v: corData.projectMileage
|
|
}, {
|
|
n: '项目投资(万元)',
|
|
v: corData.investment
|
|
}, {
|
|
n: '业主单位',
|
|
v: corData.buildUnit,
|
|
}, {
|
|
n: '施工单位',
|
|
v: corData.constructionUnit
|
|
}, {
|
|
n: '开工日期',
|
|
v: corData.startTime ? moment(corData.startTime).format('YYYY-MM-DD') : ''
|
|
},])
|
|
olMap.addOverlay('clickOpen', {
|
|
id: 'clickOpen',
|
|
offset: [0, 4], // 偏移
|
|
position: coordinate, // 坐标
|
|
// position: [115.944220000000, 28.545380000000],
|
|
autoPan: true,
|
|
autoPanMargin: 100,
|
|
positioning: 'top-right'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
},
|
|
],
|
|
style: { stroke: { width: 5, color: '#9933FF' } },
|
|
selectStyle: { stroke: { width: 8, color: '#9933FF' } },
|
|
layerName: 'geometry_build_road_' + renderIndex
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (corData.roadCodeStart) {
|
|
// 画对应的巡查上报的点
|
|
const corProjectRoadReport = roadProjectList.find(d => d.project_name == corData.entryName)
|
|
if (corProjectRoadReport) {
|
|
const d = corProjectRoadReport
|
|
olMap.addGeometryLayer({
|
|
features: [
|
|
{
|
|
name: 'roadPoint',
|
|
attributes: {
|
|
callbackParams: {
|
|
type: 'roadPoint',
|
|
id: d.id,
|
|
},
|
|
callback: (p) => {
|
|
setPointItem(d)
|
|
setReportRoadData([])
|
|
olMap.addOverlay('pointClickOpen', {
|
|
id: 'pointClickOpen',
|
|
offset: [0, 4], // 偏移
|
|
position: [d.longitude, d.latitude], // 坐标
|
|
// position: [115.944220000000, 28.545380000000],
|
|
autoPan: true,
|
|
autoPanMargin: 100,
|
|
positioning: 'top-right'
|
|
})
|
|
}
|
|
},
|
|
geometry: [d.longitude, d.latitude],
|
|
// geometry: [115.944220000000, 28.545380000000],
|
|
geometryType: 'Point',
|
|
},
|
|
],
|
|
style: {
|
|
icon: {
|
|
src: '/assets/images/gis/pointer.png',
|
|
scale: 1, // 图标引用
|
|
},
|
|
},
|
|
selectStyle: {
|
|
icon: {
|
|
src: '/assets/images/gis/pointer.png',
|
|
scale: 1, // 图标引用
|
|
},
|
|
},
|
|
layerName: 'geometry_road_' + d.id
|
|
});
|
|
|
|
}
|
|
}
|
|
renderIndex++
|
|
}
|
|
} else {
|
|
projectList.forEach((d, index) => {
|
|
olMap.removeGeometryLayer('geometry_build_road_' + index)
|
|
})
|
|
}
|
|
}
|
|
}, [projectList, olMap, tab])
|
|
|
|
const isRoadProject = pointItem.report_type == 'road'
|
|
// const isBusPoint = pointItem.busNoChar
|
|
return (
|
|
<div id="olMap" style={{ position: 'absolute', height: '100%', width: "100%" }}>
|
|
<div slot="overlays" style={{ display: 'none', }}>
|
|
<div id="clickOpen"
|
|
style={{
|
|
backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)`,
|
|
minWidth: 340,
|
|
backgroundPosition: 'center',
|
|
backgroundSize: '100% 100%',
|
|
minHeight: 180,
|
|
padding: '24px',
|
|
backgroundRepeat: 'no-repeat',
|
|
color: '#fff',
|
|
overflow: 'auto',
|
|
}}>
|
|
{
|
|
olMapOpenData.map(s => {
|
|
return (
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ width: 100, textAlign: 'right' }}>{s.n} </div>
|
|
<div style={{ flex: 1 }}>：
|
|
{
|
|
s.map ?
|
|
s.map.find(sm => sm.value == s.v)?.text
|
|
: s.v || s.v == 0 ?
|
|
s.v
|
|
: '-'
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
{
|
|
pointItem.roadCodeStart ?
|
|
<a style={{ float: 'right' }} onClick={() => {
|
|
dispatch(getReportList({
|
|
reportType: 'road',
|
|
keyword: pointItem.entryName
|
|
})).then(res => {
|
|
if (res.success) {
|
|
let data = res.payload.data || []
|
|
if (!data.length) {
|
|
message.warning('暂无上报记录')
|
|
} else {
|
|
setReportRoadData(data)
|
|
}
|
|
}
|
|
})
|
|
}}>上报记录</a>
|
|
: ''
|
|
}
|
|
</div>
|
|
</div>
|
|
<div slot="overlays" style={{ display: 'none', }}>
|
|
<div id="pointClickOpen" style={{
|
|
width: "400px", zIndex: 100, right: "24%", marginTop: "0", top: "25%", backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)`, backgroundPosition: 'center',
|
|
backgroundSize: '100% 100%',
|
|
padding: '24px',
|
|
backgroundRepeat: 'no-repeat',
|
|
}}>
|
|
{/* <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} /> */}
|
|
<div style={{ display: "flex", }}>
|
|
<div style={{ width: "50%", height: "100%", }}>
|
|
{
|
|
pointItem.id ?
|
|
<Hua key={pointItem.id} shuzu={
|
|
isRoadProject ?
|
|
[{
|
|
"imgs": pointItem.scene_pic && pointItem.scene_pic.length ?
|
|
pointItem.scene_pic[0] : ""
|
|
}] :
|
|
[{
|
|
"imgs": pointItem.conserve_after_pic && pointItem.conserve_after_pic.length ?
|
|
pointItem.conserve_after_pic[0] : ""
|
|
}, {
|
|
"imgs": pointItem.conserve_before_pic && pointItem.conserve_before_pic.length ?
|
|
pointItem.conserve_before_pic[0] : ""
|
|
}, {
|
|
"imgs": pointItem.conserve_underway_pic && pointItem.conserve_underway_pic.length ?
|
|
pointItem.conserve_underway_pic[0] : ""
|
|
}]}
|
|
/>
|
|
: ''
|
|
}
|
|
</div>
|
|
<div style={{ width: "50%", left: "50%", }}>
|
|
<p style={{ marginTop: "20px", color: "#FFFFFF", fontSize: "16px", fontFamily: "YouSheBiaoTiHei" }}>
|
|
{
|
|
isRoadProject ?
|
|
pointItem.user_name || '--'
|
|
:
|
|
<>
|
|
{
|
|
pointItem.road_section_start ? pointItem.road_section_start : ""
|
|
}{
|
|
pointItem.road_section_start && pointItem.road_section_end ? "——" : ""
|
|
}{
|
|
pointItem.road_section_end ? pointItem.road_section_end : ""
|
|
}{
|
|
pointItem.road_section_start || pointItem.road_section_end ? "" : "--"
|
|
}
|
|
</>
|
|
}
|
|
|
|
</p>
|
|
{
|
|
isRoadProject ?
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>
|
|
{
|
|
isRoadProject ? '上报内容' : '养护内容'
|
|
}
|
|
<span style={{ color: "#EEF4FF", marginLeft: "30px", fontFamily: " PingFangSC-Medium, PingFang SC", overflowWrap: 'break-word' }}>
|
|
{
|
|
pointItem.content ? pointItem.content : "--"
|
|
}
|
|
</span>
|
|
</p> : ''
|
|
}
|
|
{
|
|
isRoadProject ? '' :
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>
|
|
负责人
|
|
<span style={{ color: "#EEF4FF", marginLeft: "45px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>
|
|
{
|
|
pointItem.user_name ? pointItem.user_name : "--"
|
|
}
|
|
</span>
|
|
</p>
|
|
}
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>
|
|
日期
|
|
<span style={{ color: "#EEF4FF", marginLeft: "60px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>
|
|
{
|
|
pointItem.time ? moment(pointItem.time).format("YYYY-MM-DD") : "--"
|
|
}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{
|
|
isRoadProject && pointItem.project ?
|
|
<div style={{ paddingTop: 24 }}>
|
|
{[{
|
|
n: '项目名称',
|
|
k: 'entryName',
|
|
}, {
|
|
n: '项目规模(公里)',
|
|
k: 'projectMileage',
|
|
}, {
|
|
n: '项目投资(万元)',
|
|
k: 'investment',
|
|
}, {
|
|
n: '开工时间',
|
|
k: 'startTime',
|
|
},].map(s => {
|
|
return (
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>
|
|
{s.n}
|
|
<span style={{ color: "#EEF4FF", marginLeft: "45px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>
|
|
{
|
|
s.k == 'startTime' ?
|
|
pointItem.project[s.k] ? moment(pointItem.project[s.k]).format("YYYY-MM-DD") : "--"
|
|
:
|
|
pointItem.project[s.k] || "--"
|
|
}
|
|
</span>
|
|
</p>
|
|
)
|
|
})}
|
|
</div>
|
|
: ''
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 展示在建项目的上报记录 */}
|
|
{
|
|
tab == 'build' && reportRoadData.length ?
|
|
<div style={{
|
|
backgroundColor: 'rgba(0, 33, 98, 0.8)',
|
|
height: 'calc(100vh - 103px)',
|
|
top: 0,
|
|
width: 320,
|
|
position: 'absolute',
|
|
right: 485,
|
|
zIndex: 9999
|
|
}}>
|
|
<div>
|
|
<CloseOutlined style={{
|
|
fontSize: 'large',
|
|
color: "#fff",
|
|
margin: 12
|
|
}} onClick={() => {
|
|
setReportRoadData([])
|
|
}} />
|
|
</div>
|
|
<AutoRollComponent
|
|
content={reportRoadData.map(r => {
|
|
return (
|
|
<div style={{
|
|
display: 'flex', backgroundImage: 'url(/assets/images/leadership/beijinglan.png)',
|
|
backgroundSize: '100% 100%',
|
|
margin: 8
|
|
}}>
|
|
<div style={{
|
|
width: 80, margin: "4px 0px 0px 4px",
|
|
}}>
|
|
{
|
|
r.scenePic?.length > 0 ?
|
|
<Carousel autoplay >
|
|
{
|
|
r.scenePic?.map(v => <img className='picfileimg'
|
|
style={{ width: 80, display: 'inline-block', }}
|
|
src={
|
|
v.startsWith("http") ? v :
|
|
`${localStorage.getItem("qndmn")}/${v}`
|
|
}
|
|
width={`200px`}
|
|
/>)
|
|
}
|
|
</Carousel>
|
|
: ''
|
|
}
|
|
</div>
|
|
|
|
<div style={{ flex: 1, marginLeft: 4, marginTop: 4, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
|
|
上报时间:
|
|
<span style={{
|
|
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
|
|
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
|
|
}}>
|
|
{r.time ? moment(r.time).format("YYYY-MM-DD") : "--"}
|
|
</span>
|
|
</p>
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
|
|
上报内容:
|
|
<span title={r.content} style={{
|
|
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
|
|
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 120
|
|
}}>
|
|
{r.content}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
containerStyle={{ position: "relative", height: "90%", }}
|
|
divHeight={'calc(100vh - 154px)'} divId={"chart-overview-report-list"}
|
|
/>
|
|
</div>
|
|
: ''
|
|
}
|
|
</div >
|
|
)
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global, busRunTime, busLine, projectList } = state;
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
olMapArcgisHost: global.olMapArcgisHost,
|
|
olMapGeoDataHost: global.olMapGeoDataHost,
|
|
busRunTime: busRunTime.data || [],
|
|
busLine: busLine.data || [],
|
|
projectList: projectList.data || []
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(OlMap);
|
|
|