Project_yhfu/src/views/resources.vue

<!-- 交通资源 -->
<template>
  <div class="visual-con">
    <!--头部-->
    <vheader></vheader>
    <!--主体-->
    <div class="visual-body">
      <!-- 左侧 -->
      <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>
      <!-- 地图 -->
      <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
                :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview" @showResourcesDialog="showResourcesDialog">
      </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' //超图
  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 resourcesdialog from '@/views/resourcesdialog.vue' //事件详情弹窗
  /** ----------------------------------摄像头预览开始------------------------------------- */
  import {
    getHaiKangVideoServer
  } from '@/api/haikang/haikang'
  /** ----------------------------------摄像头预览结束------------------------------------- */
  export default {
    components: {
      resourcesdialog,
      supermap,
      vheader,
      vBottomMenu,
      eventLocation,
      TVWall
    },
    created() {
      /** ----------------------------------底部按钮公用组件开始------------------------------------- */
      window.showDialog = this.showDialog
      window.choseLayerSwitching = this.choseLayerSwitching
      window.choseLayerSwitchingList = this.choseLayerSwitchingList
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
    },
    mounted() {
      this.getResourcesCount();
      this.selectResources();
      this.bottomMenuList() //获取底部公共组件消息和任务
    },
    data() {
      return {
        /** ----------------------------------摄像头预览开始------------------------------------- */
        //海康
        cameraTitle: '',
        cameraVisible: false,
        initCount: 0,
        pubKey: '',
        oWebControl: null,
        /** ----------------------------------摄像头预览结束------------------------------------- */
        /** ----------------------------------资源展示用字段------------------------------------- */
        labelList: ['warning_sign','bridge','culvert'], //资源类型数组，用于资源判断 和资源初始化传参
        markersList: [], //点位列表
        resourcesCountList: [],
        resourcesList: []
      }
    },
    methods: {
      //查询各类资源的数量
      getResourcesCount(){
        getResourcesCount().then(res => {
          this.resourcesCountList = res.data;
        })
      },
      //初始化所有资源并落点
      selectResources(){
        selectResources(this.labelList).then(res => {
          this.resourcesList = res.data;
          this.initMarkers(this.resourcesList);
        })
      },
      //点击左侧某资源，将该资源进行落点
      selectResourcesByLabel(label){
        console.log(label)
        let that = this;
        //每次点击，先将原有点位清空后重新落点
        this.markersList = [];
        this.resourcesList = [];
        that.$refs.supermap.clearM(false);
        that.$refs.supermap.clearM(true);
        selectResourcesByLabel(label).then(res => {
          this.resourcesList = res.data;
          this.initMarkers(this.resourcesList);
        })
      },
      showResourcesDialog(param) {
        //资源信息弹出
        this.$refs.resourcesdialog.showResourcesDialog(param);
      },
      initMarkers(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: '',
              parameter: '',
              keepBindPopup: false,
              isAggregation: false
            }
            if (list.length > 200) {
              markersMap.isAggregation = true;
            }
            //根据标签确定资源的图标
            markersMap.icon = 'traffic-resources-' + this.resourcesList[i].label;
            markersMap.parameter = this.resourcesList[i].id + "," + this.resourcesList[i].label;
            markersMap.click = 'showResourcesDialog';
            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 + '</h4>' +
              '   </div>' +
              ' </div>' +
              '</span>';
            if(list[i].label == this.labelList[0]){//警示牌的POP
              markersMap.bindPopupHtml += ''+
                '<span>' +
                ' <div class="d-l-con">' +
                '   <div class="d-l-l-text">' +
                '     <h4>设置日期：' + list[i].setTime + '</h4>' +
                '   </div>' +
                ' </div>' +
                '</span>' +
                '<span>' +
                ' <div class="d-l-con">' +
                '   <div class="d-l-l-text">' +
                '     <h4>用途：' + list[i].effect + '</h4>' +
                '   </div>' +
                ' </div>' +
                '</span>';
            }
            if(list[i].label == this.labelList[1] || list[i].label == this.labelList[2]){//桥梁涵洞的POP
              markersMap.bindPopupHtml += ''+
                '<span>' +
                ' <div class="d-l-con">' +
                '   <div class="d-l-l-text">' +
                '     <h4>竣工日期：' + list[i].completionDate + '</h4>' +
                '   </div>' +
                ' </div>' +
                '</span>' +
                '<span>' +
                '<span>' +
                ' <div class="d-l-con">' +
                '   <div class="d-l-l-text">' +
                '     <h4>管理单位：' + list[i].managementUnit + '</h4>' +
                '   </div>' +
                ' </div>' +
                '</span>' +
                '<span>' +
                ' <div class="d-l-con">' +
                '   <div class="d-l-l-text">' +
                '     <h4>联系电话：' + list[i].manaTel + '</h4>' +
                '   </div>' +
                ' </div>' +
                '</span>' +
                '<span>' +
                ' <div class="d-l-con">' +
                '   <div class="d-l-l-text">' +
                '     <h4>养护单位：' + list[i].maintenanceUnit + '</h4>' +
                '   </div>' +
                ' </div>' +
                '</span>' +
                '<span>' +
                ' <div class="d-l-con">' +
                '   <div class="d-l-l-text">' +
                '     <h4>联系电话：' + list[i].mainTel + '</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 + '</h4>' +
                '   </div>' +
                ' </div>' +
                '</span>' ;
            }
            markersMap.bindPopupHtml += '</div>'
            this.markersList.push(markersMap)
          }
          setTimeout(() => {
            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.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)
      },
      /** ----------------------------------底部按钮公用组件结束------------------------------------- */
      /** ----------------------------------摄像头预览开始------------------------------------- */
      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>