ISMS-Visualization-BJGD-TKT/src/views/components/dialog/JGYTControlDialog/VideoControl.vue

<template>
  <div class="videoControl-container">
    <div class="comm-open">
      {{ commOpenning ? "允许操作" : "禁止操作" }}
      <el-switch
        style="display: block; margin: 4px"
        v-model="commOpenning"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
    </div>
    <div class="comm-panel">
      <div
        class="btn-box"
        v-for="item of commandConfig.direction"
        :key="item.type"
      >
        <el-button
          type="primary"
          :icon="`el-icon-${item.type}`"
          size="mini"
          @mousedown.native="changePtzCommParam(item.command, false)"
          @mouseup.native="changePtzCommParam(item.command, true)"
        ></el-button>
      </div>
    </div>
    <div class="zoom-panel">
      <div class="btn-box" v-for="item of commandConfig.zoom" :key="item.type">
        <el-button
          type="primary"
          :icon="`el-icon-${item.type}`"
          size="mini"
          @mousedown.native="changePtzCommParam(item.command, false)"
          @mouseup.native="changePtzCommParam(item.command, true)"
        ></el-button>
      </div>
    </div>
    <div class="form_box">
      <el-form label-width="70px" size="small">
        <el-form-item label="速度" prop="speed" class="form_info">
          <el-select
            class="myInput"
            size="mini"
            v-model="speed"
            placeholder="请选择速度"
            style="width: 100%"
          >
            <el-option
              v-for="item in Array.from(
                { length: 10 },
                (item, index) => index + 1
              )"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预置点" prop="presetIndex" class="form_info">
          <el-select
            class="myInput"
            size="mini"
            v-model="presetIndex"
            placeholder="请选择预置点"
            style="width: 100%"
          >
            <el-option
              v-for="item in Array.from(
                { length: 255 },
                (item, index) => index + 1
              )"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="btn_box">
          <el-button type="primary" size="mini" @click="changePtzPresetParam(8)"
            >设置</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="changePtzPresetParam(39)"
            >转到</el-button
          >
        </div>
        <!-- <el-form-item label="时间" prop="startTime">
          <el-date-picker class="myInput" size="mini" v-model="startTime" type="datetime" placeholder="选择日期时间" style="width: 100%"></el-date-picker>
        </el-form-item>
        <div class="btn_box">
          <el-button type="primary" size="mini" @click="changePlayTypeParam(true)" :disabled="!startTime">回放</el-button>
          <el-button type="primary" size="mini" @click="changePlayTypeParam(false)" :disabled="!startTime">实时</el-button>
        </div> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import Dayjs from "dayjs";
export default {
  name: "VideoControl",
  props: {
    curVideoData: {
      type: Object,
      require: true,
      default: () => ({}),
    },
  },
  data() {
    return {
      // 视频控制相关 start
      commandConfig: {
        //视频控制开关配置
        direction: [
          //方向
          { type: "top-left", name: "左上", command: 25 },
          { type: "top", name: "上", command: 21 },
          { type: "top-right", name: "右上", command: 26 },
          { type: "back", name: "左", command: 23 },
          { type: "rank", name: "中", command: 0 },
          { type: "right", name: "右", command: 24 },
          { type: "bottom-left", name: "左下", command: 27 },
          { type: "bottom", name: "下", command: 22 },
          { type: "bottom-right", name: "右下", command: 28 },
        ],
        zoom: [
          //放大缩小
          { type: "zoom-in", name: "放大", command: 11 },
          { type: "zoom-out", name: "缩小", command: 12 },
        ],
      },
      startTime: null,
      speed: 5,
      presetIndex: 1,
      // 视频控制 end
      commOpenning: false,
    };
  },
  mounted() {},
  methods: {
    changePtzCommParam(comm, stop) {
      if (!this.commOpenning) {
        stop && this.$message.warning("请先开启操作许可！");
        return;
      }
      if (!comm) return;
      if (!this.curVideoData.id) {
        stop && this.$message.warning("请先选择视频窗口！");
        return;
      }
      let param = {
        id: this.curVideoData.id,
        ptzCommand: comm,
        ptzStop: stop,
        ptzSpeed: this.speed,
        canControl: this.curVideoData.ptzEnable,
      };
      this.$EventBus.$emit("updateSendParam", param);
    },
    changePtzPresetParam(comm) {
      if (!this.commOpenning) {
        stop && this.$message.warning("请先开启操作许可！");
        return;
      }
      if (!comm) return;
      if (!this.curVideoData.id) {
        this.$message.warning("请先选择视频窗口！");
        return;
      }
      let param = {
        id: this.curVideoData.id,
        ptzPreset: comm,
        ptzPresetIndex: this.presetIndex,
        canControl: this.curVideoData.ptzEnable,
      };
      this.$EventBus.$emit("updateSendParam", param);
    },
    /**
     * state  true代表回放模式
     */
    changePlayTypeParam(state) {
      if (!this.commOpenning) {
        stop && this.$message.warning("请先开启操作许可！");
        return;
      }
      let param = { id: this.curVideoData.id };
      if (!this.curVideoData.id) {
        this.$message.warning("请先选择视频窗口！");
        return;
      }
      if (state) {
        if (!this.startTime) {
          this.$message.warning("请选择回放开始时间！");
          return;
        }
        param["startTime"] = Dayjs(this.startTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.$EventBus.$emit("updateSendParam", param, true);
    },
  },
};
</script>
<style lang="less" scoped>
.videoControl-container {
  width: 100%;
  .comm-open {
    padding: 6px 6px 6px 16px;
    text-align: left;
    font-size: 0.083333rem /* 16/192 */;
    line-height: 30px /* 50/192 */;
    color: #fff;
    display: flex;
    height: 43px;
  }
  .comm-panel {
    width: 184px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .el-button {
      background: #007ccc;
      border-color: #007ccc;
    }
  }
  .zoom-panel {
    width: 122px;
    margin: 0 auto;
    display: flex;
    .el-button {
      background: #007ccc;
      border-color: #007ccc;
    }
  }
  .btn-box {
    flex-shrink: 0;
    width: 60px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form_box {
    width: 100%;
    padding: 10px 0;
    ::v-deep .form_info .el-form-item__label {
      color: rgb(255, 255, 255);
    }
    ::v-deep .el-form {
      width: 100%;
      .myInput {
        .el-input__inner {
          // width: 110px;
          height: 30px;
          border-radius: 0;
          background: rgba(0, 20, 23, 0.2);
          border: 0.5px solid #5bd6ff;
          color: #5bd6ff;
          // padding-right: 35px;
        }
        .el-input__inner:focus {
          border: 0.5px solid #5bd6ff !important;
        }
        .el-input.is-focus .el-input__inner {
          border: 0.5px solid #5bd6ff !important;
        }
        .el-input__suffix {
          right: 5px;
        }
        .el-input__icon {
          line-height: 30px;
        }
      }
      .btn_box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
      }
    }
  }
}
</style>