fix： 修改 仪表盘 不显示的问题，以及 endpointQuery的全屏的新增

nezha-fronted/src/components/chart/ChartScreenHeader.vue

@@ -34,7 +34,19 @@
         </el-tooltip>
       </span>
       <span class="chart-header__tool" v-if="showTime(chartInfo.type)">
-        <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" :showMultiple="showMultiple(chartInfo.type)" ref="pickTime" style="height: 28px;" id="line-chart"></pick-time>
+        <pick-time
+          :refresh-data-func="dateChange"
+          v-model="searchTime"
+          :use-chart-unit="showUnit(from)"
+          :showMultiple="showMultiple(chartInfo.type)"
+          ref="pickTime"
+          style="height: 28px;"
+          id="line-chart"
+          @unitChange="unitChange"
+        ></pick-time>
+      </span>
+      <span class="chart-header__tool" v-if="showSaveBtn(from)">
+            <button id="endpoint-query-full-chart-save" v-has="'panel_chart_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
       </span>
       <span class="chart-header__tool" @click="closeDialog">
         <i class="nz-icon nz-icon-close" style="font-size: 16px;"></i>
@@ -128,6 +140,23 @@ export default {
           return true
         default: return false
       }
+    },
+    showUnit (type) {
+      switch (type) {
+        case 'endpointQuery' :
+          return true
+        default: return false
+      }
+    },
+    showSaveBtn (type) {
+      switch (type) {
+        case 'endpointQuery' :
+          return true
+        default: return false
+      }
+    },
+    saveChart () {
+      this.$emit('saveChart')
     }
   },
   watch: {

nezha-fronted/src/components/chart/chart/chartGauge.vue

@@ -3,7 +3,7 @@
     <div
       v-for="(item,index) in gaugeData" :key="index"
       class="chart-gauge-item"
-      :id="this.isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
+      :id="isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
       :style="{height:item.height+'px',width:item.width + 'px'}"
     >
 <!--      :style="{background:item.mapping ? item.mapping.color.bac : false,height:item.height+'px',width:item.width + 'px'}"-->

nezha-fronted/src/components/chart/chartHeaderMixin.js

@@ -64,6 +64,9 @@ export default {
     },
     loadMore () {
       this.$emit('loadMore')
+    },
+    unitChange (val) {
+      this.$emit('unitChange', val)
     }
   },
   watch: {

nezha-fronted/src/components/chart/defaultLineData.js

@@ -43,13 +43,12 @@ const data = {
   y: 12,
   elements: [
     {
-      id: 85583,
+      id: '',
-      chartId: 697389,
+      chartId: '',
       expression: '',
       type: 'expert',
       legend: '',
-      buildIn: 0,
+      buildIn: '',
-      seq: null,
       name: 'A',
       state: 1
     }

nezha-fronted/src/components/chart/defaultLogData.js

@@ -42,13 +42,11 @@ const data = {
   y: 12,
   elements: [
     {
-      id: 85584,
+      id: '',
-      chartId: 697389,
+      chartId: '',
       expression: '',
       type: 'expert',
       legend: '',
-      buildIn: 0,
-      seq: null,
       name: 'A',
       state: 1
     }

nezha-fronted/src/components/chart/panelChart.vue

@@ -10,6 +10,7 @@
       :chart-info="chartInfo"
       :showAllData.sync="showAllData"
       :allDataLength="allDataLength"
+      @unitChange="unitChange"
       @loadMore="loadMore"
       @edit-chart="$emit('edit-chart', chartInfo)"
       @refresh="refresh"
@@ -21,10 +22,13 @@
       v-if="isFullscreen"
       :is-group="isGroup(chartInfo.type)"
       :isError="isError"
+      :from="from"
       :chartData="chartData"
       :chart-info="chartInfo"
       :showAllData.sync="showAllData"
       :allDataLength="allDataLength"
+      @unitChange="unitChange"
+      @saveChart="saveChart"
       @loadMore="loadMore"
       @refresh="refresh"
       @dateChange="dateChange"
@@ -391,6 +395,17 @@ export default {
       this.$nextTick(() => {
         this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].initChart()
       })
+    },
+    unitChange (val) {
+      this.$emit('update:chartInfo', 'unit', val)
+      this.chartInfo.unit = val
+      console.log(this.chartInfo.unit)
+      this.$nextTick(() => {
+        this.$refs.chart && this.$refs.chart.$refs['chart' + this.chartInfo.id].initChart()
+      })
+    },
+    saveChart () {
+      this.$emit('saveChart', this.chartInfo)
     }
   },
   watch: {

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

@@ -269,126 +269,6 @@ export default {
         this.queryDate()
       })
     },
-    queryChartDate () {
-      const $temp = this
-      const start = this.searchTime[0] ? this.searchTime[0] : getTime(-1, 'h')
-      const end = this.searchTime[1] ? this.searchTime[1] : getTime(0, 'h')
-      // const start = this.currentMsg.startAt
-      // const end = this.currentMsg.endAt
-      this.searchTime = [start, end]
-      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
-      let step = '15s'
-      if (timeDiff < 1) {
-        step = '15s'
-      } else if (timeDiff < 7) {
-        step = '5m'
-      } else if (timeDiff < 30) {
-        step = '10m'
-      } else {
-        step = '30m'
-      }
-      if (this.$refs.messageChart) {
-        this.$refs.messageChart.startLoading()
-        const axiosArr = []
-        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\r|\n+/g, '')) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step + '&filter=' + encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))))
-        this.legend = []
-        this.chartDatas = []
-        axios.all(axiosArr).then(res => {
-          this.chartLoading = false
-          try {
-            res.forEach((response, promIndex) => {
-              if (response.status === 200) {
-                if (response.data.status === 'success') {
-                  const queryData = response.data.data.result[0]
-                  if (queryData) {
-                    const chartData = {
-                      type: 'line',
-                      symbol: 'none', // 去掉点
-                      smooth: 0.2, // 曲线变平滑
-                      name: '',
-                      lineStyle: {
-                        width: 1,
-                        opacity: 0.9
-                      },
-                      markLine: {
-                        silent: true,
-                        symbol: ['circle', 'circle'],
-                        label: {
-                          distance: this.computeDistance(chartDataFormat.getUnit(this.currentMsg.alertRule.unit ? this.currentMsg.alertRule.unit : 2).compute(this.currentMsg.alertRule.threshold)),
-                          formatter (params) {
-                            return chartDataFormat.getUnit($temp.currentMsg.alertRule.unit ? $temp.currentMsg.alertRule.unit : 2).compute(params.value)
-                          }
-                        },
-                        lineStyle: {
-                          color: '#d64f40',
-                          width: 2,
-                          type: 'dotted'
-                        },
-                        data: [{
-                          yAxis: Number(this.currentMsg.alertRule.threshold)
-                        }]
-                      },
-                      markArea: {
-                        itemStyle: {
-                          color: '#d64f40',
-                          opacity: 0.1
-                        },
-                        data: [this.returnMarkArea()]
-                      }
-                    }
-                    if (this.currentMsg.alertRule.operator == '==' || this.currentMsg.alertRule.operator == '!=') {
-                      delete chartData.markArea
-                    }
-                    let alias = chartData.name
-                    chartData.name += '{'
-                    alias += '{'
-                    Object.keys(queryData.metric).forEach((item, index) => {
-                      const label = item
-                      const value = queryData.metric[label]
-                      chartData.name += label + "='" + value + "',"
-                    })
-                    chartData.name = chartData.name.charAt(chartData.name.length - 1) == ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
-                    chartData.name += '}'
-                    const legend = {
-                      name: chartData.name,
-                      alias: chartData.name,
-                      isGray: false
-                    }
-                    this.legend.push(legend)
-                    chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
-                      return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(2)]
-                    })
-                    this.chartDatas.push(chartData)
-                  }
-                } else {
-                  this.$message.error(response.data.error)
-                }
-              } else {
-                this.$refs.messageChart.endLoading()
-                this.chartLoading = false
-                this.isError = true
-                if (response.msg) {
-                  this.errorContent = response.msg
-                } else if (response.error) {
-                  this.errorContent = response.error
-                } else {
-                  this.errorContent = response
-                }
-              }
-            })
-            this.$nextTick(() => {
-              this.$refs.messageChart.setRandomColors(this.chartDatas.length)
-              this.$refs.messageChart.setLegend(this.legend)
-              this.$refs.messageChart.setSeries(this.chartDatas)
-              this.$refs.messageChart.endLoading()
-            })
-          } catch (err) {
-            // this.$message.error(err)
-            this.$refs.messageChart.endLoading()
-          }
-        })
-      }
-    },
     del (row) {
       const self = this
       this.$confirm(this.$t('tip.confirmDelete'), {
@@ -711,11 +591,13 @@ export default {
         const chartInfo = lodash.cloneDeep(lineData)
         chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, ''))
         chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))
