fix:修改BUG

dashboard模块
1.panel列表页面表格和曲线及对应全屏的loading的统一及加载时样式调整
2.全屏查询条件及数据更新时，不再与列表的数据和查询时间进行统一
说明：预览模块的预览及全屏的loading及数据同步等还需要调整

nezha-fronted/src/components/charts/chart-list.vue

@@ -23,6 +23,7 @@
       @on-remove-chart-block="removeChart"
       @on-edit-chart-block="editData"
       :panel-id="filter.panelId"
+      :chart-index="index"
       :editChartId="'editChartId' + item.id"></line-chart-block>
 
       <chart-table v-if="item.type === 'table'" ref="editChart" :key="'inner' + item.id"
@@ -31,6 +32,7 @@
       @on-remove-chart-block="removeChart" 
       @on-edit-chart-block="editData"
       :panel-id="filter.panelId"
+      :chart-index="index"
       :editChartId="'editChartId' + item.id"></chart-table>
 
     </div>
@@ -163,11 +165,13 @@ export default {
           }else {
             this.dataList = this.dataTotalList;
           }
+          this.$nextTick(() => {
             if (this.dataList.length > 0 && this.$refs.editChart) {
-            this.$refs.editChart.forEach((item) => {
+              this.$refs.editChart.forEach((item, i) => {
-              item.showLoad();//之后要实现
+                item.showLoad(this.dataList[i]);//之后要实现
               });
             }
+          });
           this.dataSetFirst(this.dataList);
         }
       });
@@ -211,10 +215,10 @@ export default {
             startTime = this.filter.start_time;
             endTime = this.filter.end_time;
           }
-        } else if(filterType==='searchTime'){
+        } else if(filterType==='showFullScreen'){//全屏时间查询
           startTime = this.filter.start_time;
           endTime = this.filter.end_time;
-          this.$parent.refreshTime(startTime,endTime);
+          //this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
         }else {
            startTime = this.filter.start_time;
            endTime = this.filter.end_time;
@@ -324,25 +328,46 @@ export default {
                 }
               });
               if (chartItem.type === 'table') {//表格
+                if(filterType==='showFullScreen'){//table的全屏查询
+                  this.$refs.editChart[index].setData(chartItem, tableData,
+                    this.filter.panelId, this.filter,filterType);
+                }else {
                   this.$refs.editChart[index].setData(chartItem, tableData,
                     this.filter.panelId, this.filter);
+                }
+
               } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
                 if (series.length && chartItem.type === 4) {//曲线汇总
                   //series.push(sumData);//后续需要
                 }
+                if(filterType==='showFullScreen'){//table的全屏查询
+                  this.$refs.editChart[index].setData(chartItem, series,
+                    this.filter.panelId, this.filter,legend,filterType);
+                }else {
                   this.$refs.editChart[index].setData(chartItem, series,
                     this.filter.panelId, this.filter,legend);
                 }
+              }
             } else {
               const type = chartItem.type;
               if (type === 'table') {
+                if(filterType==='showFullScreen'){//table的全屏查询
+                  this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
+                    this.filter,filterType);
+                }else {
                   this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
                     this.filter);
+                }
               } else if (type === 'line' || type === 'bar' || chartItem.type === 4) {
+                if(filterType==='showFullScreen'){//table的全屏查询
+                  this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
+                    this.filter,filterType);
+                }else {
                   this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
                     this.filter);
                 }
               }
