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