Merge branch 'master' of http://8.136.197.230:3000/ZheJiangNingBo/pingAnQiYeWeb

src/router/index.js

@@ -28,7 +28,26 @@ const routes = [
             name: 'archives',
             component: () => import('@/views/archives'),
           },
-
+          // 系统管理
+          {
+            path: 'systemManagement',
+            name: 'systemManagement',
+            component: () => import('@/views/systemManagement'),
+            children: [
+              // 关联设备
+              {
+                path: 'correlationEquipment',
+                name: 'correlationEquipment',
+                component: () => import('@/views/systemManagement/correlationEquipment'),
+              },
+               // 企业名单
+               {
+                path: 'companyList',
+                name: 'companyList',
+                component: () => import('@/views/systemManagement/companyList'),
+              }
+            ]
+          }
         ]
       },
 

src/utils/publicMethod_lxy/debounce.js

@@ -0,0 +1,25 @@
+// 公共防抖
+export function debounce(fn, time) {
+    let timer = null
+    return function () {
+        if (timer) {
+            clearTimeout(timer)
+        }
+        timer = setTimeout(() => {
+            fn.apply(this, arguments)
+        }, time)
+    }
+}
+
+// methods:{
+    // fnc(data) {
+    // vue中原先写法
+    // }
+// }
+// 引入debounce方法后的写法
+// methods:{
+//     fnc:debounce(function(data) {
+
+//     })
+// }
+// data是原方法的参数，根据实际情况是否传参

src/views/head.vue

@@ -2,11 +2,9 @@
   <div class="mainHD">
     <div class="topHeader">
       <div class="iconbg">
-                <img src="../assets/companyFile/编组 7212.png">
+        <img src="../assets/companyFile/编组 7212.png" />
-            </div>
-            <div class="headText">
-                镇海平安企业（园区）
       </div>
+      <div class="headText">镇海平安企业（园区）</div>
       <el-menu :default-active="activeIndex" class="el-menu-demo topMenu" mode="horizontal" @select="handleSelect"
         :router="true">
         <div class="shu"></div>
@@ -22,15 +20,14 @@
         <div class="shu"></div>
         <el-menu-item index="6" route="/home">应用超市</el-menu-item>
         <div class="shu"></div>
-                <el-menu-item index="7" route="/home">系统管理</el-menu-item>
+        <el-menu-item index="7" route="/home/systemManagement">系统管理</el-menu-item>
         <div class="shu"></div>
       </el-menu>
       <div class="jingGuan">
         <div class="jgtx">
-                    <img src="../assets/companyFile/12110.png">
+          <img src="../assets/companyFile/12110.png" />
         </div>
-                &nbsp;&nbsp;
+        &nbsp;&nbsp; 王警官
-                王警官
       </div>
     </div>
     <router-view />
