init

src/api/components/supermap.js

@@ -50,5 +50,8 @@ export const iconList = {
   'sj-icon-map-guidang': require('@/assets/icons/sj-icon-map/sj-icon-map-guidang.png'),//归档
   'sj-icon-map-banjie': require('@/assets/icons/sj-icon-map/sj-icon-map-banjie.png'),//办结
 
-
+  //交通资源图标
+  'traffic-resources-warning_sign': require('@/assets/icons/sj-icon-map/traffic-resources-warning_sign.png'),//警示牌
+  'traffic-resources-bridge': require('@/assets/icons/sj-icon-map/traffic-resources-bridge.png'),//桥梁
+  'traffic-resources-culvert': require('@/assets/icons/sj-icon-map/traffic-resources-culvert.png'),//涵洞
 }

src/api/resources.js

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+// 获取左侧资源数量
+export function getResourcesCount() {
+  return request({
+    url: '/center-traffic/traffic/getResourcesCount',
+    method: 'post',
+  })
+}
+
+// 获取根据标签查询相应资源
+export function selectResources(label) {
+  return request({
+    url: '/center-traffic/traffic/selectResources',
+    method: 'post',
+    data:{"labels":label}
+  })
+}
+
+// 获取根据标签查询相应资源
+export function selectResourcesByLabel(label) {
+  return request({
+    url: '/center-traffic/traffic/selectResourcesByLabel',
+    method: 'post',
+    data:{"label":label}
+  })
+}

src/views/forest.vue

