|
|
@@ -8,10 +8,15 @@
|
|
|
<!-- 左侧 -->
|
|
|
<div class="leftbar w-10" ref="left">
|
|
|
<div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="#09140e" style="padding-bottom: 1rem;">
|
|
|
- <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
|
|
|
+ <dv-border-box-13
|
|
|
+ backgroundColor="#09140e"
|
|
|
+ style="padding-bottom: 1rem"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="../assets/images/integrated/light.png"
|
|
|
+ style="width: 100%; margin-top: 0.4rem"
|
|
|
+ />
|
|
|
<div class="i-list-con h-78">
|
|
|
-
|
|
|
<div class="i-list-con h-65" v-show="showSearch == true">
|
|
|
<div class="head-container">
|
|
|
<el-input
|
|
|
@@ -27,11 +32,19 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="d-l-con-icon">
|
|
|
- <div class="icon-con" :class="{on:iconCurrentIndex==item.resourceTable}"
|
|
|
- v-for="(item,index) in resourcesList"
|
|
|
- v-on:click="indentleftSetMarkers(item.type, searchName)">
|
|
|
- <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
|
|
|
- <div class="iconfont icon icon-normal" :class="item.icon"></div>
|
|
|
+ <div
|
|
|
+ class="icon-con"
|
|
|
+ :class="{ on: iconCurrentIndex == item.resourceTable }"
|
|
|
+ v-for="(item, index) in resourcesList"
|
|
|
+ v-on:click="indentleftSetMarkers(item.type, searchName)"
|
|
|
+ >
|
|
|
+ <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="iconfont icon icon-normal"
|
|
|
+ :class="item.icon"
|
|
|
+ :style="'background:' + item.bg"
|
|
|
+ ></div>
|
|
|
<div class="icon-text">
|
|
|
<h6>{{ item.num }}</h6>
|
|
|
<!--<h6>{{ item.count }}</h6>-->
|
|
|
@@ -46,24 +59,38 @@
|
|
|
</div>
|
|
|
<!-- 地图 -->
|
|
|
<!--<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
|
|
|
- <!--:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
|
|
|
- <supermap ref="supermap" @sewageOutletClick="sewageOutletClick"></supermap>
|
|
|
+ <!--:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>-->
|
|
|
+ <supermap
|
|
|
+ ref="supermap"
|
|
|
+ @sewageOutletClick="sewageOutletClick"
|
|
|
+ ></supermap>
|
|
|
<!-- <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
|
|
|
<!-- </button>-->
|
|
|
<!-- 右侧 -->
|
|
|
<div class="rightbar" ref="right" v-if="showSearch == true">
|
|
|
<div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="#09140e" style="padding-bottom: 1rem;">
|
|
|
- <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
|
|
|
+ <dv-border-box-13
|
|
|
+ backgroundColor="#09140e"
|
|
|
+ style="padding-bottom: 1rem"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="../assets/images/integrated/light.png"
|
|
|
+ style="width: 100%; margin-top: 0.4rem"
|
|
|
+ />
|
|
|
<div class="this-title">
|
|
|
<span>数据分布</span>
|
|
|
- <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
|
|
|
+ <dv-decoration-3
|
|
|
+ style="width: 150px; height: 15px; margin-right: 1rem"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="i-list-con h-73">
|
|
|
<div class="overflow-y" style="height: 39vh">
|
|
|
- <div class="d-l-con" :class="{on:listCurrentIndex==item.deptId}"
|
|
|
- v-for="(item,index) in deptGroupList"
|
|
|
- v-on:click="indentleftByDeptIdSetMarkers(item.deptId)">
|
|
|
+ <div
|
|
|
+ class="d-l-con"
|
|
|
+ :class="{ on: listCurrentIndex == item.deptId }"
|
|
|
+ v-for="(item, index) in deptGroupList"
|
|
|
+ v-on:click="indentleftByDeptIdSetMarkers(item.deptId)"
|
|
|
+ >
|
|
|
<div class="d-l-l-text">
|
|
|
<i class="i-small"></i>
|
|
|
<h4>{{ item.deptName }}</h4>
|
|
|
@@ -71,15 +98,14 @@
|
|
|
<div class="d-l-l-count">{{ item.count }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="overflow-y" style="height: 34vh;">
|
|
|
- <div id="data-chart" style="width: 100%;height:34vh;"></div>
|
|
|
+ <div class="overflow-y" style="height: 34vh">
|
|
|
+ <div id="data-chart" style="width: 100%; height: 34vh"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
</div>
|
|
|
<vBottomMenu ref="bottomMenu"></vBottomMenu>
|
|
|
-
|
|
|
</div>
|
|
|
<eventLocation ref="eventLocation"></eventLocation>
|
|
|
<TVWall ref="TVWall"></TVWall>
|
|
|
@@ -90,36 +116,36 @@
|
|
|
import {
|
|
|
getResource,
|
|
|
getResourcePoint,
|
|
|
- getResourcePointByDeptId
|
|
|
-} from '@/api/datacenter'
|
|
|
-
|
|
|
-import supermap from '@/components/supermap-2.5d' //超图
|
|
|
-import vheader from '@/components/v-header.vue' //一体化共用头部
|
|
|
-import vBottomMenu from '@/components/vBottomMenu.vue' //一体化公共底部菜单
|
|
|
-import eventLocation from '@/components/eventLocation.vue' //事件定位弹窗
|
|
|
-import TVWall from '@/components/TVWall.vue'
|
|
|
-import {initByCameras} from "@/api/forest"; //电视墙弹窗
|
|
|
+ getResourcePointByDeptId,
|
|
|
+} from "@/api/datacenter";
|
|
|
|
|
|
+import supermap from "@/components/supermap-2.5d"; //超图
|
|
|
+import vheader from "@/components/v-header.vue"; //一体化共用头部
|
|
|
+import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
|
|
|
+import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
|
|
|
+import TVWall from "@/components/TVWall.vue";
|
|
|
+import { initByCameras } from "@/api/forest"; //电视墙弹窗
|
|
|
+import {getIconBg} from '@/api/components/sookaMapIcon';//资源底色控制文件
|
|
|
// import echarts from 'echarts'
|
|
|
-let echarts = require('echarts')
|
|
|
+let echarts = require("echarts");
|
|
|
export default {
|
|
|
components: {
|
|
|
supermap,
|
|
|
vheader,
|
|
|
vBottomMenu,
|
|
|
eventLocation,
|
|
|
- TVWall
|
|
|
+ TVWall,
|
|
|
},
|
|
|
created() {
|
|
|
/** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
- window.showDialog = this.showDialog
|
|
|
- window.choseLayerSwitching = this.choseLayerSwitching
|
|
|
- window.choseLayerSwitchingList = this.choseLayerSwitchingList
|
|
|
+ window.showDialog = this.showDialog;
|
|
|
+ window.choseLayerSwitching = this.choseLayerSwitching;
|
|
|
+ window.choseLayerSwitchingList = this.choseLayerSwitchingList;
|
|
|
/** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getResource()
|
|
|
- this.bottomMenuList() //获取底部公共组件消息和任务
|
|
|
+ this.getResource();
|
|
|
+ this.bottomMenuList(); //获取底部公共组件消息和任务
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -129,23 +155,22 @@ export default {
|
|
|
searchName: undefined,
|
|
|
// 搜索类型
|
|
|
searchType: undefined,
|
|
|
- iconCurrentIndex: '',
|
|
|
- listCurrentIndex: '',
|
|
|
+ iconCurrentIndex: "",
|
|
|
+ listCurrentIndex: "",
|
|
|
markersList: [],
|
|
|
iframeBoo: true,
|
|
|
open: false,
|
|
|
iframeVue: null,
|
|
|
- activeName: 'info',
|
|
|
- radio: '1',
|
|
|
+ activeName: "info",
|
|
|
+ radio: "1",
|
|
|
//类型
|
|
|
- resourceTable: '',
|
|
|
+ resourceTable: "",
|
|
|
//左侧资源
|
|
|
resourcesList: [],
|
|
|
//右侧资源
|
|
|
deptGroupList: [],
|
|
|
source: [],
|
|
|
-
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
@@ -156,193 +181,204 @@ export default {
|
|
|
},
|
|
|
/** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
bottomMenuList() {
|
|
|
- this.$refs.bottomMenu.selectTaskList()//获取任务列表
|
|
|
- this.$refs.bottomMenu.selectMessageList()//获取消息列表
|
|
|
+ this.$refs.bottomMenu.selectTaskList(); //获取任务列表
|
|
|
+ this.$refs.bottomMenu.selectMessageList(); //获取消息列表
|
|
|
},
|
|
|
showDialog(click) {
|
|
|
- if (click == 'eventLocation') {
|
|
|
- this.$refs.eventLocation.showEventLocation()
|
|
|
- this.$refs.supermap.isEditableLayers = false
|
|
|
- this.$refs.bottomMenu.showChild = false
|
|
|
- } else if (click == 'editableLayers') {
|
|
|
- this.$refs.bottomMenu.showChild = false
|
|
|
+ if (click == "eventLocation") {
|
|
|
+ this.$refs.eventLocation.showEventLocation();
|
|
|
+ this.$refs.supermap.isEditableLayers = false;
|
|
|
+ this.$refs.bottomMenu.showChild = false;
|
|
|
+ } else if (click == "editableLayers") {
|
|
|
+ this.$refs.bottomMenu.showChild = false;
|
|
|
if (!this.$refs.supermap.isEditableLayers) {
|
|
|
- this.$refs.supermap.isEditableLayers = true
|
|
|
+ this.$refs.supermap.isEditableLayers = true;
|
|
|
} else {
|
|
|
- this.$refs.supermap.isEditableLayers = false
|
|
|
+ this.$refs.supermap.isEditableLayers = false;
|
|
|
}
|
|
|
- } else if (click == 'layerSwitching') {
|
|
|
- this.$refs.supermap.isEditableLayers = false
|
|
|
+ } else if (click == "layerSwitching") {
|
|
|
+ this.$refs.supermap.isEditableLayers = false;
|
|
|
if (!this.$refs.bottomMenu.showChild) {
|
|
|
- this.$refs.bottomMenu.showChild = true
|
|
|
+ this.$refs.bottomMenu.showChild = true;
|
|
|
} else {
|
|
|
- this.$refs.bottomMenu.showChild = false
|
|
|
+ this.$refs.bottomMenu.showChild = false;
|
|
|
}
|
|
|
- } else if (click == 'TVWall') {
|
|
|
- this.$refs.TVWall.showTVWall()
|
|
|
- this.$refs.supermap.isEditableLayers = false
|
|
|
- this.$refs.bottomMenu.showChild = false
|
|
|
+ } else if (click == "TVWall") {
|
|
|
+ this.$refs.TVWall.showTVWall();
|
|
|
+ this.$refs.supermap.isEditableLayers = false;
|
|
|
+ this.$refs.bottomMenu.showChild = false;
|
|
|
}
|
|
|
},
|
|
|
//选择图层
|
|
|
choseLayerSwitching(url, isClear) {
|
|
|
- this.$refs.supermap.layerSwitching(url, isClear)
|
|
|
+ this.$refs.supermap.layerSwitching(url, isClear);
|
|
|
},
|
|
|
//选择图层(传递数组)
|
|
|
choseLayerSwitchingList(urlList) {
|
|
|
- this.$refs.supermap.layerSwitchingList(urlList)
|
|
|
+ this.$refs.supermap.layerSwitchingList(urlList);
|
|
|
},
|
|
|
/** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
//数据分布chart
|
|
|
dataChat() {
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
- let myChart = echarts.init(document.getElementById('data-chart'))
|
|
|
+ let myChart = echarts.init(document.getElementById("data-chart"));
|
|
|
// 绘制图表
|
|
|
- const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
|
|
|
+ const dfColor = ["#92E1FF", "#0097FB", "#30ECA6", "#FFC227", "#FF4848"];
|
|
|
myChart.setOption({
|
|
|
dataset: {
|
|
|
- source: this.source
|
|
|
+ source: this.source,
|
|
|
},
|
|
|
tooltip: {
|
|
|
- trigger: 'item'
|
|
|
-
|
|
|
+ trigger: "item",
|
|
|
},
|
|
|
- dataZoom: [{
|
|
|
- show: true,
|
|
|
- type: 'slider',
|
|
|
- yAxisIndex: 0,
|
|
|
- left: 0,
|
|
|
- start: 0,
|
|
|
- end: this.source.length > 8 ? 8 : 100,
|
|
|
- width: 15
|
|
|
- }],
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ type: "slider",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ left: 0,
|
|
|
+ start: 0,
|
|
|
+ end: this.source.length > 8 ? 8 : 100,
|
|
|
+ width: 15,
|
|
|
+ },
|
|
|
+ ],
|
|
|
grid: {
|
|
|
- top: '5%',
|
|
|
- left: '2%',
|
|
|
+ top: "5%",
|
|
|
+ left: "2%",
|
|
|
// right: "4%",
|
|
|
- bottom: '-15%',
|
|
|
- width: '75%',
|
|
|
- containLabel: true
|
|
|
+ bottom: "-15%",
|
|
|
+ width: "75%",
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
show: false,
|
|
|
- type: 'value'
|
|
|
+ type: "value",
|
|
|
},
|
|
|
yAxis: {
|
|
|
- type: 'category', // 不设置类目轴，抽离的dataset数据展示不出来
|
|
|
+ type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
|
|
|
inverse: true,
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
- color: '#5deaff',
|
|
|
- fontSize: '12'
|
|
|
- }
|
|
|
+ color: "#5deaff",
|
|
|
+ fontSize: "12",
|
|
|
+ },
|
|
|
},
|
|
|
splitLine: {
|
|
|
- show: false
|
|
|
+ show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
- show: false
|
|
|
+ show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
- show: false
|
|
|
- }
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
- series: [{
|
|
|
-
|
|
|
- type: 'bar',
|
|
|
- animationCurve: 'easeOutBack',
|
|
|
- barWidth: 5,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'right',
|
|
|
- offset: [0, 0],
|
|
|
- color: '#88dfd5',
|
|
|
- // fontSize: "12",
|
|
|
- style: {
|
|
|
- fill: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- backgroundBar: {
|
|
|
- show: true,
|
|
|
- style: {
|
|
|
- fill: 'rgba(97,152,255,0.20)'
|
|
|
- }
|
|
|
- },
|
|
|
- barStyle: {
|
|
|
- stroke: 'rgba(41,244,236,1)'
|
|
|
- },
|
|
|
- gradient: {
|
|
|
- color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ animationCurve: "easeOutBack",
|
|
|
+ barWidth: 5,
|
|
|
label: {
|
|
|
- show: true
|
|
|
+ show: true,
|
|
|
+ position: "right",
|
|
|
+ offset: [0, 0],
|
|
|
+ color: "#88dfd5",
|
|
|
+ // fontSize: "12",
|
|
|
+ style: {
|
|
|
+ fill: "#fff",
|
|
|
+ },
|
|
|
},
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
+ backgroundBar: {
|
|
|
+ show: true,
|
|
|
+ style: {
|
|
|
+ fill: "rgba(97,152,255,0.20)",
|
|
|
+ },
|
|
|
},
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(41,244,236,0)'
|
|
|
+ barStyle: {
|
|
|
+ stroke: "rgba(41,244,236,1)",
|
|
|
},
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(41,244,236,.5)'
|
|
|
- }
|
|
|
- ]),
|
|
|
- borderColor: '#a2f9f7',
|
|
|
- shadowBlur: 16,
|
|
|
- shadowColor: '#a2f9f7'
|
|
|
- }
|
|
|
- }]
|
|
|
- })
|
|
|
-
|
|
|
+ gradient: {
|
|
|
+ color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(41,244,236,0)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(41,244,236,.5)",
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ borderColor: "#a2f9f7",
|
|
|
+ shadowBlur: 16,
|
|
|
+ shadowColor: "#a2f9f7",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 弹层方法
|
|
|
showEventInfo1() {
|
|
|
- this.eventInfoVisible1 = true
|
|
|
+ this.eventInfoVisible1 = true;
|
|
|
},
|
|
|
showEventInfo2() {
|
|
|
- this.eventInfoVisible2 = true
|
|
|
+ this.eventInfoVisible2 = true;
|
|
|
},
|
|
|
getResource() {
|
|
|
- let that = this
|
|
|
+ let that = this;
|
|
|
//获取左侧菜单列表
|
|
|
- getResource().then(res => {
|
|
|
- that.resourcesList = res.data
|
|
|
- console.log("that.resourcesList=", that.resourcesList)
|
|
|
+ getResource().then((res) => {
|
|
|
+ that.resourcesList = res.data;
|
|
|
+ console.log("that.resourcesList=", that.resourcesList);
|
|
|
//截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
|
|
|
- res.data.forEach(function(data, index) {
|
|
|
- that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-"));
|
|
|
+ res.data.forEach(function (data, index) {
|
|
|
+ let icon ='sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-").replaceAll("@", "-");
|
|
|
+ that.$set(
|
|
|
+ that.resourcesList[index],
|
|
|
+ "icon",
|
|
|
+ icon
|
|
|
+ );
|
|
|
+
|
|
|
+ that.$set(that.resourcesList[index], "bg", getIconBg(icon));
|
|
|
+
|
|
|
// if(index < 5){
|
|
|
// // that.fireControlViewPoint(data.type, 'undefined');
|
|
|
// that.indentleftSetMarkers(data.type, '所有');
|
|
|
// }
|
|
|
- })
|
|
|
+ });
|
|
|
//数据自动落点开始
|
|
|
- let maxCount = 100;//落点数超过这个数的资源不落点
|
|
|
+ let maxCount = 100; //落点数超过这个数的资源不落点
|
|
|
let list = res.data;
|
|
|
let counts = [];
|
|
|
let points = [];
|
|
|
let types = [];
|
|
|
- for(let i = 0; i < list.length; i++){//获取符合要求的类型及数量
|
|
|
- if(list[i].num <= maxCount){
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ //获取符合要求的类型及数量
|
|
|
+ if (list[i].num <= maxCount) {
|
|
|
counts.push(list[i].num);
|
|
|
points.push({
|
|
|
- "type": list[i].type,
|
|
|
- "count": list[i].num
|
|
|
+ type: list[i].type,
|
|
|
+ count: list[i].num,
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
- for(let i = 0; i < points.length; i++){
|
|
|
- if(points[i].count == Math.max(...counts)){
|
|
|
+ for (let i = 0; i < points.length; i++) {
|
|
|
+ if (points[i].count == Math.max(...counts)) {
|
|
|
types.push(points[i].type);
|
|
|
let countsTemp = [];
|
|
|
for (let j = 0; j < counts.length; j++) {
|
|
|
- if(counts[j] != Math.max(...counts)){
|
|
|
+ if (counts[j] != Math.max(...counts)) {
|
|
|
countsTemp.push(counts[j]);
|
|
|
}
|
|
|
}
|
|
|
@@ -350,41 +386,47 @@ export default {
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
- for(let i = 0; i < points.length; i++){
|
|
|
- if(points[i].count == Math.max(...counts)){
|
|
|
+ for (let i = 0; i < points.length; i++) {
|
|
|
+ if (points[i].count == Math.max(...counts)) {
|
|
|
types.push(points[i].type);
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
- for(let i = 0; i < types.length; i++){
|
|
|
- that.indentleftSetMarkers(types[i], '所有');
|
|
|
+ for (let i = 0; i < types.length; i++) {
|
|
|
+ that.indentleftSetMarkers(types[i], "所有");
|
|
|
}
|
|
|
//数据自动落点结束
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
indentleftSetMarkers(resourceTable, name) {
|
|
|
// 搜索框
|
|
|
// if(name == 'undefined' && this.showSearch == false){
|
|
|
// if(name == '所有' && this.showSearch == false){
|
|
|
- if(name == '所有'){
|
|
|
+ if (name == "所有") {
|
|
|
name = undefined;
|
|
|
- }else {
|
|
|
+ } else {
|
|
|
this.showSearch = true;
|
|
|
}
|
|
|
// 搜索类型
|
|
|
this.searchType = resourceTable;
|
|
|
- this.iconCurrentIndex = resourceTable
|
|
|
- let that = this
|
|
|
- that.resourceTable = resourceTable
|
|
|
- that.markersList = []
|
|
|
- that.source = []
|
|
|
+ this.iconCurrentIndex = resourceTable;
|
|
|
+ let that = this;
|
|
|
+ that.resourceTable = resourceTable;
|
|
|
+ that.markersList = [];
|
|
|
+ that.source = [];
|
|
|
//点击左侧地图落点
|
|
|
- getResourcePoint(resourceTable, name).then(res => {
|
|
|
- that.deptGroupList = res.data.deptGroupList
|
|
|
- if (res.data.deptGroupList != null && res.data.deptGroupList.length > 0) {
|
|
|
+ getResourcePoint(resourceTable, name).then((res) => {
|
|
|
+ that.deptGroupList = res.data.deptGroupList;
|
|
|
+ if (
|
|
|
+ res.data.deptGroupList != null &&
|
|
|
+ res.data.deptGroupList.length > 0
|
|
|
+ ) {
|
|
|
for (let i = 0; i < res.data.deptGroupList.length; i++) {
|
|
|
- let aa = [res.data.deptGroupList[i].deptName, res.data.deptGroupList[i].count]
|
|
|
- that.source.push(aa)
|
|
|
+ let aa = [
|
|
|
+ res.data.deptGroupList[i].deptName,
|
|
|
+ res.data.deptGroupList[i].count,
|
|
|
+ ];
|
|
|
+ that.source.push(aa);
|
|
|
}
|
|
|
}
|
|
|
if (res.data.resourceList != null && res.data.resourceList.length > 0) {
|
|
|
@@ -392,215 +434,263 @@ export default {
|
|
|
let markersMap = {
|
|
|
lng: 124.59,
|
|
|
lat: 43.02,
|
|
|
- icon: 'marker',
|
|
|
- bindPopupHtml: '',
|
|
|
- parameter:'',
|
|
|
- click: '',
|
|
|
+ icon: "marker",
|
|
|
+ bindPopupHtml: "",
|
|
|
+ parameter: "",
|
|
|
+ click: "",
|
|
|
keepBindPopup: false,
|
|
|
- isAggregation: false
|
|
|
- }
|
|
|
- that.markersList.push(this.getMarkersMap(resourceTable, markersMap, res.data.resourceList[i]));
|
|
|
+ isAggregation: false,
|
|
|
+ };
|
|
|
+ that.markersList.push(
|
|
|
+ this.getMarkersMap(
|
|
|
+ resourceTable,
|
|
|
+ markersMap,
|
|
|
+ res.data.resourceList[i]
|
|
|
+ )
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
- if(this.showSearch == true){
|
|
|
+ if (this.showSearch == true) {
|
|
|
this.dataChat();
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
- that.$refs.supermap.clearM()
|
|
|
- that.$refs.supermap.setMarkers(that.markersList)
|
|
|
- }, 3000)
|
|
|
- })
|
|
|
+ that.$refs.supermap.clearM();
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList);
|
|
|
+ }, 3000);
|
|
|
+ });
|
|
|
},
|
|
|
indentleftByDeptIdSetMarkers(deptId) {
|
|
|
- this.listCurrentIndex = deptId
|
|
|
- let that = this
|
|
|
+ this.listCurrentIndex = deptId;
|
|
|
+ let that = this;
|
|
|
//点击左侧地图落点
|
|
|
- getResourcePointByDeptId(that.resourceTable, deptId).then(res => {
|
|
|
- console.log("1===============dituluodian===============", res.data.resourceList);
|
|
|
- that.markersList = []
|
|
|
+ getResourcePointByDeptId(that.resourceTable, deptId).then((res) => {
|
|
|
+ console.log(
|
|
|
+ "1===============dituluodian===============",
|
|
|
+ res.data.resourceList
|
|
|
+ );
|
|
|
+ that.markersList = [];
|
|
|
if (res.data.resourceList != null && res.data.resourceList.length > 0) {
|
|
|
for (let i = 0; i < res.data.resourceList.length; i++) {
|
|
|
let markersMap = {
|
|
|
lng: 124.59,
|
|
|
lat: 43.02,
|
|
|
- icon: 'marker',
|
|
|
- bindPopupHtml: '',
|
|
|
- parameter:'',
|
|
|
- click: '',
|
|
|
+ icon: "marker",
|
|
|
+ bindPopupHtml: "",
|
|
|
+ parameter: "",
|
|
|
+ click: "",
|
|
|
keepBindPopup: false,
|
|
|
- isAggregation: false
|
|
|
- }
|
|
|
- that.markersList.push(this.getMarkersMap(that.resourceTable, markersMap, res.data.resourceList[i]));
|
|
|
+ isAggregation: false,
|
|
|
+ };
|
|
|
+ that.markersList.push(
|
|
|
+ this.getMarkersMap(
|
|
|
+ that.resourceTable,
|
|
|
+ markersMap,
|
|
|
+ res.data.resourceList[i]
|
|
|
+ )
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
- that.$refs.supermap.clearM()
|
|
|
- that.$refs.supermap.setMarkers(that.markersList)
|
|
|
- }, 3000)
|
|
|
- })
|
|
|
+ that.$refs.supermap.clearM();
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList);
|
|
|
+ }, 3000);
|
|
|
+ });
|
|
|
},
|
|
|
- getMarkersMap(resourceTable, markersMap, item){
|
|
|
- if (resourceTable == 'centerdata_t_environment_key_enterprise') { //重点企业
|
|
|
- markersMap.icon = 'sj-icon-map-centerdata-t-environment-key-enterprise'
|
|
|
- markersMap.lng = (item.longitude?item.longitude:"")
|
|
|
- markersMap.lat = (item.latitude?item.latitude:"")
|
|
|
- markersMap.click = 'sewageOutletClick'
|
|
|
- markersMap.parameter = item
|
|
|
- markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
- '<span>' +
|
|
|
+ getMarkersMap(resourceTable, markersMap, item) {
|
|
|
+ if (resourceTable == "centerdata_t_environment_key_enterprise") {
|
|
|
+ //重点企业
|
|
|
+ markersMap.icon = "sj-icon-map-centerdata-t-environment-key-enterprise";
|
|
|
+ markersMap.lng = item.longitude ? item.longitude : "";
|
|
|
+ markersMap.lat = item.latitude ? item.latitude : "";
|
|
|
+ markersMap.click = "sewageOutletClick";
|
|
|
+ markersMap.parameter = item;
|
|
|
+ markersMap.bindPopupHtml =
|
|
|
+ '<div class="map-tip">' +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>经纬度：' + (item.longitude?item.longitude:"") + ',' + (item.latitude?item.latitude:"") + '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span>' +
|
|
|
- '<span>' +
|
|
|
+ " <h4>经纬度：" +
|
|
|
+ (item.longitude ? item.longitude : "") +
|
|
|
+ "," +
|
|
|
+ (item.latitude ? item.latitude : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>企业名称：' + (item.name?item.name:"") +
|
|
|
- '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span>' +
|
|
|
- '<span>' +
|
|
|
+ " <h4>企业名称：" +
|
|
|
+ (item.name ? item.name : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>地址：' + (item.address?item.address:"") +
|
|
|
- '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span>' +
|
|
|
- '<span>' +
|
|
|
+ " <h4>地址：" +
|
|
|
+ (item.address ? item.address : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>企业联系人：' + (item.contacts?item.contacts:"") +
|
|
|
- '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span>' +
|
|
|
- '<span>' +
|
|
|
+ " <h4>企业联系人：" +
|
|
|
+ (item.contacts ? item.contacts : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>联系电话：' + (item.contacts_phone?item.contacts_phone:"") +
|
|
|
- '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span></div>'
|
|
|
- } else if (resourceTable == 'centerdata_t_environment_source_pollution') { //污染源
|
|
|
- markersMap.icon = 'sj-icon-map-centerdata-t-environment-source-pollution'
|
|
|
- markersMap.lng = (item.longitude?item.longitude:"")
|
|
|
- markersMap.lat = (item.latitude?item.latitude:"")
|
|
|
- markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
- '<span>' +
|
|
|
+ " <h4>联系电话：" +
|
|
|
+ (item.contacts_phone ? item.contacts_phone : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span></div>";
|
|
|
+ } else if (resourceTable == "centerdata_t_environment_source_pollution") {
|
|
|
+ //污染源
|
|
|
+ markersMap.icon =
|
|
|
+ "sj-icon-map-centerdata-t-environment-source-pollution";
|
|
|
+ markersMap.lng = item.longitude ? item.longitude : "";
|
|
|
+ markersMap.lat = item.latitude ? item.latitude : "";
|
|
|
+ markersMap.bindPopupHtml =
|
|
|
+ '<div class="map-tip">' +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>经纬度：' + (item.longitude?item.longitude:"") + ',' + (item.latitude?item.latitude:"") + '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span>' +
|
|
|
- '<span>' +
|
|
|
+ " <h4>经纬度：" +
|
|
|
+ (item.longitude ? item.longitude : "") +
|
|
|
+ "," +
|
|
|
+ (item.latitude ? item.latitude : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>污染源名称：' + (item.name?item.name:"") +
|
|
|
- '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span>' +
|
|
|
- '<span>' +
|
|
|
+ " <h4>污染源名称：" +
|
|
|
+ (item.name ? item.name : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>地址：' + (item.address?item.address:"") +
|
|
|
- '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span>' +
|
|
|
- '<span>' +
|
|
|
- '</div>'
|
|
|
- } else if (resourceTable == 'centerdata_t_environment_sewage_outlet') { //排污口
|
|
|
- markersMap.icon = 'sj-icon-map-centerdata_t_environment_sewage_outlet'
|
|
|
- markersMap.lng = (item.longitude?item.longitude:"")
|
|
|
- markersMap.lat = (item.latitude?item.latitude:"")
|
|
|
- markersMap.click = 'sewageOutletClick'
|
|
|
- markersMap.parameter = item
|
|
|
- markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
- '<span>' +
|
|
|
+ " <h4>地址：" +
|
|
|
+ (item.address ? item.address : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
+ "</div>";
|
|
|
+ } else if (resourceTable == "centerdata_t_environment_sewage_outlet") {
|
|
|
+ //排污口
|
|
|
+ markersMap.icon = "sj-icon-map-centerdata_t_environment_sewage_outlet";
|
|
|
+ markersMap.lng = item.longitude ? item.longitude : "";
|
|
|
+ markersMap.lat = item.latitude ? item.latitude : "";
|
|
|
+ markersMap.click = "sewageOutletClick";
|
|
|
+ markersMap.parameter = item;
|
|
|
+ markersMap.bindPopupHtml =
|
|
|
+ '<div class="map-tip">' +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>经纬度：' + (item.longitude?item.longitude:"") + ',' + (item.latitude?item.latitude:"") + '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span>' +
|
|
|
- '<span>' +
|
|
|
+ " <h4>经纬度：" +
|
|
|
+ (item.longitude ? item.longitude : "") +
|
|
|
+ "," +
|
|
|
+ (item.latitude ? item.latitude : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>排污口名称：' + (item.name?item.name:"") +
|
|
|
- '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span>' +
|
|
|
- '<span>' +
|
|
|
+ " <h4>排污口名称：" +
|
|
|
+ (item.name ? item.name : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
' <div class="d-l-con">' +
|
|
|
' <div class="d-l-l-text">' +
|
|
|
- ' <h4>地址：' + (item.address?item.address:"") +
|
|
|
- '</h4>' +
|
|
|
- ' </div>' +
|
|
|
- ' </div>' +
|
|
|
- ' </span>' +
|
|
|
- '<span>' +
|
|
|
- '</div>'
|
|
|
+ " <h4>地址：" +
|
|
|
+ (item.address ? item.address : "") +
|
|
|
+ "</h4>" +
|
|
|
+ " </div>" +
|
|
|
+ " </div>" +
|
|
|
+ " </span>" +
|
|
|
+ "<span>" +
|
|
|
+ "</div>";
|
|
|
}
|
|
|
return markersMap;
|
|
|
},
|
|
|
sewageOutletClick(data) {
|
|
|
- const params = Object.assign({})
|
|
|
+ const params = Object.assign({});
|
|
|
params.longitude = data.longitude;
|
|
|
params.latitude = data.latitude;
|
|
|
|
|
|
- const treeLabels = [{
|
|
|
- "id": null,
|
|
|
- "labelCode": "999",
|
|
|
- "labelName": "电视墙",
|
|
|
- "cameraType": null,
|
|
|
- "parentLabelCode": ""
|
|
|
- }];
|
|
|
+ const treeLabels = [
|
|
|
+ {
|
|
|
+ id: null,
|
|
|
+ labelCode: "999",
|
|
|
+ labelName: "电视墙",
|
|
|
+ cameraType: null,
|
|
|
+ parentLabelCode: "",
|
|
|
+ },
|
|
|
+ ];
|
|
|
const labelChannels = [];
|
|
|
- for (let i in data.cameraList){
|
|
|
+ for (let i in data.cameraList) {
|
|
|
treeLabels.push({
|
|
|
- "id": null,
|
|
|
- "labelCode": data.cameraList[i].cameraCode,
|
|
|
- "labelName": data.cameraList[i].cameraName,
|
|
|
- "cameraType": "1",
|
|
|
- "parentLabelCode": "999"
|
|
|
- })
|
|
|
+ id: null,
|
|
|
+ labelCode: data.cameraList[i].cameraCode,
|
|
|
+ labelName: data.cameraList[i].cameraName,
|
|
|
+ cameraType: "1",
|
|
|
+ parentLabelCode: "999",
|
|
|
+ });
|
|
|
labelChannels.push({
|
|
|
- "labelCode": data.cameraList[i].cameraCode,
|
|
|
- "channelDates": [
|
|
|
+ labelCode: data.cameraList[i].cameraCode,
|
|
|
+ channelDates: [
|
|
|
{
|
|
|
- "channelCode": data.cameraList[i].cameraCode,
|
|
|
- "channelName": data.cameraList[i].cameraName,
|
|
|
- "channelSn": null,
|
|
|
- "cameraType": "1",
|
|
|
- "online": "1",
|
|
|
- "cameraCode": "1"
|
|
|
- }
|
|
|
- ]
|
|
|
- })
|
|
|
+ channelCode: data.cameraList[i].cameraCode,
|
|
|
+ channelName: data.cameraList[i].cameraName,
|
|
|
+ channelSn: null,
|
|
|
+ cameraType: "1",
|
|
|
+ online: "1",
|
|
|
+ cameraCode: "1",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
}
|
|
|
const dianshiqiang = [
|
|
|
{
|
|
|
- "switchTab": "2",
|
|
|
- "treeLabels": treeLabels,
|
|
|
- "labelChannels": labelChannels
|
|
|
- }
|
|
|
- ]
|
|
|
- if(data.cameraList.length > 0){
|
|
|
- this.$refs.TVWall.showTVWall1(data.longitude, data.latitude, dianshiqiang);
|
|
|
+ switchTab: "2",
|
|
|
+ treeLabels: treeLabels,
|
|
|
+ labelChannels: labelChannels,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ if (data.cameraList.length > 0) {
|
|
|
+ this.$refs.TVWall.showTVWall1(
|
|
|
+ data.longitude,
|
|
|
+ data.latitude,
|
|
|
+ dianshiqiang
|
|
|
+ );
|
|
|
}
|
|
|
},
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
-@import '@/assets/styles/base.scss';
|
|
|
+@import "@/assets/styles/base.scss";
|
|
|
</style>
|
whao