NEZ-784 NEZ-770 ：endpoint 名字拼接后过长从中间截取一部分 ，以及新增 Diagram 图表类型

nezha-fronted/src/components/charts/diagram-chart.vue

@@ -41,7 +41,7 @@
         </div>
         <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
           <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="text-content"  >
-            <diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" ref="diagram"/>
+            <diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram"/>
           </div>
         </div>
         <!--全屏-->
@@ -53,7 +53,7 @@
           </div>
           <div class="rich-text-screen-container"  >
             <div id="chartScreenContainer"  ref="chartScreenContainer" class="text-content" >
-              <diagram :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id + '-' + 'chartIndex'"/>
+              <diagram :topoData="data.param.topo" :fromChart="true" :isScreen="true" :topologyIndexF="chartData.id + '-' + 'chartIndex'"/>
             </div>
           </div>
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -7,7 +7,7 @@
     <div class="resize-box resize-box-echarts" ref="resizeBox">
       <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
         <loading :ref="'localLoading'+chartIndex"></loading>
-        <div  v-if="from!=='project'" :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.alertRule}" :id="'chartTitle'+chartIndex" class="clearfix chartTitle">
+        <div  v-if="from!=='project'&&from!=='topology'" :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.alertRule}" :id="'chartTitle'+chartIndex" class="clearfix chartTitle">
           <el-popover
             v-if="isError"
             placement="top-start"
@@ -65,6 +65,9 @@
             </ul>
           </el-dropdown>
         </div>
+        <div  v-if="from==='topology'" :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.alertRule}" :id="'chartTitle'+chartIndex" class="topology-chart-title">
+          <span class="topology-chart-title-text">{{chartData.name}}</span>
+        </div>
         <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
         <div class="chart-no-data" v-show="noData">No Data</div>
         <template v-if="!hasLegendOptions">
@@ -1344,6 +1347,7 @@ export default {
     },
     // 设置数据, filter区分
     setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
+      console.log(chartItem, seriesItem, panelId, filter, legend, area, errorMsg)
       legend && this.setColor(legend.length)
       legend && legend.forEach((t, i) => { t.color = this.bgColorList[i] })
       this.filter.from = filter.from

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -6,7 +6,7 @@
   <div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
     <div class="main-list">
       <div class="main-container" :class="fromOverView?'from-overview':'from-project'" style="background: #fff">
-        <div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);">
+        <div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);display: inline-block">
           <!--工具栏-->
           <span v-if="!isPreview" class="project-topology-tool">
           <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
@@ -202,11 +202,11 @@
             <!--节点连线相关的 tooltip-->
             <div v-if="tooltipPosition.show&&!editTopologyFlag"
                  ref="topoTooltip"
-                 :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px','z-index':10,height:tooltipPosition.height+'px'}"
+                 :style="{position:isScreen?'fixed' : '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"/>
+              <topoTooltip :chartDataParent="chartData" :filterTime="filterTime" :isPanel="isPanel"/>
             </div>
           </div>
           <!--endpoint-->
@@ -517,6 +517,14 @@ export default {
     fromTopologyDialog: {
       type: Boolean,
       default: false
+    },
+    isPanel: {
+      type: Boolean,
+      default: false
+    },
+    isScreen: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -1138,6 +1146,7 @@ export default {
           setTimeout(() => {
             this.tooltipPosition.show = true
             const ePosition = window.ePosition
+            console.log(ePosition)
             const boxWidth = document.getElementsByClassName('page')[0].offsetWidth
             const boxHeight = document.getElementsByClassName('page')[0].offsetHeight
             this.tooltipPosition.left = ePosition.layerX + 20
@@ -1155,6 +1164,10 @@ export default {
                   this.tooltipPosition.top = ePosition.layerY - this.$refs.topoTooltip.offsetHeight
                 }
               }
+              if (this.isScreen) {
+                this.tooltipPosition.left = ePosition.offsetX + 50
+                this.tooltipPosition.top = ePosition.offsetY + 80
+              }
             })
           }, 100)
           break
@@ -1753,6 +1766,14 @@ export default {
             return true
           }
         })
+        item.data.expressAllArr = item.data.expressAllArr.filter((expression, i) => {
+          if (!expression) {
+            item.data.legendsAll.splice(i, 1)
+            return false
+          } else {
+            return true
+          }
+        })
       })
       if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
         getTopology(this.topologyIndex).data.scale = this.oldScale

