presetPoint.vue

<template>
  <el-dialog :title="$t('dialog.presetPoint')" :visible.sync="isShow" v-if="isShow" :close-on-click-modal='false' class="manage-dialog dialog_lj" :before-close="closeDialog">
    <el-row :gutter="20">
      <el-col :span="18">
        <div id="canvasVideo" style="background: black;width:100%;height:100%"></div>
      </el-col>
      <el-col :span="6">
        <p class="title">&nbsp;&nbsp;{{$t('table.presetPointList')}}</p>
        <el-table
          :show-header='false'
          border
          :data="tableData"
          highlight-current-row
          :max-height="420"
          @row-click='getInfo'
        >
          <el-table-column prop="name" :label="$t('table.monitorSiteName')" align="left"></el-table-column>
          <el-table-column prop="channelType" :label="$t('table.deviceName')" align="left" width="80">
            <template slot-scope="scope">
              <span>{{scope.row.channelType==1?$t('format.gunMachine'):$t('format.speedCameras')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
      <el-button type="primary" @click="addSubmit()" class="dialog-btn dialog-confirm-btn">
        {{$t('dialog.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import EZUIKit from 'ezuikit-js'
  export default{
    data(){
      return{
        isShow:false,
        tableData: [],
        player:'',
        formObj:{}
      }
    },
    methods:{
      dialogInit(record){
        this.isShow = true;
        this.getTableData(record)
        this.formObj.id = record.id
        let parmas = {
          id:record.id,
          protocol:'1'
        }
        this.$api.videoShopTourReport.getLiveInfo(parmas).then(data => {
          let result = data.data;
          if(result.code==200){
            this.playVideo(result.data.liveAddress,result.data.accessToken);
          }
        })
      },
      playVideo(url,token){
        if(this.player){
          let canvasVideo = document.getElementById('canvasVideo')
          canvasVideo.innerHTML = ''
        }
        this.$nextTick(()=>{
          this.player = new EZUIKit.EZUIKitPlayer({
            id: "canvasVideo", // 视频容器ID
            accessToken: token,
            url: url,
            template: 'simple',//simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
            autoplay: true,
            footer: ['hd','fullScreen'],
            width: 700,
            height:470,
          });
        })
      },
      getInfo(row){
        let parmas = {
          platform:row.platform,
          deviceSerial:row.deviceSerial,
          channelNo:row.channelNo,
          index:row.index,
        }
        this.formObj.presetId = row.id
        this.$api.videoShopTourReport.getPresetMove(parmas).then(data => {
          console.log(data)
        })
      },
      getTableData(record) {
        let tabelParams = {
          pageNum: 1,
          pageSize: 999999,
          accountId:record.accountId,
          mallId:record.mallId,
          channelNo:record.patrolDeviceChannel.channelNo,
          deviceSerial:record.patrolDeviceChannel.deviceSerial,
        };
        this.$api.videoShopTourReport.getPresetList(tabelParams, null, true).then(data => {
          this.tableData = [];
          var result = data.data;
          this.tableData = result.data.list;
        })
      },
      addSubmit(){
        if(!this.formObj.presetId){
          this.$message({
            message: this.$t('pholder.presetPointPosition'),
            type: 'warning'
          });
          return
        }
        this.$api.videoShopTourReport.editPatrolGate(this.formObj)
          .then((res) => {
            let result = res.data;
            if(result.code==200){
              this.$message({
                message: result.msg,
                type: 'success'
              });
              this.$parent.getTableData();
              this.isShow = false
            }else{
              this.$message({
                message: result.msg,
                type: 'error'
              });
            }
          })
      },
      closeDialog() {
        this.isShow = false;
      }
    }
  }
</script>

<style scoped="scoped" lang="less">
  .manage-dialog{
    /deep/.el-dialog{
      width: 1000px;
    }
    /deep/.el-table--border .el-table__cell{
      border-right: 0;
      padding: 7px 0;
    }
   /deep/ .el-table__body tr.current-row>td.el-table__cell{
     background-color: rgba(25, 114, 245, 0.3);
     color: #1972F5;
   }
    .title{
      background: #eee;
      width: 100%;
      text-align: left;
      line-height: 38px;
      font-size: 14px;
    }
    .itemLi{
      line-height: 30px;
      cursor: pointer;
      .type{
        float: right;
      }
    }
  }
</style>