|
@@ -0,0 +1,886 @@
|
|
|
+<!--信息中心-->
|
|
|
+<template>
|
|
|
+ <div class="visual-con">
|
|
|
+ <!--头部-->
|
|
|
+ <vheader></vheader>
|
|
|
+ <!--主体-->
|
|
|
+ <div class="visual-body">
|
|
|
+ <!-- 左侧 -->
|
|
|
+ <div class="leftbar w-10" :class="indentleft" ref="left">
|
|
|
+ <div class="forthis">
|
|
|
+ <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
+ <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
|
|
|
+ <div class="i-list-con h-78">
|
|
|
+ <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.resourceTable)">
|
|
|
+ <div class="iconfont icon icon-normal" :class="item.icon"></div>
|
|
|
+ <div class="icon-text">
|
|
|
+ <h6>{{ item.count }}</h6>
|
|
|
+ <h5>{{ item.resourceName }}</h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
|
|
|
+ :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"></supermap>
|
|
|
+ <!-- <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
|
|
|
+ <!-- </button>-->
|
|
|
+ <!-- 右侧 -->
|
|
|
+ <div class="rightbar" :class="indentright" ref="right">
|
|
|
+ <div class="forthis">
|
|
|
+ <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
+ <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
|
|
|
+ <div class="this-title">
|
|
|
+ <span>数据分布</span>
|
|
|
+ <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-l-text">
|
|
|
+ <i class="i-small"></i>
|
|
|
+ <h4>{{ item.deptName }}</h4>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <vBottomMenu ref="bottomMenu"></vBottomMenu>
|
|
|
+<!-- <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
|
|
|
+<!-- <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
|
|
|
+<!-- src="@/assets/images/mascot.png"/>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </el-tooltip>-->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <eventLocation ref="eventLocation"></eventLocation>
|
|
|
+ <TVWall ref="TVWall"></TVWall>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ getWaterDataGather,
|
|
|
+ getResourcePoint,
|
|
|
+ getResourcePointByDeptId
|
|
|
+} from '@/api/datacenter'
|
|
|
+
|
|
|
+import supermap from '@/components/supermap' //超图
|
|
|
+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 echarts from 'echarts'
|
|
|
+let echarts = require('echarts')
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ supermap,
|
|
|
+ vheader,
|
|
|
+ vBottomMenu,
|
|
|
+ eventLocation,
|
|
|
+ TVWall
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ window.showDialog = this.showDialog
|
|
|
+ window.choseLayerSwitching = this.choseLayerSwitching
|
|
|
+ window.choseLayerSwitchingList = this.choseLayerSwitchingList
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getResource()
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ iconCurrentIndex: '',
|
|
|
+ listCurrentIndex: '',
|
|
|
+ markersList: [],
|
|
|
+ iframeBoo: true,
|
|
|
+ open: false,
|
|
|
+ iframeVue: null,
|
|
|
+ activeName: 'info',
|
|
|
+ radio: '1',
|
|
|
+ //类型
|
|
|
+ resourceTable: '',
|
|
|
+ //左侧资源
|
|
|
+ resourcesList: [],
|
|
|
+ //右侧资源
|
|
|
+ deptGroupList: [],
|
|
|
+ source: [],
|
|
|
+ //左右缩进
|
|
|
+ indentStyle: '',
|
|
|
+ indentleft: '',
|
|
|
+ indentright: '',
|
|
|
+ indentText: '收起左右栏',
|
|
|
+ indentdisabled: false
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ /** ----------------------------------底部按钮公用组件开始------------------------------------- */
|
|
|
+ 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 (!this.$refs.supermap.isEditableLayers) {
|
|
|
+ this.$refs.supermap.isEditableLayers = true
|
|
|
+ } else {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ }
|
|
|
+ } else if (click == 'layerSwitching') {
|
|
|
+ this.$refs.supermap.isEditableLayers = false
|
|
|
+ if (!this.$refs.bottomMenu.showChild) {
|
|
|
+ this.$refs.bottomMenu.showChild = true
|
|
|
+ } else {
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ //选择图层(传递数组)
|
|
|
+ choseLayerSwitchingList(urlList) {
|
|
|
+ this.$refs.supermap.layerSwitchingList(urlList)
|
|
|
+ },
|
|
|
+ /** ----------------------------------底部按钮公用组件结束------------------------------------- */
|
|
|
+ //数据分布chart
|
|
|
+ dataChat() {
|
|
|
+ // 基于准备好的dom,初始化echarts实例
|
|
|
+ let myChart = echarts.init(document.getElementById('data-chart'))
|
|
|
+ // 绘制图表
|
|
|
+ const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
|
|
|
+ myChart.setOption({
|
|
|
+ dataset: {
|
|
|
+ source: this.source
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '5%',
|
|
|
+ left: '2%',
|
|
|
+ // right: "4%",
|
|
|
+ bottom: '-15%',
|
|
|
+ width: '75%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show: false,
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category', // 不设置类目轴,抽离的dataset数据展示不出来
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#5deaff',
|
|
|
+ fontSize: '12'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ 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: {
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //吉祥物收起左右框
|
|
|
+ indent() {
|
|
|
+ let list = document.getElementsByClassName('el-tooltip__popper')
|
|
|
+ list[list.length - 1].style.display = 'none'
|
|
|
+ if (this.indentStyle == '') {
|
|
|
+ this.indentStyle = 'indent-style'
|
|
|
+ this.indentleft = 'indent-left'
|
|
|
+ this.indentright = 'indent-right'
|
|
|
+ this.indentText = '展开左右栏'
|
|
|
+ } else if (this.indentText == '展开左右栏') {
|
|
|
+ this.indentStyle = ''
|
|
|
+ this.indentleft = ''
|
|
|
+ this.indentright = ''
|
|
|
+ this.indentText = '收起左右栏'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 弹层方法
|
|
|
+ // 弹层方法
|
|
|
+ showEventInfo1() {
|
|
|
+ this.eventInfoVisible1 = true
|
|
|
+ },
|
|
|
+ showEventInfo2() {
|
|
|
+ this.eventInfoVisible2 = true
|
|
|
+ },
|
|
|
+ getResource() {
|
|
|
+ let that = this
|
|
|
+ //获取左侧菜单列表
|
|
|
+ getWaterDataGather().then(res => {
|
|
|
+ that.resourcesList = res.data
|
|
|
+ //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
|
|
|
+ res.data.forEach(function(data, index) {
|
|
|
+ that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data
|
|
|
+ .resourceTable.split('_').slice(-1))
|
|
|
+ })
|
|
|
+ console.log(that.resourcesList)
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ indentleftSetMarkers(resourceTable) {
|
|
|
+ this.iconCurrentIndex = resourceTable
|
|
|
+ let that = this
|
|
|
+ that.resourceTable = resourceTable
|
|
|
+ that.markersList = []
|
|
|
+ that.source = []
|
|
|
+ //点击左侧地图落点
|
|
|
+ getResourcePoint(resourceTable).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)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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: '',
|
|
|
+ click: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if (resourceTable == 'ph') { //酸碱度
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-weatherstation'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>酸碱度:' + res.data.resourceList[i].ph +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (resourceTable == 'temperature') { //温度
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-farm'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>温度:' + res.data.resourceList[i].temperature + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (resourceTable == 'turbidity') { //浊度
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-landing'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>浊度:' + res.data.resourceList[i].turbidity +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (resourceTable == 'dissolve') { //溶解氧
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-channel'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>溶解氧:' + res.data.resourceList[i].dissolve +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (resourceTable == 'ammoniaNitrogen') { //氨氮
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-checkpoint'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>氨氮:' + res.data.resourceList[i].ammoniaNitrogen +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (resourceTable == 'orp') { //ORP
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-waterintake'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>ORP:' + res.data.resourceList[i].orp +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (resourceTable == 'flow') { //流速
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-watercrane'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>流速:' + res.data.resourceList[i].flow +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (resourceTable == 'level') { //液位
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-firehydrant'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>液位:' + res.data.resourceList[i].level +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ }
|
|
|
+ that.markersList.push(markersMap)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dataChat()
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ indentleftByDeptIdSetMarkers(deptId) {
|
|
|
+ this.listCurrentIndex = deptId
|
|
|
+ let that = this
|
|
|
+ //点击左侧地图落点
|
|
|
+ getResourcePointByDeptId(that.resourceTable, deptId).then(res => {
|
|
|
+ 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: '',
|
|
|
+ click: '',
|
|
|
+ keepBindPopup: false,
|
|
|
+ isAggregation: false
|
|
|
+ }
|
|
|
+ if (that.resourceTable == 'centerdata_t_forest_weatherstation') { //气象站
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-weatherstation'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>地址:' + res.data.resourceList[i].weatherstationAddress +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>联系人:' + res.data.resourceList[i].weatherstationPerson +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>电话:' + res.data.resourceList[i].weatherstationTel +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (that.resourceTable == 'centerdata_t_forest_farm') { //林场
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-farm'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>林场名称:' + res.data.resourceList[i].farmName + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>联系人:' + res.data.resourceList[i].farmPerson + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>电话:' + res.data.resourceList[i].farmTel + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (that.resourceTable == 'centerdata_t_forest_landing') { //起降点
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-landing'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>起降点名称:' + res.data.resourceList[i].landingName +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>联系人:' + res.data.resourceList[i].landingPerson +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>电话:' + res.data.resourceList[i].landingTel + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (that.resourceTable == 'centerdata_t_forest_channel') { //水源渠道
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-channel'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>渠道名称:' + res.data.resourceList[i].channelName +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>联系人:' + res.data.resourceList[i].channelPerson +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>电话:' + res.data.resourceList[i].channelTel + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (that.resourceTable == 'centerdata_t_forest_checkpoint') { //防火检查站
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-checkpoint'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>检查站名称:' + res.data.resourceList[i].checkpointName +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>地址:' + res.data.resourceList[i].checkpointAddress +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>联系人:' + res.data.resourceList[i].checkpointPerson +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>电话:' + res.data.resourceList[i].checkpointTel +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (that.resourceTable == 'centerdata_t_forest_waterintake') { //取水口
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-waterintake'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>取水口名称:' + res.data.resourceList[i].waterintakeName +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>联系人:' + res.data.resourceList[i].waterintakePerson +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>电话:' + res.data.resourceList[i].waterintakeTel +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (that.resourceTable == 'centerdata_t_forest_watercrane') { //水鹤
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-watercrane'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>水鹤名称:' + res.data.resourceList[i].watercraneName +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>联系人:' + res.data.resourceList[i].watercranePerson +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>电话:' + res.data.resourceList[i].watercraneTel +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (that.resourceTable == 'centerdata_t_forest_firehydrant') { //消火栓
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-firehydrant'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>消火栓名称:' + res.data.resourceList[i].firehydrantName +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>地址:' + res.data.resourceList[i].firehydrantAddress +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>联系人:' + res.data.resourceList[i].firehydrantPerson +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>电话:' + res.data.resourceList[i].firehydrantTel +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ } else if (that.resourceTable == 'centerdata_t_forest_fireteam') { //森林防火队
|
|
|
+ markersMap.icon = 'sj-icon-map-centerdata-t-forest-fireteam'
|
|
|
+ markersMap.lng = res.data.resourceList[i].longitude
|
|
|
+ markersMap.lat = res.data.resourceList[i].latitude
|
|
|
+ markersMap.bindPopupHtml = '<div class="map-tip">' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>经纬度:' + res.data.resourceList[i].longitude + ',' + res
|
|
|
+ .data.resourceList[i].latitude + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>森林防火队名称:' + res.data.resourceList[i].fireteamName +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>联系人:' + res.data.resourceList[i].fireteamPerson +
|
|
|
+ '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span>' +
|
|
|
+ '<span>' +
|
|
|
+ ' <div class="d-l-con">' +
|
|
|
+ ' <div class="d-l-l-text">' +
|
|
|
+ ' <h4>电话:' + res.data.resourceList[i].fireteamTel + '</h4>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </div>' +
|
|
|
+ ' </span></div>'
|
|
|
+ }
|
|
|
+ that.markersList.push(markersMap)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.$refs.supermap.clearM(false)
|
|
|
+ that.$refs.supermap.setMarkers(that.markersList)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+@import '@/assets/styles/base.scss';
|
|
|
+</style>
|