nezha-fronted/src/components/common/alert/alertLabel.vue

@@ -104,21 +104,17 @@
         <div class="alert-label-value">{{alertLabelData && alertLabelData.module && alertLabelData.module.name ? alertLabelData.module.name : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Labels</div>
+        <div class="alert-label-title">Configs</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.labels ? alertLabelData.labels : '--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.configs ? alertLabelData.configs : '--'}}</div>
       </div>
       <div class="alert-label-box">
-        <div class="alert-label-title">Host</div>
+        <div class="alert-label-title">ManageIp</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.host ? alertLabelData.host : '--'}}</div>
+        <div class="alert-label-value">{{alertLabelData && alertLabelData.asset ? alertLabelData.asset.manageIp : '--'}}</div>
       </div>
       <div class="alert-label-box">
         <div class="alert-label-title">Port</div>
         <div class="alert-label-value">{{alertLabelData && alertLabelData.port ? alertLabelData.port : '--'}}</div>
       </div>
-      <div class="alert-label-box">
-        <div class="alert-label-title">Path</div>
-        <div class="alert-label-value">{{alertLabelData && alertLabelData.path ? alertLabelData.path : '--'}}</div>
-      </div>
     </div>
   </div>
 </template>

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -1014,10 +1014,10 @@ export default {
         //   id: 'bar',
         //   name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
         // },
-        {
+        // {
-          id: 'table',
+        //   id: 'table',
-          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        //   name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
-        }
+        // }
       ],
       aggregationList: [
         {

nezha-fronted/src/components/common/project/L5/topoTooltip.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="tooltip-box" style="display: flex;" v-if="(isChart||chartData.tooltipShow)&&chartData.expressArr.length">
+  <div class="tooltip-box" style="display: flex;" v-if="(isChart||chartData.tooltipShow)&&chartData.expressAllArr.length">
-    <div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow&&chartData.expressArr.length)">
+    <div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow&&chartData.expressAllArr.length)">
         <line-chart-block v-show="isChart || chartData.type !== 'table'"
                           :key="'inner' + chartData.id"
+                          :class="isPanel? 'topology-tool-tip' : ''"
                           id="listContainer"
-                          :from="'project'"
+                          :from="'topology'"
                           :ref="chartData.type !== 'table'?'editChart' + chartData.type:'editChart'"
                           :temp-dom="tempDom"
                           :panel-id="-1"
@@ -34,6 +35,10 @@ import lineChartBlock from '../../../charts/line-chart-block'
 import chartTable from '../../../charts/chart-table'
 import bus from '../../../../libs/bus'
 import ExpressionInfo from '../popData/expressionInfo'
