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

# Conflicts: # nezha-fronted/src/components/charts/chart-list.vue
2020-05-29 21:10:40 +08:00
parent b5eecd5926 443cdc5f94
commit 7de9cdb6be
8 changed files with 108 additions and 81 deletions
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -7,7 +7,7 @@
  }
 </style>
 <template>
-    <div class="chart-table"  :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+    <div class="chart-table"  :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" :style="{'border':isPreview?'unset':'1px solid #d8dce1','height':isPreview?'92%':'100%'}">
        <loading  :ref="'localLoading'+chartIndex"></loading>
      <!--
        <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
@@ -30,7 +30,7 @@
                <span class="panel-info-corner-inner"></span>
            </span>
          </el-popover>
-          <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+          <el-dropdown trigger="click" v-show="!isPreview&&firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
            <el-dropdown-menu style="display: none"></el-dropdown-menu>
            <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
              <span class="chart-title-text">{{data.title}}</span>
@@ -51,9 +51,9 @@
          </el-dropdown>

        </div>
-        <div class="mt-10 table-container" v-cloak  v-show="firstShow">
+        <div class="mt-10 table-container" v-cloak  v-show="firstShow || isPreview">
          <transition name="el-zoom-in-bottom">
-            <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0" style="top:10px">
+            <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0" :style="{'top':isPreview?'-30px':'10px'}">
              <i style="cursor: pointer" class="el-icon-delete"></i>
            </div>
          </transition>
@@ -133,9 +133,9 @@
                <template v-else>-</template>
              </template>
            </el-table-column>
-            <el-table-column width="28" :resizable="false">
+            <el-table-column width="28" :resizable="false" v-if="!isPreview">
              <template slot="header" slot-scope="scope">
-              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+              <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear" >
                <i class="nz-icon nz-icon-gear"></i>
              </span>
              </template>
@@ -268,6 +268,7 @@
                 :title="$t('overall.detail')"
                 :visible.sync="graphShow"
                 width="90%"
+                 :append-to-body="true"
                 id="viewGraphDialog"
                 @close="dialogClose">
        <div slot="title">
@@ -278,7 +279,7 @@
        </div>
        <chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
      </el-dialog>
-      <span class="vue-resizable-handle" @mousedown="dragResize"></span>
+      <span class="vue-resizable-handle" @mousedown="dragResize" v-if="!isPreview"></span>
      <element-set
        path="/alertList"
        :table-title="tableTitle"
@@ -457,6 +458,7 @@ export default {
          chartDatas: [],
          chartUnit:5,
          deleteBox: {show: false, ids: "", remark: '', state: 2},
+          isPreview:false,
        };
    },
    created() {
@@ -633,7 +635,8 @@ export default {
          })
        }
      },
-        getAlertList: function (filterType) {
+        getAlertList: function (filterType,isPreview=false) {
+          this.isPreview = isPreview;
          let queryParam={
            pageSize:this.pageObj.pageSize,
            pageNo:this.pageObj.pageNo,
@@ -1042,64 +1045,7 @@ export default {
        },
        // 设置数据, filter区分
        setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
-          if(errorMsg && errorMsg!==''){
-            this.isError = true;
-            this.errorContent = errorMsg;
-          }else {
-            this.isError = false;
-            this.errorContent = '';
-          }
-            if(area==='showFullScreen'){//全屏按时间查询
-              this.data = chartItem;
-              this.unit = chartDataFormat.getUnit(this.data.unit);
-              this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-              this.searchTime[1] = filter.end_time;
-              // this.seriesItemScreen = seriesItem;
-              this.storedScreanTableData=seriesItem;
-              this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
-              this.screenPageObj.total=this.storedScreanTableData.length;
-              this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
-              this.endLoading('screen');
-            }else{
-              //设置高度 chart-table
-              this.$nextTick(() => {
-                const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
-                let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
-                if(height<this.minHeight){
-                  height = this.minHeight;
-                }
-                chartBox.style.height = `${height-this.chartSpaceHeight}px`;
-                const tableBox = document.getElementById('tableContainer'+this.chartIndex);
-                tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
-              });
-              this.divFirstShow = true;

-              this.firstShow = true; // 展示操作按键
-
-              this.panelIdInner = panelId;
-              this.data = chartItem;
-              this.unit = chartDataFormat.getUnit(this.data.unit);
-              // this.seriesItem = seriesItem;
-              // this.seriesItemScreen = seriesItem;
-              this.storedTableData =seriesItem;
-              this.storedScreanTableData=seriesItem;
-              this.storedTableData=Object.assign([],this.storedTableData.reverse());
-              this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
-              this.pageObj.total=this.storedTableData.length;
-              this.screenPageObj.total=this.storedScreanTableData.length;
-              this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj);
-              this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
-              if (filter) { // 保存数据,用于同步时间
-                this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-                this.searchTime[1] = filter.end_time;
-                this.oldSearchTime[0] = this.searchTime[0];
-                this.oldSearchTime[1] = this.searchTime[1];
-              }
-
-              this.endLoading();
-              //this.showTable = true;
-              //this.tableLoading = false;
-            }
        },

    },
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -1192,14 +1192,18 @@

          this.currentRecordNum = this.currentRecordNum+1;
          let chartData = this.chartDataCacheGroup.get(chart.id);
