路由优化

src/router/platform.js

@@ -1,6 +1,6 @@
 export default {
   path: "platform",
-  component: () => import("@/views/platform/index.vue"),
+  component: () => import("@/views/platformSection/index.vue"),
   name: "platform",
   meta: {
     keepAlive: true,
@@ -13,13 +13,66 @@ export default {
   children: [
     {
       path: "home",
-      component: () => import("@/views/platform/home/index.vue"),
+      component: () => import("@/views/platformSection/home/index.vue"),
       name: "home",
       meta: {
         keepAlive: true,
         isAuth: true,
         title: "平台管控-首页"
       }
+    },
+    {
+      path: "regionManage",
+      component: () =>
+        import("@/views/platformSection/regionManage/region/index.vue"),
+      name: "regionManage",
+      meta: {
+        keepAlive: true,
+        isAuth: true,
+        title: "平台管控-区域管理"
+      }
+    },
+    {
+      path: "admin",
+      component: () =>
+        import("@/views/platformSection/regionManage/admin/index.vue"),
+      name: "admin",
+      meta: {
+        keepAlive: true,
+        isAuth: true,
+        title: "平台管控-管理员"
+      }
+    },
+    {
+      path: "whitelistLibrary",
+      component: () =>
+        import("@/views/platformSection/networkManage/whitelistLibrary.vue"),
+      name: "whitelistLibrary",
+      meta: {
+        keepAlive: true,
+        isAuth: true,
+        title: "平台管控-白名单库"
+      }
+    },
+    {
+      path: "deviceExport",
+      component: () => import("@/views/platformSection/log/deviceExport.vue"),
+      name: "deviceExport",
+      meta: {
+        keepAlive: true,
+        isAuth: true,
+        title: "平台管控-设备导出"
+      }
+    },
+    {
+      path: "notice",
+      component: () => import("@/views/platformSection/notice/index.vue"),
+      name: "notice",
+      meta: {
+        keepAlive: true,
+        isAuth: true,
+        title: "平台管控-公告"
+      }
     }
   ]
 };

src/router/region.js

@@ -1,6 +1,6 @@
 export default {
   path: "region",
-  component: () => import("@/views/region/index.vue"),
+  component: () => import("@/views/regionSection/index.vue"),
   name: "region",
   meta: {
     keepAlive: true,
@@ -13,7 +13,7 @@ export default {
   children: [
     {
       path: "home",
-      component: () => import("@/views/region/home/index.vue"),
+      component: () => import("@/views/regionSection/home/index.vue"),
       name: "home",
       meta: {
         keepAlive: true,

src/views/platform/index.vue

@@ -1,16 +0,0 @@
-<template>
-  <div>
-    <router-view></router-view>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {};
-  },
-  methods: {}
-};
-</script>
-
-<style lang="less" scoped></style>

src/views/platformSection/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="section_root">
+    <div class="section_header">
+      <div class="module_list">
+        <router-link tag="div" to="/platform/home" class="module_item">
+          <span>首页</span>
+        </router-link>
+        <div
+          :class="[
+            'module_item drop_down',
+            platformManageSelected ? 'selected' : ''
+          ]"
+        >
+          <span class="module_title">区域管理</span>
+          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
+          <div class="drop_down_list" v-if="routeDropdown">
+            <router-link
+              @click.native="routeDropdownChange()"
+              tag="div"
+              to="/platform/regionManage"
+              class="drop_down_list_item"
+              >区域管理</router-link
+            >
+            <router-link
+              @click.native="routeDropdownChange()"
+              tag="div"
+              to="/platform/admin"
+              class="drop_down_list_item"
+              >管理员</router-link
+            >
+          </div>
+        </div>
+        <div
+          :class="[
+            'module_item drop_down',
+            networkManageSelected ? 'selected' : ''
+          ]"
+        >
+          <span class="module_title">网络管理</span>
+          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
+          <div class="drop_down_list" v-if="routeDropdown">
+            <router-link
+              @click.native="routeDropdownChange()"
+              tag="div"
+              to="/platform/whitelistLibrary"
+              class="drop_down_list_item"
+              >白名单库</router-link
+            >
+          </div>
+        </div>
+        <div
+          :class="[
+            'module_item drop_down',
+            logManageSelected ? 'selected' : ''
+          ]"
+        >
+          <span class="module_title">日志</span>
+          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
+          <div class="drop_down_list" v-if="routeDropdown">
+            <router-link
+              @click.native="routeDropdownChange()"
+              tag="div"
+              to="/platform/deviceExport"
+              class="drop_down_list_item"
+              >设备导出</router-link
+            >
+          </div>
+        </div>
+        <router-link tag="div" to="/platform/notice" class="module_item">
+          <span>公告</span>
+        </router-link>
+      </div>
+    </div>
+    <div class="section_main">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      routeDropdown: true
+    };
+  },
+  computed: {
+    // 区域管理路由选中
+    platformManageSelected() {
+      return (
+        this.$route.path.includes("/platform/regionManage") ||
+        this.$route.path.includes("/platform/admin")
+      );
+    },
+    // 网络管理路由选中
+    networkManageSelected() {
+      return this.$route.path.includes("/platform/whitelistLibrary");
+    },
+    // 日志路由选中
+    logManageSelected() {
+      return this.$route.path.includes("/platform/deviceExport");
+    }
+  },
+  methods: {
+    routeDropdownChange() {
+      this.routeDropdown = false;
+      setTimeout(() => {
+        this.routeDropdown = true;
+      }, 500);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.section_root {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .section_header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 10px 16px;
+    padding: 13px 20px;
+    border: 1px solid #e9f0f9;
+    border-radius: 15px;
+    background-color: #fff;
+    .module_list {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .module_item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 16px;
+        padding: 6px 10px;
+        font-size: 16px;
+        line-height: 20px;
+        cursor: pointer;
+        &.drop_down {
+          position: relative;
+          cursor: default;
+          .drop_down_list {
+            display: none;
+            position: absolute;
+            top: 32px;
+            left: 0;
+            padding: 10px 0;
+            min-width: 100px;
+            color: #253a70;
+            font-size: 14px;
+            font-weight: normal;
+            border-radius: 4px;
+            background: #ffffff;
+            box-shadow: 0 8px 30px 0 #bcc9e380;
+            z-index: 999;
+            .drop_down_list_item {
+              margin: 0 6px;
+              padding: 0 10px;
+              white-space: nowrap;
+              line-height: 35px;
+              border-radius: 8px;
+              color: #798cb5;
+              cursor: pointer;
+              &.router-link-active,
+              &:hover {
+                color: #339dff;
+                background-color: #f3f4fc;
+              }
+            }
+          }
+          &:hover {
+            .drop_down_list {
+              display: block;
+            }
+          }
+        }
+        &.router-link-active,
+        &.selected {
+          background-color: #339dff;
+          color: #fff;
+          border-radius: 4px;
+        }
+        &:hover {
+          .arrow_dropdown {
+            transform: rotate(180deg);
+          }
+        }
+        .arrow_dropdown {
+          transition: all 0.2s ease-in-out;
+        }
+        .module_title {
+          margin-right: 4px;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+  .section_main {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 80px);
+    overflow: auto;
+  }
+}
+</style>

src/views/regionSection/index.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="section_root">
+    <div class="section_header">
+      <div class="module_list">
+        <router-link tag="div" to="/region/home" class="module_item">
+          <span>首页</span>
+        </router-link>
+        <div
+          :class="[
+            'module_item drop_down',
+            platformManageSelected ? 'selected' : ''
+          ]"
+        >
+          <span class="module_title">区域管理</span>
+          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
+          <div class="drop_down_list" v-if="routeDropdown">
+            <router-link
+              @click.native="routeDropdownChange()"
+              tag="div"
+              to="/region/regionManage"
+              class="drop_down_list_item"
+              >区域管理</router-link
+            >
+            <router-link
+              @click.native="routeDropdownChange()"
+              tag="div"
+              to="/region/admin"
+              class="drop_down_list_item"
+              >管理员</router-link
+            >
+          </div>
+        </div>
+        <div
+          :class="[
+            'module_item drop_down',
+            networkManageSelected ? 'selected' : ''
+          ]"
+        >
+          <span class="module_title">网络管理</span>
+          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
+          <div class="drop_down_list" v-if="routeDropdown">
+            <router-link
+              @click.native="routeDropdownChange()"
+              tag="div"
+              to="/region/whitelistLibrary"
+              class="drop_down_list_item"
+              >白名单库</router-link
+            >
+          </div>
+        </div>
+        <div
+          :class="[
+            'module_item drop_down',
+            logManageSelected ? 'selected' : ''
+          ]"
+        >
+          <span class="module_title">日志</span>
+          <Icon class="arrow_dropdown" type="md-arrow-dropdown" :size="20" />
+          <div class="drop_down_list" v-if="routeDropdown">
+            <router-link
+              @click.native="routeDropdownChange()"
+              tag="div"
+              to="/region/deviceExport"
+              class="drop_down_list_item"
+              >设备导出</router-link
+            >
+          </div>
+        </div>
+        <router-link tag="div" to="/region/notice" class="module_item">
+          <span>公告</span>
+        </router-link>
+      </div>
+    </div>
+    <div class="section_main">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      routeDropdown: true
+    };
+  },
+  computed: {
+    // 区域管理路由选中
+    platformManageSelected() {
+      return (
+        this.$route.path.includes("/region/regionManage") ||
+        this.$route.path.includes("/region/admin")
+      );
+    },
+    // 网络管理路由选中
+    networkManageSelected() {
+      return this.$route.path.includes("/region/whitelistLibrary");
+    },
+    // 日志路由选中
+    logManageSelected() {
+      return this.$route.path.includes("/region/deviceExport");
+    }
+  },
+  methods: {
+    routeDropdownChange() {
+      this.routeDropdown = false;
+      setTimeout(() => {
+        this.routeDropdown = true;
+      }, 500);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.section_root {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .section_header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 10px 16px;
+    padding: 13px 20px;
+    border: 1px solid #e9f0f9;
+    border-radius: 15px;
+    background-color: #fff;
+    .module_list {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .module_item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 16px;
+        padding: 6px 10px;
+        font-size: 16px;
+        line-height: 20px;
+        cursor: pointer;
+        &.drop_down {
+          position: relative;
+          cursor: default;
+          .drop_down_list {
+            display: none;
+            position: absolute;
+            top: 32px;
+            left: 0;
+            padding: 10px 0;
+            min-width: 100px;
+            color: #253a70;
+            font-size: 14px;
+            font-weight: normal;
+            border-radius: 4px;
+            background: #ffffff;
+            box-shadow: 0 8px 30px 0 #bcc9e380;
+            z-index: 999;
+            .drop_down_list_item {
+              margin: 0 6px;
+              padding: 0 10px;
+              white-space: nowrap;
+              line-height: 35px;
+              border-radius: 8px;
+              color: #798cb5;
+              cursor: pointer;
+              &.router-link-active,
+              &:hover {
+                color: #339dff;
+                background-color: #f3f4fc;
+              }
+            }
+          }
+          &:hover {
+            .drop_down_list {
+              display: block;
+            }
+          }
+        }
+        &.router-link-active,
+        &.selected {
+          background-color: #339dff;
+          color: #fff;
+          border-radius: 4px;
+        }
+        &:hover {
+          .arrow_dropdown {
+            transform: rotate(180deg);
+          }
+        }
+        .arrow_dropdown {
+          transition: all 0.2s ease-in-out;
+        }
+        .module_title {
+          margin-right: 4px;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+  .section_main {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 80px);
+    overflow: auto;
+  }
+}
+</style>

src/views/schoolSection/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/schoolSection/regionManage/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped></style>