From 7982ad84d121235b5838370b47a310101958a511 Mon Sep 17 00:00:00 2001 From: gongjiale <942894820@qq.com> Date: Thu, 24 Nov 2022 15:59:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/pages/area/index.vue | 508 +++++++++++++++++++-------------- 1 file changed, 291 insertions(+), 217 deletions(-) diff --git a/src/views/pages/area/index.vue b/src/views/pages/area/index.vue index 0fe8324..d3cf109 100644 --- a/src/views/pages/area/index.vue +++ b/src/views/pages/area/index.vue @@ -38,7 +38,10 @@
累计事件数量(2022.05.25-至今) -

{{ allListDataNum }}件

+

+ {{ allListDataNum }}件 +

@@ -48,16 +51,23 @@ +      
- +              
-
+           + +       +
+               +
+ -
+
@@ -75,33 +85,45 @@
地图显示
- +
重点区域
-
+
- +
- 人流热力 + + 人流热力 +
- + 全市 本地 外地
- +
@@ -113,16 +135,25 @@ import { searchCamera } from "@/api/videoSurveillance/index"; import bus from "@/views/layout/bus"; import complaintEvent from "./components/ComplaintEvent"; import EarlyWarning from "./components/EarlyWarning"; -import VideoPlay from './components/VideoPlay' +import VideoPlay from "./components/VideoPlay"; import VideoListRight from "./components/VideoListRight"; +import VideoListLeft from "./components/VideoListLeft"; import SiteListMore from "./components/SiteListMore"; import { selectByJdWd } from "@/api/construction/index"; -import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop,createImportantAreaPop } from "@/supermap/createMarkerPopup"; -import { listPassengerFlow, listPassengerFlowByAllNums } from "@/api/civilizedCity.js"; +import { + createSiteListPop, + createCameraDetailsPop, + createEventListDetailsPop, + createImportantAreaPop, +} from "@/supermap/createMarkerPopup"; +import { + listPassengerFlow, + listPassengerFlowByAllNums, +} from "@/api/civilizedCity.js"; import { selectByAreaEvent, selectKeyArea } from "@/api/area"; import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform"; // 时间轴 -import HorizonTimeLine from './components/HorizonTimeLine' +import HorizonTimeLine from "./components/HorizonTimeLine"; export default { data() { return { @@ -131,16 +162,22 @@ export default { state: "", constructionSiteData: [], - changeLayerBtnList: ['AI事件','视频监控', '聚集区'], - changeLayerBtnListArea: ['公园广场','商业街区','景区景点','海水浴场','窗口单位'], - changeLayerBtnListHot: ['全市','本市','外地',], + changeLayerBtnList: ["AI事件", "视频监控", "聚集区"], + changeLayerBtnListArea: [ + "公园广场", + "商业街区", + "景区景点", + "海水浴场", + "窗口单位", + ], + changeLayerBtnListHot: ["全市", "本市", "外地"], changeLayerBtnGroup: [], - thermodynamicPeopleType: '', + thermodynamicPeopleType: "", thermodynamicPeopleAll: [], thermodynamicPeopleLocal: [], thermodynamicPeopleNoLocal: [], - allListDataNum: '', + allListDataNum: "", openVideo: false, channelCode: [], hotDataNum: [], @@ -148,13 +185,14 @@ export default { timelineData: [], // 热力图当日数据 hotDataAll: {}, - keyAreasShow:false, //是否显示重点区域。 + keyAreasShow: false, //是否显示重点区域。 }; }, components: { TiledMap, complaintEvent, VideoListRight, + VideoListLeft, SiteListMore, VideoPlay, HorizonTimeLine, @@ -168,16 +206,16 @@ export default { this.hiMapFun ); - bus.$off('openCurrentVideoSurveillance') - bus.$on('openCurrentVideoSurveillance', (channelCode) => { - this.openVideo = true - this.channelCode.unshift(channelCode) - }) - bus.$off('openCurrentVideoWaterPoint') - bus.$on('openCurrentVideoWaterPoint', channelCode => { - this.openVideo = true - this.channelCode.unshift(channelCode) - }) + bus.$off("openCurrentVideoSurveillance"); + bus.$on("openCurrentVideoSurveillance", (channelCode) => { + this.openVideo = true; + this.channelCode.unshift(channelCode); + }); + bus.$off("openCurrentVideoWaterPoint"); + bus.$on("openCurrentVideoWaterPoint", (channelCode) => { + this.openVideo = true; + this.channelCode.unshift(channelCode); + }); // 根据经纬度查询半径内所有的工地 bus.$off("openCauseAnalysis"); bus.$on("openCauseAnalysis", (row) => { @@ -188,11 +226,13 @@ export default { // this.circle(latLng); this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd }); // this.WithinRadiusSite(latLng); - let dataEvent = [{ + let dataEvent = [ + { latLng: { lat: row.wd, lng: row.jd }, data: row, type: "site", - }] + }, + ]; this.hiMapFun.addPointsToMap( dataEvent, "construction.png", @@ -200,117 +240,117 @@ export default { createSiteListPop ); }); - + bus.$off("roadOnMap"); - bus.$on("roadOnMap",(roadData) => { + bus.$on("roadOnMap", (roadData) => { this.roadOnMap(roadData); - }) + }); bus.$off("removeCameraLayer"); - bus.$on("removeCameraLayer",(type) => { - this.hiMapFun.removeLayerByLayerName(type) - }) - - bus.$off("CameraSingleDataOnMap"); - bus.$on("CameraSingleDataOnMap",(labelName,data) => { - this.addResourceTomap(labelName,data); - }) + bus.$on("removeCameraLayer", (type) => { + this.hiMapFun.removeLayerByLayerName(type); + }); - this.thermodynamic() - this.personToday() - this.getCurrentTime() + bus.$off("CameraSingleDataOnMap"); + bus.$on("CameraSingleDataOnMap", (labelName, data) => { + this.addResourceTomap(labelName, data); + }); + + this.thermodynamic(); + this.personToday(); + this.getCurrentTime(); // 获取当日全部数据 for (let i = 0; i < this.timelineData.length; i++) { - this.todayAllData(this.timelineData[i].timeId) + this.todayAllData(this.timelineData[i].timeId); } - }, + }, methods: { // 获取年月日 - getCurrentTime () { - const yy = new Date().getFullYear() - const m = new Date().getMonth() + 1 - const mm = m < 10 ? '0' + m : m + getCurrentTime() { + const yy = new Date().getFullYear(); + const m = new Date().getMonth() + 1; + const mm = m < 10 ? "0" + m : m; const dd = new Date().getDate() < 10 - ? '0' + new Date().getDate() - : new Date().getDate() + ? "0" + new Date().getDate() + : new Date().getDate(); - this.gettime = yy + mm + dd + this.gettime = yy + mm + dd; // console.log(this.gettime); for (let i = 8; i <= 20; i++) { if (i < 10) { this.timelineData.push({ - timeId: this.gettime + '0' + i + '00', - year: i - }) + timeId: this.gettime + "0" + i + "00", + year: i, + }); } else { this.timelineData.push({ - timeId: this.gettime + i + '00', - year: i - }) + timeId: this.gettime + i + "00", + year: i, + }); } } // console.log(this.timelineData); }, // 全部 - todayAllData (val) { + todayAllData(val) { const params = { - timeId: val - } - this.hotDataAll[val] = [] + timeId: val, + }; + this.hotDataAll[val] = []; listPassengerFlow(params).then((res) => { // console.log(res.data); // this.hotDataAll.params = res.data; - this.hotDataAll[val] = res.data - }) + this.hotDataAll[val] = res.data; + }); // console.log(this.hotDataAll); }, // 热力图点击事件 - timeIdData (val) { + timeIdData(val) { // 清除实时热力图 - this.hiMapFun.removeLayerByLayerName('thermodynamic') - this.hiMapFun.removeLayerByLayerName('types') - const dataA = [] - const dataNumber = [] - const dataMax = [] + this.hiMapFun.removeLayerByLayerName("thermodynamic"); + this.hiMapFun.removeLayerByLayerName("types"); + const dataA = []; + const dataNumber = []; + const dataMax = []; - const listB = this.hotDataAll[val] - console.log(listB) + const listB = this.hotDataAll[val]; + console.log(listB); // 最大值 for (let num = 0; num < listB.length; num++) { - dataNumber.push(listB[num].allNums) + dataNumber.push(listB[num].allNums); } - const max = Math.max.apply(null, dataNumber) - console.log(max) // 16617 + const max = Math.max.apply(null, dataNumber); + console.log(max); // 16617 listB.forEach((item) => { - const arr = [0, 0.0, '', '0', '0.0'] + const arr = [0, 0.0, "", "0", "0.0"]; if (arr.indexOf(item.latitude) == -1) { dataA.push([ Number(item.latitude), Number(item.longitude), - Number((item.allNums / max).toFixed(1)) - ]) + Number((item.allNums / max).toFixed(1)), + ]); } - }) + }); // 筛选 dataA.forEach((item) => { if (item[2] > 0.1) { - dataMax.push(item) + dataMax.push(item); } - }) + }); - this.hiMapFun.thermodynamic(dataMax, 25, 'types') + this.hiMapFun.thermodynamic(dataMax, 25, "types"); // }); }, // 获取热力图的按钮 - hotName (item) { + hotName(item) { // console.log(item); if (this.checkList.indexOf(item) == -1) { - this.checkList.push(item) - this.bottomTabList[3].img = this.bottomTabList[3].imgActive + this.checkList.push(item); + this.bottomTabList[3].img = this.bottomTabList[3].imgActive; } - console.log(this.checkList) + console.log(this.checkList); }, querySearchAsync(queryString, cb) { if (queryString.length > 0) { @@ -320,10 +360,10 @@ export default { } }, // 人口聚集今日事件大于5000 - personToday () { + personToday() { listPassengerFlowByAllNums().then((res) => { - this.hotDataNum = res.data - }) + this.hotDataNum = res.data; + }); }, handleSelect(item) { this.hiMapFun.clearAllLayers(); @@ -428,70 +468,74 @@ export default { if (this.changeLayerBtnGroup.indexOf(item) !== -1) { switch (item) { case "AI事件": - this.hiMapFun.removeLayerByLayerName('EventListDetail') + this.hiMapFun.removeLayerByLayerName("EventListDetail"); selectByAreaEvent().then((res) => { const dataEvent = []; res.data.data.events.forEach((item) => { - dataEvent.push( - { - latLng: { lat: item.latitude, lng: item.longitude }, - data: item, - type: "eventList", - } - ) - }) - this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "poi-event.png", "EventListDetail", createEventListDetailsPop) - }) + dataEvent.push({ + latLng: { lat: item.latitude, lng: item.longitude }, + data: item, + type: "eventList", + }); + }); + this.hiMapFun.addResourceOnMapWithoutSuperMapCluster( + dataEvent, + "poi-event.png", + "EventListDetail", + createEventListDetailsPop + ); + }); break; case "视频监控": - this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData) + this.addResourceTomap( + "全部", + this.$refs.videoListRef.cameraAllData + ); break; case "聚集区": - this.hiMapFun.removeLayerByLayerName('PersonHotDetail') - const hotEventListDetail = [] + this.hiMapFun.removeLayerByLayerName("PersonHotDetail"); + const hotEventListDetail = []; this.hotDataNum.forEach((item) => { hotEventListDetail.push({ latLng: { lat: item.latitude, lng: item.longitude }, data: item, - type: 'personHot' - }) - }) + type: "personHot", + }); + }); this.hiMapFun.addPointsToMap( hotEventListDetail, - 'poi-blue.png', - 'PersonHotDetail' - ) + "poi-blue.png", + "PersonHotDetail" + ); break; case "公园广场": case "商业街区": case "景区景点": case "海水浴场": case "窗口单位": - this.hiMapFun.removeLayerByLayerName(item) - selectKeyArea({ type: item}).then((res) => { - if(item === '商业街区') { + this.hiMapFun.removeLayerByLayerName(item); + selectKeyArea({ type: item }).then((res) => { + if (item === "商业街区") { res.data.data.forEach((newItem) => { - if(newItem.point) { - let arr = JSON.parse(newItem.point) - let areaLatLng = [] + if (newItem.point) { + let arr = JSON.parse(newItem.point); + let areaLatLng = []; arr.forEach((pointItem) => { let lonLat = gcjLL2wgs84LL(pointItem[0], pointItem[1]); - areaLatLng.push([lonLat[1],lonLat[0]]) - }) - this.hiMapFun.addAreaToMap(areaLatLng) + areaLatLng.push([lonLat[1], lonLat[0]]); + }); + this.hiMapFun.addAreaToMap(areaLatLng); } - }) + }); } else { const dataEvent = []; res.data.data.forEach((item) => { - dataEvent.push( - { - latLng: { lat: item.latitude, lng: item.longitude }, - data: item, - type: "site", - } - ) - }) + dataEvent.push({ + latLng: { lat: item.latitude, lng: item.longitude }, + data: item, + type: "site", + }); + }); this.hiMapFun.addPointsToMap( dataEvent, "poi-red.png", @@ -499,7 +543,7 @@ export default { createImportantAreaPop ); } - }) + }); break; default: break; @@ -511,19 +555,19 @@ export default { case "景区景点": case "海水浴场": case "窗口单位": - if(item === '商业街区') { - this.hiMapFun.removerPolygon() + if (item === "商业街区") { + this.hiMapFun.removerPolygon(); } - this.hiMapFun.removeLayerByLayerName(item) + this.hiMapFun.removeLayerByLayerName(item); break; case "AI事件": - this.hiMapFun.removeLayerByLayerName('EventListDetail') + this.hiMapFun.removeLayerByLayerName("EventListDetail"); break; case "视频监控": - this.hiMapFun.removeLayerByLayerName('全部') + this.hiMapFun.removeLayerByLayerName("全部"); break; case "聚集区": - this.hiMapFun.removeLayerByLayerName('PersonHotDetail') + this.hiMapFun.removeLayerByLayerName("PersonHotDetail"); break; default: break; @@ -531,20 +575,24 @@ export default { } }, - addResourceTomap(type,data) { + addResourceTomap(type, data) { const dataEvent = []; data.forEach((item) => { - const arr = [0,0.0,'','0','0.0'] - if(arr.indexOf(item.gpsX) == -1){ + 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", type, createCameraDetailsPop) + this.hiMapFun.addResourceOnMapWithoutSuperMapCluster( + dataEvent, + "videoSurveillance.png", + type, + createCameraDetailsPop + ); }, thermodynamic() { @@ -552,97 +600,114 @@ export default { let dataNumberLocal = []; let dataNumberNoLocal = []; listPassengerFlow().then((res) => { - const data = res.data; - // 最大值 - for (let num = 0; num < data.length; num++) { - dataNumber.push(data[num].allNums); - dataNumberLocal.push(data[num].localNums); - dataNumberNoLocal.push(data[num].nonlocalNums); - } - let max = Math.max.apply(null, dataNumber); - let maxLocal = Math.max.apply(null, dataNumberLocal); - let maxNoLocal = Math.max.apply(null, dataNumberNoLocal); - data.forEach((item) => { - const arr = [0, 0.0, "", "0", "0.0"]; - if (arr.indexOf(item.latitude) == -1 && arr.indexOf(item.longitude) == -1) { - //全部 - if(item.allNums !== '0'){ - let allNums = Number((item.allNums / max).toFixed(1)) - if(allNums > 0.1){ - this.thermodynamicPeopleAll.push([ - Number(item.latitude), - Number(item.longitude), - allNums - ]); - } - } - //本地 - if(item.localNums !== '0'){ - let localNums = Number((item.localNums / maxLocal).toFixed(1)) - if(localNums > 0.1){ - this.thermodynamicPeopleLocal.push([ - Number(item.latitude), - Number(item.longitude), - localNums - ]); - } - } - //外地 - if(item.nonlocalNums !== '0'){ - let nonlocalNums = Number((item.nonlocalNums / maxNoLocal).toFixed(1)) - if(nonlocalNums > 0.1){ - this.thermodynamicPeopleNoLocal.push([ - Number(item.latitude), - Number(item.longitude), - nonlocalNums - ]); - } + const data = res.data; + // 最大值 + for (let num = 0; num < data.length; num++) { + dataNumber.push(data[num].allNums); + dataNumberLocal.push(data[num].localNums); + dataNumberNoLocal.push(data[num].nonlocalNums); + } + let max = Math.max.apply(null, dataNumber); + let maxLocal = Math.max.apply(null, dataNumberLocal); + let maxNoLocal = Math.max.apply(null, dataNumberNoLocal); + data.forEach((item) => { + const arr = [0, 0.0, "", "0", "0.0"]; + if ( + arr.indexOf(item.latitude) == -1 && + arr.indexOf(item.longitude) == -1 + ) { + //全部 + if (item.allNums !== "0") { + let allNums = Number((item.allNums / max).toFixed(1)); + if (allNums > 0.1) { + this.thermodynamicPeopleAll.push([ + Number(item.latitude), + Number(item.longitude), + allNums, + ]); } } - }); + //本地 + if (item.localNums !== "0") { + let localNums = Number((item.localNums / maxLocal).toFixed(1)); + if (localNums > 0.1) { + this.thermodynamicPeopleLocal.push([ + Number(item.latitude), + Number(item.longitude), + localNums, + ]); + } + } + //外地 + if (item.nonlocalNums !== "0") { + let nonlocalNums = Number( + (item.nonlocalNums / maxNoLocal).toFixed(1) + ); + if (nonlocalNums > 0.1) { + this.thermodynamicPeopleNoLocal.push([ + Number(item.latitude), + Number(item.longitude), + nonlocalNums, + ]); + } + } + } }); + }); }, // 清除热力图 clearThermodynamic() { this.hiMapFun.removeLayerByLayerName("types"); this.hiMapFun.removeLayerByLayerName("thermodynamic"); - this.thermodynamicPeopleType = '' + this.thermodynamicPeopleType = ""; }, changeThermodynamicPeopleType(value) { this.hiMapFun.removeLayerByLayerName("types"); switch (value) { - case 'all': + case "all": this.hiMapFun.removeLayerByLayerName("thermodynamic"); - this.hiMapFun.thermodynamic(this.thermodynamicPeopleAll, 25, "thermodynamic"); + this.hiMapFun.thermodynamic( + this.thermodynamicPeopleAll, + 25, + "thermodynamic" + ); break; - case 'local': + case "local": this.hiMapFun.removeLayerByLayerName("thermodynamic"); - this.hiMapFun.thermodynamic(this.thermodynamicPeopleLocal, 25, "thermodynamic"); + this.hiMapFun.thermodynamic( + this.thermodynamicPeopleLocal, + 25, + "thermodynamic" + ); break; - case 'noLocal': + case "noLocal": this.hiMapFun.removeLayerByLayerName("thermodynamic"); - this.hiMapFun.thermodynamic(this.thermodynamicPeopleNoLocal, 25, "thermodynamic"); + this.hiMapFun.thermodynamic( + this.thermodynamicPeopleNoLocal, + 25, + "thermodynamic" + ); break; } }, - removeRoadCauseAnalysis () { - this.hiMapFun.removerPolygon() - this.hiMapFun.removeLayerByLayerName('roadPoint') - this.hiMapFun.removeLayerByLayerName('EventListDetail') - this.hiMapFun.removeLayerByLayerName('PersonHotDetail') + removeRoadCauseAnalysis() { + this.hiMapFun.removerPolygon(); + this.hiMapFun.removeLayerByLayerName("roadPoint"); + this.hiMapFun.removeLayerByLayerName("EventListDetail"); + this.hiMapFun.removeLayerByLayerName("PersonHotDetail"); this.hiMapFun.removeLayerByLayerName("thermodynamic"); this.hiMapFun.removeLayerByLayerName("types"); - this.hiMapFun.removeLayerByLayerName('全部') - this.hiMapFun.removeLayerByLayerName('公园广场') - this.hiMapFun.removeLayerByLayerName('商业街区') - this.hiMapFun.removeLayerByLayerName('景区景点') - this.hiMapFun.removeLayerByLayerName('海水浴场') - this.hiMapFun.removeLayerByLayerName('窗口单位') + this.hiMapFun.removeLayerByLayerName("全部"); + this.hiMapFun.removeLayerByLayerName("公园广场"); + this.hiMapFun.removeLayerByLayerName("商业街区"); + this.hiMapFun.removeLayerByLayerName("景区景点"); + this.hiMapFun.removeLayerByLayerName("海水浴场"); + this.hiMapFun.removeLayerByLayerName("窗口单位"); }, //点击是否显示重点区域。 - handleKeyArea(){ - this.keyAreasShow=!this.keyAreasShow; - } + handleKeyArea() { + this.keyAreasShow = !this.keyAreasShow; + }, }, beforeDestroy() {}, }; @@ -749,14 +814,23 @@ export default { background: rgba($color: #05213b, $alpha: .85) } .complaintContent1 { - position: absolute; + position: absolute; z-index: 1000; right: 10px; top: 90px; - height:980px; + height:660px; width: 478px; background: rgba($color: #05213b, $alpha: .85) } + .mainVideoList{ + position: absolute; + z-index: 10; + right: 10px; + top: 760px; + width: 478px; + height:200px; + background: rgba($color: #05213b, $alpha: .85); +} .eventNum { width: 245px; height: 92px;