服务器和进程页面图表颜色调整

服务器详情页面时间线组件调整，及接口调试数据渲染

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.11.4",
+    "@antv/g2plot": "^2.4.23",
     "@jeecg/antd-online-mini": "3.4.3-beta2",
     "@tinymce/tinymce-vue": "2.1.0",
     "@toast-ui/editor": "^2.1.2",
@@ -125,4 +126,4 @@
     "last 2 versions",
     "not ie <= 10"
   ]
-}
+}

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

@@ -155,8 +155,10 @@
                     </a-col>
                     <a-col :span="12" style="height: 26px">
                       <a-row style="height: 100%">
-                        <a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
-                        <a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osVersion }}</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
+                        <!-- <a-col :span="12" class="basic-info-detail-content-key">OS Version:</a-col>
+                        <a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osVersion }}</a-col> -->
                       </a-row>
                     </a-col>
                   </a-row>
@@ -175,18 +177,22 @@
                     </a-col>
                   </a-row>
                   <a-row style="height: 26px">
-                    <a-col :span="12" style="height: 26px">
+                    <a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">OS Name:</a-col>
+                    <a-col :span="20" style="height: 26px" class="basic-info-detail-content-val">
+                      {{ detailInfo.osName }}
+                    </a-col>
+                    <!-- <a-col :span="12" style="height: 26px">
                       <a-row style="height: 100%">
                         <a-col :span="12" class="basic-info-detail-content-key">OS Name:</a-col>
                         <a-col :span="12" class="basic-info-detail-content-val">{{ detailInfo.osName }}</a-col>
                       </a-row>
-                    </a-col>
+                    </a-col> -->
-                    <a-col :span="12" style="height: 26px">
+                    <!-- <a-col :span="12" style="height: 26px">
                       <a-row style="height: 100%">
                         <a-col :span="12" class="basic-info-detail-content-key">Bios Version:</a-col>
                         <a-col :span="12" class="basic-info-detail-content-val">FX705GM.307</a-col>
                       </a-row>
-                    </a-col>
+                    </a-col> -->
                   </a-row>
                   <a-row style="height: 26px">
                     <a-col :span="4" style="height: 26px" class="basic-info-detail-content-key">CPU:</a-col>
@@ -239,11 +245,17 @@
                     </a-col>
                   </a-row>
                   <a-row style="height: 26px">
-                    <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Start Time:</a-col>
+                    <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">OS Version:</a-col>
                     <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
                       >2023-03-01 14:00:01</a-col
                     >
                   </a-row>
+                  <a-row style="height: 26px">
+                    <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Start Time:</a-col>
+                    <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val">
+                      {{ detailInfo.osVersion }}
+                    </a-col>
+                  </a-row>
                   <a-row style="height: 26px">
                     <a-col :span="7" style="height: 26px" class="basic-info-detail-content-key">Model Number:</a-col>
                     <a-col :span="17" style="height: 26px" class="basic-info-detail-content-val"
@@ -284,6 +296,12 @@
         </div>
       </div>
     </div>
+    <!-- <div class="Timeline">
+      <p>事件时间线</p>
+      <div>
+        <div id="timeL" style="width: 100%; height: 140px"></div>
+      </div>
+    </div> -->
     <div class="content-center">
       <BoxTitle title="Event Timelinen">
         <template slot="right">
@@ -344,50 +362,36 @@
 </template>
 
 <script>
-var base = +new Date(1968, 9, 3)
-var oneDay = 24 * 3600 * 1000
-var date = []
-
-var data = [Math.random() * 300]
-
-for (var i = 1; i < 200; i++) {
-  var now = new Date((base += oneDay))
-  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
-  data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
-}
 var data1 = []
-var dataCount = 6
+// var dataCount = 3
-var startTime = +new Date()
+var startTime, endTime
 var categories = ['cpu']
 var types = [
-  { name: 'Halt', color: '#ec3e0d' },
+  { name: 'Normal', color: '#8dac39' },
-  { name: 'Critical', color: '#ff683e' },
+  { name: 'Warning', color: '#a2681e' },
-  { name: 'Problematic', color: '#ffbf2e' },
+  { name: 'OffLine', color: '#ec3e0d' },
-  { name: 'Maintained', color: '#a2681e' },
-  { name: 'Anomalous', color: '#8dac39' },
-  { name: 'Suspension', color: '#6c6c6c' },
 ]
 var legendData = types.map((item) => {
   return item.name
 })
 // Generate mock data