+import {fromRoute} from "@/components/common/js/constants";
+import chartTempData from "@/components/charts/chartTempData";
+import axios from "axios";
+import chartDataFormat from "@/components/charts/chartDataFormat";
 export default {
   name: 'topoTooltip',
   components: {
@@ -49,6 +54,10 @@ export default {
     isChart: {
       type: Boolean,
       default: false
+    },
+    isPanel: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -70,7 +79,7 @@ export default {
         panelId: 0,
         searchName: '',
         start_time: bus.timeFormate(bus.getOffsetTimezoneData(-1), 'yyyy-MM-dd hh:mm:ss')
-      }
+      },
     }
   },
   mounted () {
@@ -81,13 +90,12 @@ export default {
       this.tempDom.width = 250
     },
     process (item) {
-      console.log(item)
       const chartData = { ...this.chartDataTemp, ...item, name: item.chartTitle }
       chartData.elements = []
-      chartData.expressArr.forEach((item1, index) => {
+      chartData.expressAllArr.forEach((item1, index) => {
         chartData.elements.push({
           expression: item1,
-          legend: chartData.legends[index],
+          legend: chartData.legendsAll[index],
           type: 'expert',
           id: index,
           buildIn: null,
@@ -106,9 +114,7 @@ export default {
       }
       chartData.span = 12
       this.chartData = chartData
-      setTimeout(() => {
       this.getChartData(chartData, 0)
-      })
     },
     // 获取一个图表具体数据,图表信息，图表位置index
     getChartData (chartInfo, pos, filterType) {
@@ -122,33 +128,30 @@ export default {
           }
         })
       } else {
-        /* let startTime = ''
+        const endTime = this.filter.end_time
-        let endTime = '' */
+        const startTime = this.filter.start_time
-        /* if (filterType === 'refresh') { // 刷新
+        const step = bus.getStep(startTime, endTime)
-          const now = new Date(bus.computeTimezone(new Date().getTime()))
-          const origin = new Date(this.filter.end_time)
-          const numInterval = now.getTime() - origin.getTime()
-          if (numInterval >= 60000) { // 大于1分钟，则start、end均往后移numInterval，否则时间不变
-            startTime = this.getNewTime(this.filter.start_time, numInterval)
-            endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss')
-          } else {
-            startTime = this.filter.start_time
-            endTime = this.filter.end_time
-          }
-        } else if (filterType === 'showFullScreen') { // 全屏时间查询
-          startTime = this.filter.start_time
-          endTime = this.filter.end_time
-          // this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
-        } else {
-          startTime = this.filter.start_time
-          endTime = this.filter.end_time
-        } */
-
-        setTimeout(() => {
         this.$nextTick(() => {
-            const res = chartItem.res
+          const axiosArr = chartItem.elements.map((ele) => {
+            const filterItem = ele
+            let query = filterItem.expression
+            if ((chartInfo.type === 'line' || chartInfo.type === 'bar' || chartInfo.type === 'stackArea' || chartInfo.type === 'table') && chartInfo.param) { // 如果是这三个 默认给null
+              chartInfo.param.nullType = chartInfo.param.nullType || 'null'
+              query += '&nullType=' + chartInfo.param.nullType
+            }
+            // if(chartInfo.type === 'table'&&chartInfo.param&&chartInfo.param.last == 1){
+            //   return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(endTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+            // }
+            if (this.from === fromRoute.chartTemp) {
+              return chartTempData
+            }
+            return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
+          })
+          // 一个图表的所有element单独获取数据
+          axios.all(axiosArr).then((res) => {
             if (res.length > 0) {
               const series = []
+              let singleStatRlt = ''
               const legend = []
               const tableData = []
               /* let sumData = {
@@ -158,11 +161,67 @@ export default {
                   threshold: null,
                 }; */
               let errorMsg = ''
+              let pieSeries
+              if (chartInfo.type === 'pie') {
+                pieSeries = {
+                  type: 'pie',
+                  radius: '100%',
+                  center: ['50%', '50%'],
+                  top: '20%',
+                  bottom: '20%',
+                  // roseType: 'radius',
+                  minAngle: 10,
+                  itemStyle: {
+                    borderRadius: 5,
+                    borderColor: '#fff',
+                    borderWidth: 1
+                  },
+                  label: {
+                    show: false
+                  },
+                  emphasis: {
+                    label: {
+                      show: false
+                    }
+                  },
+                  data: []
+                }
+              }
+              if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                pieSeries = {
+                  type: 'bar',
+                  // roseType: 'radius',
+                  itemStyle: {
+                    borderRadius: 5,
+                    borderColor: '#fff',
+                    borderWidth: 1
+                  },
+                  label: {
+                    show: false
+                  },
+                  emphasis: {
+                    label: {
+                      show: false
+                    }
+                  },
+                  data: []
+                }
+              }
               res.forEach((response, innerPos) => {
                 if (response.status === 'success') {
                   errorMsg = ''
                   if (response.data.result) {
-                    // 循环处理每个elements下获取的数据
+                    // 循环处理每个elements下获取的数据列
+                    if (chartItem.type === 'singleStat') {
+                      if (response.data.result.length === 1) {
+                        const statistics = chartItem.param.statistics || 'null'
+                        if (response.data.result[0].values) {
+                          singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values)
+                        }
+                      } else if (response.data.result.length > 1) {
+                        singleStatRlt = this.$t('dashboard.panel.singleStatErrorTip')
+                      }
+                    } else {
                       response.data.result.forEach((queryItem, resIndex) => {
                         let seriesItem = {
                           theData: {
@@ -182,13 +241,18 @@ export default {
                           metric_name: ''
                         }
 
+                        if (chartInfo.type === 'stackArea') {
+                          seriesItem.theData.type = 'line'
+                          seriesItem.theData.stack = chartInfo.name
+                          seriesItem.theData.areaStyle = { opacity: 0.3 }
+                        }
                         if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
                           seriesItem.theData.markLine = {
                             silent: true,
                             symbol: ['circle', 'circle'],
                             label: {
                               distance: this.computeDistance(chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(chartInfo.param.threshold)),
-                            formatter: function (params) {
+                              formatter (params) {
                                 return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
                               }
                             },
@@ -254,23 +318,41 @@ export default {
                                 sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
                               }
                               */
-                          const tData = new Date(dpsItem[0] * 1000)
+                            // let t_date = new Date(dpsItem[0] * 1000);
-                          const timeTmp = bus.timeFormate(tData, 'yyyy-MM-dd hh:mm:ss')
+                            // let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
                             tableData.push({ // 表格数据
                               // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
                               // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
                               element: { element: host, alias: alias },
-                            time: timeTmp, // 采集时间
+                              // time: timeTmp,//采集时间
-                            value: dpsItem[1], // 数值
+                              // value: dpsItem[1],//数值
                               data: [dpsItem[0] * 1000, dpsItem[1]]
                             })
                             return [dpsItem[0] * 1000, dpsItem[1]]
                           })
+                          if (chartInfo.type === 'pie') {
+                            pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
+                          } else if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                            pieSeries.data.push({ value: bus.getSingleStatRlt(chartInfo.param.statistics, seriesItem.theData.data), name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex })
+                          } else {
                             series.push(seriesItem.theData)
                             seriesItem = null
                           }
+                        } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                          // 无数据提示
+                          /*
+                            const currentInfo = chartItem.elements[innerPos];
+                            const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                            this.$message.warning({
+                              duration: 15,
+                              content: errorMsg,
+                              closable: true,
+                            });
+                            */
+                        }
                       })
                     }
+                  }
                 } else {
                   if (response.msg) {
                     // this.$message.error(response.msg);
@@ -285,7 +367,13 @@ export default {
                 }
               })
               if (this.$refs['editChart' + chartItem.type]) {
-                /* const chartData = {
+                if (chartInfo.type === 'pie') {
+                  series.push(pieSeries)
+                }
+                if (chartInfo.type === 'bar' && chartInfo.param.statistics && chartInfo.param.statistics !== 'null') {
+                  series.push(pieSeries)
+                }
+                const chartData = {
                   chartItem: chartItem,
                   series: series,
                   singleStatRlt: singleStatRlt,
@@ -295,30 +383,73 @@ export default {
                   filter: this.filter,
                   filterType: filterType,
                   errorMsg: errorMsg
-                } */
+                }
                 if (chartItem.type === 'table') { // 表格
-                  this.$refs['editChart' + chartItem.type].setData(chartItem, tableData, this.filter.panelId, this.filter, '', errorMsg)
+                  if (filterType === 'showFullScreen') { // 全屏查询
-                } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+                    this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,
+                      this.filter.panelId, this.filter, filterType, errorMsg)
+                  } else {
+                    this.$refs['editChart' + chartItem.type].setData(chartItem, tableData,
+                      this.filter.panelId, this.filter, '', errorMsg)
+                  }
+                } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == 'pie') {
                   if (series.length && chartItem.type === 4) { // 曲线汇总
                     // series.push(sumData);//后续需要
                   }
-                  this.$refs['editChart' + chartItem.type].setData(chartItem, series, this.filter.panelId, this.filter, legend, '', errorMsg)
+                  if (filterType === 'showFullScreen') { // 全屏查询
+                    this.$refs['editChart' + chartItem.type].setData(chartItem, series,
+                      this.filter.panelId, this.filter, legend, filterType, errorMsg)
+                  } else {
+                    this.$refs['editChart' + chartItem.type].setData(chartItem, series,
+                      this.filter.panelId, this.filter, legend, '', errorMsg)
+                  }
+                } else if (chartItem.type === 'singleStat') {
+                  if (filterType === 'showFullScreen') { // 全屏查询
+                    this.$refs['editChart' + chartItem.type].setData(chartItem, singleStatRlt,
+                      this.filter.panelId, this.filter, filterType, errorMsg)
+                  } else {
+                    this.$refs['editChart' + chartItem.type].setData(chartItem, singleStatRlt,
+                      this.filter.panelId, this.filter, '', errorMsg)
+                  }
                 }
               }
             } else {
               const type = chartItem.type
               if (this.$refs['editChart' + chartItem.type]) {
                 if (type === 'table') {
+                  if (filterType === 'showFullScreen') { // table的全屏查询
                     this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
                       this.filter, filterType)
-                } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
+                  } else {
+                    this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
+                      this.filter)
+                  }
+                } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4 || chartItem.type === 'pie') {
+                  if (filterType === 'showFullScreen') { // table的全屏查询
                     this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
                       this.filter, filterType)
+                  } else {
+                    this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
+                      this.filter)
+                  }
+                } else if (chartItem.type === 'singleStat') {
+                  if (filterType === 'showFullScreen') { // 全屏查询
+                    this.$refs['editChart' + chartItem.type].setData(chartItem, '',
+                      this.filter.panelId, this.filter, filterType)
+                  } else {
+                    this.$refs['editChart' + chartItem.type].setData(chartItem, '',
+                      this.filter.panelId, this.filter)
                   }
                 }
               }
+            }
+          }).catch((error) => {
+            if (error) {
+              this.$message.error(error.toString())
+              console.error(error)
+            }
+          })
         })
