fix: alertmsg-current格式化、修复图表看不见的问题

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue

@@ -196,6 +196,7 @@
   import axios from 'axios';
   import nzAlertTag from '../../../page/alert/nzAlertTag';
   import chart from '../../../page/dashboard/overview/chart'
+  import bus from '../../../../libs/bus'
   export default {
     name: "alertMessageTab",
     components: {
@@ -526,12 +527,10 @@
                     }
                     this.legend.push(legend);
                     chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
-                      return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(1)];
+                      return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)];
                     });
                     this.chartDatas.push(chartData);
-                    this.$refs.messageChart.setRandomColors(this.chartDatas.length)
+
-                    this.$refs.messageChart.setLegend(this.legend)
-                    this.$refs.messageChart.setSeries(this.chartDatas);
                   }
                 } else {
                   this.$message.error(response.data.error)
@@ -540,6 +539,9 @@
               }
             });
             this.$nextTick(() => {
+              this.$refs.messageChart.setRandomColors(this.chartDatas.length);
+              this.$refs.messageChart.setLegend(this.legend);
+              this.$refs.messageChart.setSeries(this.chartDatas);
               this.$refs.messageChart.endLoading();
             });
           } catch(err) {
@@ -592,7 +594,13 @@
                 this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
                   let current = [];
                   if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                    current = response2.data.result[0].value;
+                    current = response2.data.result[0].value.map((item, i) => {
+                      if (i == 0) {
+                        return bus.computeTimezone(item);
+                      } else {
+                        return parseFloat(item).toFixed(2);
+                      }
+                    });
                   }
                   this.$set(item, "current", current);
                 });

nezha-fronted/src/components/page/alert/list.vue

@@ -3,6 +3,9 @@
     height: 100%;
   }
 </style>
+<style lang="scss">
+  @import '../../charts/line-chart-block.scss';
+</style>
 <template>
   <div class="list">
     <left-menu >
@@ -208,7 +211,7 @@
           <pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;"></pick-time>
         </div>
       </div>
-      <chart ref="messageChart" ></chart>
+      <chart ref="messageChart" name="alertMessageChart"></chart>
     </el-dialog>
   </div>
 
@@ -517,12 +520,10 @@
                     }
                     this.legend.push(legend);
                     chartData.data = queryData.values.map((dpsItem, dpsIndex) => {
-                      return [dpsItem[0] * 1000, parseFloat(dpsItem[1]).toFixed(1)];
+                      return [bus.computeTimezone(dpsItem[0]) * 1000, parseFloat(dpsItem[1]).toFixed(2)];
                     });
+                    console.info(chartData)
                     this.chartDatas.push(chartData);
-                    this.$refs.messageChart.setRandomColors(this.chartDatas.length)
-                    this.$refs.messageChart.setLegend(this.legend)
-                    this.$refs.messageChart.setSeries(this.chartDatas);
                   }
                 } else {
                   this.$message.error(response.data.error)
@@ -531,6 +532,9 @@
               }
             });
             this.$nextTick(() => {
+              this.$refs.messageChart.setRandomColors(this.chartDatas.length);
+              this.$refs.messageChart.setLegend(this.legend);
+              this.$refs.messageChart.setSeries(this.chartDatas);
               this.$refs.messageChart.endLoading();
             });
           } catch(err) {
@@ -581,7 +585,13 @@
               this.$get('/prom/api/v1/query?query=' + paramStr.substring(1, paramStr.length-1).replace(/\+/g, "%2B").replace(/ /g, "%20").replace(/\\/g, "")).then(response2 => {
                 let current = [];
                 if (response2.data && response2.data.result && response2.data.result.length > 0) {
-                  current = response2.data.result[0].value;
+                  current = response2.data.result[0].value.map((item, i) => {
+                    if (i == 0) {
+                      return bus.computeTimezone(item);
+                    } else {
+                      return parseFloat(item).toFixed(2);
+                    }
+                  });
                 }
                 this.$set(item, "current", current);
               });

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

@@ -12,26 +12,41 @@
       </div>
       <!--右侧内容-->
       <div class="overview-right slot-content" id="mainDisplay" slot="content-right">
+        <svg width="500" height="500">
+          <path fill="none" stroke-width="10"></path>
+        </svg>
+      </div>
+      <!--<div class="overview-right slot-content" id="mainDisplay" slot="content-right">
         <div id="topo" style="width: 75%; display: inline-block; height: 99%"></div>
         <div style="width: 24%; display: inline-block; height: 99%; background-color: white; vertical-align: top">
           name: <input id="k1"></input><br/>
           alerts: <input id="k2"></input><br/>
           x: <input id="k3"></input>
         </div>
-      </div>
+      </div>-->
     </left-menu>
-    <div class="axis-tooltip el-popover"></div>
-    <!--用于assetType饼图label-->
-    <img src='../../../../assets/img/up.png' id="upPic" style="display: none;">
-    <img src='../../../../assets/img/down.png' id="downPic" style="display: none;">
   </div>
 </template>
 
 <script>
-  import chart from "./chart";
+  import * as d3 from "d3";
-  import echarts from 'echarts';
-
   export default {
+    name: "test",
+    data() {
+      return {
+
+      }
+    },
+    methods: {
+      test() {
+
+      }
+    },
+    mounted() {
+      this.test();
+    }
+  }
+  /*export default {
     name: "test",
     data() {
       return {
@@ -97,26 +112,6 @@
             }
           ]
         });
-        /*myChart.setOption({
-          // 声明一个 graphic component，里面有若干个 type 为 'circle' 的 graphic elements。
-          // 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。
-          // 用 map 方法遍历 data 的每项，为每项生成一个圆点。
-          graphic: echarts.util.map(data, function (dataItem, dataIndex) {
-            let a = {
-              type: 'circle',
-              shape: {
-                r: symbolSize / 2
-              },
-              position: myChart.convertToPixel('grid', dataItem),
-              invisible: true,
-              draggable: true,
-              z: 100,
-              ondrag: echarts.util.curry(onPointDragging, dataIndex)
-            };
-            console.info(a);
-            return a;
-          })
-        });*/
         setTimeout(() => {
           myChart.setOption({
             graphic: echarts.util.map(data1, function (dataItem, dataIndex) {
@@ -196,5 +191,5 @@
     mounted() {
       this.load();
     }
-  }
+  }*/
 </script>