feat：endpoint query 图表添加比较按钮

10 files changed, 74 insertions, 26 deletions

diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 1292b3907..2ffaa54f3 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -97,6 +97,7 @@
                    @close="screenModal = false;screenLegendListMore=[]"
                    style="margin-top: 1vh !important;"
                    @opened="initDialog"
+                   @closed="closeDialog"
                    :modal-append-to-body="false"
         >
           <el-popover
@@ -1046,8 +1047,6 @@ export default {
           })
         })
       } else if (chartSite === 'screen') { // 全屏显示
-        // eslint-disable-next-line
-        console.log(legend)
         if (legend) {
           this.screenLegendList = []
           this.isGreyScreen = []
@@ -1353,6 +1352,14 @@ export default {
         });
         */
     },
+    closeDialog () {
+      this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      this.$refs.pickTime.$refs.multipleTime.showTime = {
+        id: 12,
+        text: this.$t('dashboard.panel.noDate')
+      }
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
+    },
     changeDate (st) {
       this.oldSearchTime = st
       this.searchTime = st
@@ -1448,7 +1455,6 @@ export default {
         }
         const step = bus.getStep(startTime, endTime)
         if (type === 'list') { // 普通模式,主控台使用
-          console.log(123)
           axiosArr = this.data.elements.map((ele) => {
             const filterItem = ele
             let query = encodeURIComponent(filterItem.expression)
@@ -1459,7 +1465,6 @@ export default {
             }
             return this.$get('/prom/api/v1/query_range?query=' + query + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step)
           })
-          console.log(this.$refs.pickTime.$refs.multipleTime.searchTime)
           if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
             startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
             endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
@@ -1627,10 +1632,8 @@ export default {
               }
             })
             this.setColor(legend.length)
