vue引入海康播放实时监控(包含遮挡裁剪，销毁窗口方法，设置初始化窗口数)

vue引入海康播放实时监控(包含遮挡裁剪，销毁窗口方法，设置初始化窗口数)

项目需要引入海康平台的实时监控，甲方已经有海康官方平台播放地址，我们需要的是将实时监控引入我们页面，因为我们的摄像头在海康平台都可以直接播放，所以我们引入的是插件版本。（：注：直流播放不要用这种方式，用无插件或控件版本，具体询问官方客服）

在海康官方客服处领取下载了海康的有控件版本，无插件及控件版本引入类似

---

index.html

注：框起来是我们项目的解析地址，我们的是存在static里的，这个地方很容易报错，类似webcontrol undefined等等，报错后基本是地址引入问题，把相对路径，绝对路径各种都尝试下，总有一个可以。

  <script src="<%= BASE_URL %>static/hikvideo/jquery-1.12.4.min.js"></script>
  <script src="<%= BASE_URL %>static/hikvideo/jsencrypt.min.js"></script>
  <script src="<%= BASE_URL %>static/hikvideo/jsWebControl-1.0.0.min.js"></script>

---

页面引入：

// 进入页面要先设置ip appkey secret才能成功初始化，这里是在登陆后存了缓存,不变的话可以
直接在组件写死
  //   localStorage.setItem("appKey"); // 综合安防管理平台提供的appkey，必填
  // localStorage.setItem("appSecret"); // 综合安防管理平台提供的secret，必填
  //   localStorage.setItem("ip"); // 综合安防管理平台IP地址，必填
  // show()根据从后台获取到的code实现实时预览
  // initShow() 初始化海康插件
 // stopAllPreview() 停止预览
//this.$refs.myVedio.cutting 裁剪被海康插件遮挡需要显示的内容
  //reduction()  被遮挡的内容关闭后还原被裁减的海康插件
  // :wnd-num.sync="WndNum" 设置播放窗口数，不需要就直接组件设成默认4或者9
  //   :layout.sync="layout" 设置窗口排列方式，不需要就直接组件设成默认2x2或者3x3
// this.$refs.myVedio.back()  离开页面调用销毁插件，断开连接

<template>
  <div class="app-main">
    <!-- <scmsa-split split="vertical" :min-percent="10" :default-percent="15"> -->
    <!-- <div slot="paneL">
          <el-input v-model="keyword" placeholder="搜索" clearable />
          <div class="paneL-tree">
            <el-tree
              ref="tree"
              class="filter-tree"
              :data="treeData"
              :props="treeProps"
              default-expand-all
              :filter-node-method="filterNode"
              :highlight-current="true"
              @node-click="handleClick"
            />
          </div>
        </div> -->
    <!-- <el-button type="primary" v-hasPermi="['placementIntegration:setting']"
      >111</el-button
    > -->
    <div class="headBox">
      <span @click="handleOpen"><i class="el-icon-setting" /> 配置点位</span>
    </div>
    <div id="paneR" slot="paneR">
      <my-vedio
        ref="myVedio"
        :o-width="oWidth"
        :o-height="oHeight"
        :role="role"
        :play-mode="0"
        :wnd-num.sync="WndNum"
        :layout.sync="layout"
        :show="show"
      />
    </div>
    <el-dialog
      id="dialogBox"
      :append-to-body="true"
      title="选择视频点位"
      :visible.sync="dialogVisible"
      width="30%"
      :fullscreen="false"
      @close="handleClose"
    >
      <div>
        <el-input v-model="seachValue" placeholder="请输入内容" maxlength="30">
          <el-button slot="append" icon="el-icon-search" @click="getList(1)" />
        </el-input>
        <div>
          <div style="color: red; font-size: 12px; margin-top: 10px">
            最多可选{
  { WndNum }}个视频
          </div>
          <el-checkbox-group
            v-model="checkedSpotsId"
            :max="WndNum"
            style="max-height: 200px; overflow: auto; margin-top: 10px"
          >
            <el-checkbox v-for="item in spots" :key="item.id" :label="item.id">
              {
  { item.deviceName }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-dialog
      title="电子围栏："
      :visible.sync="dialogVisible"
      width="1000px"
      height="660px"
    >
      <iframe
        frameborder="0"
        width="1000px"
        height="600px"
        style="position: absolute; margin-top: -85px; margin-left: -20px"
      />
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->

    <!-- </scmsa-split> -->
  </div>
</template>

<script>
import ResizeObserver from 'resize-observer-polyfill'
// import * as api from "@/api/vedio.js";
import myVedio from '@/views/placementIntegration/components/vedio'
import { hikScreen } from './api/index'
export default {
  components: {
    myVedio
  },
  data() {
    return {
      dialogVisible: false,
      keyword: '',
      treeData: [],
      treeProps: {
        children: 'children',
        label: 'nodeName'
      },
      role: 0, // 0：普通用户，1：可以操作摄像头用户
      oHeight: 0,
      oWidth: 0,
      // 配置查询关键字
      seachValue: '',
      // 多选框
      // 默认播放
      checkedSpots: [],
      // 默认点亮
      checkedSpotsId: [],
      // 多选选项
      spots: [],
      // 窗口数
      WndNum: 4,
      layout: '2x2'
    }
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开当前路由的时候被调用，this可以被访问到
    // console.log(to.name, from, "//"); // 可以访问this
    // var that = this;
    // console.log("beforeRouteLeave");
    // if (to.name !== "PlacementIntegration") {
    if (this.$refs.myVedio) {
      this.$refs.myVedio.back()
    }
    // }
    next()
  },
  computed: {
    //我们导航栏菜单的下拉菜单被海康插件遮挡计算裁剪区域，不需要的去掉
    getStoreItem() {
      //监听下拉弹窗是否显示
      return this.$store.state.user.dropdownVisible
    },
    //我们导航栏菜单的右键菜单被海康插件遮挡计算裁剪区域，不需要的去掉
    getStoreItemRight() {
       //监听右键菜单弹窗是否显示
      return this.$store.state.user.rightMenuLeft
    }
  },

  watch: {

    keyword(val) {
      this.$refs.tree.filter(val)
    },
    // $route(to, from) {
    //   console.log("this.$route", to, from);
    //   if (to.name !== "PlacementIntegration") {
    //     this.