feat:左侧菜单改为可隐藏（部分页面完成）

nezha-fronted/src/components/common/leftMenu.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="content">
+      <div class="content-left left-slot" :class="{'left-slot-shrink':isShrink}">
+        <slot name="content-left"></slot>
+        <div  @click="toggleStat" class="bottom-icon">
+          <div class="bottom-divider"></div>
+          <div style="display: inline-block;float: right"><i style="font-size: 16px;" :class="{'el-icon-d-arrow-right':isShrink,'el-icon-d-arrow-left':!isShrink}"></i></div>
+        </div>
+      </div>
+      <div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
+        <slot name="content-right" ></slot>
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+      name: "leftMenu",
+      props:{
+        resizeFunc:{type:Function}
+      },
+      data(){
+        return{
+          isShrink:false,
+        }
+      },
+      methods:{
+        toggleStat:function(){
+          this.isShrink=!this.isShrink;
+          this.$store.commit('setLeftMenuStat',this.isShrink);
+          if(this.resizeFunc){
+            this.resizeFunc();
+          }
+        }
+      },
+      mounted() {
+        this.isShrink=this.$store.state.leftMenuStat ;
+      }
+    }
+</script>
+
+<style scoped lang="scss">
+  .content{
+    height: 100%;
+    position:relative;
+  }
+  .slot-content{
+    height: 100%;
+  }
+  .content .left-slot{
+    position: relative;
+    /*border-bottom: 1px solid #eeeeee;*/
+    /*transition: all 100ms;*/
+  }
+  .content .right-slot{
+    margin-left: unset !important;
+    width: calc(100% - 210px);
+    float: right;
+  }
+  .content .left-slot-shrink{
+    width: 25px;
+    padding: 0px;
+    .bottom-icon{
+      margin-left: 5px;
+    }
+    .bottom-icon .bottom-divider{
+      width: 0px;
+    }
+    .slot-content{
+      visibility: hidden;
+    }
+  }
+  .content .right-slot-open{
+    width:calc(100% - 35px);
+  }
+  .left-slot .bottom-icon{
+    position:absolute;
+    bottom: 15px;
+    left: 0px;
+  }
+  .left-slot .bottom-icon:hover{
+    cursor: pointer;
+  }
+  .bottom-icon .bottom-divider{
+    display: inline-block;
+    height: 1px;
+    width: 175px;
+    border-top: 1px solid lightgrey;
+    vertical-align: middle;
+  }
+  .content .left-slot-shrink:hover{
+    width: 200px;
+    padding: 0px 0px 0px 15px;
+    position: absolute;
+    background-color: #FFF;
+    z-index: 100;
+    .slot-content{
+      visibility: visible;
+    }
+    .bottom-icon{
+      z-index: 101;
+    }
+    .bottom-icon .bottom-divider{
+      width: 175px;
+    }
+  }
+</style>
+<style lang="scss">
+
+</style>

nezha-fronted/src/components/page/alert/config.vue

@@ -5,7 +5,8 @@
 </style>
 <template>
   <div class="config">
-    <div class="content-left">
+    <left-menu >
+      <div slot="content-left" class="slot-content">
       <div class="sidebar-title">{{$t('alert.alert')}}</div>
       <div class="sidebar-info">
         <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')" id="alert-jump-alertlist">
@@ -14,7 +15,7 @@
         <div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div>
       </div>
     </div>
-    <div class="content-right">
+    <div slot="content-right" class="slot-content">
       <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
         <div class="top-tools" v-show="mainResizeShow">
           <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
@@ -94,6 +95,7 @@
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertRuleForMessage" :isFullScreen="isFullScreen" :from="'alertRule'" :targetTab="targetTab" :detail="ruleDetail"
                   @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
     </div>
+    </left-menu>
     <alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
     <module-box :module="viewModuleData" @reload="getTableData" ref="moduleBox"></module-box>

nezha-fronted/src/components/page/alert/list.vue

@@ -5,7 +5,8 @@
 </style>
 <template>
   <div class="list">
-    <div class="content-left">
+    <left-menu >
+      <div slot="content-left" class="slot-content">
       <div class="sidebar-title">{{$t('alert.alert')}}</div>
       <div class="sidebar-info">
         <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('alert.alertList')}}</div>
