Project_yhfu/src/views/monitor.vue

<!--监控中心-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar" :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="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:onShe}" @click="sheClick">
                  <!--   -->
                  <div class="icon icon-dot"></div>
                  <div class="icon-text">
                    <h6>{{ visuForestCloudMapDeviceBOList[0].deviceCount }}</h6>
                    <h5>{{ visuForestCloudMapDeviceBOList[0].deviceName }}</h5>
                  </div>
                </div>
                <div class="icon-con w-33 m-btm-no" :class="{on:onChuan}" @click="chuanClick">
                  <div class="icon icon-dot"></div>
                  <div class="icon-text">
                    <h6>{{ sensorNum }}</h6>
                    <h5>传感器</h5>
                  </div>
                </div>
                <div class="icon-con w-33 m-btm-no" :class="{on:onLa}" @click="laClick">
                  <div class="icon icon-dot"></div>
                  <div class="icon-text">
                    <h6>{{ loudspeakerNum }}</h6>
                    <h5>大喇叭</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">-->
              <!--                    &lt;!&ndash; deptId &ndash;&gt;-->
              <!--                    <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>-->
              <!--                    </template>-->
              <!--                  </el-collapse-item>-->
              <!--                </el-collapse>-->
              <!--              </div>-->

              <!--              &lt;!&ndash; 横向柱状 echart &ndash;&gt;-->
              <!--              <div class="overflow-y" style="height: 33vh;">-->
              <!--                <div id="camera-chart" style="width: 100%;height:33vh;"></div>-->
              <!--              </div>-->
              <div class="overflow-y" style="height: 70vh;">
                <div class="i-list-con h-65">
                  <div class="head-container">
                    <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small"
                      prefix-icon="el-icon-search" style="margin-bottom: 20px" />
                  </div>
                  <div class="head-container tree-scrollbar" style="height: 700px;overflow-y:auto;">
                    <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                      :filter-node-method="filterNode" ref="tree" node-key="id" :default-expanded-keys="[100]"
                      @node-click="handleNodeClick" />
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" @preview="preview">
      </supermap>
      <!-- 右侧 -->
      <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-43">
              <el-input v-model="rightDeptName" :placeholder="placeholderMsg" clearable size="small"
                prefix-icon="el-icon-search" style="margin-bottom: 20px" />
              <div class="d-l-con" v-for="(item,index) in visuForestCloudCameraBOListSearch"
                :class="{on:listCurrentIndex2 == index}" v-on:click="dropLocation(item.latitude,item.longitude,index)">
                <div class="d-l-l-text">
                  <i class="iconfont sj-icon-jkzx icon-sxt"></i>
                  <h4>{{ item.cameraName }}</h4>
                </div>
              </div>
            </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 h-25">
              <div class="d-l-con" v-for="(item,index) in keyAreaList" :class="{on:listCurrentIndex3 == index}"
                @click="getRegionalFlag(item.id)">
                <div class="d-l-l-text">
                  <i class="i-small"></i>
                  <h4>{{ item.areaName }}</h4>
                </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>
    <TVWalls ref="TVWalls"></TVWalls>
    <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
      @close="cancelEventLocationShow()">
      <div style="width:1020px;height:625px;position:relative;">
        <!--视频窗口展示---海康-->
        <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    selectDeviceType,
    selectCameraByDeptId,
    getSensorListByDeptId,
    getDlblistBydeptId,
    selectKeyAreaList,
    getCamerasByDeptId,
    getRegionalFlag
  } from '@/api/monitor'
  import {
    treeselect
  } from '@/api/system/dept'
  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 TVWalls from '@/components/TVWalls.vue' //电视墙弹窗

  /** ----------------------------------摄像头预览开始------------------------------------- */
  import {
    getDahuaVideoServer
  } from '@/api/dahua/dahua'
  import {
    getHaiKangVideoServer
  } from '@/api/haikang/haikang'
  import DHWs from '@/dahua/lib/DHWs'

  /** ----------------------------------摄像头预览结束------------------------------------- */
  // import echarts from 'echarts'
  let echarts = require('echarts')
  import Cookies from 'js-cookie';

  export default {
    components: {
      supermap,
      vheader,
      vBottomMenu,
      eventLocation,
      TVWalls,
      TVWall
    },
    created() {
      /** ----------------------------------摄像头预览开始------------------------------------- */
      const DHWsInstance = DHWs.getInstance()
      this.ws = DHWsInstance
      /** ----------------------------------摄像头预览结束------------------------------------- */

      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog = this.showDialog
      window.choseLayerSwitching = this.choseLayerSwitching
      window.choseLayerSwitchingList = this.choseLayerSwitchingList
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
    mounted() {
      this.selectKeyAreaList()
      this.getTreeselect()
      this.deptId = Cookies.get("deptId")
       this.getSensorListByDeptIds()
       this.getDlblistBydeptIds()
      this.selectDeviceType(-1)
      this.bottomMenuList() //获取底部公共组件消息和任务
    },
    data() {
      return {
        // 部门名称
        deptName: undefined,
        // 部门树选项
        deptOptions: undefined,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        iconCurrentIndex1: '-1',
        listCurrentIndex1: '-1',
        listCurrentIndex2: '-1',
        listCurrentIndex3: '-1',
        graphicsList: [], //重点区域
        /** ----------------------------------摄像头预览开始------------------------------------- */
        //大华
        activePanel: 'key1',
        isLogin: false,
        cameraParams: [],
        ws: null,
        //海康
        cameraTitle: '',
        cameraVisible: false,
        initCount: 0,
        pubKey: '',
        oWebControl: null,
        /** ----------------------------------摄像头预览结束------------------------------------- */
        visuForestCloudMapDeviceBOList: [{
          deviceCount: 0,
          deviceName: "摄像头"
        }],
        visuForestCloudCameraBOList: [],
        cameraMarkersList: [],
        sourceData: [],
        keyAreaList: [], //重点区域
        iframeBoo: true,
        open: false,
        iframeVue: null,
        activeName: 'info',
        radio: '1',
        region: [],
        rightDeptName: undefined,
        visuForestCloudCameraBOListSearch: [],
        //左右缩进
        indentStyle: '',
        indentleft: '',
        indentright: '',
        indentText: '收起左右栏',
        indentdisabled: false,
        domId: 'dom1',
        placeholderMsg: "请输入摄像头名称",
        localMark: "she",
        onShe: false,
        onChuan: false,
        onLa: false,
        colors: "green",
        sensorNum: 0,
        deptId: '',
        loudspeakerNum: 0,
        values: Math.random()
      }
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val)
      },
      rightDeptName(val) {
        this.visuForestCloudCameraBOListSearch = [];
        for (let i in this.visuForestCloudCameraBOList) {
          if (this.visuForestCloudCameraBOList[i].cameraName.indexOf(val) != -1) {
            this.visuForestCloudCameraBOListSearch.push(this.visuForestCloudCameraBOList[i]);
          }
        }
      }
    },
    methods: {
      /* 电视墙替换开始 */
      showTVWall(channelCode, channelName) {
        // let channelCode = '6044981090191552';
        // let channelName = '复兴大桥中段-交通事故';
        let tvListJson = [{
          'switchTab': '1',
          'treeLabels': [{
              'labelCode': '123456',
              'labelName': '视频场景',
              'parentLabelCode': null
            },
            {
              'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
              'labelName': channelName,
              'parentLabelCode': 123456
            }
          ],
          'labelChannels': [{
            'channelDates': [{
              'channelCode': channelCode,
              'channelName': channelName,
              'channelSn': null,
              'cameraType': 1,
              'online': 1
            }],
            'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
          }]
        }]
        this.$refs.TVWall.showTVWall(tvListJson, [{
          "channelId": channelCode
        }]);
        this.$refs.supermap.isEditableLayers = false;
        this.$refs.bottomMenu.showChild = false;
        this.$refs.bottomMenu.showBanChild = false;
        this.$refs.bottomMenu.showChangChild = false;
      },
      /* 电视墙替换结束 */
      /** 部门树*/
      // 查询部门下拉树结构
      getTreeselect() {
        treeselect().then(response => {
          console.log(response.data)
          this.deptOptions = response.data
        })
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      // 节点单击事件
      handleNodeClick(data) {
        let that = this
        that.deptId = data.id
        if (that.localMark == 'she') {
          that.selectCameraByDeptId(data.id);
          getCamerasByDeptId(data.id).then(res => {
            that.$refs.TVWalls.showTVWall(res.data, {
              longitude: data.deptLongitude,
              latitude: data.deptLatitude
            });
          })
        } else if (that.localMark == 'chuan') {
          that.getSensorListByDeptId()
        } else if (that.localMark == 'la') {
          that.getDlblistBydeptId()
        }
      },
      sheClick() {
        this.onLa = false
        this.onShe = true
        this.onChuan = false
        this.localMark = 'she'
        this.placeholderMsg = "请输入摄像头名称"
        this.selectDeviceType()
      },
      laClick() {
        this.onLa = true
        this.onShe = false
        this.onChuan = false
        this.localMark = 'la'
        this.placeholderMsg = "请输入大喇叭名称"
        this.getDlblistBydeptId()
      },
      chuanClick() {
        this.onLa = false
        this.onShe = false
        this.onChuan = true
        this.localMark = 'chuan'
        this.placeholderMsg = "请输入传感器名称"
        this.getSensorListByDeptId()
      },
      // 大喇叭
      getDlblistBydeptId() {
        let that = this;
        let markersList = [];
        getDlblistBydeptId(that.deptId).then(function(res) {
            that.loudspeakerNum = res.data.length
            that.visuForestCloudCameraBOListSearch = []
            if (res.data != null && res.data.length > 0) {
              for (let j = 0; j < res.data.length; j++) {
                let dat = {
                  cameraName: res.data[j].name,
                  longitude: res.data[j].longitude,
                  latitude: res.data[j].latitude,
                }
                that.visuForestCloudCameraBOListSearch.push(dat)
              }
              for (let i = 0; i < res.data.length; i++) {
                let markersMap = {
                  lng: 124.59,
                  lat: 43.02,
                  icon: "marker",
                  bindPopupHtml: "",
                  click: "",
                  parameter: "",
                  keepBindPopup: false,
                  isAggregation: false,
                };
                markersMap.icon = "big-horn";

                markersMap.lng = res.data[i].longitude;
                markersMap.lat = res.data[i].latitude;
                markersList.push(markersMap);
              }
              setTimeout(() => {
                that.$refs.supermap.clearM();
                that.$refs.supermap.setMarkers(markersList);
              }, 3000);
            } else {
              setTimeout(() => {
                that.$refs.supermap.clearM();
              }, 3000);
            }
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      getDlblistBydeptIds() {
        let that = this;

        getDlblistBydeptId(that.deptId).then(function(res) {
          that.loudspeakerNum = res.data.length
        })
          .catch(function(error) {
            console.error(error);
          });
      },
      // 传感器
      getSensorListByDeptId() {
        let that = this;
        let markersList = [];
        getSensorListByDeptId(that.deptId).then(function(res) {
            that.visuForestCloudCameraBOListSearch = []
            that.sensorNum = res.data.length
            if (res.data != null && res.data.length > 0) {
              for (let j = 0; j < res.data.length; j++) {
                let dat = {
                  cameraName: res.data[j].deviceName,
                  longitude: res.data[j].longitude,
                  latitude: res.data[j].latitude,
                }
                that.visuForestCloudCameraBOListSearch.push(dat)
              }
              for (let i = 0; i < res.data.length; i++) {
                let markersMap = {
                  lng: 124.59,
                  lat: 43.02,
                  icon: "marker",
                  bindPopupHtml: "",
                  click: "",
                  parameter: "",
                  keepBindPopup: false,
                  isAggregation: false,
                };
                if (res.data[i].deviceCode == '001') { // 水质传感器
                  markersMap.icon = "sj-icon-map-centerdata_water_quality_sensor";
                } else if (res.data[i].deviceCode == '002') { // 水尺
                  markersMap.icon = "sj-icon-map-centerdata_water_gauge";
                } else if (res.data[i].deviceCode == '003') { // 水文监测设备
                  markersMap.icon = "sj-icon-map-centerdata_hydrological_monitoring_equipment";
                } else if (res.data[i].deviceCode == '004') { // 土壤监测设备
                  markersMap.icon = "sj-icon-map-centerdata_soil_monitoring_equipment";
                } else if (res.data[i].deviceCode == '005') { // 病虫害监测站
                  markersMap.icon = "sj-icon-map-centerdata_pest_and_disease_monitoring_station";
                } else if (res.data[i].deviceCode == '006') { // 大气传感器
                  markersMap.icon = "sj-icon-map-centerdata_atmospheric_sensor";
                } else if (res.data[i].deviceCode == '007') { // 水压传感器
                  markersMap.icon = "sj-icon-map-centerdata_water_pressure_sensor";
                }

                markersMap.lng = res.data[i].longitude;
                markersMap.lat = res.data[i].latitude;

                markersList.push(markersMap);
              }
              setTimeout(() => {
                that.$refs.supermap.clearM();
                that.$refs.supermap.setMarkers(markersList);
              }, 3000);
            } else {
              setTimeout(() => {
                that.$refs.supermap.clearM();
              }, 3000);
            }
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      getSensorListByDeptIds() {
        let that = this;
        let markersList = [];
        getSensorListByDeptId(that.deptId).then(function(res) {

          that.sensorNum = res.data.length

        })
          .catch(function(error) {
            console.error(error);
          });
      },
      selectKeyAreaList() {
        this.keyAreaList = []
        //获取重点区域列表
        let that = this
        selectKeyAreaList().then(res => {
          that.keyAreaList = res.data
        })
      },
      getRegionalFlag(id) {
        //获取重点区域
        this.listCurrentIndex3 = id
        let that = this
        getRegionalFlag(id).then(res => {
          that.graphicsList = []
          //地图标记
          if (res.data != null && res.data.length > 0) {
            for (let i = 0; i < res.data.length; i++) {
              that.graphicsList.push(res.data[i].lng)
              that.graphicsList.push(res.data[i].lat)
            }
            setTimeout(() => {
              that.$refs.supermap.clearG()
              that.$refs.supermap.setGraphicsList(this.graphicsList, 'red', 0.8)
            }, 1000)
          } else {
            that.$refs.supermap.clearG()
          }
        })
      },
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      bottomMenuList() {
        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
          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)
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
      selectDeviceType(index) {
        this.iconCurrentIndex1 = index
        //获取左侧动态感知设备
        let that = this
        selectDeviceType().then(res => {
          that.cameraMarkersList = []
          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
          that.visuForestCloudCameraBOListSearch = res.data.visuForestCloudCameraBOList
          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[i].channelCode != null) {
                markersMap.parameter = {
                  code: res.data.visuForestCloudCameraBOList[i].cameraCode,
                  name: res.data.visuForestCloudCameraBOList[i].cameraName,
                  type: res.data.visuForestCloudCameraBOList[i].cameraFactory
                }
              } else {
                markersMap.parameter = []
              }

              markersMap.lng = res.data.visuForestCloudCameraBOList[i].longitude
              markersMap.lat = res.data.visuForestCloudCameraBOList[i].latitude
              markersMap.radius = res.data.visuForestCloudCameraBOList[i].cameraRadius
              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>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>网络运营商：' + (res.data.visuForestCloudCameraBOList[i].operatorType == "1" ?
                  "联通" : (res.data.visuForestCloudCameraBOList[i].operatorType == "2" ? "移动" : "电信")) + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>摄像头半径：' + res.data.visuForestCloudCameraBOList[i]
                .cameraRadius + '米</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.clearMRadius()
              that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
            }, 1000)
          } else {
            setTimeout(() => {
              that.$refs.supermap.clearMRadius()
            }, 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
          that.visuForestCloudCameraBOListSearch = 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[i].channelCode != null) {
                markersMap.parameter = {
                  code: res.data[i].cameraCode,
                  name: res.data[i].cameraName,
                  type: res.data[i].cameraFactory
                }
              } else {
                markersMap.parameter = []
              }

              markersMap.lng = res.data[i].longitude
              markersMap.lat = res.data[i].latitude
              markersMap.radius = res.data[i].cameraRadius
              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>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>网络运营商：' + (res.data[i].operatorType == "1" ? "联通" : (res.data[i]
                  .operatorType == "2" ? "移动" : "电信")) + '</h4>' +
                '                </div>' +
                '                </div>' +
                '                </span>' +
                '<span>' +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                '                  <h4>摄像头半径：' + res.data[i]
                .cameraRadius + '米</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.clearMRadius()
              that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
            }, 1000)
          } else {
            setTimeout(() => {
              that.$refs.supermap.clearMRadius()
            }, 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('登录中....')
      },
      alertLoginSuccess: function() {
        this.$modal.msgSuccess('登录成功！')
      },
      alertLoginFailed: function() {
        this.$modal.msgError('登陆失败！')
      },
      alertReinstall: function() {
        this.$modal.msgWarning('请重新安装客户端')
      },
      cancelEventLocationShow() {
        if (this.oWebControl != null) {
          this.oWebControl.JS_HideWnd() // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
          this.oWebControl.JS_Disconnect().then(function() { // 断开与插件服务连接成功
            },
            function() { // 断开与插件服务连接失败
            })
        }
      },
      /** 预览按钮操作 */
      preview(cameraParam) {
        this.showTVWall(cameraParam.code, cameraParam.name);
      },

      /** 预览按钮操作 */
      preview_废弃(cameraParam) {
        if (cameraParam.type == '1') {
          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(cameraParam.code)
                  } else {
                    this.alertLoginFailed()
                  }
                })
              } else { // 连接客户端失败
                this.alertReinstall()
              }
            })
          })
        } else if (cameraParam.type == '0') {
          let that = this
          that.cameraVisible = true
          getHaiKangVideoServer({
            cameraCode: cameraParam.code
          }).then(newResponse => {
            that.cameraTitle = '摄像头-' + newResponse.data.cameraName
            that.initPlugin(newResponse.data.appkey, newResponse.data.loginIp, newResponse.data.secret, newResponse
              .data.loginPort)
            setTimeout(function() {
              that.playhk(newResponse.data.channelCode)
            }, 5000)
          })
        }

      },
      realTimeVideoDialog(cameraParams) { // 调用弹窗实时播放接口
        if (!this.isLogin) {
          this.$Message.info('正在登陆客户端，请稍等......')
          return false
        }
        const params = [cameraParams];
        this.ws.openVideo(params)
      },
      /** ----------------------------------摄像头预览结束------------------------------------- */


      /** ----------------------------------海康摄像头预览开始------------------------------------- */
      // 创建播放实例
      initPlugin(newappkey, newloginIp, newsecret, newloginPort) {
        let that = this
        that.oWebControl = new WebControl({
          szPluginContainer: 'playWnd', // 指定容器id
          iServicePortStart: 15900, // 指定起止端口号，建议使用该值
          iServicePortEnd: 15909,
          szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
          cbConnectSuccess: function() { // 创建WebControl实例成功
            that.oWebControl.JS_StartService('window', { // WebControl实例创建成功后需要启动服务
              dllPath: './VideoPluginConnect.dll' // 值"./VideoPluginConnect.dll"写死
            }).then(function() { // 启动插件服务成功
              that.oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
                cbIntegrationCallBack: cbIntegrationCallBack
              })

              that.oWebControl.JS_CreateWnd('playWnd', 1020, 600).then(
            function() { //JS_CreateWnd创建视频播放窗口，宽高可设定
                that.init(newappkey, newloginIp, newsecret, newloginPort) // 创建播放实例成功后初始化
              })
            }, function() { // 启动插件服务失败
            })
          },
          cbConnectError: function() { // 创建WebControl实例失败
            that.oWebControl = null
            $('#playWnd').html('插件未启动，正在尝试启动，请稍候...<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
            WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
            initCount++
            if (initCount < 3) {
              setTimeout(function() {
                that.initPlugin(newappkey, newloginIp, newsecret, newloginPort)
              }, 3000)
            } else {
              $('#playWnd').html('插件启动失败，请检查插件是否安装！<a href="./hk/VideoWebPlugin.exe">点击下载插件</a>')
            }
          },
          cbConnectClose: function(bNormalClose) {
            // 异常断开：bNormalClose = false
            // JS_Disconnect正常断开：bNormalClose = true
            console.log('cbConnectClose')
            that.oWebControl = null
          }
        })
      },
      //播放海康摄像头
      playhk(channelCode) {
        var cameraIndexCode = channelCode //获取输入的监控点编号值，必填
        var streamMode = 0 //主子码流标识：0-主码流，1-子码流
        var transMode = 1 //传输协议：0-UDP，1-TCP
        var gpuMode = 0 //是否启用GPU硬解，0-不启用，1-启用
        var wndId = -1 //播放窗口序号（在2x2以上布局下可指定播放窗口）

        cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
        cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')

        this.oWebControl.JS_RequestInterface({
          funcName: 'startPreview',
          argument: JSON.stringify({
            cameraIndexCode: cameraIndexCode, //监控点编号
            streamMode: streamMode, //主子码流标识
            transMode: transMode, //传输协议
            gpuMode: gpuMode, //是否开启GPU硬解
            wndId: wndId //可指定播放窗口
          })
        })
      },
      //初始化
      init(newappkey, newloginIp, newsecret, newloginPort) {
        let that = this
        that.getPubKey(function() {
          ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
          var appkey = newappkey //综合安防管理平台提供的appkey，必填
          var secret = that.setEncrypt(newsecret) //综合安防管理平台提供的secret，必填
          var ip = newloginIp //综合安防管理平台IP地址，必填
          var playMode = 0 //初始播放模式：0-预览，1-回放
          var port = Number(newloginPort) //综合安防管理平台端口，若启用HTTPS协议，默认443
          var snapDir = 'D:\\SnapDir' //抓图存储路径
          var videoDir = 'D:\\VideoDir' //紧急录像或录像剪辑存储路径
          var layout = '1x1' //playMode指定模式的布局
          var enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
          var encryptedFields = 'secret' //加密字段，默认加密领域为secret
          var showToolbar = 1 //是否显示工具栏，0-不显示，非0-显示
          var showSmart = 1 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
          var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' //自定义工具条按钮
          ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

          that.oWebControl.JS_RequestInterface({
            funcName: 'init',
            argument: JSON.stringify({
              appkey: appkey, //API网关提供的appkey
              secret: secret, //API网关提供的secret
              ip: ip, //API网关IP地址
              playMode: playMode, //播放模式（决定显示预览还是回放界面）
              port: port, //端口
              snapDir: snapDir, //抓图存储路径
              videoDir: videoDir, //紧急录像或录像剪辑存储路径
              layout: layout, //布局
              enableHTTPS: enableHTTPS, //是否启用HTTPS协议
              encryptedFields: encryptedFields, //加密字段
              showToolbar: showToolbar, //是否显示工具栏
              showSmart: showSmart, //是否显示智能信息
              buttonIDs: buttonIDs //自定义工具条按钮
            })
          }).then(function(oData) {
            that.oWebControl.JS_Resize(1020, 600) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
          })
        })
      },
      //获取公钥
      getPubKey(callback) {
        let that = this
        that.oWebControl.JS_RequestInterface({
          funcName: 'getRSAPubKey',
          argument: JSON.stringify({
            keyLength: 1024
          })
        }).then(function(oData) {
          console.log(oData)
          if (oData.responseMsg.data) {
            that.pubKey = oData.responseMsg.data
            callback()
          }
        })
      },
      //RSA加密
      setEncrypt(value) {
        var encrypt = new JSEncrypt()
        encrypt.setPublicKey(this.pubKey)
        return encrypt.encrypt(value)
      },
      /** ----------------------------------海康摄像头预览结束------------------------------------- */

    }
  }

  // 推送消息
  function cbIntegrationCallBack(oData) {
    console.log(JSON.stringify(oData.responseMsg))
  }
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
  @import '@/assets/styles/base.scss';

  .playWnd {
    margin: 4px 0 0 8px;
    width: 1020px;
    /*播放容器的宽和高设定*/
    height: 600px;
    border: 1px solid red;
  }
</style>