排版进度

src/assets/css/index.scss

@@ -133,7 +133,7 @@ ul li {
     // margin: 20px;
     // margin-top: 70px;
     background: #fff;
-    min-height: calc(100vh - 142px)
+    min-height: calc(100vh - 140px)
 }
 
 .filter-container {
@@ -215,14 +215,14 @@ ul li {
 // 基本信息
 .basicInfo {
     width: 100%;
-    height: calc(100vh - 180px);
+    height: calc(100vh - 196px);
     // border: 1px solid pink;
     display: block;
     overflow-y: auto;
 }
 
 .siteManage-main {
-    padding: 20px;
+    padding: 15px;
 }
 
 .groupInfo,

src/layout/index.vue

@@ -233,6 +233,7 @@ export default {
     color:#fff;
     position:fixed;top:0;
     width:100%;
+    z-index:999;
     height:@vab-header-height;
     line-height:@vab-header-height;
     .ant-col + .ant-col {

src/layout/vab-avatar/index.vue

@@ -6,11 +6,7 @@
     </span>
 
     <span class="goPanelBlock">
-      <!-- <a href="">电力大屏</a> -->
-
-      <router-link to="/home" class="logo-url">
-        <a>电力大屏</a>
-      </router-link>
+      <a  @click="goPanel">电力大屏</a>
     </span>
 
     <a-dropdown>
@@ -34,6 +30,7 @@
 
       <template v-slot:overlay>
         <a-menu>
+           <a-menu-item @click="goPerCenter">个人中心</a-menu-item>
           <a-menu-item @click="logout">退出登录</a-menu-item>
         </a-menu>
       </template>
@@ -91,6 +88,23 @@ export default {
     }, 0)
   },
   methods: {
+
+    goPerCenter(){
+      this.$router.push('/perCenter/index')
+
+    },
+
+    goPanel(){
+      
+      if (window.location.host.indexOf('localhost') != -1) {
+
+     
+            window.location.href = "http://localhost:8080/#/home";
+            
+        } else {
+            window.location.href = "http://101.133.214.75:13201/";
+        }
+    },
     goAlarmingPage() {
       this.$router.push('/alarmManage/index')
     },

src/layout/vab-tabs/index.vue

@@ -1,20 +1,7 @@
 <template>
   <div class="vab-tabs">
     <div class="vab-tabs-left-panel">
-      <!-- <a-tabs
-        @tab-click="handleTabClick"
-        @edit="handleTabRemove"
-        v-model:activeKey="tabActive"
-        hide-add
-        type="editable-card"
-      >
-        <a-tab-pane
-          v-for="item in visitedRoutes"
-          :key="item.fullPath"
-          :closable="!isAffix(item)"
-          :tab="item.meta.title"
-        ></a-tab-pane>
-      </a-tabs> -->
+      
 
 
       <!-- 缩进按钮 start -->
@@ -22,8 +9,8 @@
         style="
           display: inline-block;
           float: left;
-          margin-top: 8px;
-          margin-right: 6px;
+          margin-top: 14px;
+    margin-right: 11px;
         "
       >
         <menu-unfold-outlined
@@ -46,7 +33,7 @@
         </el-breadcrumb-item>
       </el-breadcrumb> -->
 
-       <el-breadcrumb separator="/">
+       <!-- <el-breadcrumb separator="/">
         <el-breadcrumb-item
           v-for="(item, ind) in breadListLast"
           :key="ind"
@@ -54,7 +41,25 @@
         >
           {{ item.title }}
         </el-breadcrumb-item>
-      </el-breadcrumb>
+      </el-breadcrumb> -->
+
+
+      <a-tabs
+        @tab-click="handleTabClick"
+        @edit="handleTabRemove"
+        v-model:activeKey="tabActive"
+        hide-add
+        type="editable-card"
+      >
+        <a-tab-pane
+          v-for="item in visitedRoutes"
+          :key="item.fullPath"
+          :closable="!isAffix(item)"
+          :tab="item.meta.title"
+        ></a-tab-pane>
+      </a-tabs>
+
+
       
     </div>
     <!-- 面包屑end -->
@@ -114,9 +119,13 @@ export default {
     }),
   },
   watch: {
-    $route() {
+    $route(route) {
       this.loadChange()
+      this.addTabs(route)
+
+      
     },
+    
   },
   created() {
     this.initAffixTabs(this.routes)
@@ -124,6 +133,8 @@ export default {
     this.loadChange()
   },
   methods: {
+
+
     loadChange() {
       this.breadListLast = []
 
@@ -152,7 +163,9 @@ export default {
       })
     },
     async addTabs(tag) {
-      if (tag.name && tag.meta && tag.meta.tagHidden !== true) {
+  
+      
+      if ( tag.meta && tag.meta.tagHidden !== true) {
         let matched = [tag.name]
         if (tag.matched) matched = tag.matched.map((item) => item.name)
         await this.addVisitedRoute({
@@ -250,8 +263,12 @@ export default {
     width: 52px;
   }
   .ant-tabs {
+    height:50px;
+    line-height:50px;
     &-bar {
-      margin: 0 !important;
+      // margin: 0 !important;
+      margin-top:9px;
+      border-bottom:0px solid red
     }
     &-tab {
       height: 32px !important;

src/main.js

@@ -58,15 +58,15 @@ router.beforeEach((to) => {
         store.commit("publicSiteList");
         store.commit('publicDeviceList')
     }
-    if (to.path == '/home') {
-        if (window.location.host.indexOf('localhost') != -1) {
-            window.location.href = "http://localhost:8080/#/home";
-            // } else if (window.location.host.indexOf('pcdev.ewoogi.com') != -1) {
-            //     window.location.href = "https://pcdev.ewoogi.com/vuefiv#/home";
-        } else {
-            window.location.href = "http://101.133.214.75:13201/";
-        }
-    }
+    // if (to.path == '/home') {
+    //     if (window.location.host.indexOf('localhost') != -1) {
+    //         window.location.href = "http://localhost:8080/#/home";
+    //         // } else if (window.location.host.indexOf('pcdev.ewoogi.com') != -1) {
+    //         //     window.location.href = "https://pcdev.ewoogi.com/vuefiv#/home";
+    //     } else {
+    //         window.location.href = "http://101.133.214.75:13201/";
+    //     }
+    // }
 })
 
 router.afterEach((to) => {

src/router/index.js

@@ -36,6 +36,63 @@ export const constantRoutes = [{
             import ('@/views/404'),
         hidden: true,
     },
+
+    // {
+
+    //     path: '/index',
+    //     component: () =>
+    //         import ('@/views/index/index'),
+    //     hidden: true,
+    // },
+
+    {
+        path: '/index',
+        redirect: '/index/index',
+        meta: {
+            title: '数据看板',
+            icon: 'home',
+
+        },
+        component: Layout,
+        children: [{
+            meta: {
+                title: '数据看板',
+                icon: 'home',
+                affix: true,
+            },
+            path: '/index/index',
+            component: () =>
+                import ('@/views/index/index'),
+        }, ]
+    },
+
+
+    {
+        path: '/perCenter',
+        redirect: '/perCenter/index',
+        meta: {
+            title: '个人中心',
+            icon: 'home',
+
+        },
+        hidden: true,
+        component: Layout,
+        children: [{
+            meta: {
+                title: '个人中心',
+                icon: 'home',
+                affix: false,
+            },
+            path: '/perCenter/index',
+            component: () =>
+                import ('@/views/perCenter/index'),
+        }, ]
+    },
+
+
+
+
+
     // { path: '*', redirect: '/404', hidden: true }
 ]
 export const asyncRoutes = [
@@ -63,6 +120,28 @@ export const asyncRoutes = [
     // },
 
 
+    {
+        path: '/',
+        redirect: '/alarmManage/index',
+        meta: {
+            title: '告警管理',
+            icon: 'alarmManage',
+            affix: true,
+        },
+        component: Layout,
+        children: [{
+            meta: {
+                title: '告警管理',
+                icon: 'alarmManage',
+            },
+            path: '/alarmManage/index',
+            component: () =>
+                import ('@/views/alarmManage/index'),
+        }, ]
+    },
+
+
+
     // {
     //     path: 'external-link',
     //     component: Layout,

src/store/modules/routes.js

@@ -56,15 +56,16 @@ const actions = {
             store.state.auth = 1
 
         }
+        data[0].meta.affix = false
 
-        data.unshift({
-            path: 'external-link',
-            component: 'Layout',
-            children: [{
-                path: '/home',
-                meta: { title: '数据看板', icon: 'home', }
-            }]
-        }, )
+        // data.unshift({
+        //     path: 'external-link',
+        //     component: 'Layout',
+        //     children: [{
+        //         path: '/home',
+        //         meta: { title: '数据看板', icon: 'home', affix: false }
+        //     }]
+        // }, )
         data.forEach(function(item) {
             if (item.children.length > 1) {
                 item.children.forEach(function(i) {

src/store/modules/tagsBar.js

@@ -4,143 +4,148 @@
  */
 
 const state = () => ({
-  visitedRoutes: [],
+    visitedRoutes: [],
 })
 const getters = {
-  visitedRoutes: (state) => state.visitedRoutes,
+    visitedRoutes: (state) => state.visitedRoutes,
 }
 const mutations = {
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 添加标签页
-   * @param {*} state
-   * @param {*} route
-   * @returns
-   */
-  addVisitedRoute(state, route) {
-    let target = state.visitedRoutes.find((item) => item.path === route.path)
-    if (target) {
-      if (route.fullPath !== target.fullPath) Object.assign(target, route)
-      return
-    }
-    state.visitedRoutes.push(Object.assign({}, route))
-  },
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 删除当前标签页
-   * @param {*} state
-   * @param {*} route
-   * @returns
-   */
-  delVisitedRoute(state, route) {
-    state.visitedRoutes.forEach((item, index) => {
-      if (item.path === route.path) state.visitedRoutes.splice(index, 1)
-    })
-  },
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 删除当前标签页以外其它全部多标签页
-   * @param {*} state
-   * @param {*} route
-   * @returns
-   */
-  delOthersVisitedRoutes(state, route) {
-    state.visitedRoutes = state.visitedRoutes.filter(
-      (item) => item.meta.affix || item.path === route.path
-    )
-  },
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 删除当前标签页左边全部多标签页
-   * @param {*} state
-   * @param {*} route
-   * @returns
-   */
-  delLeftVisitedRoutes(state, route) {
-    let index = state.visitedRoutes.length
-    state.visitedRoutes = state.visitedRoutes.filter((item) => {
-      if (item.name === route.name) index = state.visitedRoutes.indexOf(item)
-      return item.meta.affix || index <= state.visitedRoutes.indexOf(item)
-    })
-  },
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 删除当前标签页右边全部多标签页
-   * @param {*} state
-   * @param {*} route
-   * @returns
-   */
-  delRightVisitedRoutes(state, route) {
-    let index = state.visitedRoutes.length
-    state.visitedRoutes = state.visitedRoutes.filter((item) => {
-      if (item.name === route.name) index = state.visitedRoutes.indexOf(item)
-      return item.meta.affix || index >= state.visitedRoutes.indexOf(item)
-    })
-  },
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 删除全部多标签页
-   * @param {*} state
-   * @param {*} route
-   * @returns
-   */
-  delAllVisitedRoutes(state) {
-    state.visitedRoutes = state.visitedRoutes.filter((item) => item.meta.affix)
-  },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 添加标签页
+     * @param {*} state
+     * @param {*} route
+     * @returns
+     */
+    addVisitedRoute(state, route) {
+
+        let target = state.visitedRoutes.find((item) => item.path === route.path)
+        if (target) {
+            if (route.fullPath !== target.fullPath) Object.assign(target, route)
+            return
+        }
+
+        state.visitedRoutes.push(Object.assign({}, route))
+        console.log('state.visitedRoutes')
+        console.log(state.visitedRoutes)
+            // state.visitedRoutes = state.visitedRoutes.shift()
+    },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 删除当前标签页
+     * @param {*} state
+     * @param {*} route
+     * @returns
+     */
+    delVisitedRoute(state, route) {
+        state.visitedRoutes.forEach((item, index) => {
+            if (item.path === route.path) state.visitedRoutes.splice(index, 1)
+        })
+    },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 删除当前标签页以外其它全部多标签页
+     * @param {*} state
+     * @param {*} route
+     * @returns
+     */
+    delOthersVisitedRoutes(state, route) {
+        state.visitedRoutes = state.visitedRoutes.filter(
+            (item) => item.meta.affix || item.path === route.path
+        )
+    },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 删除当前标签页左边全部多标签页
+     * @param {*} state
+     * @param {*} route
+     * @returns
+     */
+    delLeftVisitedRoutes(state, route) {
+        let index = state.visitedRoutes.length
+        state.visitedRoutes = state.visitedRoutes.filter((item) => {
+            if (item.name === route.name) index = state.visitedRoutes.indexOf(item)
+            return item.meta.affix || index <= state.visitedRoutes.indexOf(item)
+        })
+    },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 删除当前标签页右边全部多标签页
+     * @param {*} state
+     * @param {*} route
+     * @returns
+     */
+    delRightVisitedRoutes(state, route) {
+        let index = state.visitedRoutes.length
+        state.visitedRoutes = state.visitedRoutes.filter((item) => {
+            if (item.name === route.name) index = state.visitedRoutes.indexOf(item)
+            return item.meta.affix || index >= state.visitedRoutes.indexOf(item)
+        })
+    },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 删除全部多标签页
+     * @param {*} state
+     * @param {*} route
+     * @returns
+     */
+    delAllVisitedRoutes(state) {
+        state.visitedRoutes = state.visitedRoutes.filter((item) => item.meta.affix)
+    },
 }
 const actions = {
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 添加标签页
-   * @param {*} { commit }
-   * @param {*} route
-   */
-  addVisitedRoute({ commit }, route) {
-    commit('addVisitedRoute', route)
-  },
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 删除当前标签页
-   * @param {*} { commit }
-   * @param {*} route
-   */
-  delVisitedRoute({ commit }, route) {
-    commit('delVisitedRoute', route)
-  },
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 删除当前标签页以外其它全部多标签页
-   * @param {*} { commit }
-   * @param {*} route
-   */
-  delOthersVisitedRoutes({ commit }, route) {
-    commit('delOthersVisitedRoutes', route)
-  },
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 删除当前标签页左边全部多标签页
-   * @param {*} { commit }
-   * @param {*} route
-   */
-  delLeftVisitedRoutes({ commit }, route) {
-    commit('delLeftVisitedRoutes', route)
-  },
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 删除当前标签页右边全部多标签页
-   * @param {*} { commit }
-   * @param {*} route
-   */
-  delRightVisitedRoutes({ commit }, route) {
-    commit('delRightVisitedRoutes', route)
-  },
-  /**
-   * @author chuzhixin 1204505056@qq.com
-   * @description 删除全部多标签页
-   * @param {*} { commit }
-   */
-  delAllVisitedRoutes({ commit }) {
-    commit('delAllVisitedRoutes')
-  },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 添加标签页
+     * @param {*} { commit }
+     * @param {*} route
+     */
+    addVisitedRoute({ commit }, route) {
+        commit('addVisitedRoute', route)
+    },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 删除当前标签页
+     * @param {*} { commit }
+     * @param {*} route
+     */
+    delVisitedRoute({ commit }, route) {
+        commit('delVisitedRoute', route)
+    },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 删除当前标签页以外其它全部多标签页
+     * @param {*} { commit }
+     * @param {*} route
+     */
+    delOthersVisitedRoutes({ commit }, route) {
+        commit('delOthersVisitedRoutes', route)
+    },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 删除当前标签页左边全部多标签页
+     * @param {*} { commit }
+     * @param {*} route
+     */
+    delLeftVisitedRoutes({ commit }, route) {
+        commit('delLeftVisitedRoutes', route)
+    },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 删除当前标签页右边全部多标签页
+     * @param {*} { commit }
+     * @param {*} route
+     */
+    delRightVisitedRoutes({ commit }, route) {
+        commit('delRightVisitedRoutes', route)
+    },
+    /**
+     * @author chuzhixin 1204505056@qq.com
+     * @description 删除全部多标签页
+     * @param {*} { commit }
+     */
+    delAllVisitedRoutes({ commit }) {
+        commit('delAllVisitedRoutes')
+    },
 }
-export default { state, getters, mutations, actions }
+export default { state, getters, mutations, actions }

src/vab/plugins/permissions.js

@@ -63,14 +63,16 @@ router.beforeEach(async(to, from, next) => {
                     })
 
                     if (accessRoutes[1].path != '/') {
-                        next(accessRoutes[1].path)
+
+                        next('/middle')
+                            // next(accessRoutes[1].path)
 
                     } else {
-                        router.push({
-                            path: '/middle'
-                        })
+                        // router.push({
+                        //     path: '/middle'
+                        // })
 
-                        // next('/middle')
+                        next('/middle')
 
                         // next({...to, replace: true })
 

src/views/dataManage/chainAnalysis/index.vue

@@ -352,15 +352,15 @@ export default defineComponent({
 
 .chainAnalysis {
   display: flex;
-  height: calc(100vh - 130px);
+  height: calc(100vh - 140px);
   // padding: 30px;
   // margin-top: 50px;
   .chainContent1 {
     background-color: #fff;
     width: 15%;
     height: 100%;
-    margin-right: 25px;
-    padding: 20px;
+    margin-right: 15px;
+    padding: 15px;
     min-width: 200px;
     // overflow-y: auto;
     .chainSwitch {
@@ -393,7 +393,7 @@ export default defineComponent({
     min-width: 845px;
     height: 100%;
     .chainEcharts {
-      height: calc(100vh - 192px);
+      height: calc(100vh - 202px);
       overflow-y: auto;
     }
     .chainDivOne {

src/views/dataManage/demandAnalysis/index.vue

@@ -62,7 +62,7 @@
           </el-button>
         </div>
       </div>
-       <div   v-loading="loading" style="  height: calc(100vh - 192px);
+       <div   v-loading="loading" style="  height: calc(100vh - 202px);
       overflow-y: auto;">
 
          <div class="demEcharTable" v-if="flag" >
@@ -307,15 +307,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 .demandAnalysis {
   display: flex;
-  height: calc(100vh - 130px);
+  height: calc(100vh - 140px);
   // padding: 30px;
   // margin-top: 50px;
   .demContent1 {
     background-color: #fff;
     width: 15%;
     height: 100%;
-    margin-right: 25px;
-    padding: 20px;
+    margin-right: 15px;
+    padding: 15px;
     min-width: 200px;
         overflow-y: auto;
     .demSwitch {

src/views/dataManage/energyReport/index.vue

@@ -336,15 +336,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 .energyReport {
   display: flex;
-  height: calc(100vh - 130px);
+  height: calc(100vh - 140px);
   // padding: 30px;
   // margin-top: 50px;
   .energContent1 {
     background-color: #fff;
     width: 15%;
     height: 100%;
-    margin-right: 25px;
-    padding: 20px;
+    margin-right: 15px;
+    padding: 15px;
     min-width: 200px;
         overflow-y: auto;
     .energSwitch {
@@ -375,7 +375,7 @@ export default defineComponent({
     min-width: 845px;
     height: 100%;
     .energEcharts {
-      height: calc(100vh - 192px);
+      height: calc(100vh - 202px);
       overflow-y: auto;
     }
     .energDivOne {

src/views/dataManage/sameAnalysis/index.vue

@@ -275,15 +275,15 @@ export default defineComponent({
 }
 .sameAnalysis {
   display: flex;
-  height: calc(100vh - 130px);
+  height: calc(100vh - 140px);
   // padding: 30px;
   // margin-top: 50px;
   .sameContent1 {
     background-color: #fff;
     width: 15%;
     height: 100%;
-    margin-right: 25px;
-    padding: 20px;
+    margin-right: 15px;
+    padding: 15px;
     min-width: 200px;
         // overflow-y: auto;
     .sameSwitch {
@@ -316,7 +316,7 @@ export default defineComponent({
     min-width: 845px;
     height: 100%;
      .sameEcharts {
-      height: calc(100vh - 192px);
+      height: calc(100vh - 202px);
       overflow-y: auto;
     }
     .sameDivOne {

src/views/deviceManage/powerEquip/index.vue

@@ -371,7 +371,7 @@ export default defineComponent({
 
 <style lang="scss">
 .powerEquip {
-  height: calc(100vh - 130px);
+  height: calc(100vh - 140px);
   min-width: 810px;
   // padding: 30px;
   // margin-top: 50px;

src/views/index/components/VersionInformation.vue

@@ -0,0 +1,135 @@
+<template>
+  <!-- <a-alert
+    :message="
+      '欢迎体验全网首个基于 vue ' +
+      dependencies['vue'] +
+      ' + ant-design-vue ' +
+      dependencies['ant-design-vue'] +
+      ' 开发的admin框架vue-admin-beautiful-antdv，vue3.0的流畅超乎了我们的想象，感谢尤雨溪、唐金州的开源项目我带来的灵感和帮助，vue-admin-beautiful-antdv同时支持电脑、平板、手机，希望实现一套代码即可帮助中小微企业快速实现项目落地，帮助前端小白快速入门vue前端框架搭建技术，迅速在工作中占据主导地位。'
+    "
+    type="success"
+    show-icon
+  /> -->
+
+  <a-card class="version-information" style="height:calc(100vh - 140px);margin-top:0">
+    <!-- <template v-slot:title>系统信息</template>
+    <template v-slot:extra>
+      <a href="#">部署时间{{ updateTime }}</a>
+    </template>
+    <div class="version-information-table">
+      <table>
+        <tr>
+          <td>标星</td>
+          <td>
+            <a
+              target="_blank"
+              href="https://github.com/chuzhixin/vue-admin-beautiful/tree/vue3.0-antdv"
+            >
+              <img
+                style="margin-right: 10px"
+                src="https://img.shields.io/github/stars/chuzhixin/vue-admin-beautiful?style=flat-square&label=Stars&logo=github"
+              />
+            </a>
+          </td>
+          <td>下载量统计</td>
+          <td>敬请期待！</td>
+        </tr>
+        <tr>
+          <td>vue</td>
+          <td>{{ dependencies['vue'] }}</td>
+          <td>@vue/cli</td>
+          <td>{{ devDependencies['@vue/cli-service'] }}</td>
+        </tr>
+        <tr>
+          <td>vuex</td>
+          <td>{{ dependencies['vuex'] }}</td>
+          <td>vue-router</td>
+          <td>{{ dependencies['vue-router'] }}</td>
+        </tr>
+        <tr>
+          <td>eslint-plugin-vue</td>
+          <td>{{ devDependencies['eslint-plugin-vue'] }}</td>
+          <td>axios</td>
+          <td>{{ dependencies['axios'] }}</td>
+        </tr>
+        <tr>
+          <td>babel-eslint</td>
+          <td>{{ devDependencies['babel-eslint'] }}</td>
+          <td>ant-design-vue</td>
+          <td>{{ dependencies['ant-design-vue'] }}</td>
+        </tr>
+        <tr>
+          <td>Admin Pro版演示地址（付费版）</td>
+          <td colspan="3">
+            <a
+              href="http://vue-admin-beautiful.com/admin-pro?hmsr=mwsqj&hmpl=&hmcu=&hmkw=&hmci="
+            >
+              点我
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>Admin Plus版演示地址（付费版）</td>
+          <td colspan="3">
+            <a
+              href="http://vue-admin-beautiful.com/admin-plus?hmsr=mwsqj&hmpl=&hmcu=&hmkw=&hmci="
+            >
+              点我
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>开源地址（切换分支可查看各个vue版本）</td>
+          <td colspan="3">
+            <a href="https://github.com/chuzhixin/vue-admin-beautiful">点我</a>
+          </td>
+        </tr>
+      </table>
+    </div> -->
+
+    数据看板待排版
+
+  </a-card>
+</template>
+<script>
+  import { dependencies, devDependencies } from '*/package.json'
+
+  export default {
+    data() {
+      return {
+        updateTime: process.env.VUE_APP_UPDATE_TIME,
+        dependencies: dependencies,
+        devDependencies: devDependencies,
+      }
+    },
+  }
+</script>
+<style lang="less" scoped>
+  .version-information {
+    margin-top: @vab-margin;
+    &-table {
+      width: 100%;
+      overflow: scroll;
+      table {
+        width: 100%;
+        color: #666;
+        border-collapse: collapse;
+        background-color: #fff;
+
+        td {
+          position: relative;
+          padding: 9px 15px;
+          font-size: 14px;
+          line-height: 20px;
+          border: 1px solid #e6e6e6;
+
+          &:nth-child(odd) {
+            width: 20%;
+            text-align: right;
+            background-color: #f7f7f7;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/index/index.vue

@@ -5,10 +5,9 @@
 </template>
 
 <script>
-export default {
-  name: 'Index',
-  components: {},
-
-}
-
+  import VersionInformation from './components/VersionInformation'
+  export default {
+    name: 'Index',
+    components: { VersionInformation },
+  }
 </script>

src/views/middle.vue

@@ -115,6 +115,26 @@ export default defineComponent({
     onMounted(() => {
       console.log('middleList')
       console.log(middleList)
+      // var  newArr=[]
+
+      var aa='linear-gradient(135deg, #64c3f5, #5590e9)'
+
+      middleList.forEach((item) => {
+
+        //  item.meta.backgroundImage=aa
+        if(item.children.length>2){
+          //  console.log(item)
+           item.meta.backgroundImage=aa
+           console.log(item)
+
+        }else{
+            item.children[0].meta.backgroundImage=aa
+             console.log(item)
+        }
+       
+
+        // newArr.push({ label: item, prop: index.toString() })
+      })
     })
     return {
       middleList

src/views/perCenter/addRoleCom.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    v-model="dialogVisible"
+    width="400px"
+    @close="closeDialog()"
+    @open="open"
+  >
+    <el-form
+      ref="formInfo"
+      :model="form"
+      class="demo-form-inline"
+      label-width="100px"
+      :rules="rules"
+    >
+      <el-form-item label="角色名称：" prop="roleName">
+        <el-input v-model="form.roleName"></el-input>
+      </el-form-item>
+      <el-form-item label="角色权限：" prop="roleKey">
+        <el-input v-model="form.roleKey"></el-input>
+      </el-form-item>
+      <el-form-item label="角色状态：" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio label="0" value="0">正常</el-radio>
+          <el-radio label="1" value="1">停用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="角色排序:" prop="roleSort">
+        <el-input-number
+          v-model="form.roleSort"
+          controls-position="right"
+          :min="0"
+          :max="255"
+        ></el-input-number>
+      </el-form-item>
+
+      <div style="text-align: right">
+        <el-button type="primary" @click="submitForm('formInfo')">
+          保存
+        </el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>
+<script>
+import { defineComponent, ref, watchEffect } from 'vue'
+import * as api from '@/api/systemManage/rolePermission.js'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'AddRoleCom',
+  emits: ['closeDialog'],
+  props: {
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
+  },
+  setup(props, context) {
+    context
+
+    const dialogVisible = ref(false)
+    const formInfo = ref(null)
+
+    const form = ref([])
+
+    // open(): Dialog弹窗打开之前做的事
+    const open = () => {
+      console.log('')
+      form.value = props.itemInfo.value
+      console.log()
+    }
+
+    // 关闭弹框
+    const closeDialog = () => {
+      context.emit('closeDialog', false)
+      dialogVisible.value = false
+
+      
+    }
+
+    watchEffect((fn) => {
+      fn
+      dialogVisible.value = props.flag
+    })
+
+    const roleValid = (rule, value, callback) => {
+      rule
+      if (value.length === 0) {
+        callback(new Error('角色不能为空'))
+      } else {
+        callback()
+      }
+    }
+
+    // 保存-修改操作
+    const submitForm = () => {
+      console.log(formInfo)
+      formInfo.value.validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          if (props.dialogTitle === '角色新增') {
+            api.roleAdd(form.value).then((requset) => {
+              if (requset.status === 'SUCCESS') {
+                ElMessage.success({
+                  message: '新增成功',
+                  type: 'success',
+                })
+                closeDialog()
+
+
+                //角色新增成功后，提交全选按钮权限给后台
+
+
+
+
+              } else {
+                ElMessage.error(requset.msg)
+              }
+            })
+          } else {
+              // alert('修改')
+            api.roleUpdate(form.value).then((requset) => {
+            
+              if (requset.status === 'SUCCESS') {
+                ElMessage.success({
+                  message: '修改成功',
+                  type: 'success',
+                })
+                
+                closeDialog()
+              } else {
+                ElMessage.error(requset.msg)
+              }
+            })
+          }
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+
+    return {
+      closeDialog,
+      dialogVisible,
+      roleValid,
+      formInfo,
+      form,
+      open,
+      submitForm,
+      rules: {
+        roleName: [
+          { required: true, message: '请输入角色名称', trigger: 'blur' },
+        ],
+        roleKey: [
+          { required: true, message: '请输入角色权限', trigger: 'blur' },
+        ],
+        status: [
+          { required: true, message: '请选择角色状态', trigger: 'change' },
+        ],
+      },
+    }
+  },
+})
+</script>
+ 
+<style scoped lang="scss">
+</style>

src/views/perCenter/index.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="app-container page-nesting" style="position: relative">
+    <!-- 左侧start -->
+    <!-- <div class="grid-content treeDom roleLeft">
+      
+    </div> -->
+
+    <el-card class="box-card grid-content treeDom roleLeft">
+      <template #header>
+        <div class="card-header">
+          <span>个人中心</span>
+          <!-- <el-button class="button" type="text">Operation button</el-button> -->
+        </div>
+      </template>
+      <div class="text item">
+        <span class="text-left">租户名称：</span>
+        <span class="text-right">西游科技有限公司</span>
+      </div>
+      <div class="text item">
+        <span class="text-left">管理员：</span>
+        <span class="text-right">孙悟空</span>
+      </div>
+      <div class="text item">
+        <span class="text-left">管理员手机号：</span>
+        <span class="text-right">16666666666</span>
+      </div>
+      <div class="text item">
+        <span class="text-left">系统平台：</span>
+        <span class="text-right">智慧电力</span>
+      </div>
+      <div class="text item">
+        <span class="text-left">地址：</span>
+        <span class="text-right">上海市青浦区徐泾镇徐乐路208号</span>
+      </div>
+      <div class="text item">
+        <span class="text-left">到期时间：</span>
+        <span class="text-right">2090-01-01</span>
+      </div>
+    </el-card>
+
+    <!-- 左侧end -->
+
+    <!-- 右侧表格start -->
+ 
+
+    <el-card class="box-card grid-content nestingDom">
+      <template #header>
+        <div class="card-header">
+          <span>基本资料</span>
+          <!-- <el-button class="button" type="text">Operation button</el-button> -->
+        </div>
+      </template>
+
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+    <el-tab-pane label="个人信息" name="first">个人信息</el-tab-pane>
+    <el-tab-pane label="修改密码" name="second">修改密码</el-tab-pane>
+    <!-- <el-tab-pane label="Role" name="third">Role</el-tab-pane>
+    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
+  </el-tabs>
+      
+    </el-card>
+    
+   
+    <!-- 右侧表格end -->
+
+    <!-- 新建角色start -->
+    <add-role-com
+      :dialog-title="dialogTitle"
+      :itemInfo="tableItem"
+      @closeDialog="closeDialog"
+      :flag="showDialog"
+    ></add-role-com>
+    <!-- 新建角色end -->
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, reactive, onMounted } from 'vue'
+import * as api from '@/api/systemManage/rolePermission.js'
+import { ElMessage } from 'element-plus'
+
+// import roleInfoCom from './roleInfoCom'
+import addRoleCom from './addRoleCom'
+import { useStore } from 'vuex'
+
+export default defineComponent({
+  components: { addRoleCom },
+  setup() {
+    const store = useStore()
+    const radio1 = ref('1')
+    const showDialog = ref(false)
+    const roleData = ref([])
+    const menuData = ref([])
+    const menuData2 = ref([])
+    const newMenuData = ref([])
+    const checkedKeys = ref([])
+    const objItem = ref({})
+
+    const dialogTitle = ref('')
+
+    // 删除左侧角色列表
+    function deleteRoleItem(item) {
+      // item
+      // console.log(radio1.value)
+      // console.log(item.roleId)
+      // this.roleData.splice(params, 1)
+
+      api.roleDelete({}, item.roleId).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          ElMessage.success({
+            message: '删除成功',
+            type: 'success',
+          })
+          roleList()
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+    }
+
+    // 新增角色
+    const tableItem = reactive([])
+
+    function addRole() {
+      // alert('新增')
+      tableItem.value = {
+        roleName: '',
+        roleKey: '',
+        status: '',
+        roleSort: 1,
+      }
+      dialogTitle.value = '角色新增'
+      showDialog.value = true
+    }
+
+    // 修改角色
+    function editRole() {
+      // alert('修改')
+      // console.log(radio1.value)
+      api.roleDetail({}, radio1.value).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          tableItem.value = {
+            roleName: requset.data.roleName,
+            roleKey: requset.data.roleKey,
+            status: requset.data.status,
+            roleSort: Number(requset.data.roleSort),
+            roleId: requset.data.roleId,
+          }
+
+          dialogTitle.value = '角色修改'
+          showDialog.value = true
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+    }
+
+    const listTabsChange = (value, item) => {
+      // console.log('value')
+      console.log(radio1.value)
+      radio1.value = value
+      objItem.value = item
+      // console.log('objItem.value')
+      // console.log(objItem.value)
+      roleMenuTreeselect()
+      getAuthorityTable()
+    }
+
+    // 表格树结构渲染
+    function roleMenuTreeselect() {
+      menuData.value = []
+      api.roleMenuTreeselect({}, radio1.value).then((requset) => {
+        if (requset.code == 200) {
+          menuData.value = requset.data.menus
+          // getTreeData2(menuData.value) //对树结构返回值进行重组
+          checkedKeys.value = requset.data.checkedKeys
+
+          //当返回值没有选中菜单时,否
+          if (!checkedKeys.value.length) {
+            menuData.value.map((item) => {
+              item.authority2 = '0'
+            })
+
+            if (radio1.value == 1) {
+              menuData.value.map(function (item) {
+                checkedKeys.value.push(item.id)
+                checkedKeys.value.map(function (num) {
+                  if (JSON.stringify(item).indexOf(num) != -1) {
+                    item.authority2 = '1'
+                  }
+                })
+              })
+            }
+          } else {
+            menuData.value.map(function (item) {
+              item.authority2 = '0'
+              checkedKeys.value.map(function (num) {
+                if (JSON.stringify(item).indexOf(num) != -1) {
+                  item.authority2 = '1'
+                }
+              })
+            })
+          }
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+    }
+
+    //小吉新接口渲染右侧表格树数据
+    function getAuthorityTable() {
+      menuData2.value = []
+      api.getAuthorityTable({ roleId: radio1.value }).then((requset) => {
+        if (requset.code == 200) {
+          menuData2.value = requset.data
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+    }
+
+    function getTreeData2(data) {
+      for (var i = 0; i < data.length; i++) {
+        if (data[i].label == data[i].children[0].label) {
+          // console.log(data[i].label)
+          data[i].children = data[i].children[0].children
+        }
+      }
+      return data
+    }
+
+    // 关闭弹框操作
+    const closeDialog = () => {
+      showDialog.value = false
+      roleList()
+      console.log('1111aaa' + radio1.value)
+    }
+    //角色列表
+    function roleList() {
+      api.roleList().then((requset) => {
+        if (requset.code === 200) {
+          roleData.value = requset.rows
+          // var item = requset.rows[0]
+          // objItem.value = {
+          //   roleSort: item.roleSort,
+          //   roleKey: item.roleKey,
+          //   roleName: item.roleName,
+          // }
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+    }
+
+    onMounted(() => {
+      roleList()
+      roleMenuTreeselect()
+      getAuthorityTable()
+    })
+
+    return {
+      radio1,
+      showDialog,
+      roleData,
+      dialogTitle,
+      tableItem,
+      menuData,
+      menuData2,
+      newMenuData,
+      checkedKeys,
+      listTabsChange,
+      roleMenuTreeselect,
+      getAuthorityTable,
+      deleteRoleItem,
+      addRole,
+      editRole,
+      closeDialog,
+      objItem,
+      getTreeData2,
+      store,
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+
+// start
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.box-card {
+  // width: 480px;
+}
+
+::v-deep .el-card__body{
+  padding:15px
+}
+::v-deep .el-card__header {
+  padding: 14px 15px 7px !important;
+  
+}
+::v-deep .item{
+    padding:11px 0;
+    border-bottom:1px solid #e7eaec;
+    margin:0
+  }
+
+  .text-left{
+    width:98px
+  }
+  .text-right{
+    width:calc(100% - 98px)
+  }
+  .text-left,.text-right{
+    display:inline-block;
+    vertical-align: top;
+  }
+
+
+  .demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+
+// end
+
+.el-button + .el-button {
+  margin-left: 0;
+}
+.app-container.page-nesting {
+  padding: 0;
+  background: rgba(0, 0, 0, 0);
+}
+.grid-content {
+  background: #fff;
+  height: calc(100vh - 140px);
+  overflow-y: auto;
+}
+.el-input__inner {
+  border-radius: 20px !important;
+}
+.treeDom {
+  width: 270px;
+  position: absolute;
+  left: 0;
+  // margin-left: 20px;
+  // padding: 15px;
+  // min-height: calc(100vh - 130px);
+  height: calc(100vh - 140px);
+}
+.nestingDom {
+  margin-left: 285px;
+  
+}
+</style>

src/views/perCenter/roleInfoCom/index-old.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="siteManage-main roleInfoPage">
+    <div style="text-align: right; margin-bottom: 20px">
+      <!-- <el-button type="success" >新增</el-button> -->
+      <el-button type="primary" @click="saveMenu()">保存</el-button>
+    </div>
+
+    <el-table :data="menuData" border stripe>
+      <el-table-column prop="label" label="菜单" width="180"></el-table-column>
+      <el-table-column prop="authority2" label="权限" class="roleLeft">
+        <template #default="scope">
+          <el-radio-group
+            v-model="scope.row.authority2"
+            @change="listTabsChange(scope.row)"
+          >
+            <el-radio label="1" :disabled="radio1 == 1 ? true : false">
+              是
+            </el-radio>
+            <el-radio label="0" :disabled="radio1 == 1 ? true : false">
+              否
+            </el-radio>
+          </el-radio-group>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, watch } from 'vue'
+import * as api from '@/api/systemManage/rolePermission.js'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'RoleInfoCom',
+  props: ['menuData', 'objItem', 'radio1'],
+
+  // props: {
+  //   menuData: Object,
+  //   objItem: Object,
+  //   radio1: String,
+  // },
+
+  setup(props) {
+    const aa = ref([])
+    const saveArr = ref([])
+
+    function saveMenu() {
+   
+
+
+
+      api
+        .saveMenu({
+          menuIds: saveArr.value,
+          roleId: props.radio1,
+          roleKey: props.objItem.roleKey,
+          roleName: props.objItem.roleName,
+          roleSort: props.objItem.roleSort,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '权限修改成功',
+              type: 'success',
+            })
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+    const listTabsChange = (value) => {
+      saveArr.value = []
+      value
+
+
+      props.menuData.forEach(function (item) {
+        if (item.authority2 == '1') {
+          saveArr.value.push(item.id)
+          var aa = item.children
+          aa.forEach(function (item) {
+              saveArr.value.push(item.id)
+            
+          })
+        }
+      })
+   
+    }
+
+    onMounted(() => {})
+    //监听变化
+    watch(
+      () => props.radio1,
+      (newVal) => {
+        newVal
+
+     
+        // if (newVal == '1') {
+        //   alert(1)
+        //   props.menuData.forEach(function (item) {
+        //     item.authority2 = '1'
+        //     saveArr.value.push(item.id)
+        //   })
+        //   console.log(' 22props.menuData')
+        //   console.log(props.menuData)
+        // }
+      }
+    )
+
+    return {
+      saveMenu,
+      aa,
+      listTabsChange,
+      saveArr,
+    }
+  },
+})
+</script>
+
+<style  lang="scss">
+</style>

src/views/perCenter/roleInfoCom/index-old2.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="siteManage-main roleInfoPage">
+    <div style="text-align: right; margin-bottom: 20px">
+      <!-- <el-button type="success" >新增</el-button> -->
+      <el-button
+        type="primary"
+        @click="saveMenu()"
+        :disabled="radio1 == 1 ? true : false"
+      >
+        保存
+      </el-button>
+    </div>
+
+  
+
+    <!-- 带复选框的树结构 start -->
+
+    <el-tree
+      ref="box"
+      :data="menuData"
+      show-checkbox
+      node-key="id"
+      :default-checked-keys="checkedKeys"
+      :props="defaultProps"
+      check-strictly="false"
+      @check="currentChecked"
+    />
+
+    <!-- 带复选框的树结构 end -->
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted, watch } from 'vue'
+import * as api from '@/api/systemManage/rolePermission.js'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'RoleInfoCom',
+  props: ['menuData', 'objItem', 'radio1', 'checkedKeys'],
+
+  setup(props) {
+    let box = ref(null)
+    const aa = ref([])
+    const saveArr = ref([])
+    function currentChecked(nodeObj, SelectedObj) {
+      saveArr.value = SelectedObj.checkedKeys
+      console.log('saveArr.value')
+      console.log(saveArr.value)
+      // console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组
+    }
+
+    function saveMenu() {
+      api
+        .saveMenu({
+          menuIds: saveArr.value,
+          roleId: props.radio1,
+          roleKey: props.objItem.roleKey,
+          roleName: props.objItem.roleName,
+          roleSort: props.objItem.roleSort,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '权限修改成功',
+              type: 'success',
+            })
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+  
+
+    // start
+
+    function getTreeData(data) {
+      // 第二种 修改涉及级联选择器 最后一个空白的情况
+      // 循环遍历json数据
+      for (var i = 0; i < data.length; i++) {
+        data[i]['disabled'] = true
+        if (!data[i].children) {
+          // children若为空数组，则不作操作
+        } else {
+          // children若不为空数组，则继续 递归调用 本方法
+          getTreeData(data[i].children)
+        }
+      }
+      return data
+    }
+
+ 
+
+    // end
+
+    onMounted(() => {
+      saveArr.value = props.checkedKeys
+      if (props.radio1 == 1) {
+        getTreeData(props.menuData)
+        console.log('box.value', box.value)
+        // box.value.setCheckedNodes(props.menuData)   //全选
+      }
+    })
+    //监听变化
+    watch(
+      () => props.radio1,
+      (newVal) => {
+        newVal
+
+        
+      }
+    )
+
+    return {
+      saveMenu,
+      aa,
+      saveArr,
+
+      currentChecked,
+      getTreeData,
+      box,
+    }
+  },
+})
+</script>
+
+<style  lang="scss">
+</style>

src/views/perCenter/roleInfoCom/index.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="siteManage-main roleInfoPage">
+    <el-table
+      :data="menuData2"
+      border
+      stripe
+      :cell-style="cellStyle"
+      row-key="id"
+      default-expand-all
+    >
+      <el-table-column prop="menu" label="菜单" width="180"></el-table-column>
+      <el-table-column
+        prop="authority"
+        label="权限  （不勾选查询按钮，此菜单无法查看）"
+        align="left"
+        class="roleLeft"
+      >
+        <template #default="scope">
+          <el-checkbox
+            v-for="item in scope.row.authority"
+            :label="item.name"
+            :key="item.actionid"
+            v-model="item.checked"
+            :disabled="
+              radio1 == 1 || scope.row.menu == '权限管理' ? true : false
+            "
+            @change="handleCheckedChange"
+          ></el-checkbox>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div style="text-align: right; margin-top: 20px">
+      <el-button
+        type="primary"
+        @click="saveMenu()"
+        :disabled="radio1 == 1 ? true : false"
+      >
+        保存
+      </el-button>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { defineComponent, ref, onMounted, watch } from 'vue'
+import * as api from '@/api/systemManage/rolePermission.js'
+import { ElMessage } from 'element-plus'
+export default defineComponent({
+  name: 'RoleInfoCom',
+  props: ['menuData', 'menuData2', 'objItem', 'radio1', 'checkedKeys'],
+
+  setup(props) {
+    const saveArr = ref([])
+    const checkedArr = ref([])
+
+    function cellStyle({ row, column, rowIndex, columnIndex }) {
+      row, column, rowIndex
+      if (columnIndex) {
+        return `text-align:left!important;cursor:pointer;`
+      }
+    }
+
+    function saveMenu() {
+      console.log('checkedArr')
+      console.log(checkedArr.value)
+
+      if (checkedArr.value.length == 0) {
+        ElMessage.warning('菜单权限不能为空! 请至少选择一个菜单查询权限')
+        return
+      }
+      api
+        .saveMenu({
+          menuIds: checkedArr.value,
+          roleId: props.radio1,
+          roleKey: props.objItem.roleKey,
+          roleName: props.objItem.roleName,
+          roleSort: props.objItem.roleSort,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '权限修改成功',
+              type: 'success',
+            })
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+    function getTreeData(data) {
+      // 循环遍历json数据
+      for (var i = 0; i < data.length; i++) {
+        data[i]['disabled'] = true
+        if (!data[i].children) {
+          // children若为空数组，则不作操作
+        } else {
+          // children若不为空数组，则继续 递归调用 本方法
+          getTreeData(data[i].children)
+        }
+      }
+      return data
+    }
+    function handleCheckedChange() {
+      checkedArr.value = []
+      getCheckedArr()
+    }
+
+    // 复选框选中的数组集合start
+    function getCheckedArr() {
+      props.menuData2.forEach(function (item) {
+        if (item.children) {
+          item.children.forEach(function (a) {
+            if (a.authority[0].checked) {
+              a.authority.forEach(function (i) {
+                 if (i.checked) {
+                  checkedArr.value.push(i.id)
+                }
+              })
+            }
+          })
+        } else {
+          // 如果查询的id被选中,那么塞入数组
+          if (item.authority[0].checked) {
+            item.authority.forEach(function (i) {
+              if (i.checked) {
+                checkedArr.value.push(i.id)
+              }
+            })
+          }
+        }
+      })
+      console.log('checkedArr.value')
+      console.log(checkedArr.value)
+    }
+
+    onMounted(() => {
+      getCheckedArr()
+    })
+
+    //监听变化
+    watch(
+      () => props.radio1,
+      (newVal) => {
+        newVal
+        // checkedArr.value=[]
+      }
+    )
+
+    return {
+      cellStyle,
+      saveMenu,
+      saveArr,
+      getCheckedArr,
+      getTreeData,
+      checkedArr,
+      handleCheckedChange,
+    }
+  },
+})
+</script>
+
+
+<style  lang="scss" >
+.roleInfoPage .el-table .cell {
+  text-align: left !important;
+}
+
+.el-table [class*='el-table__row--level'] .el-table__expand-icon {
+  display: none !important;
+}
+.el-table__indent {
+  padding-left: 10px !important;
+}
+</style>

src/views/siteManage/index.vue

@@ -502,7 +502,7 @@ export default defineComponent({
 }
 .grid-content {
   background: #fff;
-  height: calc(100vh - 130px);
+  height: calc(100vh - 140px);
   overflow-y: auto;
 }
 .el-input__inner {
@@ -513,8 +513,8 @@ export default defineComponent({
   position: absolute;
   left: 0;
   // margin-left: 20px;
-  padding: 20px;
-  min-height: calc(100vh - 130px);
+  padding: 15px;
+  height: calc(100vh - 140px);
 
   .el-icon-search {
     color: #409eff;

src/views/systemManage/rolePermission/index.vue

@@ -26,7 +26,7 @@
     <div class="grid-content nestingDom" style="width: calc(100% - 300px)">
       <role-info-com
         class="basicInfo"
-        style="height: calc(100vh - 130px)"
+        style="height: calc(100vh - 140px)"
         v-if="menuData.length > 0&&menuData2.length > 0"
         :menuData="menuData"
         :menuData2="menuData2"
@@ -275,7 +275,7 @@ export default defineComponent({
 }
 .grid-content {
   background: #fff;
-  height: calc(100vh - 130px);
+  height: calc(100vh - 140px);
   overflow-y: auto;
 }
 .el-input__inner {
@@ -286,10 +286,12 @@ export default defineComponent({
   position: absolute;
   left: 0;
   // margin-left: 20px;
-  padding: 20px;
-  min-height: calc(100vh - 130px);
+  padding: 15px;
+  // min-height: calc(100vh - 130px);
+  height: calc(100vh - 140px);
+
 }
 .nestingDom {
-  margin-left: 300px;
+  margin-left: 285px;
 }
 </style>

vue.config.js

@@ -193,8 +193,8 @@ module.exports = {
                     javascriptEnabled: true,
                     modifyVars: {
                         'vab-color-blue': '#1890ff',
-                        'vab-margin': '20px',
-                        'vab-padding': '20px',
+                        'vab-margin': '15px',
+                        'vab-padding': '15px',
                         'vab-header-height': '60px',
                         'vab-breadcrumb-height': '37px',
                         'vab-public-height': 'calc(100vh - 130px)',