fix：修改 topology 相关右滑表格的样式问题

nezha-fronted/src/components/common/project/popData/Info.vue

@@ -20,16 +20,12 @@
           </span>
         </div>
         <div class="content-box">
-          <span class="content-title">Port</span>
+          <span class="content-title">Asset</span>
-          <span class="content-text">{{moduleInfo.port?moduleInfo.port:'--'}}</span>
+          <span class="content-text">{{moduleInfo.assetNum?moduleInfo.assetNum:'--'}}</span>
         </div>
         <div class="content-box">
-          <span class="content-title">Path</span>
+          <span class="content-title">Endpoint</span>
-          <span class="content-text">{{moduleInfo.path?moduleInfo.path:'--'}}</span>
+          <span class="content-text">{{moduleInfo.endpointNum?moduleInfo.endpointNum:'--'}}</span>
-        </div>
-        <div class="content-box">
-          <span class="content-title">Parameter</span>
-          <span class="content-text">{{moduleInfo.seq?moduleInfo.seq:'--'}}</span>
         </div>
         <div class="content-box">
           <span class="content-title">Descripsion</span>
@@ -58,15 +54,17 @@ export default {
         remark: '',
         port: '',
         path: '',
-        seq: ''
+        seq: '',
+        assetNum: '',
+        endpointNum: ''
       }
     }
   },
   mounted () {
     this.loading = true
-    this.$get('/module', { id: this.moduleId }).then(res => {
+    this.$get('/monitor/module/' + this.moduleId).then(res => {
       this.loading = false
-      this.moduleInfo = res.data.list[0]
+      this.moduleInfo = res.data
     })
   },
   methods: {},

nezha-fronted/src/components/common/project/popData/alertTable.vue

@@ -1,163 +1,41 @@
 <template>
   <div class="mc" @click.self="clickOutside">
     <div class="right-box right-box-project-alert">
-      <!-- begin--标题-->
+      <div class="right-box-title">{{$t('dashboard.overview.alert.alertMessage')}}</div>
-      <div class="right-box-title">Alert messages</div>
+      <nz-data-list
-      <!-- end--标题-->
+        ref="dataList"
-
+        :api="url"
-      <!-- begin搜素框-->
+        :custom-table-title.sync="tableTitle"
-      <div class="top-tools">
+        :from="fromRoute.alertMessage"
-        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': false}">
+        :layout="['searchInput']"
-          <pick-time :refresh-data-func="getAlertList" v-model="searchTime" :use-chart-unit="false" :use-refresh="false" :default-pick="12" :show-empty="true"></pick-time>
+        :search-msg="searchMsg"
-          <div class="top-tool-search">
+        @search="search"
-            <search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
+        v-loading="tools.loading"
-          </div>
+      >
-          <!--<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"-->
+        <template v-slot:top-tool-right>
-                  <!--class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">-->
+          <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData">
-            <!--<i class="nz-icon nz-icon-download1"></i>-->
+            <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          <!--</button>-->
+          </el-select>
-        </div>
+        </template>
-        <div class="pagination-top pagination-top-hide display-none"></div>
+        <template v-slot:default="slotProps">
-      </div>
+          <alert-message-table
-      <!-- end搜素框-->
+            ref="dataTable"
-
+            :api="url"
-      <!-- begin--表格-->
+            :custom-table-title="tableTitle"
-      <div class="right-box-form-box">
+            :height="mainTableHeight"
-        <el-table
+            :now-time="nowTime"
-          class="nz-table tabelH100"
+            :table-data="tableData"
-          :data="tableData"
+            @del="del"
-          border
+            @edit="edit"
-          ref="alertListTable"
+            @orderBy="tableDataSort"
-          tooltip-effect="light"
+            @reload="getTableData"
-          :height="tableHeight"
+            @selectionChange="selectionChange"></alert-message-table>
-          v-loading="loading"
+        </template>
-          :cell-class-name="labelsClassName"
+        <!-- 分页组件 -->
-          @selection-change="selectChange"
+        <template v-slot:pagination>
-          style="width: 100%;height: 100%"
+          <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
-          @sort-change="tableDataSort"
+        </template>
-          :id="projectId"
+      </nz-data-list>
-        >
-          <!--<el-table-column-->
-            <!--:resizable="false"-->
-            <!--type="selection"-->
-            <!--width="38"-->
-            <!--align="center"-->
-          <!--&gt;-->
-          <!--</el-table-column>-->
-          <el-table-column
-            :resizable="true"
-            v-for="(item, index) in tableTitle"
-            v-if="item.show"
-            :width="item.width"
-            :minWidth="item.minWidth"
-            :key="`col-${index}`"
-            :label="item.label"
-            :show-overflow-tooltip="item.prop != 'labels'"
-            min-width="110px"
-            :sortable="$tableSet.sortableShow(item.prop,'alertMessage')"
-            :prop="$tableSet.propTitle(item.prop,'alertMessage')"
-            :sort-orders="['ascending', 'descending']"
-          >
-            <template slot-scope="scope" :column="item">
-              <template v-if="item.prop == 'alertRule'">
-                <div v-if="scope.row.alertRule.alertName" >
-                  <span @mouseenter="alertMessagehover(scope.row.alertRule, true, $event)" @mouseleave="alertMessagehover(scope.row.alertRule, false)">{{scope.row.alertRule.alertName}}</span>
-                  <alertRuleInfo v-if="scope.row.alertRule.loading" :id="scope.row.alertRule.id" :that="scope.row.alertRule"></alertRuleInfo>
-                </div>
-                <template v-else>-</template>
-              </template>
-              <template v-else-if="item.prop == 'summary'">
-                <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-                <template v-else>-</template>
-              </template>
-              <template v-else-if="item.prop == 'description'">
-                <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
-                <span v-else>-</span>
-              </template>
-              <span v-else-if="item.prop == 'severity'" class="severity">
-                <span v-if="scope.row[item.prop] == 'P1'" class="P1">P1</span>
-                    <!--<i class="nz-icon nz-icon-arrow-up"></i> {{returnSeverityLabel(scope.row[item.prop])}}-->
-                <span v-if="scope.row[item.prop] == 'P2'" class="P2">P2</span>
-                    <!--{{returnSeverityLabel(scope.row[item.prop])}}-->
-                <span v-if="scope.row[item.prop] == 'P3'" class="P3">P3</span>
-                    <!--<i class="nz-icon nz-icon-arrow-down"></i>&nbsp;{{returnSeverityLabel(scope.row[item.prop])}}-->
-              </span>
-              <template v-else-if="item.prop == 'labels'" class="labels">
-                <span v-for="(item, i) in labelsSort(scope.row.labels)" :key="i">
-                  <span @mouseenter="labelHover(scope.row,scope.$index, item.label, true, $event)" @mouseleave="labelHover(scope.row,scope.$index, item.label, false)">
-                    <nz-alert-tag
-                      v-if="item.label != 'alertname' && item.label != 'severity'" :key="item.label" :cursor-point="tagType(item.label) == 'info' ? false : true"
-                      :label="item.label"
-                      :type="tagType(item.label)"
-                      style="margin: 5px 0 5px 5px;"
-                    >
-                     {{item.value}}
-                    </nz-alert-tag>
-                  </span>
-                  <alertLabel
-                    v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
-                    :id="scope.row[item.label].id"
-                    :that="scope.row[item.label]"
-                    :type="item.label"
-                  ></alertLabel>
-                </span>
-
-                <!--<el-tooltip
-                  v-for="(item,i) in labelsSort(scope.row.labels)"
-                  :placement="scope.$index==0?'right-start':(scope.$index==tableData.length-1?'right-end':'right')"
-                  effect="light"
-                  :disabled="!(item.label === 'asset' ||item.label === 'module' || item.label === 'project')"
-                  :key="item.label"
-                >
-                  <alertLabel
-                    v-if="item.label === 'asset' ||item.label === 'module' || item.label === 'project'"
-                    slot="content"
-                    :id="scope.row[item.label].id"
-                    :type="item.label"
-                    :labelLoading="scope.row[item.label].loading"
-                  ></alertLabel>
-                  <span @mouseover="labelHover(scope.row,scope.$index,item.label)" >
-                         <nz-alert-tag
-                           :label="item.label" :type="tagType(item.label)" style="margin: 5px 0 5px 5px;"
-                           :cursor-point="tagType(item.label) == 'info' ? false : true"
-                           :key="item.label"
-                           v-if="item.label != 'alertname' && item.label != 'severity'"
-                         >
-                           {{item.value}}
-                         </nz-alert-tag>
-                  </span>
-                </el-tooltip>-->
-
-              </template>
-              <span v-else-if="item.prop == 'state'" :class="{'green': scope.row['state'] == 2, 'red': scope.row['state'] == 1}">
-                {{scope.row['state'] == 1 ? "Pending" : ""}}
-                {{scope.row['state'] == 2 ? "Expired" : ""}}
-              </span>
-              <div v-else-if="item.prop == 'current'" class="too-long-split pointer" @click="detail(scope.row)">
-                <span v-if="!scope.row.current">-</span>
-                <el-popover v-else placement="right" trigger="hover">
-                  <div slot="reference">
-                    <span class="content-right-option" :id="'alert-list-detail-'+scope.row.id"><i class="nz-icon nz-icon-chart"></i></span>
-                    <span>{{formatThreshold(scope.row.current[1],scope.row.alertRule.unit)}}</span>
-                  </div>
-                  <div>{{$unixTimeParseToString(scope.row.current[0])}}</div>
-                </el-popover>
-              </div>
-              <div v-else-if="item.prop == 'option'" class="content-right-options">
-                <span :title="$t('overall.delete')" @click="toDeleteMessage(scope.row)" class="content-right-option" :id="'alert-list-delete-'+scope.row.id"><i  class="nz-icon nz-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>
-      </div>
-      <!-- end--表格-->
-
-      <!--底部分頁-->
-      <div class="pagination-bottom">
-        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      </div>
     </div>
   </div>
 </template>
@@ -167,6 +45,10 @@ import bus from '@/libs/bus'
 import nzAlertTag from '@/components/page/alert/nzAlertTag'
 import alertRuleInfo from '@/components/common/alert/alertRuleInfo'
 import alertLabel from '@/components/common/alert/alertLabel'
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import alertMessageTable from '@/components/common/table/alert/alertMessageTable.vue'
+import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
 export default {
   name: 'alertTable',
   props: {
@@ -176,8 +58,11 @@ export default {
   components: {
     'nz-alert-tag': nzAlertTag,
     alertRuleInfo: alertRuleInfo,
-    alertLabel: alertLabel
+    alertLabel: alertLabel,
+    nzDataList,
+    alertMessageTable
   },
+  mixins: [dataListMixin],
   watch: {
   },
   computed: {
@@ -207,6 +92,10 @@ export default {
   },
   data () {
     return {
+      url: 'alert/message',
+      state: '1',
+      tableId: '',
+      stateOptions: alertMessageConstant.states,
       pageObj: {
         pageNo: 1,
         pageSize: this.$CONSTANTS.defaultPageSize,
@@ -248,56 +137,41 @@ export default {
       ],
       searchTime: [],
       searchMsg: { // 给搜索框子组件传递的信息
-        zheze_none: true,
+        searchLabelList: [
-        searchLabelList: [{
+          {
-          id: 1,
+            id: 26,
-          name: this.$t('alert.alertName'),
+            name: this.$t('alert.list.id'),
-          type: 'input',
+            type: 'id',
-          label: 'alertName',
+            label: 'id',
-          disabled: false
-        }, /* {
-            id: 3,
-            name: this.$t('alert.list.type'),
-            type: 'select',
-            label: 'alertType',
             disabled: false
-          }, */{
+          },
-          id: 20,
+          {
-          name: this.$t('alert.severity'),
+            name: this.$t('alert.alertRule'),
-          type: 'selectString',
+            type: 'input',
-          label: 'severity',
+            label: 'ruleName',
-          disabled: false
+            disabled: false
-        }, {
+          }, {
-          id: 21,
+            name: this.$t('asset.asset'),
-          name: this.$t('asset.asset'),
+            type: 'input',
-          type: 'asset',
+            label: 'assetName',
-          label: 'asset',
+            disabled: false
-          disabled: false
+          }, {
-        }, {
+            name: 'Endpoint',
-          id: 22,
+            type: 'input',
-          name: this.$t('project.project.projectName'),
+            label: 'endpointName',
-          type: 'project',
+            disabled: false
-          label: 'project',
+          }, {
-          disabled: false
+            name: this.$t('alert.summary'),
-        }, {
+            type: 'input',
-          id: 23,
+            label: 'summary',
-          name: this.$t('project.module.module'),
+            disabled: false
-          type: 'module',
+          }, {
-          label: 'module',
+            name: 'Labels',
-          disabled: false
+            type: 'input',
-        }, {
+            label: 'labels',
-          id: 24,
+            disabled: false
-          name: this.$t('project.endpoint.endpoint'),
+          }
-          type: 'input',
+        ]
-          label: 'endpointId',
-          disabled: false
-        }, {
-          id: 25,
-          name: this.$t('alert.list.state'),
-          type: 'select',
-          label: 'alertMessageState',
-          disabled: false
-        }]
       },
       tableData: [],
       loading: false,
@@ -317,14 +191,14 @@ export default {
     }
   },
   mounted () {
-    this.getAlertList()
+    this.getTableData()
   },
   methods: {
-    getAlertList: function () {
+    getTableData: function () {
-      this.loading = true
+      this.tools.loading = true
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
-      this.$set(this.searchLabel, 'moduleId', this.moduleId)
+      this.$set(this.searchLabel, 'moduleIds', this.moduleId)
       if (this.searchTime && this.searchTime.length > 1) {
         this.$set(this.searchLabel, 'startAt', bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss'))
         this.$set(this.searchLabel, 'endAt', bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss'))
@@ -332,8 +206,8 @@ export default {
         delete this.searchLabel.startAt
         delete this.searchLabel.endAt
       }
-      this.$get('alert/message', { ...this.searchLabel }).then(response => {
+      this.$get(this.url + '?state=' + this.state, { ...this.searchLabel }).then(response => {
-        this.loading = false
+        this.tools.loading = false
         if (response.code == 200) {
           this.nowTime = this.utcTimeToTimezoneStr(response.time)
           this.tableData = response.data.list
@@ -369,12 +243,12 @@ export default {
     },
     pageNo (val) {
       this.pageObj.pageNo = val
-      this.getAlertList()
+      this.getTableData()
     },
     pageSize (val) {
       this.pageObj.pageSize = val
       localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
-      this.getAlertList()
+      this.getTableData()
     },
     selectChange (s) {
       const ids = []
@@ -432,7 +306,7 @@ export default {
       }
       this.pageObj.orderBy = orderBy
       this.$set(this.searchLabel, 'orderBy', orderBy)
-      this.getAlertList()
+      this.getTableData()
     },
     /* 关闭弹框 */
     esc (refresh) {
@@ -463,7 +337,7 @@ export default {
       if (this.$refs.alertListTable && this.$refs.alertListTable.bodyWrapper) {
         this.$refs.alertListTable.bodyWrapper.scrollTop = 0
       }
-      this.getAlertList()
+      this.getTableData()
     },
 
     showExportDialog () {
@@ -483,6 +357,9 @@ export default {
   }
   .right-box-title{
     font-weight: bold;
+    padding-left: 20px;
+    position: absolute;
+    z-index: 1;
   }
   .mc{
     position: fixed;
@@ -527,5 +404,8 @@ export default {
     color: #FFFFFF;
     padding: 2px 6px;
   }
+  .right-box  /deep/ .list-page .main-container{
+    background: #fff;
+  }
   /* end--table*/
 </style>

nezha-fronted/src/components/common/project/popData/assetTable.vue

@@ -1,119 +1,51 @@
 <template>
   <div class="mc" @click.self="clickOutside">
     <div class="right-box right-box-project-alert">
-      <!-- begin--顶部按钮-->
+      <div class="right-box-title">{{$t('asset.asset')}}</div>
-      <div class="right-box-top-btns">
+      <nz-data-list
-        <!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
+        ref="dataList"
-        <!--<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>-->
+        :api="url"
-        <!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
+        :custom-table-title.sync="tableTitle"
-        <!--</button>-->
+        :from="fromRoute.asset"
-      </div>
+        :layout="dataListLayout"
-      <!-- end--顶部按钮-->
+        :search-msg="searchMsg"
-
+        @search="search"
-      <!-- begin--标题-->
+      >
-      <div class="right-box-title">Asset</div>
+        <template v-slot:default="slotProps">
-      <!-- end--标题-->
+          <asset-table
-
+            ref="dataTable"
-      <!-- begin搜素框-->
+            v-loading="tools.loading"
-      <div class="top-tools">
+            :api="url"
-        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': false}">
+            :custom-table-title="tableTitle"
-          <div class="top-tool-search">
+            :height="mainTableHeight"
-            <search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
+            :table-data="tableData"
-          </div>
+            @orderBy="tableDataSort"
-          <!--<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"-->
+            @reload="getTableData"></asset-table>
-          <!--class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">-->
+        </template>
-          <!--<i class="nz-icon nz-icon-download1"></i>-->
+        <!-- 分页组件 -->
-          <!--</button>-->
+        <template v-slot:pagination>
-        </div>
+          <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
-        <div class="pagination-top pagination-top-hide display-none"></div>
+        </template>
-      </div>
+      </nz-data-list>
-      <!-- end搜素框-->
-
-      <!-- begin--表格-->
-      <div class="right-box-form-box">
-        <el-table
-          class="nz-table"
-          :height="mainTableHeight"
-          style="width: 100%;"
-          :data="tableData"
-          border
-          v-loading="loading"
-          tooltip-effect="light"
-          ref="assetTable"
-          :cell-class-name="messageStyle"
-          @sort-change="tableDataSort"
-        >
-          <el-table-column
-            :resizable="true"
-            v-for="(item, index) in tableTitle"
-            v-if="item.show"
-            :width="item.width"
-            :key="`col_${index}`"
-            :label="item.label"
-            :fixed="item.fixed"
-            :show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
-            min-width="110px"
-            :class-name="item.prop == 'option' ? 'content-right-options' : ''"
-            :sortable="$tableSet.sortableShow(item.prop,'asset')"
-            :prop="$tableSet.propTitle(item.prop,'asset')"
-            :sort-orders="['ascending', 'descending']"
-          >
-            <template slot-scope="scope" :column="item">
-              <div v-if="item.prop=='HOST'">
-                <span>{{scope.row.host}}</span>
-              </div>
-              <div v-if="item.prop=='assetType'">
-                <span>{{scope.row.model.type.value}}</span>
-              </div>
-              <template v-if="item.prop=='SN'">{{scope.row.sn}}</template>
-              <div v-if="item.prop=='state'">
-                <span v-if="scope.row.state==1">{{ $t('asset.inStock')}}</span>
-                <span v-if="scope.row.state==2">{{ $t('asset.notInStock')}}</span>
-                <span v-if="scope.row.state==3">{{ $t('asset.suspended')}}</span>
-              </div>
-              <div v-if="item.prop == 'pingStatus'">
-                <el-popover
-                  placement="right"
-                  width="200"
-                  trigger="hover"
-                  :content="formatPingTime(scope.row.pingLastUpdate)">
-                  <div slot="reference" style="width: 20px">
-                    <div :class="{'active-icon green':scope.row.pingState == 1,'active-icon red':scope.row.pingState == 0}"></div><span>{{scope.row.pingRtt?scope.row.pingRtt+'ms':''}}</span>
-                  </div>
-                </el-popover>
-              </div>
-              <template v-if="item.prop=='Alert'">
-
-                <el-tooltip :content="scope.row.alertNum+' '+$t('overall.active')" placement="top" effect="light" :disabled=" scope.row.alertNum < 99">
-              <span :id="'asset-alerts-'+scope.row.id" class="link">
-                <!--@click="jumpToAlertMsg(scope.row)"-->
-                {{(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>
-          </el-table-column>
-        </el-table>
-      </div>
-      <!-- end--表格-->
-
-      <!--底部分頁-->
-      <div class="pagination-bottom">
-        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import assetTable from '@/components/common/table/asset/assetTable'
 export default {
-  name: 'assetTable',
+  name: 'assetTableProject',
   props: {
     moduleId: {},
     projectId: {}
   },
+  components: {
+    nzDataList,
+    assetTable
+  },
+  mixins: [dataListMixin],
   watch: {
   },
   computed: {
@@ -143,6 +75,9 @@ export default {
   },
   data () {
     return {
+      url: 'asset/asset',
+      tableId: 'projectAsset',
+      dataListLayout: ['searchInput'],
       pageObj: {
         pageNo: 1,
         pageSize: this.$CONSTANTS.defaultPageSize,
@@ -151,30 +86,41 @@ export default {
       mainTableHeight: '100%',
       tableTitle: [
         {
-          label: this.$t('asset.host'),
+          label: 'ID',
-          prop: 'HOST',
+          prop: 'id',
           show: true,
-          width: 130,
+          width: 110,
-          fixed: 'left'
+          sortable: 'custom'
+        }, {
+          label: this.$t('overall.name'),
+          prop: 'name',
+          show: true,
+          sortable: 'custom'
         },
         {
-          label: this.$t('asset.device'),
+          label: this.$t('asset.manageIp'),
-          prop: 'SN',
+          prop: 'manageIp',
           show: true,
-          width: 130
+          width: 140,
+          sortable: 'custom'
         },
         {
-          label: this.$t('asset.assetType'),
+          label: this.$t('asset.pingInfo'),
-          prop: 'assetType',
+          prop: 'pingInfo',
-          show: true
+          show: true,
+          width: 110
+        },{
+          label: this.$t('asset.alertNum'),
+          prop: 'alertNum',
+          show: true,
+          width: 140,
+          sortable: 'custom'
         }, {
-          label: this.$t('asset.assetState'),
+          label: this.$t('asset.endpointNum2'),
-          prop: 'state',
+          prop: 'endpointNum',
-          show: true
+          show: true,
-        }, {
+          width: 160,
-          label: this.$t('asset.assetPing'),
+          sortable: 'custom'
-          prop: 'pingStatus',
-          show: true
         }, {
           label: this.$t('asset.alerts'),
           prop: 'Alert',
@@ -182,36 +128,30 @@ export default {
           width: 100
         }],
       searchMsg: { // 给搜索框子组件传递的信息
-        zheze_none: true,
         searchLabelList: [{
-          id: 1,
           name: 'ID',
           type: 'input',
-          label: 'id',
+          label: 'ids',
+          disabled: false
+        }, {
+          name: 'Name',
+          type: 'input',
+          label: 'name',
           disabled: false
         }, {
-          id: 20,
           name: 'SN',
           type: 'input',
           label: 'sn',
           disabled: false
         }, {
-          id: 21,
+          name: 'IP',
-          name: 'Host',
           type: 'input',
-          label: 'host',
+          label: 'manageIp',
           disabled: false
         }, {
-          id: 22,
           name: this.$t('asset.state'),
-          type: 'select',
+          type: 'assetState',
-          label: 'assetState',
+          label: 'stateIds',
-          disabled: false
-        }, {
-          id: 23,
-          name: 'pingStatus',
-          type: 'select',
-          label: 'pingStatus',
           disabled: false
         }]
       },
@@ -233,16 +173,16 @@ export default {
   },
   mounted () {
     this.getTableTitle()
-    this.getAssetList()
+    this.getTableData()
   },
   methods: {
-    getAssetList: function () {
+    getTableData: function () {
-      this.loading = true
+      this.tools.loading = true
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
-      this.$set(this.searchLabel, 'moduleId', this.moduleId)
+      this.$set(this.searchLabel, 'moduleIds', this.moduleId)
-      this.$get('asset', { ...this.searchLabel }).then(response => {
+      this.$get(this.url, { ...this.searchLabel }).then(response => {
-        this.loading = false
+        this.tools.loading = false
         if (response.code == 200) {
           this.tableData = response.data.list
           this.deleteBox.ids = ''
@@ -252,12 +192,12 @@ export default {
     },
     pageNo (val) {
       this.pageObj.pageNo = val
-      this.getAssetList()
+      this.getTableData()
     },
     pageSize (val) {
       this.pageObj.pageSize = val
       localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
-      this.getAssetList()
+      this.getTableData()
     },
     selectChange (s) {
       const ids = []
@@ -277,7 +217,7 @@ export default {
       }
       this.pageObj.orderBy = orderBy
       this.$set(this.searchLabel, 'orderBy', orderBy)
-      this.getAssetList()
+      this.getTableData()
     },
     /* 关闭弹框 */
     esc (refresh) {
@@ -334,7 +274,7 @@ export default {
       if (this.$refs.assetTable && this.$refs.assetTable.bodyWrapper) {
         this.$refs.assetTable.bodyWrapper.scrollTop = 0
       }
-      this.getAssetList()
+      this.getTableData()
     }
   },
   beforeDestroy () {
@@ -350,6 +290,9 @@ export default {
   }
   .right-box-title{
     font-weight: bold;
+    padding-left: 20px;
+    position: absolute;
+    z-index: 1;
   }
   .mc{
     position: fixed;
@@ -368,5 +311,8 @@ export default {
   /deep/ .top-tools>div{
     margin-top: 6px;
   }
+  .right-box  /deep/ .list-page .main-container{
+    background: #fff;
+  }
   /* end--table*/
 </style>

nezha-fronted/src/components/common/project/popData/endpointTable.vue

@@ -1,107 +1,56 @@
 <template>
   <div class="mc" @click.self="clickOutside">
     <div class="right-box right-box-project-alert">
-      <!-- begin--顶部按钮-->
+      <div class="right-box-title">{{$t('project.endpoint.endpoint')}}</div>
-      <div class="right-box-top-btns">
+      <nz-data-list
-        <!--<button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">-->
+        ref="dataList"
-        <!--<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>-->
+        :api="url"
-        <!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
+        :custom-table-title.sync="tableTitle"
-        <!--</button>-->
+        :from="fromRoute.endpoint"
-      </div>
+        :layout="['searchInput']"
-      <!-- end--顶部按钮-->
+        :search-msg="searchMsg"
-
+        @search="search"
-      <!-- begin--标题-->
+      >
-      <div class="right-box-title">Endpoint</div>
+        <template  v-slot:default="slotProps">
-      <!-- end--标题-->
+          <endpoint-table
-
+            ref="dataTable"
-      <!-- begin搜素框-->
+            v-loading="tools.loading"
-      <div class="top-tools">
+            :api="url"
-        <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': false}">
+            :custom-table-title="tableTitle"
-          <div class="top-tool-search">
+            :height="mainTableHeight"
-            <search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
+            :table-data="tableData"
+            :tableId="tableId"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+           ></endpoint-table>
+        </template>
+        <template v-slot:pagination>
+          <div class="endpoint-page">
+            <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
           </div>
-        </div>
+        </template>
-        <div class="pagination-top pagination-top-hide display-none"></div>
+      </nz-data-list>
-      </div>
-      <!-- end搜素框-->
-
-      <!-- begin--表格-->
-      <div class="right-box-form-box">
-        <el-table
-          :data="tableData"
-          border
-          class="nz-table endpoint-table"
-          :height="mainTableHeight"
-          ref="endpointTable"
-          v-loading="loading"
-          style="width: 100%;"
-          @sort-change="tableDataSort"
-        >
-          <el-table-column
-            :resizable="false"
-            v-for="(item, index) in tableTitle"
-            v-if="item.show"
-            :width="item.width"
-            :key="`col-${index}`"
-            :label="item.label"
-            min-width="110px"
-            :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]">{{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>
-              <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" :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':''">
-                <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>
-      </div>
-      <!-- end--表格-->
-
-      <!--底部分頁-->
-      <div class="pagination-bottom">
-        <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
+import nzDataList from '@/components/common/table/nzDataList'
+import endpointTable from '@/components/common/table/settings/endpointTable'
+import dataListMixin from '@/components/common/mixin/dataList'
 export default {
-  name: 'endpointTable',
+  name: 'endpointTableProject',
   props: {
     moduleId: {},
     projectId: {}
   },
   watch: {
   },
+  components: {
+    nzDataList,
+    endpointTable
+  },
+  mixins: [dataListMixin],
   computed: {
     tagType () {
       return (key) => {
@@ -129,6 +78,8 @@ export default {
   },
   data () {
     return {
+      url: 'monitor/endpoint',
+      tableId:'endpointTableProject',
       pageObj: {
         pageNo: 1,
         pageSize: this.$CONSTANTS.defaultPageSize,
@@ -158,27 +109,29 @@ export default {
           prop: 'state',
           show: true
         }
-        // {
-        //   label: this.$t("project.endpoint.lastUpdate"),
-        //   prop: 'lastUpdate',
-        //   show: true,
-        // },
       ],
       searchMsg: { // 给搜索框子组件传递的信息
         zheze_none: true,
-        searchLabelList: [{
+        searchLabelList: [
-          id: 1,
+          {
-          name: 'ID',
+            id: 13,
-          type: 'input',
+            name: 'ID',
-          label: 'id',
+            type: 'input',
-          disabled: false
+            label: 'ids',
-        }, {
+            disabled: false
-          id: 11,
+          }, {
-          name: this.$t('asset.asset'),
+            name: 'Name',
-          type: 'asset',
+            type: 'input',
-          label: 'asset',
+            label: 'name',
-          disabled: false
+            disabled: false
-        }]
+          },
+          {
+            name: this.$t('asset.asset'),
+            type: 'input',
+            label: 'assetName',
+            disabled: false
+          }
+        ]
       },
       tableData: [],
       loading: false,
@@ -197,16 +150,16 @@ export default {
     }
   },
   mounted () {
-    this.getEndpointList()
+    this.getTableData()
   },
   methods: {
-    getEndpointList: function () {
+    getTableData: function () {
-      this.loading = true
+      this.tools.loading = true
       this.$set(this.searchLabel, 'pageNo', this.pageObj.pageNo)
       this.$set(this.searchLabel, 'pageSize', this.pageObj.pageSize)
-      this.$set(this.searchLabel, 'moduleId', this.moduleId)
+      this.$set(this.searchLabel, 'moduleIds', this.moduleId)
-      this.$get('endpoint', this.searchLabel).then(response => {
+      this.$get(this.url, this.searchLabel).then(response => {
-        this.loading = false
+        this.tools.loading = false
         if (response.code === 200) {
           // for (let i = 0; i < response.data.list.length; i++) {
           //   try {
@@ -226,12 +179,12 @@ export default {
     },
     pageNo (val) {
       this.pageObj.pageNo = val
-      this.getEndpointList()
+      this.getTableData()
     },
     pageSize (val) {
       this.pageObj.pageSize = val
       localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val)
-      this.getEndpointList()
+      this.getTableData()
     },
     selectChange (s) {
       const ids = []
@@ -251,7 +204,7 @@ export default {
       }
       this.pageObj.orderBy = orderBy
       this.$set(this.searchLabel, 'orderBy', orderBy)
-      this.getEndpointList()
+      this.getTableData()
     },
     /* 关闭弹框 */
     esc (refresh) {
@@ -320,7 +273,7 @@ export default {
       if (this.$refs.endpointTable) {
         this.$refs.endpointTable.bodyWrapper.scrollTop = 0
       }
-      this.getEndpointList()
+      this.getTableData()
     }
   },
   beforeDestroy () {
@@ -336,6 +289,9 @@ export default {
   }
   .right-box-title{
     font-weight: bold;
+    padding-left: 20px;
+    position: absolute;
+    z-index: 1;
   }
   .mc{
     position: fixed;
@@ -354,5 +310,8 @@ export default {
   /deep/ .top-tools>div{
     margin-top: 6px;
   }
+  .right-box  /deep/ .list-page .main-container{
+    background: #fff;
+  }
   /* end--table*/
 </style>

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -588,7 +588,7 @@ export default {
     },
     topoScreen (n) {
       getTopology(this.topologyIndex).resize()
-      getTopology(this.topologyIndex).centerView(20)
+      getTopology(this.topologyIndex).centerView()
       // getTopology(this.topologyIndex).fitView(30)
     }
   },
@@ -680,7 +680,7 @@ export default {
                 flag = true
               }
             })
-            getTopology(this.topologyIndex).centerView(20)
+            getTopology(this.topologyIndex).centerView()
             this.penToolTipScale = getTopology(this.topologyIndex).data.scale
             setTimeout(() => {
               getTopology(this.topologyIndex).data.pens.forEach(item => {
@@ -1933,7 +1933,7 @@ export default {
             flag = true
           }
         })
-        getTopology(this.topologyIndex).centerView(20)
+        getTopology(this.topologyIndex).centerView()
         this.getNodesArr()
       }, 100)
     },
@@ -2347,6 +2347,7 @@ export default {
       position: absolute;
       right: 0;
       top: 50px;
+      z-index: 1;
     }
 
     .facade-top{
@@ -2671,7 +2672,9 @@ export default {
   .from-project{
     padding-left: 0;
     .nz-table2{
-      padding: 0 20px 10px 5px;
+      padding: 0 5px 10px 5px;
+      box-sizing: content-box;
+      overflow: hidden;
     }
   }
 </style>