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;