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.scxz" :disabled="true" class="wt280"></el-input>
          </div>
          <div class="flexno bt30">
            <div class="wt80">图像分辨率:</div>
            <el-input v-model="capturenr.scxz" :disabled="true" class="wt280"></el-input>
          </div>
          <div class="flexno bt30">
            <div class="wt80">亮度:</div>
            <el-input v-model="capturenr.scxz" :disabled="true" class="wt280"></el-input>
          </div>
          <div class="flexno bt30">
            <div class="wt80">对比度:</div>
            <el-input v-model="capturenr.scxz" :disabled="true" class="wt280"></el-input>
          </div>
          <div class="flexno bt30">
            <div class="wt80">饱和度:</div>
            <el-input v-model="capturenr.scxz" :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="name">
              <el-input v-model="setForm.name" class="wt280"></el-input>
            </el-form-item>
            <el-form-item label="图像分辨率" prop="name">
              <el-input v-model="setForm.name" class="wt280"></el-input>
            </el-form-item>
            <el-form-item label="亮度" prop="name">
              <el-input v-model="setForm.name" class="wt280"></el-input>
            </el-form-item>
            <el-form-item label="对比度" prop="name">
              <el-input v-model="setForm.name" class="wt280"></el-input>
            </el-form-item>
            <el-form-item label="饱和度" prop="name">
              <el-input v-model="setForm.name" class="wt280"></el-input>
            </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,
    getSchedulenr
  } from "@/utils/api/index";
  export default {
    data() {
      return {
        loading: false,
        isShow: false,
        activeName: "1", //选项卡
        accesslist: [], //通道选择器
        selaccess: "", //选中的通道
        capturenr:{}, //查询后的内容
        setForm:{},//设置参数
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
          ],
        }
      };
    },
    mounted() {},
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      //获取设备通道
      getSingleAccess(id) {
        this.selfacilityId = id;
        getChannelListJoggle({ termid: id })
          .then((res) => {
            this.accesslist = res.data.list;
            this.selaccess = res.data.list[0].channelid;
          })
          .catch((err) => {});
      },
      //查询
      inquirebtn() {
        // this.loading = true;
        // getSchedulenr({
        //   channelid: this.selaccess,
        //   terminalid: this.selfacilityId,
        // })
        //   .then((res) => {
        //     this.$message.success("查询成功");
        //     this.capturenr = res.data;
        //     this.loading = false;
        //   })
        //   .catch((err) => {
        //     this.$message.error("查询失败");
        //   });
      },
      //确认
      submitbtn(setForm){
        this.$refs[setForm].validate((valid) => {
          if (valid) {
            
          } 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>