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')"-->
-                  <!--class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">-->
-            <!--<i class="nz-icon nz-icon-download1"></i>-->
-          <!--</button>-->
-        </div>
-        <div class="pagination-top pagination-top-hide display-none"></div>
-      </div>
-      <!-- end搜素框-->
-
-      <!-- begin--表格-->
-      <div class="right-box-form-box">
-        <el-table
-          class="nz-table tabelH100"
-          :data="tableData"
-          border
-          ref="alertListTable"
-          tooltip-effect="light"
-          :height="tableHeight"
-          v-loading="loading"
-          :cell-class-name="labelsClassName"
-          @selection-change="selectChange"
-          style="width: 100%;height: 100%"
-          @sort-change="tableDataSort"
-          :id="projectId"
       >
-          <!--<el-table-column-->
+        <template v-slot:top-tool-right>
-            <!--:resizable="false"-->
+          <el-select v-model="state" class="margin-r-10" size="small" value-key="value" @change="getTableData">
-            <!--type="selection"-->
+            <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            <!--width="38"-->
+          </el-select>
-            <!--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-slot:default="slotProps">
-                <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+          <alert-message-table
-                <template v-else>-</template>
+            ref="dataTable"
+            :api="url"
+            :custom-table-title="tableTitle"
+            :height="mainTableHeight"
+            :now-time="nowTime"
+            :table-data="tableData"
+            @del="del"
+            @edit="edit"
+            @orderBy="tableDataSort"
+            @reload="getTableData"
+            @selectionChange="selectionChange"></alert-message-table>
         </template>
-              <template v-else-if="item.prop == 'description'">
+        <!-- 分页组件 -->
-                <template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+        <template v-slot:pagination>
-                <span v-else>-</span>
+          <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
         </template>
-              <span v-else-if="item.prop == 'severity'" class="severity">
+      </nz-data-list>
-                <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: 'id',
+            label: 'id',
+            disabled: false
+          },
+          {
+            name: this.$t('alert.alertRule'),
             type: 'input',
-          label: 'alertName',
+            label: 'ruleName',
-          disabled: false
-        }, /* {
-            id: 3,
-            name: this.$t('alert.list.type'),
-            type: 'select',
-            label: 'alertType',
-            disabled: false
-          }, */{
-          id: 20,
-          name: this.$t('alert.severity'),
-          type: 'selectString',
-          label: 'severity',
             disabled: false
           }, {
-          id: 21,
             name: this.$t('asset.asset'),
-          type: 'asset',
-          label: 'asset',
-          disabled: false
-        }, {
-          id: 22,
-          name: this.$t('project.project.projectName'),
-          type: 'project',
-          label: 'project',
-          disabled: false
-        }, {
-          id: 23,
-          name: this.$t('project.module.module'),
-          type: 'module',
-          label: 'module',
-          disabled: false
-        }, {
-          id: 24,
-          name: this.$t('project.endpoint.endpoint'),
             type: 'input',
-          label: 'endpointId',
+            label: 'assetName',
             disabled: false
           }, {
-          id: 25,
+            name: 'Endpoint',
-          name: this.$t('alert.list.state'),
+            type: 'input',
-          type: 'select',
+            label: 'endpointName',
-          label: 'alertMessageState',
             disabled: false
-        }]
+          }, {
+            name: this.$t('alert.summary'),
+            type: 'input',
+            label: 'summary',
+            disabled: false
+          }, {
+            name: 'Labels',
+            type: 'input',
+            label: 'labels',
+            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">
-            <search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
-          </div>
-          <!--<button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"-->
-          <!--class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">-->
-          <!--<i class="nz-icon nz-icon-download1"></i>-->
-          <!--</button>-->
-        </div>
-        <div class="pagination-top pagination-top-hide display-none"></div>
-      </div>
-      <!-- end搜素框-->
-
-      <!-- begin--表格-->
-      <div class="right-box-form-box">
-        <el-table
-          class="nz-table"
             :height="mainTableHeight"
-          style="width: 100%;"
+            :table-data="tableData"
-          :data="tableData"
+            @orderBy="tableDataSort"
-          border
+            @reload="getTableData"></asset-table>
-          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 v-slot:pagination>
+          <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
         </template>
-          </el-table-column>
+      </nz-data-list>
-        </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.assetState'),
+          label: this.$t('asset.alertNum'),
-          prop: 'state',
+          prop: 'alertNum',
-          show: true
+          show: true,
+          width: 140,
+          sortable: 'custom'
         }, {
-          label: this.$t('asset.assetPing'),
+          label: this.$t('asset.endpointNum2'),
-          prop: 'pingStatus',
+          prop: 'endpointNum',
-          show: true
+          show: true,
+          width: 160,
+          sortable: 'custom'
         }, {
           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">
-            <search-input :inTransform="true" :searchMsg="searchMsg" @search="search"></search-input>
-          </div>
-        </div>
-        <div class="pagination-top pagination-top-hide display-none"></div>
-      </div>
-      <!-- end搜素框-->
-
-      <!-- begin--表格-->
-      <div class="right-box-form-box">
-        <el-table
-          :data="tableData"
-          border
-          class="nz-table endpoint-table"
             :height="mainTableHeight"
-          ref="endpointTable"
+            :table-data="tableData"
-          v-loading="loading"
+            :tableId="tableId"
-          style="width: 100%;"
+            @orderBy="tableDataSort"
-          @sort-change="tableDataSort"
+            @reload="getTableData"
-        >
+           ></endpoint-table>
-          <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>
+        <template v-slot:pagination>
-            </span>
+          <div class="endpoint-page">
-              <template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
+            <Pagination ref="Pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
-              <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>
+      </nz-data-list>
-        </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,
+          {
+            id: 13,
             name: 'ID',
             type: 'input',
-          label: 'id',
+            label: 'ids',
             disabled: false
           }, {
-          id: 11,
+            name: 'Name',
-          name: this.$t('asset.asset'),
+            type: 'input',
-          type: 'asset',
+            label: 'name',
-          label: 'asset',
             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>

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

@@ -4,9 +4,9 @@
 </style>
 <template>
   <div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
-    <!--project主要信息-->
+    <div class="main-list">
-    <div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
+      <div class="main-container" :class="fromOverView?'from-overview':'from-project'">
-      <div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px;width: calc(100% - 20px);position: absolute;top: 9px;padding-right: 20px">
+        <div v-if="editTopologyFlag" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);">
           <!--工具栏-->
           <span class="project-topology-tool">
           <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
@@ -40,7 +40,7 @@
                 <div class="upload-pic-box" @click="uploadPicChange" v-has="'topo_icon_save'">
                   <i class="el-icon-plus"></i>
                   <span>
-                     Upload custom picture
+                     {{ $t('overall.uploadCustomPicture') }}
                   </span>
                 </div>
               </div>
@@ -110,58 +110,62 @@
            </button>
          </span>
         </div>
-      <div style="width: 100%;display: flex;justify-content: space-between;padding-left: 10px;padding-top: 10px" v-if="!editTopologyFlag&&!fromOverView" class="top-tool-main-right top-tools">
+        <div v-if="!editTopologyFlag&&!fromOverView" class="top-tools" style="padding-left: 10px">
           <div>{{topologyInfo.name}}</div>
-        <span class="edit-topologyLine" style="padding-top: 5px" v-show="!editTopologyFlag&&!fromPrev&&!fromOverView">
+          <div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
-<button class="top-tool-btn" @click="changeScreen"
-        style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button"
->
-                  <i class="nz-icon" :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'"></i>
-        </button>
-        <button class="top-tool-btn" @click="editTopology"
-                style="border-right: 1px solid rgba(162,162,162,0.50);margin-right: 12px;" type="button" v-has="'project_topo_update'"
-        >
-                  <i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
-        </button>
             <pick-time
               v-show="!editTopologyFlag"
-            class="float-right pickTime top-tool-btn-group"
+              ref="pickTime"
-            :refresh-data-func="dateChange"
               v-model="searchTime"
-            :use-chart-unit="false"
+              :refresh-data-func="dateChange"
               :showTimePicker="false"
-            ref="pickTime">
+              :use-chart-unit="false"
+              class="pickTime margin-r-10">
             </pick-time>
-
+            <button v-has="'project_topo_update'" class="top-tool-btn margin-r-10" type="button" @click="editTopology">
-      </span>
+              <i :title="$t('project.topology.edit')" class="nz-icon nz-icon-edit"></i>
+            </button>
+            <button class="top-tool-btn" type="button" @click="changeScreen">
+              <i :class="topoScreen?'nz-icon-exit-full-screen':'nz-icon-full-screen'" class="nz-icon"></i>
+            </button>
           </div>
         </div>
-    <div :class="['page',fromOverView?'overview-page':'']" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
+        <div class="nz-table2">
+          <!--悬浮network部分-->
+          <div class="network-info">
+            <div v-if="popDataShow.main">
+              <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
+            </div>
+            <div v-if="popDataShow.info">
+              <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
+            </div>
+          </div>
+          <div :class="['page',fromOverView?'overview-page':'']" :style="`border: 1px solid ${theme.rightBoxBorderColor};`">
             <!--画布部分-->
-      <div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
+            <div :id="'topology-canvas' + topologyIndexF" :ref="'topology-canvas'+ topologyIndexF" class="full"></div>
             <!--设置属性-->
-      <div class="props" v-if="editTopologyFlag&&toolShow.attr">
+            <div v-if="editTopologyFlag&&toolShow.attr" class="props">
-        <CanvasProps :selection.sync="props"
+              <CanvasProps ref="CanvasProps"
-                     @change="onUpdateProps"
-                     @animate="animateCanvas"
-                     @changeProjectTitle="changeProjectTitle"
-                     @notModuleIDArrChange="notModuleIDArrChange"
                            :index="topologyIndex"
-                     @del="delPen"
                            :modules="modules"
-                     ref="CanvasProps">
+                           :selection.sync="props"
+                           @animate="animateCanvas"
+                           @change="onUpdateProps"
+                           @changeProjectTitle="changeProjectTitle"
+                           @del="delPen"
+                           @notModuleIDArrChange="notModuleIDArrChange">
               </CanvasProps>
             </div>
             <!--所有节点上的小图标-->
-      <div v-for="(item,index) in nodesArr" :key="index"
+            <div v-for="(item,index) in nodesArr" v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
+                 :key="index"
                  :style="{position: 'absolute',top:item.rect.y - (48*(fromOverView?penToolTipScale:1))+'px',left:item.rect.center.x - (24*(fromOverView?penToolTipScale:1)) +'px',transform:'scale('+(fromOverView?penToolTipScale:1)+')'}"
-           v-if="!editTopologyFlag&&item.data.iconToolState&&!fromPrev"
                  class="network-pop"
             >
 
               <i
-          :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
                 :ref="'modelTopId'+index"
+                :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
                 @click="showNodeTools(index,item)"
               >
                 <i class="nz-icon nz-icon-model"></i>
@@ -183,6 +187,7 @@
             </div>
             <!--提示未添加module id的块-->
             <div v-for="(item, index) in notModuleIDArr"
+                 v-if="editTopologyFlag&&!fromPrev"
                  :key="index"
                  :style="{
              position: 'absolute',
@@ -190,23 +195,35 @@
              left:item.rect.x - 10+'px',
              transform:'scale('+(fromOverView?penToolTipScale:1)+')',
            }"
