guoyao-jiankang/public/camera/component/holder.vue

<template>
  <el-container class="container">
    <el-header class="header">
      <el-row>
        <el-col :span="20">云台操作</el-col>
        <el-col :span="4">
          <i v-show="fold" class="hide-icon pointer" @click="fold = !fold"></i>
          <i v-show="!fold" class="show-icon pointer" @click="fold = !fold"></i>
        </el-col>
      </el-row>
    </el-header>

    <el-main class="main" v-show="!fold">
      <!-- 云台圆盘 -->
      <div class="holder-disc">
        <div class="s1" :class="brand !== 'lechange' ? 'box' : 'disable-box'">
          <!-- 左上 -->
          <i v-show="brand !== 'lechange'" class="north-west-icon" @mousedown="holderClick(false, '4')" @mouseup="holderClick(true, '4')"></i>
        </div>
        <div class="s2 box">
          <!-- 上 -->
          <i class="north-west-icon" @mousedown="holderClick(false, '0')" @mouseup="holderClick(true, '0')"></i>
        </div>
        <div class="s3" :class="brand !== 'lechange' ? 'box' : 'disable-box'">
          <!-- 右上 -->
          <i v-show="brand !== 'lechange'" class="north-west-icon" @mousedown="holderClick(false, '6')" @mouseup="holderClick(true, '6')"></i>
        </div>
        <div class="s4 box">
          <!-- 右 -->
          <i class="north-west-icon" @mousedown="holderClick(false, '3')" @mouseup="holderClick(true, '3')"></i>
        </div>
        <div class="s5 box">
          <!-- 左 -->
          <i class="north-west-icon" @mousedown="holderClick(false, '2')" @mouseup="holderClick(true, '2')"></i>
        </div>
        <div class="s6" :class="brand !== 'lechange' ? 'box' : 'disable-box'">
          <!-- 左下 -->
          <i v-show="brand !== 'lechange'" class="north-west-icon" @mousedown="holderClick(false, '5')" @mouseup="holderClick(true, '5')"></i>
        </div>
        <div class="s7 box">
          <!-- 下 -->
          <i class="north-west-icon" @mousedown="holderClick(false, '1')" @mouseup="holderClick(true, '1')"></i>
        </div>
        <div class="s8" :class="brand !== 'lechange' ? 'box' : 'disable-box'">
          <!-- 右下 -->
          <i v-show="brand !== 'lechange'" class="north-west-icon" @mousedown="holderClick(false, '7')" @mouseup="holderClick(true, '7')"></i>
        </div>
        <div class="center center-icon"></div>
      </div>
      <!-- 云台步长 -->
      <div class="holder-step-length">
        <el-row>
          <el-col :span="4" class="lh38 text-right">步长</el-col>
          <el-col :span="12" :offset="2">
            <el-slider
              v-model="stepLength"
              :min="1"
              :max="8"
              :show-tooltip="false"
            ></el-slider>
          </el-col>
          <el-col :span="4" :offset="2" class="lh38">{{ stepLength }}</el-col>
        </el-row>
      </div>
      <!-- 云台操作 -->
      <div class="holder-operate">
        <el-row class="operate-row">
          <el-col :span="8" class="border-right-ccc">
            <i
              class="focus-up-icon"
              title="聚焦+"
              @mousedown="holderHandle('ptzFocusOperation', true, false)" 
              @mouseup="holderHandle('ptzFocusOperation', true, true)"
            ></i>
            <i
              class="focus-down-icon"
              title="聚焦-"
              @mousedown="holderHandle('ptzFocusOperation', false, false)" 
              @mouseup="holderHandle('ptzFocusOperation', false, true)"
            ></i>
          </el-col>
          <el-col :span="8" class="border-right-ccc">
            <i
              class="scale-add-icon"
              title="变倍+"
              @mousedown="holderHandle('ptzZoomOperation', true, false)" 
              @mouseup="holderHandle('ptzZoomOperation', true, true)"
            ></i>
            <i
              class="scale-minus-icon"
              title="变倍-"
              @mousedown="holderHandle('ptzZoomOperation', false, false)" 
              @mouseup="holderHandle('ptzZoomOperation', false, true)"
            ></i>
          </el-col>
          <el-col :span="8">
            <i
              class="aperture-up-icon"
              title="光圈+"
              @mousedown="holderHandle('ptzApertureOperation', true, false)" 
              @mouseup="holderHandle('ptzApertureOperation', true, true)"
            ></i>
            <i
              class="aperture-down-icon"
              title="光圈-"
              @mousedown="holderHandle('ptzApertureOperation', false, false)" 
              @mouseup="holderHandle('ptzApertureOperation', false, true)"
            ></i>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>
