From 941b7cbe57fd922404f8e1616f9a5045646a7103 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Thu, 27 Apr 2023 09:14:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E8=81=94=E8=AE=BE=E5=A4=87=E5=BC=80?=
 =?UTF-8?q?=E5=8F=911?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  21 +-
 src/views/head.vue                            | 262 +++++++++---------
 .../systemManagement/companyList/index.vue    |  12 +
 .../systemManagement/components/leftNav.vue   | 101 +++++++
 .../correlationEquipment/index.vue            | 184 ++++++++++++
 src/views/systemManagement/index.vue          |  43 +++
 6 files changed, 492 insertions(+), 131 deletions(-)
 create mode 100644 src/views/systemManagement/companyList/index.vue
 create mode 100644 src/views/systemManagement/components/leftNav.vue
 create mode 100644 src/views/systemManagement/correlationEquipment/index.vue
 create mode 100644 src/views/systemManagement/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 9bafdde..213d3db 100644
--- a/src/router/index.js
+++ b/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'),
+              }
+            ]
+          }
         ]
       },
 
diff --git a/src/views/head.vue b/src/views/head.vue
index 52597a0..96e341c 100644
--- a/src/views/head.vue
+++ b/src/views/head.vue
@@ -1,159 +1,161 @@
 <template>
-    <div class="mainHD">
-        <div class="topHeader">
-            <div class="iconbg">
-                <img src="../assets/companyFile/编组 7212.png">
-            </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>
-                <el-menu-item index="1" route="/home">平安指数</el-menu-item>
-                <div class="shu"></div>
-                <el-menu-item index="2" route="/home">实时预警</el-menu-item>
-                <div class="shu"></div>
-                <el-menu-item index="3" route="/home">闭环处置</el-menu-item>
-                <div class="shu"></div>
-                <el-menu-item index="4" route="/home">要素资源</el-menu-item>
-                <div class="shu"></div>
-                <el-menu-item index="5" route="/home/enterpriseArchives">企业档案</el-menu-item>
-                <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>
-                <div class="shu"></div>
-            </el-menu>
-            <div class="jingGuan">
-                <div class="jgtx">
-                    <img src="../assets/companyFile/12110.png">
-                </div>
-                &nbsp;&nbsp;
-                王警官
-            </div>
+  <div class="mainHD">
+    <div class="topHeader">
+      <div class="iconbg">
+        <img src="../assets/companyFile/编组 7212.png" />
+      </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>
+        <el-menu-item index="1" route="/home">平安指数</el-menu-item>
+        <div class="shu"></div>
+        <el-menu-item index="2" route="/home">实时预警</el-menu-item>
+        <div class="shu"></div>
+        <el-menu-item index="3" route="/home">闭环处置</el-menu-item>
+        <div class="shu"></div>
+        <el-menu-item index="4" route="/home">要素资源</el-menu-item>
+        <div class="shu"></div>
+        <el-menu-item index="5" route="/home/enterpriseArchives"
+          >企业档案</el-menu-item
+        >
+        <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/systemManagement">系统管理</el-menu-item>
+        <div class="shu"></div>
+      </el-menu>
+      <div class="jingGuan">
+        <div class="jgtx">
+          <img src="../assets/companyFile/12110.png" />
         </div>
-        <router-view />
+        &nbsp;&nbsp; 王警官
+      </div>
     </div>
+    <router-view />
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            activeIndex: '1',
-            activeIndex2: '1'
-        }
+  data() {
+    return {
+      activeIndex: "1",
+      activeIndex2: "1",
+    };
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
     },
