temp: 左侧菜单重构（未完成）

nezha-fronted/src/assets/stylus/main.scss

@@ -12,9 +12,6 @@ html {
 li{
   list-style-type:none ;
 }
-.content-box {
-  height: calc(100% - 50px);
-}
 
 .nz-icon-gear:before {
   color: #BA3939;

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

@@ -1,6 +1,6 @@
 <template>
   <div class="header">
-    <div class="logo link" @click="jumpTo('overview')"><img height="45" src="../../assets/img/logo.png"/></div>
+    <div class="logo link" @click="jumpTo('overview', 'dashboards')"><img height="45" src="../../assets/img/logo.png"/></div>
     <el-menu
       class="nz-menu float-right"
       mode="horizontal"
@@ -40,25 +40,25 @@
       </el-menu-item>
       <el-submenu index="1" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('overview')" :class ="(activeIndex == 'overview' ||activeIndex == 'panel' || activeIndex == 'explore') ? 'menu-active' :'' " >
+          <div @click="jumpTo('overview', 'dashboards')" :class ="(activeIndex == 'overview' ||activeIndex == 'panel' || activeIndex == 'explore') ? 'menu-active' :'' " >
             {{$t('overall.dashboard')}}
           </div>
         </template>
         <el-menu-item index="1-0">
-          <div @click="jumpTo('overview')" :class="{'menu-item-active' :activeIndex == 'overview'}" >{{$t('dashboard.overview.title')}}</div>
+          <div @click="jumpTo('overview', 'dashboards')" :class="{'menu-item-active' :activeIndex == 'overview'}" >{{$t('dashboard.overview.title')}}</div>
         </el-menu-item>
         <el-menu-item index="1-1">
-          <div @click="jumpTo('panel')" :class="{'menu-item-active' :activeIndex == 'panel'}" >{{$t('dashboard.panel.title')}}</div>
+          <div @click="jumpTo('panel', 'dashboards')" :class="{'menu-item-active' :activeIndex == 'panel'}" >{{$t('dashboard.panel.title')}}</div>
         </el-menu-item>
         <el-menu-item index="1-2">
-          <div @click="jumpTo('explore')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
+          <div @click="jumpTo('explore', 'dashboards')" :class="{'menu-item-active' :activeIndex == 'explore'}">{{$t('dashboard.metricPreview.title')}}</div>
         </el-menu-item>
       </el-submenu>
 
       <el-submenu index="3" popper-class="nz-submenu">
         <template slot="title">
           <div v-if="assetData.length == 0">{{$t('overall.asset')}}</div>
-          <div v-else @click="jumpTo('asset')" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
+          <div v-else @click="jumpTo('asset', 3)" :class="{'menu-active' : activeIndex == 'asset'}">{{$t('overall.asset')}}</div>
         </template>
         <template>
           <el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
@@ -74,7 +74,7 @@
       <el-submenu index="2" popper-class="nz-submenu">
         <template slot="title">
           <div v-if="projectData.length == 0">{{$t('overall.project')}}</div>
-          <div v-else @click="jumpToProject(projectData[0], 0)" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
+          <div v-else @click="jumpToProject(projectData[0])" :class ="activeIndex == 'project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
         </template>
         <template>
           <el-menu-item v-if="projectData.length == 0" index="2-0"><div @click="createBox({type: 1})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createProject")}}</div></el-menu-item>
@@ -88,44 +88,44 @@
           </template>
         </template>
       </el-submenu>
-      <el-submenu index="4-0" popper-class="nz-submenu">
+      <el-submenu index="4" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' || activeIndex == 'alertConfig' ? 'menu-active' :''">{{$t('overall.alert')}}</div>
+          <div @click="jumpTo('alertList', 'alerts')" :class ="activeIndex == 'alertList' || activeIndex == 'alertConfig' ? 'menu-active' :''">{{$t('overall.alert')}}</div>
         </template>
         <el-menu-item index="4-1">
-          <div @click="jumpTo('alertList')" :class ="activeIndex == 'alertList' ? 'menu-item-active' :''">{{$t('alert.message')}}</div>
+          <div @click="jumpTo('alertList', 'alerts')" :class ="activeIndex == 'alertList' ? 'menu-item-active' :''">{{$t('alert.message')}}</div>
         </el-menu-item>
         <el-menu-item index="4-2">
-          <div @click="jumpTo('alertConfig')" :class ="activeIndex == 'alertConfig' ? 'menu-item-active' :''">{{$t('alert.rule')}}</div>
+          <div @click="jumpTo('alertConfig', 'alerts')" :class ="activeIndex == 'alertConfig' ? 'menu-item-active' :''">{{$t('alert.rule')}}</div>
         </el-menu-item>
       </el-submenu>
       <el-submenu index="5" popper-class="nz-submenu">
         <template slot="title">
-          <div @click="jumpTo('account')" :class ="activeIndex == 'account' || activeIndex == 'promServer' || activeIndex == 'dc' || activeIndex == 'model' || activeIndex == 'mib' || activeIndex == 'system' || activeIndex == 'terminallog' || activeIndex == 'operationlog' ? 'menu-active' :''">{{$t('overall.config')}}</div>
+          <div @click="jumpTo('account', 'settings')" :class ="activeIndex == 'account' || activeIndex == 'promServer' || activeIndex == 'dc' || activeIndex == 'model' || activeIndex == 'mib' || activeIndex == 'system' || activeIndex == 'terminallog' || activeIndex == 'operationlog' ? 'menu-active' :''">{{$t('overall.config')}}</div>
         </template>
         <el-menu-item index="5-0">
-          <div @click="jumpTo('account')" :class="{'menu-item-active' :(activeIndex == 'account' )}">{{$t('config.account.account')}}</div>
+          <div @click="jumpTo('account', 'settings')" :class="{'menu-item-active' :(activeIndex == 'account' )}">{{$t('config.account.account')}}</div>
         </el-menu-item>
         <el-menu-item index="5-1">
-          <div @click="jumpTo('promServer')" :class="{'menu-item-active' :(activeIndex == 'promServer' )}">{{$t('config.promServer.promServerList')}}</div>
+          <div @click="jumpTo('promServer', 'settings')" :class="{'menu-item-active' :(activeIndex == 'promServer' )}">{{$t('config.promServer.promServerList')}}</div>
         </el-menu-item>
         <el-menu-item index="5-2">
-          <div @click="jumpTo('dc')" :class="{'menu-item-active' :(activeIndex == 'dc' )}">{{$t('config.dc.dc')}}</div>
+          <div @click="jumpTo('dc', 'settings')" :class="{'menu-item-active' :(activeIndex == 'dc' )}">{{$t('config.dc.dc')}}</div>
         </el-menu-item>
         <el-menu-item index="5-3">
-          <div @click="jumpTo('model')" :class="{'menu-item-active' :(activeIndex == 'model' )}">{{$t('config.model.model')}}</div>
+          <div @click="jumpTo('model', 'settings')" :class="{'menu-item-active' :(activeIndex == 'model' )}">{{$t('config.model.model')}}</div>
         </el-menu-item>
         <el-menu-item index="5-4">
-          <div @click="jumpTo('mib')" :class="{'menu-item-active' :(activeIndex == 'mib' )}">{{$t('config.mib.mib')}}</div>
+          <div @click="jumpTo('mib', 'settings')" :class="{'menu-item-active' :(activeIndex == 'mib' )}">{{$t('config.mib.mib')}}</div>
         </el-menu-item>
         <el-menu-item index="5-5">
-          <div @click="jumpTo('system')" :class="{'menu-item-active' :(activeIndex == 'system' )}">{{$t('config.system.system')}}</div>
+          <div @click="jumpTo('system', 'settings')" :class="{'menu-item-active' :(activeIndex == 'system' )}">{{$t('config.system.system')}}</div>
         </el-menu-item>
         <el-menu-item index="5-6">
-          <div @click="jumpTo('terminallog')" :class="{'menu-item-active' :(activeIndex == 'terminallog' )}">{{$t('config.terminallog.terminallog')}}</div>
+          <div @click="jumpTo('terminallog', 'settings')" :class="{'menu-item-active' :(activeIndex == 'terminallog' )}">{{$t('config.terminallog.terminallog')}}</div>
         </el-menu-item>
         <el-menu-item index="5-7">
-          <div @click="jumpTo('operationlog')" :class="{'menu-item-active' :(activeIndex == 'operationlog' )}">{{$t('config.operationlog.operationlog')}}</div>
+          <div @click="jumpTo('operationlog', 'settings')" :class="{'menu-item-active' :(activeIndex == 'operationlog' )}">{{$t('config.operationlog.operationlog')}}</div>
         </el-menu-item>
       </el-submenu>
       <el-submenu index="6" popper-class="nz-submenu">
@@ -278,7 +278,11 @@
       cli(){
         this.$store.commit('openConsole');
       },