<script>
module.exports = {
  data() {
    return {
      data: [],
      value: [1, 4],
      cruiseForm: {
        num: "",
        name: "",
      },
      fold: true,
      moreFold: true,
      stepLength: 1,
      searchKey: "",
      prepointDialogVisible: false,
      cruiseDialogVisible: false,
      num: ""
    };
  },
  watch: {
      fold(val) {
          this.$emit("switch-fold", val)
      }
  },
  props: {
    brand: {
      type: String,
      default: 'general'
    }
  },
  methods: {
    holderClick(bStop, direct) {
      this.$emit("holder-click", {
        direct: direct,
        stepLength: this.stepLength,
        bStop: bStop,
      });
    },

    holderHandle(method, add, bStop) {
      this.$emit("holder-handle", {
        method: method,
        bStop: bStop,
        add: add,
      });
    },
  },
};
</script>
 
<style scoped>
/deep/ .el-transfer-panel {
  width: 260px;
}
/deep/ .cruise-dialog-div .el-transfer__button {
  border-color: #ee371f;
  background-color: #ee371f;
}
/deep/ .cruise-dialog-div .el-transfer__button.is-disabled {
  background-color: #fab6b6;
  border-color: #fab6b6;
}
/deep/ .cruise-dialog-div .el-form-item {
  margin-bottom: 15px;
}