-           v-if="editTopologyFlag&&!fromPrev"
             >
-        <div class="module-rect-top" :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}"></div>
+              <div :style="{top:0,left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-top"></div>
-        <div class="module-rect-right" :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}"></div>
+              <div :style="{top:0,left:item.rect.width+15+'px',width:0,height:item.rect.height+15+'px'}" class="module-rect-right"></div>
-        <div class="module-rect-bottom" :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}"></div>
+              <div :style="{top:item.rect.height+15 +'px',left:0,width:item.rect.width+15+'px',height:0}" class="module-rect-bottom"></div>
-        <div class="module-rect-left" :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}"></div>
+              <div :style="{top:0,left:0,width:0,height:item.rect.height+15+'px'}" class="module-rect-left"></div>
             </div>
             <!--节点连线相关的 tooltip-->
-      <div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
+            <div v-if="tooltipPosition.show&&!editTopologyFlag"
-           v-if="tooltipPosition.show&&!editTopologyFlag"
-           @mouseover="tooltipOver"
-           @mouseout="tooltipOut"
                  ref="topoTooltip"
+                 :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
+                 @mouseout="tooltipOut"
+                 @mouseover="tooltipOver"
             >
               <topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
             </div>
           </div>
+          <!--endpoint-->
+          <transition name="right-box">
+            <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
+                           @close="popDataShowUpdate('',true)">endpoint
+            </endpointTable>
+          </transition>
+          <div v-if="!fromOverView&&!editTopologyFlag&&!fromPrev" class="right-bottom-zoom">
+            <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
+            <div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
+          </div>
+        </div>
+      </div>
+    </div>
     <!--<div class="left-bottom" v-if="editTopologyFlag">-->
     <!--<div class="title">小提示</div>-->
     <!--<ul class="group">-->
