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

<template>
    <el-dialog
      class="setTimeDialog"
      title="图像采集参数"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="60%"
    >
      <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 type="primary" @click="inquirebtn()">查询</el-button>
          </div>
          <div class="flexno bt30">
            <div class="wt80">色彩选择:</div>
            <el-input v-model="capturenr.color" :disabled="true" class="wt280"></el-input>
          </div>
          <div class="flexno bt30">
            <div class="wt80">图像分辨率:</div>
            <el-input v-model="capturenr.resolution" :disabled="true" class="wt280"></el-input>
          </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-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="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="contrast">
              <el-input-number v-model="setForm.contrast" :min="1" :max="100"></el-input-number>
            </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="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="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>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </template>
  <script>
  import {
    getChannelListJoggle,
    getPhotoParamApi,
    setPhotoParamApi,
    getPhotoParamnrApi,
    getResolutionRatio
  } from "@/utils/api/index";
  export default {
    data() {
      return {
        loading: false,
        isShow: 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,
        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()
          .then((res) => {
            this.ratiolist = res.data.list;
            this.$set(this.setForm,'resolution',res.data.list[0].id)
          })
          .catch((err) => {});
      },
      //查询触发
      inquirebtn() {
        this.loading = 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();
              }, 10000);
            }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) {
              if (res.data.isNew == true) {
                this.$message.success("查询已更新");
                this.capturenr = res.data;
                clearInterval(this.timer);
              }else{
                this.capturenr = res.data;
              }
            }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;
      },
    },
  };
  </script>
  <style lang="less" scoped>
  .setTimeDialog {
    .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>