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: 0.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">
                  <!-- @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="sj-search">
                <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small"
                  prefix-icon="el-icon-search" />
              </div>
              <div class="i-list-con" style="height: 62vh">
                <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>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <!--<supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"-->
      <!--:mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview">-->
      <!--</supermap>-->
      <supermap ref="supermap" @preview="preview" @jump="jump" :showLayer="true"> </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: 0.4rem" />
            <div class="this-title">
              <span>列表</span>
              <dv-decoration-3 style="width: 150px; height: 15px; margin-right: 1rem" />
            </div>
            <div class="sj-search">
              <el-input v-model="rightDeptName" :placeholder="placeholderMsg" clearable size="small"
                prefix-icon="el-icon-search" />
            </div>
            <div class="i-list-con" style="height: 37vh;">
              <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 icon-sxt" :class="jkListIcon"></i>
                  <h4>{{ item.cameraName }}</h4>
                  <!-- <h4 v-if="onChuan" v-html="cgqData[index]"></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: 0.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,index)">
                <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 {
    getMonitorDeviceAndDataList,
    selectDeviceType,
    selectCameraByDeptId,
    selectKeyAreaList,
    getSensorListByDeptId,
    getDlblistBydeptId,
    getCamerasByDeptId,
    getRegionalFlag,
  } from "@/api/monitor";

  import supermap from "@/components/supermap-2.5d.vue"; //超图
  import {
    treeselect
  } from "@/api/system/dept";
  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";

  import {
    getUserProfile
  } from "@/api/system/user";
  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.getSuperMapUrl();
      this.deptId = Cookies.get("deptId");
      setTimeout(() => {
        this.selectKeyAreaList();
        this.getTreeselect();
      }, 2000)
      this.getMonitorDeviceAndDataLists();
      this.bottomMenuList(); //获取底部公共组件消息和任务
      this.getDlblistBydeptIds(-1);
      this.selectDeviceType();
    },
    beforeDestroy() {
      clearInterval(this.cgqTimer); //关闭
    },
    data() {
      return {
        jkListIcon: 'sj-icon-jkzx',
        cgqData: [],
        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: [],
        //左右缩进
        indentStyle: "",
        indentleft: "",
        indentright: "",
        indentText: "收起左右栏",
        indentdisabled: false,
        domId: "dom1",
        rightDeptName: undefined,
        visuForestCloudCameraBOListSearch: [],
        // 部门名称
        deptName: undefined,
        // 部门树选项
        deptOptions: undefined,
        defaultProps: {
          children: "children",
          label: "label",
        },
        deptId: "",
        placeholderMsg: "请输入摄像头名称",
        localMark: "she",
        onShe: false,
        onChuan: false,
        onLa: false,
        colors: "green",
        sensorNum: 0,
        loudspeakerNum: 0,
        cgqTimer: null,
        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: {
      //初始化地图数据
      getSuperMapUrl() {
        getUserProfile().then(response => {
          let mapDeptId = response.mapDeptId
          let num = 0;
          if (mapDeptId == "365") {
            num = 0;
          } else if (mapDeptId == "369") {
            num = 1;
          } else if (mapDeptId == "371") {
            num = 2;
          } else if (mapDeptId == "373") {
            num = 3;
          } else if (mapDeptId == "372") {
            num = 4;
          } else if (mapDeptId == "370") {
            num = 5;
          }
          this.$refs.supermap.removeAllviewer(num, -1);
        });
      },
      // setcgqValue: function() {
      //   let that = this
      //   for (let i = 0; i < that.visuForestCloudCameraBOListSearch.length; i++) {
      //     var color = "green";
      //     var value = Math.random();
      //     var up = "▲";
      //     var down = "▼";
      //     if (value > 0.5) {
      //       color = "red";
      //       value = value + "" + up;
      //     } else {
      //       value = value + "" + down;
      //     }
      //     that.cgqData.push("<span style='color:" + color + "'>" + value + "</span>")
      //   }
      //   setInterval(function() {
      //     var color = "green";
      //     var value = Math.random();
      //     var up = "▲";
      //     var down = "▼";
      //     if (value > 0.5) {
      //       color = "red";
      //       value = value + "" + up;
      //     } else {
      //       value = value + "" + down;
      //     }
      //     that.cgqData.push("<span style='color:" + color + "'>" + value + "</span>")
      //     if (that.cgqData.length > that.visuForestCloudCameraBOListSearch.length) {
      //       console.log(that.cgqData)
      //       that.cgqData.splice(0, 1)
      //     }
      //   }, 5000)
      // },
      /* 电视墙替换开始 */
      //传感器2
      getMonitorDeviceAndDataLists() {
        let that = this;
        getMonitorDeviceAndDataList(that.deptId).then((res) => {
          that.sensorNum = res.data.length;
        });
      },
      showTVWall(cameraParam) {
        let tvListJson = [{
          "switchTab": "2",
          "treeLabels": [{
              "id": null,
              "labelCode": "999",
              "labelName": "电视墙",
              "cameraType": null,
              "parentLabelCode": ""
            },
            {
              "id": "spcamera00010",
              "labelCode": cameraParam.cameraCode,
              "labelName": cameraParam.cameraName,
              "cameraType": cameraParam.cameraType,
              "parentLabelCode": "999"
            }
          ],
          "labelChannels": [{
            "labelCode": cameraParam.cameraCode,
            "channelDates": [{
              "channelCode": cameraParam.cameraCode,
              "channelName": cameraParam.cameraName,
              "channelSn": null,
              "cameraType": cameraParam.cameraType,
              "online": "1",
              "cameraCode": null
            }]
          }]
        }]
        this.$refs.TVWall.showTVWall(tvListJson, [{
          channelId: cameraParam.channelCode,
        }, ]);
        this.$refs.bottomMenu.showMeasure = 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;
        console.log("节点单击事件", data, that.localMark);
        // this.findCameraByDept(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.getMonitorDeviceAndDataList();
        } else if (that.localMark == "la") {
          that.getDlblistBydeptId();
        }
      },
      sheClick() {
        this.onLa = false;
        this.onShe = true;
        this.onChuan = false;
        this.deptId = Cookies.get("deptId");
        this.localMark = "she";
        this.placeholderMsg = "请输入摄像头名称";
        clearInterval(this.cgqTimer);
        this.selectDeviceType();
        this.jkListIcon = 'sj-icon-jkzx'
      },
      laClick() {
        this.onLa = true;
        this.onShe = false;
        this.onChuan = false;
        this.deptId = Cookies.get("deptId");
        this.localMark = "la";
        this.placeholderMsg = "请输入云广播名称";
        this.deptId = Cookies.get("deptId");
        clearInterval(this.cgqTimer);
        this.getDlblistBydeptId();
        this.jkListIcon = 'sj-icon-labaguangbo'
      },
      chuanClick() {
        this.onLa = false;
        this.onShe = false;
        this.onChuan = true;
        this.deptId = Cookies.get("deptId");
        this.localMark = "chuan";
        this.placeholderMsg = "请输入传感器名称";
        this.getMonitorDeviceAndDataList();
        clearInterval(this.cgqTimer);
        this.cgqTimer = setInterval(() => {
          this.getMonitorDeviceAndDataList();
        }, 20 * 1000);
        this.jkListIcon = 'sj-icon-centerdata-t-firecontrol-fire-pressure-sensor'
      },
      // 云广播
      getDlblistBydeptId(index) {
        let that = this;
        let markersList = [];
        getDlblistBydeptId(that.deptId)
          .then(function(res) {
            // that.loudspeakerNum = res.data.length;
            that.visuForestCloudCameraBOListSearch = [];
            that.visuForestCloudCameraBOList = [];
            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);
                that.visuForestCloudCameraBOList.push(dat)
              }
              for (let i = 0; i < res.data.length; i++) {
                let markersMap = {
                  lng: 124.59,
                  lat: 43.02,
                  icon: "big-horn",
                  bindPopupHtml: '<div class="map-tip">' +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>名称：" +
                    (res.data[i].name ? res.data[i].name : "") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>位置：" +
                    (res.data[i].position ? res.data[i].position : "") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<span>" +
                    '                  <div class="d-l-con">' +
                    '                  <div class="d-l-l-text">' +
                    "                  <h4>备注：" +
                    (res.data[i].remark ? res.data[i].remark : "") +
                    "</h4>" +
                    "                </div>" +
                    "                </div>" +
                    "                </span>" +
                    "<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>" +
                    "</div>",
                  click: "jump",
                  parameter: "",
                  keepBindPopup: false,
                  isAggregation: false,
                };

                if (res.data[i].broadcastUse == '1') {
                  markersMap.icon = "big-horn-emergency";
                } else if (res.data[i].broadcastUse == '2') {
                  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.clearMRadius();
                that.$refs.supermap.setMarkers(markersList);
              }, 2000);
            } else {
              setTimeout(() => {
                that.$refs.supermap.clearM();
                that.$refs.supermap.clearMRadius();
              }, 2000);
            }
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      jump() {
        // 跳转云广播页面
        window.open("https://sts.sty1818.com");
      },
      getDlblistBydeptIds(index) {
        let that = this;
        let markersList = [];
        getDlblistBydeptId(that.deptId)
          .then(function(res) {
            that.loudspeakerNum = res.data.length;
          })
          .catch(function(error) {
            console.error(error);
          });
      },
      getMonitorDeviceAndDataList() {
        let list = [];
        let markersList = [];
        getMonitorDeviceAndDataList(this.deptId).then((res) => {
          this.visuForestCloudCameraBOListSearch = [];
          this.visuForestCloudCameraBOList = []
          list = res.data;
          //this.sensorNum = list.length
          list.forEach((item) => {
            let dat = {
              cameraName: item.deviceName,
              longitude: item.longitude,
              latitude: item.latitude,
            };
            this.visuForestCloudCameraBOListSearch.push(dat);
            this.visuForestCloudCameraBOList.push(dat);
            let markersMap = {
              lng: 124.59,
              lat: 43.02,
              icon: "marker",
              bindPopupHtml: '<div class="map-tip">' +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>名称：" +
                (item.deviceName ? item.deviceName : "") +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>厂家：" +
                (item.brand ? item.brand : "") +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "<span>" +
                '                  <div class="d-l-con">' +
                '                  <div class="d-l-l-text">' +
                "                  <h4>经纬度：" +
                item.longitude +
                "," +
                item.latitude +
                "</h4>" +
                "                </div>" +
                "                </div>" +
                "                </span>" +
                "</div>",

              click: "",
              parameter: "",
              name: "",
              keepBindPopup: false,
              isAggregation: false,
            };
            if (item.deviceType == 1) {
              // 水质传感器
              if (item.workingStatus == 0) {
                markersMap.icon = "sj-icon-map-centerdata_water_quality_sensor";
              } else if (item.workingStatus == 1) {
                markersMap.icon = "sj-icon-map-not-centerdata_water_quality_sensor";
              }
              if (item.data != null) {
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>水中PH：" +
                  (item.data.waterPh ? item.data.waterPh + "pH" : "0pH") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>化学需氧量：" +
                  (item.data.cod ? item.data.cod + "mg/L" : "0mg/L") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>氨氮：" +
                  (item.data.ammoniaNitrogen ?
                    item.data.ammoniaNitrogen + "mg/L" :
                    "0mg/L") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>水温：" +
                  (item.data.waterTemperature ?
                    item.data.waterTemperature + "°C" :
                    "0°C") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
              }
            } else if (item.deviceType == 8) {
              // 水尺
              if (item.workingStatus == 0) {
                markersMap.icon = "sj-icon-map-centerdata_water_gauge";
              } else if (item.workingStatus == 1) {
                markersMap.icon = "sj-icon-map-not-centerdata_water_gauge";
              }
            } else if (item.deviceType == 3) {
              // 水文监测设备
              markersMap.icon = "sj-icon-map-centerdata_hydrological_monitoring_equipment";
            } else if (item.deviceType == 2) {
              // 土壤监测设备
              if (item.workingStatus == 0) {
                markersMap.icon = "sj-icon-map-centerdata_soil_monitoring_equipment";
              } else if (item.workingStatus == 1) {
                markersMap.icon = "sj-icon-map-not-centerdata_soil_monitoring_equipment";
              }
              if (item.data != null) {
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>钾含量：" +
                  (item.data.potassium ? item.data.potassium + "mg/kg" : "0mg/kg") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>导电率：" +
                  (item.data.conductivity ?
                    item.data.conductivity + "us/cm" :
                    "0us/cm") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>氮含量：" +
                  (item.data.nitrogen ? item.data.nitrogen + "mg/kg" : "0mg/kg") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>温度：" +
                  (item.data.temperature ? item.data.temperature + "°C" : "0°C") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>ph值：" +
                  (item.data.ph ? item.data.ph + "PH" : "0PH") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>湿度：" +
                  (item.data.humidity ? item.data.humidity + "%RH" : "0%RH") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>磷含量：" +
                  (item.data.phosphorus ?
                    item.data.phosphorus + "mg/kg" :
                    "0mg/kg") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
              }
            } else if (item.deviceType == 4) {
              // 病虫害监测站
              if (item.workingStatus == 0) {
                markersMap.icon = "sj-icon-map-centerdata_pest_and_disease_monitoring_station";
              } else if (item.workingStatus == 1) {
                markersMap.icon = "sj-icon-map-not-centerdata_pest_and_disease_monitoring_station";
              }
            } else if (item.deviceType == 5) {
              // 大气传感器
              if (item.workingStatus == 0) {
                markersMap.icon = "sj-icon-map-centerdata_atmospheric_sensor";
              } else if (item.workingStatus == 1) {
                markersMap.icon = "sj-icon-map-not-centerdata_atmospheric_sensor";
              }
              if (item.data != null) {
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>二氧化硫：" +
                  (item.data.sulfurDioxide ?
                    item.data.sulfurDioxide + "ug/m³" :
                    "0ug/m³") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>一氧化碳：" +
                  (item.data.carbonMonoxide ?
                    item.data.carbonMonoxide + "ug/m³" :
                    "0ug/m³") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>温度：" +
                  (item.data.temperature ? item.data.temperature + "°C" : "0°C") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>二氧化氮：" +
                  (item.data.nitrogenDioxide ?
                    item.data.nitrogenDioxide + "ug/m³" :
                    "0ug/m³") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
              }
            } else if (item.deviceType == 6) {
              // 水压传感器
              if (item.workingStatus == 0) {
                markersMap.icon = "sj-icon-map-centerdata_water_pressure_sensor";
              } else if (item.workingStatus == 1) {
                markersMap.icon = "sj-icon-map-not-centerdata_water_pressure_sensor";
              }
              if (item.data != null) {
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>下限警报使能：" +
                  (item.data.thresholdLowEnable ? item.data.thresholdLowEnable + "MPa" : "0MPa") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>上限警报使能：" +
                  (item.data.thresholdHighEnable ?
                    item.data.thresholdHighEnable + "MPa" :
                    "0MPa") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>水压力值：" +
                  (item.data.hydraulicValue ?
                    item.data.hydraulicValue + "MPa" :
                    "0MPa") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>水压下限阈值：" +
                  (item.data.hydraulicThresholdMin ?
                    item.data.hydraulicThresholdMin + "MPa" :
                    "0MPa") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>水压上限阈值：" +
                  (item.data.hydraulicThresholdMax ?
                    item.data.hydraulicThresholdMax + "MPa" :
                    "0MPa") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "</div>";
              }
            } else if (item.deviceType == 7) {
              //水流速传感器
              if (item.workingStatus == 0) {
                markersMap.icon = "sj-icon-map-centerdata_water_flow_rate";
              } else if (item.workingStatus == 1) {
                markersMap.icon = "sj-icon-map-not-centerdata_water_flow_rate";
              }
              if (item.data != null) {
                markersMap.bindPopupHtml +=
                  '<div class="map-tip">' +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>瞬时流速：" +
                  (item.data.V1 ? item.data.V1 + "m/s" : "0m/s") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span>" +
                  "<span>" +
                  '                  <div class="d-l-con">' +
                  '                  <div class="d-l-l-text">' +
                  "                  <h4>瞬时流量：" +
                  (item.data.Q ? item.data.Q + "m³/s" : "0m³/s") +
                  "</h4>" +
                  "                </div>" +
                  "                </div>" +
                  "                </span></div>";
              }
            }
            markersMap.lng = item.longitude;
            markersMap.lat = item.latitude;
            markersList.push(markersMap);
          });
          console.log(markersList);
        });
        setTimeout(() => {
          this.$refs.supermap.clearM();
          this.$refs.supermap.clearMRadius();
          this.$refs.supermap.setMarkers(markersList);
        }, 2000);
      },
      // 传感器
      getSensorListByDeptIds(index) {
        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, index) {
        //获取重点区域
        this.listCurrentIndex3 = index;
        let that = this;
        getRegionalFlag(id).then((res) => {
          that.graphicsList = [];
          //地图标记
          let latLngs = JSON.parse(res.data.data.latLngs != null ? res.data.data.latLngs : '[]')
          if (latLngs.length > 0) {
            for (let i = 0; i < latLngs.length; i++) {
              that.graphicsList.push(latLngs[i].lng);
              that.graphicsList.push(latLngs[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.bottomMenu.showMeasure = 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.bottomMenu.showMeasure) {
            this.$refs.bottomMenu.showMeasure = true;
          } else {
            this.$refs.bottomMenu.showMeasure = false;
          }
        } else if (click == "layerSwitching") {
          this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = false;
          this.$refs.bottomMenu.showChild = false;
          this.$refs.bottomMenu.showBanChild = false;
          this.$refs.bottomMenu.showChangChild = false;
        } else if (click == "forestban") {
          this.$refs.bottomMenu.showMeasure = 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.bottomMenu.showMeasure = 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);
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
      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: "5%",
            // right: "4%",
            bottom: "0%",
            width: "75%",
            containLabel: true,
          },
          dataZoom: [{
            show: true,
            type: "slider",
            yAxisIndex: 0,
            left: 10,
            start: 0,
            end: this.sourceData.length > 10 ? 40 : 100,
            width: 15,
          }, ],
          xAxis: {
            show: false,
            type: "value",
            left: 10,
          },
          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",
            },
          }, ],
        });
      },
      selectDeviceType(index) {
        this.iconCurrentIndex1 = index;
        //获取左侧动态感知设备
        let that = this;
        selectDeviceType(that.deptId).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;
          // 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[i].channelCode != null) {
                markersMap.parameter = res.data.visuForestCloudCameraBOList[i]
              } else {
                markersMap.parameter = [];
              }

              if (res.data.visuForestCloudCameraBOList[i].cameraUse == 1) {
                if (res.data.visuForestCloudCameraBOList[i].workingStatus == 0) {
                  markersMap.icon = 'sj-icon-map-centerdata-slmonitor'
                  markersMap.click = 'preview'
                } else if (res.data.visuForestCloudCameraBOList[i].workingStatus == 1) {
                  markersMap.icon = 'sj-icon-map-not-centerdata-slmonitor'
                  markersMap.click = ''
                }

              } else if (res.data.visuForestCloudCameraBOList[i].cameraUse == 2) {
                if (res.data.visuForestCloudCameraBOList[i].workingStatus == 0) {
                  markersMap.icon = "camera";
                  markersMap.click = 'preview'
                } else if (res.data.visuForestCloudCameraBOList[i].workingStatus == 1) {
                  markersMap.icon = "camera-not";
                  markersMap.click = ''
                }
              } else if (res.data.visuForestCloudCameraBOList[i].cameraUse == 3) {
                if (res.data.visuForestCloudCameraBOList[i].workingStatus == 0) {
                  markersMap.icon = 'sj-icon-map-centerdata-slmonitor-traffic'
                  markersMap.click = 'preview'
                } else if (res.data.visuForestCloudCameraBOList[i].workingStatus == 1) {
                  markersMap.icon = 'sj-icon-map-not-centerdata-slmonitor-traffic'
                  markersMap.click = ''
                }

              } else if (res.data.visuForestCloudCameraBOList[i].cameraUse == 4) {
                if (res.data.visuForestCloudCameraBOList[i].workingStatus == 0) {
                  markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera'
                  markersMap.click = 'preview'
                } else if (res.data.visuForestCloudCameraBOList[i].workingStatus == 1) {
                  markersMap.icon = 'sj-icon-map-not-centerdata-sand-quarry-camera'
                  markersMap.click = ''
                }

              } else if (res.data.visuForestCloudCameraBOList[i].cameraUse == 5) {
                if (res.data.visuForestCloudCameraBOList[i].workingStatus == 0) {
                  markersMap.icon = 'sj-icon-map-centerdata-river_camera'
                  markersMap.click = 'preview'
                } else if (res.data.visuForestCloudCameraBOList[i].workingStatus == 1) {
                  markersMap.icon = 'sj-icon-map-not-centerdata-t-hydraulic-reservoir-camera'
                  markersMap.click = ''
                }
              }
              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);
            }
            setTimeout(() => {
              that.$refs.supermap.clearM();
              that.$refs.supermap.clearMRadius();
              that.$refs.supermap.setMarkersRadius(that.cameraMarkersList);
            }, 3000);
          } else {
            setTimeout(() => {
              that.$refs.supermap.clearM();
              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 = res.data[i]
              } else {
                markersMap.parameter = [];
              }

              if (res.data[i].cameraUse == 1) {
                if (res.data[i].workingStatus == 0) {
                  markersMap.icon = 'sj-icon-map-centerdata-slmonitor'
                  markersMap.click = 'preview'
                } else if (res.data.visuForestCloudCameraBOList[i].workingStatus == 1) {
                  markersMap.icon = 'sj-icon-map-not-centerdata-slmonitor'
                  markersMap.click = ''
                }

              } else if (res.data[i].cameraUse == 2) {
                if (res.data[i].workingStatus == 0) {
                  markersMap.icon = "camera";
                  markersMap.click = 'preview'
                } else if (res.data[i].workingStatus == 1) {
                  markersMap.icon = "camera-not";
                  markersMap.click = ''
                }
              } else if (res.data[i].cameraUse == 3) {
                if (res.data[i].workingStatus == 0) {
                  markersMap.icon = 'sj-icon-map-centerdata-slmonitor-traffic'
                  markersMap.click = 'preview'
                } else if (res.data[i].workingStatus == 1) {
                  markersMap.icon = 'sj-icon-map-not-centerdata-slmonitor-traffic'
                  markersMap.click = ''
                }

              } else if (res.data[i].cameraUse == 4) {
                if (res.data[i].workingStatus == 0) {
                  markersMap.icon = 'sj-icon-map-centerdata-sand-quarry-camera'
                  markersMap.click = 'preview'
                } else if (res.data[i].workingStatus == 1) {
                  markersMap.icon = 'sj-icon-map-not-centerdata-sand-quarry-camera'
                  markersMap.click = ''
                }

              } else if (res.data[i].cameraUse == 5) {
                if (res.data[i].workingStatus == 0) {
                  markersMap.icon = 'sj-icon-map-centerdata-river_camera'
                  markersMap.click = 'preview'
                } else if (res.data[i].workingStatus == 1) {
                  markersMap.icon = 'sj-icon-map-not-centerdata-t-hydraulic-reservoir-camera'
                  markersMap.click = ''
                }
              }

              if (res.data.visuForestCloudCameraBOList[i].channelCode != null) {
                markersMap.parameter = res.data.visuForestCloudCameraBOList[i]
              } 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);
            }, 3000);
          } 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);
      },

      /** 预览按钮操作 */
      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>