ytconfig.vue

<template>
  <div class="control-box" v-show="showyt">
    <div class="control-let-box">
      <div>
        <span @mousedown="Ytontroller('36')" @mouseup="stopYtontroller('36')"  class="control-btn el-icon-top-left"></span>
        <span @mousedown="Ytontroller('38')" @mouseup="stopYtontroller('38')" class="control-btn el-icon-top"></span> 
        <span @mousedown="Ytontroller('33')" @mouseup="stopYtontroller('33')" class="control-btn el-icon-top-right"></span> 
      </div>
      <div>
        <span  @mousedown="Ytontroller('37')" @mouseup="stopYtontroller('37')" class="control-btn el-icon-back"></span>
        <span  @mousedown="Ytontroller('12')" @mouseup="stopYtontroller('12')" class="control-btn el-icon-refresh"></span> 
        <span  @mousedown="Ytontroller('39')" @mouseup="stopYtontroller('39')" class="control-btn el-icon-right"></span> 
      </div>
      <div>
        <span class="control-btn el-icon-bottom-left"></span>
        <span class="control-btn el-icon-bottom"></span> 
        <span class="control-btn el-icon-bottom-right"></span> 
      </div>
    </div>
    <div class="control-right-box">
      <div class="slider-box">
        <span class="title">光圈</span>
        <el-slider
          class="slider-item"
          v-model="value"
          show-input>
        </el-slider>
      </div>
      <div class="slider-box">
        <span class="title">光倍</span>
        <el-slider
          class="slider-item"
          v-model="value"
          show-input>
        </el-slider>
      </div>
      <div class="slider-box">
        <span class="title">焦距</span>
        <el-slider
          class="slider-item"
          v-model="value"
          show-input>
        </el-slider>
      </div>
      <div class="slider-box">
        <span class="title">速度</span>
        <el-slider
         class="slider-item"
          v-model="value"
          show-input>
        </el-slider>
      </div>
      <div class="right-bottom-box">
        <div class="setyzw item-box">
          <el-input placeholder="预置位编号"></el-input>
        </div>
        <div class="subbtn item-box">
          <el-button @click="subset">确定</el-button>
        </div>
        <div class="closebtn item-box">
          <el-button @click="closeyt">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {StopControlCamera,controlDevice,getControlParam,setCameraSpeed,connectCamera} from '../../../assets/js/YtContronByVionVideo.js';
import {CameraController} from '../../../assets/js/positionOperateByVido.js';
const optionController = new CameraController();
export default {
  data() {
    return {
      showyt:false,
      value:''
    }
  },
  methods:{
    openyt(){
      this.showyt = true
    },
    closeyt(){
      this.showyt = false
    },
    /**
     * 控制云台
     * @param {code}
     */
    Ytontroller(code){
      var param = getControlParam(code);
      setCameraSpeed(this.ballspeed)
      // VionVideo.PtzSendCmd(param, pvalue, "");
      controlDevice(param);
    },
    /**
     * 停止云台控制
     * @param {code}
     */
    stopYtontroller(code){
      StopControlCamera()
    },
    subset(){
      let mtasks = this.allMask.mtasks;
      this.allMask.mtasks.forEach(ele => {
        ele.scenes[this.curindex].algo_type = this.algo_type
        ele.scenes[this.curindex].position_name = this.position_name
        ele.scenes[this.curindex].position_num = this.position_num
      });
      let reqObj = {
        subtask_id: this.curentSubTaskId,
          mtasks:this.allMask.mtasks,
      }
      this.$api.task.editRoi(this.curentTaskId,this.curentSubTaskId,reqObj).then(res => {
        if (data.ecode == '200') {
            this.closeyt()
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .control-box{
    position absolute
    top 0
    left 0
    right 0
    margin auto
    color #333
    z-index 100
    height 24vh
    width 31vw
    margin-top .5vh
    background #ffffff
    box-shadow:1px 0px 4px 3px rgba(74,74,74,0.14);
  }
  .control-let-box{
    float left
    width 12vw
    .control-btn{
      height 5vh
      margin-top 2vh
      width 3.5vw
      overflow hidden
      font-size 30px
      text-align center
      color #cccccc
      font-weight 600
    }
  }
  .control-right-box{
    float left
    width 18.5vw
  }
  .slider-box{
    overflow hidden
    margin-top 1vh
    .title{
      float left
      width 2vw
      line-height 35px;
    }
    .slider-item{
      float left
      width 16vw
    }
    
  }
  .item-box{
    float left
    margin-top 1vh
  }
  .item-box:nth-child(1){
    margin-left 0
  }
  .setyzw{
    width 6vw
  }
  .subbtn{
    margin 1vh .3vw 0 2vw
  }
</style>