@@ -41,29 +38,28 @@
 export default {
   data() {
     return {
-            activeIndex: '1',
+      activeIndex: "1",
-            activeIndex2: '1'
+      activeIndex2: "1",
-        }
+    };
   },
   methods: {
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
-        }
+    },
-    }
+  },
-}
+};
 </script>
  
 <style lang="less" scoped>
 .mainHD {
   width: 100%;
   height: 100%;
-
 }
 
 .topHeader {
   width: 100%;
   height: 80px;
-    background: url('~@/assets/companyFile/导航栏上.png') no-repeat;
+  background: url("~@/assets/companyFile/导航栏上.png") no-repeat;
   background-size: 100% 100%;
   display: flex;
   align-items: center;
@@ -72,7 +68,7 @@ export default {
     height: 35px;
     width: 50px;
     margin: 0 25px;
-        background: url('~@/assets/companyFile/矩形2111.png') no-repeat;
+    background: url("~@/assets/companyFile/矩形2111.png") no-repeat;
     background-size: 100% 100%;
     display: flex;
     justify-content: center;
@@ -87,9 +83,9 @@ export default {
   .headText {
     font-family: YouSheBiaoTiHei;
     font-size: 40px;
-        color: #EDF6FF;
+    color: #edf6ff;
     letter-spacing: 4px;
-        text-shadow: 0 8px 8px rgba(0, 0, 0, 0.30);
+    text-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
     font-weight: 400;
     margin-right: 80px;
   }
@@ -97,13 +93,13 @@ export default {
   .jingGuan {
     margin-left: 100px;
     display: flex;
-        color: #EDF6FF;
+    color: #edf6ff;
     align-items: center;
 
     .jgtx {
       width: 40px;
       height: 40px;
-            background: url('~@/assets/companyFile/矩形21112222.png') no-repeat;
+      background: url("~@/assets/companyFile/矩形21112222.png") no-repeat;
       background-size: 100% 100%;
 
       img {
@@ -113,6 +109,43 @@ export default {
     }
   }
 
+  /deep/.el-menu {
+    border: 0;
+    background-color: rgba(0, 0, 0, 0);
+    display: flex;
+    align-items: center;
+
+    .el-menu-item {
+      width: 130px;
+      height: 35px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px 20px;
+      background: url("~@/assets/companyFile/Rectangle Copy 4.png") no-repeat;
+
+      background-size: 100% 100%;
+
+      font-size: 16px;
+      color: #d9e7ff;
+      letter-spacing: 3px;
+      text-align: center;
+      font-weight: 400;
+    }
+
+    .shu {
+      border-left: 1px solid rgba(217, 231, 255, 0.4);
+      width: 0;
+      height: 24px;
+      margin: 0 10px;
+    }
+
+    .is-active {
+      background: url("~@/assets/companyFile/891771.png") no-repeat;
+
+      background-size: 100% 100%;
+    }
+
     /deep/.el-menu {
       border: 0;
       background-color: rgba(0, 0, 0, 0);
@@ -154,6 +187,6 @@ export default {
         border: 0 !important;
       }
     }
-
+  }
 }
 </style>

src/views/systemManagement/companyList/index.vue

@@ -0,0 +1,12 @@
+<template>
+<!-- 企业名单 -->
+  <div>456</div>
+</template>
+<script>
+export default {
+  name: "companyList",
+  data() {
+    return {};
+  },
+};
+</script>

src/views/systemManagement/components/leftNav.vue

@@ -0,0 +1,101 @@
+<template>
+  <!-- 系统管理左侧导航菜单 -->
+  <el-menu
+    default-active="this.$route.path"
+    class="el-menu-vertical-demo"
+    @open="handleOpen"
+    @close="handleClose"
+    :collapse="isCollapse"
+  >
+    <!-- background-color="#f5f2e9"
+    text-color="#5aa4ae" -->
+    <!-- 一级导航 -->
+    <el-menu-item
+      @click="clickMenu(item)"
+      v-for="item in menuList"
+      :key="item.name"
+      :index="item.name"
+    >
+      <i :class="`el-icon-${item.icon}`"></i>
+      <span slot="title">{{ item.label }}</span>
+    </el-menu-item>
+  </el-menu>
+</template>
+<script>
+export default {
+  name: "LeftNav",
+  data() {
+    return {
+      isCollapse: false,
+      menu: [
+        // 导航数组
+        {
+          path: "/safeIndex",
+          name: "safeIndex",
+          label: "平安指数",
+          icon: "folder-checked",
+        },
+        {
+          path: "/companyScore",
+          name: "companyScore",
+          label: "企业赋分",
+          icon: "folder-checked",
+        },
+        {
+          path: "/companyList",
+          name: "companyList",
+          label: "企业名单",
+          icon: "folder-checked",
+        },
+        {
+          path: "/correlationEquipment",
+          name: "correlationEquipment",
+          label: "关联设备",
+          icon: "folder-checked",
+        },
+      ],
+    };
+  },
+  computed: {
+    menuList() {
+      // 一级菜单导航
+      return this.menu.filter((item) => !item.children);
+    },
+  },
+  methods: {
+    // 点击跳转路由
+    clickMenu(val) {
+      this.$router.push({
+        name: val.name,
+      });
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 100%; /* 保持和大的aside同宽 */
+  min-height: 98%; /* 固定侧边导航栏高度 */
+  background: url("~@/assets/companyFile/导航背景.png") no-repeat;
+  background-size: 100% 100%;
+}
+.el-menu-vertical-demo.el-menu {
+  .el-menu-item {
+    color: #fff;
+    font-size: 18px;
+  }
+  .el-menu-item:focus,
+  .el-menu-item:hover {
+    /* 导航选项点击触碰效果 */
+    background: #daf4f6;
+    color: #5a5e66;
+  }
+}
+</style>

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

@@ -0,0 +1,276 @@
+<template>
+  <!-- 新建或者修改 -->
+  <el-dialog
+    class="dialog"
+    :title="dialogTitle"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="970px"
+  >
+    <div class="form_body">
+      <!-- 设备基础信息表单 -->
+      <div class="equipment_form">
+        <p>设备基础信息</p>
+        <el-form ref="equipmentForm" :model="equipmentForm">
+          <el-form-item label="企业名称">
+            <el-select
+              v-model="equipmentForm.company.villageName"
+              placeholder="请选择企业"
+            >
+              <el-option
+                v-for="item in equipmentForm.company"
+                :key="item.villageCode"
+                :label="item.villageName"
+                :value="item.villageCode"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备名称">
+            <el-input v-model="equipmentForm.name"></el-input>
+          </el-form-item>
+          <el-form-item label="设备IP">
+            <el-input v-model="equipmentForm.ip"></el-input>
+          </el-form-item>
+          <el-form-item label="设备大类">
+            <el-input v-model="equipmentForm.big"></el-input>
+          </el-form-item>
+          <el-form-item label="设备小类">
+            <el-input v-model="equipmentForm.small"></el-input>
+          </el-form-item>
+          <el-form-item label="登录账号">
+            <el-input v-model="equipmentForm.passUser"></el-input>
+          </el-form-item>
+          <el-form-item label="登录密码">
+            <el-input v-model="equipmentForm.passNum"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <!-- 视频通道信息表单 -->
+      <div class="video_form">
+        <p>视频通道信息</p>
+        <el-form ref="videoForm" :model="videoForm">
+          <el-form-item label="通道编码">
+            <el-input v-model="videoForm.channelCode"></el-input>
+          </el-form-item>
+          <el-form-item label="NVR编码">
+            <el-input v-model="videoForm.NVRCode"></el-input>
+          </el-form-item>
+          <el-form-item label="通道号">
+            <el-input v-model="videoForm.channelNum"></el-input>
+          </el-form-item>
+          <el-form-item label="RTSP流地址">
+            <el-input v-model="videoForm.address"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <!-- 设备位置信息表单 -->
+      <div class="equipment_address_form">
+        <p>设备位置信息</p>
+        <el-form ref="addressForm" :model="addressForm">
+          <el-form-item label="设备经度">
+            <el-input v-model="addressForm.longitude"></el-input>
+          </el-form-item>
+          <el-form-item label="设备纬度">
+            <el-input v-model="addressForm.latitude"></el-input>
+          </el-form-item>
+          <el-form-item label="U3D经度">
+            <el-input v-model="addressForm.U3D_longitude"></el-input>
+          </el-form-item>
+          <el-form-item label="U3D纬度">
+            <el-input v-model="addressForm.U3D_latitude"></el-input>
+          </el-form-item>
+          <el-form-item label="设备高度">
+            <el-input v-model="addressForm.equipemnt_hight"></el-input>
+          </el-form-item>
+          <el-form-item label="U3D高度">
+            <el-input v-model="addressForm.U3D_hight"></el-input>
+          </el-form-item>
+          <el-form-item label="设备方位">
+            <el-select
+              v-model="addressForm.equipment_orientation.orientationCode"
+              placeholder="请选择设备方位"
+            >
+              <el-option
+                v-for="item in addressForm.equipment_orientation"
+                :key="item.orientationCode"
+                :label="item.orientation"
+                :value="item.orientationCode"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="安装位置">
+            <el-input v-model="addressForm.equipment_position"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <!-- 设备其他信息表单 -->
+      <div class="other_form">
+        <p>设备其他信息</p>
+        <el-form ref="otherForm" :model="otherForm">
+          <el-form-item label="设备品牌">
+            <el-input v-model="otherForm.brand"></el-input>
+          </el-form-item>
+          <el-form-item label="设备厂家">
+            <el-input v-model="otherForm.manufacturer"></el-input>
+          </el-form-item>
+          <el-form-item label="厂家联系电话">
+            <el-input v-model="otherForm.manufacturer_phone"></el-input>
+          </el-form-item>
+          <el-form-item label="SN号">
+            <el-input v-model="otherForm.SN_num"></el-input>
+          </el-form-item>
+          <el-form-item label="设备MAC">
+            <el-input v-model="otherForm.MAC"></el-input>
+          </el-form-item>
+          <el-form-item label="设备端口">
+            <el-input v-model="otherForm.port"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="saveFormData">保 存</el-button>
+      <el-button>取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {debounce} from '@/utils/publicMethod_lxy/debounce.js'
+export default {
+  name: "AddDialog",
+  data() {
+    return {
+      visible: false,
+      dialogTitle: "新建",
+      equipmentForm: {
+        // 设备基础信息表单
+        company: [],
+      },
+      // 视频通道信息表单
+      videoForm: {
+        channelCode: "",
+        NVRCode: "",
+        channelNum: "",
+        address: "",
+      },
+      // 设备位置信息表单
+      addressForm: {
+        longitude: "",
+        latitude: "",
+        U3D_longitude: "",
+        U3D_latitude: "",
+        equipemnt_hight: "",
+        U3D_hight: "",
+        equipment_orientation: [],
+        equipment_position: "",
+      },
+      // 设备其他信息表单
+      otherForm: {
+        brand: "",
+        manufacturer: "",
+        manufacturer_phone: "",
+        SN_num: "",
+        MAC: "",
+        port: "",
+      },
+    };
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    saveFormData:debounce(function() {
+        this.$message.success('232324234')
+    },300)
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+  }
+  background-image: url("~@/assets/companyFile/22136.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 720px;
+  /* 关闭弹窗叉号 */
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      color: #fff;
+      font-size: 18px;
+    }
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+    p {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+  .el-button {
+    width: 70px;
+    border: 1px solid #4a6072;
+    color: #fff;
+    border-radius: 0px !important;
+    background: #323f43;
+  }
+  .el-button:focus,
+  .el-button:hover {
+    color: #34e1b3;
+    background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+  .form_body {
+    height: 600px;
+    overflow-y: scroll;
+  }
+  .form_body::-webkit-scrollbar {
+    width: 10px;
+    background-color: #5e666a;
+    border-radius: 4px;
+  }
+  .form_body::-webkit-scrollbar-thumb {
+    width: 9px;
+    background-color: #3c4b4a;
+    border-radius: 4px;
+  }
+  .el-form {
+    /* 表单内容浮动布局，多行多列表单 */
+    width: 900px !important;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .el-form-item {
+      /* 表单域名跟input浮动布局 */
+      display: flex;
+      width: 30%;
+      .el-form-item__label {
+        width: 40%;
+        text-align: center;
+        color: #fff;
+      }
+      .el-form-item__content {
+        .el-input__inner {
+          width: 170px;
+          border-radius: 0px;
+          background: #3c4b4a;
+          color: #fff;
+        }
+        /* 查询框点击颜色变化 */
+        .el-input__inner:focus,
+        .el-input__inner:hover {
+          border-color: #1b3736;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,205 @@
+<template>
+  <!-- 设备表格 -->
+  <div class="equipment_data">
+    <p>智能感知设备列表</p>
+    <!-- 查询表 -->
+    <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-form-item>
+        <el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="search.ip"
+              placeholder="输入IP名称搜索"
+            ></el-input>
+          </el-form-item>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="onSubmit">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="onSubmit">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 增删按钮 -->
+    <div class="equipment_data_btn">
+      <el-button
+        v-for="item in btnList"
+        :key="item.value"
+        @click="openDialog(item.value)"
+      >
+        {{ item.label }}</el-button
+      >
+    </div>
+    <!-- 表格 -->
+    <div class="equipment_data_table">
+      <el-table
+        :cell-style="{ background: 'revert', 'text-align': 'center' }"
+        :header-cell-style="table_header"
+        :data="tableData"
+        height="305"
+        :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"
+          :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>
+            <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"></div>
+    <AddDialog ref="addDialog"></AddDialog>
+  </div>
+</template>
+<script>
+import AddDialog from './addDialog';
+export default {
+  name: "EquipmentTable",
+  components: {
+    AddDialog,
+  },
+  data() {
+    return {
+      search: {
+        equipment: "",
+        ip: "",
+      },
+      btnList: [
+        { value: "1", label: "新增" },
+        { value: "2", label: "删除" },
+        { value: "3", label: "导入" },
+        { value: "4", label: "导出" },
+      ],
+      tableColumn: [
+        { prop: "villageName", label: "设备名称" },
+        { prop: "passTimeCn", label: "设备类型" },
+        { prop: "deviceAddress", label: "设备IP" },
+        { prop: "cameraIp", label: "设备经度" },
+        { prop: "imageTypeCn", label: "设备维度" },
+        { prop: "imageTypeC", label: "进出方向" },
+      ],
+    };
+  },
+  methods: {
+    openDialog(num) {
+      console.log(num,'num');
+      if (num === "1") {
+        console.log(num,'num');
+        this.$refs.addDialog.open();
+      }
+    },
+    table_header({ row, rowIndex }) {
+      console.log(row);
+      console.log(rowIndex);
+      return {
+        "text-align": "center",
+        color: "#fff",
+      };
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.equipment_data {
+  p {
+    color: #fff;
+    margin-left: 10px;
+  }
+  .equipment_data_search {
+    margin-left: 12px;
+    /deep/.el-input__inner {
+      border-radius: 0px 0px 0px 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .el-button {
+      width: 100%;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+    }
+    .el-button:focus,
+    .el-button:hover {
+      border: 1px solid#34e1b3;
+      background: url("~@/assets/companyFile/2121.png") no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+  .equipment_data_btn {
+    margin-left: 12px;
+    .el-button {
+      width: 70px;
+      height: 35px;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+    }
+    .el-button:focus,
+    .el-button:hover {
+      border: 1px solid#34e1b3;
+      background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+  .equipment_data_table {
+    width: calc(100% - 30px);
+    margin-top: 12px;
+    margin-left: 12px;
+    height: 100%;
+    .el-table,
+    .el-table__expanded-cell {
+      color: #fff;
+      background-color: transparent;
+    }
+    /deep/.el-table {
+      thead {
+        text-align: center;
+        color: #fff;
+        font-weight: 500;
+        background: linear-gradient(
+          to right,
+          #284f49,
+          #2f6363,
+          #233b38
+        ) !important;
+        & th {
+          background-color: transparent;
+        }
+        & tr {
+          background-color: transparent;
+        }
+      }
+    }
+    .el-table::before {
+      //去除底部白线
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 0px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,88 @@
+<template>
+  <!-- 关联设备的右侧查询盒子 -->
+  <div class="searchBox_body">
+    <div class="searchBox_img">
+      <div class="searchBox_img_top">
+        <img :src="searchBoxData.src" alt="" />
+      </div>
+      <span>视频监控系统</span>
+    </div>
+    <ul>
+      <li
+        class="searchBox_btn"
+        v-for="item in searchBoxData.btnList"
+        :key="item.value"
+      >
+        <el-button> {{ item.name }} </el-button>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: "searchBox",
+  props: {
+    searchBoxData: {},
+  },
+  data() {
+    return {};
+  },
+  created() {},
+};
+</script>
+<style lang="less" scoped>
+.searchBox_body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .searchBox_img {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 19.8%;
+    height: 53%;
+    padding-top: 8%;
+    padding-left: 3%;
+    color: #fff;
+    text-align: center;
+    font-size: 15px;
+    .searchBox_img_top {
+      width: 78%;
+      height: 100%;
+      margin: 0px auto;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    span {
+      margin-top: 7%;
+    }
+  }
+  ul {
+    width: 70%;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    flex-flow: wrap;
+    padding: 0px 0px 0px 10px;
+  }
+  .searchBox_btn {
+    list-style: none;
+    width: 30%;
+    .el-button {
+      width: 100%;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+    }
+    .el-button:focus,
+    .el-button:hover {
+      color: #34e1b3;
+      background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+}
+</style>

src/views/systemManagement/correlationEquipment/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <!-- 关联设备 -->
+  <div>
+    <div class="main">
+      <!-- 卡片标题 -->
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>关联设备</span>
+        </div>
+        <!-- 内容 -->
+        <div class="cardBody">
+          <!-- 左侧 -->
+          <div class="cardBodyLeft">
+            <!-- 左侧搜索框 -->
+            <div class="cardBodyLeft_search">
+              <el-input
+                class="cardBodyLeft_search_input"
+                placeholder="输入企业名称搜索"
+                v-model="searchCompany"
+              >
+              </el-input>
+              <div class="cardBodyLeft_search_button">
+                <i class="el-icon-search"></i>
+              </div>
+            </div>
+            <el-divider></el-divider>
+            <!-- 公司树数据 -->
+            <div class="cardBodyLeft_footer">
+              <el-tree :data="companyTreeData">
+                <span
+                  slot-scope="{ node }"
+                  :title="node.label"
+                  class="el-tree-node__label node-label"
+                >
+                  {{ node.label }}
+                </span>
+              </el-tree>
+            </div>
+          </div>
+          <el-divider direction="vertical"></el-divider>
+          <!-- 右侧 -->
+          <div class="cardBodyRight">
+            <p>设备列表</p>
+            <div class="cardBodyRight_search">
+              <div class="video">
+                <SearchBox
+                  ref="searchBox"
+                  :searchBoxData="searchBox_left_text"
+                ></SearchBox>
+              </div>
+              <div class="intelligence">
+                <SearchBox
+                  ref="searchBox"
+                  :searchBoxData="searchBox_right_text"
+                ></SearchBox>
+              </div>
+            </div>
+            <EquipmentTable ref="equipmentTable"></EquipmentTable>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script>
+import SearchBox from "./components/searchBox.vue";
+import EquipmentTable from "./components/equipmentTable.vue";
+export default {
+  name: "correlationEquipment",
+  components: {
+    SearchBox,
+    EquipmentTable,
+  },
+  data() {
+    return {
+      searchCompany: "", // 公司搜索
+      companyTreeData: [], // 公司单位树
+      searchBox_left_text: {}, // 给子查询盒子传递字符和图片地址
+    };
+  },
+  created() {
+    // 给子查询盒子传递字符和图片地址
+    // 左边盒子
+    this.searchBox_left_text = {
+      src: require("@/assets/companyFile/camera.png"),
+      img_text: "视频监控系统",
+      btnList: [
+        { value: "1", name: "公共区域" },
+        { value: "2", name: "地下车库" },
+        { value: "3", name: "全景监控" },
+        { value: "4", name: "人脸抓拍" },
+        { value: "5", name: "电梯监控" },
+        { value: "6", name: "人体测温" },
+        { value: "7", name: "车辆抓拍" },
+        { value: "8", name: "人脸门禁" },
+        { value: "9", name: "高空抛物" },
+      ],
+    };
+    // 右边盒子
+    this.searchBox_right_text = {
+      src: require("@/assets/companyFile/intelligence.png"),
+      img_text: "智能感知系统",
+      btnList: [
+        { value: "1", name: "车辆抓拍" },
+        { value: "2", name: "人脸抓拍" },
+        { value: "3", name: "门禁设备" },
+        { value: "4", name: "高抛抓拍" },
+        { value: "5", name: "全结构化" },
+        { value: "6", name: "智能烟感" },
+        { value: "7", name: "访客机" },
+        { value: "8", name: "多为设备" },
+        { value: "9", name: "WIFI设备" },
+      ],
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+/* card统一样式 */
+.el-card.box-card.is-always-shadow {
+  height: calc(100vh - 116px); /* 控制card布局高度,用于适配 */
+}
+/* card统一样式 */
+/deep/.el-card__header {
+  border-bottom: 1px solid #a1a1a1 !important;
+  .clearfix {
+    span {
+      font-size: 17px;
+      font-weight: 400;
+      color: #fff;
+    }
+  }
+}
+.main {
+  height: 100%;
+  .el-card.box-card.is-always-shadow {
+    background: url("~@/assets/companyFile/22136.png") no-repeat !important;
+    background-size: 100% 100% !important;
+    border: 0px;
+  }
+  .cardBody {
+    width: 100%;
+    display: flex;
+    height: calc(100vh - 215px);
+    /* 左侧 */
+    .cardBodyLeft {
+      width: 30%;
+      height: 100%;
+      .cardBodyLeft_search {
+        display: flex;
+        width: 100%;
+        height: 40px;
+        .cardBodyLeft_search_input ::v-deep {
+          /* 查询框 */
+          width: 90%;
+          .el-input__inner {
+            border-radius: 4px 0px 0px 4px;
+            background: #3c4b4a;
+            color: #fff;
+          }
+          /* 查询框点击颜色变化 */
+          .el-input__inner:focus,
+          .el-input__inner:hover {
+            border-color: #1b3736;
+          }
+        }
+        .cardBodyLeft_search_button {
+          width: 10%;
+          height: 100%;
+          border-radius: 0px 4px 4px 0px;
+          background: #0e3936;
+          text-align: center;
+          font-size: 28px;
+          cursor: pointer;
+          .el-icon-search {
+            color: #fff;
+            padding: 12% 0;
+          }
+        }
+        .cardBodyLeft_search_button:focus,
+        .cardBodyLeft_search_button:hover {
+          /* 放大镜点击特效 */
+          background: #126a58;
+        }
+      }
+      .cardBodyLeft_footer {
+        height: 88%;
+        .el-tree {
+          /* 树形数据过长添加滚动条 */
+          height: 100%;
+          overflow: auto;
+          box-shadow: 5px 5px 10px #126a58;
+          border-radius: 4px;
+          background: #293738;
+          color: #fff;
+          .node-label {
+            /* 树形数据横向过长添加展开 */
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          /* hover节点时的背景颜色 */
+          ::v-deep .el-tree-node__content:hover {
+            background: #126a58;
+            color: #fff;
+          }
+          /* 节点选中的背景颜色 */
+          ::v-deep .el-tree-node:focus > .el-tree-node__content {
+            background: #1b3736;
+            color: #fff;
+          }
+        }
+      }
+    }
+    /* 竖分割线 */
+    .el-divider.el-divider--vertical {
+      margin-left: 13px;
+      height: 100%;
+    }
+    /* 右侧 */
+    .cardBodyRight {
+      p {
+        margin-left: 10px;
+        height: 18px;
+        color: #fff;
+        font-size: 18px;
+      }
+      width: 70%;
+      height: 100%;
+      border-radius: 4px;
+      box-shadow: 5px 5px 10px #126a58;
+      .cardBodyRight_search {
+        display: flex;
+        justify-content: space-evenly;
+        width: 100%;
+        height: 25%;
+        .video {
+          width: 48%;
+          height: 100%;
+          background: #3b5153;
+          border-radius: 4px;
+        }
+        .intelligence {
+          width: 48%;
+          height: 100%;
+          background: #2c4046;
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/systemManagement/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <!-- 系统管理 -->
+  <div>
+    <el-container>
+      <el-aside>
+        <LeftNav></LeftNav>
+      </el-aside>
+      <el-container>
+        <el-main>
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import LeftNav from "./components/leftNav.vue";
+export default {
+  name: "systemManagement",
+  components: {
+    LeftNav,
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="less" scoped>
+.el-container {
+  height: calc(100vh - 95px); /* 控制整体布局高度,用于适配 */
+  .el-aside {
+    margin-top: 15px; /* 给左上角logo留空间 -> 后面固定都给15px */
+    margin-left: 15px;
+    width: 13% !important; /* 控制侧边导航栏宽度 */
+    height: 100%;
+  }
+  .el-main {
+    margin: 16px 15px 0px 15px; /* 固定都给15px */
+    padding: 0px;
+  }
+}
+</style>