Merge branch 'master' of http://39.105.126.192:3000/DR3_web/iot-front-ui.git

# Conflicts:
#	src/data/json/menuList.json

src/components/home/ContainerAside.vue

@@ -1,9 +1,10 @@
 <script>
+import {requireImg} from "@/utils/requireImg";
 
 export default {
   data() {
     return {
-      title: '',
+      selectedKeys: [],
       highLight: {backgroundColor: '#e9f6fd'},
       routers: [],
       menuList: [],
@@ -12,49 +13,37 @@ export default {
   },
   mounted() {
     let app = this;
-    // let ele = document.getElementsByClassName('home-page')[0];
-    // this.$util.eleResizeListener(ele, function () {
-    //   let height = ele.clientHeight;
-    //   app.height = height+'px'
-    // })
-
     this.routers = this.$router.options.routes;
-    this.$nextTick(()=>{
+    this.$nextTick(() => {
       app.getCurrMenuList()
     })
 
   },
   methods: {
+    requireImg,
     getCurrMenuList() {
       let arr = this.$route.matched;
-      let route = this.routers;
-      let num = arr.length-1;
-      if (arr.length===2) {
-        num = 2
-      }
-      for (let i = 0; i < num; i++) {
-        let obj = route.find((e) => (e.name == arr[i].name));
+      let route = this.routers[0].children;
+      if (arr.length>1) {
+        let obj = route.find((e) => (e.path == arr[1].path));
         route = obj.children;
-        this.title = obj.meta.breadcrumb;
       }
       this.menuList = JSON.parse(JSON.stringify(route))
-      if (this.menuList.length>0 && arr.length<=2) {
-        this.handleClick(this.menuList[0])
-      } else {
-        for (let obj of this.menuList) {
-          obj.selected = false;
-          if (obj.path == this.$route.path) {
-            obj.selected = true;
-          }
+      this.selectedKeys = [];
+      if (arr.length>2) {
+        for (let i = 0; i < arr.length; i++) {
+          this.selectedKeys.push(arr[i].path)
+        }
+      } else if (arr.length===2) {
+        if (this.menuList.length>0 && !this.menuList[0].children) {
+          this.handleClick(this.menuList[0]);
+          this.selectedKeys.push(this.menuList[0].path)
         }
       }
     },
     handleClick(item) {
-      for (let obj of this.menuList) {
-        obj.selected = false;
-      }
-      item.selected = true;
-      this.$router.push(item.path)
+      let path = item.path?item.path:item.key
+      this.$router.push({path: path})
       this.$forceUpdate()
     }
   }
@@ -63,43 +52,82 @@ export default {
 
 <template>
   <div class="containerAside" :style="{height: '100%'}">
-    <div class="containerAside-title">
-      {{ title }}
-    </div>
-    <div class="containerAside-item" :style="item.selected?highLight:{}" v-for="item in menuList" :key="item.name" @click="handleClick(item)">
-      {{ item.meta.breadcrumb }}
-    </div>
+    <a-menu
+        style="width: 100%;padding-top: 8px;height: 100%"
+        mode="inline"
+        theme="dark"
+        v-model:selectedKeys="selectedKeys"
+        @click="handleClick"
+    >
+      <template v-for="item in menuList">
+        <a-menu-item  class="menuItem" :key="item.path" :route="item.key" v-if="!item.children">
+        <span class="anticon" style="vertical-align: text-top">
+          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
+        </span>
+          <span >
+            {{ item.meta.breadcrumb }}
+          </span>
+        </a-menu-item>
+
+        <a-sub-menu :key="item.name" v-else>
+          <template #title>
+            <span class="anticon" style="vertical-align: text-top">
+          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
+        </span>
+            <span>{{ item.meta.breadcrumb }}</span>
+          </template>
+          <a-menu-item v-for="subItem in item.children" :key="subItem.path" :route="subItem.path">
+            <span class="anticon" style="vertical-align: text-top">
+          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
+        </span>
+            <span>{{ subItem.meta.breadcrumb }}</span>
+          </a-menu-item>
+        </a-sub-menu>
+      </template>
+
+    </a-menu>
   </div>
 </template>
 
 <style lang="less" scoped>
+@menu-dark-bg: #ffffff;
+@menu-dark-submenu-bg: #ffffff;
+@menu-dark-color: #808080;
+@menu-dark-arrow-color: #808080;
+@menu-dark-highlight-color: #808080;
+@menu-dark-item-active-bg: #e5f4ff;
+@menu-dark-selected-item-icon-color: #808080;
+@menu-dark-selected-item-text-color: #808080;
 .containerAside {
-  width: 220px;
+  width: 170px;
   height: 100%;
   border-right: 1px solid #eeeeee;
   display: inline-block;
   vertical-align: top;
-  .containerAside-title {
-    text-align: center;
-    height: 60px;
-    line-height: 60px;
-    width: 100%;
-    background-color: #d8d8d8;
-    cursor: default;
+
+  .menuItem {
+    margin: 15px 0;
+  }
+  /deep/ .ant-menu-sub {
+    box-shadow: none !important;
+    background-color: white;
+    margin: 0 !important;
+  }
+  /deep/ .ant-menu-item-selected {
+    color: @menu-dark-selected-item-text-color !important;
   }
-  .containerAside-item {
-    text-align: center;
-    line-height: 50px;
-    height: 50px;
-    width: 100%;
-    margin: 8px 0;
-    cursor: pointer;
+  /deep/ .ant-menu-dark .ant-menu-submenu-title:hover {
+    color: @menu-dark-selected-item-text-color;
   }
-  .containerAside-item:hover {
-    background-color: #eeeeee;
+  .ant-menu-inline-collapsed > .ant-menu-item {
+    padding: 0 !important;
+    margin-left: 0 !important;
+    padding-left: 33% !important;
   }
-  .containerAside-item .selected {
-    background-color: #e9f6fd;
+  /deep/ .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item {
+    padding: 0 !important;
+    margin-left: 0 !important;
+    padding-left: 33% !important;
   }
 }
 </style>

src/components/home/HomeAside.vue

@@ -1,5 +1,6 @@
 <script>
 import menuList from '@/data/json/menuList.json'
+import {requireImg} from "@/utils/requireImg";
 
 export default {
   props: {
@@ -7,6 +8,8 @@ export default {
   },
   data() {
     return {
+      selectedKey: [],
+      iconVerticalAlign: '',
       asideStyle: {},
       menuList,
     }
@@ -19,28 +22,48 @@ export default {
   mounted() {
     this.suitHeight(this.collapse)
   },
+  emits: ['update:collapse'],
+  setup(props, context) {
+    const methods = {
+      toggleCollapse() {
+        const val = !props.collapse
+        context.emit('update:collapse', val)
+      },
+    }
+    return methods
+  },
   methods: {
+    requireImg,
     suitHeight(val) {
+      this.getCurrRoute()
       this.$nextTick(() => {
         // let height = document.getElementsByClassName('home')[0].clientHeight
         this.asideStyle = { height: `100%` }
         if (val)
           this.asideStyle.width = '60px'
+        if (this.collapse) {
+          document.getElementsByClassName("aside-collapse")[0].style.textAlign = 'center'
+          document.getElementsByClassName("aside-collapse")[0].style.marginLeft = '0'
+          this.iconVerticalAlign = '';
+        } else {
+          document.getElementsByClassName("aside-collapse")[0].style.textAlign = ''
+          document.getElementsByClassName("aside-collapse")[0].style.marginLeft = '5%'
+          this.iconVerticalAlign = 'text-top';
+        }
       })
     },
-    handleSelected(item) {
-      if (item.key=='nav') {
-        this.$router.push({name: 'nav'})
-      } else {
-        if (item && item.key!=='') {
-          let obj = this.menuList[item.key]
-          this.$router.push({path: obj.router})
-        } else {
-          this.$router.push({name: 'empty'})
+    getCurrRoute() {
+      this.$nextTick(()=>{
+        if (this.$route.matched.length>1) {
+          this.selectedKey = [this.$route.matched[1].path+'']
         }
-      }
+        this.$forceUpdate()
+      })
 
     },
+    handleSelected(item) {
+      this.$router.push({path: item.key})
+    },
   },
 }
 </script>
@@ -51,13 +74,25 @@ export default {
       class="menu"
       theme="dark"
       :style="asideStyle"
-      :default-selected-keys="['1']"
+      v-model:selectedKeys="selectedKey"
       mode="inline"
       @select="handleSelected"
     >
-      <a-menu-item v-for="(item,index) in menuList" :key="index" :route="item.key">
-        <span class="anticon"><i-icon-park-outline-more-app /></span>
-        <span>
+      <a-menu-item-group key="g1">
+        <template slot="title">
+          <div style="height: 12px"></div>
+          <div class="aside-collapse" style="color: white; cursor: pointer;margin-left: 5%" @click="toggleCollapse">
+            <a-icon style="font-size: 18px;vertical-align: text-top" type="menu-fold" v-if="!collapse" />
+            <a-icon style="font-size: 18px;vertical-align: text-top;" type="menu-unfold" v-if="collapse" />
+            <span style="margin-left: 15px;vertical-align: top" v-if="!collapse">展开/收起</span>
+          </div>
+        </template>
+      </a-menu-item-group>
+      <a-menu-item v-for="item in menuList" :key="item.router" >
+        <span class="anticon" :style="{verticalAlign: iconVerticalAlign}">
+          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
+        </span>
+        <span >
             {{ item.name }}
           </span>
       </a-menu-item>
@@ -66,9 +101,26 @@ export default {
 </template>
 
 <style lang="less" scoped>
+@menu-dark-bg: #266a99;
+@menu-dark-submenu-bg: #266a99;
+@menu-dark-color: #fff;
+@menu-dark-arrow-color: #fff;
+@menu-dark-highlight-color: #fff;
+.aside-collapse {
+  width: 100%;
+}
+.aside-collapse:hover {
+  span {
+    color: #2ba8e4;
+  }
+  i {
+    color: #2ba8e4;
+  }
+}
 .aside {
   //width: 100%;
   height: 100%;
+
   /deep/ .ant-menu-sub {
     box-shadow: none !important;
   }

src/components/home/HomeHeader.vue

@@ -70,18 +70,20 @@ export default {
 
     <div v-show="isLogin" class="userInfo">
       <a-avatar class="user-avatar" icon="user" />
-      <div class="userDetail">
-        <div class="username">
-          <a-button type="link" style="color: white">
-            Admin
-          </a-button>
-        </div>
-        <div class="role">
-          <a-tag color="orange">
-            系统管理员
-          </a-tag>
-        </div>
-      </div>
+      <a-button class="usernameBtn" type="link" style="color: white;font-size: 18px">
+        <a-icon type="user"></a-icon>
+        <span style="display: inline-block;margin-left: 8px">admin</span>
+      </a-button>
+      <!--<div class="userDetail">-->
+        <!--<div class="username">-->
+        <!--  <a-button class="usernameBtn" type="link" style="color: white;font-size: 18px">-->
+        <!--    <div style="padding: 0 5px 0 0">-->
+        <!--      <a-icon type="user"></a-icon>-->
+        <!--      <span style="display: inline-block;margin-left: 8px">admin</span>-->
+        <!--    </div>-->
+        <!--  </a-button>-->
+        <!--</div>-->
+      <!--</div>-->
     </div>
   </div>
 </template>
@@ -130,32 +132,29 @@ export default {
   }
 
   .userInfo {
-    margin: 0 15px;
+    height: 60px;
+    padding: 0 15px;
     .user-avatar {
+      margin-top: 15px;
+      margin-right: 3px;
       color: #f56a00;
       background-color: #fde3cf;
-      margin: 5px;
-      width: 50px;
-      height: 50px;
-      font-size: 25px;
-      line-height: 50px;
     }
-    .userDetail {
-      margin-left: 10px;
-      .username {
-        position: relative;
-        height: 25px;
-        line-height: 25px;
-      }
-      .role{
-        margin-top: 5px;
-        height: 25px;
-        line-height: 25px;
-      }
-
+    .usernameBtn {
+      margin-top: 15px !important;
+      border-radius: 15px;
+    }
+    .usernameBtn:hover {
+      background-color: #3c9cd3;
     }
   }
   .header-btn {
+    .icon {
+      font-size: 20px;
+      line-height: 18px;
+      text-align: center;
+      padding-top: 13px;
+    }
     margin-left: auto;
   }
 

src/data/json/menuList.json

@@ -2,7 +2,7 @@
   {
     "name": "智能看板",
     "router": "/dashboard",
-    "icon": "",
+    "icon": "aside/dashboard.png",
     "children": [
       {
         "name": "人员画像",
@@ -24,7 +24,7 @@
   {
     "name": "智享生活",
     "router": "/life",
-    "icon": "",
+    "icon": "aside/life.png",
     "children": [
       {
         "name": "智慧餐厅",
@@ -51,7 +51,7 @@
   {
     "name": "智慧办公",
     "router": "/work",
-    "icon": "",
+    "icon": "aside/work.png",
     "children": [
       {
         "name": "楼层概览",
@@ -78,7 +78,7 @@
   {
     "name": "数智双碳",
     "router": "/doubleCarbon",
-    "icon": "",
+    "icon": "aside/carbon.png",
     "children": [
       {
         "name": "双碳概览",
@@ -105,7 +105,7 @@
   {
     "name": "智慧运营",
     "router": "/business",
-    "icon": "",
+    "icon": "aside/operation.png",
     "children": [
       {
         "name": "资产管理",
@@ -126,8 +126,8 @@
   },
   {
     "name": "智慧安防",
-    "router": "",
-    "icon": "",
+    "router": "/security",
+    "icon": "aside/security.png",
     "children": [
       {
         "name": "安防人员",
@@ -148,8 +148,8 @@
   },
   {
     "name": "智慧场景",
-    "router": "",
-    "icon": "",
+    "router": "/scene",
+    "icon": "aside/scene.png",
     "children": [
       {
         "name": "智•会议",
@@ -170,8 +170,8 @@
   },
   {
     "name": "数据报表",
-    "router": "",
-    "icon": "",
+    "router": "/report",
+    "icon": "aside/report.png",
     "children": [
       {
         "name": "报表",
@@ -187,8 +187,8 @@
   },
   {
     "name": "权限下达",
-    "router": "",
-    "icon": "",
+    "router": "/auth",
+    "icon": "aside/auth.png",
     "children": [
       {
         "name": "角色权限",

src/style/common.css

@@ -1,5 +1,5 @@
 .pageContainer-body {
-  width: calc(100% - 220px);
+  width: calc(100% - 175px);
   height: 100%;
   display: inline-block;
 

src/views/HomeView.vue

@@ -9,12 +9,12 @@
         <a-layout-sider
           v-model="collapse"
           :trigger="null"
-          width="200"
+          width="160"
           style="background: #fff"
           :collapsible="true"
           :collapsed-width="60"
         >
-          <HomeAside :collapse="collapse" />
+          <HomeAside :collapse.sync="collapse" />
         </a-layout-sider>
         <!-- 内容 -->
         <a-layout-content class="home-page">
@@ -36,7 +36,7 @@ export default {
   },
   data() {
     return {
-      collapse: true, // 侧边栏是否收起
+      collapse: false, // 侧边栏是否收起
       asideWidth: "16%",
       contentWidth: "84%",
       contentHeight: 450,
@@ -52,6 +52,9 @@ export default {
   },
   mounted() {
     this.suitHeight();
+    if (this.$route.matched.length===1) {
+      this.$router.push({path: '/dashboard'})
+    }
   },
   methods: {
     suitHeight() {