-          console.log("__chartItem00__",JSON.stringify(chartData))
-
-          let duplicateChartData = JSON.parse(JSON.stringify(chartData));
+          // console.log("__chartItem00__",JSON.stringify(chartData))
+          let duplicateChartData ={};
+          try{
+            duplicateChartData = JSON.parse(JSON.stringify(chartData));
+          }catch (e) {
+            console.warn(e);
+          }
          duplicateChartData.chartItem = duplicateChart;
          this.chartDataCacheGroup.set(duplicateChartId,duplicateChartData);
          this.$nextTick(() => {
            if (this.$refs['editChart'+duplicateChartId][0]) {
-              this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现
+                this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现
            }

            let chartType = duplicateChart.type;
--- a/nezha-fronted/src/components/charts/chart-url.scss
+++ b/nezha-fronted/src/components/charts/chart-url.scss
@@ -133,7 +133,7 @@
      cursor: pointer;
      padding: 5px 15px;
      border-right: 1px solid #ccc;
-      
+
    }
    .set-icon:hover{
      background: $btn-light-background-color-hover;
@@ -192,4 +192,15 @@
    border-top: 1px solid #dfe7f2;
    margin-top:-25px;
  }
+  .center-content{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100px;
+    margin: auto;
+    text-align: center;
+  }
 }
--- a/nezha-fronted/src/components/charts/chart-url.vue
+++ b/nezha-fronted/src/components/charts/chart-url.vue
@@ -7,7 +7,7 @@
  }
 </style>
 <template>
-    <div class="chart-url"  :id="'chartUrlDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+    <div class="chart-url"  :id="'chartUrlDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
        <loading  :ref="'localLoading'+chartIndex"></loading>

        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
@@ -34,19 +34,24 @@

        </div>
        <div :id="'chartUrl'+chartIndex" class="mt-10 url-container"  v-show="firstShow" >
-            <iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
+            <iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto v-if="!showStatic"
                    style="z-index:5000;padding-bottom:6px;"
            ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
        </div>
+      <div style="position: relative;width: 100%;height: 100%;" v-if="showStatic">
+        <div  :id="'staticContainer'+chartIndex" class="center-content"></div>
+      </div>
        <!--全屏-->
          <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%" @opened="initDialog"  @close="screenModal = false" >
            <div slot="title">
              <span class="nz-dialog-title">{{data.title}}</span>
            </div>
-            <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto
+            <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
                    style="z-index:5000;padding-bottom:6px;"
            ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
-
+            <div style="position: relative;width: 100%;height: 100%;" v-if="showStatic">
+              <div  :id="'staticContainerFull'+chartIndex" class="center-content"></div>
+            </div>
            <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
        </el-dialog>
      <span class="vue-resizable-handle" @mousedown="dragResize"></span>
@@ -97,6 +102,7 @@ export default {
            titleHeight:38,//title-height:28,magrin-bottom:10
            paddingBottom:6,
            divFirstShow:false,
+            showStatic:false,
        };
    },
    created() {
@@ -105,6 +111,7 @@ export default {
    watch: {},
    methods: {
      showLoad(chartItem) {
+        console.log(chartItem)
        this.data = chartItem;
        this.panelIdInner = this.panelId;
        //设置高度
@@ -119,14 +126,29 @@ export default {
          urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.paddingBottom}px`;// -75-32
        });
        this.startLoading();
-        this.setLoadFrame();
+
+        if(/\{\{.*?\}\}/g.test(this.data.param.url)){
+          this.showStatic=true;
+          this.setStaticContent();
+        }else{
+          this.showStatic=false;
+          this.setLoadFrame();
+        }
        this.divFirstShow = true;
      },
+      setStaticContent:function(){
+        let that = this;
+        this.$nextTick(() => {
+          let staticDiv = document.querySelector('#staticContainer'+this.chartIndex);
+          staticDiv.innerHTML=`<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
+          that.firstShow = true;
+          that.endLoading();
+        });
+      },
      setLoadFrame(){
        let that = this;
        this.$nextTick(() => {
          let iframe = document.querySelector('#urlContainer'+this.chartIndex);
-
          // 处理兼容行问题
          if (iframe.attachEvent) {
            iframe.attachEvent('onload', function () {
@@ -143,14 +165,19 @@ export default {
              that.endLoading();
            }
          }
-
          iframe.src = that.data.param.url;
        });
      },
      initDialog(){
        this.startLoading('screen');
+        if(/\{\{.*?\}\}/g.test(this.data.param.url)){
+          this.showStatic=true;
+          this.setStaticContentFull();
+        }else{
+          this.showStatic=false;
+          this.setLoadFrameFull();
+        }

-        this.setLoadFrameFull();
      },
      dragResize:function(e){
        var diffWidth =20; //界面的宽度空白的地方的宽度
@@ -389,6 +416,15 @@ export default {
          iframe.src = this.data.param.url;
        });
      },
+      setStaticContentFull:function(){
+        let that = this;
+        this.$nextTick(() => {
+          let staticDiv = document.querySelector('#staticContainerFull'+this.chartIndex);
+          staticDiv.innerHTML=`<span>${that.data.param.url}</span><span>${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</span>`
+          that.firstShow = true;
+          that.endLoading('screen');
+        });
+      },
    },
    mounted() {
        this.firstLoad = false;
@@ -398,3 +434,13 @@ export default {
    },
 };
 </script>
+<style>
+  .center-content .content-static-url{
+    font-weight: bold;
+    font-size: 24px;
+  }
+  .center-content .content-static-tip{
+    font-size: 18px;
+    color: lightgrey;
+  }
+</style>
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -128,6 +128,10 @@
        </div>
      </template>

+      <template v-if="chart.type === 'alertList'">
+        <chart-alert-list ref="alertListChart"></chart-alert-list>
+      </template>
+
      <loading  ref="loadingPreview"></loading>
    </el-dialog>
 </template>
@@ -139,12 +143,14 @@
  import chartDataFormat from './chartDataFormat'
  import {randomcolor} from  '../common/js/radomcolor/randomcolor.js'
  import timePicker from '../common/timePicker'
+  import chartAlertList from './chart-alert-list'

  export default {
    name: 'chartPreview',
    components: {
      'loading': loading,
-      'time-picker':timePicker
+      'time-picker':timePicker,
+      'chart-alert-list':chartAlertList,
    },
    props: {
      panelId:Number,
@@ -320,9 +326,17 @@
          this.dailogWidth = `${containerWidth*(size / 12)}px`;
        });
      },
+      getAlertListChartData:function(chartInfo,filterType){
+        this.$refs.alertListChart.getAlertList(filterType,true);
+        this.$refs.loadingPreview.endLoading();
+      },
      // 获取一个图表具体数据
      getChartData() {
        const chartItem = this.chart;
+        if(chartItem.type === 'alertList'){
+          this.getAlertListChartData(chartItem,null);
+          return;
+        }
        const len = chartItem.elements.length;
        // 没有数据的设置提示信息暂无数据-针对每一个图
        if (len === 0) {
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -131,7 +131,8 @@ const cn = {
            label: "面积图"
          },
          url: {
-            label: "URL"
+            label: "URL",
+            staticTip:'双大括号中的内容将会在asset页面被替换',
          },
          singleStat:{
            label:"SingleStat"
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -142,7 +142,8 @@ const en = {
            label:"Stack Area"
          },
          url:{
-            label:"URL"
+            label:"URL",
+            staticTip:'The content in the double curly braces will be replaced on the Asset page',
          },
          singleStat:{
            label:"SingleStat"
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -949,6 +949,8 @@
        }else{
          if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
            this.chart.param.threshold=data.param.threshold;
+          }else{
+            this.chart.param.threshold='';
          }
          this.setIsOtherChart();
          //this.getSuggestMetric();//获得指标列表
@@ -982,6 +984,8 @@
        this.chart.span = 12;
        this.chart.height = 400+'';
        this.chart.unit=2;
+        this.chart.param.url='';
+        this.chart.param.threshold='';
        this.elements = [1];
        this.elementTarget = [];
        bus.chartAddInfo.metricTarget = [];