|
|
|
@ -38,7 +38,10 @@
|
|
|
|
|
|
|
|
|
|
<div class="eventNum">
|
|
|
|
|
累计事件数量(2022.05.25-至今)
|
|
|
|
|
<p><span>{{ allListDataNum }}</span>件</p>
|
|
|
|
|
<p>
|
|
|
|
|
<span>{{ allListDataNum }}</span
|
|
|
|
|
>件
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 事件感知 -->
|
|
|
|
@ -48,16 +51,23 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 视频标签、列表 -->
|
|
|
|
|
|
|
|
|
|
<div class="complaintContent1">
|
|
|
|
|
<video-list-right ref="videoListRef"></video-list-right>
|
|
|
|
|
<video-list-right></video-list-right>
|
|
|
|
|
</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>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<!-- 热力图图例 -->
|
|
|
|
|
<div class="legend"></div>
|
|
|
|
|
|
|
|
|
@ -75,33 +85,45 @@
|
|
|
|
|
<div class="title">地图显示</div>
|
|
|
|
|
<div class="change-btn-box">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="title">重点区域</div>
|
|
|
|
|
<div class="change-btn-box" style="width: 230px">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="title">
|
|
|
|
|
<span class="special-title" @click="clearThermodynamic"> 人流热力 </span>
|
|
|
|
|
<span class="special-title" @click="clearThermodynamic">
|
|
|
|
|
人流热力
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="change-btn-box">
|
|
|
|
|
<!-- <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-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="local">本地</el-radio>
|
|
|
|
|
<el-radio label="noLocal">外地</el-radio>
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<video-play
|
|
|
|
|
v-if="openVideo"
|
|
|
|
|
:channel-id="channelCode"
|
|
|
|
|
></video-play>
|
|
|
|
|
<video-play v-if="openVideo" :channel-id="channelCode"></video-play>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
@ -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: [],
|
|
|
|
@ -155,6 +192,7 @@ export default {
|
|
|
|
|
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",
|
|
|
|
@ -204,51 +244,51 @@ export default {
|
|
|
|
|
bus.$off("roadOnMap");
|
|
|
|
|
bus.$on("roadOnMap", (roadData) => {
|
|
|
|
|
this.roadOnMap(roadData);
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
bus.$off("removeCameraLayer");
|
|
|
|
|
bus.$on("removeCameraLayer", (type) => {
|
|
|
|
|
this.hiMapFun.removeLayerByLayerName(type)
|
|
|
|
|
})
|
|
|
|
|
this.hiMapFun.removeLayerByLayerName(type);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
bus.$off("CameraSingleDataOnMap");
|
|
|
|
|
bus.$on("CameraSingleDataOnMap", (labelName, data) => {
|
|
|
|
|
this.addResourceTomap(labelName, data);
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.thermodynamic()
|
|
|
|
|
this.personToday()
|
|
|
|
|
this.getCurrentTime()
|
|
|
|
|
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
|
|
|
|
|
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);
|
|
|
|
@ -256,61 +296,61 @@ export default {
|
|
|
|
|
// 全部
|
|
|
|
|
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) {
|
|
|
|
|
// 清除实时热力图
|
|
|
|
|
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) {
|
|
|
|
|
// 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) {
|
|
|
|
@ -322,8 +362,8 @@ export default {
|
|
|
|
|
// 人口聚集今日事件大于5000
|
|
|
|
|
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(
|
|
|
|
|
{
|
|
|
|
|
dataEvent.push({
|
|
|
|
|
latLng: { lat: item.latitude, lng: item.longitude },
|
|
|
|
|
data: item,
|
|
|
|
|
type: "eventList",
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "poi-event.png", "EventListDetail", createEventListDetailsPop)
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
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)
|
|
|
|
|
this.hiMapFun.removeLayerByLayerName(item);
|
|
|
|
|
selectKeyArea({ type: item }).then((res) => {
|
|
|
|
|
if(item === '商业街区') {
|
|
|
|
|
if (item === "商业街区") {
|
|
|
|
|
res.data.data.forEach((newItem) => {
|
|
|
|
|
if (newItem.point) {
|
|
|
|
|
let arr = JSON.parse(newItem.point)
|
|
|
|
|
let areaLatLng = []
|
|
|
|
|
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(
|
|
|
|
|
{
|
|
|
|
|
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;
|
|
|
|
@ -534,17 +578,21 @@ export default {
|
|
|
|
|
addResourceTomap(type, data) {
|
|
|
|
|
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.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() {
|
|
|
|
@ -564,37 +612,42 @@ export default {
|
|
|
|
|
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 (
|
|
|
|
|
arr.indexOf(item.latitude) == -1 &&
|
|
|
|
|
arr.indexOf(item.longitude) == -1
|
|
|
|
|
) {
|
|
|
|
|
//全部
|
|
|
|
|
if(item.allNums !== '0'){
|
|
|
|
|
let allNums = Number((item.allNums / max).toFixed(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
|
|
|
|
|
allNums,
|
|
|
|
|
]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//本地
|
|
|
|
|
if(item.localNums !== '0'){
|
|
|
|
|
let localNums = Number((item.localNums / maxLocal).toFixed(1))
|
|
|
|
|
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
|
|
|
|
|
localNums,
|
|
|
|
|
]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//外地
|
|
|
|
|
if(item.nonlocalNums !== '0'){
|
|
|
|
|
let nonlocalNums = Number((item.nonlocalNums / maxNoLocal).toFixed(1))
|
|
|
|
|
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
|
|
|
|
|
nonlocalNums,
|
|
|
|
|
]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -606,43 +659,55 @@ export default {
|
|
|
|
|
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')
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {},
|
|
|
|
|
};
|
|
|
|
@ -753,9 +818,18 @@ export default {
|
|
|
|
|
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;
|
|
|
|
|