-    methods: {
-        handleSelect(key, keyPath) {
-            console.log(key, keyPath);
-        }
-    }
-}
+  },
+};
 </script>
  
 <style lang="less" scoped>
 .mainHD {
-    width: 100%;
-    height: 100%;
-
+  width: 100%;
+  height: 100%;
 }
 
 .topHeader {
-    width: 100%;
-    height: 80px;
-    background: url('~@/assets/companyFile/导航栏上.png') no-repeat;
+  width: 100%;
+  height: 80px;
+  background: url("~@/assets/companyFile/导航栏上.png") no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+
+  .iconbg {
+    height: 35px;
+    width: 50px;
+    margin: 0 25px;
+    background: url("~@/assets/companyFile/矩形2111.png") no-repeat;
     background-size: 100% 100%;
     display: flex;
+    justify-content: center;
     align-items: center;
 
-    .iconbg {
-        height: 35px;
-        width: 50px;
-        margin: 0 25px;
-        background: url('~@/assets/companyFile/矩形2111.png') no-repeat;
-        background-size: 100% 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .img {
-            height: 35px;
-            width: 50px;
-        }
+    .img {
+      height: 35px;
+      width: 50px;
     }
+  }
+
+  .headText {
+    font-family: YouSheBiaoTiHei;
+    font-size: 40px;
+    color: #edf6ff;
+    letter-spacing: 4px;
+    text-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
+    font-weight: 400;
+    margin-right: 80px;
+  }
+
+  .jingGuan {
+    margin-left: 100px;
+    display: flex;
+    color: #edf6ff;
+    align-items: center;
+
+    .jgtx {
+      width: 40px;
+      height: 40px;
+      background: url("~@/assets/companyFile/矩形21112222.png") no-repeat;
+      background-size: 100% 100%;
 
-    .headText {
-        font-family: YouSheBiaoTiHei;
-        font-size: 40px;
-        color: #EDF6FF;
-        letter-spacing: 4px;
-        text-shadow: 0 8px 8px rgba(0, 0, 0, 0.30);
-        font-weight: 400;
-        margin-right: 80px;
+      img {
+        width: 40px;
+        height: 40px;
+      }
     }
+  }
 
-    .jingGuan {
-        margin-left: 100px;
-        display: flex;
-        color: #EDF6FF;
-        align-items: center;
-
-        .jgtx {
-            width: 40px;
-            height: 40px;
-            background: url('~@/assets/companyFile/矩形21112222.png') no-repeat;
-            background-size: 100% 100%;
-
-            img {
-                width: 40px;
-                height: 40px;
-            }
-        }
+  /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;
     }
 
-    /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%;
-        }
-
-        .el-menu--horizontal>.el-menu-item.is-active {
-            border: 0;
-        }
+    .is-active {
+      background: url("~@/assets/companyFile/891771.png") no-repeat;
+
+      background-size: 100% 100%;
     }
 
+    .el-menu--horizontal > .el-menu-item.is-active {
+      border: 0;
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/systemManagement/companyList/index.vue b/src/views/systemManagement/companyList/index.vue
new file mode 100644
index 0000000..ea462c5
--- /dev/null
+++ b/src/views/systemManagement/companyList/index.vue
@@ -0,0 +1,12 @@
+<template>
+<!-- 企业名单 -->
+  <div>456</div>
+</template>
+<script>
+export default {
+  name: "companyList",
+  data() {
+    return {};
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/systemManagement/components/leftNav.vue b/src/views/systemManagement/components/leftNav.vue
new file mode 100644
index 0000000..4d08f7d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/systemManagement/correlationEquipment/index.vue b/src/views/systemManagement/correlationEquipment/index.vue
new file mode 100644
index 0000000..db5fc18
--- /dev/null
+++ b/src/views/systemManagement/correlationEquipment/index.vue
@@ -0,0 +1,184 @@
+<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">
+            <span>设备列表</span>
+            <div class="cardBodyRight_search">
+                <div class="video"></div>
+                <div class="intelligence"></div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "correlationEquipment",
+  data() {
+    return {
+      searchCompany: "", // 公司搜索
+      companyTreeData: [], // 公司单位树
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+/* card统一样式 */
+.el-card.box-card.is-always-shadow {
+  height: calc(100vh - 158px); /* 控制card布局高度,用于适配 */
+}
+/* card统一样式 */
+/deep/.el-card__header {
+  border-bottom: 1px solid #a1a1a1 !important;
+  .clearfix {
+    span {
+      font-size: 17px;
+      font-weight: 400;
+    }
+  }
+}
+.main {
+  .cardBody {
+    width: 100%;
+    display: flex;
+    height: calc(100vh - 260px);
+    /* 左侧 */
+    .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;
+          }
+          /* 查询框点击颜色变化 */
+          .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: #1b3736;
+          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: 85%;
+        .el-tree {
+          /* 树形数据过长添加滚动条 */
+          height: 100%;
+          overflow: auto;
+          box-shadow: 5px 5px 10px #126a58;
+          border-radius: 4px;
+          .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 {
+      width: 70%;
+      height: 100%;
+      background: rgb(230, 223, 236);
+      .cardBodyRight_search {
+        display: flex;
+        justify-content:space-around;
+        width: 100%;
+        height: 30%;
+        background: #1b3736;
+        .video {
+            width: 48%;
+            height: 100%;
+            background: #a1a1a1;
+            box-shadow: 5px 5px 10px #126a58;
+        }
+        .intelligence {
+            width: 48%;
+            height: 100%;
+            background: #a1a1a1;
+            box-shadow: 5px 5px 10px #126a58;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/systemManagement/index.vue b/src/views/systemManagement/index.vue
new file mode 100644
index 0000000..1804d1c
--- /dev/null
+++ b/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: 15% !important; /* 控制侧边导航栏宽度 */
+    height: 100%;
+  }
+  .el-main {
+    margin: 16px 15px 5px 15px; /* 固定都给15px */
+    background: #fff;
+  }
+}
+</style>
\ No newline at end of file