From 2abbbf92b476522c2be410fbd3d6970213f38022 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Wed, 26 May 2021 13:58:39 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-672=20=EF=BC=9A=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E6=89=80=E6=9C=89chart=E7=9A=84=E9=A2=84=E8=A7=88=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=20=E9=AB=98=E5=BA=A6=E6=98=BE=E7=A4=BA=E4=B8=8D?=
 =?UTF-8?q?=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/charts/chart-alert-list.vue    | 14 ++--
 .../src/components/charts/chartPreview.vue    | 83 ++++++++++---------
 .../components/common/bottomBox/bottomBox.vue |  6 +-
 .../src/components/common/nezhaColor.vue      |  9 +-
 4 files changed, 65 insertions(+), 47 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index ad6c1578d..e0baab2cb 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -5,7 +5,7 @@
   <div class="nz-chart-resize" :id="id">
     <div class="resize-shadow" ref="resizeShadow"></div>
     <div class="resize-box resize-box-alert" ref="resizeBox">
-      <div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+      <div class="chart-alert-info table-container" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
         <loading :ref="'localLoading'+chartIndex"></loading>
         <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow, 'drag-disabled': !data.draggable}" :id="'chartTitle'+chartIndex" v-show="!isPreview">
           <el-popover
@@ -23,9 +23,9 @@
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title">
-              <span class="chart-title-text">{{chartData.name}}</span>
+              <span class="chart-title-text">{{chartData?chartData.name:'-'}}</span>
               <span class="chart-title-icon"  :class="{'visible':caretShow,'hidden':!caretShow}">
-                <span v-if="chartData.remark">
+                <span v-if="chartData&&chartData.remark">
                   <el-tooltip :content="chartData.remark" placement="top" effect="light">
                      <i class="nz-icon nz-icon-info-normal"></i>
                   </el-tooltip>
@@ -46,12 +46,12 @@
                 <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
               <li  v-has="'panel_chart_add'" class="el-dropdown-menu__item" @click="duplicate">
                 <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
-              <li  v-has="'panel_chart_edit'"  v-if="from !== 'chartTemp'&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
+              <li  v-has="'panel_chart_edit'"  v-if="from !== 'chartTemp'&&chartData&&chartData.pid" class="el-dropdown-menu__item" @click="$emit('sync')">
                 <i class="nz-icon nz-icon-sync" style="font-size: 16px;"></i>{{$t('overall.syncChart')}}</li>
             </ul>
           </el-dropdown>
         </div>
-        <div class="mt-10 table-container" v-cloak  v-show="firstShow || isPreview">
+        <div class="mt-10 table-container" v-cloak  v-show="firstShow || isPreview" :style="isPreview?'height:100%':''">
           <alertMessageTable
             class="nz-table2"
             :id="'tableContainer'+chartIndex"
@@ -791,8 +791,8 @@ export default {
     },
     resize (chartItem) {
       const deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight
-      const container = document.querySelector('#chartTableDiv' + this.chartIndex + ' .table-container')
-      container.style.height = `calc(100% - ${deHeight}px)`
+      // const container = document.querySelector('#chartTableDiv' + this.chartIndex + ' .table-container')
+      // container.style.height = `calc(100% - ${deHeight}px)`
       this.tableHeight = 'calc(100% - 34px)'
     },
     showLoad (chartItem) {
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index f5ef727cc..6611790c9 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -19,6 +19,11 @@
       overflow: hidden;
       white-space: nowrap;
     }
