From 363e498cb86911ef8d4f53eda985ce806addf50b Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Wed, 28 Jun 2023 16:56:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=82=E6=95=B0=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/imageCapture.vue               |   7 +-
 .../components/videoCapture.vue               | 164 +++-----
 .../components/videoCapturebak.vue            | 383 ++++++++++++++++++
 .../photographicDevice/index.vue              |   6 +-
 4 files changed, 454 insertions(+), 106 deletions(-)
 create mode 100644 src/views/management/monitoringEquipment/photographicDevice/components/videoCapturebak.vue

diff --git a/src/views/management/monitoringEquipment/photographicDevice/components/imageCapture.vue b/src/views/management/monitoringEquipment/photographicDevice/components/imageCapture.vue
index 6d7f003..b62f3ee 100644
--- a/src/views/management/monitoringEquipment/photographicDevice/components/imageCapture.vue
+++ b/src/views/management/monitoringEquipment/photographicDevice/components/imageCapture.vue
@@ -84,6 +84,7 @@
           :rules="rules"
           ref="setForm"
           label-width="120px"
+          class="captureForm"
         >
           <el-form-item label="通道" prop="channelId">
             <el-select
@@ -355,7 +356,7 @@ export default {
     }
   }
   .searchImage {
-    margin-left: 120px;
+    margin-left: 110px;
   }
   .flexno {
     display: flex;
@@ -376,5 +377,9 @@ export default {
       flex: 1;
     }
   }
+  .captureForm {
+    .el-form-item__content {
+    }
+  }
 }
 </style>
diff --git a/src/views/management/monitoringEquipment/photographicDevice/components/videoCapture.vue b/src/views/management/monitoringEquipment/photographicDevice/components/videoCapture.vue
index a0f1563..976aaf8 100644
--- a/src/views/management/monitoringEquipment/photographicDevice/components/videoCapture.vue
+++ b/src/views/management/monitoringEquipment/photographicDevice/components/videoCapture.vue
@@ -1,14 +1,12 @@
 <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"
+    type="card"
+    v-loading="loading"
   >
-    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
-      <el-tab-pane label="查询实际参数" name="1">
+    <el-tab-pane label="查询实际参数" name="1">
+      <div class="captureBoxVideo">
         <div class="flexnr">
           <div class="wt80">通道:</div>
           <el-select v-model="selaccess" placeholder="请选择" class="mr20">
@@ -19,12 +17,6 @@
               :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>
@@ -59,13 +51,23 @@
             <template slot="append">s (秒)</template>
           </el-input>
         </div>
-      </el-tab-pane>
-      <el-tab-pane label="设置参数" name="2">
+        <el-button
+          class="searchImage"
+          :loading="searchloading"
+          type="primary"
+          @click="inquirebtn()"
+          >查询</el-button
+        >
+      </div>
+    </el-tab-pane>
+    <el-tab-pane label="设置参数" name="2">
+      <div class="captureBoxVideo">
         <el-form
           :model="setForm"
           :rules="rules"
           ref="setForm"
           label-width="120px"
+          class="captureForm"
         >
           <el-form-item label="通道" prop="channelId">
             <el-select
@@ -115,9 +117,9 @@
             >
           </el-form-item>
         </el-form>
-      </el-tab-pane>
-    </el-tabs>
-  </el-dialog>
+      </div>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 <script>
 import {
@@ -288,95 +290,53 @@ export default {
 };
 </script>
 <style lang="less">
-.setimgDialog {
-  .el-tabs__content {
-    height: 400px;
-    overflow: auto;
-    .el-tab-pane {
-      height: calc(100% - 16px);
+.captureBoxVideo {
+  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;
     }
   }
-  .flexonly {
-    display: flex;
-    flex-wrap: wrap;
+  .searchImage {
+    margin-left: 110px;
   }
   .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;
-        }
-      }
+    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;
     }
-  }
-}
-.setRoadDialog {
-  .el-dialog__body {
-    height: 400px;
-    overflow: auto;
-    .el-form {
-      height: 100%;
-      //background: #fcc;
+    .wt280 {
+      flex: 1;
     }
-    .setTimeTd {
-      h3 {
-        margin: 8px 0px;
-        font-size: 16px;
-        line-height: 24px;
-      }
-      .timename {
-        margin: 8px 0px;
-      }
+  }
+  .captureForm {
+    .el-form-item__content {
     }
   }
 }
diff --git a/src/views/management/monitoringEquipment/photographicDevice/components/videoCapturebak.vue b/src/views/management/monitoringEquipment/photographicDevice/components/videoCapturebak.vue
new file mode 100644
index 0000000..a0f1563
--- /dev/null
+++ b/src/views/management/monitoringEquipment/photographicDevice/components/videoCapturebak.vue
@@ -0,0 +1,383 @@
+<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.videoFormat"
+            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.preset"
+            :disabled="true"
+            class="wt280"
+          ></el-input>
+        </div>
+        <div class="flexno bt30">
+          <div class="wt80">录制时长:</div>
+          <el-input
+            v-model="capturenr.videoTime"
+            :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="videoFormat">
+            <el-select
+              v-model="setForm.videoFormat"
+              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="preset">
+            <el-input-number
+              v-model="setForm.preset"
+              :min="1"
+              :max="255"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="录制时长 s(秒)" prop="videoTime">
+            <el-input-number
+              v-model="setForm.videoTime"
+              :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" }],
+        videoTime: [
+          { required: true, message: "请输入录制时长", trigger: "blur" },
+        ],
+        preset: [{ required: true, message: "请输入预置位", trigger: "blur" }],
+        videoFormat: [
+          { 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, "videoFormat", 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({
+                duration: 1500,
+                showClose: true,
+                message: "查询已更新",
+                type: "success",
+              });
+              clearInterval(this.timer);
+              this.timer = null;
+            } else if (this.i > 9) {
+              this.searchloading = false;
+              this.i = 0;
+
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "暂无响应，请稍后再试！",
+                type: "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">
+.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>
diff --git a/src/views/management/monitoringEquipment/photographicDevice/index.vue b/src/views/management/monitoringEquipment/photographicDevice/index.vue
index 1a2b95a..9d8c25f 100644
--- a/src/views/management/monitoringEquipment/photographicDevice/index.vue
+++ b/src/views/management/monitoringEquipment/photographicDevice/index.vue
@@ -406,7 +406,7 @@
       ref="addPhotoDialogref"
     ></addPhotoDialog>
     <imageCapturebak ref="imageCaptureref"></imageCapturebak>
-    <videoCapture ref="videoCaptureref"></videoCapture>
+    <videoCapturebak ref="videoCaptureref"></videoCapturebak>
     <pictureTags ref="picturetagsref"></pictureTags>
     <gps-position ref="gpsdialog_ref"></gps-position>
     <parameterSetDialog ref="parameterSetref"></parameterSetDialog>
@@ -427,7 +427,7 @@ import {
 import moment from "moment";
 import addPhotoDialog from "./components/addPhotoDialog.vue";
 import imageCapturebak from "./components/imageCapturebak.vue";
-import videoCapture from "./components/videoCapture.vue";
+import videoCapturebak from "./components/videoCapturebak.vue";
 import pictureTags from "./components/pictureTags.vue";
 import gpsPosition from "./components/gpsPosition.vue";
 import parameterSetDialog from "./components/parameterSetDialog.vue";
@@ -440,7 +440,7 @@ export default {
   components: {
     addPhotoDialog,
     imageCapturebak,
-    videoCapture,
+    videoCapturebak,
     pictureTags,
     gpsPosition,
     parameterSetDialog,