@@ -14,7 +15,7 @@
         </div>
       </div>
     </div>
-    <div class="content-right">
+    <div slot="content-right" class="slot-content">
       <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
         <div class="top-tools" v-show="mainResizeShow">
           <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
@@ -128,6 +129,7 @@
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab="targetTab" :detailList="tabDetailList"
                   @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
     </div>
+    </left-menu>
     <!--<alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
     <module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>-->

nezha-fronted/src/components/page/asset/asset.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="asset" ref="asset">
-    <div class="content-left">
+    <left-menu >
-
+      <div slot="content-left" class="slot-content">
         <div class="sidebar-title">{{$t('asset.asset')}}</div>
         <div class="sidebar-info" style="height: 90%">
           <el-scrollbar ref="leftScrollbar" style="height: 100%">
@@ -89,8 +89,7 @@
           </el-scrollbar>
         </div>
     </div>
-
+          <div slot="content-right" class="slot-content">
-          <div class="content-right">
             <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
               <div class="top-tools" v-show="mainResizeShow">
                 <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
@@ -254,6 +253,7 @@
                   @exitFullScreen="exitFullScreen"
                   @listResize="listResize" ></bottom-box>
     </div>
+    </left-menu>
 
     <asset-box :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
                      ref="assetEditUnit"></asset-box>
@@ -400,7 +400,7 @@
           }, {
             label: this.$t("asset.tableTitle.procurementDate"),
             prop: 'purchaseDate',
-            show: true,
+            show: false,
           }, {
             label: this.$t("asset.tableTitle.principal"),
             prop: 'principal',

nezha-fronted/src/components/page/config/account.vue

@@ -5,7 +5,8 @@
 </style>
 <template>
   <div class="account">
-    <div class="content-left">
+    <left-menu >
+    <div slot="content-left" class="slot-content">
       <div class="sidebar-title">{{$t('overall.config')}}</div>
       <div class="sidebar-info">
         <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('config.account.account')}}</div>
@@ -32,7 +33,7 @@
         </div>
       </div>
     </div>
-    <div class="content-right">
+    <div slot="content-right" class="slot-content">
       <!-- 主页面 -->
       <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
         <!-- 顶部工具栏 -->
@@ -112,7 +113,7 @@
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="user" :isFullScreen="isFullScreen" :from="'account'" :targetTab="targetTab" :detail="userDetail"
                   @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
     </div>
-
+    </left-menu>
     <transition name="right-box">
       <div class="right-box right-box-account" v-if="rightBox.show" v-clickoutside="clickos">
         <!-- begin--顶部按钮-->
@@ -571,7 +572,7 @@
           }
         }
         this.getTableData();