.empty-prepoint-list {
  height: 200px;
  padding-top: 80px;
  text-align: center;
  color: #888;
}
.prepoint-list-row {
  padding: 5px 10px;
  border-bottom: 1px solid #ddd;
}
.prepoint-title {
  width: 60px;
  line-height: 28px;
}
.h200 {
  height: 200px;
}
.mgl70 {
  margin-left: 70px;
}
.mgt5 {
  margin-top: 5px;
}
.pt5 {
  padding-top: 5px;
}
.mgr30 {
  margin-right: 30px;
}
.mgr5 {
  margin-right: 5px;
}
.mgr10 {
  margin-right: 10px;
}
.pdt5 {
  padding-top: 5px;
}
.pdb5 {
  padding-bottom: 5px;
}
.header {
  color: #000;
  font-size: 20px;
}
.show-icon {
  background: url("../img/ptz/show.png");
  background-size: 100% 100%;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.hide-icon {
  background: url("../img/ptz/hide.png");
  background-size: 100% 100%;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.add-icon {
  background: url("../img/ptz/ptzEx2/add-n.png");
  background-size: 100% 100%;
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}
.add-icon:hover {
  background: url("../img/ptz/ptzEx2/add-h.png");
}
.center-icon {
  background: url("../img/ptz/center.png") no-repeat top left;
  width: 48px;
  height: 48px;
  display: inline-block;
}

.operate-row {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 5px 0px;
}
.operate-row .el-col {
  text-align: center;
}
.border-right-ccc {
  border-right: 1px solid #ccc;
}
.focus-up-icon {
  background: url("../img/ptz/ptzEx2/FocusUp_n.png");
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 4px;
}
.focus-up-icon:hover {
  background: url("../img/ptz/ptzEx2/FocusUp_h.png");
  background-size: 100% 100%;
}
.focus-down-icon {
  background: url("../img/ptz/ptzEx2/FocusDown_n.png");
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  display: inline-block;
}
.focus-down-icon:hover {
  background: url("../img/ptz/ptzEx2/FocusDown_h.png");
  background-size: 100% 100%;
}
.scale-add-icon {
  background: url("../img/ptz/ptzEx2/scaleAdd_n.png");
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 4px;
}
.scale-add-icon:hover {
  background: url("../img/ptz/ptzEx2/scaleAdd_h.png");
  background-size: 100% 100%;
}
.scale-minus-icon {
  background: url("../img/ptz/ptzEx2/scaleMinus_n.png");
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  display: inline-block;
}
.scale-minus-icon:hover {
  background: url("../img/ptz/ptzEx2/scaleMinus_h.png");
  background-size: 100% 100%;
}
.aperture-up-icon {
  background: url("../img/ptz/ptzEx2/ApertureUp_n.png");
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 4px;
}
.aperture-up-icon:hover {
  background: url("../img/ptz/ptzEx2/ApertureUp_h.png");
  background-size: 100% 100%;
}
.aperture-down-icon {
  background: url("../img/ptz/ptzEx2/ApertureDown_n.png");
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  display: inline-block;
}
.aperture-down-icon:hover {
  background: url("../img/ptz/ptzEx2/ApertureDown_h.png");
  background-size: 100% 100%;
}
.p5-10 {
  padding: 5px 10px;
}
.holder-more-row {
  border-bottom: 1px solid #ccc;
}
.prepoint-h-icon {
  background: url("../img/ptz/ptzEx2/Prepoint-h.png");
  background-size: 100% 100%;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.prepoint-n-icon {
  background: url("../img/ptz/ptzEx2/prepoint-n.png");
  background-size: 100% 100%;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.prepoint-n-icon:hover {
  background: url("../img/ptz/ptzEx2/Prepoint-h.png");
  background-size: 100% 100%;
}
.modify-n-icon {
  background: url("../img/ptz/ptzEx2/modify-n.png");
  background-size: 100% 100%;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 3px;
}
.modify-n-icon:hover {
  background: url("../img/ptz/ptzEx2/modify-h.png");
  background-size: 100% 100%;
}
.delete-n-icon {
  background: url("../img/ptz/ptzEx2/delete-n.png");
  background-size: 100% 100%;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 3px;
}
.delete-n-icon:hover {
  background: url("../img/ptz/ptzEx2/delete-h.png");
  background-size: 100% 100%;
}
.play-n-icon {
  background: url("../img/ptz/ptzEx2/play-n.png");
  background-size: 100% 100%;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 3px;
}
.play-n-icon:hover {
  background: url("../img/ptz/ptzEx2/play-h.png");
  background-size: 100% 100%;
}
.cruise-h-icon {
  background: url("../img/ptz/ptzEx2/Cruise-h.png");
  background-size: 100% 100%;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.cruise-n-icon {
  background: url("../img/ptz/ptzEx2/Cruise-n.png");
  background-size: 100% 100%;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.cruise-n-icon:hover {
  background: url("../img/ptz/ptzEx2/Cruise-h.png");
  background-size: 100% 100%;
}

.el-icon-caret-top {
  position: relative;
  top: 32px;
  left: 8px;
  transform: rotate(-64deg);
  font-size: x-large;
}

.container {
  position: absolute;
  bottom: 0px;
  background: #fff;
  width: 100%;
  height: auto;
}
.el-header {
  background: #ddd;
}
.holder-disc {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  margin-left: 37px;
  margin-top: 10px;
}

.holder-disc .box, .holder-disc .disable-box {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  clip: rect(0px, 65px, 65px, 0);
  clip-path: polygon(0px 0px, 65px 65px, 0px 65px);
}

.holder-disc .box {
  transition: 0.5s;
  background: #e6e6e6;
  cursor: pointer;
}

.holder-disc .disable-box {
  background: #e6e6e6;
}

.holder-disc .box:hover {
  background: #ccc;
}

.north-west-icon {
  background: url("../img/ptz/northWest.png") no-repeat top left;
  width: 13px;
  height: 13px;
  display: inline-block;
  position: relative;
  top: 40px;
  left: 16px;
  transform: rotate(-23deg);
}

.north-west-icon:hover {
  background: url("../img/ptz/northWest_hover.png");
}

.holder-disc .s1 {
  transform: rotate(22.5deg);
}

.holder-disc .s2 {
  transform: rotate(67.5deg);
}

.holder-disc .s3 {
  transform: rotate(112.5deg);
}

.holder-disc .s4 {
  transform: rotate(157.5deg);
}

.holder-disc .s5 {
  transform: rotate(-22.5deg);
}

.holder-disc .s6 {
  transform: rotate(-67.5deg);
}

.holder-disc .s7 {
  transform: rotate(-112.5deg);
}

.holder-disc .s8 {
  transform: rotate(-157.5deg);
}

.holder-disc .center {
  position: absolute;
  left: 78px;
  top: 112px;
  border-radius: 50%;
}
.lh38 {
  line-height: 38px;
}
</style>