From 3c900440e6786dedec43db805ae52a059a06e4a3 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Thu, 28 Dec 2023 16:51:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AF=B9=E6=8E=A5=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=BA=93=E7=9B=91=E6=8E=A7=E5=9B=BE=E8=A1=A8=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E5=AD=98=E5=9C=A8=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../databaseMonitor/instances/areaChart.vue   |  101 +-
 .../instances/conditionBox.vue                |   45 +-
 .../databaseMonitor/instances/monitor.vue     | 1639 +++--------------
 3 files changed, 374 insertions(+), 1411 deletions(-)

diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue b/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
index e84e498..1726024 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
@@ -1,40 +1,30 @@
 <template>
-  <div style="width: 100%; height: 100%;">
+  <div style="width: 100%; height: 100%">
     <BoxTitle :title="title"></BoxTitle>
-    <div style="width: 100%; height: calc(100% - 40px);" :id="layout"></div>
+    <div style="width: 100%; height: calc(100% - 40px)" :id="layout"></div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
-import BoxTitle from '../../components/boxTitle.vue';
+import BoxTitle from '../../components/boxTitle.vue'
 import moment from 'moment'
 export default {
-  props: ["title", "layout", "color", "dataSource", "units", "newUnits"],
+  props: ['title', 'layout', 'color', 'dataSource', 'units', 'newUnits'],
   components: {
     BoxTitle,
   },
   data() {
     return {
       option: {},
-      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     }
   },
-  mounted () {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        this.drawChart()
-      },0)
-    })
-  },
   methods: {
     drawChart() {
-      let seriesData = this.dataSource.map(function(item) {
-        return [item.date, item.value];
+      let seriesData = this.dataSource.map(function (item) {
+        return [item.date * 1000, item.value]
       })
-      seriesData.forEach(function(item) {
-          item.date = new Date(item.date * 1000); // 将时间戳转换为日期对象
-      });
       const isCompute = this.units === 'B' || this.units === 'Kb'
       let myLine = echarts.init(document.getElementById(`${this.layout}`))
       this.option = {
@@ -42,34 +32,32 @@ export default {
         tooltip: {
           trigger: 'axis',
           title: this.title,
-          formatter: (text) => {
-            let num = text.value
-            if(isCompute){
-              num = text.value + this.newUnits
-            }
-            return { name: moment(text.date * 1000).format('HH:mm'), value: num}
+          formatter: (param) => {
+            const [date, value] = param[0].value
+            return `<div>Time:${moment(date).format('HH:mm')}</div>
+                    <div>Data:${isCompute ? value + this.newUnits : value}</div>`
           },
         },
         grid: {
           left: 0,
-          right: 0,
+          right: 20,
           top: 15,
           bottom: 0,
-          containLabel: true
+          containLabel: true,
         },
         xAxis: {
           type: 'time',
           // type: 'category',
           axisTick: {
-            show:false
+            show: false,
           },
           axisLine: {
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
-            }
+              color: 'rgba(115, 191, 255, 0.2)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)",
+            color: 'rgba(173, 230, 238, 1)',
             // formatter: (value,index)=>{
             //   if(index === 0) {
             //     return '        ' + value;
@@ -85,53 +73,58 @@ export default {
         },
         yAxis: {
           type: 'value',
-          title:{
-            text: isCompute ? "unit:" + this.newUnits : null,
+          title: {
+            text: isCompute ? 'unit:' + this.newUnits : null,
           },
           splitLine: {
             show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.2)"
-            }
+              color: 'rgba(115, 191, 255, 0.2)',
+            },
           },
           axisLine: {
-            show:true,
+            show: true,
             lineStyle: {
-              color: "rgba(115, 191, 255, 0.5)"
-            }
+              color: 'rgba(115, 191, 255, 0.5)',
+            },
           },
           axisLabel: {
-            color: "rgba(173, 230, 238, 1)"
+            color: 'rgba(173, 230, 238, 1)',
           },
         },
         series: [
           {
             name: 'login',
             type: 'line',
-            // symbol: 'none',
+            symbol: 'none',
             lineStyle: {
-              width: 8
+              width: 2,
             },
-            // areaStyle: {
-            //   opacity: 1,
-            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            //     { offset: 0, color: this.color[0] },
-            //     { offset: 1, color:  this.color[1] },
-            //   ])
-            // },   
-            data: seriesData
-          }
-        ]
-      };
+            areaStyle: {
+              opacity: 1,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: this.color[0] },
+                { offset: 1, color: this.color[1] },
+              ]),
+            },
+            data: seriesData,
+          },
+        ],
+      }
       myLine.setOption(this.option)