+            }
           }).catch((error) => {
             if (error) {
               this.$message.error({
@@ -397,7 +422,7 @@ export default {
       }
       this.dataList.forEach((item, index) => {
         if (item.id === chartId) {
-          this.getChartData(item, index, 'searchTime');
+          this.getChartData(item, index, 'showFullScreen');
         }
       });
     }

nezha-fronted/src/components/charts/chart-table.scss

@@ -7,6 +7,9 @@
 .clearfix{
   margin-bottom: 20px;
 }
+.loading-font{
+  color:#232f3e !important;
+}
 .dialog-tool {
   margin-right: 40px;
 }

nezha-fronted/src/components/charts/chart-table.vue

@@ -2,40 +2,27 @@
 @import './chart-table.scss';
 </style>
 <template>
-<div class="chart-table" id="chartTableDiv">
+    <div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow">
+        <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
+          <div class="el-loading-spinner">
+            <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
+            <p class="el-loading-text loading-font">loading</p>
+          </div>
+        </div>
         <div class="clearfix">
-        <div class="table-title">
+            <div class="table-title" v-show="firstShow">
                 {{data.title}}
             </div>
-        <div class="nz-btn-group nz-btn-group-light edit" v-if="firstShow">
+            <div class="nz-btn-group nz-btn-group-light edit" v-show="firstShow">
               <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
               @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="nz-icon nz-icon-edit"></i></button><button
               @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-delete"></i></button><button
               @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
             </div>
-        <!--<div class="float-right">
+
-            <div class="edit">
-                <div class="list-icon">
-                    <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon">
-                        <i class="el-icon-refresh-right"></i>
-                    </span>
-                    <span @click="editChart" :title="$t('dashboard.edit')" class="set-icon">
-                        <i class="el-icon-edit-outline"></i>
-                    </span>
-                    <span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon">
-                        <i class="el-icon-delete"></i>
-                    </span>
-                    <span @click="showAllScreen" :title="$t('dashboard.screen')" class="set-icon">
-                        <i class="el-icon-full-screen"></i>
-                    </span>
         </div>
-            </div>
+        <div class="mt-10" v-cloak  v-show="firstShow">
-        </div>-->
+            <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border  tooltip-effect="light" v-cloak>
-    </div>
-    <div class="mt-10" v-cloak>
-        <!--
-      <el-table  size="small"   :loading="tableLoading">-->
-        <el-table class="nz-table" id="tableContainer" ref="tableContainer" :data="seriesItem" :height="350" border v-loading="tableLoading" tooltip-effect="light" v-cloak>
                 <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>
                 <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
@@ -43,7 +30,7 @@
             </el-table>
         </div>
         <!--全屏-->
-      <el-dialog class="nz-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%"  @close="screenModal = false" >
+          <el-dialog class="nz-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenModal = false;" >
             <div slot="title">
               <span class="nz-dialog-title">{{data.title}}</span>
               <div class="float-right panel-calendar dialog-tool">
@@ -52,18 +39,26 @@
                 <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
               </div>
             </div>
-            <el-table style="padding-top: 30px;" class="nz-table" :data="seriesItem" :height="350" border v-loading="tableLoading" tooltip-effect="light">
+                <el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border  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>
                     <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
                     <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
+
                 </el-table>
+                <div v-show="showLoadingScreen" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
+                  <div class="el-loading-spinner">
+                    <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
+                    <p class="el-loading-text loading-font">loading</p>
+                  </div>
+                </div>
         </el-dialog>
     </div>
 </template>
 
 <script>
 import bus from '../../libs/bus';
+import {Loading} from 'element-ui';
 
 export default {
     name: 'chartTable',
@@ -74,13 +69,23 @@ export default {
             type: Number,
             default: 0,
         },
+        editChartId: {
+          type: String,
+          default: 'editChartId',
+        },
+        chartIndex:{
+          type: Number,
+          default: 0,
+        }
     },
     data() {
         return {
             data: {}, // 该图表信息,chartItem
             seriesItem: [], // 保存信息
+            seriesItemScreen:[],//全屏数据
             images: '',
-            toolbox: false,
+            //toolbox: false,
+            loading:Object,
             items: {
                 metric_name: [], // 每条数据列名称
                 xAxis: [],
@@ -88,6 +93,9 @@ export default {
             },
             panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
             firstLoad: false, // 是否第一次加载
+            showLoading:true,
+            showLoadingScreen:false,
+            //showTable:true,
             chartType: 'table', // 图表类型
             screenModal: false,
             // 查询数据使用
@@ -97,7 +105,8 @@ export default {
             },
             stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
             firstShow: false, // 默认不显示操作按钮,
-            tableLoading: false,
+            divFirstShow:false,
+            //tableLoading: false,
             columns: [{
                 title: 'metric',
                 key: 'metric',
@@ -120,7 +129,7 @@ export default {
                 sortable: true,
                 render: (h, params) => h('span', this.getNumStr(params.row.value)),
             }],
-            searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
+            searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
             oldSearchTime: [],
             pickerOptions: {
                 shortcuts: [{
@@ -207,18 +216,59 @@ export default {
     computed: {},
     watch: {},
     methods: {
+        startLoading(area){
+          if(area==='screen'){
+            this.showLoadingScreen = true;
+          }else {
+            this.showLoading = true;
+          }
+/*
+          //this.loading = this.$loading({
+          this.loading = Loading.service({
+            lock:true,
+            text:'loading',
+            background:'rgba(0,0,0,0)',
+            customClass:'loading-font',
+            //fullscreen: false,
+            target:document.getElementById('chartTableDiv')
+          })
+*/
+        },
+        endLoading(area){
+          if(area==='screen'){
+            this.showLoadingScreen = false;
+          }else {
+            this.showLoading = false;
+          }
+        },
         clearData(){
         },
-        showLoad() {
+        showLoad(chartItem) {
-            this.tableLoading = true;
+          //设置高度 chart-table
+          this.$nextTick(() => {
+            const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
+            let height = chartItem.height;
+            if(height<200){
+              height = 200;
+            }
+            chartBox.style.height = `${height-25}px`;
+            const tableBox = document.getElementById('tableContainer'+this.chartIndex);
+            tableBox.style.height = `${height-75}px`;
+          });
+          this.startLoading();
+          this.divFirstShow = true;
+          //this.tableLoading = true;
         },
         // 展示图表编辑区
+      /*
         showTool() {
             this.toolbox = !this.toolbox;
         },
-        // 重新请求数据 刷新操作
+        */
+        // 重新请求数据 刷新操作-local
         refreshChart() {
-            this.tableLoading = true;
+            this.startLoading();
+            this.firstShow = false;
             this.$emit('on-refresh-data', this.data.id);
         },
         // 编辑图表
@@ -229,39 +279,77 @@ export default {
         removeChart() {
             this.$emit('on-remove-chart-block', this.data.id);
         },
+        //全屏时间条件查询
         dateChange(time) {
-            this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+            //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');
-            this.tableLoading = true;
+            //this.showTable = false;
+            this.seriesItemScreen = [];
+            for(let i=0;i<8;i++){
+              this.seriesItemScreen.push({//表格数据
+                label: '',//label
+                metric: '',//metric列
+                time: '',//采集时间
+                value: '',//数值
+              });
+            }
+            this.startLoading('screen');
+            //this.tableLoading = true;
+            //this.firstShow = false;
             this.$emit('on-search-data', this.data.id, this.searchTime);
         },
         // 全屏查看
         showAllScreen() {
             // 初始化同步时间
-            this.searchTime = this.oldSearchTime;
+            //this.searchTime = this.oldSearchTime;
+          //alert(JSON.stringify(this.oldSearchTime));
+            this.searchTime = [];
+            this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
+            this.searchTime[1] = this.oldSearchTime[1];
+            this.seriesItemScreen = this.seriesItem;
             this.screenModal = true;
+            //this.startLoading('screen');
+            //this.endLoading('screen');
         },
         // 设置数据, filter区分
-        setData(chartItem, seriesItem, panelId, filter) {
+        setData(chartItem, seriesItem, panelId, filter,area) {
-            this.firstShow = true; // 展示操作按键
+            if(area==='showFullScreen'){//全屏按时间查询
-            this.tableLoading = false;
+              this.data = chartItem;
-            if (filter) { // 保存数据,用于同步时间
+              this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-                this.stableFilter = filter;
+              this.searchTime[1] = filter.end_time;
+              this.seriesItemScreen = seriesItem;
+              this.endLoading('screen');
+            }else{
+              //设置高度 chart-table
+              this.$nextTick(() => {
+                const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
+                let height = chartItem.height;
+                if(height<200){
+                  height = 200;
                 }
+                chartBox.style.height = `${height-25}px`;
+                const tableBox = document.getElementById('tableContainer'+this.chartIndex);
+                tableBox.style.height = `${height-75}px`;
+              });
+              this.divFirstShow = true;
+
+              this.firstShow = true; // 展示操作按键
+
               this.panelIdInner = panelId;
               this.data = chartItem;
               this.seriesItem = seriesItem;
-            this.searchTime[0] = filter.start_time;
+              this.seriesItemScreen = seriesItem;
+              if (filter) { // 保存数据,用于同步时间
+                this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
                 this.searchTime[1] = filter.end_time;
-            this.oldSearchTime = this.searchTime;
+                this.oldSearchTime[0] = this.searchTime[0];
-            //设置高度 chart-table
+                this.oldSearchTime[1] = this.searchTime[1];
-            this.$nextTick(() => {
+              }
-              const chartBox = document.getElementById('chartTableDiv');
+
-              let height = chartItem.height;
+              this.endLoading();
-              chartBox.style.height = `${height-25}px`;
+              //this.showTable = true;
-              const tableBox = document.getElementById('tableContainer');
+              //this.tableLoading = false;
-              tableBox.style.height = `${height-75}px`;
+            }
-            });
         },
         // 获取格式
         getNumStr(num) {
@@ -270,11 +358,11 @@ export default {
                     const kbNum = num / 1000;
                     if (kbNum >= 1000) {
                         const mbNum = kbNum / 1000;
-                        if (mbNum > 1000) {
+                        if (mbNum >= 1000) {
                             const gbNum = mbNum / 1000;
-                            if (gbNum > 1000) {
+                            if (gbNum >= 1000) {
                                 const tbNum = gbNum / 1000;
-                                if (tbNum > 1000) {
+                                if (tbNum >= 1000) {
                                     const pbNum = tbNum / 1000;
                                     return `${pbNum.toFixed(2)}PB`;
                                 }

nezha-fronted/src/components/charts/line-chart-block.scss

@@ -95,6 +95,9 @@
   margin-right: 40px;
 }
 .line-chart-block-modal {
+  .el-dialog{
+    height:480px;
+  }
   .line-area {
     box-sizing: border-box;
     background: #FFF;

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -2,9 +2,10 @@
   @import './line-chart-block.scss';
 </style>
 <template>
-  <div class="line-chart-block" id="lineChartDiv">
+  <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow">
-
+    <loading  :ref="'localLoading'+chartIndex"></loading>
     <!--<div class="edit">
+
       <div class="list-icon" v-if="firstShow">
         <span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
           <i class="el-icon-refresh-right"></i>
@@ -20,16 +21,16 @@
         </span>
       </div>
     </div>-->
-    <div class="nz-btn-group nz-btn-group-light edit" v-if="firstShow">
+    <div class="nz-btn-group nz-btn-group-light edit" v-show="firstShow">
       <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
       @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button><button
       @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button><button
       @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
     </div>
 
-    <div class="line-area" ref="lineChartArea"  id="lineChartArea" ></div>
+    <div class="line-area" ref="lineChartArea"  id="lineChartArea" v-show="firstShow"></div>
 
-    <div class="legend-container"   id="legendArea" ref="legendArea">
+    <div class="legend-container"   id="legendArea" ref="legendArea" v-show="firstShow">
       <div v-for="(item, index) in legendList" :title="item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
         <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.name}}
         <br/><!--bgColorList[index]-->
@@ -61,12 +62,13 @@
         </div>
       </div>
       <div class="line-area " ref="screenShowArea"  id="screenShowArea" ></div>
-      <div class="legend-container"   id="screenLegendArea" ref="screenLegendArea">
+      <div class="legend-container"  id="screenLegendArea" ref="screenLegendArea"  v-show="showLegend">
         <div v-for="(item, index) in screenLegendList" :title="item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
           <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.name}}
           <br/><!--bgColorList[index]-->
         </div>
       </div>
+      <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
     </el-dialog>
     <!--</Modal>-->
   </div>
@@ -75,11 +77,12 @@
   import axios from 'axios';
   import echarts from 'echarts';
   import bus from '../../libs/bus';
+  import loading from "../common/loading";
 
   export default {
     name: 'lineChartBlock',
     components: {
-      //calendarSelect,
+      'loading': loading,
     },
     props: {
       editChartId: {
@@ -91,6 +94,10 @@
         type: Number,
         default: 0,
       },
+      chartIndex:{
+        type: Number,
+        default: 0,
+      },
       // 展示设置内容
       showSetting: {
         type: Boolean,
@@ -101,6 +108,7 @@
       return {
         data: {}, // 该图表信息,chartItem
         seriesItem: [], // 保存信息
+        seriesItemScreen:[],
         images: '',
         toolbox: false,
         items: {
@@ -111,6 +119,7 @@
         panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
         chartName: '',
         firstLoad: false, // 是否第一次加载
+        divFirstShow:false,
         highchartStore: null, // 保存图表数据
         echartStore:null,// 保存图表数据
         echartModalStore: null, // 全屏查看时数据
@@ -136,6 +145,7 @@
           '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
         ],
         firstShow: false, // 默认不显示操作按钮,
+        showLegend:true,
         searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
         oldSearchTime:[],
         pickerOptions: {
@@ -289,8 +299,6 @@
       },
       // chartSite用于区分是全屏显示还是局部显示
       initChart(chartInfo, dataArg, ele, chartSite,legend) {
-
-        this.firstShow = true; // 展示操作按键
         const self = this;
         this.chartType = ''; // 图表类型
         if ( chartInfo.type === 4) {//line,bar
@@ -644,8 +652,8 @@
           this.echartStore.clear();
           option.title = title;
           this.echartStore.setOption(option);//创建图表
-          this.echartStore.hideLoading();
+          //this.echartStore.hideLoading();
-          //this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
+          this.$refs['localLoading'+this.chartIndex].endLoading();
           if(legend && legend.length>0){
             this.legendList = [];
             legend.forEach((item, i) => {
@@ -665,6 +673,7 @@
               this.echartStore.resize({height:(chartInfo.height-divHeight-25)});
             }
           });
+          this.firstShow = true; // 展示操作按键
         } else if (chartSite === 'screen') { // 全屏显示
           /*
           option.series = dataArg.map((item) => {// params.series = dataArg.map((item) => {
@@ -715,7 +724,9 @@
           this.echartModalStore.clear();
           option.title = {};
           this.echartModalStore.setOption(option);//显示全屏界面
-          this.echartModalStore.hideLoading();
+          //this.echartModalStore.hideLoading();
+          this.showLegend = true;
+          this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
           //this.echartModalStore.resize({height:chartInfo.height});
           if(legend && legend.length>0){
             this.screenLegendList = [];
@@ -729,12 +740,16 @@
             });
           }
           this.$nextTick(() => {
+            let divHeight = this.$refs.screenLegendArea.offsetHeight;
+            this.echartModalStore.resize({height:(400-divHeight)});
+            /*
             let divHeight = this.$refs.screenLegendArea.offsetHeight;
             if(!chartInfo.height){
               this.echartModalStore.resize({height:(400-divHeight)});
             }else {
               this.echartModalStore.resize({height:(chartInfo.height-divHeight-25)});
             }
+            */
           });
         }
       },
@@ -787,23 +802,47 @@
         //return rlt;
       },
       // 设置数据, filter区分
-      setData(chartItem, seriesItem, panelId, filter,legend) {
+      setData(chartItem, seriesItem, panelId, filter,legend,area) {
-        if (filter) { // 保存数据,用于同步时间
+        if(area==='showFullScreen'){//全屏按时间查询
-          this.stableFilter = filter;
+          /*
-        }
           this.legend = legend;
+          this.data = chartItem;
+          this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
+          this.searchTime[1] = filter.end_time;
+          this.seriesItemScreen = seriesItem;
+          //this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
+          this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'screen',legend);
+          */
+        }else{
+          this.legend = legend;
+          //设置高度 chart-table
+          this.$nextTick(() => {
+            const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
+            let height = chartItem.height;
+            if(height<200){
+              height = 200;
+            }
+            chartBox.style.height = `${height-25}px`;
+          });
+          this.$refs['localLoading'+this.chartIndex].startLoading();
+          this.divFirstShow = true;
+          this.firstShow = true; // 展示操作按键
           this.panelIdInner = panelId;
           this.data = chartItem;
           this.seriesItem = seriesItem;
+          this.seriesItemScreen = seriesItem;
+
+          if (filter) { // 保存数据,用于同步时间
+            this.stableFilter = filter;
             this.searchTime[0] = filter.start_time;
             this.searchTime[1] = filter.end_time;
-        this.oldSearchTime = this.searchTime;
+            this.oldSearchTime[0] = this.searchTime[0];
-        this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
+            this.oldSearchTime[1] = this.searchTime[1];
-        /*
+          }
-        if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
+          //this.$refs['localLoading'+this.chartIndex].endLoading();
           this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
         }
-        */
+
       },
 
       // 删除该图表
@@ -816,7 +855,8 @@
       },
       // 重新请求数据 刷新操作
       refreshChart() {
-        this.echartStore.showLoading();
+        this.$refs['localLoading'+this.chartIndex].startLoading();
+        this.firstShow = false;
         this.$emit('on-refresh-data', this.data.id);
       },
       initDialog(){
@@ -844,11 +884,23 @@
         this.searchTime = this.oldSearchTime;
         this.screenModal = true;
         this.isGreyScreen=[];
+
+        this.seriesItemScreen = this.seriesItem;
+/*
+        this.searchTime = [];
+        this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
+        this.searchTime[1] = this.oldSearchTime[1];
+        this.seriesItemScreen = this.seriesItem;
+        this.screenModal = true;
+        */
         //this.dateChange();
       },
       dateChange(time) {
         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.echartModalStore.clear();
+        this.showLegend = false;
+        this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
         if (this.showSetting) {
           this.getQueryChart('list');
         } else {
@@ -857,9 +909,11 @@
       },
       // 查询数据,修改日期查询全屏数据
       getQueryChart(type) {
+        /*
         if (this.echartModalStore) {
           this.echartModalStore.showLoading();
         }
+        */
         let axiosArr = [];
         this.$nextTick(() => {
           let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
@@ -983,10 +1037,27 @@
           });
         });
       },
-      showLoad() {
+      showLoad(chartItem) {
+        //设置高度
+        this.$nextTick(() => {
+          const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
+          let height = chartItem.height;
+          if(height<200){
+            height = 200;
+          }
+          chartBox.style.height = `${height-25}px`;
+          //const tableBox = document.getElementById('tableContainer');
+         // const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
+          //tableBox.style.height = `${height-75}px`;
+        });
+        this.$refs['localLoading'+this.chartIndex].startLoading();
+        this.divFirstShow = true;
+
+        /*
         if (this.echartStore) {
           this.echartStore.showLoading();
         }
+        */
       },
       // 获取格式
       getNumStr(num) {

nezha-fronted/src/components/common/loading.vue

@@ -0,0 +1,37 @@
+<style scoped lang="scss">
+  .loading-font{
+    color:#232f3e !important;
+  }
+</style>
+<template>
+  <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
+    <div class="el-loading-spinner">
+      <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
+      <p class="el-loading-text loading-font">loading</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "loading",
+  props: {
+
+  },
+  data() {
+    return {
+      showLoading:false,
+    };
+  },
+  methods: {
+    startLoading(){
+      this.showLoading = true;
+    },
+    endLoading(){
+      this.showLoading = false;
+    },
+  }
+};
+</script>
+
+

nezha-fronted/src/components/page/dashboard/chartMetric.vue

@@ -24,7 +24,7 @@
   }
   .symbol-area {
     position: relative;
-    height: 135px;
+    height: 100px;
   }
   .symbol-equal {
     position: absolute;
@@ -48,9 +48,8 @@
     color: #666;
    }
   .li-list-part-label-val-list {
-    height: 170px;
+    height: 176px;
     border: 1px solid #dcdfe6;
-    margin-top: 33px;
     border-radius: 4px;
     padding: 0px 0 10px 15px;
   }
@@ -149,7 +148,6 @@
     <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
 
       <el-col :span="8">
-        <div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
         <div class="li-list-part">
           <el-scrollbar style="height: 100%">
               <div class="li-cursor" v-if="!item.isSelect"

nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue

@@ -47,7 +47,6 @@
   .li-list-part-label-val-list {
     height: 218px;
     border: 1px solid #dcdfe6;
-    margin-top: 39px;
     border-radius: 4px;
     box-sizing:border-box;
     padding: 15px 0 10px 15px;
@@ -84,7 +83,7 @@
   }
   .symbol-area {
     position: relative;
-    height: 166px;
+    height: 111px;
   }
   .symbol-equal {
     position: absolute;
@@ -216,7 +215,6 @@
     <!--create chart组件显示框  -->
     <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
       <el-col :span="9" style="margin-bottom: 20px;">
-        <div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
         <div class="li-list-part">
           <el-scrollbar style="height: 100%">
               <div class="li-cursor" v-if="!item.isSelect"

nezha-fronted/src/components/page/dashboard/metricPreview.scss

@@ -16,7 +16,8 @@
     //width:calc(100% - 0px);
   }
   .chartBox {
-    width: 100%;
+    width: 100% !important;
+    height:400px;
   }
   .chartBoxMul {
     width: 100%;

nezha-fronted/src/components/page/dashboard/metricPreview.vue

@@ -358,7 +358,7 @@ export default {
       // 将获取的数据运用于创建多个图表备用
       this.$refs.metricSet.setSeries(response.data.result,series);
       if (this.chartCount === 'single') {
-        this.setSize(chartItem.span, 0);
+        //this.setSize(chartItem.span, 0);
         const filterParams = Object.assign({}, this.filter);
         filterParams.chartCount = 'single';
         this.$nextTick(() => {