-      }
+      },
     },
     computed: {
       isCurrentUser() {

nezha-fronted/src/components/page/config/dc.vue

@@ -33,7 +33,8 @@
 </style>
 <template>
     <div class="dc" >
-      <div class="content-left">
+      <left-menu >
+        <div slot="content-left" class="slot-content">
         <div class="sidebar-title">{{$t('overall.config')}}</div>
         <div class="sidebar-info">
           <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
@@ -63,7 +64,7 @@
         </div>
       </div>
       <!--dc table start-->
-      <div class="content-right">
+      <div slot="content-right" class="slot-content">
         <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
           <div class="top-tools" v-show="mainResizeShow">
             <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
@@ -81,6 +82,7 @@
             class="nz-table"
             :data="tableData"
             border
+            tooltip-effect="light"
             v-show="mainResizeShow"
             v-scrollBar:el-table
             :height="mainTableHeight"
@@ -88,6 +90,7 @@
             style="width: 100%;">
             <el-table-column
               :resizable="false"
+              show-overflow-tooltip
               v-for="(item, index) in tablelable"
               v-if="item.show"
               :width="item.width"
@@ -150,6 +153,7 @@
         <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="cabinetDc" :isFullScreen="isFullScreen" :from="'dc'" :targetTab="targetTab" :detail="dcDetail"
                      @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
       </div>
+      </left-menu>
       <!--dc table end-->
       <element-set
         v-clickoutside="elementsetHide"

nezha-fronted/src/components/page/config/mib.vue

@@ -5,7 +5,8 @@
 </style>
 <template>
   <div class="mib">
-    <div class="content-left">
+    <left-menu >
+      <div slot="content-left" class="slot-content">
       <div class="sidebar-title">{{$t('overall.config')}}</div>
       <div class="sidebar-info">
         <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="mib-jump-account">
@@ -32,7 +33,7 @@
         </div>
       </div>
     </div>
-    <div class="content-right">
+    <div slot="content-right" class="slot-content">
       <template v-if="showTab == 'file'">
         <div class="top-tools">
           <div class="nz-tab top-tool-main-right top-tool-main-right-to-left" style="width: 300px">
@@ -113,7 +114,7 @@
       </template>
       <mib-browser :showTab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
     </div>
-
+    </left-menu>
     <element-set
       v-clickoutside="elementsetHide"
       :table-title="tableTitle"

nezha-fronted/src/components/page/config/model.vue

@@ -5,7 +5,8 @@
 </style>
 <template>
   <div class="model">
-    <div class="content-left">
+    <left-menu >
+      <div slot="content-left" class="slot-content">
       <div class="sidebar-title">{{$t('overall.config')}}</div>
       <div class="sidebar-info">
         <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="model-jump-account">
@@ -32,7 +33,7 @@
         </div>
       </div>
     </div>
-    <div class="content-right">
+    <div slot="content-right" class="slot-content">
       <div class="top-tools">
         <div class="top-tool-main-right">
           <div class="top-tool-search">
@@ -82,7 +83,7 @@
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
-
+    </left-menu>
     <element-set
       v-clickoutside="elementsetHide"
       :table-title="tableTitle"

nezha-fronted/src/components/page/config/operationlog.vue

@@ -5,7 +5,8 @@
 </style>
 <template>
   <div class="operationlog">
-    <div class="content-left">
+    <left-menu >
+      <div slot="content-left" class="slot-content">
       <div class="sidebar-title">{{$t('overall.config')}}</div>
       <div class="sidebar-info">
         <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
@@ -34,7 +35,7 @@
         </div>
       </div>
     </div>
-    <div class="content-right">
+    <div slot="content-right" class="slot-content">
       <div class="top-tools">
         <div></div>
         <div>
@@ -79,6 +80,7 @@
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
+    </left-menu>
     <element-set
       v-clickoutside="elementsetHide"
       :dropCol="dropCol"

nezha-fronted/src/components/page/config/promServer.vue

@@ -5,7 +5,8 @@
 </style>
 <template>
   <div class="prom">
-    <div class="content-left">
+    <left-menu >
+    <div slot="content-left" class="slot-content">
       <div class="sidebar-title">{{$t('overall.config')}}</div>
       <div class="sidebar-info">
         <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
@@ -32,7 +33,7 @@
         </div>
       </div>
     </div>
-    <div class="content-right">
+    <div slot="content-right"class="slot-content">
       <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
         <div class="top-tools" v-show="mainResizeShow">
           <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
@@ -101,7 +102,7 @@
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="promServer" :isFullScreen="isFullScreen" :from="'promServer'" :targetTab="targetTab" :detail="promDetail"
                   @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
     </div>
-
+    </left-menu>
     <transition name="right-box">
       <div class="right-box right-box-prom" v-if="rightBox.show" v-clickoutside="clickos">
         <!-- begin--顶部按钮-->

nezha-fronted/src/components/page/config/system.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="system">
-    <div class="content-left">
+    <left-menu >
+      <div slot="content-left" class="slot-content">
       <div class="sidebar-title">{{$t('overall.config')}}</div>
       <div class="sidebar-info">
         <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
@@ -27,7 +28,7 @@
         </div>
       </div>
     </div>
-    <div class="content-right system-tabs">
+    <div slot="content-right" class="slot-content system-tabs">
       <el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs">
         <el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
           <div class="system-config-form">
@@ -190,6 +191,7 @@
         </el-tab-pane>
       </el-tabs>
     </div>
+    </left-menu>
   </div>
 </template>
 

nezha-fronted/src/components/page/config/terminallog.vue

@@ -5,7 +5,8 @@
 </style>
 <template>
   <div class="terminallog">
-    <div class="content-left">
+    <left-menu >
+      <div slot="content-left" class="slot-content">
       <div class="sidebar-title">{{$t('overall.config')}}</div>
       <div class="sidebar-info">
         <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
@@ -34,7 +35,7 @@
         </div>
       </div>
     </div>
-    <div class="content-right">
+    <div slot="content-right" class="slot-content">
       <div class="top-tools">
         <div></div>
         <div>
@@ -88,6 +89,7 @@
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
     </div>
+    </left-menu>
     <element-set
       v-clickoutside="elementsetHide"
       :dropCol="dropCol"

nezha-fronted/src/components/page/dashboard/overview/overview.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="overview">
       <!--左侧菜单栏-->
-      <div class="overview-left content-left">
+      <left-menu :resize-func="resizeChart">
+      <div slot="content-left" class="overview-left slot-content">
         <div class="sidebar-title">{{$t('dashboard.title')}}</div>
         <div class="sidebar-info">
           <div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
@@ -10,7 +11,7 @@
         </div>
       </div>
       <!--右侧内容-->
-      <div class="overview-right content-right" id="mainDisplay">
+      <div class="overview-right slot-content" id="mainDisplay" slot="content-right">
         <!--标题-->
         <div class="overview-content-header">
           <div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
@@ -86,6 +87,7 @@
           </el-scrollbar>
         </div>
       </div>
+      </left-menu>
     </div>
 </template>
 
@@ -1175,6 +1177,16 @@
           }
         });
       },