-      window.addEventListener("resize", function () {
-        myLine.resize();
+      window.addEventListener('resize', function () {
+        myLine.resize()
       })
-    }
+    },
+  },
+  watch: {
+    dataSource() {
+      console.log('%c [  ]-128', 'font-size:13px; background:pink; color:#bf2c9f;')
+      this.drawChart()
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
-
 </style>
\ No newline at end of file
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/conditionBox.vue b/src/views/abnormalAlarm/databaseMonitor/instances/conditionBox.vue
index 4a521ce..fee8b9b 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/conditionBox.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/conditionBox.vue
@@ -4,7 +4,7 @@
         <a-col flex="335px">
           <span class="item-label">Database name</span>
           <a-select style="width:180px"
-            v-model="name" 
+            v-model="value.hostId" 
             placeholder="select..."
             :filter-option="filterOption"
             show-arrow 
@@ -31,13 +31,13 @@
         <a-col flex="265px">
           <a-range-picker
             :show-time="true"
-            :value="[moment(startDate), moment(endDate)]"
+            :value="[moment(value.start), moment(value.end)]"
             @change="onRangeDateChange" 
           />
         </a-col>
       </a-row>
       <div class="monitor-search-btns">
-        <a-button class="monitor-search-btns-ant">
+        <a-button class="monitor-search-btns-ant" @click="handleRefresh">
           <img class="icon-add" src="@/assets/images/global/reset-pwd.png" alt="" />
           <span style="margin-left: 10px;">
             Refresh
@@ -52,25 +52,22 @@ import moment from 'moment';
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 export default {
+  props: {
+    value: {
+      type: Object,
+      required: true
+    }
+  },
   data() {
     return {
-      name: undefined,
       timer: 1,
-      startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
-      endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
       DbOptions: [],
       timerOptions: [
         {label: "1Hours",value: 1},
         {label: "2Hours",value: 2},
         {label: "3Hours",value: 3},
         {label: "user-defined",value: 0},
-      ],
-      currId:""
-    }
-  },
-  watch: {
-    name(newValue, oldValue) {
-      this.currId = newValue
+      ]
     }
   },
   created() {
@@ -83,8 +80,8 @@ export default {
     getBeforeHours(num) {
       let currentTime = moment()
       let oneHourAgo = moment().subtract(num, 'hours');  
-      this.startDate = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
-      this.endDate = currentTime.format('YYYY-MM-DD HH:mm:ss')
+      this.value.start = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
+      this.value.end = currentTime.format('YYYY-MM-DD HH:mm:ss')
     },
     moment,
     filterOption(input, option) {
@@ -95,29 +92,37 @@ export default {
     getDbList() {
       getAction("/sysDatabase/sourceList").then(res => {
         if (res.success) {
-          this.name = this.$route.query.id || res.result[0].sourceId
+          this.value.hostId = this.$route.query.id || res.result[0].hostId
           this.DbOptions = res.result.map(item => {
             return {
               label: item.sourceName,
-              value: item.sourceId
+              value: item.hostId
             }
           })
+          this.$emit('change')
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
         }
       })
     },
     onDbChange(val) {
-      this.name = val
+      this.value.hostId = val
+      this.$emit('change')
     },
     onTimeChange(val) {
       this.getBeforeHours(val)
+      this.$emit('change')
     },
     onRangeDateChange(date, dateString) {
       this.timer = 0
-      this.startDate = dateString[0]
-      this.endDate = dateString[1]
+      this.value.start = dateString[0]
+      this.value.end = dateString[1]
+      this.$emit('change')
     },
+
+    handleRefresh() {
+      this.$emit('refresh')
+    }
   },
 }
 </script>
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
index dbee0a2..08b17e8 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
@@ -1,47 +1,39 @@
 <template>
-  <div style="height: 100%;">
-    <ConditionBox></ConditionBox>
+  <div style="height: 100%">
+    <ConditionBox :value="queryParams" @change="getData" @refresh="getData"></ConditionBox>
     <div class="monitor-content">
       <a-row :gutter="10" style="height: auto">
-        <a-col :span="12" style="height: 240px" v-for="(el,i) in chartData" :key="i">
+        <a-col :span="12" style="height: 240px" v-for="(el, i) in chartData" :key="i">
           <div class="monitor-content-item">
             <AreaChart
-              :title="el.name"
+              :title="el.title"
               :layout="`area${i}`"
               :color="el.color"
               :dataSource="el.list"
               :newUnits="el.newUnits"
               :units="el.units"
-            > 
+            >
             </AreaChart>
           </div>
         </a-col>
       </a-row>
-      <div style="height: auto;margin-top: 15px;padding-right: 10px;">
+      <div style="height: auto; margin-top: 15px; padding-right: 10px">
         <BoxTitle title="Connect List"></BoxTitle>
-        <a-row :gutter="20" style="height: auto;margin-top: 15px;">
-          <a-col :span="8" v-for="(el,i) in mailData" :key="i">
+        <a-row :gutter="20" style="height: auto; margin-top: 15px">
+          <a-col :span="8" v-for="(el, i) in mailData" :key="i">
             <div class="monitor-content-item-child">
-              <StackedAreaChart
-                :layout="`stackedArea${i}`"
-                :dataSource="el.data"
-                :legendData="el.legends"
-              >
+              <StackedAreaChart :layout="`stackedArea${i}`" :dataSource="el.data" :legendData="el.legends">
               </StackedAreaChart>
             </div>
           </a-col>
         </a-row>
       </div>
-      <div style="height: auto;margin-top: 15px;padding-right: 10px;">
+      <div style="height: auto; margin-top: 15px; padding-right: 10px">
         <BoxTitle title="Process List"></BoxTitle>
-        <a-row :gutter="20" style="height: auto;margin-top: 15px;">
-          <a-col :span="8" v-for="(el,i) in mailData" :key="i">
+        <a-row :gutter="20" style="height: auto; margin-top: 15px">
+          <a-col :span="8" v-for="(el, i) in mailData" :key="i">
             <div class="monitor-content-item-child">
-              <StackedAreaChart
-                :layout="`stackedArea${i+3}`"
-                :dataSource="el.data"
-                :legendData="el.legends"
-              >
+              <StackedAreaChart :layout="`stackedArea${i + 3}`" :dataSource="el.data" :legendData="el.legends">
               </StackedAreaChart>
             </div>
           </a-col>
@@ -52,1308 +44,295 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import BoxTitle from '../../components/boxTitle.vue';
-import ConditionBox from './conditionBox.vue';
-import AreaChart from './areaChart.vue';
-import StackedAreaChart from './stackedAreaChart.vue';
-import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+import BoxTitle from '../../components/boxTitle.vue'
+import ConditionBox from './conditionBox.vue'
+import AreaChart from './areaChart.vue'
+import StackedAreaChart from './stackedAreaChart.vue'
+import { getAction } from '@/api/manage'
+import dateFormat from '@/components/jeecg/JEasyCron/format-date'
+
 export default {
   components: {
     BoxTitle,
     ConditionBox,
     AreaChart,
-    StackedAreaChart
+    StackedAreaChart,
   },
   data() {
     return {
-      data:[5, 23, 12, 48, 15, 27, 56],
-      // chartData: [
-      //   {
-      //     title: "Database memory state(Total memory)",
-      //     color:["rgba(38, 180, 246,1)","rgba(38, 180, 246,0.2)"],
-      //     data:[5, 23, 12, 48, 15, 27, 56]
-      //   },{
-      //     title: "Database user status(Logins per second)",
-      //     color:["rgba(214, 238, 80,1)","rgba(214, 238, 80,0.2)"],
-      //     data:[5, 23, 12, 48, 15, 27, 56]
-      //   },{
-      //     title: "Database connection number",
-      //     color:["#ec8929"],
-      //     color:["rgba(236, 137, 41,1)","rgba(236, 137, 41,0.2)"],
-      //     data:[5, 23, 12, 48, 15, 27, 56]
-      //   },{
-      //     title: "Database connection response time",
-      //     color:["rgba(84, 95, 213,1)","rgba(84, 95, 213,0.2)"],
-      //     data:[5, 23, 12, 48, 15, 27, 56]
-      //   },{
-      //     title: "Remaining space of the databasce log file",
-      //     color:["rgba(1, 238, 206,1)","rgba(1, 238, 206,0.2)"],
-      //     data:[5, 23, 12, 48, 15, 27, 56]
-      //   },{
-      //     title: "Database file size",
-      //     color:["rgba(237, 190, 61,1)","rgba(237, 190, 61,0.2)"],
-      //     data:[5, 23, 12, 48, 15, 27, 56]
-      //   }
-      // ],
+      queryParams: {
+        hostId: '',
+        start: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+        end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+      },
+
+      data: [5, 23, 12, 48, 15, 27, 56],
       mailData: [
         {
           legends: [
             {
-              connections: "Max Connections",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Max Used Connections",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Aborted Clients",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Aborted Connects",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Threads Connected",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "New Connections",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
+              connections: 'Max Connections',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Max Used Connections',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Aborted Clients',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Aborted Connects',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Threads Connected',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'New Connections',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
             },
           ],
           data: [
             {
               name: 'Email1',
-              data: [120, 132, 101, 134, 90, 230, 210]
-            },{
-              name: 'Email2',
-              data: [220, 182, 191, 234, 290, 330, 310]
-            },{
-              name: 'Email3',
-              data: [150, 232, 201, 154, 190, 330, 410]
-            },{
-              name: 'Email4',
-              data: [320, 332, 301, 334, 390, 330, 320]
-            },{
-              name: 'Email5',
-              data: [820, 932, 901, 934, 1290, 1330, 1320]
+              data: [120, 132, 101, 134, 90, 230, 210],
             },
-          ]
-        },{
-          legends: [
             {
-              connections: "Max Connections",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Max Used Connections",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Aborted Clients",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Aborted Connects",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Threads Connected",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "New Connections",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
+              name: 'Email2',
+              data: [220, 182, 191, 234, 290, 330, 310],
+            },
+            {
+              name: 'Email3',
+              data: [150, 232, 201, 154, 190, 330, 410],
+            },
+            {
+              name: 'Email4',
+              data: [320, 332, 301, 334, 390, 330, 320],
+            },
+            {
+              name: 'Email5',
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
             },
           ],
-          data:[
-            {
-              name: 'Email1',
-              data: [120, 132, 101, 134, 90, 230, 210]
-            },{
-              name: 'Email2',
-              data: [220, 182, 191, 234, 290, 330, 310]
-            },{
-              name: 'Email3',
-              data: [150, 232, 201, 154, 190, 330, 410]
-            },{
-              name: 'Email4',
-              data: [320, 332, 301, 334, 390, 330, 320]
-            },{
-              name: 'Email5',
-              data: [820, 932, 901, 934, 1290, 1330, 1320]
-            },
-          ]
-        },{
+        },
+        {
           legends: [
             {
-              connections: "Max Connections",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Max Used Connections",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Aborted Clients",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Aborted Connects",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "Threads Connected",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
-            },{
-              connections: "New Connections",
-              now: "151.0",
-              min: "151.0",
-              max: "151.0",
-              avg: "151.0"
+              connections: 'Max Connections',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Max Used Connections',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Aborted Clients',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Aborted Connects',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Threads Connected',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'New Connections',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
             },
           ],
-          data:[
+          data: [
             {
               name: 'Email1',
-              data: [120, 132, 101, 134, 90, 230, 210]
-            },{
-              name: 'Email2',
-              data: [220, 182, 191, 234, 290, 330, 310]
-            },{
-              name: 'Email3',
-              data: [150, 232, 201, 154, 190, 330, 410]
-            },{
-              name: 'Email4',
-              data: [320, 332, 301, 334, 390, 330, 320]
-            },{
-              name: 'Email5',
-              data: [820, 932, 901, 934, 1290, 1330, 1320]
+              data: [120, 132, 101, 134, 90, 230, 210],
             },
-          ]
+            {
+              name: 'Email2',
+              data: [220, 182, 191, 234, 290, 330, 310],
+            },
+            {
+              name: 'Email3',
+              data: [150, 232, 201, 154, 190, 330, 410],
+            },
+            {
+              name: 'Email4',
+              data: [320, 332, 301, 334, 390, 330, 320],
+            },
+            {
+              name: 'Email5',
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
+            },
+          ],
+        },
+        {
+          legends: [
+            {
+              connections: 'Max Connections',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Max Used Connections',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Aborted Clients',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Aborted Connects',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'Threads Connected',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+            {
+              connections: 'New Connections',
+              now: '151.0',
+              min: '151.0',
+              max: '151.0',
+              avg: '151.0',
+            },
+          ],
+          data: [
+            {
+              name: 'Email1',
+              data: [120, 132, 101, 134, 90, 230, 210],
+            },
+            {
+              name: 'Email2',
+              data: [220, 182, 191, 234, 290, 330, 310],
+            },
+            {
+              name: 'Email3',
+              data: [150, 232, 201, 154, 190, 330, 410],
+            },
+            {
+              name: 'Email4',
+              data: [320, 332, 301, 334, 390, 330, 320],
+            },
+            {
+              name: 'Email5',
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
+            },
+          ],
         },
       ],
-      chartData:[
+      chartData: [
         {
-            "min": 781136.00,
-            "avg": 789461.20,
-            "max": 815648.00,
-            "now": 781232.00,
-            "name": "dbMemory",
-            "units": "Kb",
-            "list": [
-                {
-                    "name": "dbMemory",
-                    "date": 1703634395,
-                    "value": 781232.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703634455,
-                    "value": 781332.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703634515,
-                    "value": 781172.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703634575,
-                    "value": 781428.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703634635,
-                    "value": 781348.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703634695,
-                    "value": 781404.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703634755,
-                    "value": 781376.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703634815,
-                    "value": 781248.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703634875,
-                    "value": 781136.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703634935,
-                    "value": 781376.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703634995,
-                    "value": 781268.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635055,
-                    "value": 781540.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635115,
-                    "value": 781536.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635175,
-                    "value": 781464.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635235,
-                    "value": 781860.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635295,
-                    "value": 782124.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635355,
-                    "value": 782316.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635415,
-                    "value": 782204.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635475,
-                    "value": 782216.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635535,
-                    "value": 782344.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635595,
-                    "value": 782100.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635655,
-                    "value": 782712.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635715,
-                    "value": 782368.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635775,
-                    "value": 782512.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635835,
-                    "value": 782588.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635895,
-                    "value": 782716.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703635955,
-                    "value": 782764.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636015,
-                    "value": 782892.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636075,
-                    "value": 782868.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636135,
-                    "value": 782616.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636195,
-                    "value": 782616.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636255,
-                    "value": 782624.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636315,
-                    "value": 782820.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636375,
-                    "value": 783008.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636435,
-                    "value": 800112.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636513,
-                    "value": 797056.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636555,
-                    "value": 797572.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636615,
-                    "value": 797828.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636675,
-                    "value": 797828.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636735,
-                    "value": 797884.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636795,
-                    "value": 798440.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636855,
-                    "value": 798200.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636915,
-                    "value": 798200.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703636975,
-                    "value": 798176.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637035,
-                    "value": 798364.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637095,
-                    "value": 798348.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637155,
-                    "value": 798604.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637215,
-                    "value": 798664.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637275,
-                    "value": 798920.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637335,
-                    "value": 798792.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637395,
-                    "value": 815648.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637455,
-                    "value": 799016.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637515,
-                    "value": 798848.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637575,
-                    "value": 798736.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637635,
-                    "value": 798784.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637695,
-                    "value": 798912.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637755,
-                    "value": 799004.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637815,
-                    "value": 798724.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637875,
-                    "value": 799040.0
-                },
-                {
-                    "name": "dbMemory",
-                    "date": 1703637935,
-                    "value": 798844.0
-                }
-            ],
-            "title": "数据库内存状态(总内存)"
+          title: 'Database memory state(Total memory)',
+          color: ['rgba(38, 180, 246, .5)', 'rgba(38, 180, 246, .1)'],
+          list: [],
+          units: '',
+          newUnits: '',
         },
         {
-            "min": 1.00,
-            "avg": 1.13,
-            "max": 2.00,
-            "now": 1.00,
-            "name": "login",
-            "units": "",
-            "list": [
-                {
-                    "name": "login",
-                    "date": 1703634391,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703634451,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703634511,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703634571,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703634631,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703634691,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703634751,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703634811,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703634871,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703634932,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703634991,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635051,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635111,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635171,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635231,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635291,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635351,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635411,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635471,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635531,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635591,
-                    "value": 2.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635651,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635711,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635771,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635831,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635891,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703635951,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636011,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636071,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636131,
-                    "value": 2.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636191,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636251,
-                    "value": 2.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636311,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636371,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636431,
-                    "value": 2.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636491,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636551,
-                    "value": 2.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636611,
-                    "value": 2.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636671,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636731,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636791,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636851,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636911,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703636971,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637031,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637091,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637151,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637211,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637271,
-                    "value": 2.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637331,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637391,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637451,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637511,
-                    "value": 2.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637571,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637631,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637691,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637751,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637811,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637871,
-                    "value": 1.0
-                },
-                {
-                    "name": "login",
-                    "date": 1703637931,
-                    "value": 1.0
-                }
-            ],
-            "title": "数据库用户状况(每秒登录数)"
+          title: 'Database user status(Logins per second)',
+          color: ['rgba(214, 238, 80, .8)', 'rgba(214, 238, 80, .1)'],
+          list: [],
+          units: '',
+          newUnits: '',
         },
         {
-            "min": 30.00,
-            "avg": 30.50,
-            "max": 33.00,
-            "now": 30.00,
-            "name": "connections",
-            "units": "",
-            "list": [
-                {
-                    "name": "connections",
-                    "date": 1703634388,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703634448,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703634508,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703634568,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703634628,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703634688,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703634748,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703634808,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703634868,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703634928,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703634988,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635048,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635108,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635168,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635228,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635288,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635348,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635408,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635468,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635528,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635588,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635648,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635708,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635768,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635829,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635888,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703635948,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636008,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636068,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636128,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636188,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636248,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636308,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636368,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636428,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636488,
-                    "value": 30.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636548,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636608,
-                    "value": 33.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636668,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636728,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636788,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636848,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636908,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703636968,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637028,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637088,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637148,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637208,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637268,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637328,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637388,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637448,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637508,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637568,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637628,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637688,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637748,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637808,
-                    "value": 32.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637868,
-                    "value": 31.0
-                },
-                {
-                    "name": "connections",
-                    "date": 1703637928,
-                    "value": 31.0
-                }
-            ],
-            "title": "数据库连接数"
+          title: 'Database connection number',
+          color: ['#ec8929'],
+          color: ['rgba(236, 137, 41, .5)', 'rgba(236, 137, 41, .1)'],
+          list: [],
+          units: '',
+          newUnits: '',
         },
         {
-            "min": 0.00,
-            "avg": 0.00,
-            "max": 0.00,
-            "now": 0.00,
-            "name": "latency",
-            "units": "s",
-            "list": [
-                {
-                    "name": "latency",
-                    "date": 1703634389,
-                    "value": 7.08E-4
-                },
-                {
-                    "name": "latency",
-                    "date": 1703634449,
-                    "value": 6.51E-4
-                },
-                {
-                    "name": "latency",
-                    "date": 1703634509,
-                    "value": 6.94E-4
-                },
-                {
-                    "name": "latency",
-                    "date": 1703634569,
-                    "value": 7.430000000000001E-4
-                },
-                {
-                    "name": "latency",
-                    "date": 1703634629,
-                    "value": 6.65E-4
-                },
-                {
-                    "name": "latency",
-                    "date": 1703634689,
-                    "value": 6.51E-4
-                },
-                {
-                    "name": "latency",
-                    "date": 1703634749,
-                    "value": 4.4E-4
-                },
-                {
-                    "name": "latency",
-                    "date": 1703634809,
-                    "value": 7.46E-4
-                },
-                
-            ],
-            "title": "数据库连接响应时间"
+          title: 'Database connection response time',
+          color: ['rgba(84, 95, 213, .5)', 'rgba(84, 95, 213, .1)'],
+          list: [],
+          units: '',
+          newUnits: '',
         },
         {
-            "min": 1006632960.00,
-            "avg": 1006632960.00,
-            "max": 1006632960.00,
-            "now": 1006632960.00,
-            "name": "logRemainingSize",
-            "units": "B",
-            "list": [
-                {
-                    "name": "logRemainingSize",
-                    "date": 1703634394,
-                    "value": 1.00663296E9
-                },
-                {
-                    "name": "logRemainingSize",
-                    "date": 1703634454,
-                    "value": 1.00663296E9
-                },
-                {
-                    "name": "logRemainingSize",
-                    "date": 1703634514,
-                    "value": 1.00663296E9
-                },
-                {
-                    "name": "logRemainingSize",
-                    "date": 1703634574,
-                    "value": 1.00663296E9
-                },
-                
-            ],
-            "title": "数据库日志文件剩余空间"
+          title: 'Remaining space of the databasce log file',
+          color: ['rgba(1, 238, 206, .5)', 'rgba(1, 238, 206, .1)'],
+          list: [],
+          units: '',
+          newUnits: '',
         },
         {
-            "min": 150313619.00,
-            "avg": 150519784.33,
-            "max": 150731411.00,
-            "now": 150313619.00,
-            "name": "dblSize",
-            "units": "B",
-            "list": [
-                {
-                    "name": "dblSize",
-                    "date": 1703634390,
-                    "value": 1.50313619E8
-                },
-                {
-                    "name": "dblSize",
-                    "date": 1703634451,
-                    "value": 1.50321811E8
-                },
-                {
-                    "name": "dblSize",
-                    "date": 1703634510,
-                    "value": 1.50321811E8
-                },
-                {
-                    "name": "dblSize",
-                    "date": 1703634570,
-                    "value": 1.50321811E8
-                },
-                {
-                    "name": "dblSize",
-                    "date": 1703634630,
-                    "value": 1.50330003E8
-                },
-                {
-                    "name": "dblSize",
-                    "date": 1703634690,
-                    "value": 1.50346387E8
-                },
-                {
-                    "name": "dblSize",
-                    "date": 1703634750,
-                    "value": 1.50346387E8
-                },
-                
-            ],
-            "title": "数据库数据文件大小"
-        }
-    ]
+          title: 'Database file size',
+          color: ['rgba(237, 190, 61, .5)', 'rgba(237, 190, 61, .1)'],
+          list: [],
+          units: '',
+          newUnits: '',
+        },
+      ],
     }
   },
   computed: {
-    unitConversion(){
-      return function(number,units){
-        if( units === 'Kb') {
-         number =  number *1024
+    unitConversion() {
+      return function (number, units) {
+        if (units === 'Kb') {
+          number = number * 1024
         }
-        if (number < 1024 ) return "B"
+        if (number < 1024) return 'B'
         number = number / 1024
-        if (number < 1024) return "KB"
+        if (number < 1024) return 'KB'
         number = number / 1024
-        if (number < 1024) return "MB"
+        if (number < 1024) return 'MB'
         number = number / 1024
-        console.log('TB',number)
+        console.log('TB', number)
         if (number < 1024) return 'GB'
         number = number / 1024
         if (number < 1024) return 'TB'
@@ -1363,69 +342,55 @@ export default {
         if (number < 1024) return 'EB'
       }
     },
-    dataConversion(){
-      return function(number,units){
+    dataConversion() {
+      return function (number, units) {
         const obj = {
           KB: 1024,
-          MB: Math.pow(1024,2),
-          GB: Math.pow(1024,3),
-          TB: Math.pow(1024,4),
-          PB: Math.pow(1024,5),
-          EB: Math.pow(1024,6),
+          MB: Math.pow(1024, 2),
+          GB: Math.pow(1024, 3),
+          TB: Math.pow(1024, 4),
+          PB: Math.pow(1024, 5),
+          EB: Math.pow(1024, 6),
         }
         // console.log(obj[units],number / obj[units])
         return (number / obj[units]).toFixed(2)
       }
-    }
     },
-  mounted () {
-    // 聂子炎的接口好了之后 就用这个请求接口，换一下接口地址
-    // const params = {
-      // hostId: '10488',
-      // hostId: this.$route.params.id,
-      // end: moment().format('YYYY-MM-DD HH:mm:ss'),
-      // start: moment().subtract('hour', +1).format('YYYY-MM-DD HH:mm:ss'),
-    // }
-    // this.text = this.$route.query.name
-    // getAction('/omms/monitor/db/item/detail', params).then((res) => {
-    //   this.list = res.result
-    //   this.list.map(item=>{
-    //     if(item.units === 'B' || item.units === 'Kb'){
-    //      item.newUnits = this.unitConversion(item.min,item.units)
-    //       item.list.map(val =>{
-    //         let number = val.value
-    //         if(item.units ==="Kb"){
-    //           number = val.value *1024
-    //         }
-    //           val.value = Number(this.dataConversion(number,item.newUnits))
-    //       })
-    //       console.log(item)
-    //     }
-    //   })
-    // 这个不需要
-    //   this.$nextTick(() => {
-    //     this.generateChart()
-    //   })
-    // })
-    // 聂子炎的接口好了之后，这些就可删掉了
-    this.chartData.map(item=>{
-        if(item.units === 'B' || item.units === 'Kb'){
-         item.newUnits = this.unitConversion(item.min,item.units)
-          item.list.map(val =>{
-            let number = val.value
-            if(item.units ==="Kb"){
-              number = val.value *1024
-            }
-              val.value = Number(this.dataConversion(number,item.newUnits))
-          })
-          console.log(item)
-        }
-      })
   },
   methods: {
+    // 获取数据
+    async getData() {
+      const hide = this.$message.loading('loading...', 0)
+      try {
+        const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
+        if (success) {
+          this.chartData.forEach((chartItem, index) => {
+            const item = result[index]
+            if (item.units === 'B' || item.units === 'Kb') {
+              item.newUnits = this.unitConversion(item.min, item.units)
+              item.list.forEach((val) => {
+                let number = val.value
+                if (item.units === 'Kb') {
+                  number = val.value * 1024
+                }
+                val.value = Number(this.dataConversion(number, item.newUnits))
+              })
+            }
+            console.log('%c [  ]-379', 'font-size:13px; background:pink; color:#bf2c9f;', item.list)
+            Object.assign(chartItem, item)
+          })
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        hide()
+      }
+    },
     //生成图表（运管系统代码）
     generateChart() {
-      this.list.map((item,index) => {
+      this.list.map((item, index) => {
         let color = '#49A8F0'
         switch (index) {
           case 1:
@@ -1454,12 +419,12 @@ export default {
               },
             },
           },
-          yAxis:{
-            title:{
-              text:isCompute?"单位:"+item.newUnits:null,
-            }          
+          yAxis: {
+            title: {
+              text: isCompute ? '单位:' + item.newUnits : null,
+            },
           },
-          
+
           color: color,
           // seriesField: 'name',
           areaStyle: () => {
@@ -1471,10 +436,10 @@ export default {
             title: item.title,
             formatter: (text) => {
               let num = text.value
-              if(isCompute){
+              if (isCompute) {
                 num = text.value + item.newUnits
               }
-              return { name: moment(text.date * 1000).format('HH:mm'), value: num}
+              return { name: moment(text.date * 1000).format('HH:mm'), value: num }
             },
           },
         })
@@ -1486,17 +451,17 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.monitor-content{
+.monitor-content {
   height: calc(100% - 60px);
   margin-top: 10px;
   overflow-y: auto;
   overflow-x: hidden;
-  &-item{
+  &-item {
     width: 100%;
     height: 100%;
     padding: 5px 10px 5px 0;
   }
-  &-item-child{
+  &-item-child {
     width: 100%;
     height: auto;
   }