fix：解决冲突

nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue

@@ -35,7 +35,18 @@
       </pick-time>
     </template>
     <template v-slot>
-      <log-tab ref="logDetail" v-my-loading="loading" :loading-bottom="endpointLoading" :time-range="filterTime" :log-data="logData" :tab-index="9" @exportLog="exportLog" @limitChange="queryLogData"></log-tab>
+      <log-tab
+        ref="logDetail"
+        v-my-loading="loading"
+        :loading-bottom="endpointLoading"
+        :time-range="filterTime"
+        :log-data="logData"
+        :tab-index="9"
+        @exportLog="exportLog"
+        @limitChange="queryLogData"
+        :supplementaryData="supplementaryData"
+        >
+      </log-tab>
 <!--      <div v-my-loading="loading" v-if="!logData" style="height: 300px; width: 100%; display: flex; justify-content: center; align-items: center; color: #999;">No Data</div>-->
     </template>
   </nz-bottom-data-list>
@@ -49,10 +60,10 @@ import axios from 'axios'
 import bus from '@/libs/bus'
 import { fromRoute } from '@/components/common/js/constants'
 import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin'
-
+import promqlInputMixin from '@/components/common/mixin/promqlInput'
 export default {
   name: 'logBottomTab',
-  mixins: [subDataListMixin, detailViewRightMixin],
+  mixins: [subDataListMixin, detailViewRightMixin, promqlInputMixin],
   components: {
     nzBottomDataList,
     logTab
@@ -74,7 +85,8 @@ export default {
       loading: true,
       endpointLoading: false,
       limit: 100,
-      nowTimeType: {}
+      nowTimeType: {},
+      supplementaryData: []
     }
   },
   computed: {
@@ -161,7 +173,36 @@ export default {
         this.setSearchTime('filterTime')
       })
     },
+    supplementaryLog () {
+      const requestArr = []
+      const start = this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0]))
+      const end = this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1]))
+      // 当不是 指标查询表达式时，除直接查询 用户输入表达式外，另查询 sum by (level) (count_over_time($_expression[$_step]))
+      this.expressions.forEach((item, index) => {
+        const isMetric = this.validateMetric(item)
+        if (!isMetric) {
+          const step = bus.getStep(bus.formateTimeToTime(this.filterTime[0]), bus.formateTimeToTime(this.filterTime[1]))
+          const supplementaryExpr = `sum by (level) (count_over_time(${item}[${step}]))`
+          requestArr.push(this.$get('/logs/loki/api/v1/query_range?query=' + encodeURIComponent(supplementaryExpr) + '&start=' + start + '&end=' + end))
+        }
+      })
+      this.supplementaryData = []
+      axios.all(requestArr).then(res => {
+        res = res.filter((r, i) => r.code === 200)
+        if (res.length > 0) {
+          const logData = res.map(r => r.data)
+          logData.forEach((response) => {
+            const data = response.result
+            if (!data || data.length < 1) {
+              return
+            }
+            this.supplementaryData.push(data)
+          })
+        }
+      })
+    },
     queryLogData (limit) { // log的chart和table是一个请求
+      this.supplementaryLog()
       this.loading = true
       if (limit) {
         this.limit = limit

nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue

@@ -390,7 +390,9 @@
                   :tab-index="tabIndex"
                   @exportLog="exportLog"
                   @limitChange="queryLogData"
-                  v-my-loading="chartLoading">
+                  v-my-loading="chartLoading"
+                  :supplementaryData="supplementaryData"
+                  >
                 </log-tab>
               </el-collapse-item>
             </template>
@@ -3773,7 +3775,8 @@ export default {
       uplotChartInfo: lineData,
       uplotChartInfoLog: logData,
       uplotChartData: [],
-      showAllData: false
+      showAllData: false,
+      supplementaryData: []
     }
   },
   async created () {
@@ -3917,9 +3920,13 @@ export default {
         reader.readAsText(error.response.data)
       })
     },
+<<<<<<< HEAD
     queryLogChart () {
       const promqlInputIndexs = []
       this.$refs.logDetail.$refs.logChart.startLoading()
+=======
+    supplementaryLog () {
+>>>>>>> 5a34b6d505ed3b0339b7f98aedafde68dfaf3da2
       const requestArr = []
       const start = this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[0]))
       const end = this.$stringTimeParseToUnix(bus.formateTimeToTime(this.filterTime[1]))
@@ -3938,6 +3945,7 @@ export default {
           }
         }
       })