+        chartInfo.unit = this.currentMsg.unit
         this.showFullscreen(true, chartInfo)
       } else if (this.currentMsg.alertRule.type === 2) {
         const chartInfo = lodash.cloneDeep(logData)
         chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, ''))
         chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))
+        chartInfo.unit = this.currentMsg.unit
         this.showFullscreen(true, chartInfo)
       }
     },

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

@@ -37,7 +37,8 @@
           <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 28px;">
             <button class="nz-btn nz-btn-size-normal nz-btn-style-light" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}" @click="viewGraph">
               <i class="nz-icon nz-icon-chart"  :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
-            </button><button @click="dropdownHandler(dropdownShow)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
+            </button>
+            <button @click="dropdownHandler(dropdownShow)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
             <i class="nz-icon nz-icon-arrow-down"></i>
             <transition name="el-zoom-in-top">
               <div v-if="dropdownShow" class="endpoint-query-dropdown el-popover" style="right: 11px;top: 33px;">

nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-clickoutside="{obj:editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
     <transition v-if="from !== 'chartTemp'" name="right-box">
-      <panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>
+<!--      <panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>-->
     </transition>
 
     <div class="right-box__header">
@@ -182,6 +182,10 @@ export default {
           params.x = 0
           params.y = 999
         }
