Project_yhfu/src/views/resources.vue

<!-- 交通资源 -->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div
        class="leftbar w-10"
        ref="left"
        style="width: 12rem !important; height: 80vh; overflow-y: hidden"
      >
        <div class="forthis">
          <dv-border-box-13
          backgroundColor="rgba(12, 19, 38, .90)"
            style="padding-bottom: 1rem; height: 80vh"
          >
            <img
              src="../assets/images/integrated/light.png"
              style="width: 100%; margin-top: 0.4rem"
            />
            <div class="sj-search" v-show="showSearch">
              <el-input
                v-model="searchName"
                placeholder="请输入名称"
                @blur="searchByName()"
                clearable
                size="small"
                prefix-icon="el-icon-search"
              />
            </div>
            <div class="i-list-con" style="height: 71vh">
              <div class="d-l-con-icon">
                <div
                  class="icon-con"
                  :class="{ on: iconCurrentIndex == item.resourceTable }"
                  v-for="(item, index) in resourcesCountList"
                  v-on:click="selectResourcesByLabel(item.type, searchName)"
                >
                  <!--v-on:click="selectResourcesByLabel(item.label)">-->
                  <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
                  <div
                    class="iconfont icon icon-normal"
                    :class="item.icon"
                    :style="'background:' + item.bg"
                  ></div>
                  <div class="icon-text">
                    <h6>{{ item.num }}</h6>
                    <!--<h6>{{ item.count }}</h6>-->
                    <h5>{{ item.name }}</h5>
                    <!--<h5>{{ item.resourceName }}</h5>-->
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>

      <!--<div class="leftbar" ref="left">-->
      <!--<div class="forthis">-->
      <!--<dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">-->
      <!--<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>-->
      <!--<div class="i-list-con h-80" style="padding-left: 1rem;">-->
      <!--<el-collapse accordion>-->
      <!--<el-collapse-item v-for="(item,index) in resourcesCountList" :key="index">-->
      <!--<template slot="title">-->
      <!--<div class="d-l-con sj-collapse" v-on:click="selectResourcesByLabel(item.label)">-->
      <!--<div class="d-l-l-text">-->
      <!--<h4 class="collapse-title">{{ item.name }}</h4>-->
      <!--</div>-->
      <!--<div class="d-l-l-count">{{item.value}}</div>-->
      <!--</div>-->
      <!--</template>-->
      <!--</el-collapse-item>-->
      <!--</el-collapse>-->
      <!--<div class="i-list-con small-bottom-margin h-30">-->
      <!--</div>-->
      <!--</div>-->
      <!--</dv-border-box-13>-->
      <!--</div>-->
      <!--</div>-->
      <!-- 地图 -->
      <!--      @preview="preview"-->
      <supermap
        ref="supermap"
        style="width: 100%; height: 100vh"
        @sewageOutletClick="sewageOutletClick"
      >
      </supermap>
      <vBottomMenu ref="bottomMenu"></vBottomMenu>
    </div>
    <resourcesdialog ref="resourcesdialog"></resourcesdialog>
    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
    <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 {getResourcesCount, selectResources, selectResourcesByLabel,} from "@/api/resources";
  import supermap from "@/components/supermap-2.5d"; //超图
  import vheader from "@/components/v-header.vue"; //一体化共用头部
  import vBottomMenu from "@/components/vBottomMenu.vue"; //一体化公共底部菜单
  import eventLocation from "@/components/eventLocation.vue"; //事件定位弹窗
  import TVWall from "@/components/TVWall.vue"; //电视墙弹窗
  import {getIconBg} from "@/api/components/sookaMapIcon"; //资源底色控制文件
  import resourcesdialog from "@/views/resourcesdialog.vue"; //事件详情弹窗
  /** ----------------------------------摄像头预览开始------------------------------------- */
  import {getHaiKangVideoServer} from "@/api/haikang/haikang";
import {getUserProfile} from "@/api/system/user";

  /** ----------------------------------摄像头预览结束------------------------------------- */
