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

<template>
  <el-dialog
    class="setimgDialog"
    title="视频采集参数"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="60%"
    @close="handleclose"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
      <el-tab-pane label="查询实际参数" name="1">
        <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.channelname"
              :value="item.channelid"
            ></el-option>
          </el-select>
          <el-button
            :loading="searchloading"
            type="primary"
            @click="inquirebtn()"
            >查询</el-button
          >
        </div>
        <div class="flexno bt30">
          <div class="wt80">视频分辨率:</div>
          <el-select
            v-model="capturenr.resolution"
            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.luminance"
            :disabled="true"
            class="wt280"
          ></el-input>
        </div>
        <div class="flexno bt30">
          <div class="wt80">录制时长:</div>
          <el-input
            v-model="capturenr.contrast"
            :disabled="true"
            class="wt280"
          >
            <template slot="append">s (秒)</template>
          </el-input>
        </div>
      </el-tab-pane>
      <el-tab-pane label="设置参数" name="2">
        <el-form
          :model="setForm"
          :rules="rules"
          ref="setForm"
          label-width="120px"
        >
          <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.channelname"
                :value="item.channelid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="视频分辨率" prop="resolution">
            <el-select
              v-model="setForm.resolution"
              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="luminance">
            <el-input-number
              v-model="setForm.luminance"
              :min="1"
              :max="255"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="录制时长 s(秒)" prop="contrast">
            <el-input-number
              v-model="setForm.contrast"
              :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>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</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: {}, //设置参数
      rules: {
        channelId: [{ required: true, message: "请选择通道", trigger: "blur" }],
        contrast: [
          { required: true, message: "请输入录制时长", trigger: "blur" },
        ],
        luminance: [{ required: true, message: "请输入预置位", trigger: "blur" }],
        resolution: [
          { 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 = {};
      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, "resolution", 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.success("查询已更新");
              clearInterval(this.timer);
              this.timer = null;
            } else if (this.i > 9) {
              this.searchloading = false;
              this.i = 0;
              this.$message.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, "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" scoped>
.setimgDialog {
  .el-tabs__content {
    height: 400px;
    overflow: auto;
    .el-tab-pane {
      height: calc(100% - 16px);
    }
  }
  .flexonly {
    display: flex;
    flex-wrap: wrap;
  }
  .flexno {
    display: flex;
    margin-top: 24px;
    padding: 0px 8px;
    align-items: center;
  }
  .flexnr {
    display: flex;
    align-items: center;
    margin-top: 16px;
    padding: 0px 8px;
  }
  .mt10 {
    margin-bottom: 10px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .w8 {
    width: 8%;
  }
  .wt80 {
    width: 80px;
  }
  .wt280 {
    width: 280px;
  }
  .w80 {
    width: 90%;
    overflow-y: auto;
    height: 300px;
  }
  .mr20 {
    margin-right: 20px;
  }
  .bt30 {
    margin-bottom: 30px;
  }
  .deviceTable {
    padding: 16px 8px 0 8px;
    height: calc(100% - 16px);
    .rulesBox {
      display: flex;
      flex-direction: row;
      li {
        list-style: none;
        margin-right: 24px;
        line-height: 24px;
        span {
          margin-right: 4px;
        }
        .el-tag--small {
          height: 16px;
          padding: 0 8px;
          line-height: 16px;
        }
      }
    }
  }
}
.setRoadDialog {
  .el-dialog__body {
    height: 400px;
    overflow: auto;
    .el-form {
      height: 100%;
      //background: #fcc;
    }
    .setTimeTd {
      h3 {
        margin: 8px 0px;
        font-size: 16px;
        line-height: 24px;
      }
      .timename {
        margin: 8px 0px;
      }
    }
  }
}
</style>