-        }, 100)
       }
     }
   }
@@ -351,5 +482,18 @@ export default {
       max-width: 300px;
     }
   }
-
+/deep/ .topology-chart-title{
+  text-align: left;
+  width: 100%;
+  line-height: 20px;
+  height: 24px;
+  padding: 5px 10px 0 10px;
+  box-sizing: border-box;
+}
+  .topology-tool-tip /deep/ .topology-chart-title{
+    margin-top: -23px;
+  }
+  .topology-tool-tip /deep/ .line-area{
+    margin-top: -15px;
+  }
 </style>

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

@@ -6,9 +6,9 @@
   <div class="project-box list-page" v-loading="topologyLoading" v-has="'topo_list'">
     <div class="main-list">
       <div class="main-container" :class="fromOverView?'from-overview':'from-project'">
-        <div v-if="editTopologyFlag" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);">
+        <div v-if="(editTopologyFlag || isPreview)&&!fromChart" class="edit-topologyLine top-tools" style="padding-left: 20px;width: calc(100% - 20px);display: inline-block">
           <!--工具栏-->
-          <span class="project-topology-tool">
+          <span v-if="!isPreview" class="project-topology-tool">
           <el-dropdown trigger="click" size="small" placement="bottom-start" v-has="'topo_icon_list'">
             <span class="el-dropdown-title"><i class="iconfont icon-cube"></i> <i
               class="nz-icon nz-icon-arrow-down"></i></span>
