From c778cf2eb4cd6332aa268df14e15a9524866d0a5 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 1 Jul 2021 19:15:08 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-784=20NEZ-770=20=EF=BC=9Aendpoint=20?=
 =?UTF-8?q?=E5=90=8D=E5=AD=97=E6=8B=BC=E6=8E=A5=E5=90=8E=E8=BF=87=E9=95=BF?=
 =?UTF-8?q?=E4=BB=8E=E4=B8=AD=E9=97=B4=E6=88=AA=E5=8F=96=E4=B8=80=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=20=EF=BC=8C=E4=BB=A5=E5=8F=8A=E6=96=B0=E5=A2=9E=20Dia?=
 =?UTF-8?q?gram=20=E5=9B=BE=E8=A1=A8=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/diagram-chart.vue   |   4 +-
 .../components/charts/line-chart-block.vue    |   6 +-
 .../common/ChartDiagram/diagram.vue           |  27 +-
 .../components/common/alert/alertLabel.vue    |  12 +-
 .../common/project/L5/CanvasProps.vue         |   8 +-
 .../common/project/L5/topoTooltip.vue         | 450 ++++++++++++------
 .../components/common/project/topologyL5.vue  |  72 ++-
 .../common/rightBox/addEndpointBox.vue        |   5 +
 .../common/table/settings/projectTable.vue    |  16 +-
 .../components/page/dashboard/chartBox.vue    |   2 +-
 10 files changed, 407 insertions(+), 195 deletions(-)

diff --git a/nezha-fronted/src/components/charts/diagram-chart.vue b/nezha-fronted/src/components/charts/diagram-chart.vue
index 34c70cc8c..9dc2a2915 100644
--- a/nezha-fronted/src/components/charts/diagram-chart.vue
+++ b/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>
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index cf0979f40..c5af085cf 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/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
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index 1e2b0cf5d..40e4f2be3 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/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
diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
index 346e1b008..aed4f82e9 100644
--- a/nezha-fronted/src/components/common/alert/alertLabel.vue
+++ b/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-value">{{alertLabelData && alertLabelData.labels ? alertLabelData.labels : '--'}}</div>
+        <div class="alert-label-title">Configs</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-value">{{alertLabelData && alertLabelData.host ? alertLabelData.host : '--'}}</div>
+        <div class="alert-label-title">ManageIp</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>
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index ad161a3f8..0c43f6cc0 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/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',
-          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
-        }
+        // {
+        //   id: 'table',
+        //   name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        // }
       ],
       aggregationList: [
         {
diff --git a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
index 514f4a057..e3aac1297 100644
--- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
+++ b/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-chart" style="" v-if="isChart||(chartData.displayChart&&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.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)
-      })
+      this.getChartData(chartData, 0)
     },
     // 获取一个图表具体数据,图表信息，图表位置index
     getChartData (chartInfo, pos, filterType) {
@@ -122,154 +128,230 @@ export default {
           }
         })
       } else {
-        /* let startTime = ''
-        let endTime = '' */
-        /* if (filterType === 'refresh') { // 刷新
-          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 endTime = this.filter.end_time
+        const startTime = this.filter.start_time
+        const step = bus.getStep(startTime, endTime)
+        this.$nextTick(() => {
+          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 = {
-                    name: 'sum',
-                    data: [],
-                    visible: true,
-                    threshold: null,
-                  }; */
+                  name: 'sum',
+                  data: [],
+                  visible: true,
+                  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下获取的数据
-                    response.data.result.forEach((queryItem, resIndex) => {
-                      let seriesItem = {
-                        theData: {
-                          name: '',
-                          symbol: 'emptyCircle', // 去掉点
-                          symbolSize: [2, 2],
-                          smooth: 0.2, // 曲线变平滑
-                          showSymbol: false,
-                          data: [],
-                          lineStyle: {
-                            width: 1,
-                            opacity: 0.9
-                          },
-                          animation: false,
-                          type: chartInfo.type
-                        },
-                        metric_name: ''
-                      }
-
-                      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) {
-                              return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
-                            }
-                          },
-                          lineStyle: {
-                            color: '#d64f40',
-                            width: 2,
-                            type: 'dotted'
-                          },
-                          data: [{
-                            yAxis: Number(chartInfo.param.threshold)
-                          }]
+                    // 循环处理每个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')
                       }