-            console.log(series)
-            const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
-            console.log(minusTime)
             if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.data.elements.length) {
+              const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
               let cutPoint = 0
               res.forEach((item, index) => {
                 if (index < res.length / 2) {
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 9ffc89889..ccd7f33ec 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -6,7 +6,9 @@
   .plTableBox.nz-table /deep/  .el-table{
     display: block !important;
   }
-
+.project-calendar{
+  margin-top: 2px;
+}
 </style>
 <style>
   .endpoint-dialog .el-dialog__body{
@@ -111,11 +113,11 @@
       <div slot="title">
         {{$t("project.endpoint.dialogTitle")}}
         <div class="float-right panel-calendar dialog-tool" style="display: flex">
-          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart"></pick-time>
+          <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange" id="endpoint-query-full-chart" :show-multiple="true" ref="pickTime"></pick-time>
           <button @click="saveChart" class="nz-btn nz-btn-size-large nz-btn-style-normal-new" v-has="'project_endpoint_query_chart_toAdd'" id="endpoint-query-full-chart-save">{{$t('dashboard.metric.saveChart')}}</button>
         </div>
       </div>
-      <chart ref="endpointChart" :unit="chartUnit"></chart>
+      <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime"></chart>
     </el-dialog>
     <transition name="right-box">
       <chart-box :chart="chart" :panel-data="panelData" :show-panel="{id: -1, name: '', type: 'endpointQuery'}" @close="rightBox.show = false" @on-create-success="createSuccess" @reload="getPanelData" @reloadOnlyPanel="getPanelData" box-class="save-chart-box" from="project_endpoint_query" ref="addChartModal" v-if="rightBox.show" style="z-index: 2900" :fromEndpoint="true"></chart-box>
@@ -170,7 +172,8 @@ export default {
       rightBox: { show: false },
       plTableSHow: true,
       scrollTop: 0,
-      scrollbarWrap: null
+      scrollbarWrap: null,
+      minusTime: 0
     }
   },
   methods: {
@@ -398,12 +401,24 @@ export default {
       this.chartDatas = []
       this.legend = []
       this.graphShow = true
+      this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      this.$refs.pickTime.$refs.multipleTime.showTime = {
+        id: 12,
+        text: this.$t('dashboard.panel.noDate')
+      }
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
       this.$nextTick(() => {
         this.$refs.endpointChart.startLoading()
         this.queryChartDate()
       })
     },
     dialogClose: function () {
+      this.$refs.pickTime.$refs.multipleTime.searchTime = []
+      this.$refs.pickTime.$refs.multipleTime.showTime = {
+        id: 12,
+        text: this.$t('dashboard.panel.noDate')
+      }
+      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
       this.graphShow = false
     },
     chartUnitChange: function (unit) {
@@ -435,6 +450,13 @@ export default {
       for (const endpoint of this.selectedEndpoints) {
         axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
       }
+      if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
+        const startTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
+        const endTime = bus.timeFormate(this.$refs.pickTime.$refs.multipleTime.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
+        for (const endpoint of this.selectedEndpoints) {
+          axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + endpoint.element + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
+        }
+      }
       this.legend = []
       this.chartDatas = []
       axios.all(axiosArr).then(res => {
@@ -478,6 +500,10 @@ export default {
                   // showText:this.formatLegend(chartData.name),
                   isGray: false
                 }
+                if (promIndex >= this.selectedEndpoints.length) {
+                  legend.name = 'process_' + legend.name
+                  legend.alias = 'process_' + legend.alias
+                }
                 this.legend.push(legend)
                 chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
                   return [dpsItem[0] * 1000, Number(dpsItem[1])]
@@ -490,6 +516,24 @@ export default {
             }
           }
         })
+
+        if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.selectedEndpoints.length) {
+          const minusTime = (new Date(this.searchTime[0]).getTime() - new Date(this.$refs.pickTime.$refs.multipleTime.searchTime[0]).getTime())
+          this.minusTime = minusTime
+          let cutPoint = 0
+          res.forEach((item, index) => {
+            if (index < res.length / 2) {
+              cutPoint += res[index].data.data.result.length
+            }
+          })
+          this.chartDatas.forEach((item, index) => {
+            if (index >= cutPoint) {
+              this.chartDatas[index].data.forEach((item1, index1) => {
+                item1[0] = item1[0] + minusTime
+              })
+            }
+          })
+        }
         this.$nextTick(() => {
           if (this.$refs.endpointChart) {
             this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
diff --git a/nezha-fronted/src/components/common/multipleTime.vue b/nezha-fronted/src/components/common/multipleTime.vue
index 10d9fe5c7..8e71c2cee 100644
--- a/nezha-fronted/src/components/common/multipleTime.vue
+++ b/nezha-fronted/src/components/common/multipleTime.vue
@@ -365,7 +365,6 @@ export default {
             this.isCustom = false
             this.$emit('change', this.searchTime)
           } else {
-            console.log(123123)
             this.isCustom = true
             this.$refs.calendar.focus()
           }
@@ -390,7 +389,6 @@ export default {
       }
     },
     setSearchTime (type, val) {
-      console.log(132, this.stepSearchTime, val, new Date(this.stepSearchTime[0]).getTime() - val * 60 * 60)
       if (type === 'minute') {
         const startTime = bus.timeFormate(new Date(this.stepSearchTime[0]).getTime() - val * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
         const endTime = bus.timeFormate(new Date(this.stepSearchTime[1]).getTime() - val * 60 * 1000, 'yyyy-MM-dd hh:mm:ss')
diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index 660b59068..fa320da10 100644
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="interval-refresh ">
     <time-picker v-if="showTimePicker" ref="timePicker" class="time-picker" @change="dateChange" :default-pick="defaultPick" :show-empty="showEmpty" v-model="this.searchTime"></time-picker>
-    <chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
     <multipleTime ref="multipleTime" v-if="showMultiple" :stepSearchTime="searchTime" @change="dateChange(searchTime)" class="multiple-time"/>
+    <chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
       <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" style="height: 28px;line-height: 28px;vertical-align: middle;" v-show="useRefresh">
         <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc" :id="id+'-refresh'">
           <i style="font-size: 14px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
@@ -125,7 +125,6 @@ export default {
       return [startTime, endTime]
     },
     dateChange (time) {
-      console.log(time)
       this.searchTime = time
       this.$emit('change', this.searchTime)
       this.refreshDataFunc()
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index 22a4f6988..5290e13b9 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -1164,7 +1164,7 @@ export default {
     },
 
     onMessage (event, data, e) {
-      console.log('onMessage', event, data)
+      // console.log('onMessage', event, data)
       // console.log(getTopology(this.topologyIndex))
       // this.notModuleIDArr=[];
       this.toolShow.attr = false
diff --git a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
index 5ab0b1562..bb1f683f3 100644
--- a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
@@ -272,7 +272,6 @@ export default {
           if (param.type === 'radio' || param.type === 'checkbox' || param.type === 'select') {
             for (let i = 0; i < param.param.items.length; i++) {
               if (!param.param.items[i].name) {
-                console.log(this.$refs['metaNameOption' + i])
                 this.$refs['metaNameOption' + i][0].focus()
                 this.$message.error(this.$t('config.assetMeta.metaOptionNull'))
                 this.prevent_opt.save = false
diff --git a/nezha-fronted/src/components/common/rightBox/roleBox.vue b/nezha-fronted/src/components/common/rightBox/roleBox.vue
index c90536398..6f8aa0c1e 100644
--- a/nezha-fronted/src/components/common/rightBox/roleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/roleBox.vue
@@ -143,7 +143,6 @@ export default {
         if (response.code == 200) {
           this.menus = response.data.list
 
-          console.log('menus', this.menus)
         } else {
           this.$message.error('load menu faild')
         }
diff --git a/nezha-fronted/src/components/common/timePicker.vue b/nezha-fronted/src/components/common/timePicker.vue
index 351d538ee..9c92e8abb 100644
--- a/nezha-fronted/src/components/common/timePicker.vue
+++ b/nezha-fronted/src/components/common/timePicker.vue
@@ -261,7 +261,6 @@ export default {
       this.$emit('change', this.searchTime)
     },
     setCustomTime (timeGroup) {
-      console.log(timeGroup)
       if (timeGroup) {
         this.showTime = this.nowTimeType = this.timeData.find(item => item.id == timeGroup.id)
         if (this.showTime) {
@@ -293,7 +292,6 @@ export default {
     // left(){},
     // right(){},
     timeChange (val, from) {
-      console.log(val, from)
       this.nowTimeType = val
       this.$set(this.showTime, 'id', val.id)
       this.$set(this.showTime, 'text', val.text)
@@ -322,7 +320,6 @@ export default {
             this.$refs.calendar.focus()
           }
         } else {
-          console.log(123123123)
           this.isCustom = false
           if (this.showEmpty && id === 12) {
             this.searchTime = []
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index b12bef0d9..4fbf45ae3 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -40,7 +40,8 @@ export default {
     tooltipFormatter: Function,
     yAxisFormatter: Function,
     map: {},
-    axisTooltip: { type: String } // x/y
+    axisTooltip: { type: String }, // x/y
+    minusTime: {} // 用于比较图表时的时间差值
   },
   data () {
     return {
@@ -409,6 +410,7 @@ export default {
       return params.title
     },
     defaultTooltipFormatter: function (params) {
+      let minusFlag = true
       let str = '<div>'
       params.forEach((item, i) => {
         if (i === 0) {
@@ -418,7 +420,15 @@ export default {
               [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
           str += '<br/>'
         }
-        const alias = this.queryAlias(item.seriesName)
+        const alias = this.queryAlias(i)
+        if (alias.indexOf('process_') !== -1 && minusFlag) {
+          const value = item.data[0] - this.minusTime
+          const tData = new Date(value)
+          str += [tData.getFullYear(), tData.getMonth() + 1, tData.getDate()].join('-') + ' ' +
+            [tData.getHours(), tData.getMinutes(), tData.getSeconds()].join(':')
+          str += '<br/>'
+          minusFlag = false
+        }
         const val = Number(item.data[1])
         str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
         str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}:  </div>`
@@ -430,10 +440,10 @@ export default {
       str += '</div>'
       return str
     },
-    queryAlias: function (seriesName) {
+    queryAlias: function (i) {
       let alias = null
       if (this.legend && this.legend.length > 0) {
-        const tempLegend = this.legend.find((item) => { return item.name == seriesName })
+        const tempLegend = this.legend.find((item, index) => { return index === i })
         if (tempLegend) {
           alias = tempLegend.alias
         }
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 0c19d07ee..4eb9003ac 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -389,7 +389,6 @@ export default {
     dateChange (val) {
       const nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType
       this.setSearchTime(nowTimeType.type, nowTimeType.value, nowTimeType)
-      console.log(this.searchTime)
       this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss')
       this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')
       this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss')