temp: 临时提交代码，周末在家办公用

nezha-fronted/src/components/charts/chart-endpoint-info.vue

@@ -39,9 +39,11 @@
                       <div class="content-item-key item-tip" :id="'basicKey' + index">
                         <span>{{item.label}}</span>
                         <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
-                      </div><div class="content-item-value item-tip" :id="'basicValue' + index">
+                      </div><div v-if="item.label != $t('alert.list.state')" class="content-item-value item-tip" :id="'basicValue' + index">
-                        <span>{{item.value}}</span>
+                        <span>{{item.value ? item.value : '&nbsp;'}}</span>
                         <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', item.value, index, ready)">{{item.value}}</div>
+                      </div><div v-else class="content-item-value item-tip" :id="'basicValue' + index">
+                        <span style="cursor: pointer;" @click="preview"><i class="nz-icon nz-icon-chart"></i></span>
                       </div>
                     </div>
                   </div>
@@ -68,6 +70,8 @@
         </div>
       </div>
     </div>
+    <!--preview -->
+    <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
   </div>
 </template>
 
@@ -76,13 +80,16 @@
   import {Loading} from 'element-ui';
   import chartDataFormat from './chartDataFormat'
   import loading from "../common/loading";
-  import timePicker from '../common/timePicker'
+  import timePicker from '../common/timePicker';
+  import chartPreview from './chartPreview';
+
 
   export default {
     name: 'chartEndpointInfo',
     components: {
       'loading': loading,
-      'time-picker':timePicker
+      'time-picker': timePicker,
+      'chart-preview': chartPreview,
     },
     props: {
       // 看板id
@@ -105,11 +112,13 @@
         data: {}, // 该图表信息,chartItem
         unit:{},
         detail: [],
+        state: [],
         alerts: [],
         unfold: ["basic"],
         isError:false,
         errorContent:'',
         assetInfos:{},
+        showState: false,
 
         //toolbox: false,
         loading:Object,
@@ -192,6 +201,9 @@
           this.$refs.scrollbar && this.$refs.scrollbar.update();
         },400);
       },
+      preview() {
+        this.$refs.chartsPreview.show(this.data);
+      },
       replaceSplit(key){
         if(key){
           return key.replace(/\$_\$/g,' ')
@@ -239,18 +251,19 @@
       },
 
       // 设置数据, filter区分
-      setData(chartItem, data, alerts) {
+      setData(chartItem, endpointDetail, alerts) {
         this.resize(chartItem);
         this.divFirstShow = true;
 
         this.firstShow = true; // 展示操作按键
 
         this.data = chartItem;
-        this.detail = data;
+        this.detail = endpointDetail;
         this.alerts = alerts;
+        this.detail.push({label: this.$t("alert.list.state"), value: ""});
         this.$nextTick(()=>{
           this.$refs.scrollbar.update();
-        })
+        });
         this.endLoading();
       },
     },

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

@@ -600,13 +600,17 @@
           this.dataList.push({
             id: -10,
             panelId: 0,
+            dataId: this.additionalInfo.id,
             title: this.$t("project.chart.endpointInfo"),
             span: 4,
             height: 350,
             type: "endpointInfo",
             prev: 0,
             next: -9,
-            buildIn: 1
+            buildIn: 1,
+            elements: [{
+              expression: `up{endpoint="${this.additionalInfo.id}"}`
+            }]
           });
           this.dataList.push({
             id: -9,
@@ -1228,17 +1232,59 @@
         }
       },
       getEndpointInfoChartData(chartInfo) {
-        let req = new Promise((resolve, reject) => {
+        let endpointId = this.additionalInfo.id;
-          this.$get('/alert/message?endpointId='+this.detail.id).then(response=>{
+        let alertMsg = new Promise((resolve, reject) => {
+          this.$get('/alert/message?endpointId='+endpointId).then(response=>{
             if(response.code == 200){
-              console.info(response)
               resolve(response.data);
             } else {
               reject(false);
             }
           });
         });
-        req.then(data => {
+        /*let endpointState = new Promise((resolve, reject) => {
+          let query = `up{endpoint="${endpointId}"}`;
+          this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(this.filter.start_time) + "&end=" + this.$stringTimeParseToUnix(this.filter.end_time) + '&step=' + bus.getStep(this.filter.start_time, this.filter.end_time)).then(response=>{
+            if(response.status == "success"){
+              resolve(response.data);
+            } else {
+              reject(false);
+            }
+          });
+        });*/
+        Promise.all([alertMsg]).then(result => {
+          //endpointInfo的告警信息
+          let alerts = [];
+          let data = result[0];
+          if (data.list) {
+            data.list.forEach(item => {
+              let index = -1;
+              let hasLabel = alerts.some((alert, i) => {
+                if (alert.label == item.alertRule.alertName) {
+                  index = i;
+                }
+                return alert.label == item.alertRule.alertName;
+              });
+              if (hasLabel) {
+                alerts[index].value++;
+              } else {
+                alerts.push({label: item.alertRule.alertName, value: 1});
+              }
+            });
+          }
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, this.detail, alerts);
+          //endpointInfo的state
+          /*data = result[1];
+          let state = [];
+          if (data.result && data.result[0] && data.result[0].values) {
+            state = data.result[0].values;
+          }
+
+          this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, this.detail, alerts, state);*/
+        }, err => {
+
+        });
+        /*req.then(data => {
           let alerts = [];
           if (data && data.list) {
             data.list.forEach(item => {
@@ -1257,12 +1303,13 @@
             });
           }
           this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, this.detail, alerts);
-        });
+        });*/
       },
       getAssetInfoChartData(chartInfo){
         if(!this.isModel){
           this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
-          this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
+          let assetId = this.additionalInfo.assetId ? this.additionalInfo.assetId : this.additionalInfo.id;
+          this.$get('/asset/info?id=' + assetId).then(response=>{
             if(response.code == 200){
               this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, response.data, this.filter.panelId, this.filter);
             }else{

nezha-fronted/src/components/charts/chartPreview.vue

@@ -75,12 +75,12 @@
         </div>
       </div>
 
-      <template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea'">
+      <template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea' || chart.type == 'endpointInfo'">
         <div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart">
-          <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;"></div>
+          <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 class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" 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">
+            <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}}
               <br/>
             </div>
@@ -130,9 +130,7 @@
         </div>
       </template>
 
-      <template v-if="chart.type === 'alertList'">
+      <chart-alert-list v-if="chart.type === 'alertList'" ref="alertListChart" id="chartAlertListPreview"></chart-alert-list>
-        <chart-alert-list ref="alertListChart" id="chartAlertListPreview"></chart-alert-list>
-      </template>
 
       <loading  ref="loadingPreview"></loading>
     </el-dialog>
@@ -231,7 +229,7 @@
         if(chartType==='table'){
           this.tableShow = false;
           chartContainerId = 'chartTablePreview';
-        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
+        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo") {
           this.isGreyScreen=[];
           this.showLegend = false;
           chartContainerId = 'chartEchartPreview';
@@ -306,7 +304,7 @@
         let chartType= this.chart.type;
         if(chartType==='table'){
 
-        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
+        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo") {
           if(this.echartModalStore){
             this.echartModalStore.clear();
           }
@@ -350,7 +348,7 @@
           this.$nextTick(() => {
             if (chartItem.type === 'table') {//表格
               this.setTableData([]);
-            } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+            } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === "endpointInfo") {
               this.setData(chartItem, []);
             }else if(chartItem.type ==='singleStat'){
               this.serieSingleStat = "";
@@ -424,7 +422,7 @@
                             },
                             metric_name: '',
                           };
-                          if (chartItem.type === 'stackArea') {
+                          if (chartItem.type === 'stackArea' || chartItem.type === "endpointInfo") {
                             seriesItem.theData.type = 'line';
                             seriesItem.theData.stack = chartItem.title;
                             seriesItem.theData.areaStyle = {"opacity": 0.3};
@@ -477,6 +475,7 @@
                               return [dpsItem[0] * 1000, dpsItem[1]];
                             });
                             series.push(seriesItem.theData);
+                            console.info(seriesItem.theData)
 
                           } else if (chartItem.elements && chartItem.elements[innerPos]) {
                             // 无数据提示
@@ -507,7 +506,7 @@
                 //if(this.$refs.editChart&&this.$refs.editChart[index]) {
                   if (chartItem.type === 'table') {//表格
                       this.setTableData(tableData);
-                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+                  } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type == "endpointInfo") {
                     if (series.length && chartItem.type === 4) {//曲线汇总
                     }
                     if(series.length<1){
@@ -515,7 +514,11 @@
                     }else{
                       this.noData=false;
                     }
-                    this.setData(chartItem, series, legend);
+                    let _chartItem = JSON.parse(JSON.stringify(chartItem));
+                    if (chartItem.type == "endpointInfo") {
+                      _chartItem.type = "line";
+                    }
+                    this.setData(_chartItem, series, legend);
                   }else if(chartItem.type ==='singleStat'){
                     if(Number(singleStatRlt)){
                       let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));