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

<template>
  <el-tabs
    v-model="activeName"
    type="card"
    @tab-click="handleClick"
    v-loading="loading"
  >
    <el-tab-pane label="查询实际参数" name="1">
      <div class="captureBox">
        <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>
        </div>
        <div class="flexno bt30">
          <div class="wt80">色彩选择</div>
          <el-select v-model="capturenr.color" class="wt280" :disabled="true">
            <el-option
              v-for="item in colorlist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </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"
          ></el-input>
        </div>
        <div class="flexno bt30">
          <div class="wt80">饱和度</div>
          <el-input
            v-model="capturenr.saturation"
            :disabled="true"
            class="wt280"
          ></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="captureBox">
        <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="color">
            <el-select
              v-model="setForm.color"
              placeholder="请选择"
              class="mr20"
            >
              <el-option
                v-for="item in colorlist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></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="100"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="对比度" prop="contrast">
            <el-input-number
              v-model="setForm.contrast"
              :min="1"
              :max="100"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="饱和度" prop="saturation">
            <el-input-number
              v-model="setForm.saturation"
              :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,
  getPhotoParamApi,
  setPhotoParamApi,
  getPhotoParamnrApi,
  getResolutionRatio,
} from "@/utils/api/index";
export default {
  data() {
    return {
      loading: false,
      isShow: false,
      searchloading: false,
      activeName: "1", //选项卡
      accesslist: [], //通道选择器
      colorlist: [
        {
          name: "黑白",
          id: 0,
        },
        {
          name: "彩色",
          id: 1,
        },
      ], //色彩选择器
      ratiolist: [], //图像分辨率
      selaccess: "", //选中的通道
      capturenr: {}, //查询后的内容
      setForm: {}, //设置参数
      rules: {
        channelId: [{ required: true, message: "请选择通道", trigger: "blur" }],
        color: [{ required: true, message: "请选择色彩", trigger: "blur" }],
        contrast: [
          { required: true, message: "请输入对比度", trigger: "blur" },
        ],
        luminance: [{ required: true, message: "请输入亮度", trigger: "blur" }],
        resolution: [
          { required: true, message: "请选择图像分辨率", trigger: "blur" },
        ],
        saturation: [
          { 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() {
      this.$set(this.setForm, "color", this.colorlist[0].id);
      getResolutionRatio({ type: 0 })
        .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;
      getPhotoParamApi({
        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() {
      getPhotoParamnrApi({
        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) {
          setPhotoParamApi(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">
.captureBox {
  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: 120px;
  }
  .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;
    }
  }
}
</style>