frontend/src/views/management/monitoringEquipment/photographicDevice/components/videoCapture.vue

<template>
  <el-tabs
    v-model="activeName"
    @tab-click="handleClick"
    type="card"
    v-loading="loading"
  >
    <el-tab-pane label="查询实际参数" name="1">
      <div class="captureBoxVideo">
        <div class="flexnr">
          <div class="wt80">通道:</div>
          <el-select v-model="selaccess" placeholder="请选择" class="mr20">
            <el-option
              v-for="item in accesslist"
              :key="item.channelid"
              :label="
                item.alias !== null && item.alias !== ''
                  ? item.alias
                  : item.channelname
              "
              :value="item.channelid"
            >
              {{
                item.alias !== null && item.alias !== ""
                  ? item.alias
                  : item.channelname
              }}
            </el-option>
          </el-select>
        </div>
        <div class="flexno bt30">
          <div class="wt80">视频分辨率:</div>
          <el-select
            v-model="capturenr.videoFormat"
            class="wt280"
            :disabled="true"
          >
            <el-option
              v-for="item in ratiolist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="flexno bt30">
          <div class="wt80">预置位:</div>
          <el-input
            v-model="capturenr.preset"
            :disabled="true"
            class="wt280"
          ></el-input>
        </div>
        <div class="flexno bt30">
          <div class="wt80">录制时长:</div>
          <el-input
            v-model="capturenr.videoTime"
            :disabled="true"
            class="wt280"
          >
            <template slot="append">s (秒)</template>
          </el-input>
        </div>
        <el-button
          class="searchImage"
          :loading="searchloading"
          type="primary"
          @click="inquirebtn()"
          >查询</el-button
        >
      </div>
    </el-tab-pane>
    <el-tab-pane label="设置参数" name="2">
      <div class="captureBoxVideo">
        <el-form
          :model="setForm"
          :rules="rules"
          ref="setForm"
          label-width="120px"
          class="captureForm"
        >
          <el-form-item label="通道" prop="channelId">
            <el-select
              v-model="setForm.channelId"
              placeholder="请选择"
              class="mr20"
            >
              <el-option
                v-for="item in accesslist"
                :key="item.channelid"
                :label="
                  item.alias !== null && item.alias !== ''
                    ? item.alias
                    : item.channelname
                "
                :value="item.channelid"
              >
                {{
                  item.alias !== null && item.alias !== ""
                    ? item.alias
                    : item.channelname
                }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="视频分辨率" prop="videoFormat">
            <el-select
              v-model="setForm.videoFormat"
              placeholder="请选择"
              class="mr20"
            >
              <el-option
                v-for="item in ratiolist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预置位" prop="preset">
            <el-input-number
              v-model="setForm.preset"
              :min="1"
              :max="255"
              :disabled="true"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="录制时长 s(秒)" prop="videoTime">
            <el-input-number
              v-model="setForm.videoTime"
              :min="1"
              :max="100"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitbtn('setForm')"
              >确认</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import {
  getChannelListJoggle,
  getVideoParamApi,
  setVideoParamApi,
  getVideoParamnrApi,
  getResolutionRatio,
} from "@/utils/api/index";
export default {
  data() {
    return {
      loading: false,
      isShow: false,
      searchloading: false,
      activeName: "1", //选项卡
      accesslist: [], //通道选择器
      ratiolist: [], //分辨率
      selaccess: "", //选中的通道
      capturenr: {}, //查询后的内容
      setForm: {
        preset: 255,
      }, //设置参数
      rules: {
        channelId: [{ required: true, message: "请选择通道", trigger: "blur" }],
        videoTime: [
          { required: true, message: "请输入录制时长", trigger: "blur" },
        ],
        preset: [{ required: true, message: "请输入预置位", trigger: "blur" }],
        videoFormat: [
          { required: true, message: "请选择视频分辨率", trigger: "blur" },
        ],
      },
      timer: null,
      i: 0,
      seltermid: "", //装置id
      selcmdId: "", //cmdId
      requestId: "",
    };
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //获取设备通道
    getSingleAccess(val) {
      this.setForm = {
        preset: 255,
      };
      console.log(val);
      this.seltermid = val.id;
      this.selcmdId = val.cmdId;
      getChannelListJoggle({ termid: this.seltermid })
        .then((res) => {
          this.accesslist = res.data.list;
          this.selaccess = res.data.list[0].channelid;
          this.$set(this.setForm, "channelId", res.data.list[0].channelid);
        })
        .catch((err) => {});
    },
    //获取分辨率
    getRatio() {
      getResolutionRatio({ type: 1 })
        .then((res) => {
          this.ratiolist = res.data.list;
          this.$set(this.setForm, "videoFormat", res.data.list[0].id);
        })
        .catch((err) => {});
    },
    //查询触发
    inquirebtn() {
      this.loading = true;
      this.searchloading = true;
      getVideoParamApi({
        channelId: this.selaccess,
        cmdId: this.selcmdId,
      })
        .then((res) => {
          if (res.code == 200) {
            this.requestId = res.data.requestId;
            this.inquirenr();
            this.timer = window.setInterval(() => {
              this.inquirenr();
              this.i++;
            }, 1000);
          } else {
            this.$message.error(res.code.msg);
          }
        })
        .catch((err) => {});
    },
    //查询接口
    inquirenr() {
      getVideoParamnrApi({
        // channelId: this.selaccess,
        // termId: this.seltermid,
        requestId: this.requestId,
      })
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.capturenr = res.data;
            if (res.data.isNew == true) {
              this.searchloading = false;
              this.i = 0;

              this.$message({
                duration: 1500,
                showClose: true,
                message: "查询已更新",
                type: "success",
              });
              clearInterval(this.timer);
              this.timer = null;
            } else if (this.i > 9) {
              this.searchloading = false;
              this.i = 0;

              this.$message({
                duration: 1500,
                showClose: true,
                message: "暂无响应，请稍后再试！",
                type: "warning",
              });

              clearInterval(this.timer);
              this.timer = null;
            }
          } else {
            this.$message.error(res.code.msg);
          }
        })
        .catch((err) => {});
    },
    //确认
    submitbtn(setForm) {
      this.$set(this.setForm, "cmdId", this.selcmdId);
      // this.$set(this.setForm, "preset", 255);
      // this.$set(this.setForm, "termId", this.seltermid);
      this.$refs[setForm].validate((valid) => {
        if (valid) {
          setVideoParamApi(this.setForm)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("设置成功");
                this.isShow = false;
              } else {
                this.$message.error(res.code.msg);
              }
            })
            .catch((err) => {
              this.$message.error("设置失败");
            });
        } else {
          return false;
        }
      });
    },
    display() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    },
    handleclose() {
      this.searchloading = false;
      this.i = 0;
      clearInterval(this.timer);
      this.timer = null;
    },
  },
};
</script>
<style lang="less">
.captureBoxVideo {
  width: 400px;
  margin: 0 auto;
  margin-top: 24px;
  .flexnr {
    display: flex;
    height: 32px;
    line-height: 32px;
    margin-bottom: 18px;
    .wt80 {
      text-align: right;
      float: left;
      font-size: 14px;
      color: #606266;
      margin: 0 12px 0 0;
      box-sizing: border-box;
      width: 100px;
      display: block;
    }
    .mr20 {
      flex: 1;
    }
  }
  .searchImage {
    margin-left: 110px;
  }
  .flexno {
    display: flex;
    height: 32px;
    line-height: 32px;
    margin-bottom: 18px;
    .wt80 {
      text-align: right;
      float: left;
      font-size: 14px;
      color: #606266;
      margin: 0 12px 0 0;
      box-sizing: border-box;
      width: 100px;
      display: block;
    }
    .wt280 {
      flex: 1;
    }
  }
  .captureForm {
    .el-form-item__content {
    }
  }
}
</style>