From 25b878018258d0cb0dfc5cabc0d6cce40f96dbda Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Tue, 30 May 2023 13:57:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/equipmentTable.vue             |  52 ++-
 .../components/videoForm.vue                  | 349 ++++++++++++++++++
 2 files changed, 395 insertions(+), 6 deletions(-)
 create mode 100644 src/views/systemManagement/correlationEquipment2/components/videoForm.vue

diff --git a/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
index 00eff83..8a42a95 100644
--- a/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
+++ b/src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
@@ -31,7 +31,7 @@
         </el-form>
       </div>
       <div class="table_btn_list">
-        <el-button v-for="item in btn_list" :key="item.value">
+        <el-button v-for="item in btn_list" :key="item.value" @click="open_video_dialog(item.value)">
           <i :class="`el-icon-${item.icon}`" />
           {{ item.label }}</el-button
         >
@@ -89,13 +89,13 @@
         <el-form :model="search" class="table_search_form">
           <el-form-item>
             <el-input
-              v-model="perception_search.deviceName"
+              v-model="search_p.deviceName"
               placeholder="输入设备名称搜索"
             ></el-input>
           </el-form-item>
           <el-form-item>
             <el-input
-              v-model="perception_search.deviceIp"
+              v-model="search_p.deviceIp"
               placeholder="输入设备IP搜索"
             ></el-input>
           </el-form-item>
@@ -150,7 +150,7 @@
       <div class="table_pagination">
         <el-pagination
           :background="true"
-          @current-change="handleCurrentChange"
+          @current-change="handleCurrentChangePerception"
           :page-sizes="[5]"
           :page-size="pageSize"
           :current-page="pageNum"
@@ -160,11 +160,17 @@
         </el-pagination>
       </div>
     </div>
+    <!-- 视频设备表单弹窗 -->
+    <VideoForm ref="videoForm"></VideoForm>
   </div>
 </template>
 <script>
-import { getVideoList } from "@/api/correlationEquipment";
+import { getVideoList,getPerceptionList } from "@/api/correlationEquipment";
+import VideoForm from './videoForm'
 export default {
+  components:{
+    VideoForm
+  },
   data() {
     return {
       table_flag: true,
@@ -175,7 +181,7 @@ export default {
         deviceIp: "",
       },
       // 智能查询
-      perception_search: {
+      search_p: {
         deviceName: "",
         deviceIp: "",
       },
@@ -239,6 +245,29 @@ export default {
         this.total = res.total;
       });
     },
+    // 智能查询
+    perception_search() {
+      this.only_params = Object.assign(this.only_params, this.search_p)
+      getPerceptionList(this.only_params).then(res=>{
+        this.table_data = res.rows;
+        this.total = res.total;
+      })
+    },
+    // 智能重置
+    perception_reset() {
+      // 查询项清空
+      this.search_p.deviceIp = ""
+      this.search_p.deviceName = ""
+      this.only_params = Object.assign(this.only_params, this.search_p)
+      getPerceptionList(this.only_params).then(res=>{
+        this.table_data = res.rows;
+        this.total = res.total;
+      })
+    },
+    open_video_dialog(num) {
+      // 打开视频设备表单
+      this.$refs.videoForm.open(num)
+    },
     table_header({ row, rowIndex }) {
       console.log(row);
       console.log(rowIndex);
@@ -246,6 +275,7 @@ export default {
         color: "#fff",
       };
     },
+    // 视频表格分页
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       this.only_params.pageNum = val;
@@ -253,6 +283,14 @@ export default {
         this.table_data = res.rows;
       });
     },
+    // 智能表格分页
+    handleCurrentChangePerception(val) {
+      console.log(`当前页: ${val}`);
+      this.only_params.pageNum = val;
+      getPerceptionList(this.only_params).then(res=>{
+        this.table_data = res.rows;
+      })
+    }
   },
 };
 </script>
