update
This commit is contained in:
parent
2de58910b3
commit
b47614a94f
|
@ -1989,6 +1989,15 @@ export function MapFun(mapObj) {
|
|||
polyline.addTo(map)
|
||||
polylineArr.push(polyline)
|
||||
}
|
||||
|
||||
const _addAreaToMap = function (latLng) {
|
||||
// console.log(latLng)
|
||||
// debugger
|
||||
const polygon = L.polygon(latLng, { color: 'red' })
|
||||
// map.fitBounds(polyline.getBounds())
|
||||
polygon.addTo(map)
|
||||
PolygonArr.push(polygon)
|
||||
}
|
||||
return {
|
||||
// 按图层配置名称删除
|
||||
removeLayerByLayerName: _removeLayerByLayerName,
|
||||
|
@ -2063,5 +2072,6 @@ export function MapFun(mapObj) {
|
|||
thermodynamic: _thermodynamic,
|
||||
addPathToMap: _addPathToMap,
|
||||
addPointTestOnMap: _addPointTestOnMap,
|
||||
addAreaToMap:_addAreaToMap,
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<div class="toady-list-content">
|
||||
<div class="toady-list-rotate"></div>
|
||||
<div class="toady-list-icon"></div>
|
||||
<div class="toady-list-num">今日事件<span> 36 </span>件</div>
|
||||
<div class="toady-list-num">今日事件<span> {{todayListNum}} </span>件</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-box">
|
||||
|
@ -60,7 +60,7 @@
|
|||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
|
||||
<div class="event-details" v-for="item in eventListData" :key="item.index">
|
||||
<div class="event-details" v-for="item in eventListData" :key="item.index" @click="openDetailsDialog(item)">
|
||||
<div class="event-details-title">
|
||||
<span>{{item.eventNewName||''}}</span>
|
||||
<span>{{item.captureTime||''}}</span>
|
||||
|
@ -102,6 +102,7 @@ import bus from "@/views/layout/bus";
|
|||
import {
|
||||
selectEvent,
|
||||
selectByName,
|
||||
selectByTime,
|
||||
} from "@/api/civilizedCity";
|
||||
export default {
|
||||
data() {
|
||||
|
@ -123,6 +124,8 @@ export default {
|
|||
roadData:[],
|
||||
listTypeSelect: "全部",
|
||||
EventBtns: ["全部","占道经营","渣土车发现","违章停车","环境卫生","沿街晾晒","渣土车未密闭","道路积水事件",],
|
||||
|
||||
todayListNum:0,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
@ -150,6 +153,12 @@ export default {
|
|||
this.eventListData = res.data.data.events
|
||||
this.pageCount = res.data.data.page
|
||||
});
|
||||
|
||||
selectByTime().then((res)=>{
|
||||
if(res.data.data){
|
||||
this.todayListNum = res.data.data.length
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
tabHandleClick(item) {
|
||||
|
@ -213,6 +222,24 @@ export default {
|
|||
})
|
||||
}
|
||||
},
|
||||
|
||||
openDetailsDialog(data) {
|
||||
this.$parent.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||
const EventListDetail = [
|
||||
{
|
||||
latLng: { lat: data.latitude, lng: data.longitude },
|
||||
data: data,
|
||||
type: "eventList",
|
||||
},
|
||||
];
|
||||
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.latitude, lng: data.longitude });
|
||||
this.$parent.hiMapFun.openPopupVideoSurveillance(EventListDetail[0]);
|
||||
this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
|
||||
EventListDetail,
|
||||
"poi-event.png",
|
||||
"EventListDetail"
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -415,7 +442,7 @@ export default {
|
|||
// margin-top: 12px;
|
||||
// margin-top: 30px;
|
||||
width: 100%;
|
||||
height: 625px;
|
||||
height: 670px;
|
||||
position: relative;
|
||||
|
||||
.event-details {
|
||||
|
@ -423,7 +450,7 @@ export default {
|
|||
margin-top: 16px;
|
||||
// margin-top: 18px;
|
||||
width: 100%;
|
||||
max-height: 130px;
|
||||
height: 140px;
|
||||
padding-right: 8px;
|
||||
background: linear-gradient(90deg, #173759 0, #133150 100%);
|
||||
.event-details-title {
|
||||
|
|
|
@ -55,6 +55,8 @@ import {
|
|||
selectKeyAreaList,
|
||||
selectByAreaName,
|
||||
} from "@/api/area";
|
||||
import { gcjLL2wgs84LL } from "@/utils/coordinateSystemTransform";
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
@ -88,7 +90,7 @@ export default {
|
|||
label: '窗口单位'
|
||||
},
|
||||
],
|
||||
selectValue: '公园广场'
|
||||
selectValue: '公园广场',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
@ -96,10 +98,6 @@ export default {
|
|||
console.log(res.data.data)
|
||||
this.siteData = res.data.data
|
||||
})
|
||||
selectByAreaName({areaName:"李村商圈"}).then((res) => {
|
||||
console.log(res.data.data)
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
@ -125,7 +123,18 @@ export default {
|
|||
},
|
||||
// 行点击
|
||||
analyse(row) {
|
||||
bus.$emit("openCauseAnalysis", row);
|
||||
// bus.$emit("openCauseAnalysis", row);
|
||||
this.$parent.hiMapFun.removerPolygon()
|
||||
selectByAreaName({areaName:row.areaName}).then((res) => {
|
||||
if(res.data.data){
|
||||
let areaLatLng = []
|
||||
res.data.data.forEach((item) => {
|
||||
let lonLat = gcjLL2wgs84LL(item.longitude, item.latitude);
|
||||
areaLatLng.push([lonLat[1],lonLat[0]])
|
||||
})
|
||||
this.$parent.hiMapFun.addAreaToMap(areaLatLng)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 关闭基本信息窗口
|
||||
informationClose() {
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="tabsActiveName == '视频标签'" class="label-content">
|
||||
<div v-show="tabsActiveName == '视频标签'" class="label-content">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
prefix-icon="el-icon-search"
|
||||
|
@ -34,7 +34,7 @@
|
|||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<div v-if="tabsActiveName == '视频列表'" class="label-content">
|
||||
<div v-show="tabsActiveName == '视频列表'" class="label-content">
|
||||
<el-input
|
||||
placeholder="请输入关键词"
|
||||
suffix-icon="el-icon-search"
|
||||
|
@ -224,20 +224,20 @@ export default {
|
|||
},
|
||||
treeCameraClick(data) {
|
||||
console.log(data)
|
||||
// if(data.channelCode){
|
||||
// const cameraTree = [{
|
||||
// latLng: { lat: data.gpsY, lng: data.gpsX },
|
||||
// data: data,
|
||||
// type:'cameraTree'
|
||||
// }]
|
||||
// this.hiMapFun.removeLayerByLayerName("cameraTree");
|
||||
// this.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
|
||||
// const arr = [0,0.0,'','0','0.0']
|
||||
// if(arr.indexOf(data.gpsX) == -1){
|
||||
// this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
|
||||
// this.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
|
||||
// }
|
||||
// }
|
||||
if(data.channelCode){
|
||||
const cameraTree = [{
|
||||
latLng: { lat: data.gpsY, lng: data.gpsX },
|
||||
data: data,
|
||||
type:'cameraTree'
|
||||
}]
|
||||
this.$parent.hiMapFun.removeLayerByLayerName("cameraTree");
|
||||
this.$parent.hiMapFun.openPopupVideoSurveillance(cameraTree[0])
|
||||
const arr = [0,0.0,'','0','0.0']
|
||||
if(arr.indexOf(data.gpsX) == -1){
|
||||
this.$parent.hiMapFun.addResourceOnMapWithoutSuperMapCluster(cameraTree,"poi-red.png", "cameraTree");
|
||||
this.$parent.hiMap.mapObj.map.flyTo({ lat: data.gpsY, lng: data.gpsX });
|
||||
}
|
||||
}
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (value == "2") return true;
|
||||
|
@ -346,6 +346,31 @@ export default {
|
|||
background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
width: 366px;
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background-color: #10335e;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #446dac !important;
|
||||
}
|
||||
|
||||
.el-tree-node__content:hover {
|
||||
background: rgba(27,255,255,.2);
|
||||
}
|
||||
.el-tree-node:focus > .el-tree-node__content {
|
||||
background-color: rgba(27,255,255,.2);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -71,9 +71,14 @@
|
|||
</div>
|
||||
<div class="title">人流热力</div>
|
||||
<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-group>
|
||||
</el-checkbox-group> -->
|
||||
<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>
|
||||
</div>
|
||||
|
@ -89,8 +94,8 @@ import complaintEvent from "./components/ComplaintEvent";
|
|||
import VideoList from "./components/VideoList";
|
||||
import SiteList from "./components/SiteList";
|
||||
import { selectByJdWd } from "@/api/construction/index";
|
||||
import { createSiteListPop } from "@/supermap/createMarkerPopup";
|
||||
import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
|
||||
import { createSiteListPop,createCameraDetailsPop,createEventListDetailsPop } from "@/supermap/createMarkerPopup";
|
||||
import { listPassengerFlow, selectByTime, } from "@/api/civilizedCity.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
@ -100,11 +105,17 @@ export default {
|
|||
|
||||
state: "",
|
||||
constructionSiteData: [],
|
||||
changeLayerBtnList: ['AI事件','视频监控','工地','道路'],
|
||||
changeLayerBtnList: ['AI事件','视频监控'],
|
||||
changeLayerBtnListArea: ['公园广场','商业街区','景区景点','海水浴场','窗口单位'],
|
||||
changeLayerBtnListHot: ['全市','本市','外地',],
|
||||
changeLayerBtnGroup: [],
|
||||
|
||||
thermodynamicPeopleType: '',
|
||||
thermodynamicPeopleAll: [],
|
||||
thermodynamicPeopleLocal: [],
|
||||
thermodynamicPeopleNoLocal: [],
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
@ -160,6 +171,14 @@ export default {
|
|||
bus.$on("CameraSingleDataOnMap",(labelName,data) => {
|
||||
this.addResourceTomap(labelName,data);
|
||||
})
|
||||
|
||||
this.thermodynamic()
|
||||
|
||||
selectByTime().then((res)=>{
|
||||
if(res.data.data){
|
||||
this.todayListNum = res.data.data.length
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
querySearchAsync(queryString, cb) {
|
||||
|
@ -268,12 +287,23 @@ export default {
|
|||
this.roadOnMap(this.$refs.complaintEventRef.roadData);
|
||||
break;
|
||||
case "AI事件":
|
||||
this.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||
selectByTime().then((res) => {
|
||||
const dataEvent = [];
|
||||
res.data.data.forEach((item) => {
|
||||
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)
|
||||
break;
|
||||
case "工地":
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
@ -284,12 +314,10 @@ export default {
|
|||
this.hiMapFun.removerPolyline();
|
||||
break;
|
||||
case "AI事件":
|
||||
this.hiMapFun.removeLayerByLayerName('EventListDetail')
|
||||
break;
|
||||
case "视频监控":
|
||||
this.hiMapFun.removeLayerByLayerName('全部')
|
||||
break;
|
||||
case "工地":
|
||||
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
@ -312,6 +340,80 @@ export default {
|
|||
});
|
||||
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
|
||||
},
|
||||
|
||||
thermodynamic() {
|
||||
let dataNumber = [];
|
||||
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
|
||||
]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
changeThermodynamicPeopleType(value) {
|
||||
switch (value) {
|
||||
case 'all':
|
||||
this.hiMapFun.removeLayerByLayerName("thermodynamic");
|
||||
this.hiMapFun.thermodynamic(this.thermodynamicPeopleAll, 25, "thermodynamic");
|
||||
break;
|
||||
case 'local':
|
||||
this.hiMapFun.removeLayerByLayerName("thermodynamic");
|
||||
this.hiMapFun.thermodynamic(this.thermodynamicPeopleLocal, 25, "thermodynamic");
|
||||
break;
|
||||
case 'noLocal':
|
||||
this.hiMapFun.removeLayerByLayerName("thermodynamic");
|
||||
this.hiMapFun.thermodynamic(this.thermodynamicPeopleNoLocal, 25, "thermodynamic");
|
||||
break;
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy() {},
|
||||
};
|
||||
|
@ -412,7 +514,7 @@ export default {
|
|||
z-index: 1000;
|
||||
left: 10px;
|
||||
top: 90px;
|
||||
height:908px;
|
||||
height:980px;
|
||||
width: 478px;
|
||||
background: rgba($color: #05213b, $alpha: .85)
|
||||
}
|
||||
|
@ -517,6 +619,48 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-radio-group {
|
||||
background: transparent;
|
||||
.el-radio__inner {
|
||||
border-radius: unset;
|
||||
border: 1px solid #1ffefd;
|
||||
background: transparent;
|
||||
&::after {
|
||||
border-radius: unset;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.el-radio__label {
|
||||
color: #fff;
|
||||
}
|
||||
.el-radio.is-checked {
|
||||
.el-radio__label {
|
||||
color: #1ffefd;
|
||||
}
|
||||
|
||||
.el-radio__inner {
|
||||
border-radius: unset;
|
||||
&::after {
|
||||
content: "";
|
||||
box-sizing: content-box;
|
||||
border-radius: unset;
|
||||
position: absolute;
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
left: 4px;
|
||||
top: 1px;
|
||||
border: 1px solid #1ffefd;
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
transform-origin: center;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
background: transparent;
|
||||
transition: transform .15s ease-in .05s,-webkit-transform .15s ease-in .05s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue