解决HIBRAINQD-2,圈选不清空的bug
This commit is contained in:
parent
c2608fe2d5
commit
8c0c9e3d71
|
@ -179,6 +179,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import bus from '@/views/layout/bus'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
|
@ -188,16 +190,16 @@ export default {
|
|||
},
|
||||
buildingData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
default: []
|
||||
},
|
||||
slagTruckData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
default: []
|
||||
},
|
||||
sanitationTruckData: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
@ -241,12 +243,12 @@ export default {
|
|||
name: '洒水',
|
||||
num: 0,
|
||||
unit: '次'
|
||||
},
|
||||
}
|
||||
],
|
||||
buildingSelect: true,
|
||||
slagTruckSelect: true,
|
||||
sanitationTruckSelect: true,
|
||||
tabsActiveName: '建筑工地',
|
||||
tabsActiveName: '建筑工地'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
@ -255,12 +257,13 @@ export default {
|
|||
},
|
||||
sanitationTruckData () {
|
||||
this.summaryData[3].num = this.sanitationTruckData.length
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
close () {
|
||||
bus.$emit('closeCoverage')
|
||||
this.$emit('close')
|
||||
},
|
||||
selectShowOnMap (type, selectStatus) {
|
||||
|
@ -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,
|
||||
|
@ -355,7 +360,8 @@ export default {
|
|||
table td {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.el-table::before {//去掉最下面的那一条线
|
||||
.el-table::before {
|
||||
//去掉最下面的那一条线
|
||||
height: 0px;
|
||||
}
|
||||
.cell {
|
||||
|
@ -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>
|
||||
|
|
|
@ -114,7 +114,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { HieimpMap } from "@/supermap/map-init";
|
||||
import { HieimpMap } from '@/supermap/map-init'
|
||||
import {
|
||||
getRoadData,
|
||||
listBuildingSiteByPoints,
|
||||
|
@ -124,233 +124,243 @@ 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 () {
|
||||
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 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";
|
||||
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);
|
||||
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 });
|
||||
const res = await getRoadData({ dt: this.preTime })
|
||||
// 路网数据
|
||||
this.roadData = res.data.data;
|
||||
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 () {
|
||||
const res = await getRoadDataByTimeRegion({
|
||||
start: this.weekTime,
|
||||
end: this.preTime,
|
||||
});
|
||||
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);
|
||||
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 () {
|
||||
const res = await getRoadDataByTimeRegion({
|
||||
start: this.monthTime,
|
||||
end: this.preTime,
|
||||
});
|
||||
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;
|
||||
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) {
|
||||
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) {
|
||||
|
@ -358,39 +368,39 @@ export default {
|
|||
let newEndTime = ''
|
||||
// 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) {
|
||||
|
@ -398,70 +408,70 @@ export default {
|
|||
let newEndTime = ''
|
||||
// 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) {
|
||||
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) {
|
||||
|
@ -479,220 +489,220 @@ 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);
|
||||
this.hiMapFun.addCircleToMap(latlng, 3800)
|
||||
},
|
||||
removeLayer (data) {
|
||||
this.hiMapFun.removeLayerByLayerName(data.layerName);
|
||||
this.hiMapFun.removeLayerByLayerName(data.layerName)
|
||||
},
|
||||
mapFly (data) {
|
||||
this.showDetailFlag = true;
|
||||
this.myEvnIn = 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) {
|
||||
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);
|
||||
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);
|
||||
data: data
|
||||
}
|
||||
this.hiMapFun.openPopupRoadGovernance(feature)
|
||||
},
|
||||
close () {
|
||||
this.analysisIsShow = false;
|
||||
this.analysisIsShow = false
|
||||
},
|
||||
selectShowOnMap (type, selectStatus) {
|
||||
console.log(type, selectStatus);
|
||||
console.log(type, selectStatus)
|
||||
switch (type) {
|
||||
case "slagTruck":
|
||||
case 'slagTruck':
|
||||
if (selectStatus) {
|
||||
// 暂时没有数据
|
||||
} else {
|
||||
this.hiMapFun.removeLayerByLayerName("slagTruck");
|
||||
this.hiMapFun.removeLayerByLayerName('slagTruck')
|
||||
}
|
||||
break;
|
||||
case "sanitationTruck":
|
||||
break
|
||||
case 'sanitationTruck':
|
||||
if (selectStatus) {
|
||||
const dataEvent = [];
|
||||
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 () {
|
||||
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);
|
||||
this.hiMapFun.removeLayerByLayerName('roadPoint')
|
||||
this.tableData = item.data
|
||||
this.addToMap(item.data)
|
||||
},
|
||||
// 累计事件数量 本年度
|
||||
EventNum () {
|
||||
|
@ -702,15 +712,14 @@ export default {
|
|||
// 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 {
|
||||
|
|
Loading…
Reference in New Issue