wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

提交

This commit is contained in:
gongjiale 2022-11-24 15:59:20 +08:00
parent a43f1133de
commit 7982ad84d1
1 changed files with 291 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

420
src/views/pages/area/index.vue
View File

@ -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">
<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: [],
@ -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",
@ -202,115 +242,115 @@ export default {
});
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.$on("removeCameraLayer", (type) => {
this.hiMapFun.removeLayerByLayerName(type);
});
bus.$off("CameraSingleDataOnMap");
bus.$on("CameraSingleDataOnMap",(labelName,data) => {
this.addResourceTomap(labelName,data);
})
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
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(
{
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)
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(
{
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() {
@ -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(allNums > 0.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(localNums > 0.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(nonlocalNums > 0.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')
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() {},
};
@ -753,10 +818,19 @@ 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;
height: 92px;