@@ -318,8 +356,10 @@ export default {
   .table_video {
     width: 64vw;
     height: 34vh;
+    margin-left: 10px;
   }
   /deep/.el-table {
+    width: 98.2%;
     .el-table__body-wrapper {
       overflow: auto;
       background: #233438;
diff --git a/src/views/systemManagement/correlationEquipment2/components/videoForm.vue b/src/views/systemManagement/correlationEquipment2/components/videoForm.vue
new file mode 100644
index 0000000..244c750
--- /dev/null
+++ b/src/views/systemManagement/correlationEquipment2/components/videoForm.vue
@@ -0,0 +1,349 @@
+<template>
+  <!-- 视频新增、编辑、查看表单 -->
+  <el-dialog
+    class="dialog"
+    :title="title"
+    :visible.sync="visible"
+    @close="close()"
+    :close-on-click-modal="false"
+    width="970px"
+  >
+    <div class="form_body">
+      <el-form ref="form" :model="form" :rules="rules">
+        <el-form-item> <p>设备基础信息</p> </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="企业名称" prop="companyName">
+          <el-select
+            ref="companySelect"
+            v-model="form.companyName"
+            placeholder="请选择企业"
+          >
+            <el-option
+              v-for="item in form_list.company"
+              :key="item.id"
+              :label="item.companyName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="设备名称" prop="deviceName">
+          <el-input v-model="form.deviceName"></el-input>
+        </el-form-item>
+        <el-form-item label="设备IP" prop="deviceIp">
+          <el-input v-model="form.deviceIp"></el-input>
+        </el-form-item>
+        <el-form-item label="设备大类" prop="deviceVideoParentType">
+          <el-select
+            v-model="form.deviceVideoParentType"
+            placeholder="请选择设备大类"
+          >
+            <el-option
+              v-for="item in form_list.parent_type"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备小类" prop="deviceVideoSubType">
+          <el-select
+            v-model="form.deviceVideoSubType"
+            placeholder="请选择设备小类"
+          >
+            <el-option
+              v-for="item in form_list.son_type"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="登录账号" prop="account">
+          <el-input v-model="form.account"></el-input>
+        </el-form-item>
+        <el-form-item label="登录密码" prop="password">
+          <el-input v-model="form.password"></el-input>
+        </el-form-item>
+        <el-form-item> <p>视频通道信息</p> </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="通道编码" prop="gbsChannelNo">
+          <el-input v-model="form.gbsChannelNo"></el-input>
+        </el-form-item>
+        <el-form-item label="NVR编码" prop="gbsNvrNo">
+          <el-input v-model="form.gbsNvrNo"></el-input>
+        </el-form-item>
+        <el-form-item label="通道号" prop="channelNo">
+          <el-input v-model="form.channelNo"></el-input>
+        </el-form-item>
+        <el-form-item label="RTSP流地址" prop="rtspAddress">
+          <el-input v-model="form.rtspAddress"></el-input>
+        </el-form-item>
+        <el-form-item> <p>设备位置信息</p> </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="设备经度" prop="longitude">
+          <el-input v-model="form.longitude"></el-input>
+        </el-form-item>
+        <el-form-item label="设备纬度" prop="latitude">
+          <el-input v-model="form.latitude"></el-input>
+        </el-form-item>
+        <el-form-item label="U3D经度" prop="u3dLongitude">
+          <el-input v-model="form.u3dLongitude"></el-input>
+        </el-form-item>
+        <el-form-item label="U3D纬度" prop="u3dLatitude">
+          <el-input v-model="form.u3dLatitude"></el-input>
+        </el-form-item>
+        <el-form-item label="设备高度" prop="deviceHeight">
+          <el-input v-model="form.deviceHeight"></el-input>
+        </el-form-item>
+        <el-form-item label="U3D高度" prop="u3dHeight">
+          <el-input v-model="form.u3dHeight"></el-input>
+        </el-form-item>
+        <el-form-item label="设备方位" prop="orientation">
+          <el-select v-model="form.orientation" placeholder="请选择设备方位">
+            <el-option
+              v-for="item in form_list.orientation_types"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="安装位置" prop="deviceAddress">
+          <el-input v-model="form.deviceAddress"></el-input>
+        </el-form-item>
+        <el-form-item> <p>设备其他信息</p> </el-form-item>
+        <el-form-item> </el-form-item>
+        <el-form-item label="设备品牌" prop="deviceBrand">
+          <el-input v-model="form.deviceBrand"></el-input>
+        </el-form-item>
+        <el-form-item label="设备厂家" prop="manufactor">
+          <el-input v-model="form.manufactor"></el-input>
+        </el-form-item>
+        <el-form-item label="厂家联系电话" prop="manufactorPhone">
+          <el-input v-model="form.manufactorPhone"></el-input>
+        </el-form-item>
+        <el-form-item label="SN号" prop="deviceSn">
+          <el-input v-model="form.deviceSn"></el-input>
+        </el-form-item>
+        <el-form-item label="设备MAC" prop="deviceMac">
+          <el-input v-model="form.deviceMac"></el-input>
+        </el-form-item>
+        <el-form-item label="设备端口" prop="devicePort">
+          <el-input v-model="form.devicePort"></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="form_btn" slot="footer">
+      <el-button @click="save">保 存</el-button>
+      <el-button @click="close">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      title: "新建",
+      form: {
+        companyName: "",
+        deviceName: "",
+        deviceIp: "",
+        deviceVideoParentType: "",
+        deviceVideoSubType: "",
+        account: "",
+        password: "",
+        gbsChannelNo: "",
+        gbsNvrNo: "",
+        channelNo: "",
+        rtspAddress: "",
+        longitude: "",
+        latitude: "",
+        u3dLongitude: "",
+        u3dLatitude: "",
+        deviceHeight: "",
+        u3dHeight: "",
+        orientation: "",
+        deviceAddress: "",
+        deviceBrand: "",
+        manufactor: "",
+        manufactorPhone: "",
+        deviceSn: "",
+        deviceMac: "",
+        devicePort: "",
+      },
+      form_list: {
+        company: [],
+        parent_type: [],
+        son_type: [],
+        orientation_types: [],
+      },
+      rules: {
+        companyName: [
+          { required: true, message: "请选择企业", trigger: "change" },
+        ],
+        deviceName: [
+          { required: true, message: "请填写设备名称", trigger: "blur" },
+        ],
+        deviceIp: [
+          { required: true, message: "请填写设备ip", trigger: "blur" },
+        ],
+        deviceVideoParentType: [
+          { required: true, message: "请选择设备大类", trigger: "change" },
+        ],
+        deviceVideoSubType: [
+          { required: true, message: "请选择设备小类", trigger: "change" },
+        ],
+        gbsChannelNo: [
+          { required: true, message: "请输入通道编码", trigger: "blur" },
+        ],
+        gbsNvrNo: [
+          { required: true, message: "请输入NVR编码", trigger: "blur" },
+        ],
+        longitude: [
+          { required: true, message: "请输入设备经度", trigger: "blur" },
+        ],
+        latitude: [
+          { required: true, message: "请输入设备经度", trigger: "blur" },
+        ],
+        deviceAddress: [
+          { required: true, message: "请输入安装位置", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    save() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          console.log('submit');
+        } else {
+          this.$message.warning('请填入必填项')
+          return false;
+        }
+      });
+    },
+    // 关闭弹窗
+    close() {
+      // 表单清空
+      this.$refs["form"].resetFields();
+      this.visible = false;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+  background-image: url("~@/assets/companyFile/dialogBack.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 750px;
+
+  /* 关闭弹窗叉号 */
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      color: #fff;
+      font-size: 18px;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+
+    p {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+}
+.form_body {
+  margin-top: 3%;
+  height: 600px;
+  overflow-y: scroll;
+  background: url("~@/assets/companyFile/242112.png") no-repeat;
+  background-size: 100% 100%;
+  p {
+    padding-top: 15px;
+    margin-left: 17px;
+    font-size: 16px;
+    color: #fff;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+}
+.form_body::-webkit-scrollbar {
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+
+.form_body::-webkit-scrollbar-thumb {
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+.form_btn {
+  .el-button {
+    width: 70px;
+    border: 1px solid #4a6072;
+    color: #fff;
+    border-radius: 0px !important;
+    background: #323f43;
+  }
+
+  .el-button:focus,
+  .el-button:hover {
+    color: #34e1b3;
+    background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+}
+/deep/.el-form {
+  /* 表单内容浮动布局，多行多列表单 */
+  width: 900px !important;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: 2vh;
+  .el-form-item {
+    /* 表单域名跟input浮动布局 */
+    display: flex;
+    width: 50%;
+
+    .el-form-item__label {
+      width: 40%;
+      text-align: center;
+      color: #fff;
+    }
+
+    .el-form-item__content {
+      .el-input__inner {
+        width: 300px;
+        border-radius: 0px;
+        // border: 0.5px dashed;
+        background: #3c4b4a;
+        color: #fff;
+      }
+
+      /* 查询框点击颜色变化 */
+      .el-input__inner:focus,
+      .el-input__inner:hover {
+        border-color: #1b3736;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file