fix: 对接数据库监控图表接口，修改存在的问题

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>

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>