Merge remote-tracking branch 'origin/codeCheck' into codeCheck

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

@@ -749,6 +749,10 @@
                                 smooth: 0.2,  //曲线变平滑
                                 showSymbol: false,
                                 data: [],
+                                lineStyle: {
+                                  width: 1,
+                                  opacity: 0.9
+                                },
                                 type: chartInfo.type,
                               },
                               metric_name: '',
@@ -980,6 +984,10 @@
               smooth: 0.2,  //曲线变平滑
               showSymbol: false,
               data: [],
+              lineStyle: {
+                width: 1,
+                opacity: 0.9
+              },
               type: chartInfo.type,
             },
             //visible: true,

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

@@ -42,7 +42,7 @@
         </div>
 
         <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
-
+        <div style="position: absolute;top:50%;left:50%;" v-show="noData">No data</div>
         <div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
           <div v-for="(item, index) in legendList" :title="item.alias?item.alias: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.alias?item.alias:item.name}}
@@ -78,7 +78,7 @@
             </div>
           </div>
           <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
-
+          <div style="position: absolute;top:50%;left:50%;" v-show="noData">No data</div>
           <div class="legend-container legend-container-screen"  :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
             <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias: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.alias?item.alias:item.name}}
@@ -101,6 +101,7 @@
   import chartDataFormat from './chartDataFormat'
   import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
   import timePicker from '../common/timePicker'
+  import chartConfig from "../page/dashboard/overview/chartConfig";
   export default {
     name: 'lineChartBlock',
     components: {
@@ -133,6 +134,7 @@
     data() {
       return {
         data: {}, // 该图表信息,chartItem
+        noData:false,
         seriesItem: [], // 保存信息
         seriesItemScreen:[],
         images: '',
@@ -616,14 +618,30 @@
               show: true,
             },
             splitLine:{
-              show:true
+              show:true,
+              lineStyle: {
+                color: "#d9d9d9",
+                opacity: 0.8,
+                width: 1
+              }
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
             },
             //boundaryGap:['20%', '0'],
           },
           yAxis: {
             type: 'value',
             splitLine:{
-              show:true
+              show:true,
+              lineStyle: {
+                color: "#d9d9d9",
+                opacity: 0.8,
+                width: 1
+              }
             },
             //去掉y轴--start
             axisLine:{
@@ -669,8 +687,17 @@
               }else {
                 self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
               }
-              self.echartStore.clear();
+              if(dataArg&&dataArg.length>0){
-              self.echartStore.setOption(option);//创建图表
+                self.echartStore.clear();
+                self.echartStore.setOption(option);//创建图表
+                self.noData=false;
+              }else{
+                self.noData=true;
+                option=chartConfig.getOption('noData')
+                self.echartStore.clear();
+                self.echartStore.setOption(option);//创建图表
+              }
+
               self.$refs['localLoading'+self.chartIndex].endLoading();
               self.firstShow = true; // 展示操作按键
             }, 100);
@@ -766,7 +793,15 @@
                 //console.log("11____00",sumHeight,divHeight,legendDiv)
               self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
               self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
-              self.echartModalStore.setOption(option);//显示全屏界面
+              if(dataArg&&dataArg.length>0){
+                self.echartModalStore.setOption(option);//显示全屏界面
+                self.noData=false;
+              }else{
+                self.noData=true;
+                option=chartConfig.getOption('noData')
+                self.echartModalStore.setOption(option);//显示全屏界面
+              }
+
             }, 100)
 
             this.echartModalStore.on('magictypechanged', function (params) {

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

@@ -309,6 +309,10 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                         showSymbol:false,
                         smooth: 0.2,  //曲线变平滑
                         data: [],
+                        lineStyle: {
+                          width: 1,
+                          opacity: 0.9
+                        },
                         type: 'line',
                       }
                       seriesItem.data = result.values.map((item) => {
@@ -337,14 +341,12 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
                     this.$refs['promql-'+promqlIndex][0].setError(response.data.error)
                   }
                 })
-                if(series.length>0){
+
                   this.$refs.exploreChart.setLegend(legend);
                   this.$refs.exploreChart.setRandomColors(series.length)
                   this.$refs.exploreChart.setSeries(series)
                   this.defaultChartVisible = true;
-                }else{
+
-                  // this.defaultChartVisible = false;
-                }
               }
 
               this.$refs.exploreChart.endLoading();

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -5,6 +5,7 @@
     <div class="chart-header">{{chartTitle}}</div>
 
     <div class="chart-body" ref="chartBody" :id="chartId" ></div>
+    <div style="position: absolute;top:50%;left:50%;" v-show="noData">No data</div>
 
     <div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legend.length>0" v-scrollBar:legend>
       <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
@@ -46,6 +47,7 @@
         chartId: this.name + '-'+this.guid()+'-'+new Date().getTime(),
         legend:[],
         colors:chartConfig.getBgColorList(),
+        noData:false,
       }
     },
     created() {
@@ -99,10 +101,19 @@
           }
         }
         // console.log(this.option)
-        this.$set(this.option,'series',this.series);
+        if(this.series&&this.series.length>0){
+          this.$set(this.option,'series',this.series);
+          this.noData=false;
+          this.chart.clear();
+          this.chart.setOption(this.option);
+        }else{
+          this.noData=true;
+          let option=chartConfig.getOption('noData');
+          this.chart.clear();
+          this.chart.setOption(option);
+        }
+
 
-        this.chart.clear();
-        this.chart.setOption(this.option);
         //坐标轴label鼠标悬浮提示
         if (this.axisTooltip) {
           let tooltipDom = document.querySelector(".axis-tooltip");

nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue

@@ -88,14 +88,36 @@
         axisPointer: {//y轴上显示指针对应的值
           show: true,
         },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
         splitLine:{
-          show:false
+          show:true,
+          lineStyle: {
+            color: "#d9d9d9",
+            opacity: 0.8,
+            width: 1
+          }
         }
       },
       yAxis: {
         type: 'value',
         splitLine:{
-          show:true
+          show:true,
+          lineStyle: {
+            color: "#d9d9d9",
+            opacity: 0.8,
+            width: 1
+          }
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
         },
         axisLabel: {
           // formatter:null,
@@ -312,12 +334,58 @@
       useUTC: false,//使用本地时间
       series: [],
     };
+    const noDataOption={
+      grid: {
+        top: 30,
+        left: 0,
+        right: 30,
+        containLabel: true,
+        bottom:8,//156
+      },
+      xAxis: {
+        type: 'category',
+        data: createTempTimes(),
+        splitLine:{
+          show:true
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+      },
+      yAxis: {
+        type: 'category',
+        data: [1, 3, 5, 7, 9, 11, 13],
+        splitLine:{
+          show:true
+        },
+        axisLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+      },
+      series: null,
+    };
+    function createTempTimes(){
+      let times=[];
+      for(let i=0;i<10;i++){
+        let time=new Date();
+        time.setMinutes(new Date().getMinutes()-(10-i)*5);
+        times.push(bus.timeFormate(time,'hh:mm'))
+      }
+      return times;
+    }
     const chartTypes={
       line:{name:'line',option:commonOption},
       overviewLine: {name: 'line', option: overviewLine},
       map:{name:'map',option:mapOptions},
       pie: {name: 'assetType', option: assetTypePie},
-      bar: {name: 'alertMessage', option: alertMessageBar}
+      bar: {name: 'alertMessage', option: alertMessageBar},
+      noData:{name:'noData',option:noDataOption},
     };
     export default {
       getOption:function(type){