perf: 样式调整（除弹框外）

1.样式调整，除弹框外的顶部、左侧、右侧列表

nezha-fronted/src/assets/css/main.css

@@ -81,6 +81,12 @@ html {
   -webkit-appearance: none;
   white-space: nowrap;
 }
+.nz-btn.nz-btn-size-normal {} /* size默认normal，是normal时这个class可不写*/
+.nz-btn.nz-btn-size-small {
+  font-size: 12px;
+  line-height: 18px;
+  padding: 2px 12px;
+}
 .nz-btn.nz-btn-style-normal {
   background-color: #16b;
   background-image: linear-gradient(#2d8cec, #16b);
@@ -89,11 +95,37 @@ html {
   color: #fff;
   text-shadow: 0 1px 1px rgba(0,0,0,.75);
 }
+.nz-btn.nz-btn-style-light {
+  background-color: #dedede;
+  background-image: linear-gradient(white,#dedede);
+  border: 1px solid #b8b8b8;
+  border-top-color: #dedede;
+  color: #444;
+  text-shadow: 0 1px 1px rgba(255,255,255,.75);
+}
+.nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) {
+  background-image: linear-gradient(#dedede,#c5c5c5);
+}
 .nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) {
   background-image: linear-gradient(#16b, #0d4d8c);
 }
 .nz-btn:focus {
   outline: 0;
+}
+.nz-btn.nz-btn-disabled {
+  background-image: none;
+  background-color: #666;
+  color: white;
+  text-shadow: none;
+  border-color: #999;
+}
+.nz-btn-group .nz-btn:first-child:not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.nz-btn-group .nz-btn:last-child:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
 }
   /* end--按钮组件*/
 /* end--通用*/
@@ -144,49 +176,40 @@ html {
 .top-tools {
   padding: 22px 0 13px 0;
 }
-.top-tools .el-button--mini {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-.top-tools .top-tool {
-  float: left;
-}
-.top-tools .top-tool-right {
-  float: right;
-}
 .top-tools .top-tool-search {
   width: 320px;
-}
-.top-tools .el-button-group {
-  float: left;
-}
-.top-tools .top-tool-btn {
-  border-radius: 5px;
-  width: 100px;
-}
-.top-tools .top-tool-btn:focus, .top-tools .top-tool-btn:hover {
-  color: #606266;
-  background-color: white;
-}
-.top-tools .top-tool-btn-active {
-  color: white;
-  border: 1px solid #656565;
-  background-color: #656565;
-}
-.top-tools .top-tool-btn-active:focus, .top-tools .top-tool-btn-active:hover {
-  color: white;
-  background-color: #656565;
-  border: 1px solid #656565;
-}
-.top-tools .top-tool-btn-txt {
-  font-size: 14px;
 }
   /* end--顶部工具栏*/
   /* start--内容*/
 .content-right>.el-table{
-  border-radius: 4px;
+  border: 1px solid #d4d4d4;
-  border: 1px solid #D7D7D7;
+  border-left: none;
+  border-right: none;
   margin-top: 30px;
+  border-bottom: none;
+}
+.content-right .el-table::before {
+  height: 0;
+}
+.content-right .el-table--border::after, .el-table--group::after {
+  width: 0;
+}
+.content-right .el-table__header {
+  line-height: 40px;
+  text-shadow: 1px 1px white;
+}
+.content-right .el-table .el-table__header th {
+  background-image: linear-gradient(#eee,#e0e0e0);
+  color: #444444;
+  border-right: 1px solid #d4d4d4;
+  border-left: 1px solid white;
+  border-bottom: 1px solid #d4d4d4;;
+}
+.content-right .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
+  border-right: none;
+}
+.content-right .el-table td {
+  padding: 4px 0;
 }
   /* end--内容*/
   /* start--分页*/

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

@@ -2,7 +2,7 @@
     <div class="header">
         <div class="submenu">
             <el-menu
-                    class="el-menu-demo"
+                    class="nz-menu"
                     mode="horizontal"
                     background-color="#232f3e"
                     text-color="#ffffff"
@@ -77,7 +77,29 @@
 
         </div>
         <div class="header-right">
-            <div class="header-user-con">
+          <el-menu
+            class=""
+            mode="horizontal"
+            background-color="#232f3e"
+            text-color="#ffffff"
+            unique-opened
+          >
+            <el-submenu index="6" popper-class="nz-submenu">
+              <template slot="title">
+                <div>[username]</div>
+              </template>
+              <el-menu-item index="6-0">
+                <div :style="language=='en'?'color:#f90':''" @click="changeLocal('en')">English</div>
+              </el-menu-item>
+              <el-menu-item index="6-1">
+                <div :style="language=='cn'?'color:#f90':''" @click="changeLocal('cn')">中文</div>
+              </el-menu-item>
+              <el-menu-item index="6-2">
+                <div @click="jumpTo('')">{{$t('overall.signOut')}}</div>
+              </el-menu-item>
+            </el-submenu>
+          </el-menu>
+            <!--<div class="header-user-con">
                 <div class="flagselect">
                 </div>
                 <el-popover
@@ -105,7 +127,7 @@
                         <i class="el-submenu__icon-arrow el-icon-arrow-down header-name-jiantou"></i>
                     </div>
                 </el-popover>
-            </div>
+            </div>-->
         </div>
 
         <project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
@@ -398,7 +420,7 @@ export default {
     opacity: .8;
 }
 
-.el-menu-demo>li:first-of-type {
+.nz-menu>li:first-of-type {
   position: fixed;
   left: 40%;
   top: 0;

nezha-fronted/src/components/common/language/en.js

@@ -18,7 +18,8 @@ const en = {
     clearAll: "Clear All",
     clear: "Clear",
     name: 'Name',
-    cover: 'Cover'
+    cover: 'Cover',
+    signOut: 'Sign Out'
   },
   search: {
     searchTip: 'Press Enter or click to search',

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

@@ -2,7 +2,6 @@
   <div class="pagination">
     <el-pagination
       ref="page"
-      background
       @size-change="size"
       @prev-click="prev"
       @next-click="next"
@@ -10,7 +9,7 @@
       :current-page="pageObj.pageNo"
       :page-sizes="[20, 50, 100, 300]"
       :page-size="20"
-      layout="prev, pager, next, jumper, sizes, total"
+      layout="prev, pager, next, jumper, total"
       :total="this.pageObj.total"
     ></el-pagination>
   </div>
@@ -57,4 +56,11 @@ export default {
 </script>
 
 <style>
+  .el-pager li.active {
+    color: #f90;
+    cursor: default;
+  }
+  .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
+    color: #f90;
+  }
 </style>

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

@@ -49,14 +49,9 @@
         <div class="content-right">
             <div class="top-tools">
                 <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
-                    <span><i class="el-icon-plus"></i></span>
                     <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
                 </button>
-                <!--<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool top-tool-right margin-l-10" size="mini">
+                <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
-                    <span><i class="el-icon-plus"></i></span>
-                    <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
-                </el-button>-->
-                <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
             </div>
             <el-table
                   :data="tableData"

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

@@ -169,7 +169,7 @@
         </div>
         <div class="content-right">
             <div class="top-tools">
-                <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
+                <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
             </div>
             <el-table
                   :data="tableData"

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

@@ -857,9 +857,6 @@ export default {
 }
 </script>
 <style>
-.el-table {
-    font-size: 10px;
-}
 
 .el-popover {
     padding: 0px;

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

@@ -1324,10 +1324,6 @@ export default {
 </script>
 
 <style>
-.el-table {
-    font-size: 10px;
-}
-
 .el-popover {
     padding: 0px;
     border-radius: 10px;

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

@@ -1429,10 +1429,6 @@ export default {
 </script>
 
 <style>
-.el-table {
-    font-size: 10px;
-}
-
 .el-popover {
     padding: 0px;
     border-radius: 10px;

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

@@ -50,14 +50,9 @@
         <div class="content-right">
             <div class="top-tools">
               <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
-                <span><i class="el-icon-plus"></i></span>
                 <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
               </button>
-              <!--<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
+              <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
-                <span><i class="el-icon-plus"></i></span>
-                <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
-              </el-button>-->
-              <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
             </div>
             <el-table
                   :data="tableData"

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

@@ -72,14 +72,9 @@
         <div class="content-right">
             <div class="top-tools">
               <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
-                <span><i class="el-icon-plus"></i></span>
                 <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
               </button>
-              <!--<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active margin-l-10 top-tool top-tool-right" size="mini">
+              <div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
-                <span><i class="el-icon-plus"></i></span>
-                <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
-              </el-button>-->
-              <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
             </div>
             <el-table
                   :data="tableData"

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

@@ -1,701 +0,0 @@
-<template>
-  <div class="project">
-    <div class="content-left">
-      <div class="sidebar-title">{{$t('project.project.project')}}：{{currentProject.name}}</div>
-      <div class="sidebar-info">
-        <div
-          v-for="item in moduleList"
-          class="sidebar-info-item"
-          :class="{'sidebar-info-item-active': item.id == currentModule.id}"
-          @click="changeModule(item)"
-        >
-          {{item.name}}
-          <div class="side-bar-menu-edit" @click.stop="toEditModule(item)"><i class="el-icon-edit-outline"></i></div>
-        </div>
-      </div>
-    </div>
-
-    <!--metrics-->
-    <div class="content-right" v-show="tableShow == 2">
-      <div class="top-tools">
-        <el-button-group>
-          <el-button @click="tableShow = 1" class="top-tool-btn top-tool" size="mini">
-            <span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
-          </el-button>
-          <el-button class="top-tool-btn top-tool top-tool-btn-active" size="mini">
-            <span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
-          </el-button>
-        </el-button-group>
-        <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
-      </div>
-      <el-table
-        :data="metricsTableData"
-        border
-        height="calc(100% - 65px)"
-        style="width: 100%;">
-        <el-table-column
-          v-for="(item, index) in metricsTableTitle"
-          v-if="item.show"
-          :width="item.width"
-          :key="`col-${index}`"
-          :label="item.label"
-        >
-          <template slot-scope="scope" :column="item">
-            <span>{{scope.row[item.prop]}}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Pagination v-cloak :pageObj="metricPageObj" @pageNo='metricsPageNo' @pageSize='metricsPageSize' ref="metricPagination"></Pagination>
-    </div>
-
-    <!--endpoint-->
-    <div class="content-right" v-show="tableShow == 1">
-      <div class="top-tools">
-        <el-button-group>
-          <el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
-            <span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
-          </el-button>
-          <el-button @click="tableShow = 2" class="top-tool-btn top-tool" size="mini">
-            <span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
-          </el-button>
-        </el-button-group>
-        <button @click="toCreateEndpoint" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
-          <span><i class="el-icon-plus"></i></span>
-          <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
-        </button>
-        <!--<el-button @click="toCreateEndpoint" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
-          <span><i class="el-icon-plus"></i></span>
-          <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
-        </el-button>-->
-        <div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch"></search-input></div>
-      </div>
-      <el-table
-        :data="endpointTableData"
-        border
-        height="calc(100% - 65px)"
-        style="width: 100%;">
-        <el-table-column
-          v-for="(item, index) in endpointTableTitle"
-          v-if="item.show"
-          :width="item.width"
-          :key="`col-${index}`"
-          :label="item.label"
-        >
-          <template slot-scope="scope" :column="item">
-            <span v-if="item.prop == 'asset' && scope.row[item.prop]">{{scope.row[item.prop].host}}</span>
-            <span v-else-if="item.prop == 'param'">
-              <span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
-            </span>
-            <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
-            <span v-else-if="item.prop == 'state'">{{scope.row.state == 1 ? 'up' : ''}}{{scope.row.state == 0 ? 'down' : ''}}</span>
-            <span v-else>{{scope.row[item.prop]}}</span>
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('overall.option')" width="100">
-          <template slot-scope="scope" :column="item">
-            <div class="content-right-options">
-              <span @click.stop="endpointDetail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
-              <span @click.stop="toEditEndpoint(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Pagination v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
-    </div>
-
-    <module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
-    <edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
-    <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "project2",
-  data() {
-    return {
-      tableShow: 1, // 1.endpoint; 2.metrics
-      editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
-      endpointTableTitle: [
-        {
-          label: this.$t("project.endpoint.endpointId"),
-          prop: 'id',
-          show: true,
-          width: 110
-        },{
-          label: this.$t("project.endpoint.host"),
-          prop: 'host',
-          show: true,
-        },{
-          label: this.$t("project.endpoint.port"),
-          prop: 'port',
-          show: true,
-        },{
-          label: this.$t("project.endpoint.param"),
-          prop: 'param',
-          show: true,
-        },{
-          label: this.$t("project.endpoint.path"),
-          prop: 'path',
-          show: true,
-        },{
-          label: this.$t("alert.list.state"),
-          prop: 'state',
-          show: true,
-        },{
-          label: this.$t("project.endpoint.lastUpdate"),
-          prop: 'lastUpdate',
-          show: true,
-        },{
-          label: this.$t("project.endpoint.asset"),
-          prop: 'asset',
-          show: true,
-        }
-      ],
-      endpointTableData: [],
-      endpointPageObj: {
-        pageNo: 1,
-        pageSize: 20,
-        total:0
-      },
-      metricsTableTitle: [
-        {
-          label: "ID",
-          prop: 'id',
-          show: true,
-          width: 100
-        },
-        {
-          label: this.$t("project.metrics.name"),
-          prop: 'metric',
-          show: true,
-        },
-        {
-          label: this.$t("project.metrics.type"),
-          prop: 'type',
-          show: true,
-        },
-        {
-          label: this.$t("project.metrics.description"),
-          prop: 'help',
-          show: true,
-        },
-      ],
-      metricsTableData: [],
-      metricPageObj: {
-        pageNo: 1,
-        pageSize: 20,
-        total: 0
-      },
-      moduleList: [],
-      projectList: [],
-      currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
-      editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //编辑的module
-      currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module
-      endpointSearchLabel: {moduleId: ''}, //endpoint搜索参数
-      metricSearchLabel: {moduleId: ''}, //metrics搜索参数
-      endpointSearchMsg: { //给搜索框子组件传递的信息
-        zheze_none: true,
-        searchLabelList: [{
-          id: 1,
-          name: "ID",
-          type: 'input',
-          label: 'id',
-          disabled: false
-        }, {
-          id: 11,
-          name: this.$t('asset.asset'),
-          type: 'asset',
-          label: 'asset',
-          disabled: false
-        }],
-      },
-      metricSearchMsg: { //给搜索框子组件传递的信息
-        zheze_none: true,
-        searchLabelList: [{
-          id: 12,
-          name: 'Metric',
-          type: 'input',
-          label: 'metric',
-          disabled: false
-        }],
-      },
-    }
-  },
-  methods: {
-    getEndpointTableData() {
-      this.endpointSearchLabel.moduleId = this.currentModule.id;
-      this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo);
-      this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize);
-      this.$get('endpoint', this.endpointSearchLabel).then(response => {
-        if (response.code === 200) {
-          for (let i = 0; i < response.data.list.length; i++) {
-            try {
-              let tempObj = JSON.parse(response.data.list[i].param);
-              response.data.list[i].paramObj = [];
-              for (let k in tempObj) {
-                response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
-              }
-            } catch (err) {
-              console.info(response.data.list[i], err);
-            }
-          }
-          this.endpointTableData = response.data.list;
-          this.endpointPageObj.total = response.data.total;
-        }
-      });
-    },
-    getMetricsTableData() {
-      this.metricSearchLabel.moduleId = this.currentModule.id;
-      this.$set(this.metricSearchLabel, 'pageNo', this.metricPageObj.pageNo);
-      this.$set(this.metricSearchLabel, 'pageSize', this.metricPageObj.pageSize);
-      this.$get('metric', this.metricSearchLabel).then(response => {
-        if (response.code === 200) {
-          this.metricsTableData = response.data.list;
-          this.metricPageObj.total = response.data.total;
-        }
-      });
-    },
-    endpointPageNo(val) {
-      this.endpointPageObj.pageNo = val;
-      this.getEndpointTableData();
-    },
-    endpointPageSize(val) {
-      this.endpointPageObj.pageSize = val;
-      this.getEndpointTableData();
-    },
-    metricsPageNo(val) {
-      this.metricPageObj.pageNo = val;
-      this.getMetricsTableData();
-    },
-    metricsPageSize(val) {
-      this.metricPageObj.pageSize = val;
-      this.getMetricsTableData();
-    },
-
-    // 获取左侧module列表数据
-    getModuleList() {
-      //若currentProject不存在（如页面刷新了），默认取project列表的第一个
-      if (this.currentProject && this.currentProject.id) {
-        this.$get('module', {projectId: this.currentProject.id, pageSize: 999, 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) {
-                console.info(response.data.list[i], err);
-              }
-            }
-            if (this.moduleList.length > 0) {
-              this.currentModule = this.moduleList[0];
-            } else {
-              this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
-            }
-          }
-        });
-      } else {
-        if (this.projectList && this.projectList.length > 0) {
-          this.$store.commit('setProject', this.projectList[0]);
-        } else {
-          this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
-            if (response.code == 200) {
-              this.projectList = response.data.list;
-              if (this.projectList.length > 0) {
-                this.getModuleList();
-              } else {
-                return;
-              }
-            }
-          });
-        }
-      }
-    },
-
-    //左侧module列表选中切换
-    changeModule(module) {
-      this.currentModule = module;
-    },
-
-    //弹出endpoint编辑页
-    toEditEndpoint(endpoint) {
-      this.rightBoxHandler(3);
-      this.$refs.editEndpointBox.toEdit(true);
-      this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
-      if (!this.editEndpoint.paramObj) {
-        this.$set(this.editEndpoint, 'paramObj', []);
-      }
-    },
-
-    toCreateEndpoint() {
-      this.$refs.addEndpointBox.show(true);
-      this.$refs.addEndpointBox.clearEndpoints();
-    },
-
-    //查看endpoint详情
-    endpointDetail(endpoint) {
-      this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
-      if (!this.editEndpoint.paramObj) {
-        this.$set(this.editEndpoint, 'paramObj', []);
-      }
-      this.rightBoxHandler(3);
-      this.$refs.editEndpointBox.toEdit(false);
-    },
-
-    //弹出module编辑页
-    toEditModule(module) {
-      this.currentModule = JSON.parse(JSON.stringify(module));
-      if (!this.currentModule.paramObj) {
-        this.$set(this.currentModule, 'paramObj', []);
-      }
-      this.editModule = JSON.parse(JSON.stringify(module));
-      if (!this.editModule.paramObj) {
-        this.$set(this.editModule, 'paramObj', []);
-      }
-      this.rightBoxHandler(2);
-    },
-
-    //搜索
-    endpointSearch: function(searchObj) {
-      this.endpointSearchLabel = {};
-      for (let item in searchObj) {
-        if (searchObj[item]) {
-          this.$set(this.endpointSearchLabel, item, searchObj[item]);
-        }
-      }
-      this.getEndpointTableData();
-    },
-    //搜索
-    metricSearch: function(searchObj) {
-      this.metricSearchLabel = {};
-      for (let item in searchObj) {
-        if (searchObj[item]) {
-          this.$set(this.metricSearchLabel, item, searchObj[item]);
-        }
-      }
-      this.getMetricsTableData();
-    },
-
-    //控制弹框状态 type  1:project; 2:module; 3:editEndponit; 4:addEndpoint;
-    rightBoxHandler(type) {
-      if (type == 1) {
-        this.$refs.projectBox.show(true);
-
-        if (this.$refs.moduleBox) {
-          this.$refs.moduleBox.show(false);
-        }
-        if (this.$refs.editEndpointBox) {
-          this.$refs.editEndpointBox.show(false);
-        }
-        //this.$refs.addEndpointBox.show(false);
-      } else if (type == 2) {
-        this.$refs.moduleBox.show(true);
-
-        if (this.$refs.projectBox) {
-          this.$refs.projectBox.show(false);
-        }
-        if (this.$refs.editEndpointBox) {
-          this.$refs.editEndpointBox.show(false);
-        }
-        //this.$refs.addEndpointBox.show(false);
-      } else if (type == 3) {
-        this.$refs.editEndpointBox.show(true);
-        if (this.$refs.projectBox) {
-          this.$refs.projectBox.show(false);
-        }
-        if (this.$refs.moduleBox) {
-          this.$refs.moduleBox.show(false);
-        }
-        //this.$refs.addEndpointBox.show(false);
-      } else if (type == 4) {
-      }
-    },
-
-    dateFormat(time) {
-      if (!time) {
-        return;
-      }
-      let date = new Date(time*1000);
-      let year = date.getFullYear();
-      let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
-      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-      let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
-      let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
-      let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
-
-      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
-    }
-
-  },
-  created() {
-    this.currentProject = this.$store.state.currentProject;
-    this.getModuleList();
-    this.getMetricsTableData();
-  },
-  mounted() {
-    setTimeout(()=>{
-      this.getEndpointTableData();
-    }, 200);
-  },
-  computed: {
-    currentProjectChange() {
-      return this.$store.state.currentProject;
-    }
-  },
-  watch: {
-    currentProjectChange(n, o) {
-      this.currentProject = Object.assign({}, n);
-    },
-    currentProject(n, o) {
-      this.getModuleList();
-    },
-    currentModule(n, o) {
-      this.metricPageObj.pageNo = 1;
-      this.endpointPageObj.pageNo = 1;
-      if (n && n.id) {
-        this.getEndpointTableData();
-        this.getMetricsTableData();
-      } else {
-        this.endpointTableData = [];
-        this.metricsTableData = [];
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .project {
-    height: 100%;
-  }
-  .content-right-option {
-    cursor: pointer;
-    display: inline-block;
-    margin-right: 6px;
-  }
-  .content-right-option .el-icon-delete {
-    color: #F98D9A;
-  }
-  .content-right-option .el-icon-delete:hover {
-    color: #D96D7A;
-  }
-  .content-right-option .el-icon-view {
-    color: #60BEFF;
-  }
-  .content-right-option .el-icon-view:hover {
-    color: #409EFF;
-  }
-
-  /* start--param*/
-  .param-btn {
-    float: right;
-    height: 27px;
-    margin-top: -3px;
-  }
-  .param-btn-active {
-    background-color: #656565;
-    color: white;
-    border: 1px solid #656565;
-  }
-  .param-btn-active:hover, .param-btn-active:focus {
-    background-color: #656565;
-    color: white;
-  }
-  .param-btn-clear {
-    background-color: #D4D4D4;
-    border: 1px solid #D4D4D4;
-    color: white;
-  }
-  .param-btn-clear:hover, .param-btn-clear:focus {
-    background-color: #D4D4D4;
-    color: white;
-  }
-
-  .param-box {
-    border: 1px solid #DCDFE6;
-    border-radius: 4px;
-    padding: 0 10px;
-  }
-  .param-box-endpoint {
-    height: 325px;
-  }
-  .param-box-module {
-    height: 227px;
-  }
-  .param-box-row {
-    padding: 7px 0 0 0;
-    position: relative;
-  }
-  .param-box-row:last-of-type {
-    padding-bottom: 7px;
-  }
-  .param-box-row-key, .param-box-row-value {
-    display: inline-block;
-    width: 41.5%;
-  }
-  .param-box-row-eq {
-    display: inline-block;
-    width: 22px;
-    text-align: center;
-    height: 32px;
-    line-height: 32px;
-    color: #c4c7cF;
-  }
-  .param-box-row-symbol {
-    font-size: 12px;
-    color: #c4c7cF;
-    border: 1px solid #c4c7cF;
-    text-align: center;
-    height: 12px;
-    width: 14px;
-    display: inline-block;
-    position: absolute;
-    top: 17px;
-    right: 25px;
-    cursor: pointer;
-  }
-  .param-box-row-symbol>i {
-    position: absolute;
-    top: 1px;
-    right: 1px;
-  }
-  /* end--param*/
-
-  /* begin--子弹框*/
-  .right-sub-box {
-    width: 380px;
-    height: 520px;
-    position: absolute;
-    top: 380px;
-    right: 100px;
-    z-index: 2;
-    padding: 0 10px;
-  }
-  .right-sub-box .el-input-group {
-    width: 227px;
-    float: right;
-    margin: 7px 0 0 0;
-  }
-  /* begin--搜索框*/
-  .endpoint-asset-prepend {
-    border-radius: 4px 0 0 4px;
-  }
-  .endpoint-asset-label {
-    line-height: 26px;
-    height: 26px;
-  }
-  .endpoint-asset-dropdown {
-    position: absolute;
-    top: 27px;
-    background-color: #656565;
-    border-radius: 4px;
-    width: 52px;
-    left: 0;
-  }
-  .endpoint-asset-dropdown-item {
-    text-align: center;
-    line-height: 22px;
-    height: 22px;
-    cursor: default;
-  }
-  .endpoint-asset-label-txt {
-    display: inline-block;
-    width: 19px;
-    text-align: center;
-  }
-  .endpoint-asset-dropdown-item:first-of-type {
-    border-radius: 4px 4px 0 0;
-  }
-  .endpoint-asset-dropdown-item:last-of-type {
-    border-radius: 0 0 4px 4px;
-  }
-  .endpoint-asset-dropdown-item:hover {
-    background-color: #3a8ee6;
-  }
-  /* end--搜索框*/
-  /* begin--table*/
-  .endpoint-sub-table {
-    margin-top: 25px;
-  }
-  .line-100 {
-    margin-bottom: 3px;
-  }
-  .endpoint-sub-table-head {
-    line-height: 28px;
-    height: 30px;
-  }
-  .endpoint-sub-table-row {
-    line-height: 28px;
-    height: 30px;
-    color: #656565;
-  }
-  .endpoint-sub-table-row-active {
-    background-color: #dadada;
-  }
-  .endpoint-sub-table-col {
-    display: inline-block;
-    width: 45%;
-    padding-left: 10px;
-  }
-  .endpoint-sub-table-paginate-all {
-    position: absolute;
-    left: 10px;
-    bottom: 17px;
-    color: #5a5a5a;
-  }
-  .endpoint-sub-table-body {
-    font-size: 15px;
-  }
-  /* end--table*/
-
-  /* end--子弹框*/
-</style>
-<style>
-  /* begin--覆盖分页组件样式*/
-  .right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
-    margin: 0 3px;
-    min-width: 25px;
-  }
-  .right-sub-box .el-pagination button, .right-sub-box .el-pagination span:not([class*=suffix]) {
-    margin: 0 3px;
-    height: 25px;
-    line-height: 25px;
-  }
-  .right-sub-box .el-pager li {
-    height: 25px;
-    line-height: 25px;
-  }
-  .right-sub-box .el-pagination.is-background .el-pager li:not(.disabled).active {
-    background-color: #656565;
-    border: 1px solid #656565;
-  }
-  .right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
-    background-color: white;
-  }
-  .right-sub-box .el-pagination button, .right-sub-box .el-pager li {
-    border: 1px solid #DADADA;
-  }
-  .right-sub-box .el-pager li.active+li {
-    border: 1px solid #DADADA;
-  }
-  .right-sub-box .el-pagination.is-background .el-pager li:not(.disabled):hover {
-    color: black;
-  }
-  .right-sub-box .el-pagination.is-background .el-pager li.active:hover {
-    color: white;
-  }
-  .endpoint-sub-table-paginate .el-pagination {
-    position: absolute;
-    right: 10px;
-    bottom: 13px;
-  }
-  .el-input-group__append>i {
-    cursor: pointer;
-  }
-
-  /* end--覆盖分页组件样式*/
-</style>

nezha-fronted/src/router/index.js

@@ -23,7 +23,7 @@ export default new Router({
         },
         {
           path: '/project',
-          component: resolve => require(['../components/page/project/project2.vue'], resolve),
+          component: resolve => require(['../components/page/project/project.vue'], resolve),
         },
         {
           path: '/asset',