From eda71f56112930af7ce71b648d7267af4326f246 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Thu, 11 May 2023 09:24:40 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=85=B3=E8=81=94=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../systemManagement/companyList/index.vue    |   2 +-
 .../components/addPerceptionDialog.vue        | 383 +++++++++++++-----
 .../components/addVideoDialog.vue             |  77 ++--
 .../components/equipmentTable.vue             |   2 +-
 .../correlationEquipment/index.vue            |   8 +-
 5 files changed, 336 insertions(+), 136 deletions(-)

diff --git a/src/views/systemManagement/companyList/index.vue b/src/views/systemManagement/companyList/index.vue
index 91a3c5b..0c054e4 100644
--- a/src/views/systemManagement/companyList/index.vue
+++ b/src/views/systemManagement/companyList/index.vue
@@ -392,7 +392,7 @@ export default {
 
             /* 图片鼠标经过按钮 */
             .btn {
-              margin-left: 25%;
+              margin-left: 20%;
               margin-top: 25%;
 
               button {
diff --git a/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue b/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue
index 6b0ee52..a425cba 100644
--- a/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue
+++ b/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue
@@ -11,196 +11,368 @@
       <!-- 设备基础信息表单 -->
       <div class="equipment_form">
         <p>设备基础信息</p>
-        <el-form ref="equipmentForm" :model="equipmentForm">
-          <el-form-item label="企业名称">
+        <el-form
+          ref="equipmentForm"
+          :model="form"
+          :rules="rules"
+          :disabled="disabled"
+        >
+          <el-form-item label="企业名称" prop="companyName">
             <el-select
-              v-model="equipmentForm.company.villageName"
+              ref="companySelect"
+              v-model="form.companyName"
               placeholder="请选择企业"
             >
               <el-option
-                v-for="item in equipmentForm.company"
-                :key="item.villageCode"
-                :label="item.villageName"
-                :value="item.villageCode"
+                v-for="item in form.company"
+                :key="item.id"
+                :label="item.companyName"
+                :value="item.id"
               >
               </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>
-          <el-form-item label="设备IP">
-            <el-input v-model="equipmentForm.ip"></el-input>
+          <el-form-item label="设备名称" prop="deviceName">
+            <el-input v-model="form.deviceName"></el-input>
           </el-form-item>
-          <el-form-item label="登录账号">
-            <el-input v-model="equipmentForm.passUser"></el-input>
+          <el-form-item label="设备IP" prop="deviceIp">
+            <el-input v-model="form.deviceIp"></el-input>
           </el-form-item>
-          <el-form-item label="登录密码">
-            <el-input v-model="equipmentForm.passNum"></el-input>
+          <el-form-item label="登录账号" prop="account">
+            <el-input v-model="form.account"></el-input>
           </el-form-item>
-          <el-form-item label="设备大类">
-            <el-input v-model="equipmentForm.big"></el-input>
+          <el-form-item label="登录密码" prop="password">
+            <el-input v-model="form.password"></el-input>
           </el-form-item>
-          <el-form-item label="是否卡口">
-            <el-input v-model="equipmentForm.mouse"></el-input>
+          <el-form-item label="设备大类" prop="deviceVideoParentType">
+            <el-select
+              v-model="form.deviceVideoParentType"
+              placeholder="请选择设备大类"
+            >
+              <el-option
+                v-for="item in form.perception_type"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              >
+              </el-option>
+            </el-select>
           </el-form-item>
-          <el-form-item label="设备小类">
-            <el-input v-model="equipmentForm.small"></el-input>
+          <el-form-item label="设备小类" prop="deviceVideoSubType">
+            <el-select
+              v-model="form.deviceVideoSubType"
+              placeholder="请选择设备小类"
+            >
+              <el-option
+                v-for="item in form.video_type"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              >
+              </el-option>
+            </el-select>
           </el-form-item>
         </el-form>
       </div>
       <!-- 视频通道信息表单 -->
       <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
+          ref="videoForm"
+          :model="form"
+          :rules="rules"
+          :disabled="disabled"
+        >
+          <el-form-item label="通道编码" prop="gbsChannelNo">
+            <el-input v-model="form.gbsChannelNo"></el-input>
           </el-form-item>
-          <el-form-item label="NVR编码">
-            <el-input v-model="videoForm.NVRCode"></el-input>
+          <el-form-item label="NVR编码" prop="gbsNvrNo">
+            <el-input v-model="form.gbsNvrNo"></el-input>
           </el-form-item>
-          <el-form-item label="通道号">
-            <el-input v-model="videoForm.channelNum"></el-input>
+          <el-form-item label="通道号" prop="channelNo">
+            <el-input v-model="form.channelNo"></el-input>
           </el-form-item>
-          <el-form-item label="RTSP流地址">
-            <el-input v-model="videoForm.address"></el-input>
+          <el-form-item label="RTSP流地址" prop="rtspAddress">
+            <el-input v-model="form.rtspAddress"></el-input>
           </el-form-item>
         </el-form>
       </div>
       <!-- 设备位置信息表单 -->
       <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
+          ref="addressForm"
+          :model="form"
+          :rules="rules"
+          :disabled="disabled"
+        >
+          <el-form-item label="设备经度" prop="longitude">
+            <el-input v-model="form.longitude"></el-input>
           </el-form-item>
-          <el-form-item label="设备纬度">
-            <el-input v-model="addressForm.latitude"></el-input>
+          <el-form-item label="设备纬度" prop="latitude">
+            <el-input v-model="form.latitude"></el-input>
           </el-form-item>
-          <el-form-item label="U3D经度">
-            <el-input v-model="addressForm.U3D_longitude"></el-input>
+          <el-form-item label="U3D经度" prop="u3dLongitude">
+            <el-input v-model="form.u3dLongitude"></el-input>
           </el-form-item>
-          <el-form-item label="U3D纬度">
-            <el-input v-model="addressForm.U3D_latitude"></el-input>
+          <el-form-item label="U3D纬度" prop="u3dLatitude">
+            <el-input v-model="form.u3dLatitude"></el-input>
           </el-form-item>
-          <el-form-item label="设备高度">
-            <el-input v-model="addressForm.equipemnt_hight"></el-input>
+          <el-form-item label="设备高度" prop="deviceHeight">
+            <el-input v-model="form.deviceHeight"></el-input>
           </el-form-item>
-          <el-form-item label="U3D高度">
-            <el-input v-model="addressForm.U3D_hight"></el-input>
+          <el-form-item label="U3D高度" prop="u3dHeight">
+            <el-input v-model="form.u3dHeight"></el-input>
           </el-form-item>
-          <el-form-item label="设备方位">
-            <el-select
-              v-model="addressForm.equipment_orientation.orientationCode"
-              placeholder="请选择设备方位"
-            >
+          <el-form-item label="设备方位" prop="orientation">
+            <el-select v-model="form.orientation" placeholder="请选择设备方位">
               <el-option
-                v-for="item in addressForm.equipment_orientation"
-                :key="item.orientationCode"
-                :label="item.orientation"
-                :value="item.orientationCode"
+                v-for="item in form.orientation_types"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
               >
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="安装位置">
-            <el-input v-model="addressForm.equipment_position"></el-input>
+          <el-form-item label="安装位置" prop="deviceAddress">
+            <el-input v-model="form.deviceAddress"></el-input>
           </el-form-item>
         </el-form>
       </div>
       <!-- 设备其他信息表单 -->
       <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 ref="otherForm" :model="form" :disabled="disabled">
+          <el-form-item label="设备品牌" prop="deviceBrand">
+            <el-input v-model="form.deviceBrand"></el-input>
           </el-form-item>
-          <el-form-item label="设备厂家">
-            <el-input v-model="otherForm.manufacturer"></el-input>
+          <el-form-item label="设备厂家" prop="manufactor">
+            <el-input v-model="form.manufactor"></el-input>
           </el-form-item>
-          <el-form-item label="厂家联系电话">
-            <el-input v-model="otherForm.manufacturer_phone"></el-input>
+          <el-form-item label="厂家联系电话" prop="manufactorPhone">
+            <el-input v-model="form.manufactorPhone"></el-input>
           </el-form-item>
-          <el-form-item label="SN号">
-            <el-input v-model="otherForm.SN_num"></el-input>
+          <el-form-item label="SN号" prop="deviceSn">
+            <el-input v-model="form.deviceSn"></el-input>
           </el-form-item>
-          <el-form-item label="设备MAC">
-            <el-input v-model="otherForm.MAC"></el-input>
+          <el-form-item label="设备MAC" prop="deviceMac">
+            <el-input v-model="form.deviceMac"></el-input>
           </el-form-item>
-          <el-form-item label="设备端口">
-            <el-input v-model="otherForm.port"></el-input>
+          <el-form-item label="设备端口" prop="devicePort">
+            <el-input v-model="form.devicePort"></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>
+      <el-button
+        @click="
+          saveFormData('equipmentForm', 'videoForm', 'addressForm', 'otherForm')
+        "
+        >保 存</el-button
+      >
+      <el-button @click="close()">取 消</el-button>
     </div>
   </el-dialog>
 </template>
-  <script>
+<script>
+import {
+  commonDict,
+  getCompanyList,
+  addVideoList,
+} from "@/api/correlationEquipment";
 import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
 export default {
-  name: "addPerceptionDialog",
+  name: "addVideoDialog",
   data() {
     return {
       visible: false,
       dialogTitle: "新建",
-      equipmentForm: {
+      form: {
         // 设备基础信息表单
+        companyId: "",
+        companyName: "",
         company: [],
-        mouse:'',
-      },
-      // 视频通道信息表单
-      videoForm: {
-        channelCode: "",
-        NVRCode: "",
-        channelNum: "",
-        address: "",
-      },
-      // 设备位置信息表单
-      addressForm: {
+        deviceName: "",
+        deviceIp: "",
+        deviceVideoParentType: "",
+        deviceParentType: "", // 大类
+        video_type: [],
+        deviceVideoSubType: "", // 小类
+        perception_type: [],
+        account: "",
+        password: "",
+        // 视频通道信息表单
+        gbsChannelNo: "",
+        gbsNvrNo: "",
+        channelNo: "",
+        rtspAddress: "",
+        // 设备位置信息表单
         longitude: "",
         latitude: "",
-        U3D_longitude: "",
-        U3D_latitude: "",
-        equipemnt_hight: "",
-        U3D_hight: "",
-        equipment_orientation: [],
-        equipment_position: "",
+        u3dLongitude: "",
+        u3dLatitude: "",
+        deviceHeight: "",
+        u3dHeight: "",
+        orientation: "",
+        orientation_types: [],
+        deviceAddress: "",
+        // 设备其他信息表单
+        deviceBrand: "",
+        manufactor: "",
+        manufactorPhone: "",
+        deviceSn: "",
+        deviceMac: "",
+        devicePort: "",
+        isDoorwayVideo: "",
+        isShowVideo: "",
       },
-      // 设备其他信息表单
-      otherForm: {
-        brand: "",
-        manufacturer: "",
-        manufacturer_phone: "",
-        SN_num: "",
-        MAC: "",
-        port: "",
+      disabled: false, // 表单是否禁用
+      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" },
+        ],
       },
     };
   },
+  created() {
+    // 请求设备小类下拉
+    const params = {
+      dictType: "device_video_sub_type",
+    };
+    commonDict(params).then((res) => {
+      this.form.video_type = res.data;
+    });
+    const val = {
+      dictType: "device_perception_sub_type",
+    };
+    // 请求设备大类下拉
+    commonDict(val).then((res) => {
+      this.form.perception_type = res.data;
+    });
+    // 请求设备方位下拉
+    const param_op = {
+      dictType: "orientation",
+    };
+    commonDict(param_op).then((res) => {
+      this.form.orientation_types = res.data;
+    });
+    // 请求企业名称下拉
+    getCompanyList().then((res) => {
+      this.form.company = res.data;
+    });
+  },
   methods: {
-    open() {
+    open(num, row) {
       this.visible = true;
+      if (num === "1") {
+        this.dialogTitle = "新建";
+      } else if (num === "2") {
+        this.dialogTitle = "编辑";
+        this.form = row;
+      } else if (num === "5") {
+        this.dialogTitle = "详情";
+        this.form = row;
+        this.disabled = true;
+      }
     },
-    saveFormData: debounce(function () {
-      this.$message.success("232324234");
+    // 表单验证必填
+    saveFormData: debounce(function (formName1, formName2, formName3) {
+      this.$refs[formName1].validate((valid1) => {
+        if (valid1) {
+          this.$refs[formName2].validate((valid2) => {
+            if (valid2) {
+              this.$refs[formName3].validate((valid3) => {
+                if (valid3) {
+                  delete this.form.company;
+                  delete this.form.video_type;
+                  delete this.form.perception_type;
+                  delete this.form.orientation_types;
+                  this.form.companyId = this.$refs.companySelect.selected.value; // 企业对应id
+                  const params = this.form;
+                  console.log("this.form", this.form);
+                  if (this.dialogTitle === "新建") {
+                    addVideoList(params)
+                      .then((res) => {
+                        this.visible = false;
+                        this.$message({
+                          message: res.msg,
+                          type: "success",
+                        });
+                      })
+                      .catch((err) => {
+                        console.log(err); //代码错误、请求失败捕获
+                      });
+                  }
+                } else {
+                  this.$message.warning("请填入必填项");
+                }
+              }); // 视频通道信息必填验证
+            } else {
+              this.$message.warning("请填入必填项");
+            }
+          }); // 视频通道信息必填验证
+        } else {
+          this.$message.warning("请填入必填项");
+        }
+      }); // 设备基础必填验证
     }, 300),
+    // 关闭弹窗
+    close() {
+      this.visible = false;
+      // 重置表单
+      // 设备基础信息表单重置
+      this.$refs['equipmentForm'].resetFields()
+      // 视频通道信息表单重置
+      this.$refs['videoForm'].resetFields()
+      // 设备位置信息表单重置 
+      this.$refs['addressForm'].resetFields() 
+      // 设备其他信息表单重置
+      this.$refs['otherForm'].resetFields()
+    },
   },
 };
 </script>
-  <style lang="less" scoped>
+<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: 720px;
+  height: 750px;
 
   /* 关闭弹窗叉号 */
   .el-dialog__headerbtn {
@@ -237,6 +409,7 @@ export default {
   }
 
   .form_body {
+    margin-top: 3%;
     height: 600px;
     overflow-y: scroll;
     p {
@@ -254,7 +427,9 @@ export default {
     background: url("~@/assets/companyFile/242112.png") no-repeat !important;
     background-size: 100% 100% !important;
   }
-
+  .equipment_form {
+    margin-top: -2%;
+  }
   .form_body::-webkit-scrollbar {
     width: 6px;
     background-color: #5e666a;
diff --git a/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue b/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue
index 7c860b4..a62c97d 100644
--- a/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue
+++ b/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue
@@ -18,7 +18,11 @@
           :disabled="disabled"
         >
           <el-form-item label="企业名称" prop="companyName">
-            <el-select ref="companySelect" v-model="form.companyName" placeholder="请选择企业">
+            <el-select
+              ref="companySelect"
+              v-model="form.companyName"
+              placeholder="请选择企业"
+            >
               <el-option
                 v-for="item in form.company"
                 :key="item.id"
@@ -62,10 +66,10 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="登录账号">
+          <el-form-item label="登录账号" prop="account">
             <el-input v-model="form.account"></el-input>
           </el-form-item>
-          <el-form-item label="登录密码">
+          <el-form-item label="登录密码" prop="password">
             <el-input v-model="form.password"></el-input>
           </el-form-item>
         </el-form>
@@ -85,10 +89,10 @@
           <el-form-item label="NVR编码" prop="gbsNvrNo">
             <el-input v-model="form.gbsNvrNo"></el-input>
           </el-form-item>
-          <el-form-item label="通道号">
+          <el-form-item label="通道号" prop="channelNo">
             <el-input v-model="form.channelNo"></el-input>
           </el-form-item>
-          <el-form-item label="RTSP流地址">
+          <el-form-item label="RTSP流地址" prop="rtspAddress">
             <el-input v-model="form.rtspAddress"></el-input>
           </el-form-item>
         </el-form>
@@ -103,24 +107,24 @@
           :disabled="disabled"
         >
           <el-form-item label="设备经度" prop="longitude">
-            <el-input v-model="form.longitude" ></el-input>
+            <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经度">
+          <el-form-item label="U3D经度" prop="u3dLongitude">
             <el-input v-model="form.u3dLongitude"></el-input>
           </el-form-item>
-          <el-form-item label="U3D纬度">
+          <el-form-item label="U3D纬度" prop="u3dLatitude">
             <el-input v-model="form.u3dLatitude"></el-input>
           </el-form-item>
-          <el-form-item label="设备高度">
+          <el-form-item label="设备高度" prop="deviceHeight">
             <el-input v-model="form.deviceHeight"></el-input>
           </el-form-item>
-          <el-form-item label="U3D高度">
+          <el-form-item label="U3D高度" prop="u3dHeight">
             <el-input v-model="form.u3dHeight"></el-input>
           </el-form-item>
-          <el-form-item label="设备方位">
+          <el-form-item label="设备方位" prop="orientation">
             <el-select v-model="form.orientation" placeholder="请选择设备方位">
               <el-option
                 v-for="item in form.orientation_types"
@@ -140,22 +144,22 @@
       <div class="other_form">
         <p>设备其他信息</p>
         <el-form ref="otherForm" :model="form" :disabled="disabled">
-          <el-form-item label="设备品牌">
+          <el-form-item label="设备品牌" prop="deviceBrand">
             <el-input v-model="form.deviceBrand"></el-input>
           </el-form-item>
-          <el-form-item label="设备厂家">
+          <el-form-item label="设备厂家" prop="manufactor">
             <el-input v-model="form.manufactor"></el-input>
           </el-form-item>
-          <el-form-item label="厂家联系电话">
+          <el-form-item label="厂家联系电话" prop="manufactorPhone">
             <el-input v-model="form.manufactorPhone"></el-input>
           </el-form-item>
-          <el-form-item label="SN号">
+          <el-form-item label="SN号" prop="deviceSn">
             <el-input v-model="form.deviceSn"></el-input>
           </el-form-item>
-          <el-form-item label="设备MAC">
+          <el-form-item label="设备MAC" prop="deviceMac">
             <el-input v-model="form.deviceMac"></el-input>
           </el-form-item>
-          <el-form-item label="设备端口">
+          <el-form-item label="设备端口" prop="devicePort">
             <el-input v-model="form.devicePort"></el-input>
           </el-form-item>
         </el-form>
@@ -168,7 +172,7 @@
         "
         >保 存</el-button
       >
-      <el-button>取 消</el-button>
+      <el-button @click="close()">取 消</el-button>
     </div>
   </el-dialog>
 </template>
@@ -260,6 +264,7 @@ export default {
     };
   },
   created() {
+    // 请求设备小类下拉
     const params = {
       dictType: "device_video_sub_type",
     };
@@ -269,15 +274,18 @@ export default {
     const val = {
       dictType: "device_perception_sub_type",
     };
+    // 请求设备大类下拉
     commonDict(val).then((res) => {
       this.form.perception_type = res.data;
     });
+    // 请求设备方位下拉
     const param_op = {
       dictType: "orientation",
     };
     commonDict(param_op).then((res) => {
       this.form.orientation_types = res.data;
     });
+    // 请求企业名称下拉
     getCompanyList().then((res) => {
       this.form.company = res.data;
     });
@@ -296,6 +304,7 @@ export default {
         this.disabled = true;
       }
     },
+    // 表单验证必填
     saveFormData: debounce(function (formName1, formName2, formName3) {
       this.$refs[formName1].validate((valid1) => {
         if (valid1) {
@@ -307,17 +316,17 @@ export default {
                   delete this.form.video_type;
                   delete this.form.perception_type;
                   delete this.form.orientation_types;
-                  this.form.companyId = this.$refs.companySelect.selected.value // 企业对应id
+                  this.form.companyId = this.$refs.companySelect.selected.value; // 企业对应id
                   const params = this.form;
                   console.log("this.form", this.form);
                   if (this.dialogTitle === "新建") {
                     addVideoList(params)
                       .then((res) => {
-                          this.visible = false;
-                          this.$message({
-                            message: res.msg,
-                            type: "success",
-                          });
+                        this.visible = false;
+                        this.$message({
+                          message: res.msg,
+                          type: "success",
+                        });
                       })
                       .catch((err) => {
                         console.log(err); //代码错误、请求失败捕获
@@ -336,6 +345,19 @@ export default {
         }
       }); // 设备基础必填验证
     }, 300),
+    // 关闭弹窗
+    close() {
+      this.visible = false;
+      // 重置表单
+      // 设备基础信息表单重置
+      this.$refs['equipmentForm'].resetFields()
+      // 视频通道信息表单重置
+      this.$refs['videoForm'].resetFields()
+      // 设备位置信息表单重置 
+      this.$refs['addressForm'].resetFields() 
+      // 设备其他信息表单重置
+      this.$refs['otherForm'].resetFields()
+    },
   },
 };
 </script>
@@ -348,7 +370,7 @@ export default {
   background-image: url("~@/assets/companyFile/dialogBack.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
-  height: 720px;
+  height: 750px;
 
   /* 关闭弹窗叉号 */
   .el-dialog__headerbtn {
@@ -385,6 +407,7 @@ export default {
   }
 
   .form_body {
+    margin-top: 3%;
     height: 600px;
     overflow-y: scroll;
     p {
@@ -402,7 +425,9 @@ export default {
     background: url("~@/assets/companyFile/242112.png") no-repeat !important;
     background-size: 100% 100% !important;
   }
-
+  .equipment_form {
+    margin-top: -2%;
+  }
   .form_body::-webkit-scrollbar {
     width: 6px;
     background-color: #5e666a;
diff --git a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
index 236d078..ce68d8f 100644
--- a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
+++ b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
@@ -375,7 +375,7 @@ export default {
     width: calc(100% - 30px);
     margin-top: 12px;
     margin-left: 12px;
-    height: 27vh;
+    height: 30vh;
 
     .el-table,
     .el-table__expanded-cell {
diff --git a/src/views/systemManagement/correlationEquipment/index.vue b/src/views/systemManagement/correlationEquipment/index.vue
index f577fc6..fc125fa 100644
--- a/src/views/systemManagement/correlationEquipment/index.vue
+++ b/src/views/systemManagement/correlationEquipment/index.vue
@@ -266,7 +266,7 @@ export default {
     /* 左侧 */
     .cardBodyLeft {
       width: 25%;
-      height: 100%;
+      height: 97%;
       background: rgba(23, 36, 36, 0.4);
       border: 0.5px solid #485f6c;
       border-radius: 4px;
@@ -316,7 +316,7 @@ export default {
         height: 69vh;
         .el-tree {
           /* 树形数据过长添加滚动条 */
-          height: 95%;
+          height: 96%;
           overflow: auto;
           // box-shadow: 5px 5px 10px #126a58;
           border-radius: 4px;
@@ -411,8 +411,8 @@ export default {
         font-size: 18px;
         text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
       }
-      width: 75%;
-      height: 100%;
+      width: 74%;
+      height: 97%;
       border-radius: 4px;
       background: rgba(31, 45, 49, 0.4);
       border: 0.5px solid #485f6c;

From 6bd6a4c8fe670d1be998c008e54e0315fb39c002 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Fri, 12 May 2023 13:33:57 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=85=B3=E8=81=94=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/correlationEquipment/index.js         |  32 ++
 .../components/addPerceptionDialog.vue        | 297 ++++++++++++------
 .../components/addVideoDialog.vue             |   3 +
 .../components/deriveDialog.vue               |  31 +-
 .../components/equipmentTable.vue             |   4 +-
 .../correlationEquipment/index.vue            |   7 +-
 6 files changed, 270 insertions(+), 104 deletions(-)

diff --git a/src/api/correlationEquipment/index.js b/src/api/correlationEquipment/index.js
index 00a86a1..6898d4b 100644
--- a/src/api/correlationEquipment/index.js
+++ b/src/api/correlationEquipment/index.js
@@ -47,4 +47,36 @@ export function addVideoList(params) {
         method: 'get',
         params
     })
+}
+// 新增智能感应
+export function addPerceptionList(params) {
+    return request({
+        url: '/safety/tbDevicePerceptionInfo/insert',
+        method: 'get',
+        params
+    })
+}
+// 修改智能感应 
+export function changePerceptionList(params) {
+    return request({
+        url: '/safety/tbDevicePerceptionInfo/update',
+        method: 'post',
+        params
+    })
+}
+// 导出视频监控
+export function exportVideo(params) {
+    return request({
+        url: '/safety/tbDeviceVideoInfo/export',
+        method: 'post',
+        params
+    })
+}
+// 导出智能感应
+export function exportPerception(params) {
+    return request({
+        url: '/safety/tbDevicePerceptionInfo/export',
+        method: 'post',
+        params
+    })
 }
\ No newline at end of file
diff --git a/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue b/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue
index a425cba..60efde6 100644
--- a/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue
+++ b/src/views/systemManagement/correlationEquipment/components/addPerceptionDialog.vue
@@ -4,6 +4,7 @@
     class="dialog"
     :title="dialogTitle"
     :visible.sync="visible"
+    @close="close()"
     :close-on-click-modal="false"
     width="970px"
   >
@@ -18,13 +19,10 @@
           :disabled="disabled"
         >
           <el-form-item label="企业名称" prop="companyName">
-            <el-select
-              ref="companySelect"
-              v-model="form.companyName"
-              placeholder="请选择企业"
-            >
+            <el-select v-model="form.companyName" placeholder="请选择企业">
               <el-option
-                v-for="item in form.company"
+                v-for="item in list.company"
+                @click.native="companyNameselected(item.companyName, item.id)"
                 :key="item.id"
                 :label="item.companyName"
                 :value="item.id"
@@ -32,8 +30,7 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item>
-          </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>
@@ -46,13 +43,14 @@
           <el-form-item label="登录密码" prop="password">
             <el-input v-model="form.password"></el-input>
           </el-form-item>
-          <el-form-item label="设备大类" prop="deviceVideoParentType">
+          <el-form-item label="设备大类" prop="devicePerceptionParentTypeCn">
             <el-select
-              v-model="form.deviceVideoParentType"
+              v-model="form.devicePerceptionParentTypeCn"
               placeholder="请选择设备大类"
             >
               <el-option
-                v-for="item in form.perception_type"
+                v-for="item in list.perception_type"
+                @click.native="parent_selected(item.dictLabel,item.dictValue)"
                 :key="item.dictValue"
                 :label="item.dictLabel"
                 :value="item.dictValue"
@@ -60,13 +58,30 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="设备小类" prop="deviceVideoSubType">
+          <el-form-item label="是否卡口" prop="isDoorwayVideoCn">
             <el-select
-              v-model="form.deviceVideoSubType"
+              ref="isDoorwayVideoCn"
+              v-model="form.isDoorwayVideoCn"
+              placeholder="请选择是否卡口"
+            >
+              <el-option
+                v-for="item in list.isDoorwayVideoList"
+                @click.native="isDoorselected(item.id)"
+                :key="item.id"
+                :label="item.label"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备小类" prop="devicePerceptionSubTypeCn">
+            <el-select
+              v-model="form.devicePerceptionSubTypeCn"
               placeholder="请选择设备小类"
             >
               <el-option
-                v-for="item in form.video_type"
+                v-for="item in list.video_type"
+                @click.native="perception_selected(item.dictLabel,item.dictValue)"
                 :key="item.dictValue"
                 :label="item.dictLabel"
                 :value="item.dictValue"
@@ -126,10 +141,24 @@
           <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-form-item label="进出方向" prop="directionCn">
+            <el-select v-model="form.directionCn" placeholder="请选择进出方向">
               <el-option
-                v-for="item in form.orientation_types"
+                v-for="item in list.directionList"
+                :key="item.id"
+                :label="item.label"
+                :value="item.label"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备方位" prop="orientationCn">
+            <el-select
+              v-model="form.orientationCn"
+              placeholder="请选择设备方位"
+            >
+              <el-option
+                v-for="item in list.orientation_types"
                 :key="item.dictValue"
                 :label="item.dictLabel"
                 :value="item.dictValue"
@@ -137,7 +166,11 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="安装位置" prop="deviceAddress">
+          <el-form-item
+            label="安装位置"
+            prop="deviceAddress"
+            class="deviceAddress_text"
+          >
             <el-input v-model="form.deviceAddress"></el-input>
           </el-form-item>
         </el-form>
@@ -169,11 +202,10 @@
     </div>
     <div slot="footer" class="dialog-footer">
       <el-button
-        @click="
-          saveFormData('equipmentForm', 'videoForm', 'addressForm', 'otherForm')
-        "
+        @click="saveFormData('equipmentForm', 'videoForm', 'addressForm')"
         >保 存</el-button
       >
+      <!-- <el-button @click="save()"></el-button> -->
       <el-button @click="close()">取 消</el-button>
     </div>
   </el-dialog>
@@ -182,27 +214,43 @@
 import {
   commonDict,
   getCompanyList,
-  addVideoList,
+  addPerceptionList,
+  changePerceptionList,
 } from "@/api/correlationEquipment";
-import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
+// import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
 export default {
-  name: "addVideoDialog",
+  name: "addPerceptionDialog",
   data() {
     return {
       visible: false,
-      dialogTitle: "新建",
+      dialogTitle: "",
+      list: {
+        company: [],
+        video_type: [],
+        perception_type: [],
+        isDoorwayVideoList: [
+          { label: "是", id: "1" },
+          { label: "否", id: "2" },
+        ],
+        directionList: [
+          { label: "进", id: "1" },
+          { label: "出", id: "2" },
+        ],
+        orientation_types: [],
+      },
       form: {
         // 设备基础信息表单
         companyId: "",
         companyName: "",
-        company: [],
         deviceName: "",
         deviceIp: "",
-        deviceVideoParentType: "",
-        deviceParentType: "", // 大类
-        video_type: [],
-        deviceVideoSubType: "", // 小类
-        perception_type: [],
+        // deviceVideoParentType: "",
+        devicePerceptionSubType: "", // 小类码值
+        devicePerceptionSubTypeCn: "", // 小类
+        devicePerceptionParentType: "", // 大类码值
+        devicePerceptionParentTypeCn: "", // 大类
+        isDoorwayVideoCn: "",
+        isDoorwayVideo: "",
         account: "",
         password: "",
         // 视频通道信息表单
@@ -217,8 +265,9 @@ export default {
         u3dLatitude: "",
         deviceHeight: "",
         u3dHeight: "",
+        directionCn: "",
         orientation: "",
-        orientation_types: [],
+        orientationCn: "",
         deviceAddress: "",
         // 设备其他信息表单
         deviceBrand: "",
@@ -227,8 +276,6 @@ export default {
         deviceSn: "",
         deviceMac: "",
         devicePort: "",
-        isDoorwayVideo: "",
-        isShowVideo: "",
       },
       disabled: false, // 表单是否禁用
       rules: {
@@ -241,10 +288,10 @@ export default {
         deviceIp: [
           { required: true, message: "请填写设备ip", trigger: "blur" },
         ],
-        deviceVideoParentType: [
+        devicePerceptionParentTypeCn: [
           { required: true, message: "请选择设备大类", trigger: "change" },
         ],
-        deviceVideoSubType: [
+        devicePerceptionSubTypeCn: [
           { required: true, message: "请选择设备小类", trigger: "change" },
         ],
         gbsChannelNo: [
@@ -265,64 +312,77 @@ export default {
       },
     };
   },
-  created() {
-    // 请求设备小类下拉
-    const params = {
-      dictType: "device_video_sub_type",
-    };
-    commonDict(params).then((res) => {
-      this.form.video_type = res.data;
-    });
-    const val = {
-      dictType: "device_perception_sub_type",
-    };
-    // 请求设备大类下拉
-    commonDict(val).then((res) => {
-      this.form.perception_type = res.data;
-    });
-    // 请求设备方位下拉
-    const param_op = {
-      dictType: "orientation",
-    };
-    commonDict(param_op).then((res) => {
-      this.form.orientation_types = res.data;
-    });
-    // 请求企业名称下拉
-    getCompanyList().then((res) => {
-      this.form.company = res.data;
-    });
-  },
+  created() {},
   methods: {
     open(num, row) {
-      this.visible = true;
       if (num === "1") {
         this.dialogTitle = "新建";
+        this.disabled = false;
       } else if (num === "2") {
         this.dialogTitle = "编辑";
         this.form = row;
+        this.disabled = false;
+        console.log("row12345", row);
       } else if (num === "5") {
         this.dialogTitle = "详情";
         this.form = row;
         this.disabled = true;
       }
+      this.visible = true;
+      // 请求设备小类下拉
+      const params = {
+        dictType: "device_video_sub_type",
+      };
+      commonDict(params).then((res) => {
+        this.list.video_type = res.data;
+      });
+      // 请求设备大类下拉
+      const val = {
+        dictType: "device_perception_sub_type",
+      };
+      commonDict(val).then((res) => {
+        this.list.perception_type = res.data;
+      });
+      // 请求设备方位下拉
+      const param_op = {
+        dictType: "orientation",
+      };
+      commonDict(param_op).then((res) => {
+        this.list.orientation_types = res.data;
+      });
+      // 请求企业名称下拉
+      getCompanyList().then((res) => {
+        this.list.company = res.data;
+      });
+    },
+    isDoorselected(value) {
+      this.form.isDoorwayVideo = value; // 是否卡口下拉码值
+    },
+    companyNameselected(name, value) {
+      this.form.companyName = name;
+      this.form.companyId = value; // 公司下拉码值
+    },
+    parent_selected(label,value) {
+      this.form.devicePerceptionParentTypeCn = label
+      this.form.devicePerceptionParentType = value; // 大类下拉码值
+      console.log("this.form3333", this.form);
+    },
+    perception_selected(label,value) {
+      this.form.devicePerceptionSubTypeCn = label
+      this.form.devicePerceptionSubType = value; // 小类下拉码值
+      console.log("this.form2222", this.form);
     },
     // 表单验证必填
-    saveFormData: debounce(function (formName1, formName2, formName3) {
-      this.$refs[formName1].validate((valid1) => {
-        if (valid1) {
-          this.$refs[formName2].validate((valid2) => {
-            if (valid2) {
-              this.$refs[formName3].validate((valid3) => {
-                if (valid3) {
-                  delete this.form.company;
-                  delete this.form.video_type;
-                  delete this.form.perception_type;
-                  delete this.form.orientation_types;
-                  this.form.companyId = this.$refs.companySelect.selected.value; // 企业对应id
-                  const params = this.form;
-                  console.log("this.form", this.form);
-                  if (this.dialogTitle === "新建") {
-                    addVideoList(params)
+    saveFormData(formName1,formName2,formName3) {
+      if (this.dialogTitle === "新建") {
+        this.$refs[formName1].validate((valid1) => {
+          if (valid1) {
+            this.$refs[formName2].validate((valid2) => {
+              if (valid2) {
+                this.$refs[formName3].validate((valid3) => {
+                  if (valid3) {
+                    const params = this.form;
+                    addPerceptionList(params)
                       .then((res) => {
                         this.visible = false;
                         this.$message({
@@ -334,31 +394,64 @@ export default {
                         console.log(err); //代码错误、请求失败捕获
                       });
                   }
-                } else {
-                  this.$message.warning("请填入必填项");
-                }
-              }); // 视频通道信息必填验证
-            } else {
-              this.$message.warning("请填入必填项");
-            }
-          }); // 视频通道信息必填验证
-        } else {
-          this.$message.warning("请填入必填项");
-        }
-      }); // 设备基础必填验证
-    }, 300),
+                }); // 视频通道信息必填验证
+              } else {
+                this.$message.warning("请填入必填项");
+              }
+            }); // 视频通道信息必填验证
+          } else {
+            this.$message.warning("请填入必填项");
+          }
+        }); // 设备基础必填验证
+      } else if (this.dialogTitle === "编辑") {
+        this.$refs[formName1].validate((valid) => {
+          if (valid) {
+            this.$refs[formName2].validate((valid) => {
+              if (valid) {
+                this.$refs[formName3].validate((valid) => {
+                  if (valid) {
+                    console.log('this.form123', JSON.stringify(this.form))
+                    console.log('this.form124', JSON.parse(JSON.stringify(this.form)))
+                    changePerceptionList(JSON.parse(JSON.stringify(this.form)))
+                      .then((res) => {
+                        console.log(res);
+                        console.log('this.form125', JSON.parse(JSON.stringify(this.form)))
+                        this.visible = false;
+                        this.$message.success("编辑成功");
+                      })
+                      .catch((err) => {
+                        console.log(err); //代码错误、请求失败捕获
+                        this.$message.warning("编辑失败");
+                      });
+                  } else {
+                    this.$message.warning("请填入必填项");
+                  }
+                }); // 视频通道信息必填验证
+              } else {
+                this.$message.warning("请填入必填项");
+              }
+            }); // 视频通道信息必填验证
+          } else {
+            this.$message.warning("请填入必填项");
+          }
+        });
+      }
+    },
+    // save() {
+    //   console.log('this.form7777',this.form);
+    // },
     // 关闭弹窗
     close() {
       this.visible = false;
       // 重置表单
       // 设备基础信息表单重置
-      this.$refs['equipmentForm'].resetFields()
+      this.$refs["equipmentForm"].resetFields();
       // 视频通道信息表单重置
-      this.$refs['videoForm'].resetFields()
-      // 设备位置信息表单重置 
-      this.$refs['addressForm'].resetFields() 
+      this.$refs["videoForm"].resetFields();
+      // 设备位置信息表单重置
+      this.$refs["addressForm"].resetFields();
       // 设备其他信息表单重置
-      this.$refs['otherForm'].resetFields()
+      this.$refs["otherForm"].resetFields();
     },
   },
 };
@@ -477,5 +570,13 @@ export default {
       }
     }
   }
+  .el-form-item.deviceAddress_text {
+    width: 900px !important;
+    .el-form-item__content {
+      .el-input__inner {
+        width: 750px;
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue b/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue
index a62c97d..b16d9fb 100644
--- a/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue
+++ b/src/views/systemManagement/correlationEquipment/components/addVideoDialog.vue
@@ -4,6 +4,7 @@
     class="dialog"
     :title="dialogTitle"
     :visible.sync="visible"
+    @close="close()"
     :close-on-click-modal="false"
     width="970px"
   >
@@ -32,6 +33,8 @@
               </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>
diff --git a/src/views/systemManagement/correlationEquipment/components/deriveDialog.vue b/src/views/systemManagement/correlationEquipment/components/deriveDialog.vue
index 2c40e90..4396340 100644
--- a/src/views/systemManagement/correlationEquipment/components/deriveDialog.vue
+++ b/src/views/systemManagement/correlationEquipment/components/deriveDialog.vue
@@ -18,8 +18,15 @@
 </template>
   <script>
 import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
+import { exportVideo,exportPerception } from "@/api/correlationEquipment";
 export default {
   name: "DeriveDialog",
+  props: {
+    table_title: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       visible: false,
@@ -30,7 +37,29 @@ export default {
       this.visible = true;
     },
     confrim: debounce(function () {
-      this.$message.success("232324234");
+      if (this.table_title === "视频监控设备列表") {
+        // 视频导出接口
+        exportVideo().then((res) => {
+          console.log(123);
+          console.log(res);
+          this.$message.success('导出成功')
+          this.visible = false
+        }).catch(err=>{
+          console.log(err);
+          this.$message.warning('导出失败')
+        })
+      } else if (this.table_title === "智能感知设备列表") {
+        // 视频导出接口
+        exportPerception().then((res) => {
+          console.log(456);
+          console.log(res);
+          this.$message.success('导出成功')
+          this.visible = false
+        }).catch(err=>{
+          console.log(err);
+          this.$message.warning('导出失败')
+        })
+      }
     }, 300),
   },
 };
diff --git a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
index ce68d8f..15a27c1 100644
--- a/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
+++ b/src/views/systemManagement/correlationEquipment/components/equipmentTable.vue
@@ -117,7 +117,7 @@
     <AddVideoDialog ref="addVideoDialog"></AddVideoDialog>
     <AddPerceptionDialog ref="addPerceptionDialog"></AddPerceptionDialog>
     <UploadDialog ref="uploadDialog"></UploadDialog>
-    <DeriveDialog ref="deriveDialog"></DeriveDialog>
+    <DeriveDialog ref="deriveDialog" :table_title="table_title"></DeriveDialog>
   </div>
 </template>
 <script>
@@ -384,7 +384,7 @@ export default {
     }
 
     /deep/.el-table {
-      height: 35vh;
+      height: 27vh;
       thead {
         text-align: center;
         color: #fff;
diff --git a/src/views/systemManagement/correlationEquipment/index.vue b/src/views/systemManagement/correlationEquipment/index.vue
index fc125fa..7aff8e4 100644
--- a/src/views/systemManagement/correlationEquipment/index.vue
+++ b/src/views/systemManagement/correlationEquipment/index.vue
@@ -266,7 +266,7 @@ export default {
     /* 左侧 */
     .cardBodyLeft {
       width: 25%;
-      height: 97%;
+      height: 75vh;
       background: rgba(23, 36, 36, 0.4);
       border: 0.5px solid #485f6c;
       border-radius: 4px;
@@ -316,7 +316,7 @@ export default {
         height: 69vh;
         .el-tree {
           /* 树形数据过长添加滚动条 */
-          height: 96%;
+          height: 65vh;
           overflow: auto;
           // box-shadow: 5px 5px 10px #126a58;
           border-radius: 4px;
@@ -399,6 +399,7 @@ export default {
     }
     /* 竖分割线 */
     .el-divider.el-divider--vertical {
+      opacity: 0;
       margin-left: 13px;
       height: 100%;
     }
@@ -412,7 +413,7 @@ export default {
         text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
       }
       width: 74%;
-      height: 97%;
+      height: 75vh;
       border-radius: 4px;
       background: rgba(31, 45, 49, 0.4);
       border: 0.5px solid #485f6c;

From 4b8315f57b2b2e094a6037c8b29151691801d3b4 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Fri, 12 May 2023 14:30:11 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=B9=B3=E5=AE=89=E6=8C=87=E6=95=B0?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/systemManagement/safeIndex/index.js   |  9 +++
 .../systemManagement/safeIndex/index.vue      | 74 +++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 src/api/systemManagement/safeIndex/index.js

diff --git a/src/api/systemManagement/safeIndex/index.js b/src/api/systemManagement/safeIndex/index.js
new file mode 100644
index 0000000..ad8ffbd
--- /dev/null
+++ b/src/api/systemManagement/safeIndex/index.js
@@ -0,0 +1,9 @@
+// 平安指数模块接口
+import request from '@/utils/request'
+export function safeCalculation(params) {
+    return request({
+        url: '/safety/system/tbSafeCalculationRule/getCalculationRule',
+        method: 'post',
+        params
+    })
+}
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/index.vue b/src/views/systemManagement/safeIndex/index.vue
index e69de29..8eafc36 100644
--- a/src/views/systemManagement/safeIndex/index.vue
+++ b/src/views/systemManagement/safeIndex/index.vue
@@ -0,0 +1,74 @@
+<template>
+  <!-- 平安指数 -->
+  <el-card class="box-card">
+    <div class="topZS"></div>
+    <div class="bottomZS"></div>
+    <div slot="header" class="clearfix">
+      <span>平安指数</span>
+    </div>
+    <div class="cardBody">
+      <div class="synthesize_index">
+        <span>综合指数算法</span>
+        <div class="index"></div>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script>
+import { safeCalculation } from "@/api/systemManagement/safeIndex";
+export default {
+  name: "SafeIndex",
+  data() {
+    return {
+      safeRuleId: "1",
+      levelIndex: "0",
+    };
+  },
+  created() {
+    safeCalculation({ safeRuleId: 1, levelIndex: 0 }).then(res =>{
+        console.log('res',res);
+    })
+  },
+  methods: {},
+};
+</script>
+<style lang="less" scoped>
+/* card统一样式 */
+.el-card.box-card.is-always-shadow {
+  border: 0px;
+  height: 89vh; /* 控制card布局高度,用于适配 */
+  position: relative;
+  background: url("~@/assets/companyFile/22136.png") no-repeat !important;
+  background-size: 100% 100% !important;
+}
+/* card统一样式 */
+/deep/.el-card__header {
+  border-bottom: 1px solid #a1a1a1 !important;
+  .clearfix {
+    span {
+      font-size: 17px;
+      font-weight: 400;
+      color: #fff;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    }
+  }
+}
+/* 综合指数算法 */
+.synthesize_index {
+  span {
+    font-size: 18px;
+    color: #fff;
+  }
+  width: 168.5vh;
+  height: 19vh;
+  .index {
+    margin-top: 1.5vh;
+    width: 168.5vh;
+    height: 14vh;
+    color: #fff;
+    border-radius: 4px;
+    background: rgba(31, 45, 49, 0.4);
+    border: 0.5px solid #485f6c;
+  }
+}
+</style>
\ No newline at end of file

From ef7ee79f7d8e31d179b61a1fb3e5a5332a0dc8fb Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Mon, 15 May 2023 09:09:08 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=B9=B3=E5=AE=89=E6=8C=87=E6=95=B0?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/systemManagement/safeIndex/index.js   |  19 +-
 .../safeIndex/components/indexTable.vue       | 565 ++++++++++++++++++
 .../safeIndex/components/indexmassageOne.vue  | 180 ++++++
 .../components/indexmassageThree.vue          |  14 +
 .../safeIndex/components/indexmassageTwo.vue  |  14 +
 .../systemManagement/safeIndex/index.vue      | 413 ++++++++++++-
 6 files changed, 1192 insertions(+), 13 deletions(-)
 create mode 100644 src/views/systemManagement/safeIndex/components/indexTable.vue
 create mode 100644 src/views/systemManagement/safeIndex/components/indexmassageOne.vue
 create mode 100644 src/views/systemManagement/safeIndex/components/indexmassageThree.vue
 create mode 100644 src/views/systemManagement/safeIndex/components/indexmassageTwo.vue

diff --git a/src/api/systemManagement/safeIndex/index.js b/src/api/systemManagement/safeIndex/index.js
index ad8ffbd..5a43e7d 100644
--- a/src/api/systemManagement/safeIndex/index.js
+++ b/src/api/systemManagement/safeIndex/index.js
@@ -1,9 +1,26 @@
-// 平安指数模块接口
+// 平安指数模块接口 
 import request from '@/utils/request'
+// 请求综合指数
 export function safeCalculation(params) {
     return request({
         url: '/safety/system/tbSafeCalculationRule/getCalculationRule',
         method: 'post',
         params
     })
+}
+// 修改综合指数
+export function saveSafeCalculation(data) {
+    return request({
+        url: '/safety/system/tbSafeCalculationRule',
+        method: 'put',
+        data
+    })
+}
+// 指标表格数据 
+export function getIndexTable(params) {
+    return request({
+        url: '/safety/system/tbSafeRule/getRuleTree',
+        method: 'post',
+        params
+    })
 }
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/components/indexTable.vue b/src/views/systemManagement/safeIndex/components/indexTable.vue
new file mode 100644
index 0000000..5598e3e
--- /dev/null
+++ b/src/views/systemManagement/safeIndex/components/indexTable.vue
@@ -0,0 +1,565 @@
+<!-- 指标表格 -->
+<template>
+  <div class="display">
+    <table>
+      <tr class="table_title">
+        <th class="table_title_one">一级指标</th>
+        <th class="table_title_two">二级指标</th>
+        <th class="table_title_three">三级指标</th>
+      </tr>
+      <!-- 防疫安全 -->
+      <tr class="table_body">
+        <td rowspan="5" @click="click_onelevel('3')">防疫安全</td>
+        <td @click="click_twolevel">疫苗接种数</td>
+        <td>疫苗接种数</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel">核酸检测率</td>
+        <td>核算检测率</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel">场所码数据</td>
+        <td>场所码异常数</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel" rowspan="2">中高风险返企数</td>
+        <td>境外人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>境内人员</td>
+      </tr>
+      <!-- 人员安全 -->
+      <tr class="table_body">
+        <td rowspan="14" @click="click_onelevel('14')">人员安全</td>
+        <td rowspan="4" @click="click_twolevel">流动人员</td>
+        <td>未登记人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>未注销人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>未变更人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>高危人员</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="7" @click="click_twolevel">重点人员</td>
+        <td>重性精神病人</td>
+      </tr>
+      <tr class="table_body">
+        <td>非访人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>退役重点人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>个人极端人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>前科人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>家暴人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>酗酒人员</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">重点岗位人员</td>
+        <td>危险品领用、保管、使用人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>危险品技术资质人员</td>
+      </tr>
+      <tr class="table_body">
+        <td>专家人员</td>
+        <td>领域内有较高专业知识技术的专家、人才</td>
+      </tr>
+      <!-- 消防安全 -->
+      <tr class="table_body">
+        <td rowspan="13" @click="click_onelevel('33')">消防安全</td>
+        <td rowspan="3" @click="click_twolevel">消防设施维护</td>
+        <td>设备录入率</td>
+      </tr>
+      <tr class="table_body">
+        <td>配置合理性</td>
+      </tr>
+      <tr class="table_body">
+        <td>日常保养及时率</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">企业台账建设</td>
+        <td>必要资质</td>
+      </tr>
+      <tr class="table_body">
+        <td>验收许可或建设许可</td>
+      </tr>
+      <tr class="table_body">
+        <td>日常检查表</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">消防制度执行</td>
+        <td>人员培训率</td>
+      </tr>
+      <tr class="table_body">
+        <td>演习举办情况</td>
+      </tr>
+      <tr class="table_body">
+        <td>管理层专业知晓程度</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="4" @click="click_twolevel">消防事件发生</td>
+        <td>火灾事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>其他事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>消防违建</td>
+      </tr>
+      <tr class="table_body">
+        <td>协助扑救</td>
+      </tr>
+      <!-- 危化运输安全 -->
+      <tr class="table_body">
+        <td rowspan="15" @click="click_onelevel('51')">危化运输安全</td>
+        <td rowspan="2" @click="click_twolevel">源头检查</td>
+        <td>区内企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td>区外企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="5" @click="click_twolevel">违章数据</td>
+        <td>违停</td>
+      </tr>
+      <tr class="table_body">
+        <td>闯禁</td>
+      </tr>
+      <tr class="table_body">
+        <td>超速</td>
+      </tr>
+      <tr class="table_body">
+        <td>疲劳驾驶</td>
+      </tr>
+      <tr class="table_body">
+        <td>未按车道行驶</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">交通事故</td>
+        <td>经损事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>伤亡事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>泄漏事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>行政/刑事案件</td>
+        <td>有无拘留、判刑</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业整改</td>
+        <td>反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td>整改反馈未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业演习、培训</td>
+        <td>企业演习</td>
+      </tr>
+      <tr class="table_body">
+        <td>集中培训学习</td>
+      </tr>
+      <!-- 列管物品安全 -->
+      <tr class="table_body">
+        <td rowspan="10" @click="click_onelevel('73')">列管物品安全</td>
+        <td rowspan="2" @click="click_twolevel">危险化学品</td>
+        <td>易制爆物品生产、购买、销售、储存、使用</td>
+      </tr>
+      <tr class="table_body">
+        <td>剧毒物品生产、购买、销售、储存、使用</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">放射源物品</td>
+        <td>放射源储存</td>
+      </tr>
+      <tr class="table_body">
+        <td>放射源运输</td>
+      </tr>
+      <tr class="table_body">
+        <td>放射源使用</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">民爆物品</td>
+        <td>烟花爆竹运输、销售、燃放</td>
+      </tr>
+      <tr class="table_body">
+        <td>炸药、雷管保管、运输、使用</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">民用枪支管理</td>
+        <td>猎枪</td>
+      </tr>
+      <tr class="table_body">
+        <td>竞技体育用枪</td>
+      </tr>
+      <tr class="table_body">
+        <td>商业射击馆枪支</td>
+      </tr>
+      <!-- 内部治安安全 -->
+      <tr class="table_body">
+        <td rowspan="15" @click="click_onelevel('88')">内部治安安全</td>
+        <td rowspan="4" @click="click_twolevel">企业三防基础数据</td>
+        <td>企业保卫人员名单</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业物防设施清单</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业技防前端感知(人脸、车脸、重要部位视频监控)建设</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业技防设施连入平台情况</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">企业各类规章制度、应急预案、应急演练</td>
+        <td>规章制度</td>
+      </tr>
+      <tr class="table_body">
+        <td>应急预案</td>
+      </tr>
+      <tr class="table_body">
+        <td>应急演练</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">部门检查及系统研判</td>
+        <td>部门检查合格进行评分</td>
+      </tr>
+      <tr class="table_body">
+        <td>部门检查不合格及有缺陷的要求企业整改</td>
+      </tr>
+      <tr class="table_body">
+        <td>应系统研判(设施过期及设施故障)</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业整改</td>
+        <td>企业反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业反馈整改未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">企业发生的案件及企业员工涉及的案件</td>
+        <td>企业发生被盗、被骗等各类案件</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业员工涉及的各类案件</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业员工涉及的信访等案件</td>
+      </tr>
+      <!-- 道路安全 -->
+      <tr class="table_body">
+        <td rowspan="13" @click="click_onelevel('109')">道路安全</td>
+        <td rowspan="2" @click="click_twolevel">源头检查</td>
+        <td>区内企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td>区外企业评分</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="5" @click="click_twolevel">违章数据</td>
+        <td>违停</td>
+      </tr>
+      <tr class="table_body">
+        <td>闯禁</td>
+      </tr>
+      <tr class="table_body">
+        <td>超速</td>
+      </tr>
+      <tr class="table_body">
+        <td>未按车道行驶</td>
+      </tr>
+      <tr class="table_body">
+        <td>闯红灯</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">交通事故</td>
+        <td>经损事故</td>
+      </tr>
+      <tr class="table_body">
+        <td>伤亡事故</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业整改</td>
+        <td>反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td>反馈整改未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业周边交通设施检查</td>
+        <td>设施完善</td>
+      </tr>
+      <tr class="table_body">
+        <td>设施缺失</td>
+      </tr>
+      <!-- 防攻击安全 -->
+      <tr class="table_body">
+        <td rowspan="16" @click="click_onelevel('128')">防攻击安全</td>
+        <td rowspan="6" @click="click_twolevel">企业人防达标情况</td>
+        <td>重要岗位人员是否进行安全背景调查</td>
+      </tr>
+      <tr class="table_body">
+        <td>应急力量是否配备</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否安排人员24小时值班</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否安排巡逻防控力量</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否建立联防联动联治机制</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否定期开展实战演练</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">企业物防达标情况</td>
+        <td>是否有实体防护设施</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否配备必要的防爆器械</td>
+      </tr>
+      <tr class="table_body">
+        <td>车辆进出口是否安装车辆冲撞设施</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">企业技防达标情况</td>
+        <td>是否全方位安装视频监控系统</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否安装访客登记系统</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否安装入侵和紧急报警系统</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业整改情况</td>
+        <td>企业反馈完成整改</td>
+      </tr>
+      <tr class="table_body">
+        <td>企业反馈未完成整改</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业定期开展反恐实战演练、培训</td>
+        <td>是否定期开展反恐实战演练</td>
+      </tr>
+      <tr class="table_body">
+        <td>是否定期开展反恐培训</td>
+      </tr>
+      <!-- 网络安全 -->
+      <tr class="table_body">
+        <td rowspan="10" @click="click_onelevel('150')">网络安全</td>
+        <td rowspan="2" @click="click_twolevel">漏洞整改</td>
+        <td>反馈整改完成</td>
+      </tr>
+      <tr class="table_body">
+        <td>反馈整改未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel">行政案件</td>
+        <td>是否有过行政处罚</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel">重大网络安全事件</td>
+        <td>是否发生过</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="3" @click="click_twolevel">网站应急系统备案</td>
+        <td>网站备案</td>
+      </tr>
+      <tr class="table_body">
+        <td>应用备案</td>
+      </tr>
+      <tr class="table_body">
+        <td>应用评估</td>
+      </tr>
+      <tr class="table_body">
+        <td @click="click_twolevel">等保定级评审</td>
+        <td>等保定级评审完成/未完成</td>
+      </tr>
+      <tr class="table_body">
+        <td rowspan="2" @click="click_twolevel">企业演习、培训</td>
+        <td>应急演练</td>
+      </tr>
+      <tr class="table_body">
+        <td>集中培训学习</td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script>
+import { getIndexTable } from "@/api/systemManagement/safeIndex";
+import bus from "@/assets/js/eventBus.js";
+export default {
+  name: "IndexTable",
+  data() {
+    return {
+      display_data: {},
+      one_index_three_level: [
+        { id: 5, levelIndexThree: "疫苗接种数" },
+        { id: 8, levelIndexThree: "核算检测率" },
+        { id: 10, levelIndexThree: "场所码异常数" },
+        { id: 12, levelIndexThree: "境外人员" },
+        { id: 13, levelIndexThree: "境内人员" },
+      ],
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    // table_header() {
+    //   return {
+    //     "text-align": "center", // 表头文字居中
+    //     color: "#fff",
+    //   };
+    // },
+    // 获取表格数据
+    getData() {
+      getIndexTable().then((res) => {
+        console.log("res", res);
+        this.display_data = res.data;
+      });
+    },
+    // 一级指标点击事件
+    click_onelevel(id) {
+      const massage= {
+        safeRuleId:id,
+        level:'1',
+      }
+      this.$emit("back", massage);
+      bus.$emit('send', massage) // 传给一级指标详情
+    },
+    // 二级点击事件
+    click_twolevel() {
+      const level = "2";
+      this.$emit("backLevel", level);
+    },
+    // 三级点击事件
+    click_threelevel() {
+      const level = "3";
+      this.$emit("backLevel", level);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.display {
+  margin-top: 2vh;
+  width: 40.3vw;
+  height: 52vh;
+  overflow-y: scroll;
+  border: 0.1px solid #4d8f89;
+}
+.display::-webkit-scrollbar {
+  width: 6px;
+  background-color: #5e666a;
+  border-radius: 4px;
+}
+
+.display::-webkit-scrollbar-thumb {
+  width: 5px;
+  background-color: #3c4b4a;
+  border-radius: 4px;
+}
+table {
+  width: 40vw;
+  height: 50vh;
+  border: 0.1px solid #4d8f89;
+  .table_title {
+    color: #fff;
+    background: linear-gradient(to right, #284f49, #2f6363, #233b38);
+    height: 4vh;
+    .table_title_one {
+      width: 9vw;
+    }
+    .table_title_two {
+      width: 14vw;
+    }
+    .table_title_three {
+      width: 17vw;
+    }
+  }
+  .table_body {
+    color: #fff;
+    font-size: 18px;
+    text-align: center;
+    td {
+      border: 0.1px solid #4d8f89;
+      height: 4vh !important;
+      cursor: pointer;
+    }
+    td:hover{
+      background: #3c4b4a;
+      color: #54FFBE ;
+    }
+  }
+}
+.display_title {
+  display: flex;
+  width: 40vw;
+  height: 4vh;
+  background: linear-gradient(to right, #284f49, #2f6363, #233b38);
+  font-size: 18px;
+  color: #fff;
+  text-align: center;
+  line-height: 4vh;
+  .title_one {
+    width: 9vw;
+  }
+  .title_two {
+    width: 14vw;
+  }
+  .title_three {
+    width: 17vw;
+  }
+}
+.parent {
+  display: flex;
+  text-align: center;
+  font-size: 18px;
+  color: #fff;
+  border-bottom: 0.2px solid #4d8f89;
+  //   background: #243333;
+  .son_one {
+    width: 9vw;
+    height: 20vh;
+    line-height: 20vh;
+  }
+  .son_two {
+    width: 14vw;
+    display: flex;
+    flex-direction: column;
+    div {
+      height: 5vh;
+      line-height: 5vh;
+    }
+  }
+  .son_three {
+    width: 17vw;
+    display: flex;
+    flex-direction: column;
+    div {
+      height: 4vh;
+      line-height: 4vh;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/components/indexmassageOne.vue b/src/views/systemManagement/safeIndex/components/indexmassageOne.vue
new file mode 100644
index 0000000..affd47c
--- /dev/null
+++ b/src/views/systemManagement/safeIndex/components/indexmassageOne.vue
@@ -0,0 +1,180 @@
+<!-- 一级指标详细信息展示 -->
+<template>
+  <div class="massage_body">
+    <div class="massage_form">
+      <div class="form_title">
+        {{ this.form_data.sumTitle }}&nbsp;&nbsp;&nbsp;=
+      </div>
+      <div class="form_space"></div>
+      <el-form ref="form" :model="form" class="levelform">
+        <el-form-item>
+          <label slot="label"
+            >{{
+              this.form_data.calculation[0].indexName
+            }}&nbsp;&nbsp;&nbsp;×</label
+          >
+          <el-input v-model="this.form_data.calculation[0].rate"></el-input>
+        </el-form-item>
+        <el-form-item v-for="item in this.form_data_for" :key="item.sort">
+          <label slot="label"
+            >+&nbsp;&nbsp;&nbsp;{{ item.indexName }}&nbsp;&nbsp;&nbsp;×</label
+          >
+          <el-input v-model="item.rate"></el-input>
+        </el-form-item>
+      </el-form>
+      <div v-if="btn_flag" class="massage_btn">
+        <el-button @click="change_form">修改</el-button>
+      </div>
+      <div v-else class="massage_btn_two">
+        <el-button>保 存</el-button>
+        <el-button @click="cancel_form">取 消</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bus from "@/assets/js/eventBus.js";
+import { safeCalculation } from "@/api/systemManagement/safeIndex";
+export default {
+  name: "IndexmassageOne",
+  data() {
+    return {
+      btn_flag: true,
+      form: {},
+      form_data: {}, // 表单名以及需要遍历出form-item内容
+      form_data_for: [], // form-item除数组第一的遍历
+    };
+  },
+  created() {
+    safeCalculation({ safeRuleId: 3, levelIndex: 1 }).then((res) => {
+      this.form_data = res.data.ruleDetail;
+      this.form_data_for = res.data.ruleDetail.calculation.filter(
+        (element, index) => index > 0
+      );
+    });
+  },
+  mounted() {
+    bus.$on("send", (data) => {
+      console.log(data, "data");
+      const params = {
+        safeRuleId: data.safeRuleId,
+        levelIndex: data.level,
+      };
+      safeCalculation(params).then((res) => {
+        console.log("res1", res);
+        this.form_data = res.data.ruleDetail;
+        this.form_data_for = res.data.ruleDetail.calculation.filter(
+          (element, index) => index > 0
+        );
+      });
+    });
+  },
+  methods: {
+    // 修改表单
+    change_form() {
+      this.btn_flag = false;
+    },
+    // 取消修改
+    cancel_form() {
+      this.btn_flag = true;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.levelform.el-form {
+  width: 27vw;
+  height: 20vh;
+  display: flex;
+  flex-wrap: wrap;
+  .el-form-item {
+    display: flex;
+    .el-form-item__label {
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+}
+// /deep/.text_form.el-form {
+//   height: 10vh;
+//   margin-top: 3vh;
+//   display: flex;
+//   flex-wrap: wrap;
+//   .el-form-item {
+//     display: flex;
+//     .el-form-item__label {
+//       font-size: 18px;
+//       color: #fff;
+//     }
+//   }
+// }
+/deep/.el-input__inner {
+  width: 3vw;
+  border-radius: 0px;
+  font-size: 16px;
+  background: #3c4b4a;
+  color: #fff;
+}
+/deep/.text_form {
+  .el-form-item {
+    .el-form-item__content {
+      .el-input {
+        .el-input__inner {
+          width: 3vw;
+          border: 0px;
+          border-radius: 0px;
+          background: rgba(165, 42, 42, 0);
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+.massage_body {
+  margin-top: 2vh;
+  width: 43.3vw;
+  height: 52vh;
+  border: 0.1px solid #4d8f89;
+  .massage_form {
+    display: flex;
+    margin-top: 1vh;
+    margin-left: 0.6vw;
+    width: 42vw;
+    height: 22vh;
+    color: #fff;
+    border-radius: 4px;
+    background: rgba(31, 45, 49, 0.4);
+    border: 0.5px solid #485f6c;
+    .form_title {
+      width: 5vw;
+      height: 22vh;
+      line-height: 3.8vh;
+      font-size: 18px;
+      text-align: right;
+    }
+    .form_space {
+      width: 1vw;
+      height: 22vh;
+    }
+  }
+  .massage_btn,
+  .massage_btn_two {
+    width: 10vw;
+    height: 14vh;
+    text-align: center;
+    line-height: 14vh;
+    .el-button {
+      width: 4vw;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+    }
+    .el-button:focus,
+    .el-button:hover {
+      color: #34e1b3;
+      filter: brightness(150%);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/components/indexmassageThree.vue b/src/views/systemManagement/safeIndex/components/indexmassageThree.vue
new file mode 100644
index 0000000..f3e3d77
--- /dev/null
+++ b/src/views/systemManagement/safeIndex/components/indexmassageThree.vue
@@ -0,0 +1,14 @@
+<!-- 三级指标详细信息展示 -->
+<template>
+    <div>789</div>
+  </template>
+  <script>
+  export default {
+    name: "indexmassageThree",
+    data() {
+      return {};
+    },
+  };
+  </script>
+  <style lang="less" scoped>
+  </style>
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/components/indexmassageTwo.vue b/src/views/systemManagement/safeIndex/components/indexmassageTwo.vue
new file mode 100644
index 0000000..0765e73
--- /dev/null
+++ b/src/views/systemManagement/safeIndex/components/indexmassageTwo.vue
@@ -0,0 +1,14 @@
+<!-- 二级指标详细信息展示 -->
+<template>
+    <div>456</div>
+  </template>
+  <script>
+  export default {
+    name: "indexmassageTwo",
+    data() {
+      return {};
+    },
+  };
+  </script>
+  <style lang="less" scoped>
+  </style>
\ No newline at end of file
diff --git a/src/views/systemManagement/safeIndex/index.vue b/src/views/systemManagement/safeIndex/index.vue
index 8eafc36..cf13ef4 100644
--- a/src/views/systemManagement/safeIndex/index.vue
+++ b/src/views/systemManagement/safeIndex/index.vue
@@ -8,28 +8,305 @@
     </div>
     <div class="cardBody">
       <div class="synthesize_index">
-        <span>综合指数算法</span>
-        <div class="index"></div>
+        <span>企业综合指数</span>
+        <div class="index">
+          <div class="index_title">综合指数算法 =</div>
+          <div class="index_space"></div>
+          <!-- 综合指数算法表单 -->
+          <div class="index_form">
+            <el-form v-if="!btn_flag" ref="form" :model="form" class="form">
+              <el-form-item label="内部治安管理 ×" prop="rate_one">
+                <label slot="label"
+                  >内部治安管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_one"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 防疫安全 ×" prop="rate_two">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;防疫安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_two"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 人员安全 ×" prop="rate_three">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;人员安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_three"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 道路交通安全秩序管理 ×" prop="rate_four">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;道路交通安全秩序管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_four"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 防攻击安全管理 ×" prop="rate_five">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;防攻击安全管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_five"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 网络安全管理 ×" prop="rate_six">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;网络安全管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_six"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 消防安全 ×" prop="rate_seven">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;消防安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_seven"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 危化运输安全 ×" prop="rate_eight">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;危化运输安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_eight"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 列管物品 ×" prop="rate_nine">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;列管物品&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_nine"></el-input>
+              </el-form-item>
+            </el-form>
+            <el-form
+              v-else
+              ref="text_form"
+              :model="form"
+              class="text_form"
+              :disabled="disabled"
+            >
+              <el-form-item label="内部治安管理 ×" prop="rate_one">
+                <label slot="label"
+                  >内部治安管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_one"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 防疫安全 ×" prop="rate_two">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;防疫安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_two"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 人员安全 ×" prop="rate_three">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;人员安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_three"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 道路交通安全秩序管理 ×" prop="rate_four">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;道路交通安全秩序管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_four"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 防攻击安全管理 ×" prop="rate_five">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;防攻击安全管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_five"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 网络安全管理 ×" prop="rate_six">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;网络安全管理&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_six"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 消防安全 ×" prop="rate_seven">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;消防安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_seven"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 危化运输安全 ×" prop="rate_eight">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;危化运输安全&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_eight"></el-input>
+              </el-form-item>
+              <el-form-item label="+ 列管物品 ×" prop="rate_nine">
+                <label slot="label"
+                  >+&nbsp;&nbsp;&nbsp;&nbsp;列管物品&nbsp;&nbsp;&nbsp;&nbsp;×</label
+                >
+                <el-input v-model="form.rate_nine"></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div class="index_btn">
+            <div class="btn_one" v-if="btn_flag">
+              <el-button @click="change_form">修 改</el-button>
+            </div>
+            <div v-else class="btn_two">
+              <el-button :loading="btn_loading" @click="save_form"
+                >保 存</el-button
+              >
+              <el-button @click="cancel_form">取 消</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="index_all">
+        <div class="index_table">
+          <div class="table_title">指标分值配置</div>
+          <IndexTable @back="back" ref="indexTable"></IndexTable>
+        </div>
+        <div class="index_massage">
+          <div class="table_title"></div>
+          <IndexmassageOne v-if="this.level ==='1'" ref="indexmassageOne"></IndexmassageOne>
+          <IndexmassageTwo v-else-if="this.level === '2'" ref="indexmassageTwo"></IndexmassageTwo>
+          <IndexmassageThree v-else-if="this.level === '3'" ref="indexmassageThree"></IndexmassageThree>
+        </div>
       </div>
     </div>
   </el-card>
 </template>
 <script>
-import { safeCalculation } from "@/api/systemManagement/safeIndex";
+import {
+  safeCalculation,
+  saveSafeCalculation,
+} from "@/api/systemManagement/safeIndex";
+import IndexTable from "./components/indexTable";
+import IndexmassageOne from "./components/indexmassageOne";
+import IndexmassageTwo from "./components/indexmassageTwo";
+import IndexmassageThree from "./components/indexmassageThree";
 export default {
   name: "SafeIndex",
+  components: {
+    IndexTable,
+    IndexmassageOne,
+    IndexmassageTwo,
+    IndexmassageThree
+  },
   data() {
     return {
-      safeRuleId: "1",
-      levelIndex: "0",
+      btn_flag: true,
+      btn_loading: false,
+      id: "",
+      level: "1", // 右下展示几级指标页面
+      safeRuleId: "",
+      form: {
+        rate_one: "",
+        rate_two: "",
+        rate_three: "",
+        rate_four: "",
+        rate_five: "",
+        rate_six: "",
+        rate_seven: "",
+        rate_eight: "",
+        rate_nine: "",
+      }, // 综合指数计算表单数据
+      disabled: true,
     };
   },
   created() {
-    safeCalculation({ safeRuleId: 1, levelIndex: 0 }).then(res =>{
-        console.log('res',res);
-    })
+    this.get_data();
+  },
+  methods: {
+    // 修改综合指数
+    change_form() {
+      this.btn_flag = false;
+    },
+    // 保存综合指数
+    save_form() {
+      // 求总和
+      this.btn_loading = true;
+      const all_data =
+        Number(this.form.rate_one) +
+        Number(this.form.rate_two) +
+        Number(this.form.rate_three) +
+        Number(this.form.rate_four) +
+        Number(this.form.rate_five) +
+        Number(this.form.rate_six) +
+        Number(this.form.rate_seven) +
+        Number(this.form.rate_eight) +
+        Number(this.form.rate_nine);
+      console.log("all_data", all_data);
+      if (
+        Number(this.form.rate_one) > 0 &&
+        Number(this.form.rate_two) > 0 &&
+        Number(this.form.rate_three) > 0 &&
+        Number(this.form.rate_four) > 0 &&
+        Number(this.form.rate_five) > 0 &&
+        Number(this.form.rate_six) > 0 &&
+        Number(this.form.rate_seven) > 0 &&
+        Number(this.form.rate_eight) > 0 &&
+        Number(this.form.rate_nine) > 0 &&
+        all_data === 1
+      ) {
+        const obj = {
+          calculation: [
+            { indexName: "内部治安管理", rate: this.form.rate_one, sort: "1" },
+            { indexName: "防疫安全", rate: this.form.rate_two, sort: "2" },
+            { indexName: "人员安全", rate: this.form.rate_three, sort: "3" },
+            {
+              indexName: "道路交通安全秩序管理",
+              rate: this.form.rate_four,
+              sort: "4",
+            },
+            {
+              indexName: "防攻击安全管理",
+              rate: this.form.rate_five,
+              sort: "5",
+            },
+            { indexName: "网络安全管理", rate: this.form.rate_six, sort: "6" },
+            { indexName: "消防安全", rate: this.form.rate_seven, sort: "7" },
+            {
+              indexName: "危化运输安全",
+              rate: this.form.rate_eight,
+              sort: "8",
+            },
+            { indexName: "列管物品", rate: this.form.rate_nine, sort: "9" },
+          ],
+          sumTitle: "综合指数算法",
+        };
+        const params = {
+          calculationRule: JSON.stringify(obj),
+          id: this.id,
+          safeRuleId: this.safeRuleId,
+        };
+        console.log("params", params);
+        saveSafeCalculation(params)
+          .then((res) => {
+            console.log(res);
+            this.btn_loading = false;
+            this.btn_flag = true;
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      } else {
+        this.$message.warning("保存失败,各指标占比应大于等于0且总和应等于1");
+      }
+    },
+    // 取消修改综合指数 text_form
+    cancel_form() {
+      // 未保存则恢复数据
+      this.get_data();
+      this.btn_flag = true;
+    },
+    get_data() {
+      // 获取综合指数计算表单数据
+      safeCalculation({ safeRuleId: 1, levelIndex: 0 }).then((res) => {
+        console.log("res", res.data.calculationRule);
+        console.log("res", JSON.parse(res.data.calculationRule));
+        this.form.rate_one = res.data.ruleDetail.calculation[0].rate;
+        this.form.rate_two = res.data.ruleDetail.calculation[1].rate;
+        this.form.rate_three = res.data.ruleDetail.calculation[2].rate;
+        this.form.rate_four = res.data.ruleDetail.calculation[3].rate;
+        this.form.rate_five = res.data.ruleDetail.calculation[4].rate;
+        this.form.rate_six = res.data.ruleDetail.calculation[5].rate;
+        this.form.rate_seven = res.data.ruleDetail.calculation[6].rate;
+        this.form.rate_eight = res.data.ruleDetail.calculation[7].rate;
+        this.form.rate_nine = res.data.ruleDetail.calculation[8].rate;
+        this.id = res.data.id;
+        this.safeRuleId = res.data.safeRuleId;
+      });
+    },
+    back(back) {
+        this.level = back.level
+    },
   },
-  methods: {},
 };
 </script>
 <style lang="less" scoped>
@@ -53,22 +330,134 @@ export default {
     }
   }
 }
+/deep/.form.el-form {
+  height: 10vh;
+  margin-top: 3vh;
+  display: flex;
+  flex-wrap: wrap;
+  .el-form-item {
+    display: flex;
+    .el-form-item__label {
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+}
+/deep/.text_form.el-form {
+  height: 10vh;
+  margin-top: 3vh;
+  display: flex;
+  flex-wrap: wrap;
+  .el-form-item {
+    display: flex;
+    .el-form-item__label {
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+}
+/deep/.el-input__inner {
+  width: 3vw;
+  border-radius: 0px;
+  font-size: 16px;
+  background: #3c4b4a;
+  color: #fff;
+}
+/deep/.text_form {
+  .el-form-item {
+    .el-form-item__content {
+      .el-input {
+        .el-input__inner {
+          width: 3vw;
+          border: 0px;
+          border-radius: 0px;
+          background: rgba(165, 42, 42, 0);
+          color: #fff;
+        }
+      }
+    }
+  }
+}
 /* 综合指数算法 */
 .synthesize_index {
   span {
     font-size: 18px;
     color: #fff;
   }
-  width: 168.5vh;
+  width: 85vw;
   height: 19vh;
   .index {
+    display: flex;
     margin-top: 1.5vh;
-    width: 168.5vh;
-    height: 14vh;
+    width: 85vw;
+    height: 16vh;
     color: #fff;
     border-radius: 4px;
     background: rgba(31, 45, 49, 0.4);
     border: 0.5px solid #485f6c;
+    .index_title {
+      text-align: right;
+      line-height: 9.8vh;
+      font-size: 18px;
+      width: 10vw;
+      height: 14vh;
+    }
+    .index_space {
+      width: 1vw;
+      height: 14vh;
+    }
+    .index_form {
+      width: 64vw;
+      height: 14vh;
+    }
+    .index_btn {
+      width: 10vw;
+      height: 14vh;
+      text-align: center;
+      line-height: 14vh;
+      .el-button {
+        width: 4vw;
+        border: 1px solid #4a6072;
+        color: #fff;
+        border-radius: 0px !important;
+        background: #323f43;
+      }
+      .el-button:focus,
+      .el-button:hover {
+        color: #34e1b3;
+        filter: brightness(150%);
+      }
+    }
+  }
+}
+.index_all {
+  display: flex;
+  width: 85vw;
+  /* 表格区域 */
+  .index_table {
+    margin-top: 2vh;
+    width: 41vw;
+    height: 58.5vh;
+    //   background: #fff;
+    .table_title {
+      height: 4vh;
+      line-height: 4vh;
+      font-size: 18px;
+      color: #fff;
+    }
+  }
+  .index_massage {
+    margin-top: 2vh;
+    margin-left: 0.5vw;
+    width: 43.5vw;
+    height: 58.5vh;
+    // background: #fff;
+    .table_title {
+      height: 4vh;
+      line-height: 4vh;
+      font-size: 18px;
+      color: rgb(19, 12, 12);
+    }
   }
 }
 </style>
\ No newline at end of file