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" -->
                  <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"> </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 sj-icon-jkzx icon-sxt"></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)"
              >
                <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();

    setTimeout(() => {
    this.selectKeyAreaList();
    this.getTreeselect();
    this.deptId = Cookies.get("deptId");
    this.getMonitorDeviceAndDataLists();
    }, 2000)
    this.bottomMenuList(); //获取底部公共组件消息和任务
    // this.getSensorListByDeptId(-1)
    // this.getDlblistBydeptId(-1)
    // this.getMonitorDeviceAndDataList()
    // this.cgqTimer = setInterval(() => {
    //   this.getMonitorDeviceAndDataList()
    // }, 5 * 60 * 1000)
    // this.getDlblistBydeptIds(-1);
    this.selectDeviceType(-1);
  },
  beforeDestroy() {
    clearInterval(this.cgqTimer); //关闭
  },
  data() {
    return {
      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().then((res) => {
        that.sensorNum = res.data.length;
      });
    },
    showTVWall(channelCode, channelName) {
      let tvListJson = [
        {
          switchTab: "2",
          treeLabels: [
            {
              id: null,
              labelCode: "999",
              labelName: "电视墙",
              cameraType: null,
              parentLabelCode: "",
            },
            {
              id: "spcamera00010",
              labelCode: channelCode,
              labelName: channelName,
              cameraType: "1",
              parentLabelCode: "999",
            },
          ],
          labelChannels: [
            {
              labelCode: channelCode,
              channelDates: [
                {
                  channelCode: channelCode,
                  channelName: channelName,
                  channelSn: null,
                  cameraType: "1",
                  online: "1",
                  cameraCode: "1",
                },
              ],
            },
          ],
        },
      ];
      this.$refs.TVWall.showTVWall(tvListJson, [
        {
          channelId: 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.localMark = "she";
      this.placeholderMsg = "请输入摄像头名称";
      clearInterval(this.cgqTimer);
      this.selectDeviceType();
    },
    laClick() {
      this.onLa = true;
      this.onShe = false;
      this.onChuan = false;
      this.localMark = "la";
      this.placeholderMsg = "请输入云广播名称";
      this.deptId = Cookies.get("deptId");
      clearInterval(this.cgqTimer);
      this.getDlblistBydeptId();
    },
    chuanClick() {
      this.onLa = false;
      this.onShe = false;
      this.onChuan = true;
      this.localMark = "chuan";
      this.placeholderMsg = "请输入传感器名称";
      this.deptId = null;
      this.getMonitorDeviceAndDataList();
      clearInterval(this.cgqTimer);
      this.cgqTimer = setInterval(() => {
        this.getMonitorDeviceAndDataList();
      }, 20 * 1000);
    },
    // // 云广播
    // getDlblistBydeptId(index) {
    //   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:
    //               '<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,
    //           };
    //           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 = [];
        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);
          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) {
            // 水质传感器
            markersMap.icon = "sj-icon-map-centerdata_water_quality_sensor";
            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.bod ? item.data.bod+"mg/L" : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>信号强度：" +
              // (item.data.signalStrength ? item.data.signalStrength+"" : "") +
              // "</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>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>水质悬浮物：" +
              // (item.data.waterQualitySuspension ? item.data.waterQualitySuspension : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +

              "</div>";
          } else if (item.deviceType == "002") {
            // 水尺
            markersMap.icon = "sj-icon-map-centerdata_water_gauge";
          } else if (item.deviceType == "003") {
            // 水文监测设备
            markersMap.icon =
              "sj-icon-map-centerdata_hydrological_monitoring_equipment";
          } else if (item.deviceType == 2) {
            // 土壤监测设备
            markersMap.icon =
              "sj-icon-map-centerdata_soil_monitoring_equipment";
            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.signalStrength ? item.data.signalStrength : "") +
              // "</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.errorCode ? item.data.errorCode : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>版本号：" +
              // (item.data.version ? item.data.version : "") +
              // "</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>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>电压：" +
              // (item.data.voltage ? item.data.voltage : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>"
              "</div>";
          } else if (item.deviceType == 4) {
            // 病虫害监测站
            markersMap.icon =
              "sj-icon-map-centerdata_pest_and_disease_monitoring_station";
          } else if (item.deviceType == 5) {
            // 大气传感器
            markersMap.icon = "sj-icon-map-centerdata_atmospheric_sensor";
            markersMap.bindPopupHtml +=
              '<div class="map-tip">' +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>总挥发性有机物：" +
              // (item.data.tvoc ? item.data.tvoc : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              "<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.batteryVoltage ? item.data.batteryVoltage : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>信号强度：" +
              // (item.data.signalStrength ? item.data.signalStrength : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>可吸入颗粒物：" +
              // (item.data.suctionParticle ? item.data.suctionParticle : "") +
              // "</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.ozone ? item.data.ozone : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>总悬浮颗粒物：" +
              // (item.data.tsp ? item.data.tsp : "") +
              // "</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.humidity ? item.data.humidity : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>细颗粒：" +
              // (item.data.fineParticle ? item.data.fineParticle+"ug/m3" : "") +
              // "</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>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>风向：" +
              // (item.data.windDirection ? item.data.windDirection : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>风速：" +
              // (item.data.windSpeed ? item.data.windSpeed : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              "</div>";
          } else if (item.deviceType == 6) {
            // 水压传感器
            markersMap.icon = "sj-icon-map-centerdata_water_pressure_sensor";
            markersMap.bindPopupHtml +=
              '<div class="map-tip">' +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>设备编码：" +
              // (item.data.IMEI ? item.data.IMEI : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              "<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.signalPower ? item.data.signalPower : "") +
              // "</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>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>水压力值：" +
              // (item.data.hydraulicValue ? item.data.hydraulicValue : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>心跳周期：" +
              // (item.data.heartbeatTime ? item.data.heartbeatTime : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>电池电压：" +
              // (item.data.batteryVoltage ? item.data.batteryVoltage : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>电池电量：" +
              // (item.data.batteryValue ? item.data.batteryValue : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +

              "</div>";
          } else if (item.deviceType == 7) {
            //水流速传感器
            markersMap.icon = "sj-icon-map-centerdata_water_flow_rate";
            markersMap.bindPopupHtml +=
              '<div class="map-tip">' +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>两流量累计之和：" +
              // (item.data.Q ? item.data.Q : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              // "<span>" +
              // '                  <div class="d-l-con">' +
              // '                  <div class="d-l-l-text">' +
              // "                  <h4>瞬时流量：" +
              // (item.data.Q1 ? item.data.Q1+"m3/s" : "") +
              // "</h4>" +
              // "                </div>" +
              // "                </div>" +
              // "                </span>" +
              "<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);
    },
    // 传感器
    getSensorListByDeptId(index) {
      let that = this;
      let markersList = [];
      getSensorListByDeptId(that.deptId)
        .then(function (res) {
          // that.setcgqValue()
          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].deviceType == 1) {
                // 水质传感器
                markersMap.icon = "sj-icon-map-centerdata_water_quality_sensor";
              } else if (res.data[i].deviceType == "002") {
                // 水尺
                markersMap.icon = "sj-icon-map-centerdata_water_gauge";
              } else if (res.data[i].deviceType == "003") {
                // 水文监测设备
                markersMap.icon =
                  "sj-icon-map-centerdata_hydrological_monitoring_equipment";
              } else if (res.data[i].deviceType == 2) {
                // 土壤监测设备
                markersMap.icon =
                  "sj-icon-map-centerdata_soil_monitoring_equipment";
              } else if (res.data[i].deviceType == 4) {
                // 病虫害监测站
                markersMap.icon =
                  "sj-icon-map-centerdata_pest_and_disease_monitoring_station";
              } else if (res.data[i].deviceType == 5) {
                // 大气传感器
                markersMap.icon = "sj-icon-map-centerdata_atmospheric_sensor";
              } else if (res.data[i].deviceType == 6) {
                // 水压传感器
                markersMap.icon =
                  "sj-icon-map-centerdata_water_pressure_sensor";
              }

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

              markersList.push(markersMap);
            }
            // that.setcgqValue()
            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);
          }
          that.onLa = false;
          that.onShe = false;
          that.onChuan = true;
        })
        .catch(function (error) {
          console.error(error);
        });
    },
    // 传感器
    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) {
      //获取重点区域
      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.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().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 = {
                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);
          }
          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 = {
                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);
          }, 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.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>