@@ -216,21 +233,6 @@
     <!--<li>3.选中元素 按下Delete键或者Backspace可以删除元素</li>-->
     <!--</ul>-->
     <!--</div>-->
-    <!--悬浮network部分-->
-    <div class="network-info">
-      <div v-if="popDataShow.main">
-        <popDataMain :moduleId="moduleId" :projectId="projectInfo.id"></popDataMain>
-      </div>
-      <div v-if="popDataShow.info">
-        <popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
-      </div>
-    </div>
-    <!--endpoint-->
-    <transition name="right-box">
-      <endpointTable v-if="popDataShow.endpoint" :moduleId="moduleId" :projectId="projectInfo.id"
-                     @close="popDataShowUpdate('',true)">endpoint
-      </endpointTable>
-    </transition>
     <!--asset-->
     <transition name="right-box">
       <assetTable v-if="popDataShow.asset" :moduleId="moduleId" :projectId="projectInfo.id"
@@ -262,19 +264,19 @@
     </el-dialog>
     <!--Custom picture-->
     <el-dialog
-      title="Custom picture"
+      :title="title"
       :visible.sync="uploadPicShow"
       width="auto"
       @close="uploadPicShow = false"
       destroy-on-close>
       <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label">Name</el-col>
+        <el-col :span="4" class="upload-pic-label">{{ $t('overall.name') }}</el-col>
         <el-col :span="20">
           <el-input v-model="uploadPic.name" size="small"  :placeholder="$t('project.topology.placeholderImg')"></el-input>
         </el-col>
       </el-row>
       <el-row class="upload-pic-row">
-        <el-col :span="4" class="upload-pic-label">Folder</el-col>
+        <el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
         <el-col :span="20">
           <el-autocomplete
             class="inline-input"
@@ -322,10 +324,6 @@
       </div>
 
     </el-dialog>
-    <div class="right-bottom-zoom" v-if="!fromOverView&&!editTopologyFlag&&!fromPrev">
-      <div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
-      <div class="zoom-option" @click="zoomMap(-0.25)"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
-    </div>
   </div>
 </template>
 