@@ -0,0 +1,655 @@
+<!--可视化公共模板 林业-->
+<template>
+  <div class="visual-con">
+    <!--头部-->
+    <vheader></vheader>
+    <!--主体-->
+    <div class="visual-body">
+      <!-- 左侧 -->
+      <div class="leftbar" ref="left">
+        <!-- 3 组织机构 -->
+        <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-80" style="padding-left: 1rem;">
+              <el-collapse accordion>
+                <el-collapse-item v-for="(item,index) in villageTypeXlList" :key="index">
+                  <!-- deptId -->
+                  <template slot="title">
+                    <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"
+                         v-on:click="selectCameraByDeptId(item.deptId)">
+                      <div class="d-l-l-text">
+                        <h4 class="collapse-title">{{ item.deptName }}</h4>
+                      </div>
+                      <div class="d-l-l-count">{{ item.eventCount }}</div>
+                    </div>
+                  </template>
+                </el-collapse-item>
+              </el-collapse>
+              <div class="i-list-con small-bottom-margin h-30">
+
+              </div>
+            </div>
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%;height: 100vh;" class="indexSupermapClass" :mapDiv="'forestMap'"
+                :dynamicPlotting="false"
+                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false"
+                @showEventDialog="showEventDialog"/>
+      <!-- 右侧 -->
+      <div class="rightbar rightbar-index" ref="right">
+        <div class="right-item1">
+        </div>
+        <div class="right-item2">
+          <!-- 日历 -->
+          <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 small-bottom-margin h-30">
+                <dateChoose @selectDay="selectDay"></dateChoose>
+              </div>
+            </dv-border-box-13>
+          </div>
+          <!-- 事件列表 -->
+          <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 small-bottom-margin h-44">
+                <div class="event-list-search">
+                  <el-input
+                    placeholder="请输入内容"
+                    prefix-icon="el-icon-search"
+                    v-model="eventSearch" @change="searchEvent(eventSearch)">
+                  </el-input>
+                </div>
+                <div class="d-l-con padding-box nowrap" v-for="(item,index) in eventList"
+                     @click="dropLocation(item.latitude,item.longitude)">
+                  <div class="bgt-img">
+                    <img v-if="item.picturePath!=null&&item.picturePath!=''&& isAssetTypeAnImage(item.picturePath)"
+                         :src="item.picturePath"
+                         style="width: 93px;height: 64px"/>
+                    <img v-else src="../assets/images/integrated/event-img-sub.png" style="width: 93px;height: 64px"/>
+                  </div>
+                  <div class="bgt-info">
+                    <div v-if="item.eventStatusValue=='forest_event_status_1'&&item.urgeCount==0"
+                         class="event-state-sb">
+                      <i class="el-icon-caret-left"></i>
+                      <div class="event-list-state-sb">
+                        新上报
+                      </div>
+                    </div>
+                    <div v-if="item.eventStatusValue=='forest_event_status_1'&&item.urgeCount>0" class="event-state-cb">
+                      <i class="el-icon-caret-left"></i>
+                      <div class="event-list-state-cb">
+                        催办
+                      </div>
+                    </div>
+                    <div v-if="item.eventStatusValue=='forest_event_status_2'" class="event-state-qs">
+                      <i class="el-icon-caret-left"></i>
+                      <div class="event-list-state-qs">
+                        签收
+                      </div>
+                    </div>
+                    <div v-if="item.eventStatusValue=='forest_event_status_3'" class="event-state-wb">
+                      <i class="el-icon-caret-left"></i>
+                      <div class="event-list-state-wb">
+                        误报
+                      </div>
+                    </div>
+                    <div v-if="item.eventStatusValue=='forest_event_status_4'" class="event-state-cf">
+                      <i class="el-icon-caret-left"></i>
+                      <div class="event-list-state-cf">
+                        重复
+                      </div>
+                    </div>
+                    <div v-if="item.eventStatusValue=='forest_event_status_5'" class="event-state-bj">
+                      <i class="el-icon-caret-left"></i>
+                      <div class="event-list-state-bj">
+                        办结
+                      </div>
+                    </div>
+                    <div v-if="item.eventStatusValue=='forest_event_status_6'" class="event-state-gd">
+                      <i class="el-icon-caret-left"></i>
+                      <div class="event-list-state-gd">
+                        归档
+                      </div>
+                    </div>
+                    <div class="bgt-info-name">{{ item.reportor }} {{ item.eventName }}</div>
+                    <div class="bgt-info-place">
+                      <ul>
+                        <li>{{ item.reportTime }}</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </dv-border-box-13>
+          </div>
+        </div>
+
+      </div>
+      <vBottomMenu ref="bottomMenu"></vBottomMenu>
+    </div>
+    <eventdetailsdialog ref="eventdetailsdialog" :calendarDay="calendarDay"
+                        @getEventList="getEventList"></eventdetailsdialog>
+    <eventLocation ref="eventLocation"></eventLocation>
+    <TVWall ref="TVWall"></TVWall>
+  </div>
+</template>
+
+<script>
+import dateChoose from '@/views/date.vue'//日历
+/** ----------------------------------weosocket开始------------------------------------- */
+import Cookies from 'js-cookie'
+/** ----------------------------------weosocket结束------------------------------------- */
+
+import {
+  getDeptEventCount,
+  getEventList
+} from '@/api/forest'
+
+import supermap from '@/components/supermap' //超图
+import supermapNotProcessed from '@/components/supermap' //超图
+import supermapProcessed 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 eventdetailsdialog from '@/views/eventdetailsdialog.vue' //事件详情弹窗
+
+/** ----------------------------------摄像头预览开始------------------------------------- */
+import {
+  getDahuaVideoServer
+} from '@/api/dahua/dahua'
+import DHWs from '@/dahua/lib/DHWs'
+
+/** ----------------------------------摄像头预览结束------------------------------------- */
+
+let echarts = require('echarts')
+export default {
+  components: {
+    supermap,
+    supermapNotProcessed,
+    supermapProcessed,
+    vheader,
+    vBottomMenu,
+    eventLocation,
+    TVWall,
+    dateChoose,
+    eventdetailsdialog
+  },
+  created() {
+    /** ----------------------------------摄像头预览开始------------------------------------- */
+    const DHWsInstance = DHWs.getInstance()
+    this.ws = DHWsInstance
+    /** ----------------------------------摄像头预览结束------------------------------------- */
+
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    window.showDialog = this.showDialog
+    window.choseLayerSwitching = this.choseLayerSwitching
+    window.choseLayerSwitchingList = this.choseLayerSwitchingList
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+  },
+  mounted() {
+    this.getEventByEventType(this.getCurrentDataStr())
+    this.getEventList(this.getCurrentDataStr(),1,0)
+    /** ----------------------------------weosocket开始------------------------------------- */
+    // this.initWebSocket()
+    /** ----------------------------------weosocket结束------------------------------------- */
+    this.selectTaskList()//获取任务
+  },
+  data() {
+    return {
+      calendarDay: this.getCurrentDataStr(),
+      //左侧部门事件数量
+      villageTypeXlList: [],
+      //右侧事件列表
+      eventList: [],
+      eventListnew: [],
+      eventListAll: [],
+      eventSearch: '',//事件列表搜索
+      listCurrentIndex1: '',
+      /** ----------------------------------weosocket开始------------------------------------- */
+      weosocket: false,
+      websock: '',
+      setIntervalWesocketPush: null,
+      /** ----------------------------------weosocket结束------------------------------------- */
+      /** ----------------------------------摄像头预览开始------------------------------------- */
+      activePanel: 'key1',
+      isLogin: false,
+      cameraParams: [],
+      ws: null,
+      /** ----------------------------------摄像头预览结束------------------------------------- */
+      markersList: [], //点位列表
+      cameraList: [] //摄像头列表
+    }
+  },
+  /** ----------------------------------weosocket开始------------------------------------- */
+  destroyed() { //离开页面关闭Socket连接
+    if (this.websock) {
+      clearInterval(this.setIntervalWesocketPush)
+      this.websock.close()
+      this.websock = null
+    }
+  },
+  /** ----------------------------------weosocket结束------------------------------------- */
+  methods: {
+    searchEvent(eventSearch) {
+      let that = this
+      //事件列表搜索
+      this.eventListnew = []
+      if (eventSearch != null && eventSearch != '') {
+        for (var i = 0; i < this.eventListAll.length; i++) {
+          if (this.eventListAll[i].reportor.indexOf(eventSearch) > -1) {
+            this.eventListnew.push(this.eventListAll[i])
+          }
+        }
+        this.eventList = this.eventListnew
+      } else {
+        this.eventList = this.eventListAll
+      }
+      if (this.eventList != null && this.eventList.length > 0) {
+        for (let i = 0; i < this.eventList.length; i++) {
+          let markersMap = {
+            lng: 124.59,
+            lat: 43.02,
+            icon: 'marker',
+            bindPopupHtml: '',
+            click: '',
+            parameter: '',
+            keepBindPopup: false,
+            isAggregation: false
+          }
+          if (this.eventList.length > 200) {
+            markersMap.isAggregation = true
+          }
+          if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount == 0) {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-xinshangbao'
+          }
+          if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount > 0) {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-cuiban'
+          } else if (this.eventList[i].eventStatusValue == 'forest_event_status_2') {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-qianshou'
+            markersMap.isAggregation = false
+          } else if (this.eventList[i].eventStatusValue == 'forest_event_status_5') {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-banjie'
+            markersMap.isAggregation = false
+          } else if (this.eventList[i].eventStatusValue == 'forest_event_status_6') {
+            markersMap.click = 'showEventDialog'
+            markersMap.icon = 'sj-icon-map-guidang'
+          }
+          markersMap.parameter = this.eventList[i].eventCode
+          markersMap.lng = this.eventList[i].longitude
+          markersMap.lat = this.eventList[i].latitude
+          markersMap.bindPopupHtml = '<div class="map-tip">' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>经纬度：' + this.eventList[i].longitude + ',' + this.eventList[i].latitude + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>事件名称：' + this.eventList[i].eventName + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>' +
+            '<span>' +
+            '                  <div class="d-l-con">' +
+            '                  <div class="d-l-l-text">' +
+            '                  <h4>事件时间：' + this.eventList[i].reportTime + '</h4>' +
+            '                </div>' +
+            '                </div>' +
+            '                </span>'
+          if (this.eventList[i].picturePath != null && this.eventList[i].picturePath != '' && this.isAssetTypeAnImage(this.eventList[i].picturePath)) {
+            markersMap.bindPopupHtml += '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '<img src="' + this.eventList[i].picturePath + '" style="width: 150px;height: 100px"/>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>'
+          }
+          markersMap.bindPopupHtml += '</div>'
+          that.markersList.push(markersMap)
+        }
+        setTimeout(() => {
+          that.$refs.supermap.clearM(false)
+          that.$refs.supermap.clearM(true)
+          that.$refs.supermap.setMarkers(that.markersList)
+        }, 2000)
+      } else {
+        setTimeout(() => {
+          that.$refs.supermap.clearM(false)
+          that.$refs.supermap.clearM(true)
+        }, 2000)
+      }
+    },
+    dropLocation(lat, lng) {
+      this.$refs.supermap.dropLocation(lat, lng)
+    },
+    showEventDialog(eventCode) {
+      //事件信息弹出
+      this.$refs.eventdetailsdialog.showEventDialog(eventCode)
+    },
+    getCurrentDataStr() {
+      let date = new Date()
+      let y = date.getFullYear()
+      let m = date.getMonth() + 1
+      m = m < 10 ? '0' + m : m
+      let d = date.getDate()
+      d = d < 10 ? '0' + d : d
+      return y + '-' + m + '-' + d
+    },
+    selectDay(day) {//日历点击
+      this.getEventByEventType(day)
+      this.getEventList(day,1,0)
+      this.calendarDay = day
+    },
+
+    selectTaskList() {
+      this.$refs.bottomMenu.selectTaskList()
+    },
+    getEventByEventType(day) {
+      let that = this
+      //左侧获取事件部门数量
+      getEventByEventType({ day: day }).then(res => {
+        this.villageTypeXlList = res.data
+      })
+    },
+    getEventList(day,eventTypeIdDl,eventTypeId) {
+      let that = this
+      this.eventList = []
+      this.eventListAll = []
+      //右侧获取事件列表
+      getEventList({
+        day: day,
+        eventTypeIdDl: [eventTypeIdDl],
+        eventTypeId: [eventTypeId]
+      }).then(res => {
+        this.eventList = res.data
+        this.eventListAll = res.data
+        that.markersList = []
+        if (this.eventList != null && this.eventList.length > 0) {
+          for (let i = 0; i < this.eventList.length; i++) {
+            let markersMap = {
+              lng: 124.59,
+              lat: 43.02,
+              icon: 'marker',
+              bindPopupHtml: '',
+              click: '',
+              parameter: '',
+              keepBindPopup: false,
+              isAggregation: false
+            }
+            if (this.eventList.length > 200) {
+              markersMap.isAggregation = true
+            }
+            if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount == 0) {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-xinshangbao'
+            }
+            if (this.eventList[i].eventStatusValue == 'forest_event_status_1' && this.eventList[i].urgeCount > 0) {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-cuiban'
+            } else if (this.eventList[i].eventStatusValue == 'forest_event_status_2') {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-qianshou'
+              markersMap.isAggregation = false
+            } else if (this.eventList[i].eventStatusValue == 'forest_event_status_5') {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-banjie'
+              markersMap.isAggregation = false
+            } else if (this.eventList[i].eventStatusValue == 'forest_event_status_6') {
+              markersMap.click = 'showEventDialog'
+              markersMap.icon = 'sj-icon-map-guidang'
+            }
+            markersMap.parameter = this.eventList[i].eventCode
+            markersMap.lng = this.eventList[i].longitude
+            markersMap.lat = this.eventList[i].latitude
+            markersMap.bindPopupHtml = '<div class="map-tip">' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>经纬度：' + this.eventList[i].longitude + ',' + this.eventList[i].latitude + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>事件名称：' + this.eventList[i].eventName + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>' +
+              '<span>' +
+              '                  <div class="d-l-con">' +
+              '                  <div class="d-l-l-text">' +
+              '                  <h4>事件时间：' + this.eventList[i].reportTime + '</h4>' +
+              '                </div>' +
+              '                </div>' +
+              '                </span>'
+            if (this.eventList[i].picturePath != null && this.eventList[i].picturePath != '' && this.isAssetTypeAnImage(this.eventList[i].picturePath)) {
+              markersMap.bindPopupHtml += '<span>' +
+                '                  <div class="d-l-con">' +
+                '                  <div class="d-l-l-text">' +
+                '<img src="' + this.eventList[i].picturePath + '" style="width: 150px;height: 100px"/>' +
+                '                </div>' +
+                '                </div>' +
+                '                </span>'
+            }
+            markersMap.bindPopupHtml += '</div>'
+            that.markersList.push(markersMap)
+          }
+          setTimeout(() => {
+            that.$refs.supermap.clearM(false)
+            that.$refs.supermap.clearM(true)
+            that.$refs.supermap.setMarkers(that.markersList)
+          }, 2000)
+        } else {
+          setTimeout(() => {
+            that.$refs.supermap.clearM(false)
+            that.$refs.supermap.clearM(true)
+          }, 2000)
+        }
+      })
+    },
+    // 判断是否为图片
+    isAssetTypeAnImage(filePath) {
+      //获取最后一个.的位置
+      var index = filePath.lastIndexOf('.')
+      //获取后缀
+      var ext = filePath.substr(index + 1)
+      let aa = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext.toLowerCase()) !== -1
+      return aa
+    },
+    /** ----------------------------------weosocket开始------------------------------------- */
+    initWebSocket() { //初始化weosocket
+      const wsuri = 'wss://www.hmzzxc.com:10012/websocket/forest-' + Cookies.get('username')
+      this.websock = new WebSocket(wsuri)
+      console.log('建立websocket连接')
+      this.websock.onopen = this.websocketonopen
+      this.websock.onmessage = this.websocketonmessage
+      this.websock.onerror = this.websocketonerror
+      this.websock.onclose = this.websocketclose
+      this.websock.onclose = this.websocketclose
+    },
+    websocketonopen() { //连接建立之后执行send方法发送数据
+      console.log('websocket连接成功')
+      this.weosocket = true
+      this.sendPing()
+    },
+    websocketonerror() { //连接建立失败重连
+      this.initWebSocket()
+    },
+    websocketonmessage(e) { //数据接收
+      console.log('接收数据', e.data)
+    },
+    websocketsend(Data) { //数据发送
+      this.websock.send(Data)
+    },
+    websocketclose(e) { //关闭
+      console.log('断开连接', e)
+      // clearInterval(this.setIntervalWesocketPush)
+      this.weosocket = false
+    },
+    /**发送心跳
+     * @param {number} time 心跳间隔毫秒 默认5000
+     * @param {string} ping 心跳名称 默认字符串ping
+     */
+    sendPing(time = 5000, ping = {
+      'fromId': 'forest',
+      'fromUserId': Cookies.get('username'),
+      'toUserId': Cookies.get('username')
+    }) {
+      clearInterval(this.setIntervalWesocketPush)
+      this.websock.send(JSON.stringify(ping))
+      this.setIntervalWesocketPush = setInterval(() => {
+        if (this.weosocket) {
+          this.websock.send(JSON.stringify(ping))
+        } else {
+          this.initWebSocket()
+        }
+      }, time)
+    },
+    /** ----------------------------------weosocket结束------------------------------------- */
+
+    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
+    showDialog(click) {
+      if (click == 'eventLocation') {
+        this.$refs.eventLocation.showEventLocation()
+        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showChild = false
+        this.$refs.bottomMenu.showBanChild = false
+        this.$refs.bottomMenu.showChangChild = false
+      } else if (click == 'editableLayers') {
+        this.$refs.bottomMenu.showChild = false
+        this.$refs.bottomMenu.showBanChild = false
+        this.$refs.bottomMenu.showChangChild = 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
+        this.$refs.bottomMenu.showBanChild = false
+        this.$refs.bottomMenu.showChangChild = 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
+        this.$refs.bottomMenu.showBanChild = false
+        this.$refs.bottomMenu.showChangChild = false
+      } else if (click == 'forestban') {
+        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showChild = false
+        this.$refs.bottomMenu.showChangChild = false
+        if (!this.$refs.bottomMenu.showBanChild) {
+          this.$refs.bottomMenu.showBanChild = true
+        } else {
+          this.$refs.bottomMenu.showBanChild = false
+        }
+      } else if (click == 'forestchang') {
+        this.$refs.supermap.isEditableLayers = false
+        this.$refs.bottomMenu.showBanChild = false
+        this.$refs.bottomMenu.showChild = false
+        if (!this.$refs.bottomMenu.showChangChild) {
+          this.$refs.bottomMenu.showChangChild = true
+        } else {
+          this.$refs.bottomMenu.showChangChild = false
+        }
+      }
+
+    },
+    //选择图层
+    choseLayerSwitching(url, isClear) {
+      this.$refs.supermap.layerSwitching(url, isClear)
+    },
+    //选择图层(传递数组)
+    choseLayerSwitchingList(urlList) {
+      this.$refs.supermap.layerSwitchingList(urlList)
+    },
+    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
+
+    /** ----------------------------------事件弹窗开始------------------------------------- */
+
+
+
+    /** ----------------------------------事件弹窗结束------------------------------------- */
+    /** ----------------------------------摄像头预览开始------------------------------------- */
+    alertLogin: function() {
+      this.$modal.msg('登录中....')
+    },
+    alertLoginSuccess: function() {
+      this.$modal.msgSuccess('登录成功！')
+    },
+    alertLoginFailed: function() {
+      this.$modal.msgError('登陆失败！')
+    },
+    alertReinstall: function() {
+      this.$modal.msgWarning('请重新安装客户端')
+    },
+    /** 预览按钮操作 */
+    preview(channelCode) {
+      getDahuaVideoServer().then(newResponse => {
+        this.ws.detectConnectQt().then(res => {
+          if (res) { // 连接客户端成功
+            this.alertLogin()
+            this.ws.login({
+              loginIp: newResponse.loginIp,
+              loginPort: newResponse.loginPort,
+              userName: newResponse.userName,
+              userPwd: newResponse.userPwd,
+              token: '',
+              https: 1
+            })
+            this.ws.on('loginState', (res) => {
+              this.isLogin = res
+              if (res) {
+                this.alertLoginSuccess()
+                this.activePanel = 'key2'
+                this.realTimeVideoDialog(channelCode)
+              } else {
+                this.alertLoginFailed()
+              }
+            })
+          } else { // 连接客户端失败
+            this.alertReinstall()
+          }
+        })
+      })
+    },
+    realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
+      if (!this.isLogin) {
+        this.$Message.info('正在登陆客户端，请稍等......')
+        return false
+      }
+      this.ws.openVideo(cameraParams)
+    }
+    /** ----------------------------------摄像头预览结束------------------------------------- */
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import '@/assets/styles/base.scss';
+</style>
+

