refactor: 监控页面图表修改

frontend/src/business/components/performance/report/components/MonitorCard.vue

@@ -1,22 +1,22 @@
 <template>
   <div v-loading="result.loading">
-    <el-tabs>
+    <el-tabs @tab-click="clickTabs">
-      <el-tab-pane v-for="(item,index) in instances" :key="index" :label="item" class="logging-content">
+      <el-tab-pane v-for="(item) in instances" :key="item" :label="item" class="logging-content">
         <el-row>
-          <el-col :span="12">
+          <el-col :span="6">
-            <ms-chart ref="chart1" class="chart-config" :options="getCpuOption(item)" :autoresize="true"></ms-chart>
+            <el-collapse v-model="activeNames" class="monitor-detail">
+              <el-collapse-item :title="$t('Monitor')" name="0">
+                <el-checkbox-group v-model="checkList"
+                                   @change="handleChecked(item)">
+                  <el-checkbox :label="op.label" v-for="op in checkOptions"
+                               :key="op.key"
+                               :content="op.label"/>
+                </el-checkbox-group>
+              </el-collapse-item>
+            </el-collapse>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="18">
-            <ms-chart ref="chart2" class="chart-config" :options="getMemoryOption(item)" :autoresize="true"></ms-chart>
+            <ms-chart ref="chart2" class="chart-config" :options="totalOption" :autoresize="true"></ms-chart>
-          </el-col>
-          <el-col :span="12">
-            <ms-chart ref="chart3" class="chart-config" :options="getDiskOption(item)" :autoresize="true"></ms-chart>
-          </el-col>
-          <el-col :span="12">
-            <ms-chart ref="chart3" class="chart-config" :options="getNetOutOption(item)" :autoresize="true"></ms-chart>
-          </el-col>
-          <el-col :span="12">
-            <ms-chart ref="chart4" class="chart-config" :options="getNetInOption(item)" :autoresize="true"></ms-chart>
           </el-col>
         </el-row>
       </el-tab-pane>
