ytconfig.vue

<template>
  <div class="control-box" v-show="showyt">
    <div class="control-let-box">
      <div class="yzw-box">
        <span
          @mousedown="Ytontroller(5)"
          @mouseup="stopYtontroller(11)"
          class="control-btn icon-fanxing-zuoshang"
        ></span>
        <span
          @mousedown="Ytontroller(3)"
          @mouseup="stopYtontroller(11)"
          class="control-btn icon-fanxing-shang"
        ></span>
        <span
          @mousedown="Ytontroller(6)"
          @mouseup="stopYtontroller(11)"
          class="control-btn icon-fanxing-youshang"
        ></span>
      </div>
      <div class="yzw-box">
        <span
          @mousedown="Ytontroller(1)"
          @mouseup="stopYtontroller(11)"
          class="control-btn icon-fanxing-zuo"
        ></span>
        <span
          @mousedown="Ytontroller('12')"
          @mouseup="stopYtontroller(11)"
          class="control-btn icon-fanxing-zhongzhi"
        ></span>
        <span
          @mousedown="Ytontroller(2)"
          @mouseup="stopYtontroller(11)"
          class="control-btn icon-fanxing-you"
        ></span>
      </div>
      <div class="yzw-box">
        <span
          @mousedown="Ytontroller(7)"
          @mouseup="stopYtontroller(11)"
          class="control-btn icon-fanxing-zuoxia"
        ></span>
        <span
          @mousedown="Ytontroller(4)"
          @mouseup="stopYtontroller(11)"
          class="control-btn icon-fanxing-xia"
        ></span>
        <span
          @mousedown="Ytontroller(8)"
          @mouseup="stopYtontroller(11)"
          class="control-btn icon-fanxing-youxia"
        ></span>
      </div>
    </div>
    <div class="control-right-box">
      <!-- <div class="slider-box">
        <span class="title">光圈</span>
        <el-slider class="slider-item" v-model="value1" show-input></el-slider>
      </div>
      <div class="slider-box">
        <span class="title">光倍</span>
        <el-slider class="slider-item" v-model="value2" show-input></el-slider>
      </div>
      <div class="slider-box">
        <span class="title">焦距</span>
        <el-slider class="slider-item" v-model="value3" show-input></el-slider>
      </div>
      <div class="slider-box">
        <span class="title">速度</span>
        <el-slider class="slider-item" v-model="value4" show-input></el-slider>
      </div> -->
      <div class="slider-box" style="margin-bottom:6vh;margin-top:3vh">
        <span class="title">变倍</span>
        <span class="el-icon-circle-plus s-icon s-plus"
          @mousedown="Ytontroller(10)"
          @mouseup="stopYtontroller(11)"
        ></span>
        <span class="el-icon-remove s-icon"
          @mousedown="Ytontroller(9)"
          @mouseup="stopYtontroller(11)"
        ></span>
      </div>
      <div class="right-bottom-box">
        <div class="setyzw item-box">
          <el-input placeholder="预置位编号" v-model="presetindex"></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 class="delbtn item-box">
          <el-button @click="deleteytconfig" type="danger">删除</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: 0,
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      presetindex: "",
      curtask: {}
    };
  },
  props: ["vchan"],
  methods: {
    openyt(curtask) {
      if (curtask) {
        this.curtask = curtask;
        this.showyt = true;
        this.presetindex = curtask.position_num;
      } else {
        this.$message({
          message: "请选择要操作的预置位",
          type: "warning"
        });
      }
    },
    closeyt() {
      this.showyt = false;
    },
    /**
     * 控制云台
     * @param {code}
     */
    Ytontroller(nType, nParam = null) {
      try {
        let vrefid = this.vchan.refid || this.vchan.vchan_refid;
        document
          .getElementById("VionVideo")
          .VionPTZControl(String(vrefid), Number(nType), 1);
      } catch (error) {
        console.log(error);
      }
      console.log(nType);
    },
    stopYtontroller(nType) {
      let vrefid = this.vchan.refid || this.vchan.vchan_refid;
      document
        .getElementById("VionVideo")
        .VionPTZControl(String(vrefid), Number(nType), 1);
    },
    subset() {
      let vrefid = this.vchan.refid || this.vchan.vchan_refid;
      document
        .getElementById("VionVideo")
        .VionPTZControl(String(vrefid), Number(18), Number(this.presetindex));
      this.$emit("subpostion", this.presetindex);
    },
    deleteytconfig() {
      this.$emit("deleteytconfig", this.presetindex);
      this.showyt = false;
    }
  }
};
</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: 0.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.8vw;
    overflow: hidden;
    font-size: 30px;
    text-align: center;
    color: #cccccc;
    font-weight: 600;
    display inline-block
  }
}

.control-right-box {
  float: left;
  width: 18.5vw;
}

.slider-box {
  overflow: hidden;

  .title {
    float: left;
    width: 2.3vw;
    line-height: 35px;
    font-size 16px
  }

  .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 0.3vw 0 2vw;
}
.delbtn {
  margin-left:.4vw
}
.yzw-box .control-btn:hover{
  color #409EFF
}
.s-icon {
  font-size 25px
  line-height 35px
}
.s-plus {
  margin-right 20px
  margin-left 10px
}
</style>