-categories.forEach((category, index) => {
+// categories.forEach((category, index) => {
-  var baseTime = startTime
+//   var baseTime = startTime
-  for (var i = 0; i < dataCount; i++) {
+//   for (var i = 0; i < dataCount; i++) {
-    var typeItem = types[i]
+//     var typeItem = types[i]
-    var duration = Math.round(Math.random() * 10000)
+//     var duration = Math.round(Math.random() * 10000)
-    data1.push({
+//     data1.push({
-      name: typeItem.name,
+//       name: typeItem.name,
-      value: [index, baseTime, (baseTime += duration), duration],
+//       value: [index, baseTime, (baseTime += duration), duration],
-      itemStyle: {
+//       itemStyle: {
-        normal: {
+//         normal: {
-          color: typeItem.color,
+//           color: typeItem.color,
-        },
+//         },
-      },
+//       },
-    })
+//     })
-    baseTime += Math.round(Math.random() * 2000)
+//     baseTime += Math.round(Math.random() * 2000)
-  }
+//   }
-})
+// })
 function renderItem1(params, api) {
   var categoryIndex = api.value(0)
   var start = api.coord([api.value(1), categoryIndex])
@@ -421,6 +425,9 @@ import infiniteScroll from 'vue-infinite-scroll'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 import * as echarts from 'echarts'
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
+import { Bar, G2 } from '@antv/g2plot'
+import moment from 'moment'
+import { log } from '@antv/g2plot/lib/utils'
 export default {
   directives: { infiniteScroll },
   components: {
@@ -455,7 +462,11 @@ export default {
       currItemId: '',
       // cpu
       areaCpu: null,
-      cpuData: {},
+      cpuData: {
+        max: 0,
+        min: 0,
+        avg: 0,
+      },
     }
   },
   mounted() {
@@ -477,6 +488,8 @@ export default {
         }
         this.getBasiclnfo(this.currId)
         this.getCpuUtilizationData()
+        this.getTimeLineData()
+        // this.EchartsTimeline()
       } else {
         this.$message.warning('This operation fails. Contact your system administrator')
       }
@@ -492,12 +505,123 @@ export default {
     })
     this.$nextTick(() => {
       setTimeout(() => {
-        this.drawTimeline()
         this.drawGuageLoads()
       }, 0)
     })
   },
   methods: {
+    // Echarts (时间线)
+    EchartsTimeline() {
+      console.log(3456789)
+      const params = {
+        itemId: '37550',
+        itemType: 0,
+        start: '2023-09-21 00:00:00',
+        end: '2023-09-21 18:54:00',
+      }
+      getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
+        let data = res.result
+        const percentage = 100 / data.length
+        let indexArr = [[0, 0]]
+        for (let i = 1; i < data.length; i++) {
+          const num = i + 1
+          if (i === data.length - 1) {
+            indexArr[0][1] = data.length
+          }
+          if (data[i - 1].value != data[i].value) {
+            indexArr[0][1] = i
+            indexArr.unshift([i, num])
+          }
+        }
+        let objArr = [],
+          echartData = []
+        indexArr.map((item) => {
+          objArr.push(data.slice(item[0], item[1]))
+        })
+        const statusConversion = (val) => {
+          if (val == 1) {
+            return '正常'
+          } else if (val == 2) {
+            return '警告'
+          } else {
+            return '离线'
+          }
+        }
+        objArr.map((item, index) => {
+          let obj = null
+          if (index === 0) {
+            const arr = objArr[index + 1]
+            let timeInterval
+            if (arr) {
+              timeInterval = [item[0].date, arr[arr.length - 1].date]
+            } else {
+              timeInterval = [item[0].date, item[item.length - 1].date]
+            }
+            obj = {
+              type: 'Cpu',
+              value: statusConversion(item[0].value),
+              valueInterval: [0, item.length * percentage],
+              timeInterval: timeInterval, // 时间区间
+            }
+          } else if (index === objArr.length - 1) {
+            const arr = echartData[echartData.length - 1]
+            obj = {
+              type: 'Cpu',
+              value: statusConversion(item[0].value),
+              valueInterval: [arr.valueInterval[1], 100],
+              timeInterval: [arr.timeInterval[1], item[0].date], // 时间区间
+            }
+          } else {
+            const arr = echartData[echartData.length - 1],
+              arr1 = objArr[index + 1],
+              num = arr.valueInterval[1],
+              length = item.length * percentage
+            obj = {
+              type: 'Cpu',
+              value: statusConversion(item[0].value),
+              valueInterval: [num, length + num],
+              timeInterval: [arr.timeInterval[1], arr1[arr1.length - 1].date], // 时间区间
+            }
+          }
+          echartData.push(obj)
+        })
+        if (this.barPlot) {
+          this.barPlot.changeData(echartData)
+          return
+        }
+        const timeDateHours = (val) => {
+          return moment(val).format('HH:mm')
+        }
+        this.barPlot = new Bar('timeL', {
+          data: echartData.reverse(),
+          xField: 'valueInterval',
+          yField: 'type',
+          isRange: true,
+          seriesField: 'value',
+          padding: 20,
+          yAxis: {
+            label: null,
+          },
+          xAxis: {
+            label: {
+              formatter: (params) => {
+                // console.log(params)
+                const percentage = params / 100,
+                  index = parseInt((data.length - 1) * percentage)
+
+                return timeDateHours(data[index].date)
+              },
+            },
+          },
+          legend: {
+            position: "top-left'",
+          },
+          tooltip: false,
+        })
+        this.barPlot.render()
+      })
+    },
+    moment,
     // Basic lnformation
     getBasiclnfo(sourceId) {
       let params = { hostId: sourceId }
@@ -515,27 +639,81 @@ export default {
     //CPU utilization
     getCpuUtilizationData() {
       let params = {
-        // itemId: this.currItemId,
+        itemId: this.currItemId,
-        itemId: '37550',
+        // itemId: '37550',
         itemType: 0,
         start: `${dateFormat(new Date(), 'yyyy-MM-dd')} 00:00:00`,
         end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
       }
       getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
         const arr = res.result.map((x) => x.value)
-        this.cpuData.max = Math.max(...arr) * 100
+        console.log(Math.max(...arr), Math.min(...arr))
-        this.cpuData.min = Math.min(...arr) * 100
+        this.cpuData.max = Math.max(...arr).toFixed(2)
+        this.cpuData.min = Math.min(...arr).toFixed(2)
         let sum = arr.reduce((tatal, num) => tatal + num, 0)
-        this.cpuData.avg = (sum / arr.length).toFixed(2) * 100
+        this.cpuData.avg = (sum / arr.length).toFixed(2)
         this.cpuData.xData = res.result.map((item) => {
           return dateFormat(new Date(item.date), 'hh:mm')
         })
         this.cpuData.yData = res.result.map((item) => {
-          return item.value * 100
+          return item.value
         })
         this.drawAreaCpu()
       })
     },