+  /deep/ .el-dialog__body{
+    height: 70vh;
+    display: block;
+    min-height: 300px;
+  }
 </style>
 <style>
   .char-url-preview html{
@@ -75,9 +80,9 @@
       </div>
 
       <template v-if="chart.type==='line' || chart.type==='bar'||chart.type==='stackArea' || chart.type == 'endpointInfo' ||chart.type =='pie'">
-        <div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart">
-          <div class="line-area" ref="screenShowArea"  id="screenShowArea" style="margin-top:0px"></div>
-          <div class="chart-no-data" v-show="noData">No Data</div>
+        <div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="height-100">
+          <div class="line-area" ref="screenShowArea"  id="screenShowArea" style="margin-top:0px;height: calc(70vh - 50px);min-height: 300px;"></div>
+          <div class="chart-no-data height-100" v-show="noData">No Data</div>
 
           <template v-if="!hasLegendOptions">
             <div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"  class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
@@ -118,7 +123,7 @@
 
       <template v-if="chart.type==='singleStat'">
         <div id="chartSingleStatPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"
-         style=" height:100%;display:table;text-align:center;width:calc(100% - 16px);color:#000;" >
+         style=" height:100%;display:table;text-align:center;width:calc(100% - 16px);color:#000;"  class="height-100">
           <div class="line-area" ref="singleStatArea"  id="singleStatArea"  :style="{color:mapping&&mapping.color?mapping.color.text:'#000',background:mapping&&mapping.color?mapping.color.bac:'#fff'}" style="margin-top:0px; text-align:center;
       vertical-align: middle;
       display:table-cell;
@@ -130,7 +135,7 @@
       </template>
 
       <template  v-if="chart.type==='table'">
-        <div id="chartTablePreview" :class="{'visible':tableShow,'hidden':!tableShow}" >
+        <div id="chartTablePreview" :class="{'visible':tableShow,'hidden':!tableShow}"  class="height-100">
         <el-table :data="seriesItemScreen" border class="nz-table" height="95%" id="tableContainer" style="margin-top: 10px;"  tooltip-effect="light">
           <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
           <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
@@ -153,24 +158,24 @@
       </template>
 
       <template  v-if="chart.type==='url'">
-        <div id="chartUrlPreview" :class="{'visible':urlShow,'hidden':!urlShow}" class="char-url-preview">
+        <div id="chartUrlPreview" :class="{'visible':urlShow,'hidden':!urlShow}" class="char-url-preview height-100" >
           <iframe id="chartUrlFrame" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
                   style="z-index:5000;"
           ></iframe>
         </div>
       </template>
 
-      <chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart"></chart-alert-list>
+      <chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview" :chart-info="chart" :chart-data="chart"  class="height-100"></chart-alert-list>
 
       <template v-if="chart.type==='text'">
-          <div  id="chartTextPreview" class="chart-text-preview">
+          <div  id="chartTextPreview" class="chart-text-preview height-100">
             <div style="height: 100%; overflow: auto;">
               <div style="height: 100%;" v-html="chart.param.text" ></div>
             </div>
           </div>
       </template>
 
-      <loading  ref="loadingPreview"></loading>
+      <loading  ref="loadingPreview"  class="height-100"></loading>
     </el-dialog>
 </template>
 <script>
@@ -182,7 +187,7 @@ import chartDataFormat from './chartDataFormat'
 import { randomcolor } from '../common/js/radomcolor/randomcolor.js'
 import chartAlertList from './chart-alert-list'
 import chartConfig from '../page/dashboard/overview/chartConfig'
-import moment from "moment-timezone";
+import moment from 'moment-timezone'
 export default {
   name: 'chartPreview',
   components: {
@@ -243,7 +248,7 @@ export default {
       urlShow: true,
       searchTime: bus.getTimezontDateRange(),
       // oldSearchTime:[],
-      minHeight: 200,
+      minHeight: 500,
       chartSpaceHeight: 5, // top-border: 1,bottom-border: 1,padding-bottome:3
       titleHeight: 58,
       legendHeight: 80,
@@ -283,29 +288,29 @@ export default {
       }
 
       // 设置高度 chart-table
-      this.$nextTick(() => {
-        // const chartBox = document.getElementById('chartPreviewDailog');
-        // let height = this.chart.height;
-        let height = Math.round(this.chart.height / 10) * 10
-        if (height < this.minHeight) {
-          height = this.minHeight
-        }
-
-        const dailogBox = document.querySelector('#chartPreviewDailog  .el-dialog')
-        dailogBox.style.height = `${height}px`
-
-        // const addChartBox = document.querySelector('.right-box-add-chart')
-        // addChartBox.style.cssText =  'z-index:1500 !important';
-        if (chartType === 'table') {
-          const chartDiv = document.getElementById(chartContainerId)
-          chartDiv.style.height = `${height - this.chartSpaceHeight - this.titleHeight - 25}px`
-          const tableBox = document.getElementById('tableContainer')
-          tableBox.style.height = `${height - this.titleHeight - this.pageHeight - 25}px`// -75-32+25
-        } else {
-          const chartDiv = document.getElementById(chartContainerId)
-          chartDiv.style.height = `${height - this.chartSpaceHeight - this.titleHeight - 15}px`
-        }
-      })
+      // this.$nextTick(() => {
+      //   // const chartBox = document.getElementById('chartPreviewDailog');
+      //   // let height = this.chart.height;
+      //   let height = Math.round(this.chart.height / 10) * 10
+      //   if (height < this.minHeight) {
+      //     height = this.minHeight
+      //   }
+      //
+      //   const dailogBox = document.querySelector('#chartPreviewDailog  .el-dialog')
+      //   dailogBox.style.height = `${height}px`
+      //
+      //   // const addChartBox = document.querySelector('.right-box-add-chart')
+      //   // addChartBox.style.cssText =  'z-index:1500 !important';
+      //   if (chartType === 'table') {
+      //     const chartDiv = document.getElementById(chartContainerId)
+      //     chartDiv.style.height = `${height - this.chartSpaceHeight - this.titleHeight - 25}px`
+      //     const tableBox = document.getElementById('tableContainer')
+      //     tableBox.style.height = `${height - this.titleHeight - this.pageHeight - 25}px`// -75-32+25
+      //   } else {
+      //     const chartDiv = document.getElementById(chartContainerId)
+      //     chartDiv.style.height = `${height - this.chartSpaceHeight - this.titleHeight - 15}px`
+      //   }
+      // })
 
       this.screenModal = true
     },
@@ -779,6 +784,7 @@ export default {
     },
     // chartSite用于区分是全屏显示还是局部显示
     initChart (chartInfo, dataArg, ele, legend) {
+      console.log(123123132)
       const self = this
       let minTime = null
       let maxTime = null
@@ -1023,7 +1029,7 @@ export default {
       }
       this.$nextTick(() => {
         const divHeight = this.$refs.screenLegendArea.offsetHeight
-        this.echartModalStore.resize({ height: (chartInfo.height - this.chartSpaceHeight - divHeight - this.titleHeight) })
+        this.echartModalStore.resize()
         this.echartModalStore.clear()
         if (dataArg.length < 1) {
           this.echartModalStore.setOption(chartConfig.getOption('noData'))
@@ -1094,6 +1100,9 @@ export default {
           })
         }
       })
+      setTimeout(() => {
+        this.echartModalStore.resize()
+      }, 100)
     },
     initStaticsBar: function (chartInfo, dataArg, legend) {
       const self = this
@@ -1236,7 +1245,7 @@ export default {
       }
       this.$nextTick(() => {
         const divHeight = this.$refs.screenLegendArea.offsetHeight
-        this.echartModalStore.resize({ height: (chartInfo.height - this.chartSpaceHeight - divHeight - this.titleHeight) })
+        this.echartModalStore.resize()
         this.echartModalStore.clear()
         if (dataArg[0].data.length < 1) {
           this.echartModalStore.setOption(chartConfig.getOption('noData'))
@@ -1301,7 +1310,7 @@ export default {
       }
       this.$nextTick(() => {
         const divHeight = this.$refs.screenLegendArea.offsetHeight
-        this.echartModalStore.resize({ height: (chartInfo.height - this.chartSpaceHeight - divHeight - this.titleHeight) })
+        this.echartModalStore.resize()
         this.echartModalStore.clear()
         if (dataArg[0].data.length < 1) {
           this.echartModalStore.setOption(chartConfig.getOption('noData'))
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 9438049ab..dd002d300 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -302,8 +302,10 @@ export default {
 .bottom-panel {
   padding-top: 15px;
   background-color: white;
-  padding-bottom: 50px;
-  height: calc(100% - 50px);
+  /*padding-bottom: 50px;*/
+  /*height: calc(100% - 50px);*/
+  padding-bottom: 10px;
+  height: calc(100% - 30px);
 }
 .chart-temp{
   height: calc(100% - 20px);
diff --git a/nezha-fronted/src/components/common/nezhaColor.vue b/nezha-fronted/src/components/common/nezhaColor.vue
index e2e14d5f9..1ba9472c6 100644
--- a/nezha-fronted/src/components/common/nezhaColor.vue
+++ b/nezha-fronted/src/components/common/nezhaColor.vue
@@ -58,7 +58,14 @@ export default {
     presetColors: {
       type: Array,
       default () {
-        return []
+        return [
+          '#19730E', '#37872D', '#73BF69',
+          '#CC9D00', '#E0B400', '#FADE2A',
+          '#AD0317', '#C4162A', '#F2495C',
+          '#1250B0', '#1F60C4', '#5794F2',
+          '#E55400', '#FA6400', '#FF9830',
+          '#7C2EA3', '#8F3BB8', '#B877D9'
+        ]
       }
     }
   },