服务器和进程页面图表颜色调整
服务器详情页面时间线组件调整,及接口调试数据渲染
This commit is contained in:
parent
9ff580fdd6
commit
619c57e7b5
|
@ -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"
|
||||
]
|
||||
}
|
||||
}
|
|
@ -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>
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue
Block a user