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

服务器详情页面时间线组件调整,及接口调试数据渲染
This commit is contained in:
任珮宇 2023-09-28 18:09:51 +08:00
parent 9ff580fdd6
commit 619c57e7b5
3 changed files with 253 additions and 57 deletions

View File

@ -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"
]
}
}

View File

@ -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-val">{{ detailInfo.osVersion }}</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">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 :span="12" style="height: 26px">
</a-col> -->
<!-- <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 startTime = +new Date()
// var dataCount = 3
var startTime, endTime
var categories = ['cpu']
var types = [
{ name: 'Halt', color: '#ec3e0d' },
{ name: 'Critical', color: '#ff683e' },
{ name: 'Problematic', color: '#ffbf2e' },
{ name: 'Maintained', color: '#a2681e' },
{ name: 'Anomalous', color: '#8dac39' },
{ name: 'Suspension', color: '#6c6c6c' },
{ name: 'Normal', color: '#8dac39' },
{ name: 'Warning', color: '#a2681e' },
{ name: 'OffLine', color: '#ec3e0d' },
]
var legendData = types.map((item) => {
return item.name
})
// Generate mock data
categories.forEach((category, index) => {
var baseTime = startTime
for (var i = 0; i < dataCount; i++) {
var typeItem = types[i]
var duration = Math.round(Math.random() * 10000)
data1.push({
name: typeItem.name,
value: [index, baseTime, (baseTime += duration), duration],
itemStyle: {
normal: {
color: typeItem.color,
},
},
})
baseTime += Math.round(Math.random() * 2000)
}
})
// categories.forEach((category, index) => {
// var baseTime = startTime
// for (var i = 0; i < dataCount; i++) {
// var typeItem = types[i]
// var duration = Math.round(Math.random() * 10000)
// data1.push({
// name: typeItem.name,
// value: [index, baseTime, (baseTime += duration), duration],
// itemStyle: {
// normal: {
// color: typeItem.color,
// },
// },
// })
// 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: '37550',
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) => {
const arr = res.result.map((x) => x.value)
this.cpuData.max = Math.max(...arr) * 100
this.cpuData.min = Math.min(...arr) * 100
console.log(Math.max(...arr), Math.min(...arr))
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) {
return Math.max(0, val - startTime) + ' ms'
formatter: function (val, index) {
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>

View File

@ -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,