feat：project页面重构

2021-04-13 10:03:49 +08:00
parent 01aaf721ba
commit 281d7ee98c
14 changed files with 363 additions and 243 deletions
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -3,6 +3,7 @@ const cn = {
  overall: {
    dashboard: '仪表盘',
    project: '系统',
+    monitor: '监控',
    alert: '告警',
    asset: '资产',
    config: '设置',
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -9,6 +9,7 @@ const en = {
  overall: {
    dashboard: 'Dashboards', // '仪表盘'
    project: 'Projects', // '系统'
+    monitor: 'Monitor', // 监控
    alert: 'Alerts', // "告警"
    asset: 'Assets', // '资产'
    config: 'Settings', // '设置'
--- a/nezha-fronted/src/components/common/mixin/dataList.js
+++ b/nezha-fronted/src/components/common/mixin/dataList.js
@@ -54,7 +54,7 @@ export default {
    isBuildIn (row) {
      return (row.buildIn && row.buildIn == 1) || (row.builtIn && row.builtIn == 1)
    },
-    getTableData (callBack) {
+    getTableData () {
      this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
      this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
      this.tools.loading = true
@@ -72,9 +72,6 @@ export default {
              this.toTopBtnHandler(this.scrollbarWrap)
            })
          }
-          if (callBack) {
-            callBack(response.data)
-          }
        }
      })
    },
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -3,7 +3,7 @@
  @import "./L5/css/props.css";
 </style>
 <template>
-  <div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
+  <div class="project-box" v-loading="topologyLoading">
    <!--project主要信息-->
    <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
      <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
@@ -100,7 +100,7 @@
             {{$t('project.topology.preview')}}
           </button>
           <button @click="saveTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
-                   v-has="'project_topo_save'" :disabled="prevent_opt.save"
+                   :disabled="prevent_opt.save"
                   :class="{'nz-btn-disabled':prevent_opt.save}"
                   style="margin-right: 20px">
             {{$t('project.topology.save')}}
@@ -111,68 +111,11 @@
         </span>
      </div>
      <div style="width: 100%;display: flex;justify-content: space-between" v-if="!editTopologyFlag&&!fromOverView">
-        <div class="facade-top">
-          <div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
-            <div class="facade-top-title">
-              Project information
-            </div>
-            <div>
-              <!--<span><span class="label">Id :</span>{{projectInfo.id}}</span>-->
-              <span><span class="label">Name :</span>{{projectInfo.name}}</span>
-            </div>
-            <div>
-              <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
-            </div>
-            <!--<div>-->
-            <!--<span>-->
-            <!--<span class="label">Alert state :</span>-->
-            <!--<div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}-->
-            <!--<div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}-->
-            <!--<div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}-->
-            <!--</span>-->
-            <!--</div>-->
-            <div>
-              <span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
-            </div>
-          </div>
-          <div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
-            <div class="facade-top-title">
-              <span class="label" style="padding-left: 0;">Alert :</span>
-              {{projectInfo.total}}
-            </div>
-            <div class="facade-top-right-content">
-              <div>
-                <div class="content-P1-title">
-                  {{returnSeverityLabel('P1')}}
-                </div>
-                <div>
-                  {{projectInfo.alertStat[0] || 0}}
-                </div>
-              </div>
-              <div>
-                <div class="content-P2-title">
-                  {{returnSeverityLabel('P2')}}
-                </div>
-                <div>
-                  {{projectInfo.alertStat[1] || 0}}
-                </div>
-              </div>
-              <div style="margin-bottom: 20px;">
-                <div class="content-P3-title">
-                  {{returnSeverityLabel('P3')}}
-                </div>
-                <div>
-                  {{projectInfo.alertStat[2] || 0}}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div  :style="{flex:1,'padding-right': '15px','text-align':topologyInfo.align,'font-size':topologyInfo.fontSize,'color':topologyInfo.fontColor,opacity:topologyInfo.opacity}">{{topologyInfo.name}}</div>
+        <div>{{topologyInfo.name}}</div>
        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">

        <button @click="editTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button" v-has="'project_topo_save'"
