From def163f46c8420b7a4620d543603abf00090ec92 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Mon, 1 May 2023 13:45:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E8=81=94=E8=AE=BE=E5=A4=87=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=95=B0=E6=8D=AE=E8=A1=A8=E5=8D=95=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=EF=BC=8C=E9=98=B2=E6=8A=96=E5=85=AC=E5=85=B1=E6=96=B9=E6=B3=95?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/publicMethod_lxy/debounce.js        |  25 ++
 .../components/addDIalog.vue                  | 260 +++++++++++++++++-
 .../components/equipmentTable.vue             |  28 +-
 3 files changed, 307 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/publicMethod_lxy/debounce.js

diff --git a/src/utils/publicMethod_lxy/debounce.js b/src/utils/publicMethod_lxy/debounce.js
new file mode 100644
index 0000000..b7a2dd4
--- /dev/null
+++ b/src/utils/publicMethod_lxy/debounce.js
@@ -0,0 +1,25 @@
+// 公共防抖
+export function debounce(fn, time) {
+    let timer = null
+    return function () {
+        if (timer) {
+            clearTimeout(timer)
+        }
+        timer = setTimeout(() => {
+            fn.apply(this, arguments)
+        }, time)
+    }
+}
+
+// methods:{
+    // fnc(data) {
+    // vue中原先写法
+    // }
+// }
+// 引入debounce方法后的写法
+// methods:{
+//     fnc:debounce(function(data) {
+
+//     })
+// }
+// data是原方法的参数，根据实际情况是否传参
\ No newline at end of file
diff --git a/src/views/systemManagement/correlationEquipment/components/addDIalog.vue b/src/views/systemManagement/correlationEquipment/components/addDIalog.vue
index 96a1d6b..ba6eb4e 100644
--- a/src/views/systemManagement/correlationEquipment/components/addDIalog.vue
+++ b/src/views/systemManagement/correlationEquipment/components/addDIalog.vue
@@ -1,22 +1,276 @@
 <template>
   <!-- 新建或者修改 -->
   <el-dialog
+    class="dialog"
     :title="dialogTitle"
     :visible.sync="visible"
-    width="1300px"
-    @close="close"
+    :close-on-click-modal="false"
+    width="970px"
   >
-    <div>123</div>
+    <div class="form_body">
+      <!-- 设备基础信息表单 -->
+      <div class="equipment_form">
+        <p>设备基础信息</p>
+        <el-form ref="equipmentForm" :model="equipmentForm">
+          <el-form-item label="企业名称">
+            <el-select
+              v-model="equipmentForm.company.villageName"
+              placeholder="请选择企业"
+            >
+              <el-option
+                v-for="item in equipmentForm.company"
+                :key="item.villageCode"
+                :label="item.villageName"
+                :value="item.villageCode"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备名称">
+            <el-input v-model="equipmentForm.name"></el-input>
+          </el-form-item>
+          <el-form-item label="设备IP">
+            <el-input v-model="equipmentForm.ip"></el-input>
+          </el-form-item>
+          <el-form-item label="设备大类">
+            <el-input v-model="equipmentForm.big"></el-input>
+          </el-form-item>
+          <el-form-item label="设备小类">
+            <el-input v-model="equipmentForm.small"></el-input>
+          </el-form-item>
+          <el-form-item label="登录账号">
+            <el-input v-model="equipmentForm.passUser"></el-input>
+          </el-form-item>
+          <el-form-item label="登录密码">
+            <el-input v-model="equipmentForm.passNum"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <!-- 视频通道信息表单 -->
+      <div class="video_form">
+        <p>视频通道信息</p>
+        <el-form ref="videoForm" :model="videoForm">
+          <el-form-item label="通道编码">
+            <el-input v-model="videoForm.channelCode"></el-input>
+          </el-form-item>
+          <el-form-item label="NVR编码">
+            <el-input v-model="videoForm.NVRCode"></el-input>
+          </el-form-item>
+          <el-form-item label="通道号">
+            <el-input v-model="videoForm.channelNum"></el-input>
+          </el-form-item>
+          <el-form-item label="RTSP流地址">
+            <el-input v-model="videoForm.address"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <!-- 设备位置信息表单 -->
+      <div class="equipment_address_form">
+        <p>设备位置信息</p>
+        <el-form ref="addressForm" :model="addressForm">
+          <el-form-item label="设备经度">
+            <el-input v-model="addressForm.longitude"></el-input>
+          </el-form-item>
+          <el-form-item label="设备纬度">
+            <el-input v-model="addressForm.latitude"></el-input>
+          </el-form-item>
+          <el-form-item label="U3D经度">
+            <el-input v-model="addressForm.U3D_longitude"></el-input>
+          </el-form-item>
+          <el-form-item label="U3D纬度">
+            <el-input v-model="addressForm.U3D_latitude"></el-input>
+          </el-form-item>
+          <el-form-item label="设备高度">
+            <el-input v-model="addressForm.equipemnt_hight"></el-input>
+          </el-form-item>
+          <el-form-item label="U3D高度">
+            <el-input v-model="addressForm.U3D_hight"></el-input>
+          </el-form-item>
+          <el-form-item label="设备方位">
+            <el-select
+              v-model="addressForm.equipment_orientation.orientationCode"
+              placeholder="请选择设备方位"
+            >
+              <el-option
+                v-for="item in addressForm.equipment_orientation"
+                :key="item.orientationCode"
+                :label="item.orientation"
+                :value="item.orientationCode"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="安装位置">
+            <el-input v-model="addressForm.equipment_position"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <!-- 设备其他信息表单 -->
+      <div class="other_form">
+        <p>设备其他信息</p>
+        <el-form ref="otherForm" :model="otherForm">
+          <el-form-item label="设备品牌">
+            <el-input v-model="otherForm.brand"></el-input>
+          </el-form-item>
+          <el-form-item label="设备厂家">
+            <el-input v-model="otherForm.manufacturer"></el-input>
+          </el-form-item>
+          <el-form-item label="厂家联系电话">
+            <el-input v-model="otherForm.manufacturer_phone"></el-input>
+          </el-form-item>
+          <el-form-item label="SN号">
+            <el-input v-model="otherForm.SN_num"></el-input>
+          </el-form-item>
+          <el-form-item label="设备MAC">
+            <el-input v-model="otherForm.MAC"></el-input>
+          </el-form-item>
+          <el-form-item label="设备端口">
+            <el-input v-model="otherForm.port"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="saveFormData">保 存</el-button>
+      <el-button>取 消</el-button>
+    </div>
   </el-dialog>
 </template>
 <script>