@@ -99,10 +99,15 @@
 
         </span>
           <span class="float-right">
-          <button @click="previewTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+          <button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
                   style="margin-right: 20px"
           >
              {{$t('project.topology.preview')}}
+           </button>
+            <button @click="previewExit" v-if="isPreview" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new"
+                    style="margin-right: 20px"
+            >
+             {{$t('project.topology.previewExit')}}
            </button>
            <button @click="saveTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new"
                    :disabled="prevent_opt.save"
@@ -115,7 +120,7 @@
            </button>
          </span>
         </div>
-        <div v-if="!editTopologyFlag&&!fromOverView" class="top-tools" style="padding-left: 10px">
+        <div v-if="(!editTopologyFlag&&!fromOverView) && !isPreview" class="top-tools" style="padding-left: 10px">
           <div>{{topologyInfo.name}}</div>
           <div v-if="!editTopologyFlag&&!fromPrev&&!fromOverView" class="top-tool-right">
             <pick-time
@@ -498,7 +503,9 @@ export default {
         unit: ''
       },
       unitArr: [],
-      topoScreenState: '' // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
+      topoScreenState: '', // 记录编辑前的 $store.ShowTopoScreen 结束编辑后返回
+      isPreview: false,
+      previewData: ''
     }
   },
   components: {
@@ -531,6 +538,10 @@ export default {
       type: Boolean,
       default: false
     },
+    fromChart: {
+      type: Boolean,
+      default: false
+    },
     topoPrevDataS: {
 
     }
@@ -775,6 +786,9 @@ export default {
         }
         this.$get('monitor/project/topo', { projectId: this.obj.id }).then(res => {
           let data = res.data.topo
+          if (this.isPreview) {
+            data = this.previewData
+          }
           // data = JSON.parse(localStorage.getItem('topoData'))
           if (!res.data.topo || !data.pens) {
             data = {
@@ -1840,6 +1854,8 @@ export default {
     },
     // 保存
     saveTopology () {
+      this.previewData = ''
+      this.isPreview = false
       const topologyData = getTopology(this.topologyIndex).pureData()
       // console.log(JSON.stringify(topologyData))
       let flag = true
@@ -1930,6 +1946,8 @@ export default {
     },
     // 取消
     cancelTopology () {
+      this.isPreview = false
+      this.previewData = ''
       this.editTopologyFlag = false
       this.$nextTick(() => {
         getTopology(this.topologyIndex).lock(1)
@@ -1941,14 +1959,46 @@ export default {
     },
     // 预览
     previewTopology () {
-      const data = JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))
+      const topologyData = getTopology(this.topologyIndex).pureData()
-      data.pens.forEach((item) => {
+      this.previewData = topologyData
+      this.isPreview = true
+      this.editTopologyFlag = false
+      topologyData.rule = false
+      topologyData.grid = false
+      topologyData.gridSize = 10
+      topologyData.pens.forEach(item => {
         item.animatePlay = item.data.animatePlay
+        item.data.animateType = item.animateType
+        if (item.type === 0 && JSON.stringify(item.data.imageId)) {
+          item.image = ''
+          item.animateFrames = []
+          item.animateReady = null
+          delete item.img
+          delete item.lastImage
+        }
+        item.data.expressArr = item.data.expressArr.filter((expression, i) => {
+          if (!expression) {
+            item.data.legends.splice(i, 1)
+            return false
+          } else {
+            return true
+          }
         })
-      this.topoPrevData = JSON.parse(JSON.stringify(data))
+      })
-      this.topoPrevData.rule = false
+      if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
-      this.topoPrevData.grid = false
+        getTopology(this.topologyIndex).data.scale = this.oldScale
-      this.previewShow = true
+      }
+      this.$nextTick(() => {
+        this.previewData = topologyData
+        getTopology(this.topologyIndex).lock(1)
+        const domRect = document.getElementById('topology-canvas' + this.topologyIndexF).getBoundingClientRect()
+        getTopology(this.topologyIndex).canvasPos = domRect
+        this.reload()
+      })
+    },
+    previewExit () { // 继续编辑
+      this.isPreview = false
+      this.editTopology()
     },
 
     // 联动 project

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -628,6 +628,11 @@ export default {
         if (res.code === 200) {
           res.data.list.forEach((item, index) => {
             const obj = item
+            if (obj.name.length > 64) {
+              const length = obj.name.length - 64
+              const lastIndex = obj.name.lastIndexOf('-')
+              obj.name = obj.name.substring(0, 64 - length) + obj.name.substring(lastIndex)
+            }
             obj.configs = JSON.parse(obj.configs)
             obj.labelModule = []
             if (obj.configs.labels !== '{}' && obj.configs.labels) {

nezha-fronted/src/components/common/table/settings/projectTable.vue

@@ -64,8 +64,7 @@
     </el-table-column>
     <el-table-column
       :resizable="false"
-      :width="operationWidth"
+      :width="operationWidth">
-      fixed="right">
       <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
       <div slot-scope="scope" class="table-operation-items">
         <button class="table-operation-item" @click="changeProjectTopo(scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
@@ -102,32 +101,25 @@ export default {
           label: this.$t('project.project.project'),
           prop: 'name',
           show: true,
-          minWidth: 150,
           sortable: 'custom'
         }, {
           label: this.$t('project.module.module'),
           prop: 'moduleNum',
           show: true,
-          width: 150,
+          width: 100,
           sortable: 'custom'
         }, {
           label: this.$t('project.endpoint.endpoint'),
           prop: 'endpointNum',
           show: true,
-          width: 150,
+          width: 120,
           sortable: 'custom'
         }, {
           label: this.$t('project.endpoint.alerts'),
           prop: 'alertNum',
           show: true,
-          width: 150,
+          width: 100,
           sortable: 'custom'
-        },
-        {
-          label: this.$t('overall.remark'),
-          prop: 'remark',
-          show: false,
-          minWidth: 150
         }
       ]
     }

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

@@ -154,7 +154,7 @@
     width: 100vw;
     top: 0;
     left: 0;
-    z-index: 1;
+    z-index: 11;
   }
   .topology-mc{
     width: 100%;