src/views/resources.vue

@@ -6,46 +6,24 @@
     <!--主体-->
     <div class="visual-body">
       <!-- 左侧 -->
-      <div class="leftbar" :class="indentleft" ref="left">
+      <div class="leftbar" 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="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="d-l-con-icon">
-                <div class="icon-con w-33 m-btm-no" :class="{on:iconCurrentIndex1==index}"
-                     v-for="(item,index) in visuForestCloudMapDeviceBOList"
-                     v-on:click="selectDeviceType(index)">
-                  <!--   -->
-                  <div class="icon icon-dot"></div>
-                  <div class="icon-text">
-                    <h6>{{ item.deviceCount }}</h6>
-                    <h5>{{ item.deviceName }}</h5>
-                  </div>
-                </div>
-              </div>
-              <div class="overflow-y" style="height: 33vh;">
-                <el-collapse accordion>
-                  <el-collapse-item v-for="(item,index) in region" :key="index">
-                    <!-- deptId -->
-                    <template slot="title">
-                      <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"
-                           v-on:click="selectCameraByDeptId(item.deptId)">
-                        <div class="d-l-l-text">
-                          <h4 class="collapse-title">{{ item.deptName }}</h4>
-                        </div>
-                        <div class="d-l-l-count">{{ item.deptCount }}</div>
+            <div class="i-list-con h-80" style="padding-left: 1rem;">
+              <el-collapse accordion>
+                <el-collapse-item v-for="(item,index) in resourcesCountList" :key="index">
+                  <template slot="title">
+                    <div class="d-l-con sj-collapse" v-on:click="selectResourcesByLabel(item.label)">
+                      <div class="d-l-l-text">
+                        <h4 class="collapse-title">{{ item.name }}</h4>
                       </div>
