From 551d3288ab1a480b8ed29910ef3b3dc4b1dfa600 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Thu, 23 Dec 2021 17:02:21 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=20=E9=A2=84=E8=A7=88=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/chart/ChartScreenHeader.vue    |  6 ++-
 .../common/rightBox/chart/chartConfig.vue     |  4 +-
 .../common/rightBox/chart/chartRightBox.vue   | 42 ++++++++++++++++++-
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/nezha-fronted/src/components/chart/ChartScreenHeader.vue b/nezha-fronted/src/components/chart/ChartScreenHeader.vue
index f3d1893c1..dff00b288 100644
--- a/nezha-fronted/src/components/chart/ChartScreenHeader.vue
+++ b/nezha-fronted/src/components/chart/ChartScreenHeader.vue
@@ -175,8 +175,10 @@ export default {
   },
   mounted () {
     if (this.$refs.pickTime) {
-      this.$refs.pickTime.$refs.multipleTime.showDropdown = false
-      this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowType)
+      if (this.$refs.pickTime.$refs.multipleTime) {
+        this.$refs.pickTime.$refs.multipleTime.showDropdown = false
+        this.$refs.pickTime.$refs.timePicker.setCustomTime(this.nowType)
+      }
       this.setSearchTime(this.nowType.type, this.nowType.value, this.nowType)
       this.searchTime[0] = bus.timeFormate(this.timeRange[0], 'yyyy-MM-dd hh:mm:ss')
       this.searchTime[1] = bus.timeFormate(this.timeRange[1], 'yyyy-MM-dd hh:mm:ss')
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index 86c279f97..19398549c 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -392,13 +392,13 @@
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.threshold')}}</span>
           <el-switch
-            v-model="chartConfig.param.thresholdShow"
+            v-model="chartConfig.param.enable.thresholds"
             size="small"
             @change="thresholdShowChange"
           ></el-switch>
         </div>
         <transition name="el-zoom-in-top">
-          <el-row v-if="chartConfig.param.thresholdShow">
+          <el-row v-if="chartConfig.param.enable.thresholds">
             <el-form-item
               v-for="(item,index) in chartConfig.param.thresholds"
               :key="index"
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 235f025d6..d78f22625 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -81,13 +81,33 @@
       <button v-if="showPanel.type && showPanel.type == 'model'" id="chart-box-Sync" v-has="'panel_chart_edit'" class="footer__btn">
         <span>{{$t('overall.SyncSave')}}</span>
       </button>
-      <button v-else-if="from!=='chartTemp'" id="chart-box-preview" class="footer__btn">
+      <button v-else-if="from!=='chartTemp'" id="chart-box-preview" class="footer__btn" @click="preview(true)">
         <span>{{$t('overall.preview')}}</span>
       </button>
       <button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
+<!--    预览-->
+    <el-dialog
+      v-if="previewShow"
+      :visible.sync="previewShow"
+      :show-close="false"
+      class="nz-dialog chart-fullscreen"
+      destroy-on-close
+      fullscreen
+      :modal-append-to-body="false"
+    >
+      <panel-chart
+        :ref="'chart-fullscreen-previewShow'"
+        :chart-info="prevChart"
+        :from="from"
+        :filter="{}"
+        :is-fullscreen="true"
+        :time-range="timeRange"
+        @showFullscreen="preview"
+      ></panel-chart>
+    </el-dialog>
   </div>
 </template>
 
@@ -99,6 +119,9 @@ import selectPanel from '@/components/common/popBox/selectPanel'
 import chartConfig from '@/components/common/rightBox/chart/chartConfig'
 import otherChartConfig from '@/components/common/rightBox/chart/otherChartConfig'
 import systemChartConfig from '@/components/common/rightBox/chart/systemChartConfig'
+import panelChart from '@/components/chart/panelChart'
+import lodash from 'lodash'
+
 const rz = {
   methods: {
     rz (e) {
@@ -124,7 +147,8 @@ export default {
     selectPanel,
     chartConfig,
     systemChartConfig,
-    otherChartConfig
+    otherChartConfig,
+    panelChart
   },
   computed: {
     chartLastPosition () {
@@ -134,6 +158,7 @@ export default {
   data () {
     return {
       fromRoute,
+      previewShow: false,
       editChart: {
         name: '',
         remark: ''
@@ -142,6 +167,8 @@ export default {
         id: '',
         name: ''
       },
+      timeRange: [],
+      prevChart: {},
       filterPanel: '',
       groupArr: [],
       panelName: '',
@@ -349,6 +376,17 @@ export default {
         groupId: this.editChart.groupId,
         panelName: this.editChart.panelName
       }
+    },
+    preview (show) {
+      if (show) {
+        this.timeRange = [new Date().setHours(new Date().getHours() - 1), new Date()]
+        this.prevChart = lodash.cloneDeep(this.editChart)
+        this.prevChart.loaded = true
+        this.prevChart.param.showHeader = true
+      }
+      this.$nextTick(() => {
+        this.previewShow = show
+      })
     }
   },
   created () {