diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue index 73b6d99..574817f 100644 --- a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue +++ b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue @@ -200,44 +200,17 @@ export default { option2: {}, option3: {}, option4: {}, - colorList: [ - '#c13a28', - '#ff8a00', - '#cbae7f', - '#c9bd2b', - '#81b477', - '#488672', - '#55d9d1', - '#49a8f0', - '#2859ed', - '#9e54ec', - '#7e16a3', - '#e6437d', - ], - legendList: [ - 'CPU0,10', - 'CPU0,11', - 'CPU0,8', - 'CPU0,9', - 'CPU0,1', - 'CPU0,2', - '', - 'CPU0,0', - 'CPU0,5', - 'CPU0,6', - 'CPU0,3', - 'CPU0,4', - 'CPU0,7', - ], - xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], visible: false, modalTitle: '', + //CPU utilizatior cpuUtilization: {}, cpuUtilization_xData: [], cpuUtilization_data: [], + // Percentage of free system space cpuIdleRate: {}, cpuIdleRate_xData: [], cpuIdleRate_data: [], + // Interrupt and episodic switching multiLine: { cpuInterrupt: {}, cpuSwitch: {}, @@ -245,6 +218,9 @@ export default { multiLine_xData: [], cpuInterrupt_data: [], cpuSwitch_data: [], + // CPU usage of diferent cores + cpuDiff_xData: [], + cpuDiff_data: [], } }, created() { @@ -252,11 +228,6 @@ export default { }, mounted() { this.getServerList() - this.$nextTick(() => { - setTimeout(() => { - this.drawChart4() - }, 0) - }) }, methods: { getTheData() { @@ -300,20 +271,28 @@ export default { this.cpuSwitch_data = this.multiLine.cpuSwitch.list.map((item) => { return Number(item.value.toFixed(2)) }) + //总CPU使用率 + let totalCpu = [] + data.map((item) => { + if (item.name.search('cpuUtilization_') != -1) { + totalCpu.push(item) + } + }) + console.log(totalCpu) + this.cpuDiff_xData = totalCpu[0].list.map((item) => { + return dateFormat(new Date(item.date * 1000), 'hh:mm') + }) + this.cpuDiff_data = totalCpu.map((item) => { + return { + name: item.name, + data: item.list.map((el) => Number(el.value.toFixed(2))), + } + }) - // const list = [...this.multiLine.cpuInterrupt.list, ...this.multiLine.cpuSwitch.list] - // this.renderingEchart(list, 'cpuMultiLine', Area) // 中断和情境切换 - // //总CPU使用率 - // let totalCpu = new Array() - // data.map((item) => { - // if (item.name.search('cpuUtilization_') != -1) { - // totalCpu = [...totalCpu, ...item.list] - // } - // }) - // this.renderingEchart(totalCpu, 'cpulist', Line) this.drawChart1() this.drawChart2() this.drawChart3() + this.drawChart4() }) }, getBeforeHours(num) { @@ -417,7 +396,7 @@ export default { if (index === 0) { return ' ' + value } - if (index === this.xData.length - 1) { + if (index === this.cpuUtilization_xData.length - 1) { return value + ' ' } return value @@ -502,7 +481,7 @@ export default { if (index === 0) { return ' ' + value } - if (index === this.xData.length - 1) { + if (index === this.cpuIdleRate_xData.length - 1) { return value + ' ' } return value @@ -586,7 +565,7 @@ export default { if (index === 0) { return ' ' + value } - if (index === this.xData.length - 1) { + if (index === this.multiLine_xData.length - 1) { return value + ' ' } return value @@ -658,9 +637,9 @@ export default { drawChart4() { let myLine = echarts.init(document.getElementById('chart4')) this.option4 = { - // color: this.colorList, tooltip: { trigger: 'axis', + confine: true, }, grid: { left: 25, @@ -686,7 +665,7 @@ export default { }, padding: [0, -2, -4, 0], }, - data: this.legendList, // 不需要''换行 + // data: this.legendList, // 不需要''换行 }, xAxis: { type: 'category', @@ -704,14 +683,14 @@ export default { if (index === 0) { return ' ' + value } - if (index === this.xData.length - 1) { + if (index === this.cpuDiff_xData.length - 1) { return value + ' ' } return value }, }, boundaryGap: false, - data: this.xData, + data: this.cpuDiff_xData, }, yAxis: { type: 'value', @@ -739,81 +718,17 @@ export default { color: 'rgba(173, 230, 238, 1)', }, }, - series: [ - { - type: 'line', - name: 'CPU0,10', - symbol: 'none', - data: [15, 30, 24, 28, 13, 14, 20], - }, - { - type: 'line', - name: 'CPU0,11', - symbol: 'none', - data: [82, 92, 91, 34, 12, 30, 20], - }, - { - type: 'line', - name: 'CPU0,8', - symbol: 'none', - data: [2, 9, 11, 24, 12, 20, 25], - }, - { - type: 'line', - name: 'CPU0,9', - symbol: 'none', - data: [8, 19, 32, 4, 22, 13, 50], - }, - { - type: 'line', - name: 'CPU0,1', - symbol: 'none', - data: [53, 62, 71, 14, 16, 37, 24], - }, - { - type: 'line', - name: 'CPU0,2', - symbol: 'none', - data: [62, 54, 49, 64, 62, 45, 29], - }, - { - type: 'line', - name: 'CPU0,0', - symbol: 'none', - data: [15, 30, 24, 28, 13, 14, 20], - }, - { - type: 'line', - name: 'CPU0,5', - symbol: 'none', - data: [82, 92, 91, 34, 12, 30, 20], - }, - { - type: 'line', - name: 'CPU0,6', - symbol: 'none', - data: [2, 9, 11, 24, 12, 20, 25], - }, - { - type: 'line', - name: 'CPU0,3', - symbol: 'none', - data: [8, 19, 32, 4, 22, 13, 50], - }, - { - type: 'line', - name: 'CPU0,4', - symbol: 'none', - data: [53, 62, 71, 14, 16, 37, 24], - }, - { - type: 'line', - name: 'CPU0,7', - symbol: 'none', - data: [62, 54, 49, 64, 62, 45, 29], - }, - ], + series: [], } + let series = this.cpuDiff_data.map((item) => { + return { + type: 'line', + name: item.name, + symbol: 'none', + data: item.data, + } + }) + this.option4.series = series.splice(0, 10) myLine.setOption(this.option4) window.addEventListener('resize', function () { myLine.resize() @@ -827,11 +742,22 @@ export default { }) }, handelZoom(str, option) { - console.log(option) this.modalTitle = str this.visible = true this.$nextTick(() => { - this.drawLine(option) + if (str === 'CPU usage of diferent cores') { + option.series = this.cpuDiff_data.map((item) => { + return { + type: 'line', + name: item.name, + symbol: 'none', + data: item.data, + } + }) + this.drawLine(option) + } else { + this.drawLine(option) + } }) }, onCancel() {