Project_yhfu/src/views/monitor.vue

<!--监控中心-->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <div class="leftbar" :class="indentleft" ref="left">
        <div class="forthis">
          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
            <div class="this-title">
              <span>事态感知</span>
              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
            </div>
            <div class="i-list-con h-73">
              <div class="d-l-con-icon">
                <div class="icon-con w-33 m-btm-no" :class="{on:iconCurrentIndex1==index}"
                     v-for="(item,index) in visuForestCloudMapDeviceBOList"
                     v-on:click="selectDeviceType(index)">
                  <!--   -->
                  <div class="icon icon-dot"></div>
                  <div class="icon-text">
                    <h6>{{ item.deviceCount }}</h6>
                    <h5>{{ item.deviceName }}</h5>
                  </div>
                </div>
                <div class="icon-con w-33 m-btm-no">
                  <div class="icon icon-dot"></div>
                  <div class="icon-text">
                    <h6>0</h6>
                    <h5>传感器</h5>
                  </div>
                </div>
                <div class="icon-con w-33 m-btm-no">
                  <div class="icon icon-dot"></div>
                  <div class="icon-text">
                    <h6>0</h6>
                    <h5>大喇叭</h5>
                  </div>
                </div>
              </div>
<!--              <div class="overflow-y" style="height: 33vh;">-->
<!--                <el-collapse accordion>-->
<!--                  <el-collapse-item v-for="(item,index) in region" :key="index">-->
<!--                    &lt;!&ndash; deptId &ndash;&gt;-->
<!--                    <template slot="title">-->
<!--                      <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"-->
<!--                           v-on:click="selectCameraByDeptId(item.deptId)">-->
<!--                        <div class="d-l-l-text">-->
<!--                          <h4 class="collapse-title">{{ item.deptName }}</h4>-->
<!--                        </div>-->
<!--                        <div class="d-l-l-count">{{ item.deptCount }}</div>-->
<!--                      </div>-->
<!--                    </template>-->
<!--                  </el-collapse-item>-->
<!--                </el-collapse>-->
<!--              </div>-->

<!--              &lt;!&ndash; 横向柱状 echart &ndash;&gt;-->
<!--              <div class="overflow-y" style="height: 33vh;">-->
<!--                <div id="camera-chart" style="width: 100%;height:33vh;"></div>-->
<!--              </div>-->
              <div  class="overflow-y" style="height: 70vh;">
                <div class="i-list-con h-65">
                  <div class="head-container">
                    <el-input
                      v-model="deptName"
                      placeholder="请输入部门名称"
                      clearable
                      size="small"
                      prefix-icon="el-icon-search"
                      style="margin-bottom: 20px"
                    />
                  </div>
                  <div class="head-container tree-scrollbar" style="height: 700px;overflow-y:auto;">
                    <el-tree
                      :data="deptOptions"
                      :props="defaultProps"
                      :expand-on-click-node="false"
                      :filter-node-method="filterNode"
                      ref="tree"
                      node-key="id"
                      :default-expanded-keys="[100]"
                      @node-click="handleNodeClick"
                    />
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview">
      </supermap>
      <!-- 右侧 -->
      <div class="rightbar" :class="indentright" ref="right">
        <div class="forthis">
          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
            <div class="this-title">
              <span>列表</span>
              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
            </div>
            <div class="i-list-con h-43">
              <div class="d-l-con" v-for="(item,index) in visuForestCloudCameraBOList"
                   :class="{on:listCurrentIndex2 == index}"
                   v-on:click="dropLocation(item.latitude,item.longitude,index)">
                <div class="d-l-l-text">
                  <i class="iconfont sj-icon-jkzx icon-sxt"></i>
                  <h4>{{ item.cameraName }}</h4>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
        <div class="forthis">
          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
            <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
            <div class="this-title">
              <span>重点区域</span>
              <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;"/>
            </div>
            <div class="i-list-con h-25">
              <div class="d-l-con" v-for="(item,index) in keyAreaList" :class="{on:listCurrentIndex3 == index}" @click="getRegionalFlag(item.id)">
                <div class="d-l-l-text">
                  <i class="i-small"></i>
                  <h4>{{ item.areaName }}</h4>
                </div>
              </div>
            </div>
          </dv-border-box-13>
        </div>
      </div>
      <vBottomMenu ref="bottomMenu"></vBottomMenu>
