fix：服务器monitor页面tooltip增加单位

src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue

@@ -10,10 +10,11 @@
 </template>
 
 <script>
+import moment from 'moment'
 import * as echarts from 'echarts'
 import BoxTitle from '../../components/boxTitle.vue'
 export default {
-  props: ['title', 'layout', 'dataSource', 'xData'],
+  props: ['title', 'layout', 'dataSource', 'xData', 'units', 'newUnits'],
   components: {
     BoxTitle,
   },
@@ -48,10 +49,25 @@ export default {
           data: item.data,
         }
       })
+      let that = this
       this.option = {
         color: ['#00ff5a', '#0096ff', '#ffc600'],
         tooltip: {
           trigger: 'axis',
+          formatter: function(params) {
+            let tooltip = params[0].name + '<br>'; // 获取原有的tooltip中的第一行文本
+            params.forEach(function(item) {
+                let value = item.value;
+
+                let unit = undefined !== that.units ? that.units : ''
+                unit = undefined !== that.newUnits ? that.newUnits : unit
+                // 拼接单位
+                value += ' ' + unit;
+
+                tooltip += item.marker + item.seriesName + ': ' + value + '<br>'; // 拼接带有单位的文本
+            });
+            return tooltip;
+          }
         },
         grid: {
           left: 0,

src/views/abnormalAlarm/serverMonitor/instances/monitor.vue

@@ -57,6 +57,8 @@
               :layout="'line' + index"
               :xData="item.xData"
               :dataSource="item.data"
+              :newUnits="item.newUnits"
+              :units="item.units"
               @zoom="handelZoom"
             >
             </LineChart>
@@ -92,6 +94,43 @@ export default {
     LineChart,
     CreateRules,
   },
+  computed:{
+    unitConversion(){
+      return function(number,units){
+        if( units === 'Kb') {
+         number =  number *1024
+        }
+        if (number < 1024 ) return "B"
+        number = number / 1024
+        if (number < 1024) return "KB"
+        number = number / 1024
+        if (number < 1024) return "MB"
+        number = number / 1024
+        console.log('TB',number)
+        if (number < 1024) return 'GB'
+        number = number / 1024
+        if (number < 1024) return 'TB'
+        number = number / 1024
+        if (number < 1024) return 'PB'
+        number = number / 1024
+        if (number < 1024) return 'EB'
+      }
+    },
+    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),
+        }
+        // console.log(obj[units],number / obj[units])
+        return (number / obj[units]).toFixed(2)
+      }
+    }
+  },
   data() {
     return {
       currId: '',
@@ -134,17 +173,25 @@ export default {
     // 获取所有监控项的itemId
     getMonitorItemId() {
       let params = {
+        sourceType: 'Server',
         sourceId: this.currId,
       }
-      getAction('/alarmItem/alarmItems', params).then((res) => {
+      getAction('/alarmRule/getItems', params).then((res) => {
         if (res.success) {
           this.MonitorItem = res.result
-          this.chartDatas = Object.entries(this.MonitorItem).map(([k, v]) => ({
-            title: k,
-            value: v,
+          this.chartDatas = this.MonitorItem.map(f=>({
+            title: f.name,
+            value: f.itemId,
+            type: f.valueType,
             xData: [],
             data: [],
           }))
+          // this.chartDatas = Object.entries(this.MonitorItem).map(([k, v]) => ({
+          //   title: k,
+          //   value: v,
+          //   xData: [],
+          //   data: [],
+          // }))
           this.getMonitorData()
         }
       })
@@ -154,12 +201,13 @@ export default {
       this.chartDatas.forEach(async (item) => {
         const params = {
           itemId: item.value,
-          itemType: item.valueType,
+          itemType: item.type,
           start: this.queryParams.startDate,
           end: this.queryParams.endDate,
         }
         try {
           const res = await this.getMonitorItemData(params)
+          console.log("getMonitorItemData>",res);
           item.xData = res.xData
           item.data = [
             {
@@ -167,6 +215,8 @@ export default {
               data: res.data,
             },
           ]
+          item.units = res.units
+          item.newUnits = res.newUnits
         } catch (error) {
           console.error(error)
         }
@@ -174,19 +224,43 @@ export default {
     },
     async getMonitorItemData(params) {
       const res = await getAction('/systemMonitor/queryItemHistory', params)
+      let data = []
       // return res
       if (res.success) {
         let name = res.result.name
+        let units = res.result.units
+        let newUnits = res.result.newUnits
         let xData = res.result.list.map((item) => {
           return dateFormat(new Date(item.date * 1000), 'hh:mm')
         })
-        let data = res.result.list.map((item_1) => {
-          return Number(item_1.value.toFixed(2))
-        })
+
+        let item = res.result;
+        if(item.units === 'B' || item.units === 'Kb'){
+         item.newUnits = this.unitConversion(item.min,item.units)
+         newUnits = item.newUnits
+          item.list.map(val =>{
+            let number = val.value
+            if(item.units ==="Kb"){
+              number = val.value *1024
+            }
+              val.value = Number(this.dataConversion(number,item.newUnits))
+              data.push({
+                value: Number(val.value),
+                Date: moment(val.date * 1000).format('hh:mm')
+              })
+            })
+          console.log(item)
+        } else {
+          data = res.result.list.map((item_1) => {
+            return Number(item_1.value.toFixed(2))
+          })
+        }
         return {
           name,
           xData,
           data,
+          units,
+          newUnits
         }
       }
     },