Project_yhfu/src/components/TVWall.vue

<template>
  <div>
    <el-dialog title="电视墙" :visible.sync="TVWallVisible" v-if="TVWallVisible" width="770px" style="height: 700px;"
               @close="cancelEventLocationShow()">
      <div style="width:100%;height:400px;position:relative;">
        <div id="dom1" class="dom1"></div>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  /** ----------------------------------摄像头预览开始------------------------------------- */
  import { getDahuaVideoServer, getTVWallList } from '@/api/dahua/dahua'
  import DHWs from '@/dahua/lib/DHWs'

  /** ----------------------------------摄像头预览结束------------------------------------- */
  export default {
    dicts: ['event_source'],
    components: {},
    data() {
      return {
        tvListJson: [{
          'switchTab': '1',
          'treeLabels': [
            {
              'labelCode': '123456',
              'labelName': '视频场景',
              'parentLabelCode': null
            },
            {
              'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa',
              'labelName': '标签2',
              'parentLabelCode': 123456
            },
            {
              'labelCode': 'd941adbbd3e64dac92cc448dec5293cd',
              'labelName': '标签1',
              'parentLabelCode': 123456
            }
          ],
          'labelChannels': [{
            'channelDates': [{
              'channelCode': '6044981090191552',
              'channelName': '复兴大桥中段-交通事故',
              'channelSn': null,
              'cameraType': 0,
              'online': 1
            },
              {
                'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
                'channelName': '北京7青羊东二路77号2通道1',
                'channelSn': null,
                'cameraType': 1,
                'online': 1
              }
            ],
            'labelCode': 'd941adbbd3e64dac92cc448dec5293cd'
          },
            {
              'channelDates': [{
                'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
                'channelName': '北京7青羊东二路77号2通道2',
                'channelSn': null,
                'cameraType': 2,
                'online': 0
              }],
              'labelCode': '5a81d1bd499b4940a21fc63ca51f4dfa'
            }
          ]
        },
          {
            'switchTab': '2',
            'labelChannels': [{
              'channelDates': [{
                'channelCode': 'ZgVzqsjwA1DTF561VGHK5E',
                'channelName': '北京7青羊东二路77号2通道1',
                'channelSn': null,
                'cameraType': 1,
                'online': 1
              },
                {
                  'channelCode': 'ZgVzqsjwA1DTF561VGHKK7',
                  'channelName': '北京7青羊东二路77号2通道2',
                  'channelSn': null,
                  'cameraType': 2,
                  'online': 0
                }
              ]
            }]
          }
        ],
        TVWallVisible: false,
        activeName: 'tv',
        channelId: ['ZgVzqsjwA1DTF561VHG69F'],
        /** ----------------------------------摄像头预览开始------------------------------------- */
        showModal: true,
        activePanel: 'key1',
        isLogin: false,
        loginType: '1',
        token: '',
        ctrlType: 'playerWin',
        https: 1,
        httpsList: [
          {
            value: 0,
            label: 0
          },
          {
            value: 1,
            label: 1
          }
        ],
        ctrlTypeList: [{
          value: 'playerWin',
          label: '播放控件'
        }, {
          value: 'realMonitorUI',
          label: '带设备树实时预览控件'
        }, {
          value: 'playbackUI',
          label: '带设备树视频回放控件'
        }, {
          value: 'TVWallUI',
          label: '视频上墙'
        }],
        ctrlList: [
          {
            value: 'ctrl1',
            label: '控件1'
          },
          {
            value: 'ctrl2',
            label: '控件2'
          },
          {
            value: 'ctrl3',
            label: '控件3'
          }
        ],
        splitList: [
          {
            value: 1,
            label: '1 * 1'
          },
          {
            value: 4,
            label: '2 * 2'
          },
          {
            value: 9,
            label: '3 * 3'
          }
        ],
        displayModeList: [
          {
            value: 1,
            label: '播放器预览模式'
          },
          {
            value: 2,
            label: '播放器回放模式'
          }
        ],
        mixedVideoDisplayModeList: [
          {
            value: 1,
            label: '播放实时视频'
          },
          {
            value: 2,
            label: '播放回放视频'
          }
        ],
        ctrl: 'ctrl1',
        splitNum: 1,
        displayMode: 1,
        displayTimeRange: [],
        modalDisplayTimeRange: [],
        mixedVideoTime: null,
        recordPath: 'C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\',
        downloadName: '',
        downTimeRange: [],
        downloadFormat: 0,
        downloadFormatList: [{
          value: 0,
          label: 'dav'
        },
          {
            value: 1,
            label: 'avi'
          }, {
            value: 2,
            label: 'mp4'
          }],
        downloadSource: 3,
        downloadSourceList: [
          {
            value: 3,
            label: '中心录像'
          }, {
            value: 2,
            label: '设备录像'
          }],
        showDownloadStreamType: false,
        downloadStreamType: 1,
        downloadStreamTypeList: [{
          value: 1,
          label: '主码流'
        },
          {
            value: 2,
            label: '辅码流'
          },
          {
            value: 3,
            label: '三码流'
          }],
        downloadIsShow: true,
        downloadIsShowList: [{
          value: true,
          label: '是'
        },
          {
            value: false,
            label: '否'
          }],
        crtPosX: 0,
        crtPosY: 0,
        crtWidth: 740,
        crtHeight: 400,
        domId: 'dom1',
        mixedVideoDisplayMode: 2,
        isShowTipe: true
        /** ----------------------------------摄像头预览结束------------------------------------- */
      }
    },
    created() {
      /** ----------------------------------摄像头预览开始------------------------------------- */
      const DHWsInstance = DHWs.getInstance()
      this.ws = DHWsInstance
      console.log(this.ws)
      this.ws.addEventListener('connectStateChange', data => {
        if (data) {
          console.log('连接成功')
        } else {
          console.log('连接失败，下载客户端')
          this.alertReinstall()
          // this.isShowTipe && this.$modal.confirm({
          //   title: '下载客户端',
          //   content: '检测到您未安装部分插件,将影响部分功能使用，请下载后使用？',
          //   onOk: () => {
          //     //这里写下载方法
          //     this.isShowTipe = false
          //   },
          //   onCancel: () => {
          //     this.isShowTipe = false
          //   }
          // });
        }
      })
      /** ----------------------------------摄像头预览结束------------------------------------- */
    },
    methods: {
      cancelEventLocationShow() {
        this.activeName = 'tv'
        this.TVWallVisible = false
        this.destroy()
      },
       showTVWall() {
         this.preview()
         this.TVWallVisible = true
       },
      /** ----------------------------------摄像头预览开始------------------------------------- */
      alertLogin: function() {
        this.$modal.msg('登录中....')
      },
      alertLoginSuccess: function() {
        this.$modal.msgSuccess('登录成功！')
      },
      alertLoginFailed: function() {
        this.$modal.msgError('登陆失败！')
      },
      alertReinstall: function() {
        this.$modal.msgWarning('请重新安装客户端')
      },
      /** 预览按钮操作 */
      preview() {
        getTVWallList().then(newres => {
          getDahuaVideoServer().then(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.create(newres.data)
                  } else {
                    this.alertLoginFailed()
                  }
                })
              } else { // 连接客户端失败
                this.alertReinstall()
              }
            })
          })
        })
      },

      create(tvListJson) { // 调用创建控件接口
        let _this = this
        const params = [
          {
            'ctrlType': 'realMonitorUI',
            'ctrlCode': 'ctrl1',
            'ctrlProperty': {
              'displayMode': 1,
              'splitNum': 1,
              'channelList': [
                {
                  'channelId': '8ORBqXFlA1D77U45SM1ROC'
                }
              ]
            },
            'visible': true,
            'domId': 'dom1'
          }
        ]
        this.setPos()
        _this.ws.createCtrl(params).then(res => {
          console.log(res)
          this.customizeTree(tvListJson)
        }).catch(e => {
          console.log(e)
        })
        _this.ws.on('createCtrlResult', (res) => {
          console.log(res)
          this.customizeTree(tvListJson)
          _this.ws.on('createCtrlResult', (res) => {
            console.log(res)
            this.customizeTree(tvListJson)
          })
        })
      },
      setPos() {
        let target = document.getElementById(this.domId)
        console.log(target, 'target')
        target.style.right = `${this.crtPosX}px`
        target.style.top = `${this.crtPosY}px`
        target.style.width = `${this.crtWidth}px`
        target.style.height = `${this.crtHeight}px`
        if (document.createEvent) {
          var event = document.createEvent('HTMLEvents')
          event.initEvent('resize', true, true)
          window.dispatchEvent(event)
        } else if (document.createEventObject) {
          window.fireEvent('onresize')
        }
      },
      destroy() { // 调用销毁控件接口
        if (!this.isLogin) {
          this.$Message.info('正在登陆客户端，请稍等......')
          return false
        }
        const ctrls = this.ws.ctrls.map(i => {
          if (i.ctrlCode === this.ctrl) {
            return i.ctrlCode
          }
        })
        this.ws.destroyCtrl(ctrls)
      },
      customizeTree(tvListJson) { // 调用控件接口树
        const config = this.ws.config
        const { loginIp, userCode } = config
        this.ws.postMessage('customizeTree', {
          loginIp,
          userCode,
          params: {
            array: tvListJson
            // [
            //   {
            //     "switchTab":"1",
            //     "treeLabels":[
            //       {
            //         "labelCode": "1",
            //         "labelName": "视频场景",
            //         "parentLabelCode": null
            //       },
            //       {
            //         "labelCode":"1000010",
            //         "labelName":"迎水11",
            //         "parentLabelCode":1
            //       },
            //       {
            //         "labelCode":"1000011",
            //         "labelName":"西村",
            //         "parentLabelCode": 1
            //       },
            //       {
            //         "labelCode":"1000012",
            //         "labelName":"矿山屯 ",
            //         "parentLabelCode": 1
            //       },
            //       {
            //         "labelCode":"1000013",
            //         "labelName":"头道",
            //         "parentLabelCode": 1
            //       },
            //       {
            //         "labelCode":"1000014",
            //         "labelName":"五女峰",
            //         "parentLabelCode": 1
            //       }
            //     ],
            //     "labelChannels":[
            //       {
            //         "labelCode":"1000010",
            //         "channelDates":[
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHK5E",
            //             "channelName":"1a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           },
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHK8V",
            //             "channelName":"2a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           },
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHKK7",
            //             "channelName":"2a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           }
            //         ]
            //       },
            //       {
            //         "labelCode":"1000011",
            //         "channelDates":[
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHK5E",
            //             "channelName":"1a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           },
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHK8V",
            //             "channelName":"2a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           },
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHKK7",
            //             "channelName":"2a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           }
            //         ]
            //       },
            //       {
            //         "labelCode":"1000012",
            //         "channelDates":[
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHK5E",
            //             "channelName":"1a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           },
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHK8V",
            //             "channelName":"2a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           },
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHKK7",
            //             "channelName":"2a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           }
            //         ]
            //       },
            //       {
            //         "labelCode":"1000013",
            //         "channelDates":[
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHK5E",
            //             "channelName":"1a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           },
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHK8V",
            //             "channelName":"2a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           },
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHKK7",
            //             "channelName":"2a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           }
            //         ]
            //       },
            //       {
            //         "labelCode":"1000014",
            //         "channelDates":[
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHK5E",
            //             "channelName":"1a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           },
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHK8V",
            //             "channelName":"2a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           },
            //           {
            //             "channelCode":"ZgVzqsjwA1DTF561VGHKK7",
            //             "channelName":"2a",
            //             "channelSn":null,
            //             "cameraType":0,
            //             "online":1
            //           }
            //         ]
            //       }
            //     ]
            //   }
            // ]
          }
        })
      }
      /** ----------------------------------摄像头预览结束------------------------------------- */
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '@/assets/styles/base.scss';

  .event-info-con {
    width: 100%;
    display: flex;

    .e-left {
      width: 32%;
    }

    .e-center {
      width: 30%;
      margin-left: 1%;

      .img-company {
        width: 100%;
        height: 18.3vh;

        img {
        }
      }
    }

    .e-right {
      margin-left: 1%;
      width: 45%;
    }

    .e-location-left {
      width: 28%;
      margin-top: 1rem;
    }

    .e-location-right {
      width: 71%;
      margin-top: 1.3rem;
      margin-left: 1rem;
    }
  }

  .el-dialog:not(.is-fullscreen) {
    margin-top: 5.5vh !important;
  }

  .bottom-menu-normal {
    max-width: 90%;
    padding: 0 3rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 100000;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../assets/images/integrated/btm-menu.png) center no-repeat;
    background-size: cover;
    overflow: hidden;

    .btm-m-con {
      position: relative;
      color: $inBlue;
      font-size: .5rem;
      padding: 1rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-transform: translateY(0);
      transform: translateY(0);
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      white-space: nowrap;

      i {
        font-size: 1rem;
        color: $inBlue;
        text-shadow: 0 0 10px rgba($color: $inBlue, $alpha: .6);
        margin-right: 0.2rem;
      }
    }

    .btm-m-con:hover {
      text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      filter: brightness(2.3);
      -webkit-transform: translateX(0.2rem);
      transform: translateX(0.2rem);
      transition: all 0.2s ease-in-out;

      i {
        color: $inBlueHover;
        text-shadow: 0 0 20px rgba($color: $inBlueHover, $alpha: 1.0);
      }
    }

    .m-l-none {
      .el-input__inner {
        margin-left: 0 !important;
      }
    }

  }
</style>