wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

解决HIBRAINQD-2，圈选不清空的bug

This commit is contained in:
gaoyuanwei 2022-08-08 14:56:03 +08:00
parent c2608fe2d5
commit 8c0c9e3d71
2 changed files with 375 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/pages/roadGovernance/components/CauseAnalysis.vue
View File

@ -179,6 +179,8 @@
</template> </template>
<script> <script>
import bus from '@/views/layout/bus'
export default { export default {
components: {}, components: {},
props: { props: {
@ -188,16 +190,16 @@ export default {
}, },
buildingData: { buildingData: {
type: Array, type: Array,
default: [], default: []
}, },
slagTruckData: { slagTruckData: {
type: Array, type: Array,
default: [], default: []
}, },
sanitationTruckData: { sanitationTruckData: {
type: Array, type: Array,
default: [], default: []
}, }
}, },
data () { data () {
return { return {
@ -241,12 +243,12 @@ export default {
name: '洒水', name: '洒水',
num: 0, num: 0,
unit: '次' unit: '次'
}, }
], ],
buildingSelect: true, buildingSelect: true,
slagTruckSelect: true, slagTruckSelect: true,
sanitationTruckSelect: true, sanitationTruckSelect: true,
tabsActiveName: '建筑工地', tabsActiveName: '建筑工地'
} }
}, },
watch: { watch: {
@ -255,12 +257,13 @@ export default {
}, },
sanitationTruckData () { sanitationTruckData () {
this.summaryData[3].num = this.sanitationTruckData.length this.summaryData[3].num = this.sanitationTruckData.length
}, }
}, },
computed: {}, computed: {},
methods: { methods: {
close () { close () {
bus.$emit('closeCoverage')
this.$emit('close') this.$emit('close')
}, },
selectShowOnMap (type, selectStatus) { selectShowOnMap (type, selectStatus) {
@ -295,11 +298,12 @@ export default {
color: #66ffff; color: #66ffff;
font-size: 20px; font-size: 20px;
margin-bottom: 30px; margin-bottom: 30px;
background: url("~@/assets/img/roadGovernancetitlebg.png") no-repeat 97px center; background: url("~@/assets/img/roadGovernancetitlebg.png") no-repeat 97px
center;
} }
.range { .range {
font-size: 16px; font-size: 16px;
color: rgba(255, 255, 255, .6); color: rgba(255, 255, 255, 0.6);
} }
main { main {
height: 680px; height: 680px;
@ -309,11 +313,11 @@ export default {
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 8px; width: 8px;
// height: 720px; // height: 720px;
background-color: rgba(255, 255, 255, .1); background-color: rgba(255, 255, 255, 0.1);
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
background-color: rgba(255, 255, 255, .15) !important; background-color: rgba(255, 255, 255, 0.15) !important;
} }
.summary { .summary {
display: flex; display: flex;
@ -334,13 +338,14 @@ export default {
} }
::v-deep .table-box { ::v-deep .table-box {
// width: 266px; // width: 266px;
background-color: rgba(50, 238, 255, .1); background-color: rgba(50, 238, 255, 0.1);
padding: 15px 15px 20px 20px; padding: 15px 15px 20px 20px;
h3 { h3 {
font-size: 16px; font-size: 16px;
color: #66ffff; color: #66ffff;
} }
.el-table, .el-table__expanded-cell { .el-table,
.el-table__expanded-cell {
background-color: transparent !important; background-color: transparent !important;
} }
.el-table th, .el-table th,
@ -355,7 +360,8 @@ export default {
table td { table td {
border-bottom: none !important; border-bottom: none !important;
} }
.el-table::before {//去掉最下面的那一条线 .el-table::before {
//去掉最下面的那一条线
height: 0px; height: 0px;
} }
.cell { .cell {
@ -373,7 +379,7 @@ export default {
::v-deep .el-tabs { ::v-deep .el-tabs {
.el-tabs__item { .el-tabs__item {
font-size: 16px; font-size: 16px;
color: #fff color: #fff;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #409eff; color: #409eff;
@ -383,6 +389,5 @@ export default {
} }
} }
} }
} }
</style> </style>

615
src/views/pages/roadGovernance/components/RoadMain.vue
View File

@ -114,7 +114,7 @@
</template> </template>
<script> <script>
import { HieimpMap } from "@/supermap/map-init"; import { HieimpMap } from '@/supermap/map-init'
import { import {
getRoadData, getRoadData,
listBuildingSiteByPoints, listBuildingSiteByPoints,
@ -124,233 +124,243 @@ import {
selectBuildSite, selectBuildSite,
getRoadDataByTimeRegion, getRoadDataByTimeRegion,
selectAllTrailSanitation, selectAllTrailSanitation,
selectRoadData, selectRoadData
} from "@/api/road"; } from '@/api/road'
import TiledMap from "@/views/pages/mapHome/components/tiledMap"; import TiledMap from '@/views/pages/mapHome/components/tiledMap'
import { import {
createRoadGovernancePop, createRoadGovernancePop,
createCameraDetailsPop, createCameraDetailsPop
} from "@/supermap/createMarkerPopup"; } from '@/supermap/createMarkerPopup'
import CauseAnalysis from "@/views/pages/roadGovernance/components/CauseAnalysis"; import CauseAnalysis from '@/views/pages/roadGovernance/components/CauseAnalysis'
import bus from "@/views/layout/bus"; import bus from '@/views/layout/bus'
// import testSlagTruckData from "./slagTruckData"; // import testSlagTruckData from "./slagTruckData";
import VideoPlay from "../../videoSurveillance/components/VideoPlay"; import VideoPlay from '../../videoSurveillance/components/VideoPlay'
export default { export default {
data () { data () {
return { return {
// title: '', // title: '',
hiMap: new HieimpMap(), // 地图全局对象 hiMap: new HieimpMap(), // 地图全局对象
mapId: "map-cloudBrain", // 地图容器的id mapId: 'map-cloudBrain', // 地图容器的id
showDetailFlag: false, // 事件列表与详情 flag showDetailFlag: false, // 事件列表与详情 flag
homeEventData: {}, homeEventData: {},
myEvnIn: "", myEvnIn: '',
dateTabs: [ dateTabs: [
{ {
name: "本周", name: '本周',
data: [], data: [],
dataNum: "", dataNum: ''
}, },
{ {
name: "本月", name: '本月',
data: [], data: [],
dataNum: "", dataNum: ''
}, },
{ {
name: "本年", name: '本年',
data: [], data: [],
dataNum: "", dataNum: ''
}, }
], ],
EvnInfoData: {}, EvnInfoData: {},
evenCondition: [], evenCondition: [],
bottomTabList: [ bottomTabList: [
{ {
name: "道路", name: '道路',
id: "road", id: 'road',
index: "0", index: '0',
img: require("../../../../assets/roadGovernance/roadActive.png"), img: require('../../../../assets/roadGovernance/roadActive.png'),
imgDefault: require("../../../../assets/roadGovernance/road.png"), imgDefault: require('../../../../assets/roadGovernance/road.png'),
imgActive: require("../../../../assets/roadGovernance/roadActive.png"), imgActive: require('../../../../assets/roadGovernance/roadActive.png')
}, },
{ {
name: "渣土车", name: '渣土车',
id: "slagTruck", id: 'slagTruck',
index: "1", index: '1',
img: require("../../../../assets/roadGovernance/slagTruck.png"), img: require('../../../../assets/roadGovernance/slagTruck.png'),
imgDefault: require("../../../../assets/roadGovernance/slagTruck.png"), imgDefault: require('../../../../assets/roadGovernance/slagTruck.png'),
imgActive: require("../../../../assets/roadGovernance/slagTruckActive.png"), imgActive: require('../../../../assets/roadGovernance/slagTruckActive.png')
}, },
{ {
name: "环卫车", name: '环卫车',
id: "sanitationTruck", id: 'sanitationTruck',
index: "2", index: '2',
img: require("../../../../assets/roadGovernance/sanitationTruck.png"), img: require('../../../../assets/roadGovernance/sanitationTruck.png'),
imgDefault: require("../../../../assets/roadGovernance/sanitationTruck.png"), imgDefault: require('../../../../assets/roadGovernance/sanitationTruck.png'),
imgActive: require("../../../../assets/roadGovernance/sanitationTruckActive.png"), imgActive: require('../../../../assets/roadGovernance/sanitationTruckActive.png')
}, },
{ {
name: "建筑工地", name: '建筑工地',
id: "construction", id: 'construction',
index: "3", index: '3',
img: require("../../../../assets/roadGovernance/construction.png"), img: require('../../../../assets/roadGovernance/construction.png'),
imgDefault: require("../../../../assets/roadGovernance/construction.png"), imgDefault: require('../../../../assets/roadGovernance/construction.png'),
imgActive: require("../../../../assets/roadGovernance/constructionActive.png"), imgActive: require('../../../../assets/roadGovernance/constructionActive.png')
}, },
{ {
name: "视频监控", name: '视频监控',
id: "monitor", id: 'monitor',
index: "4", index: '4',
img: require("../../../../assets/roadGovernance/monitor.png"), img: require('../../../../assets/roadGovernance/monitor.png'),
imgDefault: require("../../../../assets/roadGovernance/monitor.png"), imgDefault: require('../../../../assets/roadGovernance/monitor.png'),
imgActive: require("../../../../assets/roadGovernance/monitorActive.png"), imgActive: require('../../../../assets/roadGovernance/monitorActive.png')
}, }
], ],
tabsActiveName: "出租车走航监测", tabsActiveName: '出租车走航监测',
tabsActiveTime: "昨日", tabsActiveTime: '昨日',
checkboxGroup: ["道路"], checkboxGroup: ['道路'],
tableData: [], tableData: [],
analysisIsShow: false, analysisIsShow: false,
buildingData: [], buildingData: [],
slagTruckData: [], slagTruckData: [],
sanitationTruckData: [], sanitationTruckData: [],
roadData: [], roadData: [],
preTime: "", preTime: '',
currentTime: "", currentTime: '',
weekTime: "", weekTime: '',
monthTime: "", monthTime: '',
channelCode: [], channelCode: [],
openVideo: false, openVideo: false,
timeRegion: "", timeRegion: '',
// 累计事件数量 // 累计事件数量
EventAll: [], EventAll: [],
EventAllLength: "", EventAllLength: '',
EventAllArr: [], EventAllArr: []
}; }
}, },
props: { props: {
title: { title: {
type: String, type: String,
default: "城市云脑-道路保洁监管", default: '城市云脑-道路保洁监管'
}, }
}, },
components: { components: {
TiledMap, TiledMap,
CauseAnalysis, CauseAnalysis,
VideoPlay, VideoPlay
}, },
// 生命周期 - 创建完成（访问当前this实例） // 生命周期 - 创建完成（访问当前this实例）
created () { created () {
const currentDate = new Date(); const currentDate = new Date()
currentDate.setTime(currentDate.getTime()); currentDate.setTime(currentDate.getTime())
this.monthTime = currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + "01" + " " + "00:00:00"; this.monthTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + '01' + ' ' + '00:00:00'
this.currentTime = currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + yDate + " " + "00:00:00"; this.currentTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000); currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000)
const yDate = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate() const yDate = currentDate.getDate() > 9 ? currentDate.getDate() : '0' + currentDate.getDate()
this.preTime =currentDate.getFullYear() +"-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + yDate + " " +"00:00:00"; this.preTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1); currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1)
this.weekTime =currentDate.getFullYear() + "-" + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : "0" + (currentDate.getMonth() + 1)) + "-" + yDate + " " + "00:00:00"; this.weekTime = currentDate.getFullYear() + '-' + ((currentDate.getMonth() + 1) > 10 ? (currentDate.getMonth() + 1) : '0' + (currentDate.getMonth() + 1)) + '-' + yDate + ' ' + '00:00:00'
}, },
// 生命周期 - 挂载完成（访问DOM元素） // 生命周期 - 挂载完成（访问DOM元素）
mounted () { mounted () {
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj); this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
this.multiScreenFun = this.hiMap.multiScreenFun( this.multiScreenFun = this.hiMap.multiScreenFun(
this.hiMap.mapObj, this.hiMap.mapObj,
this.hiMapFun this.hiMapFun
); )
this.getRoadData(); this.getRoadData()
this.getRoadDataWeek(); this.getRoadDataWeek()
this.getRoadDataMonth(); this.getRoadDataMonth()
bus.$off("openCauseAnalysis"); bus.$off('openCauseAnalysis')
bus.$on("openCauseAnalysis", (data) => { bus.$on('openCauseAnalysis', (data) => {
this.timeRegion = data.data.dt; this.timeRegion = data.data.dt
this.hiMapFun.removerPolygon(); this.hiMapFun.removerPolygon()
this.hiMapFun.removeLayerByLayerName("videoSurveillance"); this.hiMapFun.removeLayerByLayerName('videoSurveillance')
this.hiMapFun.removeLayerByLayerName("building"); this.hiMapFun.removeLayerByLayerName('building')
this.hiMapFun.removeLayerByLayerName("sanitationTruck"); this.hiMapFun.removeLayerByLayerName('sanitationTruck')
this.hiMapFun.removeLayerByLayerName("slagTruck"); this.hiMapFun.removeLayerByLayerName('slagTruck')
// this.hiMapFun.removeLayerByLayerName('roadCircle') // this.hiMapFun.removeLayerByLayerName('roadCircle')
// this.hiMapFun.clearAllLayers(); // this.hiMapFun.clearAllLayers();
this.analysisIsShow = true; this.analysisIsShow = true
// debugger // debugger
this.circle(data.latLng); this.circle(data.latLng)
this.listTrailSanitationByPoints(data); this.listTrailSanitationByPoints(data)
this.listBuildingSiteByPoints(data.latLng); this.listBuildingSiteByPoints(data.latLng)
this.listSedimentTrailByPoints(data); this.listSedimentTrailByPoints(data)
this.selectAllByGps(data.latLng); this.selectAllByGps(data.latLng)
if (this.checkboxGroup.indexOf("视频监控") == -1) { if (this.checkboxGroup.indexOf('视频监控') == -1) {
this.checkboxGroup.push("视频监控"); this.checkboxGroup.push('视频监控')
this.bottomTabList[4].img = this.bottomTabList[4].imgActive; this.bottomTabList[4].img = this.bottomTabList[4].imgActive
} }
}); })
bus.$off("openCurrentVideoSurveillance"); // 关闭圆圈图层
bus.$on("openCurrentVideoSurveillance", (channelCode) => { bus.$off('closeCoverage')
this.openVideo = true; bus.$on('closeCoverage', () => {
this.channelCode.unshift(channelCode); this.analysisIsShow = false
}); this.hiMapFun.removerPolygon()
this.hiMapFun.removeLayerByLayerName('videoSurveillance')
this.hiMapFun.removeLayerByLayerName('building')
this.hiMapFun.removeLayerByLayerName('sanitationTruck')
this.hiMapFun.removeLayerByLayerName('slagTruck')
})
bus.$off('openCurrentVideoSurveillance')
bus.$on('openCurrentVideoSurveillance', (channelCode) => {
this.openVideo = true
this.channelCode.unshift(channelCode)
})
// 累计事件数量 // 累计事件数量
this.EventNum(); this.EventNum()
}, },
methods: { methods: {
// 道路污染数据 昨日 // 道路污染数据 昨日
async getRoadData () { async getRoadData () {
const res = await getRoadData({ dt: this.preTime }); const res = await getRoadData({ dt: this.preTime })
// 路网数据 // 路网数据
this.roadData = res.data.data; this.roadData = res.data.data
// 道路事件 pm>200 // 道路事件 pm>200
// const data = res.data.data.filter((item) => item.pm10 > 150); // const data = res.data.data.filter((item) => item.pm10 > 150);
// this.tableData = data; // this.tableData = data;
// this.dateTabs[0].data = data; // this.dateTabs[0].data = data;
// this.dateTabs[0].dataNum = data.length; // this.dateTabs[0].dataNum = data.length;
// this.addToMap(data); // this.addToMap(data);
this.roadOnMap(); this.roadOnMap()
}, },
async getRoadDataWeek () { async getRoadDataWeek () {
const res = await getRoadDataByTimeRegion({ const res = await getRoadDataByTimeRegion({
start: this.weekTime, start: this.weekTime,
end: this.preTime, end: this.preTime
}); })
// 道路事件 pm>200 // 道路事件 pm>200
const data = res.data.data.filter((item) => item.pm10 > 150).reverse(); const data = res.data.data.filter((item) => item.pm10 > 150).reverse()
this.tableData = data; this.tableData = data
this.dateTabs[0].data = data; this.dateTabs[0].data = data
this.dateTabs[0].dataNum = data.length; this.dateTabs[0].dataNum = data.length
this.addToMap(data); this.addToMap(data)
}, },
async getRoadDataMonth () { async getRoadDataMonth () {
const res = await getRoadDataByTimeRegion({ const res = await getRoadDataByTimeRegion({
start: this.monthTime, start: this.monthTime,
end: this.preTime, end: this.preTime
}); })
// 道路事件 pm>200 // 道路事件 pm>200
const data = res.data.data.filter((item) => item.pm10 > 150).reverse(); const data = res.data.data.filter((item) => item.pm10 > 150).reverse()
this.dateTabs[1].data = data; this.dateTabs[1].data = data
this.dateTabs[1].dataNum = data.length; this.dateTabs[1].dataNum = data.length
}, },
// 根据经纬度和半径查询建筑工地信息 // 根据经纬度和半径查询建筑工地信息
async listBuildingSiteByPoints (data) { async listBuildingSiteByPoints (data) {
const param = { const param = {
longitude: data.lng, longitude: data.lng,
latitude: data.lat, latitude: data.lat,
radius: 3000, radius: 3000
// start: '2021-05-17 00:00:00', // start: '2021-05-17 00:00:00',
// end: '2022-05-18 00:00:00' // end: '2022-05-18 00:00:00'
}; }
const res = await listBuildingSiteByPoints(param); const res = await listBuildingSiteByPoints(param)
this.buildingData = res.data.data; this.buildingData = res.data.data
const dataEvent = []; const dataEvent = []
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"]; const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.wd) == -1) { if (arr.indexOf(item.wd) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) }, latLng: { lat: Number(item.wd), lng: Number(item.jd) }
}); })
} }
}); })
this.hiMapFun.addPointsToMap(dataEvent, "building.png", "building"); this.hiMapFun.addPointsToMap(dataEvent, 'building.png', 'building')
}, },
// 根据经纬度和半径查询渣土车 // 根据经纬度和半径查询渣土车
async listSedimentTrailByPoints (data) { async listSedimentTrailByPoints (data) {
@ -358,39 +368,39 @@ export default {
let newEndTime = '' let newEndTime = ''
// endtime 加一天 // endtime 加一天
endTime = new Date(endTime) endTime = new Date(endTime)
endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000); endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000)
newEndTime = newEndTime =
endTime.getFullYear() + endTime.getFullYear() +
"-" + '-' +
(endTime.getMonth() + 1) + (endTime.getMonth() + 1) +
"-" + '-' +
endTime.getDate() + endTime.getDate() +
" " + ' ' +
"00:00:00"; '00:00:00'
const param = { const param = {
longitude: data.latLng.lng, longitude: data.latLng.lng,
latitude: data.latLng.lat, latitude: data.latLng.lat,
radius: 3000, radius: 3000,
start: data.data.dt, start: data.data.dt,
end: newEndTime, end: newEndTime
}; }
const res = await listSedimentTrailByPoints(param); const res = await listSedimentTrailByPoints(param)
// this.slagTruckData = res.data.data // this.slagTruckData = res.data.data
this.slagTruckData = []; this.slagTruckData = []
const dataEvent = []; const dataEvent = []
for (const key in this.slagTruckData) { for (const key in this.slagTruckData) {
// console.log(this.slagTruckData[key][0]) // console.log(this.slagTruckData[key][0])
dataEvent.push({ dataEvent.push({
latLng: { latLng: {
lat: Number(this.slagTruckData[key][0].latitude), lat: Number(this.slagTruckData[key][0].latitude),
lng: Number(this.slagTruckData[key][0].longitude), lng: Number(this.slagTruckData[key][0].longitude)
}, }
}); })
} }
// debugger // debugger
this.hiMapFun.addPointsToMap(dataEvent, "slagTruck.png", "slagTruck"); this.hiMapFun.addPointsToMap(dataEvent, 'slagTruck.png', 'slagTruck')
}, },
// 根据经纬度和半径查询环卫车 // 根据经纬度和半径查询环卫车
async listTrailSanitationByPoints (data) { async listTrailSanitationByPoints (data) {
@ -398,70 +408,70 @@ export default {
let newEndTime = '' let newEndTime = ''
// endtime 加一天 // endtime 加一天
endTime = new Date(endTime) endTime = new Date(endTime)
endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000); endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000)
newEndTime = newEndTime =
endTime.getFullYear() + endTime.getFullYear() +
"-" + '-' +
(endTime.getMonth() + 1) + (endTime.getMonth() + 1) +
"-" + '-' +
endTime.getDate() + endTime.getDate() +
" " + ' ' +
"00:00:00"; '00:00:00'
const param = { const param = {
longitude: data.latLng.lng, longitude: data.latLng.lng,
latitude: data.latLng.lat, latitude: data.latLng.lat,
radius: 3000, radius: 3000,
start: data.data.dt, start: data.data.dt,
end: newEndTime, end: newEndTime
}; }
const res = await listTrailSanitationByPoints(param); const res = await listTrailSanitationByPoints(param)
// console.log('环卫车', res) // console.log('环卫车', res)
// const testdata = [{"id":47,"simkh":"13161720498","cph":"鲁BJ8073","wz":null,"fssj":"2021-07-26 05:52:28","jd":120.3683,"wd":36.1868,"sd":0.0,"fx":106,"zt":"00000000000011000000000011000010","yl":0.0,"lc":14605.8,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000010000000","gd":16.0,"updatetime":"2021-07-30 23:55:53"},{"id":48,"simkh":"14196029850","cph":"鲁BJ8103","wz":null,"fssj":"2021-06-05 18:01:14","jd":120.3682,"wd":36.1871,"sd":0.0,"fx":153,"zt":"00000000000011000000000011000010","yl":0.0,"lc":11395.1,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000010000000","gd":5.0,"updatetime":"2021-07-30 23:55:53"},{"id":52,"simkh":"13161321402","cph":"鲁BK8773","wz":null,"fssj":"2021-07-30 20:56:00","jd":120.3666,"wd":36.1669,"sd":0.0,"fx":337,"zt":"00000000000000000000000000000011","yl":0.0,"lc":4433.3,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":48.0,"updatetime":"2021-07-30 23:55:58"},{"id":55,"simkh":"14196029856","cph":"鲁BL5506","wz":null,"fssj":"2021-07-30 23:56:38","jd":120.3813,"wd":36.1744,"sd":0.0,"fx":183,"zt":"00000000000011000000000011000010","yl":0.0,"lc":26407.1,"yl2":0.0,"sfzx":1,"xh":null,"bjzt":"00000000000000000000000000000000","gd":0.0,"updatetime":"2021-07-30 23:56:01"},{"id":58,"simkh":"13301742326","cph":"鲁BM1753","wz":null,"fssj":"2021-07-30 23:55:58","jd":120.3816,"wd":36.1743,"sd":0.0,"fx":148,"zt":"00000000000011000000000011000010","yl":0.0,"lc":34502.3,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":0.0,"updatetime":"2021-07-30 23:56:02"},{"id":61,"simkh":"13161502470","cph":"鲁BM7318","wz":null,"fssj":"2021-07-30 23:55:28","jd":120.3682,"wd":36.1872,"sd":0.0,"fx":169,"zt":"00000000000011000000000011000010","yl":0.0,"lc":34270.2,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":12.0,"updatetime":"2021-07-30 23:56:03"},{"id":62,"simkh":"13161513479","cph":"鲁BN2381","wz":null,"fssj":"2021-07-30 15:44:53","jd":120.3815,"wd":36.1743,"sd":0.0,"fx":19,"zt":"00000000000011000000000011000001","yl":0.0,"lc":2238.4,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":36.0,"updatetime":"2021-07-30 23:56:04"},{"id":63,"simkh":"13161695408","cph":"鲁BN1272","wz":null,"fssj":"2021-07-30 23:57:14","jd":120.3816,"wd":36.1744,"sd":0.0,"fx":323,"zt":"00000000000011000000000011000010","yl":0.0,"lc":29806.0,"yl2":0.0,"sfzx":1,"xh":null,"bjzt":"00000000000000000000000000000000","gd":79.0,"updatetime":"2021-07-30 23:56:04"},{"id":64,"simkh":"13301662012","cph":"鲁BN2382","wz":null,"fssj":"2021-07-30 23:56:52","jd":120.3816,"wd":36.1746,"sd":0.0,"fx":212,"zt":"00000000000011000000000011000010","yl":0.0,"lc":14075.5,"yl2":0.0,"sfzx":1,"xh":null,"bjzt":"00000000000000000000000000000000","gd":10.0,"updatetime":"2021-07-30 23:56:04"}] // const testdata = [{"id":47,"simkh":"13161720498","cph":"鲁BJ8073","wz":null,"fssj":"2021-07-26 05:52:28","jd":120.3683,"wd":36.1868,"sd":0.0,"fx":106,"zt":"00000000000011000000000011000010","yl":0.0,"lc":14605.8,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000010000000","gd":16.0,"updatetime":"2021-07-30 23:55:53"},{"id":48,"simkh":"14196029850","cph":"鲁BJ8103","wz":null,"fssj":"2021-06-05 18:01:14","jd":120.3682,"wd":36.1871,"sd":0.0,"fx":153,"zt":"00000000000011000000000011000010","yl":0.0,"lc":11395.1,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000010000000","gd":5.0,"updatetime":"2021-07-30 23:55:53"},{"id":52,"simkh":"13161321402","cph":"鲁BK8773","wz":null,"fssj":"2021-07-30 20:56:00","jd":120.3666,"wd":36.1669,"sd":0.0,"fx":337,"zt":"00000000000000000000000000000011","yl":0.0,"lc":4433.3,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":48.0,"updatetime":"2021-07-30 23:55:58"},{"id":55,"simkh":"14196029856","cph":"鲁BL5506","wz":null,"fssj":"2021-07-30 23:56:38","jd":120.3813,"wd":36.1744,"sd":0.0,"fx":183,"zt":"00000000000011000000000011000010","yl":0.0,"lc":26407.1,"yl2":0.0,"sfzx":1,"xh":null,"bjzt":"00000000000000000000000000000000","gd":0.0,"updatetime":"2021-07-30 23:56:01"},{"id":58,"simkh":"13301742326","cph":"鲁BM1753","wz":null,"fssj":"2021-07-30 23:55:58","jd":120.3816,"wd":36.1743,"sd":0.0,"fx":148,"zt":"00000000000011000000000011000010","yl":0.0,"lc":34502.3,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":0.0,"updatetime":"2021-07-30 23:56:02"},{"id":61,"simkh":"13161502470","cph":"鲁BM7318","wz":null,"fssj":"2021-07-30 23:55:28","jd":120.3682,"wd":36.1872,"sd":0.0,"fx":169,"zt":"00000000000011000000000011000010","yl":0.0,"lc":34270.2,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":12.0,"updatetime":"2021-07-30 23:56:03"},{"id":62,"simkh":"13161513479","cph":"鲁BN2381","wz":null,"fssj":"2021-07-30 15:44:53","jd":120.3815,"wd":36.1743,"sd":0.0,"fx":19,"zt":"00000000000011000000000011000001","yl":0.0,"lc":2238.4,"yl2":0.0,"sfzx":0,"xh":null,"bjzt":"00000000000000000000000000000000","gd":36.0,"updatetime":"2021-07-30 23:56:04"},{"id":63,"simkh":"13161695408","cph":"鲁BN1272","wz":null,"fssj":"2021-07-30 23:57:14","jd":120.3816,"wd":36.1744,"sd":0.0,"fx":323,"zt":"00000000000011000000000011000010","yl":0.0,"lc":29806.0,"yl2":0.0,"sfzx":1,"xh":null,"bjzt":"00000000000000000000000000000000","gd":79.0,"updatetime":"2021-07-30 23:56:04"},{"id":64,"simkh":"13301662012","cph":"鲁BN2382","wz":null,"fssj":"2021-07-30 23:56:52","jd":120.3816,"wd":36.1746,"sd":0.0,"fx":212,"zt":"00000000000011000000000011000010","yl":0.0,"lc":14075.5,"yl2":0.0,"sfzx":1,"xh":null,"bjzt":"00000000000000000000000000000000","gd":10.0,"updatetime":"2021-07-30 23:56:04"}]
this.sanitationTruckData = res.data.data; this.sanitationTruckData = res.data.data
const dataEvent = []; const dataEvent = []
this.sanitationTruckData.forEach((item) => { this.sanitationTruckData.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"]; const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.wd) == -1) { if (arr.indexOf(item.wd) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) }, latLng: { lat: Number(item.wd), lng: Number(item.jd) }
}); })
} }
}); })
this.hiMapFun.addPointsToMap( this.hiMapFun.addPointsToMap(
dataEvent, dataEvent,
"sanitationTruck.png", 'sanitationTruck.png',
"sanitationTruck" 'sanitationTruck'
); )
}, },
// 根据经纬度和半径查询摄像头 // 根据经纬度和半径查询摄像头
async selectAllByGps (data) { async selectAllByGps (data) {
const param = { const param = {
gpsX: data.lng, gpsX: data.lng,
gpsY: data.lat, gpsY: data.lat,
radius: 3000, radius: 3000
}; }
const res = await selectAllByGps(param); const res = await selectAllByGps(param)
console.log(res); console.log(res)
const dataEvent = []; const dataEvent = []
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"]; const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.gpsX) == -1) { if (arr.indexOf(item.gpsX) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) }, latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
data: item, data: item,
type: "videoSurveillance", type: 'videoSurveillance'
}); })
} }
}); })
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster( this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
dataEvent, dataEvent,
"videoSurveillance.png", 'videoSurveillance.png',
"videoSurveillance", 'videoSurveillance',
createCameraDetailsPop createCameraDetailsPop
); )
}, },
// 点位上图 // 点位上图
addToMap (data) { addToMap (data) {
@ -479,220 +489,220 @@ export default {
// } // }
// } // }
// ] // ]
const dataEvent = []; const dataEvent = []
data.forEach((item) => { data.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"]; const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.lat) == -1) { if (arr.indexOf(item.lat) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.lat), lng: Number(item.lng) }, latLng: { lat: Number(item.lat), lng: Number(item.lng) },
data: item, data: item,
type: "road", type: 'road',
strong: 0.5, strong: 0.5
}); })
} }
}); })
this.hiMapFun.addPointsToMap( this.hiMapFun.addPointsToMap(
dataEvent, dataEvent,
"poi-red.png", 'poi-red.png',
"roadPoint", 'roadPoint',
createRoadGovernancePop createRoadGovernancePop
); )
}, },
// 圈选查询 // 圈选查询
circle (latlng) { circle (latlng) {
this.hiMapFun.addCircleToMap(latlng, 3800); this.hiMapFun.addCircleToMap(latlng, 3800)
}, },
removeLayer (data) { removeLayer (data) {
this.hiMapFun.removeLayerByLayerName(data.layerName); this.hiMapFun.removeLayerByLayerName(data.layerName)
}, },
mapFly (data) { mapFly (data) {
this.showDetailFlag = true; this.showDetailFlag = true
this.myEvnIn = data; this.myEvnIn = data
// console.log('切换地图视角', latLng); // console.log('切换地图视角', latLng);
// this.hiMap.mapObj.map.flyTo(latLng, _global.config.maxMapZoom) // this.hiMap.mapObj.map.flyTo(latLng, _global.config.maxMapZoom)
console.log("事件信息", data); console.log('事件信息', data)
this.getHomeResourceCnt("event"); this.getHomeResourceCnt('event')
this.getEvnInfo(data.eventId); this.getEvnInfo(data.eventId)
this.getEvenCondition(data.eventId); this.getEvenCondition(data.eventId)
}, },
tabsHandleChange (item) { tabsHandleChange (item) {
if (this.checkboxGroup.indexOf(item.name) !== -1) { if (this.checkboxGroup.indexOf(item.name) !== -1) {
this.bottomTabList[item.index].img = this.bottomTabList[item.index].img =
this.bottomTabList[item.index].imgActive; this.bottomTabList[item.index].imgActive
switch (item.id) { switch (item.id) {
case "road": case 'road':
this.roadOnMap(); this.roadOnMap()
break; break
case "slagTruck": case 'slagTruck':
break; break
case "sanitationTruck": case 'sanitationTruck':
selectAllTrailSanitation().then((res) => { selectAllTrailSanitation().then((res) => {
const dataEvent = []; const dataEvent = []
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"]; const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.wd) == -1) { if (arr.indexOf(item.wd) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) }, latLng: { lat: Number(item.wd), lng: Number(item.jd) }
}); })
} }
}); })
this.hiMapFun.addPointsToMap( this.hiMapFun.addPointsToMap(
dataEvent, dataEvent,
"sanitationTruck.png", 'sanitationTruck.png',
"sanitationTruckAll" 'sanitationTruckAll'
); )
}); })
break; break
case "construction": case 'construction':
selectBuildSite().then((res) => { selectBuildSite().then((res) => {
const dataEvent = []; const dataEvent = []
res.data.data.forEach((item) => { res.data.data.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"]; const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.wd) == -1) { if (arr.indexOf(item.wd) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) }, latLng: { lat: Number(item.wd), lng: Number(item.jd) }
}); })
} }
}); })
this.hiMapFun.addPointsToMap( this.hiMapFun.addPointsToMap(
dataEvent, dataEvent,
"building.png", 'building.png',
"buildingAll" 'buildingAll'
); )
}); })
break; break
case "monitor": case 'monitor':
break; break
default: default:
break; break
} }
} else { } else {
this.bottomTabList[item.index].img = this.bottomTabList[item.index].img =
this.bottomTabList[item.index].imgDefault; this.bottomTabList[item.index].imgDefault
switch (item.id) { switch (item.id) {
case "road": case 'road':
this.hiMapFun.removerPolyline(); this.hiMapFun.removerPolyline()
break; break
case "slagTruck": case 'slagTruck':
break; break
case "sanitationTruck": case 'sanitationTruck':
this.hiMapFun.removeLayerByLayerName("sanitationTruckAll"); this.hiMapFun.removeLayerByLayerName('sanitationTruckAll')
break; break
case "construction": case 'construction':
this.hiMapFun.removeLayerByLayerName("buildingAll"); this.hiMapFun.removeLayerByLayerName('buildingAll')
break; break
case "monitor": case 'monitor':
this.hiMapFun.removeLayerByLayerName("videoSurveillance"); this.hiMapFun.removeLayerByLayerName('videoSurveillance')
break; break
default: default:
break; break
} }
} }
}, },
handleRowClick (data) { handleRowClick (data) {
console.log("行点击", data); console.log('行点击', data)
this.hiMap.mapObj.map.flyTo({ lat: data.lat+0.007, lng: data.lng },13); this.hiMap.mapObj.map.flyTo({ lat: data.lat + 0.007, lng: data.lng }, 13)
const feature = { const feature = {
latLng: { lat: data.lat, lng: data.lng }, latLng: { lat: data.lat, lng: data.lng },
data: data, data: data
}; }
this.hiMapFun.openPopupRoadGovernance(feature); this.hiMapFun.openPopupRoadGovernance(feature)
}, },
close () { close () {
this.analysisIsShow = false; this.analysisIsShow = false
}, },
selectShowOnMap (type, selectStatus) { selectShowOnMap (type, selectStatus) {
console.log(type, selectStatus); console.log(type, selectStatus)
switch (type) { switch (type) {
case "slagTruck": case 'slagTruck':
if (selectStatus) { if (selectStatus) {
// 暂时没有数据 // 暂时没有数据
} else { } else {
this.hiMapFun.removeLayerByLayerName("slagTruck"); this.hiMapFun.removeLayerByLayerName('slagTruck')
} }
break; break
case "sanitationTruck": case 'sanitationTruck':
if (selectStatus) { if (selectStatus) {
const dataEvent = []; const dataEvent = []
this.sanitationTruckData.forEach((item) => { this.sanitationTruckData.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"]; const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.wd) == -1) { if (arr.indexOf(item.wd) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) }, latLng: { lat: Number(item.wd), lng: Number(item.jd) }
}); })
} }
}); })
this.hiMapFun.addPointsToMap( this.hiMapFun.addPointsToMap(
dataEvent, dataEvent,
"sanitationTruck.png", 'sanitationTruck.png',
"sanitationTruck" 'sanitationTruck'
); )
} else { } else {
this.hiMapFun.removeLayerByLayerName("sanitationTruck"); this.hiMapFun.removeLayerByLayerName('sanitationTruck')
} }
break; break
case "construction": case 'construction':
if (selectStatus) { if (selectStatus) {
const dataEvent = []; const dataEvent = []
this.buildingData.forEach((item) => { this.buildingData.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"]; const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.wd) == -1) { if (arr.indexOf(item.wd) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) }, latLng: { lat: Number(item.wd), lng: Number(item.jd) }
}); })
} }
}); })
this.hiMapFun.addPointsToMap(dataEvent, "building.png", "building"); this.hiMapFun.addPointsToMap(dataEvent, 'building.png', 'building')
} else { } else {
this.hiMapFun.removeLayerByLayerName("building"); this.hiMapFun.removeLayerByLayerName('building')
} }
break; break
} }
}, },
// 路网上图 // 路网上图
roadOnMap () { roadOnMap () {
this.roadData.forEach((item) => { this.roadData.forEach((item) => {
let newPoint = JSON.parse(item.points); const newPoint = JSON.parse(item.points)
newPoint[0].map((Point) => { newPoint[0].map((Point) => {
Point.reverse(); Point.reverse()
}); })
item.pm10 = Number(item.pm10); item.pm10 = Number(item.pm10)
switch (true) { switch (true) {
case 0 < item.pm10 && item.pm10 <= 50: case item.pm10 > 0 && item.pm10 <= 50:
this.hiMapFun.addPathToMap(newPoint, "#36fe78"); this.hiMapFun.addPathToMap(newPoint, '#36fe78')
break; break
case 50 < item.pm10 && item.pm10 <= 150: case item.pm10 > 50 && item.pm10 <= 150:
this.hiMapFun.addPathToMap(newPoint, "#fde202"); this.hiMapFun.addPathToMap(newPoint, '#fde202')
break; break
case 150 < item.pm10 && item.pm10 <= 250: case item.pm10 > 150 && item.pm10 <= 250:
this.hiMapFun.addPathToMap(newPoint, "#feb403"); this.hiMapFun.addPathToMap(newPoint, '#feb403')
break; break
case 250 < item.pm10 && item.pm10 <= 350: case item.pm10 > 250 && item.pm10 <= 350:
this.hiMapFun.addPathToMap(newPoint, "#fd8402"); this.hiMapFun.addPathToMap(newPoint, '#fd8402')
break; break
case 350 < item.pm10 && item.pm10 <= 420: case item.pm10 > 350 && item.pm10 <= 420:
this.hiMapFun.addPathToMap(newPoint, "#fd4302"); this.hiMapFun.addPathToMap(newPoint, '#fd4302')
break; break
case 420 < item.pm10 && item.pm10 <= 500: case item.pm10 > 420 && item.pm10 <= 500:
this.hiMapFun.addPathToMap(newPoint, "#fd0202"); this.hiMapFun.addPathToMap(newPoint, '#fd0202')
break; break
case 500 < item.pm10 && item.pm10 <= 600: case item.pm10 > 500 && item.pm10 <= 600:
this.hiMapFun.addPathToMap(newPoint, "#a80101"); this.hiMapFun.addPathToMap(newPoint, '#a80101')
break; break
case 600 < item.pm10 && item.pm10 <= 700: case item.pm10 > 600 && item.pm10 <= 700:
this.hiMapFun.addPathToMap(newPoint, "#690000"); this.hiMapFun.addPathToMap(newPoint, '#690000')
break; break
default: default:
this.hiMapFun.addPathToMap(newPoint, "#36fe78"); this.hiMapFun.addPathToMap(newPoint, '#36fe78')
break; break
} }
}); })
}, },
tabsHandleClick (item) { tabsHandleClick (item) {
this.hiMapFun.removeLayerByLayerName("roadPoint"); this.hiMapFun.removeLayerByLayerName('roadPoint')
this.tableData = item.data; this.tableData = item.data
this.addToMap(item.data); this.addToMap(item.data)
}, },
// 累计事件数量 本年度 // 累计事件数量 本年度
EventNum () { EventNum () {
@ -702,15 +712,14 @@ export default {
// const a = this.EventAllLength.toString(); // const a = this.EventAllLength.toString();
// this.EventAllArr = a.split(""); // this.EventAllArr = a.split("");
this.dateTabs[2].data = res.data.data.roadData
this.dateTabs[2].data = res.data.data.roadData; this.dateTabs[2].dataNum = res.data.data.roadData.length
this.dateTabs[2].dataNum = res.data.data.roadData.length;
console.log(this.dateTabs) console.log(this.dateTabs)
console.log(res.data.data) console.log(res.data.data)
}); })
}, }
}, }
}; }
</script> </script>
<style lang='scss'> <style lang='scss'>
::-webkit-scrollbar { ::-webkit-scrollbar {