-      jumpTo(data) {
+      jumpTo(data, parentMenu) {
+        localStorage.setItem("nz-parent-menu", parentMenu);
+        localStorage.setItem("nz-menu", "/" + data);
+        bus.$emit("parent-menu-change", parentMenu);
+        bus.$emit("menu-change", "/" + data);
         if (data != "asset") {
           this.activeItemIndexes = [];
           this.$store.state.assetData = {selectedData: [], step: 0, type: -1};
@@ -338,13 +342,13 @@
       jumpToAsset(asset) {
         this.activeItemIndex = asset.id;
         this.$store.commit('currentAssetChange', asset);
-        this.jumpTo('asset');
+        this.jumpTo('asset', "assets");
       },
       jumpToProject(p) {
         this.currentProject = p;
         this.$store.commit('currentProjectChange', p);
         this.activeItemIndex = p.id;
-        this.jumpTo('project');
+        this.jumpTo('project', 'projects');
       },
       getAssetData() {
         this.$get('idc', {pageSize:-1}).then(response => {
@@ -418,6 +422,7 @@
         this.rightBox.project.show = true;
       },
       logout() {
+        localStorage.setItem("nz-parent-menu", "dashboards");
         this.$get('logout');
         this.jumpTo('login');
       },
@@ -446,9 +451,11 @@
       // 刷新后有高亮
       let activePath = this.$route.path.slice(1);
       this.activeIndex = activePath;
-      bus.$on("menu-change", (menu) => {
+
-        this.activeIndex = menu;
+      bus.$on("menu-change", menu => {
+        this.activeIndex = menu.split("/")[1];
       });
+
       bus.$on('login', () => {
         this.username = sessionStorage.getItem("nz-username");
         this.refreshLang();
@@ -472,14 +479,13 @@
       },
       linkData(){
         return this.$store.getters.getLinkData;
-      }
+      },
     },
     watch: {
       projectListChange(n) {
         this.getProjectList();
       },
       dcListChange(n) {
-        console.info(n)
         this.getAssetData();
       },
       currentProjectChange(n, o) {

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

@@ -1,22 +1,25 @@
 <template>
-    <div>
+  <div>
-        <Header ref="header"></Header>
+    <Header ref="header"></Header>
-        <div class="content-box" >
+    <!--<div class="content-box" >
-            <router-view/>
+      <router-view/>
-        </div>
+    </div>-->
-        <web-ssh ref="webSsh" ></web-ssh>
+    <left-menu></left-menu>
-    </div>
+    <web-ssh ref="webSsh" ></web-ssh>
+  </div>
 
 </template>
 
 <script>
 import Header from "./header";
 import webSSH from "../cli/webSSH";
+import leftMenu from "./leftMenu";
 export default {
   name: "home",
   components: {
     Header,
-    'web-ssh':webSSH,
+    'web-ssh': webSSH,
+    'left-menu': leftMenu
   }
 }
 </script>

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

@@ -1,35 +1,280 @@
 <template>
-    <div class="content">
+  <div class="content">
-      <div class="content-left left-slot" :class="{'left-slot-shrink':isShrink}">
+    <div class="content-left left-slot" :class="{'left-slot-shrink': isShrink}">
-        <slot name="content-left"></slot>
+      <div class="sidebar-title too-long-split">{{menus[parentMenu].title}}</div>
-        <div  @click="toggleStat" class="bottom-icon">
+      <div class="sidebar-info">
-          <div class="bottom-divider"></div>
+        <template v-if="parentMenu == 'projects'">
-          <div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line':isShrink,'nz-icon nz-icon-push-pin-fill':!isShrink}" :style="{color:!isShrink?'#EE9D3F':''}"></i></div>
+          <el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top: 0px;" ref="projectLeft">
-        </div>
+            <el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
-      </div><div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
+              <template slot="title">
-        <slot name="content-right" ></slot>
+                <div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject($event, item)" :id="'project-module-'+item.id">
+                  <div class="sidebar-info-item-txt">
+                    <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
+                      <span slot="reference" class="">
+                        {{item.name}}
+                      </span>
+                    </el-popover>
+                    <span v-else>{{item.name}}</span>
+                  </div>
+                </div>
+              </template>
+              <div class="sidebar-info sub-sidebar-info" >
+                <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule">
+                  <i class="nz-icon nz-icon-create-square"></i>
+                </div>
+                <template v-else>
+                  <div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
+                    <div :id="`module-${module.id}`" class="item-tip">
+                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
+                      <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
+                      <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="editModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </template>
+        <template v-else-if="parentMenu == 'assets'">
+
+        </template>
+        <template v-else>
+          <div v-for="menu in menus[parentMenu].menu" class="sidebar-info-item" :class="{'sidebar-info-item-active': menu.route == active}" @click="jumpTo(menu.route)">
+            {{menu.name}}
+          </div>
+        </template>
       </div>
+      <div @click="toggleStat" class="bottom-icon">
+        <div class="bottom-divider"></div>
+        <div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line': isShrink, 'nz-icon nz-icon-push-pin-fill': !isShrink}" :style="{color : !isShrink ? '#EE9D3F' : ''}"></i></div>
+      </div>
+    </div><div class="content-right right-slot" :class="{'right-slot-open': isShrink}">
+      <router-view/>
     </div>
+  </div>
 </template>
 
 <script>
+    import bus from "../../libs/bus";
+
     export default {
       name: "leftMenu",
-      props:{
+      props: {
-        resizeFunc:{type:Function}
+        resizeFunc: Function,
       },
-      data(){
+      data() {
         return{
-          isShrink: this.$store.state.leftMenuStat,
+          isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
+          parentMenu: "dashboards",
+          active: "overview",
+
+          projectList: [],
+          moduleList: [],
+          currentProjectTitle: '',
+          currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
+          module: {}, //编辑的module
+          blankModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //空白module
+          currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //用来回显的module
+
+          menus: {
+            settings: {
+              title: this.$t('overall.config'),
+              menu: [
+                {route: '/account', name: this.$t('config.account.account')},
+                {route: '/promServer', name: this.$t('config.promServer.promServerList')},
+                {route: '/dc', name: this.$t('config.dc.dc')},
+                {route: '/model', name: this.$t('config.model.model')},
+                {route: '/mib', name: this.$t('config.mib.mib')},
+                {route: '/system', name: this.$t('config.system.system')},
+                {route: '/terminallog', name: this.$t('config.terminallog.terminallog')},
+                {route: '/operationlog', name: this.$t('config.operationlog.operationlog')},
+              ],
+            },
+            alerts: {
+              title: this.$t('alert.alert'),
+              menu: [
+                {route: '/alertList', name: this.$t('alert.alertList')},
+                {route: '/alertConfig', name: this.$t('alert.alertConfig')},
+              ],
+            },
+            dashboards: {
+              title: this.$t('dashboard.title'),
+              menu: [
+                {route: '/overview', name: this.$t('dashboard.overview.title')},
+                {route: '/panel', name: this.$t('dashboard.panel.title')},
+                {route: '/explore', name: this.$t('dashboard.metricPreview.title')},
+              ],
+            },
+          }
         }
       },
-      methods:{
+      computed: {
-        toggleStat:function(){
+        route() {
-          this.isShrink=!this.isShrink;
+          return this.$route.path;
-          this.$store.commit('setLeftMenuStat',this.isShrink);
+        },
-          if(this.resizeFunc){
+        itemTip() {
+          return function(id, content, ready) {
+            let className = "item-tip-show";
+            this.$nextTick(() => {
+              if (ready) {
+                let cellDom = document.querySelector(`#module-${id}`);
+                let spanDom = document.querySelector(`#module-${id}>span`);
+                if (cellDom.offsetWidth - 16 <= spanDom.offsetWidth) {
+                  document.querySelector(`#module-${id}>.el-popover`).classList.add(className);
+                } else {
+                  document.querySelector(`#module-${id}>.el-popover`).classList.remove(className);
+                }
+              }
+            });
+            return "";
+          }
+        },
+        projectListChange() {
+          return this.$store.state.projectListChange;
+        },
+        moduleListChange() {
+          return this.$store.state.moduleListChange;
+        },
+        currentProjectChange() {
+          return this.$store.state.currentProject;
+        },
+      },
+      watch: {
+        route: {
+          deep: true,
+          immediate: true,
+          handler(n) {
+            this.active = n;
+          }
+        },
+        projectListChange(n) {
+          this.getProjectList();
+        },
+        moduleListChange(n) {
+          this.getModuleList();
+        },
+        endpointListChange(n) {
+          this.getEndpointTableData();
+        },
+        currentProjectChange: {
+          immediate: true,
+          handler(n, o) {
+            if (n && n.id != this.currentProject.id) {
+              this.currentProject = this.projectList.find(p => {
+                return p.id == n.id;
+              });
+              if (this.currentProject && this.currentProject.id) {
+                this.detailProject(null, this.currentProject);
+              }
+            }
+          },
+        },
+        currentProject(n, o) {
+          bus.$emit("current-project-change", n);
+        },
+        currentModule(n, o) {
+          bus.$emit("current-module-change", n);
+        },
+      },
+      mounted() {
+        Promise.all([this.getProjectList(), this.getModuleList()]).then(response => {
+          let cacheParentMenu = localStorage.getItem('nz-parent-menu');
+          let cacheMenu = localStorage.getItem('nz-menu');
+          if (cacheParentMenu) {
+            this.parentMenu = cacheParentMenu;
+          } else {
+            this.parentMenu = "dashboards";
+          }
+          if (cacheMenu) {
+            this.active = cacheMenu;
+          } else {
+            if (this.parentMenu == 'projects') {
+              this.projectList.length > 0 && (this.active = this.projectList[0].name)
+            } else if (this.parentMenu == 'assets') {
+
+            } else {
+              this.active = this.menus[this.parentMenu].menu[0].route;
+            }
+          }
+          bus.$on("parent-menu-change", parentMenu => {
+            this.parentMenu = parentMenu;
+          });
+          bus.$on("menu-change", menu => {
+            this.active = menu;
+          });
+        });
+      },
+      methods: {
+        toggleStat() {
+          this.isShrink = !this.isShrink;
+          localStorage.setItem('nz-left-menu-shrink', this.isShrink);
+          if (this.resizeFunc) {
             this.resizeFunc();
           }
+        },
+        getProjectList() {
+          return new Promise(resolve => {
+            this.$get('project', {pageSize: -1}).then(response=>{
+              if(response.code == 200){
+                this.projectList = response.data.list;
+              }
+              resolve(this.projectList);
+            });
+          });
+        },
+        getProjectModule(projectId) {
+          let moduleList = JSON.parse(JSON.stringify(this.moduleList));
+          return moduleList.filter((item,index) => {
+            return item.project.id == projectId;
+          })
+        },
+        getModuleList() {
+          return new Promise(resolve => {
+            this.$get('module', { pageSize: -1, pageNo: 1}).then(response => {
+              if (response.code === 200) {
+                this.moduleList = response.data.list;
+                for (let i = 0; i < this.moduleList.length; i++) {
+                  try {
+                    let tempObj = JSON.parse(this.moduleList[i].param);
+                    this.$set(this.moduleList[i], 'paramObj', []);
+                    for (let k in tempObj) {
+                      this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
+                    }
+                  } catch (err) {}
+                }
+              }
+              resolve(this.moduleList);
+            });
+          });
+        },
+        //左侧module列表选中切换
+        changeModule(project, module) {
+          this.currentModule = module;
+          this.currentProject = project;
+        },
+        detailProject(event, project) {
+          bus.$emit("project-pageType", "project");
+          if(event) {
+            if(project) {
+              this.currentProject = project;
+            }
+          } else {
+            this.currentProjectTitle = project.id + "";
+          }
+          this.currentModule = {};
+        },
+
+
+        jumpTo(route) {
+          bus.$emit("menu-change", route);
+          localStorage.setItem('nz-parent-menu', this.parentMenu);
+          localStorage.setItem('menu-change', route);
+          this.$router.push({
+            path: route,
+            query: {
+              t: +new Date()
+            }
+          });
         }
       },
     }
@@ -37,8 +282,8 @@
 
 <style scoped lang="scss">
   .content{
-    height: 100%;
+    position: relative;
-    position:relative;
+    height: calc(100% - 50px);
   }
   .slot-content{
     height: 100%;

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

@@ -5,103 +5,90 @@
 </style>
 <template>
   <div class="config">
-    <left-menu >
+    <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-      <div slot="content-left" class="slot-content">
+      <div class="main-modal"></div>
-        <div class="sidebar-title">{{$t('alert.alert')}}</div>
+      <div class="top-tools" v-show="bottomBox.mainResizeShow">
-        <div class="sidebar-info">
+        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-          <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')" id="alert-jump-alertlist">
+          <div class="top-tool-search float-right">
-            {{$t('alert.alertList')}}
+            <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
           </div>
-          <div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div>
+          <button id="alert-add" @click="add"  :title="$t('overall.createAlertRule')"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
+            <i class="nz-icon-create-square nz-icon"></i>
+          </button>
         </div>
+        <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
-      <div slot="content-right" class="slot-content">
+      <el-table
-        <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
+        class="nz-table"
-          <div class="main-modal"></div>
+        :data="tableData"
-          <div class="top-tools" v-show="bottomBox.mainResizeShow">
+        border
-            <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
+        v-show="bottomBox.mainResizeShow"
-              <div class="top-tool-search float-right">
+        ref="alertRuleTable"
-                <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
+        tooltip-effect="light"
-              </div>
+        :height="mainTableHeight"
-              <button id="alert-add" @click="add"  :title="$t('overall.createAlertRule')"
+        v-scrollBar:el-table="'large'"
-                      class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
+        v-loading="tools.loading"
-                <i class="nz-icon-create-square nz-icon"></i>
+        :cell-class-name="messageStyle"
-              </button>
+        style="width: 100%;"
+        @sort-change="tableDataSort"
+      >
+        <el-table-column
+          :resizable="false"
+          v-for="(item, index) in tools.tablelable"
+          v-if="item.show"
+          :width="item.width"
+          :key="`col-${index}`"
+          :label="item.label"
+          show-overflow-tooltip
+          min-width="110px"
+          :sort-orders="['ascending', 'descending']"
+          :sortable="sortableShow(item.prop)"
+          :prop="propTitle(item.prop)"
+        >
+          <template slot-scope="scope" :column="item">
+            <div v-if="item.prop == 'option'" class="content-right-options">
+              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>&nbsp;
+              <span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>&nbsp;
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i  class="el-icon-delete"></i></span>
             </div>
-            <div class="pagination-top pagination-top-hide display-none"></div>
+            <span v-else-if="item.prop == 'severity'">
-          </div>
+            <span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'high'})}}</span>
-          <el-table
+            <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'medium'})}}</span>
-            class="nz-table"
+            <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'low'})}}</span>
-            :data="tableData"
+          </span>
-            border
+            <template v-else-if="item.prop == 'alertNum'">
-            v-show="bottomBox.mainResizeShow"
+              <span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
-            ref="alertRuleTable"
+            </template>
-            tooltip-effect="light"
+            <template v-else-if="item.prop == 'threshold'">
-            :height="mainTableHeight"
+              <span  >{{formatThreshold(scope.row[item.prop],scope.row.unit)}}</span>
-            v-scrollBar:el-table="'large'"
+            </template>
-            v-loading="tools.loading"
+            <template v-else-if="item.prop == 'receivers'">
-            :cell-class-name="messageStyle"
+              <el-tag effect="dark" v-if="user.userName" :key="index" size="mini" v-for="(user, index) in scope.row[item.prop]" class="alert-rule-tag">{{user.userName}}&nbsp;</el-tag>
-            style="width: 100%;"
+            </template>
-            @sort-change="tableDataSort"
+            <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
-          >
+            <template v-else>-</template>
-            <el-table-column
+          </template>
-              :resizable="false"
+        </el-table-column>
-              v-for="(item, index) in tools.tablelable"
+        <el-table-column width="28" :resizable="false">
-              v-if="item.show"
+          <template slot="header" slot-scope="scope">
-              :width="item.width"
+          <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-              :key="`col-${index}`"
+            <i class="nz-icon nz-icon-gear"></i>
-              :label="item.label"
+          </span>
-              show-overflow-tooltip
+          </template>
-              min-width="110px"
+          <template v-slot="scope">
-              :sort-orders="['ascending', 'descending']"
+            <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-              :sortable="sortableShow(item.prop)"
+          </template>
-              :prop="propTitle(item.prop)"
+        </el-table-column>
-            >
+      </el-table>
-              <template slot-scope="scope" :column="item">
+      <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-                <div v-if="item.prop == 'option'" class="content-right-options">
+        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-                  <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>&nbsp;
-                  <span v-if="scope.row.buildIn != 1" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'alert-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>&nbsp;
-                  <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'alert-del-'+scope.row.id"><i  class="el-icon-delete"></i></span>
-                </div>
-                <span v-else-if="item.prop == 'severity'">
-                <span v-if="scope.row[item.prop] == 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'high'})}}</span>
-                <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'medium'})}}</span>
-                <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{$CONSTANTS.alertMessage.severityData.find(s => {return s.key == 'low'})}}</span>
-              </span>
-                <template v-else-if="item.prop == 'alertNum'">
-                  <span class="link" @click="queryMessage(scope.row)">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
-                </template>
-                <template v-else-if="item.prop == 'threshold'">
-                  <span  >{{formatThreshold(scope.row[item.prop],scope.row.unit)}}</span>
-                </template>
-                <template v-else-if="item.prop == 'receivers'">
-                  <el-tag effect="dark" v-if="user.userName" :key="index" size="mini" v-for="(user, index) in scope.row[item.prop]" class="alert-rule-tag">{{user.userName}}&nbsp;</el-tag>
-                </template>
-                <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
-                <template v-else>-</template>
-              </template>
-            </el-table-column>
-            <el-table-column width="28" :resizable="false">
-              <template slot="header" slot-scope="scope">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                <i class="nz-icon nz-icon-gear"></i>
-              </span>
-              </template>
-              <template v-slot="scope">
-                <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-              </template>
-            </el-table-column>
-          </el-table>
-          <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-            <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-          </div>
-        </div>
-        <transition name="el-zoom-in-bottom">
-          <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.alertRule" :is-full-screen="bottomBox.isFullScreen" :from="'alertRule'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.ruleDetail"
-                      @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
-        </transition>
       </div>
-    </left-menu>
+    </div>
+    <transition name="el-zoom-in-bottom">
+      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.alertRule" :is-full-screen="bottomBox.isFullScreen" :from="'alertRule'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.ruleDetail"
+                  @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+    </transition>
     <transition name="right-box">
       <alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
     </transition>

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

@@ -18,53 +18,33 @@
 </style>
 <template>
   <div class="list">
-    <left-menu >
+    <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
-      <div slot="content-left" class="slot-content">
+      <div class="top-tools" v-show="mainResizeShow">
-      <div class="sidebar-title">{{$t('alert.alert')}}</div>
+        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
-      <div class="sidebar-info">
+          <div class="top-tool-search">
-        <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('alert.alertList')}}</div>
+            <search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
-        <div class="sidebar-info-item" @click="jumpTo('alertConfig')" id="alert-jump-config">
+          </div>
-          {{$t('alert.alertConfig')}}
+          <button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
+            <i class="el-icon-download"></i>
+          </button>
         </div>
+        <div class="pagination-top pagination-top-hide display-none"></div>
+      </div>
+      <alertMessageTable
+        :tableData="tableData"
+        :loading="loading"
+        :tableHeight="mainTableHeight"
+        :tableId="tableId"
+        @tableDataSort="tableDataSort"
+        @deleteMessage="deleteMessage"
+      ></alertMessageTable>
+      <div class="pagination-bottom" v-show="!showSubList">
+        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
     </div>
-      <div slot="content-right" class="slot-content">
+    <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab.sync="targetTab" :detailList="tabDetailList"
-        <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
+                @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
-          <div class="top-tools" v-show="mainResizeShow">
-            <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
-              <div class="top-tool-search">
-                <search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
-              </div>
-              <button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"
-                      class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
-                <i class="el-icon-download"></i>
-              </button>
-            </div>
-            <div class="pagination-top pagination-top-hide display-none"></div>
-          </div>
-          <alertMessageTable
-            :tableData="tableData"
-            :loading="loading"
-            :tableHeight="mainTableHeight"
-            :tableId="tableId"
-            @tableDataSort="tableDataSort"
-            @deleteMessage="deleteMessage"
-          ></alertMessageTable>
-          <div class="pagination-bottom" v-show="!showSubList">
-            <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-          </div>
-        </div>
-        <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab.sync="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>-->
-    <!--<asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl"
-                     ref="assetEditUnit"></asset-edit-unit>-->
-    <!--<asset-box :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl"
-               ref="assetEditUnit"></asset-box>-->
     <element-set
       v-clickoutside="elementsetHide"
       :table-title="tableTitle"
@@ -127,7 +107,6 @@
   import alertRuleInfo from '../../common/alert/alertRuleInfo'
   import alertLabel from '../../common/alert/alertLabel'
   import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