<!--      <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">-->
<!--        <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img-->
<!--          src="@/assets/images/mascot.png"/></div>-->
<!--      </el-tooltip>-->

    </div>
    <eventLocation ref="eventLocation"></eventLocation>
    <TVWall ref="TVWall"></TVWall>
    <el-dialog :title="cameraTitle" :visible.sync="cameraVisible" v-if="cameraVisible" customClass="videoCustomWidth"
               @close="cancelEventLocationShow()">
      <div style="width:1020px;height:625px;position:relative;">
        <!--视频窗口展示---海康-->
        <div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectDeviceType,
  selectCameraByDeptId,
  selectKeyAreaList,
  getRegionalFlag
} from '@/api/monitor'
import { treeselect } from '@/api/system/dept'
import supermap from '@/components/supermap' //超图
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 {
  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')

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

    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    window.showDialog = this.showDialog
    window.choseLayerSwitching = this.choseLayerSwitching
    window.choseLayerSwitchingList = this.choseLayerSwitchingList
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
  },
  mounted() {
    this.selectDeviceType(-1)
    this.selectKeyAreaList()
    this.bottomMenuList() //获取底部公共组件消息和任务
    this.getTreeselect()
  },
  data() {
    return {
      // 部门名称
      deptName: undefined,
// 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      iconCurrentIndex1: '-1',
      listCurrentIndex1: '-1',
      listCurrentIndex2: '-1',
      listCurrentIndex3: '-1',
      graphicsList:[],//重点区域
      /** ----------------------------------摄像头预览开始------------------------------------- */
      //大华
      activePanel: 'key1',
      isLogin: false,
      cameraParams: [],
      ws: null,
      //海康
      cameraTitle: '',
      cameraVisible: false,
      initCount: 0,
      pubKey: '',
      oWebControl: null,
      /** ----------------------------------摄像头预览结束------------------------------------- */
      visuForestCloudMapDeviceBOList: [],
      visuForestCloudCameraBOList: [],
      cameraMarkersList: [],
      sourceData: [],
      keyAreaList: [],//重点区域
      iframeBoo: true,
      open: false,
      iframeVue: null,
      activeName: 'info',
      radio: '1',
      region: [],
      //左右缩进
      indentStyle: '',
      indentleft: '',
      indentright: '',
      indentText: '收起左右栏',
      indentdisabled: false,
      domId: 'dom1',
    }
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    /** 部门树*/
// 查询部门下拉树结构
    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) {
      // this.findCameraByDept(data.id)
      this.selectCameraByDeptId(data.id);
    },
    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++) {
            let latlng = {
              lat: res.data[i].lat,
              lng: res.data[i].lng
            }
            that.graphicsList.push(latlng)
          }
          setTimeout(() => {
            that.$refs.supermap.clearG()
            that.$refs.supermap.setGraphicsList(this.graphicsList, 'red')
          }, 1000)
        } else {
          that.$refs.supermap.clearG()
        }
      })
    },
    /** ----------------------------------底部按钮公用组件开始------------------------------------- */
    bottomMenuList() {
      this.$refs.bottomMenu.selectTaskList()//获取任务列表
      this.$refs.bottomMenu.selectMessageList()//获取消息列表
    },
    showDialog(click) {
      if (click == 'eventLocation') {
        this.$refs.eventLocation.showEventLocation()
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
      } else if (click == 'editableLayers') {
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
        if (!this.$refs.supermap.isEditableLayers) {
          this.$refs.supermap.isEditableLayers = true
        } else {
          this.$refs.supermap.isEditableLayers = false
        }
      } else if (click == 'layerSwitching') {
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
        if (!this.$refs.bottomMenu.showChild) {
          this.$refs.bottomMenu.showChild = true
        } else {
          this.$refs.bottomMenu.showChild = false
        }
      } else if (click == 'TVWall') {
        this.$refs.TVWall.showTVWall()
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChangChild = false
      } else if (click == 'forestban') {
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showChild = false
        this.$refs.bottomMenu.showChangChild = false
        if (!this.$refs.bottomMenu.showBanChild) {
          this.$refs.bottomMenu.showBanChild = true
        } else {
          this.$refs.bottomMenu.showBanChild = false
        }
      } else if (click == 'forestchang') {
        this.$refs.supermap.isEditableLayers = false
        this.$refs.bottomMenu.showBanChild = false
        this.$refs.bottomMenu.showChild = false
        if (!this.$refs.bottomMenu.showChangChild) {
          this.$refs.bottomMenu.showChangChild = true
        } else {
          this.$refs.bottomMenu.showChangChild = false
        }
      }

    },
    //选择图层
    choseLayerSwitching(url, isClear) {
      this.$refs.supermap.layerSwitching(url, isClear)
    },
    //选择图层(传递数组)
    choseLayerSwitchingList(urlList) {
      this.$refs.supermap.layerSwitchingList(urlList)
    },
    /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    selectDeviceType(index) {
      this.iconCurrentIndex1 = index
      //获取左侧动态感知设备
      let that = this
      selectDeviceType().then(res => {
        that.cameraMarkersList=[]
        that.visuForestCloudMapDeviceBOList = res.data.visuForestCloudMapDeviceBOList

        that.region = res.data.visuForestCloudTodaySjfbBOList

        if (res.data.visuForestCloudTodaySjfbBOList != null && res.data.visuForestCloudTodaySjfbBOList
          .length > 0) {
          for (let i = 0; i < res.data.visuForestCloudTodaySjfbBOList.length; i++) {
            let aa = []
            aa.push(res.data.visuForestCloudTodaySjfbBOList[i].deptName)
            aa.push(Number(res.data.visuForestCloudTodaySjfbBOList[i].deptCount))
            this.sourceData.push(aa)
          }
        }

        that.visuForestCloudCameraBOList = res.data.visuForestCloudCameraBOList
        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,
                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].cameraFactory=="1"?"大华":"海康") + '</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '<span>' +
              '                  <div class="d-l-con">' +
              '                  <div class="d-l-l-text">' +
              '                  <h4>摄像头半径：' + res.data.visuForestCloudCameraBOList[i]
                .cameraRadius + '米</h4>' +
              '                </div>' +
              '                </div>' +
              '                </span>' +
              '</div>'
            this.cameraMarkersList.push(markersMap)
            //   cameraAccount: "1"
            // cameraCode: "1000010"
            // cameraFactory: "2"
            // cameraIp: "1"
            // cameraName: "2"
            // cameraPasword: "2"
            // cameraPort: 2
            // cameraRadius: 20
            // cameraRegion: "3"
            // dataDeptId: null
            // dataStatus: null
            // eventType: null
            // height: "11"
            // id: "0d165fc362514f79b12a899ea66295fd"
            // latitude: "49.325625"
            // longitude: "125.3333"
          }
          setTimeout(() => {
            that.$refs.supermap.clearM(true)
            that.$refs.supermap.clearM(false)
            that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
          }, 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
        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,
                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].cameraFactory=="1"?"大华":"海康") + '</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.clearM(true)
            that.$refs.supermap.clearM(false)
            that.$refs.supermap.setMarkersRadius(this.cameraMarkersList)
          }, 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) {
      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>