+import {debounce} from '@/utils/publicMethod_lxy/debounce.js'
 export default {
+  name: "AddDialog",
   data() {
     return {
       visible: false,
+      dialogTitle: "新建",
+      equipmentForm: {
+        // 设备基础信息表单
+        company: [],
+      },
+      // 视频通道信息表单
+      videoForm: {
+        channelCode: "",
+        NVRCode: "",
+        channelNum: "",
+        address: "",
+      },
+      // 设备位置信息表单
+      addressForm: {
+        longitude: "",
+        latitude: "",
+        U3D_longitude: "",
+        U3D_latitude: "",
+        equipemnt_hight: "",
+        U3D_hight: "",
+        equipment_orientation: [],
+        equipment_position: "",
+      },
+      // 设备其他信息表单
+      otherForm: {
+        brand: "",
+        manufacturer: "",
+        manufacturer_phone: "",
+        SN_num: "",
+        MAC: "",
+        port: "",
+      },
     };
   },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    saveFormData:debounce(function() {
+        this.$message.success('232324234')
+    },300)
+  },
 };
 </script>
 <style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+  }
+  background-image: url("~@/assets/companyFile/22136.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 720px;
+  /* 关闭弹窗叉号 */
+  .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;
+    }
+  }
+  .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;
+  }
+  .form_body {
+    height: 600px;
+    overflow-y: scroll;
+  }
+  .form_body::-webkit-scrollbar {
+    width: 10px;
+    background-color: #5e666a;
+    border-radius: 4px;
+  }
+  .form_body::-webkit-scrollbar-thumb {
+    width: 9px;
+    background-color: #3c4b4a;
+    border-radius: 4px;
+  }
+  .el-form {
+    /* 表单内容浮动布局，多行多列表单 */
+    width: 900px !important;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .el-form-item {
+      /* 表单域名跟input浮动布局 */
+      display: flex;
+      width: 30%;
+      .el-form-item__label {
+        width: 40%;
+        text-align: center;
+        color: #fff;
+      }
+      .el-form-item__content {
+        .el-input__inner {
+          width: 170px;
+          border-radius: 0px;
+          background: #3c4b4a;
+          color: #fff;
+        }
+        /* 查询框点击颜色变化 */
+        .el-input__inner:focus,
+        .el-input__inner:hover {
+          border-color: #1b3736;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
index 6b1090d..a0c1c14 100644
--- a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
+++ b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
@@ -29,7 +29,11 @@
     </div>
     <!-- 增删按钮 -->
     <div class="equipment_data_btn">
-      <el-button v-for="item in btnList" :key="item.value">
+      <el-button
+        v-for="item in btnList"
+        :key="item.value"
+        @click="openDialog(item.value)"
+      >
         {{ item.label }}</el-button
       >
     </div>
@@ -65,10 +69,16 @@
       </el-table>
     </div>
     <div class="equipment_data_pagination"></div>
+    <AddDialog ref="addDialog"></AddDialog>
   </div>
 </template>
 <script>
+import AddDialog from './addDialog';
 export default {
+  name: "EquipmentTable",
+  components: {
+    AddDialog,
+  },
   data() {
     return {
       search: {
@@ -87,11 +97,18 @@ export default {
         { prop: "deviceAddress", label: "设备IP" },
         { prop: "cameraIp", label: "设备经度" },
         { prop: "imageTypeCn", label: "设备维度" },
-        { prop: "imageTypeCn", label: "进出方向" },
+        { prop: "imageTypeC", label: "进出方向" },
       ],
     };
   },
   methods: {
+    openDialog(num) {
+      console.log(num,'num');
+      if (num === "1") {
+        console.log(num,'num');
+        this.$refs.addDialog.open();
+      }
+    },
     table_header({ row, rowIndex }) {
       console.log(row);
       console.log(rowIndex);
@@ -162,7 +179,12 @@ export default {
         text-align: center;
         color: #fff;
         font-weight: 500;
-        background: linear-gradient(to right,#284f49,#2f6363,#233b38) !important;
+        background: linear-gradient(
+          to right,
+          #284f49,
+          #2f6363,
+          #233b38
+        ) !important;
         & th {
           background-color: transparent;
         }