-  var vm;
   export default {
     name: "alertList",
     components: {
@@ -138,7 +117,6 @@
       'alertMessageTable':alertMessageTable,
     },
     data() {
-      vm = this;
       return {
         loading: false,
         /*二级列表相关*/

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

@@ -5,124 +5,93 @@
 </style>
 <template>
   <div class="account">
-    <left-menu >
+    <!-- 主页面 -->
-    <div slot="content-left" class="slot-content">
+    <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-      <div class="sidebar-title">{{$t('overall.config')}}</div>
+      <!-- 顶部工具栏 -->
-      <div class="sidebar-info">
+      <div class="main-modal"></div>
-        <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('config.account.account')}}</div>
+      <div class="top-tools" v-show="bottomBox.mainResizeShow">
-        <div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
+        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-          {{$t('config.promServer.promServerList')}}
+          <div class="top-tool-search">
-        </div>
+            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
-        <div class="sidebar-info-item" @click="jumpTo('dc')" id="account-jump-dc">
-          {{$t('config.dc.dc')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('model')" id="account-jump-model">
-          {{$t('config.model.model')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('mib')" id="account-jump-mib">
-          {{$t('config.mib.mib')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('system')" id="account-jump-system">
-          {{$t('config.system.system')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('terminallog')" id="account-jump-terminallog">
-          {{$t('config.terminallog.terminallog')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('operationlog')" id="account-jump-operation">
-          {{$t('config.operationlog.operationlog')}}
-        </div>
-      </div>
-    </div>
-    <div slot="content-right" class="slot-content">
-      <!-- 主页面 -->
-      <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-        <!-- 顶部工具栏 -->
-        <div class="main-modal"></div>
-        <div class="top-tools" v-show="bottomBox.mainResizeShow">
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-            <div class="top-tool-search">
-              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
-            </div>
-            <button type="button" @click="add" :title="$t('overall.createAccount')"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="account-add">
-              <i class="nz-icon-create-square nz-icon"></i>
-            </button>
           </div>
-          <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+          <button type="button" @click="add" :title="$t('overall.createAccount')"
-          <div class="pagination-top pagination-top-hide display-none"></div>
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="account-add">
-        </div>
+            <i class="nz-icon-create-square nz-icon"></i>
-        <el-table
+          </button>
-          class="nz-table"
-          :data="tableData"
-          border
-          v-show="bottomBox.mainResizeShow"
-          ref="accountTable"
-          :height="mainTableHeight"
-          v-loading="tools.loading"
-          v-scrollBar:el-table="'large'"
-          style="width: 100%;"
-          @sort-change="tableDataSort">
-          <el-table-column
-            :resizable="false"
-            v-for="(item, index) in tools.tablelable"
-            v-if="item.show"
-            :width="item.width"
-            :key="`col-${index}`"
-            :label="item.label"
-            :prop="item.prop"
-            :sort-orders="['ascending', 'descending']"
-          >
-            <template slot-scope="scope" :column="item">
-              <div v-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
-                &nbsp;
-                <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-                &nbsp;
-                <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
-              </div>
-              <span v-else-if="item.prop == 'lang'">
-                              {{scope.row[item.prop] == 'en' ? 'English' : ''}}
-                              {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
-                              {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
-                          </span>
-              <span v-else-if="item.prop == 'receiver'">
-                              <template v-for="rec in scope.row[item.prop]">{{rec.name}}&nbsp;&nbsp;</template>
-                          </span>
-              <span v-else-if="item.prop == 'status'">
-                              <el-switch
-                                v-model="scope.row.status"
-                                active-value="1"
-                                inactive-value="0"
-                                active-color="#ee9d3f"
-                                :disabled="isCurrentUser(scope.row.username)"
-                                @change="(val)=>{statusChange(scope.row)}">
-                              </el-switch>
-                          </span>
-              <span v-else>{{scope.row[item.prop]}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column width="28">
-            <template slot="header" slot-scope="scope" :resizable="false">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                <i class="nz-icon nz-icon-gear"></i>
-              </span>
-            </template>
-            <template v-slot="scope">
-              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-          <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
+        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
+        <div class="pagination-top pagination-top-hide display-none"></div>
+      </div>
+      <el-table
+        class="nz-table"
+        :data="tableData"
+        border
+        v-show="bottomBox.mainResizeShow"
+        ref="accountTable"
+        :height="mainTableHeight"
+        v-loading="tools.loading"
+        v-scrollBar:el-table="'large'"
+        style="width: 100%;"
+        @sort-change="tableDataSort">
+        <el-table-column
+          :resizable="false"
+          v-for="(item, index) in tools.tablelable"
+          v-if="item.show"
+          :width="item.width"
+          :key="`col-${index}`"
+          :label="item.label"
+          :prop="item.prop"
+          :sort-orders="['ascending', 'descending']"
+        >
+          <template slot-scope="scope" :column="item">
+            <div v-if="item.prop == 'option'" class="content-right-options">
+              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+              &nbsp;
+              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'account-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+              &nbsp;
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+            </div>
+            <span v-else-if="item.prop == 'lang'">
+                            {{scope.row[item.prop] == 'en' ? 'English' : ''}}
+                            {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
+                            {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
+                        </span>
+            <span v-else-if="item.prop == 'receiver'">
+                            <template v-for="rec in scope.row[item.prop]">{{rec.name}}&nbsp;&nbsp;</template>
+                        </span>
+            <span v-else-if="item.prop == 'status'">
+                            <el-switch
+                              v-model="scope.row.status"
+                              active-value="1"
+                              inactive-value="0"
+                              active-color="#ee9d3f"
+                              :disabled="isCurrentUser(scope.row.username)"
+                              @change="(val)=>{statusChange(scope.row)}">
+                            </el-switch>
+                        </span>
+            <span v-else>{{scope.row[item.prop]}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column width="28">
+          <template slot="header" slot-scope="scope" :resizable="false">
+            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+          <template v-slot="scope">
+            <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-bottom" v-show="!bottomBox.showSubList">
+        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
-      <!-- 底部上滑框 -->
-      <transition name="el-zoom-in-bottom">
-        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.user" :is-full-screen="bottomBox.isFullScreen" :from="'account'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.userDetail"
-                    @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
-      </transition>
     </div>
-    </left-menu>
+    <!-- 底部上滑框 -->
+    <transition name="el-zoom-in-bottom">
+      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.user" :is-full-screen="bottomBox.isFullScreen" :from="'account'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.userDetail"
+                  @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+    </transition>
     <transition name="right-box">
       <account-box v-if="rightBox.show" :user="user" @close="closeRightBox"></account-box>
     </transition>
@@ -253,15 +222,6 @@
         let vm = this;
         this.$bottomBoxWindow.listResize(vm, e);
       },
-      jumpTo(data, id) {
-        bus.$emit("menu-change", data);
-        this.$router.push({
-          path: "/" + data,
-          query: {
-            t: +new Date()
-          }
-        });
-      },
       convertToDetail(obj) {
         let detail = [];
         detail.push({label: this.$t("config.account.account"), value: obj.username});
@@ -347,14 +307,6 @@
           this.getTableData();
         });
       },
-      jumpTo(data, id) {
-        this.$router.push({
-          path: "/" + data,
-          query: {
-            t: +new Date()
-          }
-        });
-      },
       esc() {
         this.rightBox.show = false;
       },

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

@@ -5,139 +5,106 @@
 </style>
 <template>
   <div class="dc" >
-    <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">
-          {{$t('config.account.account')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
-          {{$t('config.promServer.promServerList')}}
-        </div>
-        <div class="sidebar-info-item sidebar-info-item-active"  id="dc-jump-dc">
-          {{$t('config.dc.dc')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('model')" id="dc-jump-model">
-          {{$t('config.model.model')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('mib')" id="dc-jump-mib">
-          {{$t('config.mib.mib')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('system')" id="dc-jump-system">
-          {{$t('config.system.system')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('terminallog')" id="dc-jump-terminallog">
-          {{$t('config.terminallog.terminallog')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('operationlog')" id="account-jump-operation">
-          {{$t('config.operationlog.operationlog')}}
-        </div>
-      </div>
-    </div>
     <!--dc table start-->
-    <div slot="content-right" class="slot-content">
+    <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-      <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
+      <div class="main-modal"></div>
-        <div class="main-modal"></div>
+      <div class="top-tools" v-show="bottomBox.mainResizeShow">
-        <div class="top-tools" v-show="bottomBox.mainResizeShow">
+        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
+          <div class="top-tool-search">
-            <div class="top-tool-search">
+            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
-              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
-            </div>
-            <button type="button" @click="add" :title="$t('overall.createDatacenter')"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
-              <i class="nz-icon-create-square nz-icon"></i>
-            </button>
           </div>
-          <div class="pagination-top pagination-top-hide display-none"></div>
+          <button type="button" @click="add" :title="$t('overall.createDatacenter')"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
+            <i class="nz-icon-create-square nz-icon"></i>
+          </button>
         </div>
-        <el-table
+        <div class="pagination-top pagination-top-hide display-none"></div>
-          class="nz-table"
+      </div>
-          :data="tableData"
+      <el-table
-          border
+        class="nz-table"
-          tooltip-effect="light"
+        :data="tableData"
-          v-show="bottomBox.mainResizeShow"
+        border
-          v-scrollBar:el-table="'large'"
+        tooltip-effect="light"
-          :height="mainTableHeight"
+        v-show="bottomBox.mainResizeShow"
-          ref="dcTable"
+        v-scrollBar:el-table="'large'"
-          v-loading="tools.loading"
+        :height="mainTableHeight"
-          :cell-class-name="assetStatClassName"
+        ref="dcTable"
-          style="width: 100%;"
+        v-loading="tools.loading"
-          @sort-change="tableDataSort">
+        :cell-class-name="assetStatClassName"
-          <el-table-column
+        style="width: 100%;"
-            :resizable="false"
+        @sort-change="tableDataSort">
-            show-overflow-tooltip
+        <el-table-column
-            v-for="(item, index) in tools.tablelable"
+          :resizable="false"
-            v-if="item.show"
+          show-overflow-tooltip
-            :width="item.width"
+          v-for="(item, index) in tools.tablelable"
-            :key="`col-${index}`"
+          v-if="item.show"
-            :label="item.label"
+          :width="item.width"
-            :sortable="sortableShow(item.prop)"
+          :key="`col-${index}`"
-            :prop="propTitle(item.prop)"
+          :label="item.label"
-          >
+          :sortable="sortableShow(item.prop)"
-            <template slot-scope="scope" :column="item">
+          :prop="propTitle(item.prop)"
-              <div v-if="item.prop == 'option'" class="content-right-options">
+        >
-                <!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'dc-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+          <template slot-scope="scope" :column="item">
-                &nbsp;-->
+            <div v-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+              <!--<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'dc-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
-                &nbsp;
+              &nbsp;-->
-                <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-                &nbsp;
+              &nbsp;
-                <span :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" :id="'dc-setting-'+scope.row.id" ><i class="el-icon-setting"></i></span>
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
-              </div>
+              &nbsp;
-              <template v-else-if="item.prop == 'principal'">
+              <span :title="$t('config.dc.traffic.title')" @click="configTraffic(scope.row)" class="content-right-option" :id="'dc-setting-'+scope.row.id" ><i class="el-icon-setting"></i></span>
-                <template v-if="scope.row.principal">
+            </div>
-                  <template v-for="item in userData">
+            <template v-else-if="item.prop == 'principal'">
-                    <template v-if="scope.row.principal == item.userId">{{item.username}}</template>
+              <template v-if="scope.row.principal">
-                  </template>
+                <template v-for="item in userData">
+                  <template v-if="scope.row.principal == item.userId">{{item.username}}</template>
                 </template>
-                <template v-else>-</template>
               </template>
-              <template v-else-if="item.prop == 'area'">
-                <template v-if="scope.row.area">{{scope.row.area.name}}</template>
-                <template v-else>-</template>
-              </template>
-              <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat">
-                <el-popover
-                  placement="top"
-                  trigger="hover"
-                  :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock">
-                  <div slot="reference" class="dc-asset-states">
-                    <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
-                    <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
-                    <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
-                  </div>
-                </el-popover>
-
-              </template >
-              <template v-else-if="item.prop == 'cabinetNum'">
-                <span class="link" @click="showCabinet(scope.row)">{{scope.row[item.prop]}}</span>
-              </template>
-              <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
               <template v-else>-</template>
             </template>
-          </el-table-column>
+            <template v-else-if="item.prop == 'area'">
-          <el-table-column width="28" :resizable="false">
+              <template v-if="scope.row.area">{{scope.row.area.name}}</template>
-            <template slot="header" slot-scope="scope">
+              <template v-else>-</template>
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                <i class="nz-icon nz-icon-gear"></i>
-              </span>
             </template>
-            <template v-slot="scope">
+            <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat">
-              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+              <el-popover
+                placement="top"
+                trigger="hover"
+                :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock">
+                <div slot="reference" class="dc-asset-states">
+                  <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
+                  <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
+                  <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
+                </div>
+              </el-popover>
+
+            </template >
+            <template v-else-if="item.prop == 'cabinetNum'">
+              <span class="link" @click="showCabinet(scope.row)">{{scope.row[item.prop]}}</span>
             </template>
-          </el-table-column>
+            <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-        </el-table>
+            <template v-else>-</template>
-        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
+          </template>
-          <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+        </el-table-column>
-        </div>
+        <el-table-column width="28" :resizable="false">
+          <template slot="header" slot-scope="scope">
+            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+          <template v-slot="scope">
+            <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-bottom" v-show="!bottomBox.showSubList">
+        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
       <transition name="el-zoom-in-bottom">
         <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.dc" :is-full-screen="bottomBox.isFullScreen" :from="'dc'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.dcDetail"
                      @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
       </transition>
     </div>
-    </left-menu>
     <!--dc table end-->
     <element-set
       v-if="tools.showElementSet"

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

@@ -5,120 +5,89 @@
 </style>
 <template>
   <div class="mib">
-    <left-menu >
+    <template v-if="showTab == 'file'">
-      <div slot="content-left" class="slot-content">
+      <div class="top-tools">
-      <div class="sidebar-title">{{$t('overall.config')}}</div>
+        <div class="nz-tab top-tool-main-right top-tool-main-right-to-left" style="width: 300px">
-      <div class="sidebar-info">
+          <div class="nz-tab-item-box" id="module-type-1">
-        <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="mib-jump-account">
+            <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibFiles")}}</div>
-          {{$t('config.account.account')}}
+          </div>
+          <div @click="showTab = 'browser'" class="nz-tab-item-box" id="module-type-2">
+            <div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
+          </div>
         </div>
-        <div class="sidebar-info-item" @click="jumpTo('promServer')" id="mib-jump-prom">{{$t('config.promServer.promServerList')}}</div>
+        <div class="top-tool-main-right">
-        <div class="sidebar-info-item" @click="jumpTo('dc')" id="mib-jump-dc">
+          <div class="top-tool-search">
-          {{$t('config.dc.dc')}}
+            <search-input :searchMsg="searchMsg" @search="search"></search-input>
-        </div>
+          </div>
-        <div class="sidebar-info-item " id="mib-jump-model" @click="jumpTo('model')">
+          <button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createMib')"
-          {{$t('config.model.model')}}
+                  id="mib-add">
-        </div>
+            <i class="nz-icon-create-square nz-icon"></i>
-        <div class="sidebar-info-item sidebar-info-item-active" id="mib-jump-mib">
+          </button>
-          {{$t('config.mib.mib')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('system')" id="mib-jump-system">
-          {{$t('config.system.system')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('terminallog')" id="mib-jump-terminallog">
-          {{$t('config.terminallog.terminallog')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('operationlog')" id="account-jump-operation">
-          {{$t('config.operationlog.operationlog')}}
         </div>
       </div>
-    </div>
+      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort">
-    <div slot="content-right" class="slot-content">
+        <el-table-column :resizable="false" v-for="(item, index) in tools.tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
-      <template v-if="showTab == 'file'">
+                         :key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)"
-        <div class="top-tools">
+                         :prop="propTitle(item.prop)"
-          <div class="nz-tab top-tool-main-right top-tool-main-right-to-left" style="width: 300px">
+                         :sort-orders="['ascending', 'descending']">
-            <div class="nz-tab-item-box" id="module-type-1">
+          <template slot-scope="scope" :column="item">
-              <div class="nz-tab-item nz-tab-item-active">{{$t("config.mib.mibFiles")}}</div>
+            <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
-            </div>
+            <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
-            <div @click="showTab = 'browser'" class="nz-tab-item-box" id="module-type-2">
+              <span class="link" @click="downloadMib(scope.row.id)">{{scope.row[item.prop]}}</span>
-              <div class="nz-tab-item">{{$t("config.mib.mibBrowser")}}</div>
+            </template>
-            </div>
+            <template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
-          </div>
+              <div style="height: 100%">
-          <div class="top-tool-main-right">
+                <el-scrollbar style="height: 100%">
-            <div class="top-tool-search">
+                  <div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content">
-              <search-input :searchMsg="searchMsg" @search="search"></search-input>
+                    <el-popover trigger="hover" placement="top" >
-            </div>
+                      <div>
-            <button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createMib')"
-                    id="mib-add">
-              <i class="nz-icon-create-square nz-icon"></i>
-            </button>
-          </div>
-        </div>
-        <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort">
-          <el-table-column :resizable="false" v-for="(item, index) in tools.tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
-                           :key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)"
-                           :prop="propTitle(item.prop)"
-                           :sort-orders="['ascending', 'descending']">
-            <template slot-scope="scope" :column="item">
-              <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
-              <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
-                <span class="link" @click="downloadMib(scope.row.id)">{{scope.row[item.prop]}}</span>
-              </template>
-              <template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
-                <div style="height: 100%">
-                  <el-scrollbar style="height: 100%">
-                    <div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content">
-                      <el-popover trigger="hover" placement="top" >
                         <div>
-                          <div>
+                          <span>{{$t('overall.name')}}:</span>
-                            <span>{{$t('overall.name')}}:</span>
+                          <span>{{n.name}}</span>
-                            <span>{{n.name}}</span>
-                          </div>
-                          <div>
-                            <span>{{$t('config.mib.vendor')}}:</span>
-                            <span>{{n.vendor}}</span>
-                          </div>
-                          <div>
-                            <span>{{$t('config.mib.type')}}:</span>
-                            <span>{{n.type}}</span>
-                          </div>
                         </div>
-                        <template slot="reference">
+                        <div>
-                          <div  class="detail-item-content" v-if="i < scope.row['modelsDetail'].length-1">{{n.name}},</div>
+                          <span>{{$t('config.mib.vendor')}}:</span>
-                          <div  class="detail-item-content" v-else>{{n.name}}</div>
+                          <span>{{n.vendor}}</span>
-                        </template>
+                        </div>
-                      </el-popover>
+                        <div>
-                    </div>
+                          <span>{{$t('config.mib.type')}}:</span>
-                  </el-scrollbar>
+                          <span>{{n.type}}</span>
-                </div>
+                        </div>
-              </template>
+                      </div>
-              <div v-else-if="item.prop == 'option'" class="content-right-options">
+                      <template slot="reference">
-                <span :title="$t('overall.download')" @click="downloadMib(scope.row)" class="content-right-option" :id="'mib-download-'+scope.row.id"><i class="el-icon-download"></i></span>
+                        <div  class="detail-item-content" v-if="i < scope.row['modelsDetail'].length-1">{{n.name}},</div>
-                &nbsp;
+                        <div  class="detail-item-content" v-else>{{n.name}}</div>
-                <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'mib-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+                      </template>
-                &nbsp;
+                    </el-popover>
-                <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'mib-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+                  </div>
+                </el-scrollbar>
               </div>
-              <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-              <template v-else>-</template>
             </template>
-          </el-table-column>
+            <div v-else-if="item.prop == 'option'" class="content-right-options">
-          <el-table-column :resizable="false" width="28">
+              <span :title="$t('overall.download')" @click="downloadMib(scope.row)" class="content-right-option" :id="'mib-download-'+scope.row.id"><i class="el-icon-download"></i></span>
-            <template slot="header" slot-scope="scope">
+              &nbsp;
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'mib-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-                <i class="nz-icon nz-icon-gear"></i>
+              &nbsp;
-              </span>
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'mib-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
-            </template>
+            </div>
-            <template v-slot="scope">
+            <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+            <template v-else>-</template>
-            </template>
+          </template>
-          </el-table-column>
+        </el-table-column>
-        </el-table>
+        <el-table-column :resizable="false" width="28">
-        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+          <template slot="header" slot-scope="scope">
-      </template>
+            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-      <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
+              <i class="nz-icon nz-icon-gear"></i>
-    </div>
+            </span>
-    </left-menu>
+          </template>
+          <template v-slot="scope">
+            <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+    </template>
+    <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
     <element-set
       v-if="tools.showElementSet"
       v-clickoutside="elementsetHide"

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

@@ -5,115 +5,84 @@
 </style>
 <template>
   <div class="model">
-    <left-menu >
+    <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-      <div slot="content-left" class="slot-content">
+      <div class="main-modal"></div>
-      <div class="sidebar-title">{{$t('overall.config')}}</div>
+      <div class="top-tools" v-show="bottomBox.mainResizeShow">
-      <div class="sidebar-info">
+        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-        <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="model-jump-account">
+          <div class="top-tool-search">
-          {{$t('config.account.account')}}
+            <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('promServer')" id="model-jump-prom">{{$t('config.promServer.promServerList')}}</div>
-        <div class="sidebar-info-item" @click="jumpTo('dc')" id="model-jump-dc">
-          {{$t('config.dc.dc')}}
-        </div>
-        <div class="sidebar-info-item sidebar-info-item-active" id="model-jump-model">
-          {{$t('config.model.model')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('mib')" id="model-jump-mib">
-          {{$t('config.mib.mib')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('system')" id="model-jump-system">
-          {{$t('config.system.system')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('terminallog')" id="modeel-jump-terminallog">
-          {{$t('config.terminallog.terminallog')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('operationlog')" id="model-jump-operation">
-          {{$t('config.operationlog.operationlog')}}
-        </div>
-      </div>
-    </div>
-    <div slot="content-right" class="slot-content">
-      <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-        <div class="main-modal"></div>
-        <div class="top-tools" v-show="bottomBox.mainResizeShow">
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-            <div class="top-tool-search">
-              <search-input :searchMsg="searchMsg" @search="search" :bottomBox.inTransform="bottomBox.inTransform"></search-input>
-            </div>
-            <button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20"  :title="$t('overall.createModel')"
-                    id="model-add">
-                      <i class="nz-icon-create-square nz-icon"></i>
-            </button>
           </div>
-          <div class="pagination-top pagination-top-hide display-none"></div>
+          <button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20"  :title="$t('overall.createModel')"
-        </div>
+                  id="model-add">
-        <el-table :data="tableData"
+                    <i class="nz-icon-create-square nz-icon"></i>
-                  border style="width: 100%;"
+          </button>
-                  ref="modelTable"
-                  class="nz-table"
-                  v-scrollBar
-                  :el-table="'large'"
-                  v-loading="tools.loading"
-                  :cell-class-name="assetStatClassName"
-                  v-show="bottomBox.mainResizeShow"
-                  :height="mainTableHeight"
-                  @sort-change="tableDataSort"
-        >
-          <el-table-column :resizable="false"
-                           v-for="(item, index) in tools.tablelable"
-                           v-if="item.show"
-                           :width="item.width"
-                           :key="`col-${index}`"
-                           :label="item.label"
-                           :sortable="sortableShow(item.prop)"
-                           :prop="propTitle(item.prop)"
-                           :sort-orders="['ascending', 'descending']">
-            <template slot-scope="scope" :column="item">
-              <template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
-              <template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template>
-              <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat" >
-                <el-popover
-                  placement="top"
-                  trigger="hover"
-                  :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock">
-                    <div slot="reference" class="dc-asset-states">
-                      <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
-                      <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
-                      <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
-                    </div>
-                  </el-popover>
-              </template>
-              <div v-else-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('dashboard.panel.title')" @click="panel(scope.row)" class="content-right-option" :id="'model-panel-'+scope.row.id"><i class="nz-icon nz-icon-template"></i></span>
-                <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'model-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-                <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'model-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
-              </div>
-              <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-              <template v-else>-</template>
-            </template>
-          </el-table-column>
-          <el-table-column :resizable="false" width="28">
-            <template slot="header" slot-scope="scope">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                <i class="nz-icon nz-icon-gear"></i>
-              </span>
-            </template>
-            <template v-slot="scope">
-              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-          <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
+        <div class="pagination-top pagination-top-hide display-none"></div>
+      </div>
+      <el-table :data="tableData"
+                border style="width: 100%;"
+                ref="modelTable"
+                class="nz-table"
+                v-scrollBar
+                :el-table="'large'"
+                v-loading="tools.loading"
+                :cell-class-name="assetStatClassName"
+                v-show="bottomBox.mainResizeShow"
+                :height="mainTableHeight"
+                @sort-change="tableDataSort"
+      >
+        <el-table-column :resizable="false"
+                         v-for="(item, index) in tools.tablelable"
+                         v-if="item.show"
+                         :width="item.width"
+                         :key="`col-${index}`"
+                         :label="item.label"
+                         :sortable="sortableShow(item.prop)"
+                         :prop="propTitle(item.prop)"
+                         :sort-orders="['ascending', 'descending']">
+          <template slot-scope="scope" :column="item">
+            <template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
+            <template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template>
+            <template v-else-if="item.prop == 'assetStat' && scope.row.assetStat" >
+              <el-popover
+                placement="top"
+                trigger="hover"
+                :content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.notInStock') + '：' + scope.row.assetStat.outStock">
+                  <div slot="reference" class="dc-asset-states">
+                    <span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
+                    <span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
+                    <span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
+                  </div>
+                </el-popover>
+            </template>
+            <div v-else-if="item.prop == 'option'" class="content-right-options">
+              <span :title="$t('dashboard.panel.title')" @click="panel(scope.row)" class="content-right-option" :id="'model-panel-'+scope.row.id"><i class="nz-icon nz-icon-template"></i></span>
+              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'model-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'model-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+            </div>
+            <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+            <template v-else>-</template>
+          </template>
+        </el-table-column>
+        <el-table-column :resizable="false" width="28">
+          <template slot="header" slot-scope="scope">
+            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+          <template v-slot="scope">
+            <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-bottom" v-show="!bottomBox.showSubList">
+        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
-      <transition name="el-zoom-in-bottom">
-        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-fullscreen="bottomBox.isFullScreen" from="model" :target-tab.sync="bottomBox.targetTab" :obj="bottomBox.model"
-                    @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
-      </transition>
     </div>
-    </left-menu>
+    <transition name="el-zoom-in-bottom">
+      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-fullscreen="bottomBox.isFullScreen" from="model" :target-tab.sync="bottomBox.targetTab" :obj="bottomBox.model"
+                  @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
+    </transition>
     <element-set
       v-if="tools.showElementSet"
       v-clickoutside="elementsetHide"

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

@@ -5,89 +5,56 @@
 </style>
 <template>
   <div class="operationlog">
-    <left-menu >
+    <div class="top-tools">
-      <div slot="content-left" class="slot-content">
+      <div></div>
-      <div class="sidebar-title">{{$t('overall.config')}}</div>
+      <div>
-      <div class="sidebar-info">
+        <div class="top-tool-search float-right">
-        <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
+          <search-input :searchMsg="searchMsg" @search="search"></search-input>
-          {{$t('config.account.account')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
-          {{$t('config.promServer.promServerList')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('dc')" id="operation-jump-dc">
-          {{$t('config.dc.dc')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('model')" id="operation-jump-model">
-          {{$t('config.model.model')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('mib')" id="operation-jump-mib">
-          {{$t('config.mib.mib')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('system')" id="operation-jump-system">
-          {{$t('config.system.system')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('terminallog')" id="operation-jump-terminallog">
-          {{$t('config.terminallog.terminallog')}}
-        </div>
-        <div class="sidebar-info-item sidebar-info-item-active" @click="jumpTo('operationlog')" id="operation-jump-operation">
-          {{$t('config.operationlog.operationlog')}}
         </div>
       </div>
     </div>
-    <div slot="content-right" class="slot-content">
+    <el-table
-      <div class="top-tools">
+      class="nz-table"
-        <div></div>
+      :data="tableData"
-        <div>
+      border
-          <div class="top-tool-search float-right">
+      ref="operationLogTable"
-            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+      :height="$tableHeight.normal"
-          </div>
+      v-loading="loading"
-        </div>
+      v-scrollBar:el-table="'large'"
-      </div>
+      :cell-class-name="messageStyle"
-      <el-table
+      style="width: 100%;"
-        class="nz-table"
+      @sort-change="tableDataSort"
-        :data="tableData"
+    >
-        border
+      <el-table-column
-        ref="operationLogTable"
+        :resizable="false"
-        :height="$tableHeight.normal"
+        v-for="(item, index) in tablelable"
-        v-loading="loading"
+        v-if="item.show"
-        v-scrollBar:el-table="'large'"
+        :width="item.width"
-        :cell-class-name="messageStyle"
+        :key="`col-${index}`"
-        style="width: 100%;"
+        :label="item.label"
-        @sort-change="tableDataSort"
+        :sortable="sortableShow(item.prop)"
+        :prop="propTitle(item.prop)"
+        :sort-orders="['ascending', 'descending']"
       >
-        <el-table-column
+        <template slot-scope="scope" :column="item">
-          :resizable="false"
+          <span v-if="item.prop == 'time'">
-          v-for="(item, index) in tablelable"
+            {{scope.row[item.prop]}} ms
-          v-if="item.show"
+          </span>
-          :width="item.width"
+          <span v-else>{{scope.row[item.prop]}}</span>
-          :key="`col-${index}`"
+        </template>
-          :label="item.label"
+      </el-table-column>
-          :sortable="sortableShow(item.prop)"
+      <el-table-column width="28">
-          :prop="propTitle(item.prop)"
+        <template slot="header" slot-scope="scope">
-          :sort-orders="['ascending', 'descending']"
+          <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-        >
+            <i class="nz-icon nz-icon-gear"></i>
-          <template slot-scope="scope" :column="item">
+          </span>
-            <span v-if="item.prop == 'time'">
+        </template>
-              {{scope.row[item.prop]}} ms
+        <template v-slot="scope">
-            </span>
+          <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-            <span v-else>{{scope.row[item.prop]}}</span>
+        </template>
-          </template>
+      </el-table-column>
-        </el-table-column>
+    </el-table>
-        <el-table-column width="28">
+    <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-          <template slot="header" slot-scope="scope">
-            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-              <i class="nz-icon nz-icon-gear"></i>
-            </span>
-          </template>
-          <template v-slot="scope">
-            <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-    </div>
-    </left-menu>
     <element-set
       v-clickoutside="elementsetHide"
       :dropCol="dropCol"

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

@@ -5,106 +5,75 @@
 </style>
 <template>
   <div class="prom">
-    <left-menu >
+    <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-    <div slot="content-left" class="slot-content">
+      <div class="main-modal"></div>
-      <div class="sidebar-title">{{$t('overall.config')}}</div>
+      <div class="top-tools" v-show="bottomBox.mainResizeShow">
-      <div class="sidebar-info">
+        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-        <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
+          <div class="top-tool-search">
-          {{$t('config.account.account')}}
+            <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
-        </div>
-        <div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div>
-        <div class="sidebar-info-item" @click="jumpTo('dc')" id="prom-jump-dc">
-          {{$t('config.dc.dc')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('model')" id="prom-jump-model">
-          {{$t('config.model.model')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('mib')" id="prom-jump-mib">
-          {{$t('config.mib.mib')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('system')" id="prom-jump-system">
-          {{$t('config.system.system')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('terminallog')" id="prom-jump-terminallog">
-          {{$t('config.terminallog.terminallog')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('operationlog')" id="account-jump-operation">
-          {{$t('config.operationlog.operationlog')}}
-        </div>
-      </div>
-    </div>
-    <div slot="content-right"class="slot-content">
-      <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
-        <div class="main-modal"></div>
-        <div class="top-tools" v-show="bottomBox.mainResizeShow">
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-            <div class="top-tool-search">
-              <search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="bottomBox.inTransform"></search-input>
-            </div>
-            <button type="button" @click="add" :title="$t('overall.createPrometheusServer')"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="prom-add">
-              <i class="nz-icon-create-square nz-icon"></i>
-            </button>
           </div>
-          <div class="pagination-top pagination-top-hide display-none"></div>
+          <button type="button" @click="add" :title="$t('overall.createPrometheusServer')"
-        </div>
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="prom-add">
-        <el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
+            <i class="nz-icon-create-square nz-icon"></i>
-                  v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
+          </button>
-                  @sort-change="tableDataSort">
-          <el-table-column :resizable="false" v-for="(item, index) in tools.tablelable"
-                           v-if="item.show"
-                           :width="item.width"
-                           :key="`col-${index}`"
-                           :label="item.label"
-                           :sortable="sortableShow(item.prop)"
-                           :prop="propTitle(item.prop)"
-                           :sort-orders="['ascending', 'descending']">
-            <template slot-scope="scope" :column="item">
-              <span v-if="item.prop == 'idc'" >{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
-
-              <span v-else-if="item.prop == 'type'">
-                  {{scope.row[item.prop] == '1' ? 'Global' : ''}}
-                  {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
-              </span>
-              <span v-else-if="item.prop == 'status'">
-                <el-popover placement="right" width="200" trigger="hover" :content="$t('asset.assetStatPre')+(scope.row.checkTime?scope.row.checkTime:$t('asset.assetStatDown'))">
-                  <div slot="reference" style="width: 20px">
-                    <div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
-                  </div>
-                </el-popover>
-              </span>
-              <div v-else-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
-                &nbsp;
-                <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-                &nbsp;
-                <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
-              </div>
-              <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
-              <template v-else>-</template>
-            </template>
-          </el-table-column>
-          <el-table-column width="28" :resizable="false">
-            <template slot="header" slot-scope="scope">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                <i class="nz-icon nz-icon-gear"></i>
-              </span>
-            </template>
-            <template v-slot="scope">
-              <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-          <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
         </div>
+        <div class="pagination-top pagination-top-hide display-none"></div>
+      </div>
+      <el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
+                v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
+                @sort-change="tableDataSort">
+        <el-table-column :resizable="false" v-for="(item, index) in tools.tablelable"
+                         v-if="item.show"
+                         :width="item.width"
+                         :key="`col-${index}`"
+                         :label="item.label"
+                         :sortable="sortableShow(item.prop)"
+                         :prop="propTitle(item.prop)"
+                         :sort-orders="['ascending', 'descending']">
+          <template slot-scope="scope" :column="item">
+            <span v-if="item.prop == 'idc'" >{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
+
+            <span v-else-if="item.prop == 'type'">
+                {{scope.row[item.prop] == '1' ? 'Global' : ''}}
+                {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
+            </span>
+            <span v-else-if="item.prop == 'status'">
+              <el-popover placement="right" width="200" trigger="hover" :content="$t('asset.assetStatPre')+(scope.row.checkTime?scope.row.checkTime:$t('asset.assetStatDown'))">
+                <div slot="reference" style="width: 20px">
+                  <div :class="{'active-icon green':scope.row[item.prop] == '1','active-icon red':scope.row[item.prop] == '0' || scope.row[item.prop] == '-1' || scope.row[item.prop] == '-2'}"></div>
+                </div>
+              </el-popover>
+            </span>
+            <div v-else-if="item.prop == 'option'" class="content-right-options">
+              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'prom-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+              &nbsp;
+              <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'prom-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+              &nbsp;
+              <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'prom-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+            </div>
+            <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+            <template v-else>-</template>
+          </template>
+        </el-table-column>
+        <el-table-column width="28" :resizable="false">
+          <template slot="header" slot-scope="scope">
+            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+              <i class="nz-icon nz-icon-gear"></i>
+            </span>
+          </template>
+          <template v-slot="scope">
+            <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-bottom" v-show="!bottomBox.showSubList">
+        <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
-      <transition name="el-zoom-in-bottom">
-        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.promServer" :is-full-screen="bottomBox.isFullScreen" :from="'promServer'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.promDetail"
-                    @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
-      </transition>
     </div>
-    </left-menu>
+    <transition name="el-zoom-in-bottom">
+      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.promServer" :is-full-screen="bottomBox.isFullScreen" :from="'promServer'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.promDetail"
+                  @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+    </transition>
     <transition name="right-box">
       <prom-server-box v-if="rightBox.show" :prom-server="promServer" @close="closeRightBox"></prom-server-box>
     </transition>

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

@@ -1,264 +1,233 @@
 <template>
   <div class="system">
-    <left-menu >
+    <el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs" >
-      <div slot="content-left" class="slot-content">
+      <el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
-      <div class="sidebar-title">{{$t('overall.config')}}</div>
+        <div class="system-config-form">
-      <div class="sidebar-info">
+          <el-form :model="basic"  label-width="180px" size="small" ref="basicForm" :rules="basic.asset_ping_switch == 'on'?basicRules:basicRules2" :validate-on-rule-change="false">
-        <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
+            <el-form-item :label="$t('config.system.basic.systemName')" prop="system_name">
-          {{$t('config.account.account')}}
+              <el-input v-model="basic.system_name"></el-input>
-        </div>
+            </el-form-item>
-        <div class="sidebar-info-item " @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
+            <el-form-item :label="$t('config.system.basic.curUrl')" prop="alert_api">
-        <div class="sidebar-info-item" @click="jumpTo('dc')" id="system-jump-dc">
+              <el-input v-model="basic.alert_api"></el-input>
-          {{$t('config.dc.dc')}}
+            </el-form-item>
-        </div>
+            <el-form-item :label="$t('config.system.basic.assetPingSwith')" prop="asset_ping_switch">
-        <div class="sidebar-info-item" @click="jumpTo('model')" id="system-jump-model">
+              <el-switch v-model.number="basic.asset_ping_switch" active-color="rgb(238, 157, 63)"  active-value='on' inactive-value='off'>
-          {{$t('config.model.model')}}
+              </el-switch>
-        </div>
+            </el-form-item>
-        <div class="sidebar-info-item" @click="jumpTo('mib')" id="system-jump-mib">
+            <!--<el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
-          {{$t('config.mib.mib')}}
+              <el-input v-model.number="basic.asset_ping_interval" :disabled="basic.asset_ping_switch == 'off'"></el-input><span class="nz-input-append">s</span>
-        </div>
+            </el-form-item>-->
-        <div class="sidebar-info-item sidebar-info-item-active"  id="system-jump-system">
+            <el-form-item :label="$t('config.system.basic.defaultCabinetUsize')" prop="default_cabinet_usize">
-          {{$t('config.system.system')}}
+              <el-input v-model.number="basic.default_cabinet_usize" ></el-input>
-        </div>
+            </el-form-item>
-        <div class="sidebar-info-item" @click="jumpTo('terminallog')" id="system-jump-terminallog">
+            <el-form-item :label="$t('config.system.basic.exporterTarget')" prop="node_exporter_target_path">
-          {{$t('config.terminallog.terminallog')}}
+              <el-input v-model="basic.node_exporter_target_path"></el-input>
-        </div>
+            </el-form-item>
-        <div class="sidebar-info-item" @click="jumpTo('operationlog')" id="account-jump-operation">
+            <el-form-item :label="$t('config.system.basic.scrapeInterval')" prop="scrape_interval">
-          {{$t('config.operationlog.operationlog')}}
+              <el-input v-model.number="basic.scrape_interval" ></el-input><span class="nz-input-append">{{$t('config.system.basic.second')}}</span>
-        </div>
+            </el-form-item>
-      </div>
+            <el-form-item :label="$t('config.system.basic.storageRetention')" prop="storage_local_retention">
-    </div>
+              <el-input v-model.number="basic.storage_local_retention" ></el-input><span class="nz-input-append">{{$t('config.system.basic.day')}}</span>
-    <div slot="content-right" class="slot-content system-tabs">
+            </el-form-item>
-      <el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs" >
+            <el-form-item :label="$t('config.system.basic.timezone')" prop="timezone">
-        <el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
-          <div class="system-config-form">
-            <el-form :model="basic"  label-width="180px" size="small" ref="basicForm" :rules="basic.asset_ping_switch == 'on'?basicRules:basicRules2" :validate-on-rule-change="false">
-              <el-form-item :label="$t('config.system.basic.systemName')" prop="system_name">
-                <el-input v-model="basic.system_name"></el-input>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.basic.curUrl')" prop="alert_api">
-                <el-input v-model="basic.alert_api"></el-input>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.basic.assetPingSwith')" prop="asset_ping_switch">
-                <el-switch v-model.number="basic.asset_ping_switch" active-color="rgb(238, 157, 63)"  active-value='on' inactive-value='off'>
-                </el-switch>
-              </el-form-item>
-              <!--<el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
-                <el-input v-model.number="basic.asset_ping_interval" :disabled="basic.asset_ping_switch == 'off'"></el-input><span class="nz-input-append">s</span>
-              </el-form-item>-->
-              <el-form-item :label="$t('config.system.basic.defaultCabinetUsize')" prop="default_cabinet_usize">
-                <el-input v-model.number="basic.default_cabinet_usize" ></el-input>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.basic.exporterTarget')" prop="node_exporter_target_path">
-                <el-input v-model="basic.node_exporter_target_path"></el-input>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.basic.scrapeInterval')" prop="scrape_interval">
-                <el-input v-model.number="basic.scrape_interval" ></el-input><span class="nz-input-append">{{$t('config.system.basic.second')}}</span>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.basic.storageRetention')" prop="storage_local_retention">
-                <el-input v-model.number="basic.storage_local_retention" ></el-input><span class="nz-input-append">{{$t('config.system.basic.day')}}</span>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.basic.timezone')" prop="timezone">
 <!--                <el-input v-model.number="basic.timezone" ></el-input>-->
-                <el-select v-model="basic.timezone">
+              <el-select v-model="basic.timezone">
-                  <el-option v-for="(item,index) in timezoneOption" :key="index" :label="item.label" :value="item.value"></el-option>
+                <el-option v-for="(item,index) in timezoneOption" :key="index" :label="item.label" :value="item.value"></el-option>
-                </el-select>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('basicForm','basic')" style="top:2px">{{$t('overall.reset')}}</el-button>
+              <el-button type="primary" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('config.system.email.email')" name="email" >
+        <div class="system-config-form">
+          <el-form :model="email"  label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false">
+            <el-form-item :label="$t('config.system.email.enable')" prop="email_enable">
+              <el-checkbox v-model="email.email_enable" true-label="on" false-label="off"  @change="switchChange('emailForm')"></el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.email.smtpHost')" prop="email_smtp_host">
+              <el-input v-model="email.email_smtp_host" :disabled="email.email_enable == 'off'"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.email.smtpPort')" prop="email_smtp_port">
+              <el-input v-model.number="email.email_smtp_port" :disabled="email.email_enable == 'off'"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.email.smtpAccount')" prop="email_smtp_account">
+              <el-input v-model="email.email_smtp_account" :disabled="email.email_enable == 'off'"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.email.smtpPwd')" prop="email_smtp_password">
+              <el-input v-model="email.email_smtp_password" type="password" :show-password="false" :disabled="email.email_enable == 'off'"></el-input>
+              <div><span>{{$t('config.system.email.pwdTip')}}</span></div>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.email.sendAccount')" prop="email_send_account">
+              <el-input v-model="email.email_send_account" :disabled="email.email_enable == 'off'"></el-input>
+              <div><span>{{$t('config.system.email.sendAccountTip')}}</span></div>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.email.testAccount')" prop="email_test_reciver">
+              <el-input v-model="email.email_test_reciver" :disabled="email.email_enable == 'off'"></el-input>
+              <div><span>{{$t('config.system.email.testAccountTip')}}</span></div>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.email.useSSL')" prop="email_ssl_flag">
+              <el-row :gutter="10">
+                <el-col :span="5"><el-checkbox v-model="email.email_ssl_flag" true-label="on" false-label="off" :disabled="email.email_enable == 'off'"></el-checkbox></el-col>
+                <el-col :span="15"><div><span>{{$t('config.system.email.sslTip')}}</span></div></el-col>
+              </el-row>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.email.useTLS')" prop="email_tls_flag">
+              <el-row :gutter="10">
+                <el-col :span="5"><el-checkbox v-model="email.email_tls_flag" true-label='on' false-label='off' :disabled="email.email_enable == 'off'"></el-checkbox></el-col>
+                <el-col :span="16"><span>{{$t('config.system.email.tlsTip')}}</span></el-col>
+              </el-row>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('emailForm','email')" style="top:2px">{{$t('overall.reset')}}</el-button>
+              <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" :class="{'nz-btn-disabled':email.email_enable == 'off'}" :disabled="email.email_enable == 'off'" @click="testSetInfo('email','emailForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
+              <el-button type="primary" @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('config.system.terminal.terminal')" name="terminal">
+        <div class="system-config-form">
+          <el-form :model="terminal"  label-width="180px" size="small" ref="terminalForm" :rules="terminalRules">
+            <el-form-item :label="$t('config.system.terminal.terminalNum')" prop="max_terminal_num">
+              <el-input v-model.number="terminal.max_terminal_num"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('config.system.ldap.ldap')" name="ldap">
+        <div class="system-config-form">
+          <el-form :model="ldap"  label-width="180px" size="small" ref="ldapForm" :rules="ldap.ldap_enable == 'on'?ldapRules:{}" :validate-on-rule-change="false">
+            <el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
+              <el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off' @change="switchChange('ldapForm')"></el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.ldap.address')" prop="ldap_address">
+              <el-input v-model="ldap.ldap_address"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.ldap.dn')" prop="ldap_dn">
+              <el-input v-model="ldap.ldap_dn"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.ldap.pwd')" prop="ldap_password">
+              <el-input v-model="ldap.ldap_password" type="password"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.ldap.ou')" prop="ldap_ou">
+              <el-input v-model="ldap.ldap_ou"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.ldap.filter')" prop="ldap_user_filter">
+              <el-input v-model="ldap.ldap_user_filter"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('config.system.ldap.map')" prop="ldap_mapping">
+              <el-input v-model="ldap.ldap_mapping"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('ldapForm','ldap')" style="top:2px">{{$t('overall.reset')}}</el-button>
+              <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="testSetInfo('ldap','ldapForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
+              <el-button type="primary" @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane :label="$t('config.system.link.link')" name="link"><!--$t('config.system.reset.reset')-->
+        <div class="linkBox" >
+          <div class="linkTitle">
+            <span class="linkTitleHandle"></span>
+            <div class="linkTitleName">{{$t('config.system.link.name')}}</div>
+            <div class="linkTitleUrl">{{$t('config.system.link.url')}}</div>
+            <div class="linkTitleBtn">{{$t('config.system.link.operation')}}</div>
+          </div>
+          <!--linkAdd-->
+          <div class="linkContent linkAddBox">
+            <span class="linkTitleHandle"></span>
+            <el-form :inline="true"  :model="linkTemp"  label-width="180px" size="small" ref="linkTempForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form">
+              <el-form-item  prop="name">
+                <el-input v-model="linkTemp.name"  class="linkName"/>
               </el-form-item>
-              <el-form-item>
+              <el-form-item  prop="url">
-                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('basicForm','basic')" style="top:2px">{{$t('overall.reset')}}</el-button>
+                <el-input  v-model="linkTemp.url" class="linkUrl"/>
-                <el-button type="primary" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
+              </el-form-item>
+              <el-form-item  prop="btn">
+                <i class="nz-icon-create-square nz-icon" @click="linkAdd"></i>
               </el-form-item>
             </el-form>
           </div>
-        </el-tab-pane>
+          <!--linkEdit-->
-        <el-tab-pane :label="$t('config.system.email.email')" name="email" >
+          <div  class="scrollBox"
-          <div class="system-config-form">
+                v-scrollBar>
-            <el-form :model="email"  label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false">
+            <draggable v-model="link"
-              <el-form-item :label="$t('config.system.email.enable')" prop="email_enable">
+                       :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
-                <el-checkbox v-model="email.email_enable" true-label="on" false-label="off"  @change="switchChange('emailForm')"></el-checkbox>
+                       @change="change"
-              </el-form-item>
+                       @start="start"
-              <el-form-item :label="$t('config.system.email.smtpHost')" prop="email_smtp_host">
+                       @end="end"
-                <el-input v-model="email.email_smtp_host" :disabled="email.email_enable == 'off'"></el-input>
+                       :move="move"
-              </el-form-item>
+                       handle=".handle"
-              <el-form-item :label="$t('config.system.email.smtpPort')" prop="email_smtp_port">
+            >
-                <el-input v-model.number="email.email_smtp_port" :disabled="email.email_enable == 'off'"></el-input>
+              <div v-for="(item,index) in link" class="linkContent" :id="'linkDiv'+item.id">
-              </el-form-item>
+                <i class="nz-icon nz-icon-sort4 handle"></i>
-              <el-form-item :label="$t('config.system.email.smtpAccount')" prop="email_smtp_account">
+                <el-form :inline="true"  :model="link[index]" :ref="'linkForm'+item.id" label-width="180px" size="small" ref="resetForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form" :key="index" v-if="item.isEdit" >
-                <el-input v-model="email.email_smtp_account" :disabled="email.email_enable == 'off'"></el-input>
+                <el-form-item  prop="name" class="linkName">
-              </el-form-item>
+                  <el-input v-model="item.name" width="140px" />
-              <el-form-item :label="$t('config.system.email.smtpPwd')" prop="email_smtp_password">
-                <el-input v-model="email.email_smtp_password" type="password" :show-password="false" :disabled="email.email_enable == 'off'"></el-input>
-                <div><span>{{$t('config.system.email.pwdTip')}}</span></div>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.email.sendAccount')" prop="email_send_account">
-                <el-input v-model="email.email_send_account" :disabled="email.email_enable == 'off'"></el-input>
-                <div><span>{{$t('config.system.email.sendAccountTip')}}</span></div>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.email.testAccount')" prop="email_test_reciver">
-                <el-input v-model="email.email_test_reciver" :disabled="email.email_enable == 'off'"></el-input>
-                <div><span>{{$t('config.system.email.testAccountTip')}}</span></div>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.email.useSSL')" prop="email_ssl_flag">
-                <el-row :gutter="10">
-                  <el-col :span="5"><el-checkbox v-model="email.email_ssl_flag" true-label="on" false-label="off" :disabled="email.email_enable == 'off'"></el-checkbox></el-col>
-                  <el-col :span="15"><div><span>{{$t('config.system.email.sslTip')}}</span></div></el-col>
-                </el-row>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.email.useTLS')" prop="email_tls_flag">
-                <el-row :gutter="10">
-                  <el-col :span="5"><el-checkbox v-model="email.email_tls_flag" true-label='on' false-label='off' :disabled="email.email_enable == 'off'"></el-checkbox></el-col>
-                  <el-col :span="16"><span>{{$t('config.system.email.tlsTip')}}</span></el-col>
-                </el-row>
-              </el-form-item>
-              <el-form-item>
-                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('emailForm','email')" style="top:2px">{{$t('overall.reset')}}</el-button>
-                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" :class="{'nz-btn-disabled':email.email_enable == 'off'}" :disabled="email.email_enable == 'off'" @click="testSetInfo('email','emailForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
-                <el-button type="primary" @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('config.system.terminal.terminal')" name="terminal">
-          <div class="system-config-form">
-            <el-form :model="terminal"  label-width="180px" size="small" ref="terminalForm" :rules="terminalRules">
-              <el-form-item :label="$t('config.system.terminal.terminalNum')" prop="max_terminal_num">
-                <el-input v-model.number="terminal.max_terminal_num"></el-input>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('config.system.ldap.ldap')" name="ldap">
-          <div class="system-config-form">
-            <el-form :model="ldap"  label-width="180px" size="small" ref="ldapForm" :rules="ldap.ldap_enable == 'on'?ldapRules:{}" :validate-on-rule-change="false">
-              <el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
-                <el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off' @change="switchChange('ldapForm')"></el-checkbox>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.ldap.address')" prop="ldap_address">
-                <el-input v-model="ldap.ldap_address"></el-input>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.ldap.dn')" prop="ldap_dn">
-                <el-input v-model="ldap.ldap_dn"></el-input>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.ldap.pwd')" prop="ldap_password">
-                <el-input v-model="ldap.ldap_password" type="password"></el-input>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.ldap.ou')" prop="ldap_ou">
-                <el-input v-model="ldap.ldap_ou"></el-input>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.ldap.filter')" prop="ldap_user_filter">
-                <el-input v-model="ldap.ldap_user_filter"></el-input>
-              </el-form-item>
-              <el-form-item :label="$t('config.system.ldap.map')" prop="ldap_mapping">
-                <el-input v-model="ldap.ldap_mapping"></el-input>
-              </el-form-item>
-              <el-form-item>
-                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('ldapForm','ldap')" style="top:2px">{{$t('overall.reset')}}</el-button>
-                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="testSetInfo('ldap','ldapForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
-                <el-button type="primary" @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
-              </el-form-item>
-            </el-form>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('config.system.link.link')" name="link"><!--$t('config.system.reset.reset')-->
-          <div class="linkBox" >
-            <div class="linkTitle">
-              <span class="linkTitleHandle"></span>
-              <div class="linkTitleName">{{$t('config.system.link.name')}}</div>
-              <div class="linkTitleUrl">{{$t('config.system.link.url')}}</div>
-              <div class="linkTitleBtn">{{$t('config.system.link.operation')}}</div>
-            </div>
-            <!--linkAdd-->
-            <div class="linkContent linkAddBox">
-              <span class="linkTitleHandle"></span>
-              <el-form :inline="true"  :model="linkTemp"  label-width="180px" size="small" ref="linkTempForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form">
-                <el-form-item  prop="name">
-                  <el-input v-model="linkTemp.name"  class="linkName"/>
                 </el-form-item>
-                <el-form-item  prop="url">
+                <el-form-item  prop="url" class="linkUrl">
-                  <el-input  v-model="linkTemp.url" class="linkUrl"/>
+                  <el-input  v-model="item.url" width="460px" />
                 </el-form-item>
                 <el-form-item  prop="btn">
-                  <i class="nz-icon-create-square nz-icon" @click="linkAdd"></i>
+                  <el-button type="primary" class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-75" @click="linkUpdate(item)">Update</el-button>
+                  <el-button class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75" @click="linkCancel(item)">Cancel</el-button>
                 </el-form-item>
               </el-form>
-            </div>
+                <div class="linkFormContent" v-else>
-            <!--linkEdit-->
+                  <div class="linkTitleName" :title="item.name">{{item.name}}</div>
-            <div  class="scrollBox"
+                  <div class="linkTitleUrl">
-                  v-scrollBar>
+                    <span class="linkTitleUrlContent" @click="openUrl(item)" @dblclick.stop="linkEdit(item)">
-              <draggable v-model="link"
+                      <!--<el-tooltip class="item" effect="dark" :content="item.url" placement="top" popper-class="linkUrlTip">-->
-                         :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
+                      <span>{{item.url}}</span>
-                         @change="change"
+                      <!--</el-tooltip>-->
-                         @start="start"
+                    </span>
-                         @end="end"
+                  </div>
-                         :move="move"
+                  <div class="linkFormBtn">
-                         handle=".handle"
+                    <i class="nz-icon nz-icon-edit" @click.stop="linkEdit(item)" v-if="item.buildIn=='0'"></i>
-              >
+                    <i class="nz-icon nz-icon-delete" @click="linkDel(item)" v-if="item.buildIn=='0'"></i>
-                <div v-for="(item,index) in link" class="linkContent" :id="'linkDiv'+item.id">
-                  <i class="nz-icon nz-icon-sort4 handle"></i>
-                  <el-form :inline="true"  :model="link[index]" :ref="'linkForm'+item.id" label-width="180px" size="small" ref="resetForm" :rules="linkRules" :validate-on-rule-change="false" class="reset-form" :key="index" v-if="item.isEdit" >
-                  <el-form-item  prop="name" class="linkName">
-                    <el-input v-model="item.name" width="140px" />
-                  </el-form-item>
-                  <el-form-item  prop="url" class="linkUrl">
-                    <el-input  v-model="item.url" width="460px" />
-                  </el-form-item>
-                  <el-form-item  prop="btn">
-                    <el-button type="primary" class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-75" @click="linkUpdate(item)">Update</el-button>
-                    <el-button class="linkBtn nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75" @click="linkCancel(item)">Cancel</el-button>
-                  </el-form-item>
-                </el-form>
-                  <div class="linkFormContent" v-else>
-                    <div class="linkTitleName" :title="item.name">{{item.name}}</div>
-                    <div class="linkTitleUrl">
-                      <span class="linkTitleUrlContent" @click="openUrl(item)" @dblclick.stop="linkEdit(item)">
-                        <!--<el-tooltip class="item" effect="dark" :content="item.url" placement="top" popper-class="linkUrlTip">-->
-                        <span>{{item.url}}</span>
-                        <!--</el-tooltip>-->
-                      </span>
-                    </div>
-                    <div class="linkFormBtn">
-                      <i class="nz-icon nz-icon-edit" @click.stop="linkEdit(item)" v-if="item.buildIn=='0'"></i>
-                      <i class="nz-icon nz-icon-delete" @click="linkDel(item)" v-if="item.buildIn=='0'"></i>
-                    </div>
                   </div>
                 </div>
-              </draggable>
+              </div>
-            </div>
+            </draggable>
           </div>
-        </el-tab-pane>
+        </div>
-        <el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
+      </el-tab-pane>
-          <div class="system-config-form">
+      <el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
-            <el-form :model="reset"  label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
+        <div class="system-config-form">
-              <el-form-item  prop="type">
+          <el-form :model="reset"  label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
+            <el-form-item  prop="type">
 <!--                <el-checkbox-group v-model="reset.type">-->
 <!--                  <div v-for="(item,index) in resetOptions" :key="item.value+index">-->
 <!--                    <el-checkbox :value="item.value"   :label="item.label" :disabled="true" :checked="true"></el-checkbox>-->
 <!--                  </div>-->
 <!--                </el-checkbox-group>-->
-                <div class="el-checkbox-group">
+              <div class="el-checkbox-group">
-                  <div v-for="(item,index) in resetOptions" :key="item.value+index" >
+                <div v-for="(item,index) in resetOptions" :key="item.value+index" >
-                    <label class="el-checkbox sys-reset-label" :for="item.value" >
+                  <label class="el-checkbox sys-reset-label" :for="item.value" >
-                      <span class="el-checkbox__label" style="width: 100px;text-align: right;">{{item.label}}</span>
+                    <span class="el-checkbox__label" style="width: 100px;text-align: right;">{{item.label}}</span>
-                      <span class="el-checkbox__input">
+                    <span class="el-checkbox__input">
-                        <input type="checkbox" name="resetType" :value="item.value" class="el-checkbox__original" aria-hidden="true" :id="item.value" @change="resetCheckBoxChange"/>
+                      <input type="checkbox" name="resetType" :value="item.value" class="el-checkbox__original" aria-hidden="true" :id="item.value" @change="resetCheckBoxChange"/>
-                        <span class="el-checkbox__inner"></span>
+                      <span class="el-checkbox__inner"></span>
-                      </span>
+                    </span>
-                    </label>
+                  </label>
-                  </div>
                 </div>
-              </el-form-item>
+              </div>
-              <el-form-item>
+            </el-form-item>
-                <el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" @click="resetSys()" style="top:2px">{{$t('overall.reset')}}</el-button>
+            <el-form-item>
-              </el-form-item>
+              <el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" @click="resetSys()" style="top:2px">{{$t('overall.reset')}}</el-button>
-            </el-form>
+            </el-form-item>
-          </div>
+          </el-form>
-        </el-tab-pane>
+        </div>
-      </el-tabs>
+      </el-tab-pane>
-    </div>
+    </el-tabs>
-    </left-menu>
   </div>
 </template>
 

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

@@ -5,93 +5,60 @@
 </style>
 <template>
   <div class="terminallog">
-    <left-menu >
+    <div class="top-tools">
-      <div slot="content-left" class="slot-content">
+      <div></div>
-      <div class="sidebar-title">{{$t('overall.config')}}</div>
+      <div>
-      <div class="sidebar-info">
+        <div class="top-tool-search float-right">
-        <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
+          <search-input :searchMsg="searchMsg" @search="search"></search-input>
-          {{$t('config.account.account')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
-          {{$t('config.promServer.promServerList')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('dc')" id="terminallog-jump-dc">
-          {{$t('config.dc.dc')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('model')" id="terminallog-jump-model">
-          {{$t('config.model.model')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('mib')" id="terminal-jump-mib">
-          {{$t('config.mib.mib')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('system')" id="terminal-jump-system">
-          {{$t('config.system.system')}}
-        </div>
-        <div class="sidebar-info-item sidebar-info-item-active" @click="jumpTo('terminallog')" id="terminallog-jump-terminallog">
-          {{$t('config.terminallog.terminallog')}}
-        </div>
-        <div class="sidebar-info-item" @click="jumpTo('operationlog')" id="terminallog-jump-operation">
-          {{$t('config.operationlog.operationlog')}}
         </div>
       </div>
     </div>
-    <div slot="content-right" class="slot-content">
+    <el-table
-      <div class="top-tools">
+      class="nz-table"
-        <div></div>
+      :data="tableData"
-        <div>
+      border
-          <div class="top-tool-search float-right">
+      ref="terminalLogTable"
-            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+      :height="$tableHeight.normal"
-          </div>
+      v-scrollBar:el-table="'large'"
-        </div>
+      v-loading="loading"
-      </div>
+      :cell-class-name="messageStyle"
-      <el-table
+      style="width: 100%;"
-        class="nz-table"
+      @sort-change="tableDataSort">
-        :data="tableData"
+      <el-table-column
-        border
+        :resizable="false"
-        ref="terminalLogTable"
+        v-for="(item, index) in tablelable"
-        :height="$tableHeight.normal"
+        v-if="item.show"
-        v-scrollBar:el-table="'large'"
+        :width="item.width"
-        v-loading="loading"
+        :key="`col-${index}`"
-        :cell-class-name="messageStyle"
+        :label="item.label"
-        style="width: 100%;"
+        :sortable="sortableShow(item.prop)"
-        @sort-change="tableDataSort">
+        :prop="propTitle(item.prop)"
-        <el-table-column
+        :sort-orders="['ascending', 'descending']"
-          :resizable="false"
+      >
-          v-for="(item, index) in tablelable"
+        <template slot-scope="scope" :column="item">
-          v-if="item.show"
+          <span v-if="item.prop == 'lang'">
-          :width="item.width"
+                          {{scope.row[item.prop] == 'en' ? 'English' : ''}}
-          :key="`col-${index}`"
+                          {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
-          :label="item.label"
+                          {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
-          :sortable="sortableShow(item.prop)"
+                      </span>
-          :prop="propTitle(item.prop)"
+          <template v-else-if="item.prop == 'status'">
-          :sort-orders="['ascending', 'descending']"
+            <span>{{scope.row.status==='1' ? $t("config.terminallog.success") : $t("config.terminallog.fail")}}</span>
-        >
-          <template slot-scope="scope" :column="item">
-            <span v-if="item.prop == 'lang'">
-                            {{scope.row[item.prop] == 'en' ? 'English' : ''}}
-                            {{scope.row[item.prop] == 'zh' ? '中文' : ''}}
-                            {{scope.row[item.prop] == 'ru' ? 'русский' : ''}}
-                        </span>
-            <template v-else-if="item.prop == 'status'">
-              <span>{{scope.row.status==='1' ? $t("config.terminallog.success") : $t("config.terminallog.fail")}}</span>
-            </template>
-            <span v-else>{{scope.row[item.prop]}}</span>
           </template>
-        </el-table-column>
+          <span v-else>{{scope.row[item.prop]}}</span>
-        <el-table-column width="28">
+        </template>
-          <template slot="header" slot-scope="scope">
+      </el-table-column>
-            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+      <el-table-column width="28">
-              <i class="nz-icon nz-icon-gear"></i>
+        <template slot="header" slot-scope="scope">
-            </span>
+          <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-          </template>
+            <i class="nz-icon nz-icon-gear"></i>
-          <template v-slot="scope">
+          </span>
-            <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+        </template>
-          </template>
+        <template v-slot="scope">
-        </el-table-column>
+          <button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
-      </el-table>
+        </template>
-      <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      </el-table-column>
-    </div>
+    </el-table>
-    </left-menu>
+    <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
     <element-set
       v-clickoutside="elementsetHide"
       :dropCol="dropCol"

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

@@ -1,47 +1,37 @@
 <template>
   <div class="explore">
-    <left-menu>
+    <div class="main-list main-and-sub-transition">
-      <div slot="content-left" class="slot-content">
+        <!-- 顶部工具栏 -->
-        <div class="sidebar-title">{{$t('dashboard.title')}}</div>
+        <div class="top-tools" style="z-index: 1">
-        <div class="sidebar-info">
+          <div class="top-tool-main-right">
-          <div class="sidebar-info-item " @click="jumpTo('overview')">{{$t('dashboard.overview.title')}}</div>
+            <pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange">
-          <div class="sidebar-info-item" @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
+              <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
-          <div class="sidebar-info-item sidebar-info-item-active">{{$t('dashboard.metricPreview.title')}}</div>
+            </pick-time>
+            <button :disabled="saveDisabled" type="button" @click="saveChart"
+                    class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
+                    :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
+              {{$t('dashboard.metric.saveChart')}}
+            </button>
+          </div>
         </div>
-      </div>
+        <div style="height: calc(100% - 50px);width: 100%;" >
-      <div slot="content-right" class="slot-content">
+          <el-scrollbar style="height: 100%" class="el-scrollbar-large">
-        <div class="main-list main-and-sub-transition">
+          <div class="expression-room right-margin" style="padding-top: 5px">
-            <!-- 顶部工具栏 -->
+            <!--坑，这个index居然是从1开始-->
-            <div class="top-tools" style="z-index: 1">
+            <promql-input
-              <div class="top-tool-main-right">
+              v-for="index of promqlKeys.length"
-                <pick-time :refresh-data-func="expressionChange" v-model="filterTime" @unitChange="chartUnitChange">
+              :ref="'promql-'+(index-1)"
-                  <template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
+              :id="promqlKeys[index-1]"
-                </pick-time>
+              :key="promqlKeys[index-1]"
-                <button :disabled="saveDisabled" type="button" @click="saveChart"
+              :expression-list="expressions"
-                        class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
+              :index="index-1"
-                        :class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
+              :styleType="1"
-                  {{$t('dashboard.metric.saveChart')}}
+              :history-param="historyParam"
-                </button>
+              :plugins="['metric-selector', 'metric-input', 'add', 'remove']"
-              </div>
+              @change="expressionChange"
-            </div>
+              @addExpression="addExpression"
-            <div style="height: calc(100% - 50px);width: 100%;" >
+              @removeExpression="removeExpression"
-              <el-scrollbar style="height: 100%" class="el-scrollbar-large">
+            ></promql-input>
-              <div class="expression-room right-margin" style="padding-top: 5px">
-                <!--坑，这个index居然是从1开始-->
-                <promql-input
-                  v-for="index of promqlKeys.length"
-                  :ref="'promql-'+(index-1)"
-                  :id="promqlKeys[index-1]"
-                  :key="promqlKeys[index-1]"
-                  :expression-list="expressions"
-                  :index="index-1"
-                  :styleType="1"
-                  :history-param="historyParam"
-                  :plugins="['metric-selector', 'metric-input', 'add', 'remove']"
-                  @change="expressionChange"
-                  @addExpression="addExpression"
-                  @removeExpression="removeExpression"
-                ></promql-input>
 <!--                <promql-input-plus-->
 <!--                  v-for="index of promqlKeys.length"-->
 <!--                  :ref="'promql-plus'+(index-1)"-->
@@ -52,161 +42,159 @@
 <!--                  @addExpression="addExpression"-->
 <!--                  @removeExpression="removeExpression"-->
 <!--                ></promql-input-plus>-->
-              </div>
+          </div>
-              <div class="chart-view right-margin" v-show="!showIntroduce"
+          <div class="chart-view right-margin" v-show="!showIntroduce"
-                   :class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
+               :class="{'shrink-view':!chartVisible || !defaultChartVisible}" style="position:relative;">
-                <div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000"><i class="el-icon-caret-top" ></i>&nbsp;graph</div>
+            <div class="view-title" @click="changeChartVisible" style="position:absolute;z-index: 1000"><i class="el-icon-caret-top" ></i>&nbsp;graph</div>
-                <div class="chart-room">
+            <div class="chart-room">
-                  <chart ref="exploreChart" :unit="chartUnit"></chart>
+              <chart ref="exploreChart" :unit="chartUnit"></chart>
-                </div>
+            </div>
-              </div>
+          </div>
-              <div class="table-view right-margin" v-show="!showIntroduce"
+          <div class="table-view right-margin" v-show="!showIntroduce"
-                   :class="{'shrink-view':!tableVisible || !defaultTableVisible}">
+               :class="{'shrink-view':!tableVisible || !defaultTableVisible}">
-                <div class="view-title" @click="changeTableVisible"><i class="el-icon-caret-top"></i>&nbsp;table</div>
+            <div class="view-title" @click="changeTableVisible"><i class="el-icon-caret-top"></i>&nbsp;table</div>
-                <div class="table-room">
+            <div class="table-room">
-                  <el-table class="nz-table explore-table"
+              <el-table class="nz-table explore-table"
-                            :data="tableData"
+                        :data="tableData"
-                            border
+                        border
-                            ref="exploreTable"
+                        ref="exploreTable"
-                            tooltip-effect="light"
+                        tooltip-effect="light"
-                            v-scrollBar:el-table="'large'"
+                        v-scrollBar:el-table="'large'"
-                            v-loading="tableLoading"
+                        v-loading="tableLoading"
-                            style="width: 100%;">
+                        style="width: 100%;">
-                    <el-table-column
+                <el-table-column
-                      :resizable="false"
+                  :resizable="false"
-                      v-for="(item, index) in showTableLabels"
+                  v-for="(item, index) in showTableLabels"
-                      v-if="item.show"
+                  v-if="item.show"
-                      :key="`col-${index}`"
+                  :key="`col-${index}`"
-                      :label="item.label"
+                  :label="item.label"
-                      :prop="item.prop"
+                  :prop="item.prop"
-                      show-overflow-tooltip
+                  show-overflow-tooltip
-                      min-width="110px"
+                  min-width="110px"
-                    ></el-table-column>
+                ></el-table-column>
-                    <el-table-column width="28" v-if="showTableLabels.length>0">
+                <el-table-column width="28" v-if="showTableLabels.length>0">
-                      <template slot="header" slot-scope="scope" :resizable="false">
+                  <template slot="header" slot-scope="scope" :resizable="false">
-                      <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+                  <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                        <i class="nz-icon nz-icon-gear"></i>
+                    <i class="nz-icon nz-icon-gear"></i>
-                      </span>
+                  </span>
-                      </template>
+                  </template>
-                    </el-table-column>
+                </el-table-column>
-                  </el-table>
+              </el-table>
-                  <pagination :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"
+              <pagination :page-obj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"
-                              :append-to-body="false"></pagination>
+                          :append-to-body="false"></pagination>
-                </div>
+            </div>
-              </div>
+          </div>
-              <div class="introduce-view right-margin" v-show="showIntroduce">
+          <div class="introduce-view right-margin" v-show="showIntroduce">
-                <div class="info-room">
+            <div class="info-room">
-                  <div class="col-md-9 doc-content">
+              <div class="col-md-9 doc-content">
-                    <h1 class="page-header">Query examples<a class="header-anchor" href="https://prometheus.io/docs/prometheus/latest/querying/examples/" target="_blank"><i style="font-size: 16px;" class="nz-icon nz-icon-link1"></i></a></h1>
+                <h1 class="page-header">Query examples<a class="header-anchor" href="https://prometheus.io/docs/prometheus/latest/querying/examples/" target="_blank"><i style="font-size: 16px;" class="nz-icon nz-icon-link1"></i></a></h1>
-                    <div class="content-divider"></div>
+                <div class="content-divider"></div>
-                    <h2 >
+                <h2 >
-                      Simple time series selection
+                  Simple time series selection
-                    </h2>
+                </h2>
 
-                    <p>Return all time series with the metric <code>http_requests_total</code>:</p>
+                <p>Return all time series with the metric <code>http_requests_total</code>:</p>
 
-                    <pre><code>http_requests_total</code></pre>
+                <pre><code>http_requests_total</code></pre>
 
-                    <p>Return all time series with the metric <code>http_requests_total</code> and the given<code>job</code> and <code>handler</code> labels:</p>
+                <p>Return all time series with the metric <code>http_requests_total</code> and the given<code>job</code> and <code>handler</code> labels:</p>
 
-                    <pre><code>http_requests_total{job="apiserver", handler="/api/comments"}</code></pre>
+                <pre><code>http_requests_total{job="apiserver", handler="/api/comments"}</code></pre>
 
-                    <p>Return a whole range of time (in this case 5 minutes) for the same vector,
+                <p>Return a whole range of time (in this case 5 minutes) for the same vector,
-                      making it a range vector:</p>
+                  making it a range vector:</p>
 
-                    <pre><code>http_requests_total{job="apiserver", handler="/api/comments"}[5m]</code></pre>
+                <pre><code>http_requests_total{job="apiserver", handler="/api/comments"}[5m]</code></pre>
 
-                    <p>Note that an expression resulting in a range vector cannot be graphed directly,
+                <p>Note that an expression resulting in a range vector cannot be graphed directly,
-                      but viewed in the tabular ("Console") view of the expression browser.</p>
+                  but viewed in the tabular ("Console") view of the expression browser.</p>
 
-                    <p>Using regular expressions, you could select time series only for jobs whose
+                <p>Using regular expressions, you could select time series only for jobs whose
-                      name match a certain pattern, in this case, all jobs that end with <code>server</code>:</p>
+                  name match a certain pattern, in this case, all jobs that end with <code>server</code>:</p>
 
-                    <pre><code>http_requests_total{job=~".*server"}</code></pre>
+                <pre><code>http_requests_total{job=~".*server"}</code></pre>
 
-                    <p>All regular expressions in Prometheus use RE2 syntax.</p>
+                <p>All regular expressions in Prometheus use RE2 syntax.</p>
 
-                    <p>To select all HTTP status codes except 4xx ones, you could run:</p>
+                <p>To select all HTTP status codes except 4xx ones, you could run:</p>
 
-                    <pre><code>http_requests_total{status!~"4.."}</code></pre>
+                <pre><code>http_requests_total{status!~"4.."}</code></pre>
 
-                    <h2 >
+                <h2 >
-                      Subquery
+                  Subquery
-                    </h2>
+                </h2>
 
-                    <p>Return the 5-minute rate of the <code>http_requests_total</code> metric for the past 30 minutes, with a resolution of 1 minute.</p>
+                <p>Return the 5-minute rate of the <code>http_requests_total</code> metric for the past 30 minutes, with a resolution of 1 minute.</p>
 
-                    <pre><code>rate(http_requests_total[5m])[30m:1m]</code></pre>
+                <pre><code>rate(http_requests_total[5m])[30m:1m]</code></pre>
 
-                    <p>This is an example of a nested subquery. The subquery for the <code>deriv</code> function uses the default resolution. Note that using subqueries unnecessarily is unwise.</p>
+                <p>This is an example of a nested subquery. The subquery for the <code>deriv</code> function uses the default resolution. Note that using subqueries unnecessarily is unwise.</p>
 
-                    <pre><code>max_over_time(deriv(rate(distance_covered_total[5s])[30s:5s])[10m:])</code></pre>
+                <pre><code>max_over_time(deriv(rate(distance_covered_total[5s])[30s:5s])[10m:])</code></pre>
 
-                    <h2 >
+                <h2 >
-                      Using functions, operators, etc.
+                  Using functions, operators, etc.
-                    </h2>
+                </h2>
 
-                    <p>Return the per-second rate for all time series with the <code>http_requests_total</code>
+                <p>Return the per-second rate for all time series with the <code>http_requests_total</code>
-                      metric name, as measured over the last 5 minutes:</p>
+                  metric name, as measured over the last 5 minutes:</p>
 
-                    <pre><code>rate(http_requests_total[5m])</code></pre>
+                <pre><code>rate(http_requests_total[5m])</code></pre>
 
-                    <p>Assuming that the <code>http_requests_total</code> time series all have the labels <code>job</code>
+                <p>Assuming that the <code>http_requests_total</code> time series all have the labels <code>job</code>
-                      (fanout by job name) and <code>instance</code> (fanout by instance of the job), we might
+                  (fanout by job name) and <code>instance</code> (fanout by instance of the job), we might
-                      want to sum over the rate of all instances, so we get fewer output time series,
+                  want to sum over the rate of all instances, so we get fewer output time series,
-                      but still preserve the <code>job</code> dimension:</p>
+                  but still preserve the <code>job</code> dimension:</p>
 
-                    <pre><code>sum by (job) (rate(http_requests_total[5m]))</code></pre>
+                <pre><code>sum by (job) (rate(http_requests_total[5m]))</code></pre>
 
-                    <p>If we have two different metrics with the same dimensional labels, we can apply
+                <p>If we have two different metrics with the same dimensional labels, we can apply
-                      binary operators to them and elements on both sides with the same label set
+                  binary operators to them and elements on both sides with the same label set
-                      will get matched and propagated to the output. For example, this expression
+                  will get matched and propagated to the output. For example, this expression
-                      returns the unused memory in MiB for every instance (on a fictional cluster
+                  returns the unused memory in MiB for every instance (on a fictional cluster
-                      scheduler exposing these metrics about the instances it runs):</p>
+                  scheduler exposing these metrics about the instances it runs):</p>
 
-                    <pre><code>(instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
+                <pre><code>(instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
 
-                    <p>The same expression, but summed by application, could be written like this:</p>
+                <p>The same expression, but summed by application, could be written like this:</p>
 
-                    <pre><code>sum by (app, proc) (instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
+                <pre><code>sum by (app, proc) (instance_memory_limit_bytes - instance_memory_usage_bytes) / 1024 / 1024</code></pre>
 
-                    <p>If the same fictional cluster scheduler exposed CPU usage metrics like the following for every instance:</p>
+                <p>If the same fictional cluster scheduler exposed CPU usage metrics like the following for every instance:</p>
 
-                    <pre><code>instance_cpu_time_ns{app="lion", proc="web", rev="34d0f99", env="prod", job="cluster-manager"}
+                <pre><code>instance_cpu_time_ns{app="lion", proc="web", rev="34d0f99", env="prod", job="cluster-manager"}
 instance_cpu_time_ns{app="elephant", proc="worker", rev="34d0f99", env="prod", job="cluster-manager"}
 instance_cpu_time_ns{app="turtle", proc="api", rev="4d3a513", env="prod", job="cluster-manager"}
 instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="cluster-manager"}
 ...
 </code></pre>
 
-                    <p>...we could get the top 3 CPU users grouped by application (<code>app</code>) and process type (<code>proc</code>) like this:</p>
+                <p>...we could get the top 3 CPU users grouped by application (<code>app</code>) and process type (<code>proc</code>) like this:</p>
 
-                    <pre><code>topk(3, sum by (app, proc) (rate(instance_cpu_time_ns[5m])))</code></pre>
+                <pre><code>topk(3, sum by (app, proc) (rate(instance_cpu_time_ns[5m])))</code></pre>
 
-                    <p>Assuming this metric contains one time series per running instance, you could count the number of running instances per application like this:</p>
+                <p>Assuming this metric contains one time series per running instance, you could count the number of running instances per application like this:</p>
 
-                    <pre><code>count by (app) (instance_cpu_time_ns)</code></pre>
+                <pre><code>count by (app) (instance_cpu_time_ns)</code></pre>
 
-                  </div>
-                </div>
               </div>
-          </el-scrollbar>
             </div>
-
+          </div>
+      </el-scrollbar>
         </div>
-        <transition name="right-box">
+
-          <chart-box v-if="rightBox.show" :chart="chart" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{id: -1, name: ''}"></chart-box>
+    </div>
-        </transition>
+    <transition name="right-box">
-        <element-set
+      <chart-box v-if="rightBox.show" :chart="chart" ref="addChartModal" @close="handleBox(false)" :panel-data="panelData" @on-create-success="createSuccess" :show-panel="{id: -1, name: ''}"></chart-box>
-          :allowed-all="true"
+    </transition>
-          v-clickoutside="elementsetHide"
+    <element-set
-          :dropCol="dropCol"
+      :allowed-all="true"
-          @tablelable="tablelabelEmit"
+      v-clickoutside="elementsetHide"
-          :table-title="tableLabels"
+      :dropCol="dropCol"
-          ref="elementset"
+      @tablelable="tablelabelEmit"
-        ></element-set>
+      :table-title="tableLabels"
-      </div>
+      ref="elementset"
-    </left-menu>
+    ></element-set>
   </div>
 </template>
 

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

@@ -1,184 +1,170 @@
 <template>
   <div class="overview">
-    <!--左侧菜单栏-->
+    <!--标题-->
-    <left-menu>
+    <div class="overview-content-header">
-      <div slot="content-left" class="overview-left slot-content">
+      <div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
-        <div class="sidebar-title">{{$t('dashboard.title')}}</div>
+      <div class="header-tool">
-        <div class="sidebar-info">
+        <div class="tool-container">
-          <div class="sidebar-info-item sidebar-info-item-active" >{{$t('dashboard.overview.title')}}</div>
+          <div class="time">{{sysTime}}</div>
-          <div class="sidebar-info-item sidebar-info-top " @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
+          <div class="date">
-          <div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
+            <div class="week">{{sysWeek}}</div>
+            <div class="sys-date">{{sysDate}}</div>
+          </div>
+          <div class="operation" @click="switchFullScreen" ><span ><i class="nz-icon screen-icon" :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}"></i></span></div>
         </div>
       </div>
-      <!--右侧内容-->
+    </div>
-      <div class="overview-right slot-content" id="mainDisplay" slot="content-right">
+    <!--内容-->
-        <!--标题-->
+    <div class="overview-content">
-        <div class="overview-content-header">
+      <!--第一行-->
-          <div class="header-title" :class="{'hide-div':!isFullScreen}">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</div>
+      <div class="content-row-box">
-          <div class="header-tool">
+        <div class="content-col-box">
-            <div class="tool-container">
+          <div class="content-col-title">{{$t("dashboard.overview.asset.title")}}</div>
-              <div class="time">{{sysTime}}</div>
+          <div class="content-col-content" v-loading="assetLoading">
-              <div class="date">
+            <div class="content-col-content-num">
-                <div class="week">{{sysWeek}}</div>
+              <vue-countup :start-value="0" :end-value="(assetData ? assetData.totalStat.total  : '') | numberFormat" :decimals="(assetData ? assetData.totalStat.total  : 0) < 1000 ? 0 : 1"></vue-countup>
-                <div class="sys-date">{{sysDate}}</div>
+              <span class="overview-row-unit">{{(assetData ? assetData.totalStat.total  : '') | unitFormat}}</span>
-              </div>
-              <div class="operation" @click="switchFullScreen" ><span ><i class="nz-icon screen-icon" :class="{'nz-icon-maxview':!isFullScreen,'nz-icon-exit-full-screen':isFullScreen}"></i></span></div>
             </div>
           </div>
         </div>
-        <!--内容-->
+        <div class="content-col-box">
-        <div class="overview-content">
+          <div class="content-col-title">{{$t("dashboard.overview.project.project")}}</div>
-          <!--第一行-->
+          <div class="content-col-content" v-loading="projectLoading">
-          <div class="content-row-box">
+            <div class="content-col-content-num">
-            <div class="content-col-box">
+              <vue-countup :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
-              <div class="content-col-title">{{$t("dashboard.overview.asset.title")}}</div>
+              <span class="overview-row-unit">{{(projectData ? projectData.projectStat.length  : '') | unitFormat}}</span>
-              <div class="content-col-content" v-loading="assetLoading">
-                <div class="content-col-content-num">
-                  <vue-countup :start-value="0" :end-value="(assetData ? assetData.totalStat.total  : '') | numberFormat" :decimals="(assetData ? assetData.totalStat.total  : 0) < 1000 ? 0 : 1"></vue-countup>
-                  <span class="overview-row-unit">{{(assetData ? assetData.totalStat.total  : '') | unitFormat}}</span>
-                </div>
-              </div>
-            </div>
-            <div class="content-col-box">
-              <div class="content-col-title">{{$t("dashboard.overview.project.project")}}</div>
-              <div class="content-col-content" v-loading="projectLoading">
-                <div class="content-col-content-num">
-                  <vue-countup :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat" :decimals="(projectData ? projectData.projectStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
-                  <span class="overview-row-unit">{{(projectData ? projectData.projectStat.length  : '') | unitFormat}}</span>
-                </div>
-              </div>
-            </div>
-            <div class="content-col-box">
-              <div class="content-col-title">{{$t("dashboard.overview.module.module")}}</div>
-              <div class="content-col-content" v-loading="moduleLoading">
-                <div class="content-col-content-num">
-                  <vue-countup :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
-                  <span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length  : '') | unitFormat}}</span>
-                </div>
-              </div>
-            </div>
-            <div class="content-col-box">
-              <div class="content-col-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
-              <div class="content-col-content" v-loading="endpointLoading">
-                <div class="content-col-content-num">
-                  <vue-countup :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1"></vue-countup>
-                  <span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
-                </div>
-              </div>
-            </div>
-            <div class="content-col-box">
-              <div class="content-col-title">{{$t("dashboard.overview.alert.alertMessage")}}</div>
-              <div class="content-col-content" v-loading="alertMessageLoading">
-                <div class="content-col-content-num"><vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup></div>
-                <span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
-                <span>{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</span>
-              </div>
             </div>
           </div>
-          <!--第二行-->
+        </div>
-          <div class="content-row-box">
+        <div class="content-col-box">
-            <div class="content-col-box">
+          <div class="content-col-title">{{$t("dashboard.overview.module.module")}}</div>
-              <div class="content-col-title">
+          <div class="content-col-content" v-loading="moduleLoading">
-                <span>{{$t("dashboard.overview.traffic")}}</span>
+            <div class="content-col-content-num">
-                <span class="content-col-title-tools">
+              <vue-countup :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat" :decimals="(moduleData ? moduleData.moduleStat.length : 0) < 1000 ? 0 : 1"></vue-countup>
-                  <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
+              <span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length  : '') | unitFormat}}</span>
-                  <span class="content-col-title-tool">
-                    <el-cascader
-                      :options="trafficData"
-                      :props="{multiple: true}"
-                      clearable
-                      collapse-tags
-                      placeholder=""
-                      popper-class="trend-cascader"
-                      v-model="trendSearchParam.select"
-                    ></el-cascader>
-                  </span>
-                </span>
-              </div>
-              <div class="content-col-content">
-                <chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend" :unit="15" @is-loading="(isLoading)=>{this.trendLoading = isLoading}"></chart-box>
-                <div class="chart-no-data" v-if="!trendLoading && ((!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0))">No Data</div>
-              </div>
-            </div>
-            <div class="content-col-box">
-              <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
-              <div class="content-col-content">
-                <chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
-              </div>
             </div>
           </div>
-          <!--第三行-->
+        </div>
-          <div class="content-row-box">
+        <div class="content-col-box">
-            <!--第一个图-->
+          <div class="content-col-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
-            <div class="content-col-box">
+          <div class="content-col-content" v-loading="endpointLoading">
-              <div class="content-col-title">
+            <div class="content-col-content-num">
-                <span>{{$t("dashboard.overview.asset.assetType")}}</span>
+              <vue-countup :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat" :decimals="(endpointData ? endpointData.total : 0) < 1000 ? 0 : 1"></vue-countup>
-              </div>
+              <span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
-              <div class="content-col-content">
+            </div>
-                <chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" @is-loading="(isLoading)=>{this.assetTypeLoading = isLoading}"></chart-box>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div class="content-col-title">{{$t("dashboard.overview.alert.alertMessage")}}</div>
+          <div class="content-col-content" v-loading="alertMessageLoading">
+            <div class="content-col-content-num"><vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat" :decimals="(alertMessageData ? alertMessageData.alertMessageTotal : 0) < 1000 ? 0 : 1"></vue-countup></div>
+            <span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
+            <span>{{$t("dashboard.overview.alert.ruleNum")}}&nbsp;:&nbsp;{{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</span>
+          </div>
+        </div>
+      </div>
+      <!--第二行-->
+      <div class="content-row-box">
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>{{$t("dashboard.overview.traffic")}}</span>
+            <span class="content-col-title-tools">
+              <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
+              <span class="content-col-title-tool">
+                <el-cascader
+                  :options="trafficData"
+                  :props="{multiple: true}"
+                  clearable
+                  collapse-tags
+                  placeholder=""
+                  popper-class="trend-cascader"
+                  v-model="trendSearchParam.select"
+                ></el-cascader>
+              </span>
+            </span>
+          </div>
+          <div class="content-col-content">
+            <chart-box chart-type="overviewLine" ref="chartbox" :show-toolbox="false" name="trend" :unit="15" @is-loading="(isLoading)=>{this.trendLoading = isLoading}"></chart-box>
+            <div class="chart-no-data" v-if="!trendLoading && ((!chartSeries[0] && !chartSeries[1]) || (chartSeries[0].data.length == 0 && chartSeries[1] && chartSeries[1].data.length == 0))">No Data</div>
+          </div>
+        </div>
+        <div class="content-col-box">
+          <div class="content-col-title">{{$t("dashboard.overview.dataCenter.dataCenter")}}</div>
+          <div class="content-col-content">
+            <chart-box chart-type="map" :tooltip-formatter="mapTooltipFormatter" :map="map" ref="dataCenterMap" @is-loading="(isLoading)=>{this.mapLoading = isLoading}"></chart-box>
+          </div>
+        </div>
+      </div>
+      <!--第三行-->
+      <div class="content-row-box">
+        <!--第一个图-->
+        <div class="content-col-box">
+          <div class="content-col-title">
+            <span>{{$t("dashboard.overview.asset.assetType")}}</span>
+          </div>
+          <div class="content-col-content">
+            <chart-box chart-type="pie" ref="assetTypePie" :show-toolbox="false" name="assetTypePie" :tooltip-formatter="assetTypeFormatter" @is-loading="(isLoading)=>{this.assetTypeLoading = isLoading}"></chart-box>
 <!--                <div class="no-data-tip" v-if="!assetTypeLoading && assetData.typeStat && assetData.typeStat.length == 0">N/A</div>-->
 <!--                <div class="chart-no-data"v-if="!assetTypeLoading && assetData.typeStat && assetData.typeStat.length == 0">No Data</div>-->
-              </div>
+          </div>
-            </div>
+        </div>
-            <!--第二个图-->
+        <!--第二个图-->
-            <div class="content-col-box">
+        <div class="content-col-box">
-              <div class="content-col-title">
+          <div class="content-col-title">
-                <span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
+            <span>{{$t("dashboard.overview.alert.alertRuleTopN")}}</span>
-                <!--<el-dropdown trigger="hover" :show-timeout="0" size="small">
+            <!--<el-dropdown trigger="hover" :show-timeout="0" size="small">
-                  <span>Top&nbsp;{{topFilter.rule}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
+              <span>Top&nbsp;{{topFilter.rule}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
-                  <el-dropdown-menu slot="dropdown">
+              <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('rule', item)">{{item}}</el-dropdown-item>
+                <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('rule', item)">{{item}}</el-dropdown-item>
-                  </el-dropdown-menu>
+              </el-dropdown-menu>
-                </el-dropdown>-->
+            </el-dropdown>-->
-              </div>
+          </div>
-              <div class="content-col-content">
+          <div class="content-col-content">
-                <chart-box axis-tooltip="y" chart-type="bar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
+            <chart-box axis-tooltip="y" chart-type="bar" ref="ruleMessage" :tooltip-formatter="simpleFormatter" :show-toolbox="false" name="ruleMessage" @is-loading="(isLoading)=>{this.ruleMessageLoading = isLoading}"></chart-box>
 <!--                <div class="no-data-tip" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">N/A</div>-->
 <!--                <div class="chart-no-data" v-if="!ruleMessageLoading && ((!messageByRuleSeries.data && !messageByRuleSeries.category) || (messageByRuleSeries.data.length == 0 && messageByRuleSeries.category.length == 0))">No Data</div>-->
-              </div>
+          </div>
-            </div>
+        </div>
-            <!--第三个图-->
+        <!--第三个图-->
-            <div class="content-col-box">
+        <div class="content-col-box">
-              <div class="content-col-title">
+          <div class="content-col-title">
-                <span>
+            <span>
-                  <span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
+              <span v-if="alertMessageShow == 'asset'">{{$t("dashboard.overview.alert.assetTopN")}}</span>
-                  <span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
+              <span v-if="alertMessageShow == 'module'">{{$t("dashboard.overview.alert.moduleTopN")}}</span>
-                  <span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
+              <span class="dropdown-btn" @mouseenter="alertMessageDropdownHandler(true)" @mouseleave="alertMessageDropdownHandler(false)">
-                    <i class="el-icon-arrow-down"></i>
+                <i class="el-icon-arrow-down"></i>
-                    <transition name="el-zoom-in-top">
+                <transition name="el-zoom-in-top">
-                      <ul class="el-dropdown-menu el-popper el-dropdown-menu--mini" v-if="bottom3DropdownShow">
+                  <ul class="el-dropdown-menu el-popper el-dropdown-menu--mini" v-if="bottom3DropdownShow">
-                        <li @click="alertMessageChange('asset')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.asset.title")}}</li>
+                    <li @click="alertMessageChange('asset')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.asset.title")}}</li>
-                        <li @click="alertMessageChange('module')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.module.module")}}</li>
+                    <li @click="alertMessageChange('module')" class="el-dropdown-menu__item dropdown-content" style="padding: 0 15px;">{{$t("dashboard.overview.module.module")}}</li>
-                      </ul>
+                  </ul>
-                    </transition>
+                </transition>
-                  </span>
+              </span>
-                </span>
+            </span>
-                <!--<el-dropdown trigger="hover" v-if="alertMessageShow == 'asset'" :show-timeout="0" size="small">
+            <!--<el-dropdown trigger="hover" v-if="alertMessageShow == 'asset'" :show-timeout="0" size="small">
-                  <span>Top&nbsp;{{topFilter.asset}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
+              <span>Top&nbsp;{{topFilter.asset}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
-                  <el-dropdown-menu slot="dropdown">
+              <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('asset', item)">{{item}}</el-dropdown-item>
+                <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('asset', item)">{{item}}</el-dropdown-item>
-                  </el-dropdown-menu>
+              </el-dropdown-menu>
-                </el-dropdown>
+            </el-dropdown>
-                <el-dropdown trigger="hover" v-if="alertMessageShow == 'module'" :show-timeout="0" size="small">
+            <el-dropdown trigger="hover" v-if="alertMessageShow == 'module'" :show-timeout="0" size="small">
-                  <span>Top&nbsp;{{topFilter.module}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
+              <span>Top&nbsp;{{topFilter.module}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>
-                  <el-dropdown-menu slot="dropdown">
+              <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('module', item)">{{item}}</el-dropdown-item>
+                <el-dropdown-item v-for="(item,index) in topFilter.optionals" :key="index" @click.native="topNChange('module', item)">{{item}}</el-dropdown-item>
-                  </el-dropdown-menu>
+              </el-dropdown-menu>
-                </el-dropdown>-->
+            </el-dropdown>-->
-              </div>
+          </div>
-              <div class="content-col-content">
+          <div class="content-col-content">
-                <chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
+            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'asset'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="assetMessage" name="assetMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.assetMessageLoading = isLoading}"></chart-box>
-                <chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
+            <chart-box axis-tooltip="y" v-show="alertMessageShow == 'module'" :tooltip-formatter="simpleFormatter" chart-type="bar" ref="moduleMessage" name="moduleMessage" :show-toolbox="false" @is-loading="(isLoading)=>{this.moduleMessageLoading = isLoading}"></chart-box>
 <!--                <div class="no-data-tip" v-show="alertMessageShow == 'asset'" v-if="!assetMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">N/A</div>-->
 <!--                <div class="no-data-tip" v-show="alertMessageShow == 'module'" v-if="!moduleMessageLoading && ((!messageByModuleSeries.data && !messageByModuleSeries.category) || (messageByModuleSeries.data.length == 0 && messageByModuleSeries.category.length == 0))">N/A</div>-->
 <!--                <div class="chart-no-data" v-show="alertMessageShow == 'asset'" v-if="!assetMessageLoading && ((!messageByAssetSeries.data && !messageByAssetSeries.category) || (messageByAssetSeries.data.length == 0 && messageByAssetSeries.category.length == 0))">No Data</div>-->
 <!--                <div class="chart-no-data" v-show="alertMessageShow == 'module'" v-if="!moduleMessageLoading && ((!messageByModuleSeries.data && !messageByModuleSeries.category) || (messageByModuleSeries.data.length == 0 && messageByModuleSeries.category.length == 0))">No Data</div>-->
-              </div>
-            </div>
           </div>
         </div>
       </div>
-    </left-menu>
+    </div>
     <div class="axis-tooltip el-popover"></div>
     <!--用于assetType饼图label-->
     <img src='../../../../assets/img/up.png' id="upPic" style="display: none;">

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

@@ -1,83 +1,71 @@
 <template>
   <div class="panel">
-    <left-menu >
+    <div class="top-tools">
-      <div slot="content-left" class="slot-content">
+      <div class="top-tool-main-left" v-if="panelData.length == 0" style="margin-left: 10px;">
-      <div class="sidebar-title">{{$t('dashboard.title')}}</div>
+        <button @click="toAdd" class="nz-btn nz-btn-style-light nz-btn-size-small"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("dashboard.panel.createPanelTitleSec")}}</button>
-      <div class="sidebar-info">
-        <div class="sidebar-info-item " @click="jumpTo('overview')">{{$t('dashboard.overview.title')}}</div>
-        <div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('dashboard.panel.title')}}</div>
-        <div class="sidebar-info-item" @click="jumpTo('explore')">{{$t('dashboard.metricPreview.title')}}</div>
       </div>
-    </div>
+      <template v-else>
-    <div slot="content-right" class="slot-content">
+        <div class="top-tool-main-left">
-      <div class="top-tools">
+          <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown>
-        <div class="top-tool-main-left" v-if="panelData.length == 0" style="margin-left: 10px;">
+            <el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="">
-          <button @click="toAdd" class="nz-btn nz-btn-style-light nz-btn-size-small"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("dashboard.panel.createPanelTitleSec")}}</button>
+              <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
+              <el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
+            </el-row>
+            <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
+              <el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
+              <draggable v-model="panelData" @start="start" @end="end" :move="move" :key
+                         :scroll-sensitivity="150"
+                         :options="{
+               group:{name:'chartGroup',pull:'false'},
+               dragClass:'drag-chart-class',
+               fallbackClass:'fallback-class',
+               forceFallback:true,
+               ghostClass:'chart-ghost',
+               chosenClass:'choose-class',
+               scroll:true,
+               scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
+               animation:150,
+               handle:'.panelContent',
+             }"  >
+                <el-dropdown-item v-for="item in panelData" :key="item.id+1" class="panel-title-li"
+                                  :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
+                  <!--{{item.name}}-->
+                  <el-row  :gutter="10" class="panel-list-width" >
+                    <el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-sort4"></i></el-col>
+                    <el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
+                    <el-col :span="1"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
+                    <el-col :span="1">&nbsp;</el-col>
+                    <el-col :span="1"><span class="panel-dropdown-btn" @click.stop="edit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
+                  </el-row>
+                </el-dropdown-item>
+              </draggable>
+            </el-dropdown-menu>
+          </el-dropdown>
         </div>
-        <template v-else>
+        <div class="top-tool-main-right">
-          <div class="top-tool-main-left">
+          <div class="top-tool-search relative-position margin-r-20">
-            <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" v-scrollBar:el-dropdown>
+            <el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >
-              <el-row @click.native="scrollbarHeightHandler" :gutter="10" class="el-dropdown-link" style="">
+              <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
-                <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
+            </el-input>
-                <el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
-              </el-row>
-              <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
-                <el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
-                <draggable v-model="panelData" @start="start" @end="end" :move="move" :key
-                           :scroll-sensitivity="150"
-                           :options="{
-                 group:{name:'chartGroup',pull:'false'},
-                 dragClass:'drag-chart-class',
-                 fallbackClass:'fallback-class',
-                 forceFallback:true,
-                 ghostClass:'chart-ghost',
-                 chosenClass:'choose-class',
-                 scroll:true,
-                 scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
-                 animation:150,
-                 handle:'.panelContent',
-               }"  >
-                  <el-dropdown-item v-for="item in panelData" :key="item.id+1" class="panel-title-li"
-                                    :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
-                    <!--{{item.name}}-->
-                    <el-row  :gutter="10" class="panel-list-width" >
-                      <el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-sort4"></i></el-col>
-                      <el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
-                      <el-col :span="1"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
-                      <el-col :span="1">&nbsp;</el-col>
-                      <el-col :span="1"><span class="panel-dropdown-btn" @click.stop="edit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
-                    </el-row>
-                  </el-dropdown-item>
-                </draggable>
-              </el-dropdown-menu>
-            </el-dropdown>
           </div>
-          <div class="top-tool-main-right">
-            <div class="top-tool-search relative-position margin-r-20">
-              <el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput"  @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable   >
-                <i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>
-              </el-input>
-            </div>
 
-            <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
+          <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
-            <button @click="addChart" :title="$t('overall.createChart')"
+          <button @click="addChart" :title="$t('overall.createChart')"
-                    class="nz-btn nz-btn-size-normal nz-btn-style-light ">
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light ">
-              <i class="nz-icon-create-square nz-icon"></i>
+            <i class="nz-icon-create-square nz-icon"></i>
-            </button>
+          </button>
-          </div>
+        </div>
-        </template>
+      </template>
-      </div>
-      <div class="table-list" id="tableList">
-        <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
-          <div class="box-content">
-            <chart-list @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart"
-                        ref="chartList"></chart-list>
-          </div>
-        </el-scrollbar>
-      </div>
-      <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
     </div>
-    </left-menu>
+    <div class="table-list" id="tableList">
+      <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
+        <div class="box-content">
+          <chart-list @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart"
+                      ref="chartList"></chart-list>
+        </div>
+      </el-scrollbar>
+    </div>
+    <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
 
     <transition name="right-box">
       <chart-box @close="closeChartBox" :chart="chart" v-if="rightBox.chart.show" ref="addChartModal" :show-panel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>

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

@@ -20,49 +20,7 @@
 </style>
 <template>
   <div class="project">
-
+    <template v-show="pageType == 'endpoint'">
-    <left-menu >
-      <div slot="content-left" class="slot-content">
-      <el-scrollbar ref="leftScrollbar" style="height: 100%">
-        <div class="sidebar-title too-long-split">{{$t('project.project.project')}}</div>
-        <div class="sidebar-info">
-          <el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top: 0px;" ref="projectLeft">
-            <el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
-              <template slot="title">
-                <div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject($event,item)" :id="'project-module-'+item.id">
-                  <div class="sidebar-info-item-txt">
-                    <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
-                      <span slot="reference" class="">
-                        {{item.name}}
-                      </span>
-                    </el-popover>
-                    <span v-else>{{item.name}}</span>
-                  </div>
-                </div>
-              </template>
-              <div class="sidebar-info sub-sidebar-info" >
-                <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule">
-                  <i class="nz-icon nz-icon-create-square"></i>
-                </div>
-                <template v-else>
-                  <div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
-                    <div :id="`module-${module.id}`" class="item-tip">
-                      <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
-                      <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
-                      <div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="editModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
-                    </div>
-                  </div>
-                </template>
-              </div>
-            </el-collapse-item>
-          </el-collapse>
-        </div>
-      </el-scrollbar>
-    </div>
-
-    <!--endpoint-->
-    <div slot="content-right" class="slot-content" v-show="pageType ==  'endpoint'">
-      <!-- 主列表 -->
       <div class="main-list" :class="{'main-list-with-sub': bottomBox.showSubList}">
         <div class="main-modal"></div>
         <div class="top-tools" v-show="bottomBox.mainResizeShow">
@@ -112,11 +70,11 @@
             <template slot-scope="scope" :column="item" >
               <span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detailEndpoint(scope.row)">{{scope.row[item.prop].host}}</span>
               <span v-else-if="item.prop == 'param'">
-                <template v-if="scope.row.paramObj">
+              <template v-if="scope.row.paramObj">
-                  <span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
+                <span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
-                </template>
+              </template>
-                <template v-else>-</template>
+              <template v-else>-</template>
-              </span>
+            </span>
               <template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
               <div v-else-if="item.prop == 'option'" class="content-right-options">
                 <span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
@@ -126,25 +84,25 @@
                 <span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
               </div>
               <span v-else-if="item.prop == 'state'" >
-                <el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
+              <el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
-                  <div slot="reference" style="width: 20px">
+                <div slot="reference" style="width: 20px">
-                    <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
+                  <div :class="{'active-icon green':scope.row.state == '1','active-icon red':scope.row.state == '0'}"></div>
-                  </div>
+                </div>
-                  <div >
+                <div >
-                    <div v-if="scope.row.state == '1'">up</div>
+                  <div v-if="scope.row.state == '1'">up</div>
-                    <div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
+                  <div v-else>down:<br/>{{getStateErrorMsg(scope.row)}}</div>
-                  </div>
+                </div>
-                </el-popover>
+              </el-popover>
-              </span>
+            </span>
               <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
               <template v-else>-</template>
             </template>
           </el-table-column>
           <el-table-column width="28" :resizable="false">
             <template slot="header" slot-scope="scope">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
-                <i class="nz-icon nz-icon-gear"></i>
+              <i class="nz-icon nz-icon-gear"></i>
-              </span>
+            </span>
             </template>
             <template v-slot="scope">
               <button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
@@ -155,16 +113,16 @@
           <Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
         </div>
       </div>
-      <transition name="el-zoom-in-bottom">
+    </template>
-        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
+    <template v-show="pageType == 'project'">
-                    :from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail"
-                    @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
-      </transition>
-    </div>
-    <div slot="content-right" class="slot-content" v-show="pageType == 'project'">
       <panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>
-    </div>
+    </template>
-    </left-menu>
+    <transition name="el-zoom-in-bottom">
+      <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
+                  :from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail"
+                  @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+    </transition>
+
     <element-set
       v-if="tools.showElementSet"
       v-clickoutside="elementsetHide"
@@ -189,6 +147,7 @@
   import exportXLSX from "../../common/exportXLSX";
   import loading from "../../common/loading";
   import panelTab from '../../common/bottomBox/tabs/panelTab'
+  import bus from '../../../libs/bus'
 
   export default {
     name: "project2",
@@ -720,6 +679,9 @@
       setTimeout(() => {
         this.ready = true;
       }, 300);
+      bus.$on("project-pageType", pageType => {
+        this.pageType = pageType;
+      });
       this.$nextTick(() => {
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
@@ -764,9 +726,9 @@
       endpointListChange() {
         return this.$store.state.endpointListChange;
       },
-      currentProjectChange() {
+      /*currentProjectChange() {
         return this.$store.state.currentProject;
-      },
+      },*/
       itemTip() {
         return function(id, content, ready) {
           let className = "item-tip-show";
@@ -795,7 +757,7 @@
       endpointListChange(n) {
         this.getEndpointTableData();
       },
-      currentProjectChange: {
+      /*currentProjectChange: {
         immediate:true,
         handler(n, o) {
           if (n.id != this.currentProject.id) {
@@ -805,7 +767,7 @@
             this.detailProject(null, this.currentProject);
           }
         },
-      },
+      },*/
       currentProject(n, o) {
         this.$store.commit("currentProjectChange", Object.assign({}, n));
       },

nezha-fronted/src/router/index.js

@@ -45,11 +45,11 @@ export default new Router({
           component: resolve => require(['../components/page/dashboard/explore/explore.vue'], resolve),
         },
         {
-          path: 'overview',
+          path: '/overview',
           component: resolve => require(['../components/page/dashboard/overview/overview2.vue'],resolve)
         },
         {
-          path: 'test',
+          path: '/test',
           component: resolve => require(['../components/charts/d3-line-chart2'],resolve)
         },
         {

nezha-fronted/src/store/index.js

@@ -44,7 +44,6 @@ const store = new Vuex.Store({
     consoleCount:0,//当前console窗口数
     isAddConsole:false,//是否增加窗口
     consoleParam:{},//新开console窗口参数
-    leftMenuStat:false, //0展开状态，1隐藏状态
     linkData:[],//导航数据
   },
   getters: {
@@ -134,10 +133,7 @@ const store = new Vuex.Store({
     minConsole(state){//最小化窗口
       state.consoleShow=false;
     },
-    setLeftMenuStat:function(state,data){
+    setLinkData(state, data) {
-      state.leftMenuStat = data;
-    },
-    setLinkData:function(state,data){
       state.linkData = data;
     },
   },