@@ -36,217 +36,139 @@ export default {
   components: {MsChart},
   data() {
     return {
+      activeNames: '0',
       result: {},
       id: '',
+      init: false,
       loading: false,
       instances: [],
-      data: []
+      data: [],
+      checkList: ['CPU', 'Memory', 'Disk', 'Network In', 'Network Out'],
+      checkOptions: [
+        {key: 'cpu', label: 'CPU'},
+        {key: 'memory', label: 'Memory'},
+        {key: 'disk', label: 'Disk'},
+        {key: 'netIn', label: 'Network In'},
+        {key: 'netOut', label: 'Network Out'}
+      ],
+      baseOption: {
+        color: color,
+        grid: {
+          // right: '35%' // 动态改这个值
+        },
+        title: {
+          text: 'Monitor',
+          left: 'center',
+          top: 20,
+          textStyle: {
+            color: '#99743C'
+          },
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+        },
+        legend: {},
+        xAxis: {type: 'category'},
+        yAxis: [{
+          name: 'Usage(%)',
+          type: 'value',
+          min: 0,
+          max: 100,
+        }, {
+          type: 'value',
+          name: 'kb/s',
+          min: 0,
+        }],
+        series: []
+      },
+      totalOption: {}
     };
   },
   created() {
     this.data = [];
     this.instances = [];
+    this.id = this.$route.path.split('/')[4];
+    this.getResource();
   },
   methods: {
     getResource() {
-      this.result = this.$get("/metric/query/resource/" + this.report.id)
+      // this.init = true;
+      this.result = this.$get("/metric/query/resource/" + this.id)
         .then(response => {
           this.instances = response.data.data;
+          this.$get("/metric/query/" + this.id)
+            .then(result => {
+              if (result) {
+                this.data = result.data.data;
+                this.totalOption = this.getOption(this.instances[0]);
+              }
+            })
+            .catch(() => {
+            });
         })
         .catch(() => {
         });
 
-      this.$get("/metric/query/" + this.report.id)
+    },
-        .then(result => {
+    handleChecked(id) {
-          if (result) {
+      this.totalOption = {};
-            this.data = result.data.data;
+      this.$nextTick(() => {
-          }
+        this.totalOption = this.getOption(id);
-        })
-        .catch(() => {
       });
     },
-    getCpuOption(id) {
+    clickTabs(tab) {
-      let xAxis = [];
+      this.totalOption = {};
-      let yAxis = [];
+      this.$nextTick(() => {
-      this.data.map(d => {
+        this.totalOption = this.getOption(tab.label);
-        if (d.instance === id && d.seriesName === 'cpu') {
-          xAxis = d.timestamps;
-          yAxis = d.values;
-        }
       });
-      let option = {
-        color: color,
-        title: {
-          left: 'center',
-          text: 'CPU使用率',
-          textStyle: {
-            color: '#8492a6'
     },
-        },
+    getOption(id) {
-        tooltip: {
+      let legend = [];
-          trigger: 'axis'
+      let series = [];
-        },
+
-        xAxis: {
+      for (const name of this.checkList) {
-          type: 'category',
+        let check = this.checkOptions.filter(op => op.label === name)[0].key;
-          data: xAxis
+        let yAxisIndex = 1;
-        },
+        if (check === 'cpu' || check === 'memory' || check === 'disk') {
-        yAxis: {
+          yAxisIndex = 0;
-          name: '使用率(%)',
+        }
-          type: 'value'
+        this.data.forEach(d => {
-        },
+          if (d.instance === id && d.seriesName === check) {
-        series: [{
+            if (legend.indexOf(name) > -1) {
+              return;
+            }
+
+            this.baseOption.xAxis.data = d.timestamps;
+
+            let yAxis = d.values.map(v => v.toFixed(2));
+            legend.push(name);
+            series.push({
+              name: name,
               data: yAxis,
-          type: 'line'
+              type: 'line',
-        }]
+              yAxisIndex: yAxisIndex,
-      };
+              smooth: true,
-      return option;
+              sampling: 'lttb',
-    },
+            });
-    getDiskOption(id) {
-      let xAxis = [];
-      let yAxis = [];
-      this.data.map(d => {
-        if (d.instance === id && d.seriesName === 'disk') {
-          xAxis = d.timestamps;
-          yAxis = d.values;
           }
         });
-      let option = {
-        color: color,
-        title: {
-          left: 'center',
-          text: '磁盘使用率',
-          textStyle: {
-            color: '#8492a6'
-          },
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        xAxis: {
-          type: 'category',
-          data: xAxis
-        },
-        yAxis: {
-          name: '使用率(%)',
-          type: 'value'
-        },
-        series: [{
-          data: yAxis,
-          type: 'line'
-        }]
-      };
-      return option;
-    },
-    getNetInOption(id) {
-      let xAxis = [];
-      let yAxis = [];
-      this.data.map(d => {
-        if (d.instance === id && d.seriesName === 'netIn') {
-          xAxis = d.timestamps;
-          yAxis = d.values;
       }
-      });
+      this.baseOption.legend.data = legend;
-      let option = {
+      this.baseOption.series = series;
-        color: color,
+      return this.baseOption;
-        title: {
-          left: 'center',
-          text: '入口流量',
-          textStyle: {
-            color: '#8492a6'
     },
   },
-        tooltip: {
-          trigger: 'axis'
-        },
-        xAxis: {
-          type: 'category',
-          data: xAxis
-        },
-        yAxis: {
-          type: 'value',
-          name: '流量(kb/s)'
-        },
-        series: [{
-          data: yAxis,
-          type: 'line'
-        }]
-      };
-      return option;
-    },
-    getNetOutOption(id) {
-      let xAxis = [];
-      let yAxis = [];
-      this.data.map(d => {
-        if (d.instance === id && d.seriesName === 'netOut') {
-          xAxis = d.timestamps;
-          yAxis = d.values;
-        }
-      });
-      let option = {
-        color: color,
-        title: {
-          left: 'center',
-          text: '出口流量',
-          textStyle: {
-            color: '#8492a6'
-          },
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        xAxis: {
-          type: 'category',
-          data: xAxis
-        },
-        yAxis: {
-          type: 'value',
-          name: '流量(kb/s)'
-        },
-        series: [{
-          data: yAxis,
-          type: 'line'
-        }]
-      };
-      return option;
-    },
-    getMemoryOption(id) {
-      let xAxis = [];
-      let yAxis = [];
-      this.data.map(d => {
-        if (d.instance === id && d.seriesName === 'memory') {
-          xAxis = d.timestamps;
-          yAxis = d.values;
-        }
-      });
-      let option = {
-        color: color,
-        title: {
-          left: 'center',
-          text: '内存使用率',
-          textStyle: {
-            color: '#8492a6'
-          },
-        },
-        tooltip: {
-          trigger: 'axis'
-        },
-        xAxis: {
-          type: 'category',
-          data: xAxis
-        },
-        yAxis: {
-          type: 'value',
-          name: '使用率(%)',
-        },
-        series: [{
-          data: yAxis,
-          type: 'line'
-        }]
-      };
-      return option;
-    }
-  },
   watch: {
+    '$route'(to) {
+      if (to.name === "perReportView") {
+        this.id = to.path.split('/')[4];
+        this.init = false;
+        this.getResource();
+      }
+    },
     report: {
       handler(val) {
         if (!val.status || !val.id) {
@@ -254,8 +176,11 @@ export default {
         }
         let status = val.status;
         this.id = val.id;
+        if (this.init) {
+          return;
+        }
         if (status === "Completed" || status === "Running") {
-          this.getResource();
+          // this.getResource();
         } else {
           this.instances = [];
         }
@@ -269,5 +194,11 @@ export default {
 <style scoped>
 .chart-config {
   width: 100%;
+  height: 500px;
+}
+
+.monitor-detail {
+  height: calc(100vh - 375px);
+  overflow: auto;
 }
 </style>

frontend/src/business/components/performance/report/components/TestDetails.vue

@@ -428,7 +428,7 @@ export default {
 <style scoped>
 .chart-config {
   width: 100%;
-  height: 445px;
+  height: 500px;
 }
 
 .test-detail {