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

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

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

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

@ -114,7 +114,7 @@
</template>
<script>
import { HieimpMap } from "@/supermap/map-init";
import { HieimpMap } from '@/supermap/map-init'
import {
getRoadData,
listBuildingSiteByPoints,
@ -124,347 +124,357 @@ import {
selectBuildSite,
getRoadDataByTimeRegion,
selectAllTrailSanitation,
selectRoadData,
} from "@/api/road";
import TiledMap from "@/views/pages/mapHome/components/tiledMap";
selectRoadData
} from '@/api/road'
import TiledMap from '@/views/pages/mapHome/components/tiledMap'
import {
createRoadGovernancePop,
createCameraDetailsPop,
} from "@/supermap/createMarkerPopup";
import CauseAnalysis from "@/views/pages/roadGovernance/components/CauseAnalysis";
import bus from "@/views/layout/bus";
createCameraDetailsPop
} from '@/supermap/createMarkerPopup'
import CauseAnalysis from '@/views/pages/roadGovernance/components/CauseAnalysis'
import bus from '@/views/layout/bus'
// import testSlagTruckData from "./slagTruckData";
import VideoPlay from "../../videoSurveillance/components/VideoPlay";
import VideoPlay from '../../videoSurveillance/components/VideoPlay'
export default {
data() {
data () {
return {
// title: '',
hiMap: new HieimpMap(), // 地图全局对象
mapId: "map-cloudBrain", // 地图容器的id
mapId: 'map-cloudBrain', // 地图容器的id
showDetailFlag: false, // 事件列表与详情 flag
homeEventData: {},
myEvnIn: "",
myEvnIn: '',
dateTabs: [
{
name: "本周",
name: '本周',
data: [],
dataNum: "",
dataNum: ''
},
{
name: "本月",
name: '本月',
data: [],
dataNum: "",
dataNum: ''
},
{
name: "本年",
name: '本年',
data: [],
dataNum: "",
},
dataNum: ''
}
],
EvnInfoData: {},
evenCondition: [],
bottomTabList: [
{
name: "道路",
id: "road",
index: "0",
img: require("../../../../assets/roadGovernance/roadActive.png"),
imgDefault: require("../../../../assets/roadGovernance/road.png"),
imgActive: require("../../../../assets/roadGovernance/roadActive.png"),
name: '道路',
id: 'road',
index: '0',
img: require('../../../../assets/roadGovernance/roadActive.png'),
imgDefault: require('../../../../assets/roadGovernance/road.png'),
imgActive: require('../../../../assets/roadGovernance/roadActive.png')
},
{
name: "渣土车",
id: "slagTruck",
index: "1",
img: require("../../../../assets/roadGovernance/slagTruck.png"),
imgDefault: require("../../../../assets/roadGovernance/slagTruck.png"),
imgActive: require("../../../../assets/roadGovernance/slagTruckActive.png"),
name: '渣土车',
id: 'slagTruck',
index: '1',
img: require('../../../../assets/roadGovernance/slagTruck.png'),
imgDefault: require('../../../../assets/roadGovernance/slagTruck.png'),
imgActive: require('../../../../assets/roadGovernance/slagTruckActive.png')
},
{
name: "环卫车",
id: "sanitationTruck",
index: "2",
img: require("../../../../assets/roadGovernance/sanitationTruck.png"),
imgDefault: require("../../../../assets/roadGovernance/sanitationTruck.png"),
imgActive: require("../../../../assets/roadGovernance/sanitationTruckActive.png"),
name: '环卫车',
id: 'sanitationTruck',
index: '2',
img: require('../../../../assets/roadGovernance/sanitationTruck.png'),
imgDefault: require('../../../../assets/roadGovernance/sanitationTruck.png'),
imgActive: require('../../../../assets/roadGovernance/sanitationTruckActive.png')
},
{
name: "建筑工地",
id: "construction",
index: "3",
img: require("../../../../assets/roadGovernance/construction.png"),
imgDefault: require("../../../../assets/roadGovernance/construction.png"),
imgActive: require("../../../../assets/roadGovernance/constructionActive.png"),
name: '建筑工地',
id: 'construction',
index: '3',
img: require('../../../../assets/roadGovernance/construction.png'),
imgDefault: require('../../../../assets/roadGovernance/construction.png'),
imgActive: require('../../../../assets/roadGovernance/constructionActive.png')
},
{
name: "视频监控",
id: "monitor",
index: "4",
img: require("../../../../assets/roadGovernance/monitor.png"),
imgDefault: require("../../../../assets/roadGovernance/monitor.png"),
imgActive: require("../../../../assets/roadGovernance/monitorActive.png"),
},
name: '视频监控',
id: 'monitor',
index: '4',
img: require('../../../../assets/roadGovernance/monitor.png'),
imgDefault: require('../../../../assets/roadGovernance/monitor.png'),
imgActive: require('../../../../assets/roadGovernance/monitorActive.png')
}
],
tabsActiveName: "出租车走航监测",
tabsActiveTime: "昨日",
checkboxGroup: ["道路"],
tabsActiveName: '出租车走航监测',
tabsActiveTime: '昨日',
checkboxGroup: ['道路'],
tableData: [],
analysisIsShow: false,
buildingData: [],
slagTruckData: [],
sanitationTruckData: [],
roadData: [],
preTime: "",
currentTime: "",
weekTime: "",
monthTime: "",
preTime: '',
currentTime: '',
weekTime: '',
monthTime: '',
channelCode: [],
openVideo: false,
timeRegion: "",
timeRegion: '',
// 累计事件数量
EventAll: [],
EventAllLength: "",
EventAllArr: [],
};
EventAllLength: '',
EventAllArr: []
}
},
props: {
title: {
type: String,
default: "城市云脑-道路保洁监管",
},
default: '城市云脑-道路保洁监管'
}
},
components: {
TiledMap,
CauseAnalysis,
VideoPlay,
VideoPlay
},
// 生命周期 - 创建完成（访问当前this实例）
created() {
const currentDate = new Date();
currentDate.setTime(currentDate.getTime());
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";
currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
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";
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";
created () {
const currentDate = new Date()
currentDate.setTime(currentDate.getTime())
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'
currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000)
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'
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'
},
// 生命周期 - 挂载完成（访问DOM元素）
mounted() {
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj);
mounted () {
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
this.multiScreenFun = this.hiMap.multiScreenFun(
this.hiMap.mapObj,
this.hiMapFun
);
)
this.getRoadData();
this.getRoadDataWeek();
this.getRoadDataMonth();
this.getRoadData()
this.getRoadDataWeek()
this.getRoadDataMonth()
bus.$off("openCauseAnalysis");
bus.$on("openCauseAnalysis", (data) => {
this.timeRegion = data.data.dt;
this.hiMapFun.removerPolygon();
this.hiMapFun.removeLayerByLayerName("videoSurveillance");
this.hiMapFun.removeLayerByLayerName("building");
this.hiMapFun.removeLayerByLayerName("sanitationTruck");
this.hiMapFun.removeLayerByLayerName("slagTruck");
bus.$off('openCauseAnalysis')
bus.$on('openCauseAnalysis', (data) => {
this.timeRegion = data.data.dt
this.hiMapFun.removerPolygon()
this.hiMapFun.removeLayerByLayerName('videoSurveillance')
this.hiMapFun.removeLayerByLayerName('building')
this.hiMapFun.removeLayerByLayerName('sanitationTruck')
this.hiMapFun.removeLayerByLayerName('slagTruck')
// this.hiMapFun.removeLayerByLayerName('roadCircle')
// this.hiMapFun.clearAllLayers();
this.analysisIsShow = true;
this.analysisIsShow = true
// debugger
this.circle(data.latLng);
this.listTrailSanitationByPoints(data);
this.listBuildingSiteByPoints(data.latLng);
this.listSedimentTrailByPoints(data);
this.selectAllByGps(data.latLng);
if (this.checkboxGroup.indexOf("视频监控") == -1) {
this.checkboxGroup.push("视频监控");
this.bottomTabList[4].img = this.bottomTabList[4].imgActive;
this.circle(data.latLng)
this.listTrailSanitationByPoints(data)
this.listBuildingSiteByPoints(data.latLng)
this.listSedimentTrailByPoints(data)
this.selectAllByGps(data.latLng)
if (this.checkboxGroup.indexOf('视频监控') == -1) {
this.checkboxGroup.push('视频监控')
this.bottomTabList[4].img = this.bottomTabList[4].imgActive
}
});
bus.$off("openCurrentVideoSurveillance");
bus.$on("openCurrentVideoSurveillance", (channelCode) => {
this.openVideo = true;
this.channelCode.unshift(channelCode);
});
})
// 关闭圆圈图层
bus.$off('closeCoverage')
bus.$on('closeCoverage', () => {
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: {
// 道路污染数据 昨日
async getRoadData() {
const res = await getRoadData({ dt: this.preTime });
//路网数据
this.roadData = res.data.data;
//道路事件 pm>200
async getRoadData () {
const res = await getRoadData({ dt: this.preTime })
// 路网数据
this.roadData = res.data.data
// 道路事件 pm>200
// const data = res.data.data.filter((item) => item.pm10 > 150);
// this.tableData = data;
// this.dateTabs[0].data = data;
// this.dateTabs[0].dataNum = data.length;
// this.addToMap(data);
this.roadOnMap();
this.roadOnMap()
},
async getRoadDataWeek() {
async getRoadDataWeek () {
const res = await getRoadDataByTimeRegion({
start: this.weekTime,
end: this.preTime,
});
//道路事件 pm>200
const data = res.data.data.filter((item) => item.pm10 > 150).reverse();
this.tableData = data;
this.dateTabs[0].data = data;
this.dateTabs[0].dataNum = data.length;
this.addToMap(data);
end: this.preTime
})
// 道路事件 pm>200
const data = res.data.data.filter((item) => item.pm10 > 150).reverse()
this.tableData = data
this.dateTabs[0].data = data
this.dateTabs[0].dataNum = data.length
this.addToMap(data)
},
async getRoadDataMonth() {
async getRoadDataMonth () {
const res = await getRoadDataByTimeRegion({
start: this.monthTime,
end: this.preTime,
});
//道路事件 pm>200
const data = res.data.data.filter((item) => item.pm10 > 150).reverse();
this.dateTabs[1].data = data;
this.dateTabs[1].dataNum = data.length;
end: this.preTime
})
// 道路事件 pm>200
const data = res.data.data.filter((item) => item.pm10 > 150).reverse()
this.dateTabs[1].data = data
this.dateTabs[1].dataNum = data.length
},
// 根据经纬度和半径查询建筑工地信息
async listBuildingSiteByPoints(data) {
async listBuildingSiteByPoints (data) {
const param = {
longitude: data.lng,
latitude: data.lat,
radius: 3000,
radius: 3000
// start: '2021-05-17 00:00:00',
// end: '2022-05-18 00:00:00'
};
const res = await listBuildingSiteByPoints(param);
this.buildingData = res.data.data;
const dataEvent = [];
}
const res = await listBuildingSiteByPoints(param)
this.buildingData = res.data.data
const dataEvent = []
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) {
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) {
let endTime = data.data.dt
let newEndTime = ''
//endtime 加一天
// endtime 加一天
endTime = new Date(endTime)
endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000);
endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000)
newEndTime =
endTime.getFullYear() +
"-" +
'-' +
(endTime.getMonth() + 1) +
"-" +
'-' +
endTime.getDate() +
" " +
"00:00:00";
' ' +
'00:00:00'
const param = {
longitude: data.latLng.lng,
latitude: data.latLng.lat,
radius: 3000,
start: data.data.dt,
end: newEndTime,
};
const res = await listSedimentTrailByPoints(param);
end: newEndTime
}
const res = await listSedimentTrailByPoints(param)
// this.slagTruckData = res.data.data
this.slagTruckData = [];
this.slagTruckData = []
const dataEvent = [];
const dataEvent = []
for (const key in this.slagTruckData) {
// console.log(this.slagTruckData[key][0])
dataEvent.push({
latLng: {
lat: Number(this.slagTruckData[key][0].latitude),
lng: Number(this.slagTruckData[key][0].longitude),
},
});
lng: Number(this.slagTruckData[key][0].longitude)
}
})
}
// debugger
this.hiMapFun.addPointsToMap(dataEvent, "slagTruck.png", "slagTruck");
this.hiMapFun.addPointsToMap(dataEvent, 'slagTruck.png', 'slagTruck')
},
// 根据经纬度和半径查询环卫车
async listTrailSanitationByPoints(data) {
async listTrailSanitationByPoints (data) {
let endTime = data.data.dt
let newEndTime = ''
//endtime 加一天
// endtime 加一天
endTime = new Date(endTime)
endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000);
endTime.setTime(endTime.getTime() + 24 * 60 * 60 * 1000)
newEndTime =
endTime.getFullYear() +
"-" +
'-' +
(endTime.getMonth() + 1) +
"-" +
'-' +
endTime.getDate() +
" " +
"00:00:00";
' ' +
'00:00:00'
const param = {
longitude: data.latLng.lng,
latitude: data.latLng.lat,
radius: 3000,
start: data.data.dt,
end: newEndTime,
};
end: newEndTime
}
const res = await listTrailSanitationByPoints(param);
const res = await listTrailSanitationByPoints(param)
// 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"}]
this.sanitationTruckData = res.data.data;
const dataEvent = [];
this.sanitationTruckData = res.data.data
const dataEvent = []
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) {
dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) },
});
latLng: { lat: Number(item.wd), lng: Number(item.jd) }
})
}
});
})
this.hiMapFun.addPointsToMap(
dataEvent,
"sanitationTruck.png",
"sanitationTruck"
);
'sanitationTruck.png',
'sanitationTruck'
)
},
// 根据经纬度和半径查询摄像头
async selectAllByGps(data) {
async selectAllByGps (data) {
const param = {
gpsX: data.lng,
gpsY: data.lat,
radius: 3000,
};
radius: 3000
}
const res = await selectAllByGps(param);
console.log(res);
const dataEvent = [];
const res = await selectAllByGps(param)
console.log(res)
const dataEvent = []
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) {
dataEvent.push({
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
data: item,
type: "videoSurveillance",
});
type: 'videoSurveillance'
})
}
});
})
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
dataEvent,
"videoSurveillance.png",
"videoSurveillance",
'videoSurveillance.png',
'videoSurveillance',
createCameraDetailsPop
);
)
},
// 点位上图
addToMap(data) {
addToMap (data) {
// const arr = [
// {
// latLng: {
@ -479,238 +489,237 @@ export default {
// }
// }
// ]
const dataEvent = [];
const dataEvent = []
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) {
dataEvent.push({
latLng: { lat: Number(item.lat), lng: Number(item.lng) },
data: item,
type: "road",
strong: 0.5,
});
type: 'road',
strong: 0.5
})
}
});
})
this.hiMapFun.addPointsToMap(
dataEvent,
"poi-red.png",
"roadPoint",
'poi-red.png',
'roadPoint',
createRoadGovernancePop
);
)
},
// 圈选查询
circle(latlng) {
this.hiMapFun.addCircleToMap(latlng, 3800);
circle (latlng) {
this.hiMapFun.addCircleToMap(latlng, 3800)
},
removeLayer(data) {
this.hiMapFun.removeLayerByLayerName(data.layerName);
removeLayer (data) {
this.hiMapFun.removeLayerByLayerName(data.layerName)
},
mapFly(data) {
this.showDetailFlag = true;
this.myEvnIn = data;
mapFly (data) {
this.showDetailFlag = true
this.myEvnIn = data
// console.log('切换地图视角', latLng);
// this.hiMap.mapObj.map.flyTo(latLng, _global.config.maxMapZoom)
console.log("事件信息", data);
this.getHomeResourceCnt("event");
this.getEvnInfo(data.eventId);
this.getEvenCondition(data.eventId);
console.log('事件信息', data)
this.getHomeResourceCnt('event')
this.getEvnInfo(data.eventId)
this.getEvenCondition(data.eventId)
},
tabsHandleChange(item) {
tabsHandleChange (item) {
if (this.checkboxGroup.indexOf(item.name) !== -1) {
this.bottomTabList[item.index].img =
this.bottomTabList[item.index].imgActive;
this.bottomTabList[item.index].imgActive
switch (item.id) {
case "road":
this.roadOnMap();
break;
case "slagTruck":
break;
case "sanitationTruck":
case 'road':
this.roadOnMap()
break
case 'slagTruck':
break
case 'sanitationTruck':
selectAllTrailSanitation().then((res) => {
const dataEvent = [];
const dataEvent = []
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) {
dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) },
});
latLng: { lat: Number(item.wd), lng: Number(item.jd) }
})
}
});
})
this.hiMapFun.addPointsToMap(
dataEvent,
"sanitationTruck.png",
"sanitationTruckAll"
);
});
break;
case "construction":
'sanitationTruck.png',
'sanitationTruckAll'
)
})
break
case 'construction':
selectBuildSite().then((res) => {
const dataEvent = [];
const dataEvent = []
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) {
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",
"buildingAll"
);
});
break;
case "monitor":
break;
'building.png',
'buildingAll'
)
})
break
case 'monitor':
break
default:
break;
break
}
} else {
this.bottomTabList[item.index].img =
this.bottomTabList[item.index].imgDefault;
this.bottomTabList[item.index].imgDefault
switch (item.id) {
case "road":
this.hiMapFun.removerPolyline();
break;
case "slagTruck":
break;
case "sanitationTruck":
this.hiMapFun.removeLayerByLayerName("sanitationTruckAll");
break;
case "construction":
this.hiMapFun.removeLayerByLayerName("buildingAll");
break;
case "monitor":
this.hiMapFun.removeLayerByLayerName("videoSurveillance");
break;
case 'road':
this.hiMapFun.removerPolyline()
break
case 'slagTruck':
break
case 'sanitationTruck':
this.hiMapFun.removeLayerByLayerName('sanitationTruckAll')
break
case 'construction':
this.hiMapFun.removeLayerByLayerName('buildingAll')
break
case 'monitor':
this.hiMapFun.removeLayerByLayerName('videoSurveillance')
break
default:
break;
break
}
}
},
handleRowClick(data) {
console.log("行点击", data);
this.hiMap.mapObj.map.flyTo({ lat: data.lat+0.007, lng: data.lng },13);
handleRowClick (data) {
console.log('行点击', data)
this.hiMap.mapObj.map.flyTo({ lat: data.lat + 0.007, lng: data.lng }, 13)
const feature = {
latLng: { lat: data.lat, lng: data.lng },
data: data,
};
this.hiMapFun.openPopupRoadGovernance(feature);
},
close() {
this.analysisIsShow = false;
},
selectShowOnMap(type, selectStatus) {
console.log(type, selectStatus);
switch (type) {
case "slagTruck":
if (selectStatus) {
//暂时没有数据
} else {
this.hiMapFun.removeLayerByLayerName("slagTruck");
data: data
}
break;
case "sanitationTruck":
this.hiMapFun.openPopupRoadGovernance(feature)
},
close () {
this.analysisIsShow = false
},
selectShowOnMap (type, selectStatus) {
console.log(type, selectStatus)
switch (type) {
case 'slagTruck':
if (selectStatus) {
const dataEvent = [];
// 暂时没有数据
} else {
this.hiMapFun.removeLayerByLayerName('slagTruck')
}
break
case 'sanitationTruck':
if (selectStatus) {
const dataEvent = []
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) {
dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) },
});
latLng: { lat: Number(item.wd), lng: Number(item.jd) }
})
}
});
})
this.hiMapFun.addPointsToMap(
dataEvent,
"sanitationTruck.png",
"sanitationTruck"
);
'sanitationTruck.png',
'sanitationTruck'
)
} else {
this.hiMapFun.removeLayerByLayerName("sanitationTruck");
this.hiMapFun.removeLayerByLayerName('sanitationTruck')
}
break;
case "construction":
break
case 'construction':
if (selectStatus) {
const dataEvent = [];
const dataEvent = []
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) {
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 {
this.hiMapFun.removeLayerByLayerName("building");
this.hiMapFun.removeLayerByLayerName('building')
}
break;
break
}
},
//路网上图
roadOnMap() {
// 路网上图
roadOnMap () {
this.roadData.forEach((item) => {
let newPoint = JSON.parse(item.points);
const newPoint = JSON.parse(item.points)
newPoint[0].map((Point) => {
Point.reverse();
});
item.pm10 = Number(item.pm10);
Point.reverse()
})
item.pm10 = Number(item.pm10)
switch (true) {
case 0 < item.pm10 && item.pm10 <= 50:
this.hiMapFun.addPathToMap(newPoint, "#36fe78");
break;
case 50 < item.pm10 && item.pm10 <= 150:
this.hiMapFun.addPathToMap(newPoint, "#fde202");
break;
case 150 < item.pm10 && item.pm10 <= 250:
this.hiMapFun.addPathToMap(newPoint, "#feb403");
break;
case 250 < item.pm10 && item.pm10 <= 350:
this.hiMapFun.addPathToMap(newPoint, "#fd8402");
break;
case 350 < item.pm10 && item.pm10 <= 420:
this.hiMapFun.addPathToMap(newPoint, "#fd4302");
break;
case 420 < item.pm10 && item.pm10 <= 500:
this.hiMapFun.addPathToMap(newPoint, "#fd0202");
break;
case 500 < item.pm10 && item.pm10 <= 600:
this.hiMapFun.addPathToMap(newPoint, "#a80101");
break;
case 600 < item.pm10 && item.pm10 <= 700:
this.hiMapFun.addPathToMap(newPoint, "#690000");
break;
case item.pm10 > 0 && item.pm10 <= 50:
this.hiMapFun.addPathToMap(newPoint, '#36fe78')
break
case item.pm10 > 50 && item.pm10 <= 150:
this.hiMapFun.addPathToMap(newPoint, '#fde202')
break
case item.pm10 > 150 && item.pm10 <= 250:
this.hiMapFun.addPathToMap(newPoint, '#feb403')
break
case item.pm10 > 250 && item.pm10 <= 350:
this.hiMapFun.addPathToMap(newPoint, '#fd8402')
break
case item.pm10 > 350 && item.pm10 <= 420:
this.hiMapFun.addPathToMap(newPoint, '#fd4302')
break
case item.pm10 > 420 && item.pm10 <= 500:
this.hiMapFun.addPathToMap(newPoint, '#fd0202')
break
case item.pm10 > 500 && item.pm10 <= 600:
this.hiMapFun.addPathToMap(newPoint, '#a80101')
break
case item.pm10 > 600 && item.pm10 <= 700:
this.hiMapFun.addPathToMap(newPoint, '#690000')
break
default:
this.hiMapFun.addPathToMap(newPoint, "#36fe78");
break;
this.hiMapFun.addPathToMap(newPoint, '#36fe78')
break
}
});
})
},
tabsHandleClick(item) {
this.hiMapFun.removeLayerByLayerName("roadPoint");
this.tableData = item.data;
this.addToMap(item.data);
tabsHandleClick (item) {
this.hiMapFun.removeLayerByLayerName('roadPoint')
this.tableData = item.data
this.addToMap(item.data)
},
// 累计事件数量 本年度
EventNum() {
selectRoadData({page:1,pageSize:999}).then((res) => {
EventNum () {
selectRoadData({ page: 1, pageSize: 999 }).then((res) => {
// this.EventAll = res.data.data;
// this.EventAllLength = this.EventAll.length;
// const a = this.EventAllLength.toString();
// this.EventAllArr = a.split("");
this.dateTabs[2].data = res.data.data.roadData;
this.dateTabs[2].dataNum = res.data.data.roadData.length;
this.dateTabs[2].data = res.data.data.roadData
this.dateTabs[2].dataNum = res.data.data.roadData.length
console.log(this.dateTabs)
console.log(res.data.data)
});
},
},
};
})
}
}
}
</script>
<style lang='scss'>
::-webkit-scrollbar {