+    //Event Timelinen
+    getTimeLineData() {
+      let params = {
+        itemId: this.currItemId,
+        // itemId: '37550',
+        itemType: 0,
+        start: `${dateFormat(new Date(), 'yyyy-MM-dd')} 00:00:00`,
+        end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+      }
+      getAction('/systemMonitor/queryItemHistoryData', params).then((res) => {
+        let data = res.result
+        startTime = data[0].clock * 1000
+        let indexArr = [[0, 0]]
+        for (let i = 1; i < data.length; i++) {
+          const num = i + 1
+          if (i === data.length - 1) {
+            indexArr[0][1] = data.length
+          }
+          if (data[i - 1].value != data[i].value) {
+            indexArr[0][1] = i
+            indexArr.unshift([i, num])
+          }
+        }
+        let objArr = [],
+          echartData = []
+        indexArr.map((item) => {
+          objArr.push(data.slice(item[0], item[1]))
+        })
+        categories.forEach((category, idx) => {
+          objArr.map((item, index) => {
+            let obj = null
+            let timeInterval
+            if (item.length > 0) {
+              timeInterval = [item[0].clock * 1000, item[0].clock * 1000 + 60000 * item.length]
+              obj = {
+                name: item[0].value == 1 ? 'Normal' : item[0].value == 2 ? 'Warning' : 'OffLine',
+                value: [idx, timeInterval[0], timeInterval[1], 60000 * item.length],
+                itemStyle: {
+                  normal: {
+                    color: item[0].value == 1 ? '#8dac39' : item[0].value == 2 ? '#a2681e' : '#ec3e0d',
+                  },
+                },
+              }
+            }
+
+            echartData.push(obj)
+          })
+        })
+        data1 = echartData
+        this.drawTimeline()
+      })
+    },
+
     getSysServer(callBack) {
       this.loading = true
       let params = {
@@ -603,10 +781,9 @@ export default {
     drawTimeline() {
       this.timeLine = echarts.init(document.getElementById('timeLine'))
       let option = {
-        color: ['#7b9ce1', '#bd6d6c', '#75d874', '#e0bc78', '#dc77dc', '#72b362'],
         tooltip: {
           formatter: function (params) {
-            return params.marker + params.name + ': ' + params.value[3] + ' ms'
+            return params.marker + params.name + ': ' + params.value[3] / 60000 + 's'
           },
         },
         grid: {
@@ -623,8 +800,12 @@ export default {
           axisLabel: {
             color: '#ade6ee',
             fontSize: 14,
-            formatter: function (val) {
+            formatter: function (val, index) {
-              return Math.max(0, val - startTime) + ' ms'
+              if (index === 0) {
+                return '          ' + dateFormat(new Date(val), 'hh:mm')
+              }
+
+              return dateFormat(new Date(val), 'hh:mm') + '             '
             },
           },
           splitLine: {
@@ -1491,4 +1672,18 @@ export default {
     height: calc(100% - 40px);
   }
 }
+.Timeline {
+  margin-top: 30px;
+  > p {
+    color: #1a2449 !important;
+    font-size: 16px;
+    font-weight: bold;
+  }
+  > div {
+    width: 1700px;
+    height: 168px;
+    background: #ffffff;
+    border-radius: 4px;
+  }
+}
 </style>

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

@@ -211,7 +211,7 @@ export default {
       ranked: {
         content: null,
         legend: [],
-        color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
+        color: ['#2d5cd3', '#f4ff7d', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
       },
       processCpu: {
         content: null,