export default {
  components: {
    resourcesdialog,
    supermap,
    vheader,
    vBottomMenu,
    eventLocation,
    TVWall,
  },
  created() {
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog;
    window.choseLayerSwitching = this.choseLayerSwitching;
    window.choseLayerSwitchingList = this.choseLayerSwitchingList;
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    // 初始化地图数据
    this.getSuperMapUrl();
    this.getResourcesCount();
    this.selectResources();
    this.bottomMenuList(); //获取底部公共组件消息和任务
  },
  data() {
    return {
      // 搜索框
      showSearch: false,
      // 搜索名称
      searchName: undefined,
      // 搜索类型
      searchType: undefined,
      iconCurrentIndex: "",
      /** ----------------------------------摄像头预览开始------------------------------------- */
      //海康
      cameraTitle: "",
      cameraVisible: false,
      initCount: 0,
      pubKey: "",
      oWebControl: null,
      /** ----------------------------------摄像头预览结束------------------------------------- */
      /** ----------------------------------资源展示用字段------------------------------------- */
      labelList: ["warning_sign", "bridge", "culvert"], //资源类型数组，用于资源判断 和资源初始化传参
      markersList: [], //点位列表
      resourcesCountList: [],
      resourcesList: [],
    };
  },
  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);
      });
    },
    // 根据名称筛选资源点位
    searchByName() {
      this.$modal.msgSuccess("正在查询，请稍后...");
      this.selectResourcesByLabel(this.searchType, this.searchName);
    },
    //查询各类资源的数量
    getResourcesCount() {
      let that = this;
      getResourcesCount().then((res) => {
        console.log("res=", res);
        console.log("res.data=", res.data);
        this.resourcesCountList = res.data;
        this.resourcesCountList.forEach(function (data, index) {
          // // that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.resourceTable.split('_').slice(-1))
          // console.log("data.type.split('_').slice(-1)", data.type.split('_').slice(-1));
          // that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-"));
          let icon =
            "sj" +
            "-" +
            "icon" +
            "-" +
            data.type.replaceAll("_", "-").replaceAll("@", "-");
          console.log("icon_" + (index + 1) + "=", icon);
          that.$set(that.resourcesCountList[index], "icon", icon);
          that.$set(that.resourcesCountList[index], "bg", getIconBg(icon));
          // alert(resourcesCountList[i])
          // console.log("data resourcesCountList[index]=", data.type)
          // console.log("resourcesCountList[index]=", that.resourcesCountList[index])

          // if(index < 5){
          //   // that.fireControlViewPoint(data.type, 'undefined');
          //   that.selectResourcesByLabel(data.type, '所有');
          // }
        });
        //数据自动落点开始
        let maxCount = 100; //落点数超过这个数的资源不落点
        let list = res.data;
        let counts = [];
        let points = [];
        let types = [];
        for (let i = 0; i < list.length; i++) {
          //获取符合要求的类型及数量
          if (list[i].num <= maxCount) {
            counts.push(list[i].num);
            points.push({
              type: list[i].type,
              count: list[i].num,
            });
          }
        }
        for (let i = 0; i < points.length; i++) {
          if (points[i].count == Math.max(...counts)) {
            types.push(points[i].type);
            let countsTemp = [];
            for (let j = 0; j < counts.length; j++) {
              if (counts[j] != Math.max(...counts)) {
                countsTemp.push(counts[j]);
              }
            }
            counts = countsTemp;
            break;
          }
        }
        for (let i = 0; i < points.length; i++) {
          if (points[i].count == Math.max(...counts)) {
            types.push(points[i].type);
            break;
          }
        }
        for (let i = 0; i < types.length; i++) {
          that.selectResourcesByLabel(types[i], "所有");
        }
        //数据自动落点结束
      });
    },
    //初始化所有资源并落点
    selectResources() {
      selectResources(this.labelList).then((res) => {
        this.resourcesList = res.data;
        // this.initMarkers(this.resourcesList);
      });
    },
    //点击左侧某资源，将该资源进行落点
    selectResourcesByLabel(label, name) {
      // 搜索框
      // if(name == 'undefined' && this.showSearch == false){
      // if(name == '所有' && this.showSearch == false){
      if (name == "所有") {
        name = undefined;
      } else {
        this.showSearch = true;
      }
      // 搜索类型
      this.searchType = label;
      console.log(label);
      let that = this;
      //每次点击，先将原有点位清空后重新落点
      this.markersList = [];
      this.resourcesList = [];
      that.$refs.supermap.clearM(false);
      that.$refs.supermap.clearM(true);
      selectResourcesByLabel(label, name).then((res) => {
        console.log("res.data=", res.data);
        // this.resourcesList = res.data;
        this.resourcesList = res.data.resourceList;
        this.initMarkers(this.resourcesList, label.split("_").slice(-1));
        // this.initMarkers(this.resourcesList);
      });
    },
    showResourcesDialog(param) {
      //资源信息弹出
      this.$refs.resourcesdialog.showResourcesDialog(param);
    },
    sewageOutletClick(data) {
      const params = Object.assign({});
      params.longitude = data.longitude;
      params.latitude = data.latitude;

      const treeLabels = [
        {
          id: null,
          labelCode: "999",
          labelName: "电视墙",
          cameraType: null,
          parentLabelCode: "",
        },
      ];
      const labelChannels = [];
      for (let i in data.cameraList) {
        treeLabels.push({
          id: null,
          labelCode: data.cameraList[i].cameraCode,
          labelName: data.cameraList[i].cameraName,
          cameraType: "1",
          parentLabelCode: "999",
        });
        labelChannels.push({
          labelCode: data.cameraList[i].cameraCode,
          channelDates: [
            {
              channelCode: data.cameraList[i].cameraCode,
              channelName: data.cameraList[i].cameraName,
              channelSn: null,
              cameraType: "1",
              online: "1",
              cameraCode: "1",
            },
          ],
        });
      }
      const dianshiqiang = [
        {
          switchTab: "2",
          treeLabels: treeLabels,
          labelChannels: labelChannels,
        },
      ];
      if (data.cameraList.length > 0) {
        this.$refs.TVWall.showTVWall1(
          data.longitude,
          data.latitude,
          dianshiqiang
        );
      }
    },
    initMarkers(list, type) {
      console.log("list=", list);
      if (list != null && list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          let markersMap = {
            lng: 124.59,
            lat: 43.02,
            icon: "marker",
            bindPopupHtml: "",
            click: "sewageOutletClick",
            parameter: list[i],
            keepBindPopup: false,
            isAggregation: false,
          };
          if (list.length > 200) {
            markersMap.isAggregation = true;
          }
          //根据标签确定资源的图标
          markersMap.icon =
            "traffic-resources-" +
            (type
              ? type == "sign"
                ? "warning_sign"
                : type
              : this.resourcesList[i].label);
          markersMap.lng = list[i].longitude;
          markersMap.lat = list[i].latitude;
          //POP的通用部分
          markersMap.bindPopupHtml =
            '<div class="map-tip">' +
            "<span>" +
            ' <div class="d-l-con">' +
            '   <div class="d-l-l-text">' +
            "     <h4>名称：" +
            (list[i].name ? list[i].name : "") +
            "</h4>" +
            "   </div>" +
            " </div>" +
            "</span>";
          if (
            list[i].label == this.labelList[0] ||
            this.labelList[0].indexOf(type) != -1
          ) {
            //警示牌的POP
            markersMap.bindPopupHtml +=
              "" +
              "<span>" +
              ' <div class="d-l-con">' +
              '   <div class="d-l-l-text">' +
              "     <h4>设置日期：" +
              ((list[i].setTime ? list[i].setTime : list[i].set_time)
                ? list[i].setTime
                  ? list[i].setTime
                  : list[i].set_time
                : "") +
              "</h4>" +
              "   </div>" +
              " </div>" +
              "</span>" +
              "<span>" +
              ' <div class="d-l-con">' +
              '   <div class="d-l-l-text">' +
              "     <h4>用途：" +
              (list[i].effect ? list[i].effect : "") +
              "</h4>" +
              "   </div>" +
              " </div>" +
              "</span>";
          }
          if (
            list[i].label == this.labelList[1] ||
            list[i].label == this.labelList[2] ||
            this.labelList[1].indexOf(type) != -1 ||
            this.labelList[2].indexOf(type) != -1
          ) {
            //桥梁涵洞的POP
            markersMap.bindPopupHtml +=
              "" +
              "<span>" +
              ' <div class="d-l-con">' +
              '   <div class="d-l-l-text">' +
              "     <h4>竣工日期：" +
              ((
                list[i].completionDate
                  ? list[i].completionDate
                  : list[i].completion_date
              )
                ? list[i].completionDate
                  ? list[i].completionDate
                  : list[i].completion_date
                : "") +
              "</h4>" +
              "   </div>" +
              " </div>" +
              "</span>" +
              "<span>" +
              "<span>" +
              ' <div class="d-l-con">' +
              '   <div class="d-l-l-text">' +
              "     <h4>管理单位：" +
              ((
                list[i].managementUnit
                  ? list[i].managementUnit
                  : list[i].management_unit
              )
                ? list[i].managementUnit
                  ? list[i].managementUnit
                  : list[i].management_unit
                : "") +
              "</h4>" +
              "   </div>" +
              " </div>" +
              "</span>" +
              "<span>" +
              ' <div class="d-l-con">' +
              '   <div class="d-l-l-text">' +
              "     <h4>联系电话：" +
              ((list[i].manaTel ? list[i].manaTel : list[i].mana_tel)
                ? list[i].manaTel
                  ? list[i].manaTel
                  : list[i].mana_tel
                : "") +
              "</h4>" +
              "   </div>" +
              " </div>" +
              "</span>" +
              "<span>" +
              ' <div class="d-l-con">' +
              '   <div class="d-l-l-text">' +
              "     <h4>养护单位：" +
              ((
                list[i].maintenanceUnit
                  ? list[i].maintenanceUnit
                  : list[i].maintenance_unit
              )
                ? list[i].maintenanceUnit
                  ? list[i].maintenanceUnit
                  : list[i].maintenance_unit
                : "") +
              "</h4>" +
              "   </div>" +
              " </div>" +
              "</span>" +
              "<span>" +
              ' <div class="d-l-con">' +
              '   <div class="d-l-l-text">' +
              "     <h4>联系电话：" +
              ((list[i].mainTel ? list[i].mainTel : list[i].main_tel)
                ? list[i].mainTel
                  ? list[i].mainTel
                  : list[i].main_tel
                : "") +
              "</h4>" +
              "   </div>" +
              " </div>" +
              "</span>";
          }
          if (list[i].remark != "" && list[i].remark != null) {
            //POP的备注部分
            markersMap.bindPopupHtml +=
              "" +
              "<span>" +
              ' <div class="d-l-con">' +
              '   <div class="d-l-l-text">' +
              "     <h4>备注：" +
              (list[i].remark ? list[i].remark : "") +
              "</h4>" +
              "   </div>" +
              " </div>" +
              "</span>";
          }
          markersMap.bindPopupHtml += "</div>";
          this.markersList.push(markersMap);
        }
        setTimeout(() => {
          // return
          this.$refs.supermap.clearM();
          this.$refs.supermap.setMarkers(this.markersList);
        }, 2000);
      }
    },
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    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);
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    /** ----------------------------------摄像头预览开始------------------------------------- */
    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(cameraCode) {
      let that = this;
      that.cameraVisible = true;
      getHaiKangVideoServer({ cameraCode: cameraCode }).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;
      }
      this.ws.openVideo(cameraParams);
    },
    /** ----------------------------------摄像头预览结束------------------------------------- */
    /** ----------------------------------海康摄像头预览开始------------------------------------- */
    // 创建播放实例
    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("插件未启动，正在尝试启动，请稍候...");
          WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
          initCount++;
          if (initCount < 3) {
            setTimeout(function () {
              that.initPlugin(newappkey, newloginIp, newsecret, newloginPort);
            }, 3000);
          } else {
            $("#playWnd").html("插件启动失败，请检查插件是否安装！");
          }
        },
        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);
    },
    /** ----------------------------------海康摄像头预览结束------------------------------------- */
  },
};
</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>