+                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
        >
                  <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
        </button>
@@ -182,12 +125,19 @@
            :refresh-data-func="dateChange"
            v-model="searchTime"
            :use-chart-unit="false"
+            :showTimePicker="false"
            ref="pickTime">
          </pick-time>
+          <button @click="changeScreen" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right"
+                  style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;margin-top: -2px" type="button"
+                  :class="topoScreen?'':''"
+          >
+                  <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
+        </button>
      </span>
      </div>
    </div>
-    <div :class="['page',fromOverView?'overview-page':'']">
+    <div :class="['page',fromOverView?'overview-page':'']" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
      <!--画布部分-->
      <div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
      <!--设置属性-->
@@ -579,6 +529,7 @@ export default {
      deep: true,
      immediate: true,
      handler (n) {
+        console.log(n, '123123123')
        if (n.id) {
          if (getTopology(this.topologyIndex)) {
            getTopology(this.topologyIndex).destroy()
@@ -636,7 +587,17 @@ export default {
      }
    }
  },
-  computed: {},
+  computed: {
+    topoScreen () {
+      this.$nextTick(() => {
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndex).getBoundingClientRect()
+        if (getTopology(this.topologyIndex)) {
+          getTopology(this.topologyIndex).canvasPos = domRect
+        }
+      })
+      return this.$store.getters.getShowTopoScreen
+    }
+  },
  created () {
    canvasRegister()
    if (process.client) {
@@ -1016,10 +977,10 @@ export default {
    getProjectData (n) {
      // 获取projectInfo
      this.projectInfo.loading = true
-      this.$get('project/info', { id: n.id }).then(response => {
+      this.$get('monitor/project/' + n.id).then(response => {
        if (response.code === 200) {
          this.projectInfo.loading = false
-          this.projectInfo = { ...this.projectInfo, ...response.data.basic, moduleMum: response.data.module.length }
+          this.projectInfo = { ...this.projectInfo, ...response.data }
          this.projectInfo.total = this.projectInfo.alertStat[0] + this.projectInfo.alertStat[1] + this.projectInfo.alertStat[2]
          if (!this.projectInfo.total) {
            this.projectInfo.total = 0
@@ -1034,11 +995,10 @@ export default {
    // 获取module
    getModule () {
      this.projectInfo.loading = true
-      this.$get('project/info', { id: this.obj.id }).then(response => {
+      this.$get('/monitor/module?pageSize=-1&projectIds=' + this.obj.id).then(response => {
        if (response.code === 200) {
          this.projectInfo.loading = false
-          this.projectInfo = { ...this.projectInfo, ...response.data.basic, moduleMum: response.data.module.length }
-          this.allModules = response.data.module
+          this.allModules = response.data.list
          this.modulesDiff()
        }
      })
@@ -2052,6 +2012,9 @@ export default {
    },
    penToBottom () {
      getTopology(this.topologyIndex).bottom()
+    },
+    changeScreen () {
+      this.$store.commit('setShowTopoScreen')
    }
  },
  destroyed () {
@@ -2506,7 +2469,6 @@ export default {
    height: calc(100% - 20px);
    margin-top: 10px;
    position: relative;
-    border: 1px solid #eeeeee;
    border-radius: 2px;
    overflow: hidden;
    .pickTime{
@@ -2533,7 +2495,7 @@ export default {

  .page {
    display: flex;
-    height: calc(100% - 60px);
+    height: calc(100% - 55px);
    width: 100%;
    position: relative;

--- a/nezha-fronted/src/components/common/rightBox/projectBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/projectBox.vue
@@ -68,7 +68,7 @@ export default {
        if (valid) {
          this.prevent_opt.save = true
          if (this.editProject.id) {
-            this.$put('project', this.editProject).then(response => {
+            this.$put('monitor/project', this.editProject).then(response => {
              if (response.code === 200) {
                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.$store.commit('projectListChange')
@@ -80,7 +80,7 @@ export default {
              this.prevent_opt.save = false
            })
          } else {
-            this.$post('project', this.editProject).then(response => {
+            this.$post('monitor/project', this.editProject).then(response => {
              if (response.code === 200) {
                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
                this.$store.commit('projectListChange')
@@ -104,7 +104,7 @@ export default {
        cancelButtonText: this.$t('tip.no'),
        type: 'warning'
      }).then(() => {
-        this.$delete('project?ids=' + this.editProject.id).then(response => {
+        this.$delete('monitor/project?ids=' + this.editProject.id).then(response => {
          if (response.code === 200) {
            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
            this.$store.commit('projectListChange')
--- a/nezha-fronted/src/components/common/table/settings/projectTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/projectTable.vue
@@ -0,0 +1,125 @@
+<template>
+  <el-table
+    id="userTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="(selection) => { batchDeleteObjs = selection }"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span>{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'moduleNum'">
+          moduleNum
+        </template>
+        <template v-else-if="item.prop === 'endpointNum'">
+          endpointNum
+        </template>
+        <template v-else-if="item.prop === 'alertNum'">
+          alertNum
+        </template>
+        <span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : ''}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+      <div slot-scope="scope" class="table-operation-items">
+        <button class="table-operation-item" @click="changeProjectTopo( scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
+        <el-dropdown size="medium" trigger="hover" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more">
+            <span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
+            <el-dropdown-item :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'userTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('project.project.project'),
+          prop: 'name',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('project.module.module'),
+          prop: 'moduleNum',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('project.endpoint.endpoint'),
+          prop: 'endpointNum',
+          show: true,
+          width: 150
+        }, {
+          label: this.$t('project.endpoint.endpoint'),
+          prop: 'alertNum',
+          show: true,
+          width: 150
+        },
+        {
+          label: this.$t('overall.remark'),
+          prop: 'remark',
+          show: true,
+          minWidth: 150
+        }
+      ]
+    }
+  },
+  methods: {
+    changeProjectTopo (project) {
+      this.$store.commit('currentProjectChange', project)
+    }
+  },
+  computed: {
+    isCurrentUser () {
+      return function (username) {
+        return localStorage.getItem('nz-username') === username
+      }
+    }
+  }
+}
+</script>
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -322,7 +322,7 @@ export default {
      }
    },
    getProjectList () {
-      this.$get('project', { pageSize: -1 }).then(response => {
+      this.$get('monitor/project', { pageSize: -1 }).then(response => {
        if (response.code == 200) {
          this.projectData = response.data.list
          let flag = false
--- a/nezha-fronted/src/components/layout/leftMenu.vue
+++ b/nezha-fronted/src/components/layout/leftMenu.vue
@@ -99,7 +99,7 @@ export default {
          className = 'nz-icon nz-icon-menu-assets'
          break
        }
-        case 'project': {
+        case 'monitor': {
          className = 'nz-icon nz-icon-menu-project'
          break
        }
--- a/nezha-fronted/src/components/page/monitor/project/index.vue
+++ b/nezha-fronted/src/components/page/monitor/project/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="main-list">
+    <projectList  :class="showList?'projectList':'hide'" />
+    <projectTopo class="projectTopo"/>
+  </div>
+</template>
+
+<script>
+import projectList from './projectList'
+import projectTopo from './project'
+export default {
+  name: 'index',
+  props: {},
+  computed:{
+    showList(){
+      return !this.$store.getters.getShowTopoScreen
+    }
+  },
+  components: {
+    projectList,
+    projectTopo
+  },
+  data () {
+    return {}
+  },
+  watch: {},
+  mounted () {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.main-list{
+  height: 100%;
+  width: 100%;
+  display: flex;
+  background: #fff;
+  .projectList{
+    flex: 1;
+  }
+  .projectTopo{
+    flex: 1;
+  }
+  .hide{
+    display: none;
+  }
+}
+</style>
--- a/nezha-fronted/src/components/page/monitor/project/project.vue
+++ b/nezha-fronted/src/components/page/monitor/project/project.vue
@@ -1,5 +1,5 @@
 <style lang="scss">
-  @import '../../charts/chart';
+  @import '../../../charts/chart';

  .project-calendar .el-input__inner {
    height: 24px;
@@ -25,161 +25,7 @@
 </style>
 <template>
  <div class="project">
-    <template v-if="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">
-          <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': bottomBox.showSubList}">
-            <div class="top-tool-search">
-              <search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input>
-            </div>
-            <export-excel
-              id="endpoint-list"
-              export-file-name="endpoint"
-              export-url="/endpoint/export"
-              import-url="/endpoint/import"
-              :params="endpointSearchLabel"
-              :permissions="{import: 'project_endpoint_import', export: 'project_endpoint_export'}"
-              @afterImport="afterCloseImport"
-              class="margin-l-20"
-            >
-              <template slot="optionZone">
-                <button :title="$t('overall.createEndpoint')" @click.stop="addEndpoint" v-has="'project_endpoint_toAdd'"
-                        class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
-                  <i class="nz-icon nz-icon-create-square"></i>
-                </button>
-              </template>
-            </export-excel>
-            <delete-button :delete-objs="batchDeleteObjs" @after="afterCloseImport" @before="delFlag=true" api="endpoint" v-has="'project_endpoint_delete'"></delete-button>
-          </div>
-          <div class="pagination-top pagination-top-hide display-none"></div>
-        </div>
-        <!-- 自定义table列 -->
-        <transition name="el-zoom-in-top">
-          <element-set
-            id="endpoint-list"
-            v-if="tools.showCustomTableTitle"
-            @close="tools.showCustomTableTitle = false"
-            :custom-table-title.sync="tools.customTableTitle"
-            :original-table-title="tableTitle"
-            ref="customTableTitle"
-          ></element-set>
-        </transition>
-        <el-table
-          id="endpoint-list-table"
-          :data="endpointTableData"
-          border
-          class="nz-table endpoint-table"
-          :height="mainTableHeight"
-          v-show="bottomBox.mainResizeShow"
-          ref="endpointTable"
-          :cell-class-name="messageStyle"
-          v-loading="tools.loading"
-          style="width: 100%;"
-          @sort-change="tableDataSort"
-          @row-dblclick="detailEndpoint"
-          @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
-          @header-dragend="()=>{this.$refs.endpointTable.doLayout();}"
-        >
-          <el-table-column
-            :resizable="false"
-            type="selection"
-            width="40"
-            align="center">
-          </el-table-column>
-          <el-table-column
-            :resizable="true"
-            v-for="(item, index) in tools.customTableTitle"
-            v-if="item.show"
-            :key="`col-${index}`"
-            :label="item.label"
-            :min-width="item.width || item.minWidth"
-            :sortable="$tableSet.sortableShow(item.prop,'project')"
-            :prop="$tableSet.propTitle(item.prop,'project')"
-            :sort-orders="['ascending', 'descending']"
-          >
-            <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].sn}} :
-                ({{scope.row[item.prop].host}})
-              </span>
-              <span v-else-if="item.prop === 'param'">
-              <template v-if="scope.row.paramObj">
-                <span v-for="(p, i) in scope.row.paramObj" :key="i">{{p.key}}={{p.value}}<span
-                  v-if="i < scope.row.paramObj.length-1">，</span></span>
-              </template>
-              <template v-else>-</template>
-            </span>
-              <span v-else-if="item.prop === 'labels'">
-                <template v-if="scope.row.labelModule">
-                  <span v-for="(p, i) in scope.row.labelModule" :key="i">{{p.key}}={{p.value}}<span
-                    v-if="i < scope.row.labelModule.length-1">，</span></span>
-                </template>
-                <template v-else>-</template>
-              </span>
-              <template v-else-if="item.prop === 'alerts'">
-                <el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light"
-                            :disabled=" scope.row.alertNum < 99">
-                  <span :id="'endpoint-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">
-                    {{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
-                      <sup class="linkSup" v-if="scope.row.alertNum > 99">+</sup>
-                    {{' ' + $t('overall.active')}}
-                  </span>
-                </el-tooltip>
-              </template>
-              <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>
-                &nbsp;
-                <span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option"
-                      :id="'edp-query-'+scope.row.id"><i class="nz-icon nz-icon-search"></i></span>
-                &nbsp;
-                <span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" v-has="'project_endpoint_toEdit'"
-                      :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-
-                <span :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option" v-has="'project_endpoint_delete'"
-                      :id="'asset-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></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':''">
-                <div slot="reference" style="width: 20px">
-                  <div :class="{'active-icon green':scope.row.state == '1', 'active-icon red':scope.row.state == '0', 'active-icon gray':scope.row.state == '2'}"></div>
-                </div>
-                <div>
-                  <div v-if="scope.row.state == '1'">up</div>
-                  <div v-else-if="scope.row.state == '0'">down:<br/>{{getStateErrorMsg(scope.row)}}</div>
-                  <div v-else-if="scope.row.state == '2'">suspended</div>
-                </div>
-              </el-popover>
-            </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="true">
-            <template slot="header">
-            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)"
-                  class="nz-table-gear">
-              <i class="nz-icon nz-icon-gear"></i>
-            </span>
-            </template>
-          </el-table-column>
-        </el-table>
-        <button class="to-top" :style="{top: tools.toTopBtnTop}" id="endpoint-list-totop"
-                :class="{'to-top-is-hover': tools.tableHover}"
-                @click="toTop(scrollbarWrap)" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i
-          class="nz-icon nz-icon-top"></i></button>
-        <div class="pagination-bottom" v-show="!bottomBox.showSubList">
-          <Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo'
-                      @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
-        </div>
-      </div>
-    </template>
-    <template v-else-if="pageType == 'project'">
-      <!--<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>-->
-      <!--<facade :obj="currentProject" targetTab.sync="panel" ref="facade" v-if="reloadFacade"/>-->
+    <template>
      <topologyL5 :obj="currentProject" targetTab.sync="panel" ref="facade" :topologyIndexF="topologyIndexF" v-if="reloadFacade" @changeTopologyIndexF="changeTopologyIndexF"/>
    </template>

@@ -212,10 +58,10 @@
 </template>

 <script>
-import exportXLSX from '../../common/exportXLSX'
-import bus from '../../../libs/bus'
+import exportXLSX from '@/components/common/exportXLSX'
+import bus from '@/libs/bus'
 import topologyL5 from '@/components/common/project/topologyL5'
-import deleteButton from '../../common/deleteButton'
+import deleteButton from '@/components/common/deleteButton'

 export default {
  name: 'project2',
@@ -777,7 +623,6 @@ export default {
    if (pageSize) {
      this.endpointPageObj.pageSize = pageSize
    }
-    this.getModuleList()
    this.getUserData()
    this.getProjectList()
  },
@@ -786,7 +631,6 @@ export default {
    this.tools.customTableTitle = localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path)
      ? JSON.parse(localStorage.getItem('nz-tableTitle-' + localStorage.getItem('nz-username') + '-' + this.$route.path))
      : this.tableTitle
-    this.tableTitleReset(this.tableTitle, this.tools.customTableTitle)
    setTimeout(() => {
      this.ready = true
    }, 300)
@@ -855,6 +699,12 @@ export default {
          this.delFlag = false
        }
      }
+    },
+    currentProjectChange: {
+      deep: true,
+      handler (n) {
+        this.currentProject = this.$store.state.currentProject
+      }
    }
  },
  beforeDestroy () {
--- a/nezha-fronted/src/components/page/monitor/project/projectList.vue
+++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="project-list">
+    <nz-data-list
+      ref="dataList"
+      :api="url"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.user"
+      :layout="['searchInput', 'elementSet']"
+      :search-msg="searchMsg">
+      <template v-slot:top-tool-right>
+        <button id="account-add" v-has="'project_toAdd'" :title="$t('overall.createUser')" class="top-tool-btn margin-l-20"
+                type="button" @click="add">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>
+        <delete-button id="account-list-batch-delete" v-has="'account_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+      </template>
+      <template v-slot="slotProps">
+        <project-table
+          ref="dataTable"
+          v-loading="slotProps.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></project-table>
+      </template>
+      <template v-slot:pagination>
+        <div class="project-page">
+          <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+        </div>
+      </template>
+    </nz-data-list>
+    <transition name="right-box">
+      <projectBox v-if="rightBox.show" :project="object" @close="closeRightBox"></projectBox>
+    </transition>
+  </div>
+</template>
+<script>
+import deleteButton from '@/components/common/deleteButton'
+import projectBox from '@/components/common/rightBox/projectBox'
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import projectTable from '@/components/common/table/settings/projectTable'
+
+export default {
+  name: 'user',
+  components: {
+    nzDataList,
+    projectBox,
+    deleteButton,
+    projectTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: 'monitor/project',
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        remark: ''
+      },
+      tableId: 'projectTable',
+      queryPermission: 'account_view',
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [{
+          id: 10,
+          name: 'Project name',
+          type: 'input',
+          label: 'name',
+          disabled: false
+        },
+        {
+          id: 10,
+          name: 'Project id',
+          type: 'input',
+          label: 'id',
+          disabled: false
+        }]
+      },
+      roles: []
+    }
+  },
+  methods: {
+  },
+  computed: {
+  },
+  mounted () {
+  }
+}
+</script>
+<style lang="scss">
+  .project-list{
+    .project-page{
+      margin: 0 20px;
+      border: 1px solid #eeeeee;
+      border-top: none;
+      /deep/ .pagination{
+        padding-top: 0;
+      }
+    }
+  }
+</style>
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -34,8 +34,8 @@ export default new Router({
          component: resolve => require(['../components/page/dashboard/overview/overview2.vue'], resolve)
        },
        {
-          path: '/project',
-          component: resolve => require(['../components/page/project/project.vue'], resolve)
+          path: '/monitor/project',
+          component: resolve => require(['../components/page/monitor/project/index.vue'], resolve)
        },
        {
          path: '/asset',
--- a/nezha-fronted/src/store/index.js
+++ b/nezha-fronted/src/store/index.js
@@ -31,7 +31,8 @@ const store = new Vuex.Store({
    },
    idcArr: [],
    overViewProject: {},
-    dcDataRefresh: false
+    dcDataRefresh: false,
+    showTopoScreen: false,
  },
  getters: {
    getLinkData (state) {
@@ -51,6 +52,12 @@ const store = new Vuex.Store({
    },
    getDcDataRefresh (state) {
      return state.dcDataRefresh
+    },
+    getCurrentProject (state) {
+      return state.currentProject
+    },
+    getShowTopoScreen (state) {
+      return state.showTopoScreen
    }
  },
  mutations: {
@@ -125,6 +132,9 @@ const store = new Vuex.Store({
      setTimeout(() => {
        state.dcDataRefresh = false
      }, 100)
+    },
+    setShowTopoScreen (state) {
+      state.showTopoScreen = !state.showTopoScreen
    }
  },
  actions: {
--- a/nezha-fronted/ws.js
+++ b/nezha-fronted/ws.js
@@ -0,0 +1,18 @@
+'use strict'
+const path = require('path')
+
+module.exports = {
+  context: path.resolve(__dirname, './'),
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      '@': path.resolve('src'),
+      '@assets': path.resolve(__dirname, 'src/assets'),
+      '@pages': path.resolve(__dirname, 'src/pages'),
+      '@comp': path.resolve(__dirname, 'src/components'),
+      '@api': path.resolve(__dirname, 'src/api'),
+      '@plug': path.resolve(__dirname, 'src/plugins'),
+      '@utils': path.resolve(__dirname, 'src/utils')
+    }
+  }
+}