+        if (this.from === 'endpointQuery') { // endpointQuery 新增 放在最后
+          params.x = 0
+          params.y = 999
+        }
         delete params.panel
         if (params.type === 'table') {
           delete params.param.tags
@@ -212,6 +216,7 @@ export default {
       })
     },
     selectPanel (panel) {
+      console.log(panel)
       this.panelName = panel.name
       this.editChart.panelName = panel.name
       this.panelId = panel.id
@@ -356,7 +361,7 @@ export default {
       immediate: true,
       deep: true,
       handler () {
-        if (this.showPanel.id || this.from === 'chartTemp') {
+        if (this.showPanel && (this.showPanel.id || this.from === 'chartTemp')) {
           this.panelId = this.showPanel.id
           this.panelName = this.showPanel.name
           this.editChart.panelName = this.showPanel.name

nezha-fronted/src/components/common/table/special/endpointQueryTab.vue

@@ -51,43 +51,96 @@
     <div class="query-page-option">
       <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
     </div>
-    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
+    <el-dialog
-               :title="$t('project.endpoint.dialogTitle')"
-               :visible.sync="graphShow"
-               width="90%"
-               height="80%"
-               :modal-append-to-body="false"
       id="viewGraphDialog"
-               @close="dialogClose">
+      v-if="graphShow"
-      <div slot="title">
+      :visible.sync="graphShow"
-        {{$t("project.endpoint.dialogTitle")}}
+      :show-close="false"
-        <div class="float-right panel-calendar dialog-tool" style="display: flex;margin-right: 30px">
+      class="nz-dialog chart-fullscreen"
-          <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>
+      destroy-on-close
-          <button id="endpoint-query-full-chart-save" v-has="'panel_chart_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
+      fullscreen
-        </div>
+      :modal-append-to-body="false"
-      </div>
+    >
-      <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime" v-if="graphShow"></chart>
+      <panel-chart
+        :ref="'chart-fullscreen' + chartInfo.id"
+        :chart-info="chartInfo"
+        :from="fromRoute.endpointQuery"
+        :filter="{}"
+        :is-fullscreen="true"
+        @saveChart="saveChart"
+        :time-range="searchTime"
+        @showFullscreen="showFullscreen"
+      ></panel-chart>
     </el-dialog>
+<!--    <el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"-->
+<!--               :title="$t('project.endpoint.dialogTitle')"-->
+<!--               :visible.sync="graphShow"-->
+<!--               width="90%"-->
+<!--               height="80%"-->
+<!--               :modal-append-to-body="false"-->
+<!--               id="viewGraphDialog"-->
+<!--               @close="dialogClose">-->
+<!--      <div slot="title">-->
+<!--        {{$t("project.endpoint.dialogTitle")}}-->
+<!--        <div class="float-right panel-calendar dialog-tool" style="display: flex;margin-right: 30px">-->
+<!--          <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 id="endpoint-query-full-chart-save" v-has="'panel_chart_add'" class="nz-btn nz-btn-size-large nz-btn-style-normal" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <chart ref="endpointChart" :unit="chartUnit" :minusTime="minusTime" v-if="graphShow"></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>
     </transition>
+    <transition name="right-box">
+      <!--      <chart-box-->
+      <!--        v-if="rightBox.chart.show"-->
+      <!--        ref="addChartModal"-->
+      <!--        :chart="chart"-->
+      <!--        :from="fromRoute.panel"-->
+      <!--        :panel-data="panelData"-->
+      <!--        :show-panel="showPanel"-->
+      <!--        @close="closeChartBox"-->
+      <!--        @reload="panelReload"-->
+      <!--        @reloadOnlyPanel="panelReloadOnlyPanel"-->
+      <!--        @delete-chart="delChart"-->
+      <!--        @on-create-success="createSuccess"-->
+      <!--        @on-delete-success="delChartOk"-->
+      <!--      ></chart-box>-->
+      <chart-right-box
+        v-if="chartRightBoxShow"
+        v-loading="rightBox.loading"
+        ref="addChartModal"
+        :chart="chart"
+        :showPanel="{}"
+        :from="fromRoute.panel"
+        :panel-data="panelData"
+        @close="closeChartBox"
+        @on-create-success="createSuccess"
+      ></chart-right-box>
+    </transition>
   </div>
 </template>
 
 <script>
 import chartBox from '@/components/page/dashboard/chartBox'
+import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
 import axios from 'axios'
 import bus from '../../../../libs/bus'
 import chart from '@/components/page/dashboard/overview/chart'
-import { sameLabels } from '@/components/common/js/constants'
+import { sameLabels, fromRoute } from '@/components/common/js/constants'
 import metaData from '@/components/common/metaData'
-
+import panelChart from '@/components/chart/panelChart'
+import lodash from 'lodash'
+import lineData from '@/components/chart/defaultLineData'
 export default {
   name: 'endpointQueryTab',
   components: {
     chartBox,
     chart,
-    metaData
+    metaData,
+    panelChart,
+    chartRightBox
   },
   props: {
     from: {},
@@ -131,6 +184,7 @@ export default {
   },
   data () {
     return {
+      fromRoute,
       tableData: [],
       currentTableData: [],
       batchDeleteObjs: [],
@@ -333,187 +387,30 @@ export default {
       if (this.batchDeleteObjs.length < 1) {
         return
       }
-      this.chartDatas = []
-      this.legend = []
-      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 = true
       this.$nextTick(() => {
-        this.$refs.endpointChart.startLoading()
+        const chartInfo = lodash.cloneDeep(lineData)
-        this.queryChartDate()
+        const elements = lodash.cloneDeep(chartInfo.elements[0])
-      })
+        chartInfo.elements = []
-    },
+        chartInfo.name = this.$t('project.endpoint.dialogTitle')
-    chartUnitChange (unit) {
-      this.chartUnit = unit
-      this.$nextTick(() => {
-        this.queryChartDate()
-      })
-    },
-    queryChartDate () {
-      const start = this.searchTime[0] ? this.searchTime[0] : this.getTime(-1, 'h')
-      const end = this.searchTime[1] ? this.searchTime[1] : this.getTime(0, 'h')
-      this.searchTime = [start, end]
-      const timeDiff = (new Date(end).getTime() - new Date(start).getTime()) / 1000 / (24 * 60 * 60)
-      // end - start < 1 day : 15s
-      // end - start < 7 day : 5m
-      // end - start < 30 day : 10m
-      // end - start > 30 day : 30m
-      let step = '15s'
-      if (timeDiff < 1) {
-        step = '15s'
-      } else if (timeDiff < 7) {
-        step = '5m'
-      } else if (timeDiff < 30) {
-        step = '10m'
-      } else {
-        step = '30m'
-      }
-      const axiosArr = []
         for (const endpoint of this.batchDeleteObjs) {
-        axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(start) + '&end=' + this.$stringTimeParseToUnix(end) + '&step=' + step))
+          const element = lodash.cloneDeep(elements)
+          element.expression = endpoint.element
+          chartInfo.elements.push(element)
         }
-      if (this.$refs.pickTime && this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length) { // 判断是否需要添加比较
+        this.showFullscreen(true, chartInfo)
-        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.batchDeleteObjs) {
-          axiosArr.push(axios.get('/prom/api/v1/query_range?query=' + encodeURIComponent(endpoint.element) + '&start=' + this.$stringTimeParseToUnix(startTime) + '&end=' + this.$stringTimeParseToUnix(endTime) + '&step=' + step))
-        }
-      }
-      this.legend = []
-      this.chartDatas = []
-      axios.all(axiosArr).then(res => {
-        res.forEach((response, promIndex) => {
-          if (response.status == 200) {
-            if (response.data.status == 'success') {
-              const queryData = response.data.data.result[0]
-              if (queryData) {
-                const chartData = {
-                  type: 'line',
-                  symbol: 'none', // 去掉点
-                  smooth: 0.2,
-                  lineStyle: {
-                    width: 1,
-                    opacity: 0.9
-                  }
-                }
-                chartData.name = queryData.metric.__name__
-                let alias = queryData.metric.__name__
-                delete queryData.metric.__name__
-                chartData.name += '{'
-                alias += '{'
-                Object.keys(queryData.metric).forEach((item, index) => {
-                  const label = item
-                  const value = queryData.metric[label]
-                  chartData.name += label + "='" + value + "',"
-                  if (!this.sameLabels.some((i) => { return i == label })) {
-                    alias += label + "='" + value + "',"
-                  }
-                })
-                chartData.name = chartData.name.charAt(chartData.name.length - 1) === ',' ? chartData.name.substr(0, chartData.name.length - 1) : chartData.name
-                alias = alias.charAt(alias.length - 1) === ',' ? alias.substr(0, alias.length - 1) : alias
-                chartData.name += '}'
-                alias += '}'
-                if (!/.+\{.+\}/.test(alias)) {
-                  alias = alias.substr(0, alias.length - 2)
-                }
-                const legend = {
-                  name: chartData.name,
-                  alias: alias,
-                  // showText:this.formatLegend(chartData.name),
-                  isGray: false
-                }
-                if (promIndex >= this.batchDeleteObjs.length) {
-                  legend.name = 'Previous ' + legend.name
-                  chartData.name = legend.name
-                  legend.alias = 'Previous ' + legend.alias
-                }
-                this.legend.push(legend)
-                chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
-                  return [dpsItem[0] * 1000, Number(dpsItem[1])]
-                })
-                this.chartDatas.push(chartData)
-              }
-            } else {
-              this.$message.error(response.data.error)
-              console.error(response.data)
-            }
-          }
-        })
-
-        if (this.$refs.pickTime.$refs.multipleTime && this.$refs.pickTime.$refs.multipleTime.searchTime.length && res.length > this.batchDeleteObjs.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)
-            this.$refs.endpointChart.setLegend(this.legend)
-            this.$refs.endpointChart.modifyOption('tooltip', 'backgroundColor', 'rgba(221,228,237,1)')
-            this.$refs.endpointChart.modifyOption('tooltip', 'textStyle', { color: '#000' })
-            this.$refs.endpointChart.modifyOption('grid', 'top', 30)
-            this.$refs.endpointChart.modifyOption('grid', 'left', 0)
-            this.$refs.endpointChart.modifyOption('grid', 'right', 30)
-            this.$refs.endpointChart.modifyOption('grid', 'bottom', 8)
-            this.$refs.endpointChart.modifyOption('grid', 'containLabel', true)
-            this.$refs.endpointChart.setSeries(this.chartDatas)
-            this.$refs.endpointChart.endLoading()
-          }
-          setTimeout(() => {
-            // this.$refs.endpointChart.resize()
-          }, 100)
-        })
       })
     },
-    dialogClose () {
+    saveChart (chart) { // 新增chart
-      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.chartUnit = 5
-      this.graphShow = false
-    },
-    saveChart () { // 新增chart
       this.getPanelData().then(() => {
-        const chart = {
+        chart.id = ''
-          title: '',
+        chart.name = ''
-          type: 'line',
+        chart.panelName = ''
-          span: 12,
-          height: '400',
-          unit: this.chartUnit,
-          param: {
-            url: '',
-            threshold: ''
-          },
-          elements: [],
-          panel: '',
-          sync: 0
-        }
-        for (let i = 0; i < this.batchDeleteObjs.length; i++) {
-          if (this.batchDeleteObjs[i] && this.batchDeleteObjs[i].element !== '') {
-            chart.elements.push({ chartId: '', expression: this.batchDeleteObjs[i].element, type: 'expert' })
-          }
-        }
         this.chart = chart
-        this.rightBox.show = true
+        this.graphShow = false
+        this.$store.dispatch('dispatchEditChart', {
+          chart: this.chart,
+          type: 'add'
+        })
       })
     },
     createSuccess (type, response, param, panel) {
@@ -555,9 +452,24 @@ export default {
           this.metaDataList = res.data[data.metricTip.metric]
         }
       })
-    }
+    },
+    showFullscreen (show, chartInfo) {
+      this.chartInfo = chartInfo
+      this.graphShow = show
+    },
+    closeChartBox (refresh) {
+      // this.rightBox.chart.show = false
+      this.chart = {}
+      this.$store.dispatch('clearPanel')
+      /* if (refresh) {
+         this.getData(this.filter)
+      } */
+    },
   },
   computed: {
+    chartRightBoxShow () {
+      return this.$store.getters.getShowRightBox
+    },
   },
   created () {
     // this.getPanelData()

nezha-fronted/src/components/page/alert/alertMessage.vue

@@ -556,7 +556,6 @@ export default {
       }
       this.$get('/alert/rule/' + row.alertRule.id).then(res => {
         this.currentMsg = { ...row, alertRule: { ...res.data } }
-        console.log(this.currentMsg )
         this.$nextTick(() => {
           this.searchTimeDialog = [bus.computeTimezoneTime(new Date().getTime() - 1 * 60 * 60 * 1000), bus.computeTimezoneTime(new Date().getTime())]
           this.queryDate()
@@ -575,11 +574,13 @@ export default {
         const chartInfo = lodash.cloneDeep(lineData)
         chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, ''))
         chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))
+        chartInfo.unit = this.currentMsg.unit
         this.showFullscreen(true, chartInfo)
       } else if (this.currentMsg.alertRule.type === 2) {
         const chartInfo = lodash.cloneDeep(logData)
         chartInfo.elements[0].expression = encodeURIComponent(this.currentMsg.alertRule.expr.replace(/\"/g, '\'').replace(/\r|\n+/g, ''))
         chartInfo.elements[0].filter = encodeURIComponent(decodeURIComponent(this.promQueryParamLabels(this.currentMsg.labels)))
+        chartInfo.unit = this.currentMsg.unit
         this.showFullscreen(true, chartInfo)
       }
     },