关联设备联调

src/api/correlationEquipment/index.js

@@ -0,0 +1,10 @@
+// 系统管理模块接口
+import request from '@/utils/request'
+// 字典表查询
+export function getAllData(params) {
+    return request({
+        url: 'safety/tbAreacodeInfo/listAndVideo',
+        method: 'post',
+        params
+    })
+}

src/api/systemManagement/index.js

@@ -1,5 +1,20 @@
 // 系统管理模块接口
 import request from '@/utils/request'
+// 字典表查询
+export function common(params) {
+    return request({
+        url: '/common/area',
+        method: 'get',
+        params
+    })
+}
+export function commonDict(params) {
+    return request({
+        url: '/common/dict/list',
+        method: 'get',
+        params
+    })
+}
 // 企业名单查询
 export function getCompanyList(params) {
     return request({
@@ -8,3 +23,26 @@ export function getCompanyList(params) {
         params
     })
 }
+// 企业名单新增
+export function postCompanyList(data) {
+    return request({
+        url: '/safety/system/enterpriseList',
+        method: 'post',
+        data
+    })
+}
+// 企业名单修改
+export function putCompanyList(data) {
+    return request({
+        url: '/safety/system/enterpriseList',
+        method: 'put',
+        data
+    })
+}
+// 企业名单删除
+export function deleteCompanyList(params) {
+    return request({
+        url: '/safety/system/enterpriseList/?' + params,
+        method: 'delete',
+    })
+}

src/views/systemManagement/companyList/components/clearDialog.vue

@@ -14,16 +14,33 @@
   >
 </template>
 <script>
+import { deleteCompanyList } from "@/api/systemManagement";
 export default {
   name: "ClearDialog",
   data() {
     return {
       visible: false,
+      id: "",
     };
   },
   methods: {
-    open() {
+    open(num, item) {
+      console.log(num,item,'item');
       this.visible = true;
+      this.id = item.id;
+    },
+    saveFormData() {
+        const params = `idList=${this.id}`
+      deleteCompanyList(params).then((res) => {
+        if (res.code === 200) {
+          this.$message.success("删除成功");
+          this.$emit("back");
+          this.visible = false;
+        } else {
+          this.$message.warning("删除失败");
+          this.visible = false;
+        }
+      });
     },
   },
 };

src/views/systemManagement/companyList/components/companyDataDialog.vue

@@ -14,47 +14,35 @@
         <div class="commerceMessage_one">
           <el-form
             ref="commerceMessage_form"
-            :model="commerceMessage_form"
+            :model="form"
             class="commerceMessage_form"
           >
             <el-form-item label="企业名称">
-              <el-input v-model="commerceMessage_form.companyName"></el-input>
+              <el-input v-model="form.companyName"></el-input>
             </el-form-item>
             <el-form-item label="统一社会信用代码">
-              <el-input
+              <el-input v-model="form.socialCreditCode"></el-input>
-                v-model="commerceMessage_form.socialCreditCode"
-              ></el-input>
             </el-form-item>
             <el-form-item label="企业性质">
-              <el-input v-model="commerceMessage_form.companyNature"></el-input>
+              <el-input v-model="form.companyNature"></el-input>
             </el-form-item>
             <el-form-item label="营业期限">
-              <el-input
+              <el-input v-model="form.businessTermDate"></el-input>
-                v-model="commerceMessage_form.businessTermDate"
-              ></el-input>
             </el-form-item>
             <el-form-item label="发照日期">
-              <el-input
+              <el-input v-model="form.businessLicenseDate"></el-input>
-                v-model="commerceMessage_form.businessLicenseDate"
-              ></el-input>
             </el-form-item>
             <el-form-item label="成立日期">
-              <el-input v-model="commerceMessage_form.establishDate"></el-input>
+              <el-input v-model="form.establishDate"></el-input>
             </el-form-item>
             <el-form-item label="注册资本">
-              <el-input
+              <el-input v-model="form.registerCapital"></el-input>
-                v-model="commerceMessage_form.registerCapital"
-              ></el-input>
             </el-form-item>
             <el-form-item label="登记机关">
-              <el-input
+              <el-input v-model="form.registerAuthority"></el-input>
-                v-model="commerceMessage_form.registerAuthority"
-              ></el-input>
             </el-form-item>
             <el-form-item label="企业经营状态">
-              <el-input
+              <el-input v-model="form.businessStatus"></el-input>
-                v-model="commerceMessage_form.businessStatus"
-              ></el-input>
             </el-form-item>
           </el-form>
           <el-upload
@@ -65,38 +53,35 @@
             :before-upload="beforeAvatarUpload"
           >
             <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <div v-else class="avatar-uploader-icon">
+              <div>点击上传企业封面图片</div>
+            </div>
           </el-upload>
         </div>
         <!-- 为适应上传图片表单布局把企业工商表单拆分,剩余部分 -->
         <el-form
           ref="commerceMessage_form_two"
-          :model="commerceMessage_form_two"
+          :model="form"
           class="commerceMessage_form_two"
         >
           <el-form-item label="企业登记注册地">
-            <el-input
+            <el-input v-model="form.registerAddress"></el-input>
-              v-model="commerceMessage_form_two.registerAddress"
-            ></el-input>
           </el-form-item>
           <el-form-item label="企业类型">
-            <el-checkbox-group v-model="commerceMessage_form_two.companyType">
+            <el-checkbox-group v-model="form.companyTypes">
-              <el-checkbox label="剧毒" name="companyType"></el-checkbox>
+              <el-checkbox label="剧毒" name="companyTypes"></el-checkbox>
-              <el-checkbox label="易剧毒" name="companyType"></el-checkbox>
+              <el-checkbox label="易剧毒" name="companyTypes"></el-checkbox>
-              <el-checkbox label="易致爆" name="companyType"></el-checkbox>
+              <el-checkbox label="易致爆" name="companyTypes"></el-checkbox>
-              <el-checkbox label="放射源" name="companyType"></el-checkbox>
+              <el-checkbox label="放射源" name="companyTypes"></el-checkbox>
-              <el-checkbox label="消防重点" name="companyType"></el-checkbox>
+              <el-checkbox label="消防重点" name="companyTypes"></el-checkbox>
-              <el-checkbox label="所管消防" name="companyType"></el-checkbox>
+              <el-checkbox label="所管消防" name="companyTypes"></el-checkbox>
-              <el-checkbox label="治安重点" name="companyType"></el-checkbox>
+              <el-checkbox label="治安重点" name="companyTypes"></el-checkbox>
-              <el-checkbox label="创安单位" name="companyType"></el-checkbox>
+              <el-checkbox label="创安单位" name="companyTypes"></el-checkbox>
-              <el-checkbox label="外资合资" name="companyType"></el-checkbox>
+              <el-checkbox label="外资合资" name="companyTypes"></el-checkbox>
             </el-checkbox-group>
           </el-form-item>
           <el-form-item label="企业主营范围">
-            <el-input
+            <el-input type="textarea" v-model="form.businessScope"></el-input>
-              type="textarea"
-              v-model="commerceMessage_form_two.businessStatus"
-            ></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -105,18 +90,14 @@
         <p>企业联系人信息</p>
         <el-form
           ref="company_person_message_form"
-          :model="company_person_message_form"
+          :model="form"
           class="company_person_message_form"
         >
           <el-form-item label="安全责任人">
-            <el-input
+            <el-input v-model="form.emergencyContact"></el-input>
-              v-model="company_person_message_form.emergencyContact"
-            ></el-input>
           </el-form-item>
           <el-form-item label="责任人电话">
-            <el-input
+            <el-input v-model="form.emergencyContactPhone"></el-input>
-              v-model="company_person_message_form.emergencyContactPhone"
-            ></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -125,87 +106,91 @@
         <p>企业位置信息</p>
         <el-form
           ref="company_position_form"
-          :model="company_position_form"
+          :model="form"
           class="company_position_form"
         >
           <el-form-item label="省份名称">
             <el-select
-              v-model="company_position_form.provinceName"
+              v-model="form.provinceName"
+              @change="checkCity"
               placeholder="请选择省份名称"
             >
               <el-option
-                v-for="item in company_position_form.province"
+                v-for="item in form.province"
-                :key="item.provinceCode"
+                :key="item.areaCode"
-                :label="item.provinceName"
+                :label="item.areaName"
-                :value="item.provinceCode"
+                :value="item.areaCode"
               >
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="城市名称">
             <el-select
-              v-model="company_position_form.city"
+              v-model="form.cityName"
+              @change="checkCounty"
               placeholder="请选择城市名称"
             >
               <el-option
-                v-for="item in company_position_form.city_name"
+                v-for="item in form.city"
-                :key="item.city_code"
+                :key="item.areaCode"
-                :label="item.city_name"
+                :label="item.areaName"
-                :value="item.city_code"
+                :value="item.areaCode"
               >
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="区县名称">
             <el-select
-              v-model="company_position_form.county"
+              v-model="form.areaName"
+              @change="checkTown"
               placeholder="请选择区县名称"
             >
               <el-option
-                v-for="item in company_position_form.county_name"
+                v-for="item in form.county"
-                :key="item.county_code"
+                :key="item.areaCode"
-                :label="item.county_name"
+                :label="item.areaName"
-                :value="item.county_code"
+                :value="item.areaCode"
               >
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="街道/乡镇名称">
             <el-select
-              v-model="company_position_form.township"
+              v-model="form.blockName"
+              @change="checkCommunity"
               placeholder="请选择街道/乡镇名称"
             >
               <el-option
-                v-for="item in company_position_form.township_name"
+                v-for="item in form.township"
-                :key="item.township_code"
+                :key="item.areaCode"
-                :label="item.township_name"
+                :label="item.areaName"
-                :value="item.township_code"
+                :value="item.areaCode"
               >
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="社区/村名称">
             <el-select
-              v-model="company_position_form.community"
+              v-model="form.streetName"
               placeholder="请选择社区/村名称"
             >
               <el-option
-                v-for="item in company_position_form.community_name"
+                v-for="item in form.community"
-                :key="item.community_code"
+                :key="item.areaCode"
-                :label="item.community_name"
+                :label="item.areaName"
-                :value="item.community_code"
+                :value="item.areaCode"
               >
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="经度">
-            <el-input v-model="company_position_form.longitude"></el-input>
+            <el-input v-model="form.longitude"></el-input>
           </el-form-item>
           <el-form-item label="纬度">
-            <el-input v-model="company_position_form.latitude"></el-input>
+            <el-input v-model="form.latitude"></el-input>
           </el-form-item>
           <el-form-item label="企业地址">
-            <el-input v-model="company_position_form.position"></el-input>
+            <el-input v-model="form.companyAddress"></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -214,28 +199,28 @@
         <p>管辖区信息</p>
         <el-form
           ref="jurisdiction_form"
-          :model="jurisdiction_form"
+          :model="form"
           class="jurisdiction_form"
         >
           <el-form-item label="辖区派出所编码">
-            <el-input v-model="jurisdiction_form.jurisdiction_code"></el-input>
+            <el-input v-model="form.policeDistrictCode"></el-input>
           </el-form-item>
           <el-form-item label="辖区派出所名称">
             <el-select
-              v-model="jurisdiction_form.jurisdiction"
+              v-model="form.policeDistrictCn"
               placeholder="请选择辖区派出所名称"
             >
               <el-option
-                v-for="item in jurisdiction_form.jurisdiction_name"
+                v-for="item in form.jurisdiction"
-                :key="item.jurisdiction_code"
+                :key="item.dictValue"
-                :label="item.jurisdiction_name"
+                :label="item.dictLabel"
-                :value="item.jurisdiction_code"
+                :value="item.dictValue"
               >
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="所属片区">
-            <el-input v-model="jurisdiction_form.region"></el-input>
+            <el-input v-model="form.belongingArea"></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -247,7 +232,12 @@
   </el-dialog>
 </template>
 <script>
-import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
+import {
+  common,
+  commonDict,
+  postCompanyList,
+  putCompanyList,
+} from "@/api/systemManagement";
 export default {
   name: "CompanyDataDialog",
   data() {
@@ -255,7 +245,8 @@ export default {
       dialogTitle: "",
       visible: false,
       // 企业工商信息上半部分
-      commerceMessage_form: {
+      form: {
+        // 企业工商信息上半部分
         companyName: "",
         socialCreditCode: "",
         companyNature: "",
@@ -265,37 +256,41 @@ export default {
         registerCapital: "",
         registerAuthority: "",
         businessStatus: "",
-      },
         // 企业工商信息下半部分
-      commerceMessage_form_two: {
         registerAddress: "",
-        companyType: [],
+        companyTypes: [],
-        businessStatus: "",
+        businessScope: "",
-      },
-      // 企业联系人信息表单
-      company_person_message_form: {
         emergencyContact: "",
         emergencyContactPhone: "",
-      },
         // 企业位置信息表单
-      company_position_form: {
         province: [],
         city: [],
+        county: [],
         township: [],
         community: [],
+        provinceName: "",
+        cityName: "",
+        areaName: "",
+        blockName: "",
+        streetName: "",
         longitude: "",
         latitude: "",
-        position: "",
+        companyAddress: "",
-      },
+        // 辖区表单
-      jurisdiction_form: {
         jurisdiction: [],
-        jurisdiction_code: "",
+        policeDistrictCn: "",
-        region: "",
+        policeDistrictCode: "",
+        belongingArea: "",
       },
+      imageUrl: "",
     };
   },
+  created() {
+    this.getCheck();
+    this.policeDis();
+  },
   methods: {
-    open(num) {
+    open(num, item) {
       this.visible = true;
       if (num === 1) {
         this.dialogTitle = "新建";
@@ -303,11 +298,105 @@ export default {
         this.dialogTitle = "查看档案";
       } else if (num === 3) {
         this.dialogTitle = "编辑";
+        console.log("item", item);
+        this.form = Object.assign(this.form, item);
       }
     },
-    saveFormData: debounce(function () {
+    getCheck() {
-      this.$message.success("232324234");
+      const params = {
-    }, 300),
+        areaCode: "0",
+      };
+      common(params).then((res) => {
+        this.form.province = res.data;
+      });
+    },
+    // 省下拉选中后，获取市级下拉
+    checkCity(val) {
+      this.form.cityName = "";
+      this.form.areaName = "";
+      this.form.blockName = "";
+      this.form.streetName = "";
+      const params = {
+        areaCode: "",
+      };
+      params.areaCode = val;
+      common(params).then((res) => {
+        this.form.city = res.data;
+      });
+    },
+    // 市下拉选中后，获取县级下拉
+    checkCounty(val) {
+      this.form.areaName = "";
+      this.form.blockName = "";
+      this.form.streetName = "";
+      const params = {
+        areaCode: "",
+      };
+      params.areaCode = val;
+      common(params).then((res) => {
+        this.form.county = res.data;
+      });
+    },
+    // 县级下拉选中后，获取街道下拉
+    checkTown(val) {
+      this.form.blockName = "";
+      this.form.streetName = "";
+      const params = {
+        areaCode: "",
+      };
+      params.areaCode = val;
+      common(params).then((res) => {
+        this.form.township = res.data;
+      });
+    },
+    // 街道下拉选中后，获取社区下拉
+    checkCommunity(val) {
+      this.form.streetName = "";
+      const params = {
+        areaCode: "",
+      };
+      params.areaCode = val;
+      common(params).then((res) => {
+        this.form.community = res.data;
+      });
+    },
+    // 辖区下拉查询
+    policeDis() {
+      const params = {
+        dictType: "police_district",
+      };
+      commonDict(params).then((res) => {
+        this.form.jurisdiction = res.data;
+      });
+    },
+    // 确定数据
+    saveFormData() {
+      const params = this.form;
+      console.log('this.form',this.form);
+      if (this.dialogTitle === "新建") {
+        console.log(1111111);
+        postCompanyList(params).then((res) => {
+          if (res.code === 200) {
+            this.$message.success("新建成功");
+            this.visible = false;
+            this.form = {};
+          } else {
+            this.$message.warning("新建失败");
+          }
+        });
+      } else if (this.dialogTitle === "编辑") {
+        putCompanyList(params).then((res) => {
+          if (res.code === 200) {
+            this.$message.success("编辑成功");
+            this.visible = false;
+            this.form = {};
+          } else {
+            this.$message.warning("编辑失败");
+          }
+        });
+      }
+      this.$emit("back");
+    },
   },
 };
 </script>
@@ -386,6 +475,7 @@ export default {
         .el-input__inner {
           width: 170px;
           border-radius: 0px;
+          border: 0.5px dashed;
           background: #3c4b4a;
           color: #fff;
         }
@@ -403,7 +493,7 @@ export default {
   .jurisdiction {
     background: url("~@/assets/companyFile/242112.png") no-repeat !important;
     background-size: 100% 100% !important;
-    margin-top: 16px;
+    margin-top: px;
   }
   /* 为适应上传图片表单布局把企业工商表单拆分 */
   .commerceMessage_one {
@@ -423,11 +513,18 @@ export default {
     }
     .avatar-uploader-icon {
       font-size: 28px;
+      position: relative;
       color: #8c939d;
-      width: 178px;
+      width: 220px;
-      height: 178px;
+      height: 220px;
-      line-height: 178px;
+      background: url("~@/assets/companyFile/uploadicon.png") center no-repeat !important;
-      text-align: center;
+      background-size: 40% 40% !important;
+      div {
+        position: absolute;
+        top: 160px;
+        left: 16px;
+        font-size: 19px;
+      }
     }
     .avatar {
       width: 178px;
@@ -455,10 +552,17 @@ export default {
         .el-checkbox {
           .el-checkbox__label {
             color: #fff;
+            padding-right: 10px;
           }
         }
         .el-checkbox.is-checked {
-          background: #edf6f2;
+          background: #3c4b4a;
+          border-radius: 0px;
+          border: 0.5px dashed;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+        }
+        .el-checkbox__inner {
+          display: none;
         }
       }
       .el-textarea {
@@ -467,6 +571,7 @@ export default {
           width: 650px;
           border-radius: 0px;
           background: #3c4b4a;
+          border: 0.5px dashed;
           color: #fff;
         }
         .el-textarea__inner:focus,

src/views/systemManagement/companyList/index.vue

@@ -33,7 +33,7 @@
             <ul>
               <li v-for="item in company_data" :key="item.id">
                 <img :src="item.picUrl" alt="" />
-                <span class="company_name"> {{ item.name }} </span>
+                <span class="company_name"> {{ item.companyAddress }} </span>
                 <div class="company_label">
                   <div
                     class="company_label_data"
@@ -43,15 +43,15 @@
                     {{ val }}
                   </div>
                 </div>
-                <span class="company_unit"> {{ item.unit }}</span>
+                <span class="company_unit"> {{ item.companyName }}</span>
                 <!-- 遮罩层 -->
                 <div class="image_mask">
                   <div class="btn">
                     <button class="check" @click="openDialog(2)">
                       查看档案
                     </button>
-                    <button class="change" @click="openDialog(3)">编辑</button>
+                    <button class="change" @click="openDialog(3, item)">编辑</button>
-                    <button class="clear" @click="openDialog(4)">删除</button>
+                    <button class="clear" @click="openDialog(4,item)">删除</button>
                   </div>
                 </div>
               </li>
@@ -73,8 +73,8 @@
         </div>
       </el-card>
     </div>
-    <CompanyDataDialog ref="companyDataDialog"></CompanyDataDialog>
+    <CompanyDataDialog ref="companyDataDialog" @back="back"></CompanyDataDialog>
-    <ClearDialog ref="clearDialog"></ClearDialog>
+    <ClearDialog ref="clearDialog" @back="back"></ClearDialog>
   </div>
 </template>
 <script>
@@ -102,13 +102,13 @@ export default {
     this.getData();
   },
   methods: {
-    openDialog(num) {
+    openDialog(num,item) {
       if (num === 4) {
         // 打开删除弹窗
-        this.$refs.clearDialog.open();
+        this.$refs.clearDialog.open(num,item);
       } else {
         console.log(num);
-        this.$refs.companyDataDialog.open(num);
+        this.$refs.companyDataDialog.open(num,item);
       }
     },
     // 请求数据
@@ -151,6 +151,10 @@ export default {
       this.pageNum = val;
       this.getData();
     },
+    // 弹窗关闭时刷新
+    back() {
+      this.getData()
+    }
   },
 };
 </script>
@@ -180,6 +184,7 @@ export default {
     border: 0px;
   }
   .card_body {
+    height: 90% !important;
     .top {
       width: 100%;
       display: flex;
@@ -247,26 +252,28 @@ export default {
     /* 公司图片展示区域 */
     .center {
       width: 100%;
-      height: 775px;
+      height: 65vh;
       margin-top: 22px;
       ul {
         display: flex;
-        justify-content: space-around;
+        justify-content: flex-start;
         height: 100%;
         flex-wrap: wrap;
         padding-left: 0px;
         li {
+          margin-left: 2.5%;
           position: relative;
           list-style: none;
           width: 30%;
           height: 47%;
           background: #1b3736;
           border: 1px solid #fff;
+          box-sizing: border-box;
           img {
             margin-left: 1%;
             margin-top: 1.2%;
             width: 99%;
-            height: 98.4%;
+            height: 98%;
           }
           /* 公司图片相关信息区域 */
           .company_name {

src/views/systemManagement/components/leftNav.vue

@@ -98,13 +98,15 @@ export default {
   width: 100%; /* 保持和大的aside同宽 */
   min-height: 98%; /* 固定侧边导航栏高度 */
   background: url("~@/assets/companyFile/导航背景.png") no-repeat;
+  padding:20px;
+  box-sizing: border-box;
   background-size: 100% 100%;
 }
 .el-menu-vertical-demo.el-menu {
   .el-menu-item {
-    width: 240px;
+    width: 100%;
     margin-top: 20px;
-    margin-left: 17px;
+   // margin-left: 17px;y
     color: #fff;
     font-size: 18px;
     background: url("~@/assets/companyFile/921.png") no-repeat;

src/views/systemManagement/correlationEquipment/components/equipmentTable.vue

@@ -6,11 +6,17 @@
     <div class="equipment_data_search">
       <el-form :inline="true" :model="search" class="search">
         <el-form-item>
-          <el-input v-model="search.equipemnt" placeholder="输入设备名称搜索"></el-input>
+          <el-input
+            v-model="search.equipemnt"
+            placeholder="输入设备名称搜索"
+          ></el-input>
         </el-form-item>
         <el-form-item>
           <el-form-item>
-            <el-input v-model="search.ip" placeholder="输入IP名称搜索"></el-input>
+            <el-input
+              v-model="search.ip"
+              placeholder="输入IP名称搜索"
+            ></el-input>
           </el-form-item>
         </el-form-item>
         <el-form-item>
@@ -23,29 +29,57 @@
     </div>
     <!-- 增删按钮 -->
     <div class="equipment_data_btn">
-      <el-button v-for="item in btnList" :key="item.value" @click="openDialog(item.value)">
+      <el-button
-        {{ item.label }}</el-button>
+        v-for="item in btnList"
+        :key="item.value"
+        @click="openDialog(item.value)"
+      >
+        <i :class="`el-icon-${item.icon}`" />
+        {{ item.label }}</el-button
+      >
     </div>
     <!-- 表格 -->
     <div class="equipment_data_table">
-      <el-table :cell-style="{ background: 'revert', 'text-align': 'center' }" :header-cell-style="table_header"
+      <el-table
-        :data="tableData" height="305" :highlight-current-row="true">
+        :cell-style="{ background: 'revert', 'text-align': 'center' }"
+        :header-cell-style="table_header"
+        :data="tableData"
+        height="380"
+        :highlight-current-row="true"
+      >
         <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop"
+        <el-table-column
-          :label="item.label"></el-table-column>
+          v-for="item in tableColumn"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+        ></el-table-column>
         <el-table-column prop="operation" label="操作">
           <template slot-scope="scope">
-            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑
+            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
+              >编辑
             </el-button>
-            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
+            <el-button
+              size="small"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+              >删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <div class="equipment_data_pagination">
-      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
+      <el-pagination
-        :page-sizes="[4]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
+        :background="true"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[4]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
       </el-pagination>
     </div>
     <AddDialog ref="addDialog"></AddDialog>
@@ -71,10 +105,10 @@ export default {
         ip: "",
       },
       btnList: [
-        { value: "1", label: "新增" },
+        { value: "1", label: "新增", icon: "plus" },
-        { value: "2", label: "删除" },
+        { value: "2", label: "删除", icon: "delete" },
-        { value: "3", label: "导入" },
+        { value: "3", label: "导入", icon: "bottom-right" },
-        { value: "4", label: "导出" },
+        { value: "4", label: "导出", icon: "top-left" },
       ],
       tableColumn: [
         { prop: "villageName", label: "设备名称" },
@@ -144,19 +178,32 @@ export default {
       background-size: 100% 100% !important;
     }
   }
-
   .equipment_data_btn {
     margin-left: 12px;
-
     .el-button {
-      width: 70px;
+      width: 90px;
       height: 35px;
       border: 1px solid #4a6072;
       color: #fff;
       border-radius: 0px !important;
       background: #323f43;
+      // .el-icon-add {
+      //   background: url("~@/assets/companyFile/addicon.png") center no-repeat;
+      //   font-size: 14px;
+      // }
+      // .el-icon-delete {
+      //   background: url("~@/assets/companyFile/deleteicon.png") center no-repeat;
+      //   font-size: 14px;
+      // }
+      // .el-icon-up {
+      //   background: url("~@/assets/companyFile/upicon.png") center no-repeat;
+      //   font-size: 14px;
+      // }
+      // .el-icon-down {
+      //   background: url("~@/assets/companyFile/downicon.png") center no-repeat;
+      //   font-size: 14px;
+      // }
     }
-
     .el-button:focus,
     .el-button:hover {
       border: 1px solid#34e1b3;
@@ -182,10 +229,12 @@ export default {
         text-align: center;
         color: #fff;
         font-weight: 500;
-        background: linear-gradient(to right,
+        background: linear-gradient(
+          to right,
           #284f49,
           #2f6363,
-            #233b38) !important;
+          #233b38
+        ) !important;
 
         & th {
           background-color: transparent;
@@ -207,27 +256,26 @@ export default {
   }
 
   .el-pagination {
-    margin-left: 57%;
+    margin-left: 60%;
-
+    /deep/.el-pagination__total {
+      color: #fff;
+    }
     /deep/.el-input__inner {
       border-radius: 0px;
       background: #3c4b4a;
       color: #fff;
     }
-
     /deep/.btn-prev {
       border-radius: 0px;
       background: #3c4b4a;
       color: #fff;
     }
-
     /deep/ul {
       li {
         background: #3c4b4a;
         color: #fff;
       }
     }
-
     /deep/.btn-next {
       border-radius: 0px;
       background: #3c4b4a;

src/views/systemManagement/correlationEquipment/index.vue

@@ -31,10 +31,10 @@
               <el-tree :data="companyTreeData">
                 <span
                   slot-scope="{ node }"
-                  :title="node.label"
+                  :title="node.areaName"
                   class="el-tree-node__label node-label"
                 >
-                  {{ node.label }}
+                  {{ node.areaName }}
                 </span>
               </el-tree>
             </div>
@@ -67,6 +67,7 @@
 <script>
 import SearchBox from "./components/searchBox.vue";
 import EquipmentTable from "./components/equipmentTable.vue";
+import { getAllData } from "@/api/correlationEquipment";
 export default {
   name: "correlationEquipment",
   components: {
@@ -80,7 +81,15 @@ export default {
       searchBox_left_text: {}, // 给子查询盒子传递字符和图片地址
     };
   },
-  created() {
+  async created() {
+    await getAllData().then((res) => {
+      if (res.code === 200) {
+        console.log("res", res);
+        // 树形赋值
+        this.companyTreeData = res.data
+        console.log('this.companyTreeData', this.companyTreeData);
+      }
+    });
     // 给子查询盒子传递字符和图片地址
     // 左边盒子
     this.searchBox_left_text = {
@@ -115,6 +124,7 @@ export default {
       ],
     };
   },
+  methods: {},
 };
 </script>
 <style lang="less" scoped>
@@ -148,7 +158,7 @@ export default {
     height: calc(100vh - 215px);
     /* 左侧 */
     .cardBodyLeft {
-      width: 30%;
+      width: 25%;
       height: 100%;
       .cardBodyLeft_search {
         display: flex;
@@ -188,7 +198,7 @@ export default {
         }
       }
       .cardBodyLeft_footer {
-        height: 88%;
+        height: 89.6%;
         .el-tree {
           /* 树形数据过长添加滚动条 */
           height: 100%;
@@ -230,7 +240,7 @@ export default {
         color: #fff;
         font-size: 18px;
       }
-      width: 70%;
+      width: 75%;
       height: 100%;
       border-radius: 4px;
       box-shadow: 5px 5px 10px #126a58;