图像采集参数页面

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

@@ -0,0 +1,235 @@
+<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>
+  

src/views/management/monitoringEquipment/photographicDevice/index.vue

@@ -92,7 +92,7 @@
           >
           </el-table-column>
 
-          <el-table-column fixed="right" label="操作" width="260">
+          <el-table-column fixed="right" label="操作" width="290">
             <template slot-scope="scope">
               <el-button
                 @click.native.stop="handleRevisePhoto(scope.row)"
@@ -102,6 +102,7 @@
 
               <el-button type="text" @click.native.stop="handleDeviceReset(scope.row)">装置复位</el-button>
               <el-button type="text">远程升级</el-button>
+              <el-button type="text" @click.native.stop="handleImageCapture(scope.row)">图像采集</el-button>
               <el-button
                 type="text"
                 class="deleteText"
@@ -128,15 +129,18 @@
       :photoDialogTitle="photoDialogTitle"
       ref="addPhotoDialogref"
     ></addPhotoDialog>
+    <imageCapture ref="imageCaptureref"></imageCapture>
   </div>
 </template>
 <script>
 import { getTerminalJoggle, deleteTerminalJoggle, resetTerminalApi } from "@/utils/api/index";
 import moment from "moment";
 import addPhotoDialog from "./components/addPhotoDialog.vue";
+import imageCapture from "./components/imageCapture.vue";
 export default {
   components: {
     addPhotoDialog,
+    imageCapture
   },
   data() {
     return {
@@ -209,6 +213,11 @@ export default {
         }
       }).catch((err) => {});
     },
+    //图像采集参数
+    handleImageCapture(data){
+      this.$refs.imageCaptureref.display()
+      this.$refs.imageCaptureref.getSingleAccess(data.id)
+    },
 
     // //新建弹窗handleAddPhoto
     // handleAddPhoto() {