@@ -371,6 +369,7 @@ export default {
     name: 'topologyL5',
     data () {
       return {
+        title: this.$t("overall.customPicture"),
         objChange: false, // project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
         chartDataInfo: {},
         topoPrevData: {}, // 预览数据
@@ -589,7 +588,8 @@ export default {
       },
       topoScreen (n) {
         getTopology(this.topologyIndex).resize()
-      getTopology(this.topologyIndex).centerView(20)
+        getTopology(this.topologyIndex).centerView()
+        // getTopology(this.topologyIndex).fitView(30)
       }
     },
     computed: {
@@ -674,11 +674,13 @@ export default {
                   return
                 }
                 if (item.rect.ex > position.x || item.rect.ey > position.y) {
+                  if (this.fromOverView) {
                     getTopology(this.topologyIndex).fitView(20)
+                  }
                   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 => {
@@ -760,6 +762,7 @@ export default {
           }
           this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
             let data = res.data.topo
+            // data = JSON.parse(localStorage.getItem('topoData'))
             if (!res.data.topo || !data.pens) {
               data = {
                 bkColor: '#FFFFFF',
@@ -803,6 +806,7 @@ export default {
                 }
                 data.pens.forEach(item => {
                   if (item.type === 0 && item.data.imageId) {
+                    console.log(item,item.data.imageId,this.iconArray.find(item1 => item1.id == 44))
                     item.image = this.iconArray.find(item1 => item1.id == item.data.imageId).image
                   }
                   if (item.type === 0) {
@@ -1792,6 +1796,7 @@ export default {
       // 保存
       saveTopology () {
         const topologyData = getTopology(this.topologyIndex).pureData()
+        console.log(JSON.stringify(topologyData))
         let flag = true
         const arr = []
         this.notModuleIDArr = []
@@ -1924,11 +1929,11 @@ export default {
               return
             }
             if (item.rect.ex > position.x || item.rect.ey > position.y) {
-            getTopology(this.topologyIndex).fitView(20)
+              // getTopology(this.topologyIndex).fitView(20)
               flag = true
             }
           })
-        getTopology(this.topologyIndex).centerView(20)
+          getTopology(this.topologyIndex).centerView()
           this.getNodesArr()
         }, 100)
       },
@@ -2470,8 +2475,6 @@ export default {
 
   .project-box {
     width: 100%;
-    height: calc(100% - 20px);
-    margin-top: 10px;
     position: relative;
     border-radius: 2px;
     overflow: hidden;
@@ -2499,14 +2502,18 @@ export default {
 
   .page {
     display: flex;
+    height: calc(100% - 1px);
+    width: 100%;
+    /*
         height: calc(100% - 65px);
         width: calc(100% - 10px);
         margin: 5px;
+    */
     position: relative;
 
     .tools {
       width: 300px;
-      height: 100%;
+      height: calc(100% - 1px);
       border: none;
       position: absolute;
       z-index: 1 !important;
@@ -2631,4 +2638,42 @@ export default {
   .top-tool-btn:focus .nz-icon{
     color: #FBCEA4;
   }
+  .right-bottom-zoom{
+    position: absolute;
+    bottom: 30px;
+    right: 40px;
+    height: 90px;
+    width: 35px;
+    border: 1px solid #E7EAED;
+    box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
+    .zoom-option{
+      width: 100%;
+      height: 50%;
+      opacity: 0.42;
+      background: #FFF;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+    .zoom-option:hover{
+      cursor: pointer;
+    }
+  }
+  .from-overview{
+    padding:0 !important;
+    width: calc(100% - 2px);
+    height: calc(100% - 2px) !important;
+    .nz-table2{
+      padding: 0 !important;
+      height: 100%;
+    }
+  }
+  .from-project{
+    padding-left: 0;
+    .nz-table2{
+      padding: 0 5px 10px 5px;
+      box-sizing: content-box;
+      overflow: hidden;
+    }
+  }
 </style>