-                      // 图表中每条线的名字,后半部分
-                      let host = ''// up,
-                      if (queryItem.metric.__name__) {
-                        host = `${queryItem.metric.__name__}{`// up,
-                      }
-                      const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
-                      // 设置时间-数据格式对
-                      let tempArr = []
-                      let dpsArr = []
-                      tempArr = queryItem.values
-                      dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
-                      dpsArr = dpsArr.map(item => {
-                        return [item[0], [item[1][0], Number(item[1][1])]]
-                      })
-                      // 判断是否有数据, && tagsArr.length > 0
-                      if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.type]) {
-                        tagsArr.forEach((tag, i) => {
-                          if (tag !== '__name__') {
-                            host += `${tag}="${queryItem.metric[tag]}",`
+                    } else {
+                      response.data.result.forEach((queryItem, resIndex) => {
+                        let seriesItem = {
+                          theData: {
+                            name: '',
+                            symbol: 'emptyCircle', // 去掉点
+                            symbolSize: [2, 2],
+                            smooth: 0.2, // 曲线变平滑
+                            showSymbol: false,
+                            data: [],
+                            lineStyle: {
+                              width: 1,
+                              opacity: 0.9
+                            },
+                            animation: false,
+                            type: chartInfo.type
+                          },
+                          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 (params) {
+                                return chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(params.value)
+                              }
+                            },
+                            lineStyle: {
+                              color: '#d64f40',
+                              width: 2,
+                              type: 'dotted'
+                            },
+                            data: [{
+                              yAxis: Number(chartInfo.param.threshold)
+                            }]
                           }
-                        })
-                        if (host.endsWith(',')) {
-                          host = host.substr(0, host.length - 1)
                         }
+                        // 图表中每条线的名字,后半部分
+                        let host = ''// up,
                         if (queryItem.metric.__name__) {
-                          host += '}'
+                          host = `${queryItem.metric.__name__}{`// up,
                         }
-                        if (!host || host === '') {
-                          host = chartItem.elements[innerPos].expression
-                        }
-                        // 处理legend别名
-                        let alias = this.$refs['editChart' + chartItem.type].dealLegendAlias(host, chartItem.elements[innerPos].legend)
-                        if (!alias || alias === '') {
-                          alias = host
-                        }
-                        legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
-                        // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
-
-                        seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
-                        // alert(seriesItem.theData.name);
-                        seriesItem.metric_name = seriesItem.theData.name
-                        // 将秒改为毫秒
-                        // alert('table=='+JSON.stringify(queryItem))
-                        seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                          /* 曲线汇总暂不需要
-                                if (sumData.data[dpsIndex]) {
-                                  const sumNum = sumData.data[dpsIndex][1] || 0;
-                                  sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-                                } else {
-                                  sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-                                }
-                                */
-                          const tData = new Date(dpsItem[0] * 1000)
-                          const timeTmp = bus.timeFormate(tData, '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, // 采集时间
-                            value: dpsItem[1], // 数值
-                            data: [dpsItem[0] * 1000, dpsItem[1]]
-                          })
-                          return [dpsItem[0] * 1000, dpsItem[1]]
+                        const tagsArr = Object.keys(queryItem.metric)// ["__name__","asset","idc","instance","job","module","project"]
+                        // 设置时间-数据格式对
+                        let tempArr = []
+                        let dpsArr = []
+                        tempArr = queryItem.values
+                        dpsArr = Object.entries(queryItem.values)// [ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                        dpsArr = dpsArr.map(item => {
+                          return [item[0], [item[1][0], Number(item[1][1])]]
                         })
-                        series.push(seriesItem.theData)
-                        seriesItem = null
-                      }
-                    })
+                        // 判断是否有数据, && tagsArr.length > 0
+                        if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.type]) {
+                          tagsArr.forEach((tag, i) => {
+                            if (tag !== '__name__') {
+                              host += `${tag}="${queryItem.metric[tag]}",`
+                            }
+                          })
+                          if (host.endsWith(',')) {
+                            host = host.substr(0, host.length - 1)
+                          }
+                          if (queryItem.metric.__name__) {
+                            host += '}'
+                          }
+                          if (!host || host === '') {
+                            host = chartItem.elements[innerPos].expression
+                          }
+                          // 处理legend别名
+                          let alias = this.$refs['editChart' + chartItem.type].dealLegendAlias(host, chartItem.elements[innerPos].legend)
+                          if (!alias || alias === '') {
+                            alias = host
+                          }
+                          legend.push({ name: host + '-' + chartItem.elements[innerPos].id + '-' + resIndex, alias: alias })
+                          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+
+                          seriesItem.theData.name = host + '-' + chartItem.elements[innerPos].id + '-' + resIndex
+                          // alert(seriesItem.theData.name);
+                          seriesItem.metric_name = seriesItem.theData.name
+                          // 将秒改为毫秒
+                          // alert('table=='+JSON.stringify(queryItem))
+                          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+                            /* 曲线汇总暂不需要
+                              if (sumData.data[dpsIndex]) {
+                                const sumNum = sumData.data[dpsIndex][1] || 0;
+                                sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+                              } else {
+                                sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+                              }
+                              */
+                            // let t_date = new Date(dpsItem[0] * 1000);
+                            // 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,//采集时间
+                              // 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) {
@@ -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)
-                } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+                  if (filterType === 'showFullScreen') { // 全屏查询
+                    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') {
-                  this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
-                    this.filter, filterType)
-                } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
-                  this.$refs['editChart' + chartItem.type].setData(chartItem, [], this.filter.panelId,
-                    this.filter, filterType)
+                  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 (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>
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index fd323df89..76484ced7 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/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))
-      data.pens.forEach((item) => {
+      const topologyData = getTopology(this.topologyIndex).pureData()
+      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
-      this.topoPrevData.grid = false
-      this.previewShow = true
+      if (this.penToolTipScale == getTopology(this.topologyIndex).data.scale) {
+        getTopology(this.topologyIndex).data.scale = this.oldScale
+      }
+      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
diff --git a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
index 3f61cd0e1..534fbe14f 100644
--- a/nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
+++ b/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) {
diff --git a/nezha-fronted/src/components/common/table/settings/projectTable.vue b/nezha-fronted/src/components/common/table/settings/projectTable.vue
index 9dcae827b..f68be6c9f 100644
--- a/nezha-fronted/src/components/common/table/settings/projectTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/projectTable.vue
@@ -64,8 +64,7 @@
     </el-table-column>
     <el-table-column
       :resizable="false"
-      :width="operationWidth"
-      fixed="right">
+      :width="operationWidth">
       <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
         }
       ]
     }
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index ea722e317..8872413bd 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/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%;