+      resizeChart:function() {
+        this.$nextTick(() => {
+          let width = this.$refs.chartbox.$el.clientWidth;
+          let height = this.$refs.chartbox.$el.clientHeight * .95;
+          this.$refs.chartbox.resizeChart(width, height);
+          let mapWidth = this.$refs.dataCenterMap.$el.clientWidth;
+          let mapHeight = this.$refs.dataCenterMap.$el.clientHeight * .95;
+          this.$refs.dataCenterMap.resizeChart(mapWidth, mapHeight);
+        })
+      }
     },
     computed:{
 
@@ -1207,12 +1219,7 @@
     watch:{
       isFullScreen:function(n,o){
         this.$nextTick(()=>{
-          let width=this.$refs.chartbox.$el.clientWidth;
+          this.resizeChart();
-          let height=this.$refs.chartbox.$el.clientHeight * .95;
-          this.$refs.chartbox.resizeChart(width,height);
-          let mapWidth=this.$refs.dataCenterMap.$el.clientWidth;
-          let mapHeight=this.$refs.dataCenterMap.$el.clientHeight * .95;
-          this.$refs.dataCenterMap.resizeChart(mapWidth,mapHeight);
         });
       }
     }

nezha-fronted/src/main.js

@@ -40,6 +40,7 @@ import bottomBox from "./components/common/bottomBox/bottomBox"; //上滑框
 import "perfect-scrollbar/css/perfect-scrollbar.css";
 import loading from "./components/common/loading";
 import mibBox from "./components/common/rightBox/mibBox";
+import leftMenu from "./components/common/leftMenu";
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -62,6 +63,7 @@ Vue.component("select-area", selectArea);
 Vue.component('loading',loading);
 Vue.component('bottom-box', bottomBox);
 Vue.component('mib-box',mibBox);
+Vue.component('left-menu',leftMenu);
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$post = post;

nezha-fronted/src/store/index.js

@@ -39,6 +39,7 @@ const store = new Vuex.Store({
     consoleCount:0,//当前console窗口数
     isAddConsole:false,//是否增加窗口
     consoleParam:{},//新开console窗口参数
+    leftMenuStat:false, //0展开状态，1隐藏状态
   },
   getters: {
   },
@@ -111,6 +112,9 @@ const store = new Vuex.Store({
     minConsole(state){//最小化窗口
       state.consoleShow=false;
     },
+    setLeftMenuStat:function(state,data){
+      state.leftMenuStat=data
+    }
   },
   actions: {
   }