重点区域精细化管理 新问题修改。
This commit is contained in:
parent
63635ad736
commit
c850ba6e9c
|
@ -156,7 +156,7 @@ export function MapFun(mapObj) {
|
||||||
}
|
}
|
||||||
} else if (feature.type == 'eventList') {
|
} else if (feature.type == 'eventList') {
|
||||||
const elementHtml = createEventListDetailsPopNew(feature)
|
const elementHtml = createEventListDetailsPopNew(feature)
|
||||||
L.popup({ className: 'Event-List-Details-pop', offset: [168, 200] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
L.popup({ className: 'Event-List-Details-pop', offset: [0, 200] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||||
} else if (feature.type == 'eventTwoList') {
|
} else if (feature.type == 'eventTwoList') {
|
||||||
const elementHtml = createImportantAreaPopNew(feature)
|
const elementHtml = createImportantAreaPopNew(feature)
|
||||||
L.popup({ className: 'Event-List-Details-pop', offset: [168, 200] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
L.popup({ className: 'Event-List-Details-pop', offset: [168, 200] }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="title">重点区域列表</div>
|
<div class="title">重点区域列表</div>
|
||||||
|
<div class="title-close" @click="handleClose"><i class="el-icon-close"></i></div>
|
||||||
<!-- 工地列表 -->
|
<!-- 工地列表 -->
|
||||||
<div class="eventData">
|
<div class="eventData">
|
||||||
<div style="display: flex;justify-content: space-between">
|
<div style="display: flex;">
|
||||||
<el-input
|
<el-input
|
||||||
placeholder="请输入区域名称"
|
placeholder="请输入区域名称"
|
||||||
prefix-icon="el-icon-search"
|
prefix-icon="el-icon-search"
|
||||||
|
@ -11,14 +12,14 @@
|
||||||
v-model="searchValue"
|
v-model="searchValue"
|
||||||
>
|
>
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-select v-model="selectAreaValue" placeholder="全部" @change="fliterSiteByArea">
|
<!-- <el-select v-model="selectAreaValue" placeholder="全部" @change="fliterSiteByArea">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in areaOptions"
|
v-for="item in areaOptions"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value">
|
:value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select> -->
|
||||||
<el-select v-model="selectValue" placeholder="全部" @change="fliterSiteByArea">
|
<el-select v-model="selectValue" placeholder="全部" @change="fliterSiteByArea">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
|
@ -163,6 +164,10 @@ import { createImportantAreaPopNew } from '../../../../supermap/createMarkerPopu
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 关闭重点区域。
|
||||||
|
handleClose(){
|
||||||
|
this.$emit("closeSiteListMore");
|
||||||
|
},
|
||||||
searchSite() {
|
searchSite() {
|
||||||
if (!this.searchValue && this.selectValue !== '全部') {
|
if (!this.searchValue && this.selectValue !== '全部') {
|
||||||
selectKeyArea({ type: this.selectValue }).then((res) => {
|
selectKeyArea({ type: this.selectValue }).then((res) => {
|
||||||
|
@ -224,6 +229,9 @@ import { createImportantAreaPopNew } from '../../../../supermap/createMarkerPopu
|
||||||
let lonLat = gcjLL2wgs84LL(item[0], item[1]);
|
let lonLat = gcjLL2wgs84LL(item[0], item[1]);
|
||||||
areaLatLng.push([lonLat[1],lonLat[0]])
|
areaLatLng.push([lonLat[1],lonLat[0]])
|
||||||
})
|
})
|
||||||
|
//跳转到响应的位置。
|
||||||
|
let lonLat=arr[0];
|
||||||
|
this.$parent.hiMap.mapObj.map.flyTo({ lat: lonLat[1], lng:lonLat[0] },14);
|
||||||
this.$parent.hiMapFun.addAreaToMap(areaLatLng)
|
this.$parent.hiMapFun.addAreaToMap(areaLatLng)
|
||||||
}
|
}
|
||||||
// else {
|
// else {
|
||||||
|
@ -255,15 +263,26 @@ import { createImportantAreaPopNew } from '../../../../supermap/createMarkerPopu
|
||||||
background: url(../../../../assets/construction/listTopBg.png) no-repeat,
|
background: url(../../../../assets/construction/listTopBg.png) no-repeat,
|
||||||
url(../../../../assets/construction/siteTag.png) no-repeat 507px 17px;
|
url(../../../../assets/construction/siteTag.png) no-repeat 507px 17px;
|
||||||
padding: 30px 0 18px 14px;
|
padding: 30px 0 18px 14px;
|
||||||
|
position: relative;
|
||||||
.title {
|
.title {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
.title-close{
|
||||||
|
position: absolute;
|
||||||
|
right:10px;
|
||||||
|
top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
.el-icon-close:before {
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
::v-deep .eventData {
|
::v-deep .eventData {
|
||||||
width: 544px;
|
width: 544px;
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
.el-input {
|
.el-input {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
.el-input__inner {
|
.el-input__inner {
|
||||||
border: 1px solid rgba(31,254,253,.9);
|
border: 1px solid rgba(31,254,253,.9);
|
||||||
|
|
|
@ -106,6 +106,7 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import bus from "@/views/layout/bus";
|
import bus from "@/views/layout/bus";
|
||||||
|
import moment from 'moment'
|
||||||
|
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
export default {
|
export default {
|
||||||
|
@ -135,20 +136,39 @@ export default {
|
||||||
advice: "",
|
advice: "",
|
||||||
area: "台东商圈",
|
area: "台东商圈",
|
||||||
},
|
},
|
||||||
|
lastWeek:[], //最近一周。
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.setDataRange();
|
||||||
//获取高发区域
|
//获取高发区域
|
||||||
this.getTop5Area();
|
this.getTop5Area();
|
||||||
//获取高发事件
|
//获取高发事件
|
||||||
this.getTop5EventCharts();
|
this.getTop5EventCharts();
|
||||||
//获取相关性分析
|
//获取相关性分析
|
||||||
this.getRelevanceCharts();
|
// this.getRelevanceCharts();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 设置daterange 日期
|
||||||
|
// daterange: ['2022-11-18','2022-11-25'],
|
||||||
|
setDataRange(){
|
||||||
|
this.daterange=[];
|
||||||
|
let nowData=moment().format("YYYY-MM-DD");
|
||||||
|
let sevenData=moment().subtract(6, 'days').format('YYYY-MM-DD');
|
||||||
|
this.daterange.push(sevenData);
|
||||||
|
this.daterange.push(nowData);
|
||||||
|
for (let i=6; i>=0; i--){
|
||||||
|
let newData=moment().subtract(i, 'days').format('MM-DD');
|
||||||
|
this.lastWeek.push(newData);
|
||||||
|
// console.log("🚀 ~ file: VideoListRight.vue:168 ~ setDataRange ~ this.lastWeek", this.lastWeek)
|
||||||
|
}
|
||||||
|
//获取相关性分析
|
||||||
|
this.getRelevanceCharts(this.lastWeek);
|
||||||
|
},
|
||||||
//选择选中的高发区域
|
//选择选中的高发区域
|
||||||
chooseSelectArea(item) {
|
chooseSelectArea(item) {
|
||||||
this.selectArea = item.areaId;
|
this.selectArea = item.areaId;
|
||||||
|
@ -287,7 +307,7 @@ export default {
|
||||||
eventChart.setOption(option);
|
eventChart.setOption(option);
|
||||||
},
|
},
|
||||||
//获取相关性分析
|
//获取相关性分析
|
||||||
getRelevanceCharts() {
|
getRelevanceCharts(date) {
|
||||||
let eventChart = echarts.init(document.getElementById("relevance-chart"));
|
let eventChart = echarts.init(document.getElementById("relevance-chart"));
|
||||||
let option = {
|
let option = {
|
||||||
backgroundColor: "rgba(32, 33, 36,.7)",
|
backgroundColor: "rgba(32, 33, 36,.7)",
|
||||||
|
@ -317,7 +337,7 @@ export default {
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
data: ["11/18", "11/19", "11/20", "11/21", "11/22", "11/23", "11/24"],
|
data: date,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: false, // 不显示坐标轴线
|
show: false, // 不显示坐标轴线
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
|
|
|
@ -66,7 +66,7 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 工地列表 -->
|
<!-- 工地列表 -->
|
||||||
<div class="siteList" v-if="keyAreasShow">
|
<div class="siteList" v-if="keyAreasShow">
|
||||||
<site-list-more></site-list-more>
|
<site-list-more @closeSiteListMore="closeSiteListMore"></site-list-more>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--视频列表弹出框-->
|
<!--视频列表弹出框-->
|
||||||
|
@ -279,8 +279,12 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 关闭重点区域。
|
||||||
|
closeSiteListMore(){
|
||||||
|
this.keyAreasShow=false;
|
||||||
|
},
|
||||||
IsShowLideoVisible(val){
|
IsShowLideoVisible(val){
|
||||||
this.videoVisible=val
|
this.videoVisible=val
|
||||||
},
|
},
|
||||||
// 获取年月日
|
// 获取年月日
|
||||||
getCurrentTime() {
|
getCurrentTime() {
|
||||||
|
@ -482,7 +486,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
layerHandleChange(item) {
|
layerHandleChange(item) {
|
||||||
console.log("地图显示等",item);
|
console.log("地图显示等111",item);
|
||||||
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
|
if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
|
||||||
switch (item) {
|
switch (item) {
|
||||||
case "AI事件":
|
case "AI事件":
|
||||||
|
@ -709,7 +713,7 @@ export default {
|
||||||
case "clear":
|
case "clear":
|
||||||
this.hiMapFun.removeLayerByLayerName("types");
|
this.hiMapFun.removeLayerByLayerName("types");
|
||||||
this.hiMapFun.removeLayerByLayerName("thermodynamic");
|
this.hiMapFun.removeLayerByLayerName("thermodynamic");
|
||||||
this.thermodynamicPeopleType = "";
|
// this.thermodynamicPeopleType = "";
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -726,6 +730,11 @@ export default {
|
||||||
this.hiMapFun.removeLayerByLayerName("景区景点");
|
this.hiMapFun.removeLayerByLayerName("景区景点");
|
||||||
this.hiMapFun.removeLayerByLayerName("海水浴场");
|
this.hiMapFun.removeLayerByLayerName("海水浴场");
|
||||||
this.hiMapFun.removeLayerByLayerName("窗口单位");
|
this.hiMapFun.removeLayerByLayerName("窗口单位");
|
||||||
|
//清除地图底部的、地图显示、重点区域、人流热力
|
||||||
|
this.changeLayerBtnGroup=[];
|
||||||
|
this.thermodynamicPeopleType = "";
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
//点击是否显示重点区域。
|
//点击是否显示重点区域。
|
||||||
handleKeyArea() {
|
handleKeyArea() {
|
||||||
|
|
Loading…
Reference in New Issue