+<<<<<<< HEAD
       axios.all(requestArr).then((res, index) => {
         res = res.filter((r, i) => r.code === 200)
         if (res.length > 0) {
@@ -3983,35 +3991,25 @@ export default {
             const mergedArray = Array.from(mergedMap.entries()).sort((a, b) => a[0] - b[0])
             return mergedArray
           }
+=======
+      this.supplementaryData = []
+      axios.all(requestArr).then(res => {
+        res = res.filter((r, i) => r.code === 200)
+        if (res.length > 0) {
+>>>>>>> 5a34b6d505ed3b0339b7f98aedafde68dfaf3da2
           const logData = res.map(r => r.data)
           logData.forEach((response) => {
             const data = response.result
-            data.forEach((result, i) => {
+            if (!data || data.length < 1) {
-              seriesItem.name = 'logs'
+              return
-              const values = result.values.map((item) => {
-                return [item[0] * 1000, item[1]]
-              })
-              seriesItem.data.push(...values)
-            })
-          })
-          seriesItem.data = mergeAndSort(seriesItem.data)
-          if (seriesItem.data.length) {
-            series = [seriesItem]
-            legend = [{ name: seriesItem.name, alias: seriesItem.name, isGray: false }]
-          }
-          this.$nextTick(() => {
-            this.$refs.logDetail.$refs.logChart.setLegend(legend)
-            this.$refs.logDetail.$refs.logChart.setLogColor(series.length)
-            if (!series.length) {
-              series = ''
             }
-            this.$refs.logDetail.$refs.logChart.setSeries(series)
+            this.supplementaryData.push(data)
-            this.$refs.logDetail.$refs.logChart.endLoading()
           })
         }
       })
     },
     queryLogData (limit) {
+      this.supplementaryLog()
       this.chartLoading = true
       if (!limit) {
         limit = this.$refs.logDetail ? this.$refs.logDetail.getLimit() : 100
@@ -4479,7 +4477,6 @@ export default {
             console.log(res)
           })
           this.queryLogData()
-          this.queryLogChart()
         }
       }
       this.updatePath()

nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue

@@ -156,7 +156,18 @@
             </div>
           </el-collapse-item>
           <el-collapse-item v-if="showTab.indexOf('2') > -1" name="2" title="Logs">
-            <log-tab :unit="chartUnitType" ref="logDetail" :timeRange="filterTime" :log-data="logData" :explore-log-table="logTabNoData" :explore-item="true" :tab-index="0" v-my-loading="chartLoading"></log-tab>
+            <log-tab
+              :unit="chartUnitType"
+              ref="logDetail"
+              :timeRange="filterTime"
+              :log-data="logData"
+              :explore-log-table="logTabNoData"
+              :explore-item="true"
+              :tab-index="0"
+              v-my-loading="chartLoading"
+              :supplementaryData="supplementaryData"
+              >
+            </log-tab>
           </el-collapse-item>
         </template>
       </el-collapse>
@@ -216,7 +227,8 @@ export default {
       tableMode: 'table',
       expandResults: false,
       allMatrix: false, // metric是否全部为matrix类型
-      rowData: []
+      rowData: [],
+      supplementaryData: []
     }
   },
   mounted () {

nezha-fronted/src/components/page/dashboard/explore/logTab.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="log-detail">
     <!-- <div :id="`logChart${tabIndex}`" class="log-chart" v-if="showSwitch"></div> -->
-    <chart ref="logChart" :unit="unit" :timeRange="timeRange"></chart>
+    <chart ref="logChart" class="log-chart" :unit="unit" :timeRange="timeRange"></chart>
     <div class="log-chart chart-no-data" v-if="showSwitch&&noData" style="top: 150px">No data</div>
     <div class="log-operations" v-if="showSwitch">
       <div class="log-operation">
@@ -141,8 +141,8 @@ export default {
     exploreLogTable: Boolean,
     exploreItem: Boolean,
     timeRange: {},
-    logChartData: Array,
+    unit: { type: Number, default: 5 },
-    unit: { type: Number, default: 5 }
+    supplementaryData: Array
   },
   computed: {
     tableTimeFormat () {
@@ -616,6 +616,77 @@ export default {
     }
   },
   watch: {
+    supplementaryData: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.$nextTick(() => {
+          this.$refs.logChart.startLoading()
+          let series = []
+          let legend = []
+          const seriesItem = {
+            type: 'line',
+            name: '',
+            symbol: 'emptyCircle', // 去掉点
+            symbolSize: 8,
+            showSymbol: false,
+            smooth: 0.2, // 曲线变平滑
+            data: [],
+            lineStyle: {
+              width: 2,
+              opacity: 0.9
+            },
+            emphasis: {
+              focus: 'none'
+            },
+            blur: {
+              lineStyle: {
+                opacity: 0.3
+              },
+              itemStyle: {
+                opacity: 1
+              }
+            }
+          }
+          function mergeAndSort (arr) {
+            const mergedMap = new Map()
+            // 合并数组，根据时间戳累加值
+            arr.forEach(([timestamp, value]) => {
+              if (mergedMap.has(timestamp)) {
+                mergedMap.set(timestamp, mergedMap.get(timestamp) + Number(value))
+              } else {
+                mergedMap.set(timestamp, Number(value))
+              }
+            })
+            // 将Map转换为二维数组，并根据时间戳排序
+            const mergedArray = Array.from(mergedMap.entries()).sort((a, b) => a[0] - b[0])
+            return mergedArray
+          }
+          n.forEach((data) => {
+            console.log(data)
+            data.forEach((result, i) => {
+              seriesItem.name = 'logs'
+              const values = result.values.map((item) => {
+                return [item[0] * 1000, item[1]]
+              })
+              seriesItem.data.push(...values)
+            })
+          })
+          seriesItem.data = mergeAndSort(seriesItem.data)
+          if (seriesItem.data.length) {
+            series = [seriesItem]
+            legend = [{ name: seriesItem.name, alias: seriesItem.name, isGray: false }]
+          }
+          this.$refs.logChart.setLegend(legend)
+          this.$refs.logChart.setLogColor(series.length)
+          if (!series.length) {
+            series = ''
+          }
+          this.$refs.logChart.setSeries(series)
+          this.$refs.logChart.endLoading()
+        })
+      }
+    },
     logData: {
       deep: true,
       immediate: false,