-                    </template>
-                  </el-collapse-item>
-                </el-collapse>
-              </div>
-              <!-- 横向柱状 echart -->
-              <div class="overflow-y" style="height: 33vh;">
-                <div id="camera-chart" style="width: 100%;height:33vh;"></div>
+                      <div class="d-l-l-count">{{item.value}}</div>
+                    </div>
+                  </template>
+                </el-collapse-item>
+              </el-collapse>
+              <div class="i-list-con small-bottom-margin h-30">
               </div>
             </div>
           </dv-border-box-13>
@@ -71,28 +49,20 @@
 
 <script>
 import {
-  selectDeviceType,
-  selectCameraByDeptId,
-  selectKeyAreaList
-} from '@/api/monitor'
-
+  getResourcesCount,
+  selectResources,
+  selectResourcesByLabel
+} from '@/api/resources'
 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 {
-  getDahuaVideoServer
-} from '@/api/dahua/dahua'
-import {
   getHaiKangVideoServer
 } from '@/api/haikang/haikang'
-
 /** ----------------------------------摄像头预览结束------------------------------------- */
-let echarts = require('echarts')
-
 export default {
   components: {
     supermap,
@@ -102,11 +72,6 @@ export default {
     TVWall
   },
   created() {
-    /** ----------------------------------摄像头预览开始------------------------------------- */
-    // const DHWsInstance = DHWs.getInstance()
-    // this.ws = DHWsInstance
-    /** ----------------------------------摄像头预览结束------------------------------------- */
-
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
     window.showDialog = this.showDialog
     window.choseLayerSwitching = this.choseLayerSwitching
@@ -114,20 +79,12 @@ export default {
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
   },
   mounted() {
-    this.selectDeviceType()
-    this.selectKeyAreaList()
+    this.getResourcesCount();
+    this.selectResources();
   },
   data() {
     return {
-      iconCurrentIndex1: '-1',
-      listCurrentIndex1: '-1',
-      listCurrentIndex2: '-1',
       /** ----------------------------------摄像头预览开始------------------------------------- */
-      //大华
-      activePanel: 'key1',
-      isLogin: false,
-      cameraParams: [],
-      ws: null,
       //海康
       cameraTitle: '',
       cameraVisible: false,
@@ -135,26 +92,139 @@ export default {
       pubKey: '',
       oWebControl: null,
       /** ----------------------------------摄像头预览结束------------------------------------- */
-      visuForestCloudMapDeviceBOList: [],
-      visuForestCloudCameraBOList: [],
-      cameraMarkersList: [],
-      sourceData: [],
-      keyAreaList: [],//重点区域
-      iframeBoo: true,
-      open: false,
-      iframeVue: null,
-      activeName: 'info',
-      radio: '1',
-      region: [],
-      //左右缩进
-      indentStyle: '',
-      indentleft: '',
-      indentright: '',
-      indentText: '收起左右栏',
-      indentdisabled: false
+      /** ----------------------------------资源展示用字段------------------------------------- */
+      labelList: ['warning_sign','bridge','culvert'], //资源类型数组，用于资源判断 和资源初始化传参
+      markersList: [], //点位列表
+      resourcesCountList: [],
+      resourcesList: []
     }
   },
   methods: {
+    getResourcesCount(){
+      getResourcesCount().then(res => {
+        this.resourcesCountList = res.data;
+      })
+    },
+    selectResources(){
+      selectResources(this.labelList).then(res => {
+        this.resourcesList = res.data;
+        this.initMarkers(this.resourcesList);
+      })
+    },
+    selectResourcesByLabel(label){
+      let that = this;
+      this.markersList = [];
+      this.resourcesList = [];
+      that.$refs.supermap.clearM(false);
+      that.$refs.supermap.clearM(true);
+      selectResourcesByLabel(label).then(res => {
+        this.resourcesList = res.data;
+        this.initMarkers(this.resourcesList);
+      })
+    },
+    initMarkers(list){
+      if (list != null && list.length > 0) {
+        for (let i = 0; i < list.length; i++) {
+          let markersMap = {
+            lng: 124.59,
+            lat: 43.02,
+            icon: 'marker',
+            bindPopupHtml: '',
+            click: '',
+            parameter: '',
+            keepBindPopup: false,
+            isAggregation: false
+          }
+          if (list.length > 200) {
+            markersMap.isAggregation = true;
+          }
+          // markersMap.icon = 'sj-icon-map-xinshangbao';
+          markersMap.icon = 'traffic-resources-' + this.resourcesList[i].label;
+          console.log(markersMap.icon)
+          markersMap.lng = list[i].longitude;
+          markersMap.lat = list[i].latitude;
+          markersMap.bindPopupHtml = '<div class="map-tip">' +
+            '<span>' +
+            ' <div class="d-l-con">' +
+            '   <div class="d-l-l-text">' +
+            '     <h4>名称：' + list[i].name + '</h4>' +
+            '   </div>' +
+            ' </div>' +
+            '</span>';
+          if(list[i].label == this.labelList[0]){//警示牌的POP
+            markersMap.bindPopupHtml += ''+
+              '<span>' +
+              ' <div class="d-l-con">' +
+              '   <div class="d-l-l-text">' +
+              '     <h4>设置日期：' + list[i].setTime + '</h4>' +
+              '   </div>' +
+              ' </div>' +
+              '</span>' +
+              '<span>' +
+              ' <div class="d-l-con">' +
+              '   <div class="d-l-l-text">' +
+              '     <h4>用途：' + list[i].effect + '</h4>' +
+              '   </div>' +
+              ' </div>' +
+              '</span>';
+          }
+          if(list[i].label == this.labelList[1] || list[i].label == this.labelList[2]){//桥梁涵洞的POP
+            markersMap.bindPopupHtml += ''+
+              '<span>' +
+              ' <div class="d-l-con">' +
+              '   <div class="d-l-l-text">' +
+              '     <h4>竣工日期：' + list[i].completionDate + '</h4>' +
+              '   </div>' +
+              ' </div>' +
+              '</span>' +
+              '<span>' +
+              '<span>' +
+              ' <div class="d-l-con">' +
+              '   <div class="d-l-l-text">' +
+              '     <h4>管理单位：' + list[i].managementUnit + '</h4>' +
+              '   </div>' +
+              ' </div>' +
+              '</span>' +
+              '<span>' +
+              ' <div class="d-l-con">' +
+              '   <div class="d-l-l-text">' +
+              '     <h4>联系电话：' + list[i].manaTel + '</h4>' +
+              '   </div>' +
+              ' </div>' +
+              '</span>' +
+              '<span>' +
+              ' <div class="d-l-con">' +
+              '   <div class="d-l-l-text">' +
+              '     <h4>养护单位：' + list[i].maintenanceUnit + '</h4>' +
+              '   </div>' +
+              ' </div>' +
+              '</span>' +
+              '<span>' +
+              ' <div class="d-l-con">' +
+              '   <div class="d-l-l-text">' +
+              '     <h4>联系电话：' + list[i].mainTel + '</h4>' +
+              '   </div>' +
+              ' </div>' +
+              '</span>';
+          }
+          if(list[i].remark !="" && list[i].remark !=null){
+            markersMap.bindPopupHtml += ''+
+              '<span>' +
+              ' <div class="d-l-con">' +
+              '   <div class="d-l-l-text">' +
+              '     <h4>备注：' + list[i].remark + '</h4>' +
+              '   </div>' +
+              ' </div>' +
+              '</span>' ;
+          }
+          markersMap.bindPopupHtml += '</div>'
+          this.markersList.push(markersMap)
+        }
+        setTimeout(() => {
+          this.$refs.supermap.setMarkers(this.markersList)
+        }, 2000)
+      }
+    },
     /** ----------------------------------底部按钮公用组件开始------------------------------------- */
     showDialog(click) {
       if (click == 'eventLocation') {
@@ -217,279 +287,6 @@ export default {
       this.$refs.supermap.layerSwitchingList(urlList)
     },
     /** ----------------------------------底部按钮公用组件结束------------------------------------- */
-    cameraChat() {
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = echarts.init(document.getElementById('camera-chart'))
-      // 绘制图表
-      const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848']
-      myChart.setOption({
-        dataset: {
-          source: this.sourceData
-        },
-        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'
-          }
-        }]
-      })
-    },
-    selectKeyAreaList() {
-      //获取重点区域
-      let that = this;
-      selectKeyAreaList().then(res => {
-        that.keyAreaList = res
-      })
-    },
-    selectDeviceType(index) {
-      this.iconCurrentIndex1 = index
-      //获取左侧动态感知设备
-      let that = this
-      selectDeviceType().then(res => {
-
-        that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList
-
-        that.region = res.data.visuForestCloudTodaySjfbBOList
-
-        if (res.data.visuForestCloudTodaySjfbBOList != null && res.data.visuForestCloudTodaySjfbBOList
-          .length > 0) {
-          for (let i = 0; i < res.data.visuForestCloudTodaySjfbBOList.length; i++) {
-            let aa = []
-            aa.push(res.data.visuForestCloudTodaySjfbBOList[i].deptName)
-            aa.push(Number(res.data.visuForestCloudTodaySjfbBOList[i].deptCount))
-            this.sourceData.push(aa)
-          }
-        }
-
-        that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
-        this.cameraChat()
-        if (res.data.visuForestCloudCameraBOList != null && res.data.visuForestCloudCameraBOList
-          .length > 0) {
-          for (let i = 0; i < res.data.visuForestCloudCameraBOList.length; i++) {
-            let markersMap = {
-              lng: 124.59,
-              lat: 43.02,
-              icon: 'camera',
-              bindPopupHtml: '',
-              click: 'preview',
-              parameter: '',
-              keepBindPopup: false,
-              isAggregation: false
-            }
-            if (res.data.visuForestCloudCameraBOList.length > 50) {
-              markersMap.isAggregation = true
-            }
-            if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
-              markersMap.parameter = res.data.visuForestCloudCameraBOList[i].cameraCode
-            } else {
-              markersMap.parameter = []
-            }
-
-            markersMap.lng = res.data.visuForestCloudCameraBOList[i].longitude
-            markersMap.lat = res.data.visuForestCloudCameraBOList[i].latitude
-            markersMap.bindPopupHtml = '<div class="map-tip">' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>经纬度：' + res.data.visuForestCloudCameraBOList[i].longitude +
-              ',' + res.data.visuForestCloudCameraBOList[i].latitude + '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>摄像头名称：' + res.data.visuForestCloudCameraBOList[i]
-                .cameraName + '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '</div>'
-            this.cameraMarkersList.push(markersMap)
-          }
-          setTimeout(() => {
-            that.$refs.supermap.clearM(true)
-            that.$refs.supermap.clearM(false)
-            that.$refs.supermap.setMarkers(this.cameraMarkersList)
-          }, 1000)
-        }
-      })
-    },
-    dropLocation(lat, lng, index) {
-      this.listCurrentIndex2 = index
-      this.$refs.supermap.dropLocation(lat, lng)
-    },
-    selectCameraByDeptId(depId) {
-      this.listCurrentIndex1 = depId
-      let that = this
-      that.cameraMarkersList = []
-
-      that.visuForestCloudCameraBOList = []
-      selectCameraByDeptId(depId).then(res => {
-        //根据设备类型查看列表
-        that.visuForestCloudCameraBOList = res.data
-
-        if (res.data != null && res.data.length > 0) {
-          for (let i = 0; i < res.data.length; i++) {
-            let markersMap = {
-              lng: 124.59,
-              lat: 43.02,
-              icon: 'camera',
-              bindPopupHtml: '',
-              click: 'preview',
-              parameter: '',
-              keepBindPopup: false,
-              isAggregation: false
-            }
-            if (res.data.length > 50) {
-              markersMap.isAggregation = true
-            }
-            if (res.data[i].channelCode != null) {
-              markersMap.parameter = res.data[i].cameraCode
-            } else {
-              markersMap.parameter = []
-            }
-
-            markersMap.lng = res.data[i].longitude
-            markersMap.lat = res.data[i].latitude
-            markersMap.bindPopupHtml = '<div class="map-tip">' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>经纬度：' + res.data[i].longitude + ',' + res.data[i].latitude +
-              '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '<span>' +
-              '                  <div class="d-l-con">' +
-              '                  <div class="d-l-l-text">' +
-              '                  <h4>摄像头名称：' + res.data[i].cameraName + '</h4>' +
-              '                </div>' +
-              '                </div>' +
-              '                </span>' +
-              '</div>'
-            this.cameraMarkersList.push(markersMap)
-            //   cameraAccount: "1"
-            // cameraCode: "1000010"
-            // cameraFactory: "2"
-            // cameraIp: "1"
-            // cameraName: "2"
-            // cameraPasword: "2"
-            // cameraPort: 2
-            // cameraRadius: 20
-            // cameraRegion: "3"
-            // dataDeptId: null
-            // dataStatus: null
-            // eventType: null
-            // height: "11"
-            // id: "0d165fc362514f79b12a899ea66295fd"
-            // latitude: "49.325625"
-            // longitude: "125.3333"
-          }
-          setTimeout(() => {
-            that.$refs.supermap.clearM(true)
-            that.$refs.supermap.clearM(false)
-            that.$refs.supermap.setMarkers(this.cameraMarkersList)
-          }, 1000)
-        }
-      })
-    },
-    //吉祥物收起左右框
-    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 = '收起左右栏'
-      }
-    },
     /** ----------------------------------摄像头预览开始------------------------------------- */
     alertLogin: function() {
       this.$modal.msg('登录中....')
@@ -515,35 +312,6 @@ export default {
     /** 预览按钮操作 */
     preview(cameraCode) {
       let that = this
-      // getDahuaVideoServer().then(newResponse => {
-      //   console.log(newResponse)
-      //   this.ws.detectConnectQt().then(res => {
-      //     if (res) { // 连接客户端成功
-      //       this.alertLogin()
-      //       this.ws.login({
-      //         loginIp: newResponse.loginIp,
-      //         loginPort: newResponse.loginPort,
-      //         userName: newResponse.userName,
-      //         userPwd: newResponse.userPwd,
-      //         token: '',
-      //         https: 1
-      //       })
-      //       this.ws.on('loginState', (res) => {
-      //         this.isLogin = res
-      //         console.log('---res-----', res)
-      //         if (res) {
-      //           this.alertLoginSuccess()
-      //           this.activePanel = 'key2'
-      //           this.realTimeVideoDialog(channelCode)
-      //         } else {
-      //           this.alertLoginFailed()
-      //         }
-      //       })
-      //     } else { // 连接客户端失败
-      //       this.alertReinstall()
-      //     }
-      //   })
-      // })
       that.cameraVisible = true
       getHaiKangVideoServer({cameraCode:cameraCode}).then(newResponse => {
         that.cameraTitle = '摄像头-'+newResponse.data.cameraName
@@ -562,8 +330,6 @@ export default {
       this.ws.openVideo(cameraParams)
     },
     /** ----------------------------------摄像头预览结束------------------------------------- */
-
-
     /** ----------------------------------海康摄像头预览开始------------------------------------- */
     // 创建播放实例
     initPlugin(newappkey,newloginIp,newsecret,newloginPort) {
@@ -698,15 +464,7 @@ export default {
 
   }
 }
-
-// 推送消息
-function cbIntegrationCallBack(oData) {
-  console.log(JSON.stringify(oData.responseMsg))
-}
 </script>
-
-
-
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import '@/assets/styles/base.scss';