首页改造,完成cpu,内存,网络图
This commit is contained in:
648540858
105
web_src/src/components/console/ConsoleCPU.vue
Normal file
105
web_src/src/components/console/ConsoleCPU.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div id="consoleCPU" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
|
||||
<ve-line :data="chartData" :extend="extend" width="100%" height="100%" :legend-visible="false"></ve-line>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import moment from "moment/moment";
|
||||
|
||||
export default {
|
||||
name: 'consoleCPU',
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['time', 'data'],
|
||||
rows: []
|
||||
},
|
||||
|
||||
extend: {
|
||||
title: {
|
||||
show: true,
|
||||
text: "CPU",
|
||||
left: "center",
|
||||
top: 20,
|
||||
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
right: "30px",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
time: "time",
|
||||
max: 'dataMax',
|
||||
boundaryGap: ['20%', '20%'],
|
||||
axisLabel: {
|
||||
formatter:(v)=>{
|
||||
return moment(v).format("HH:mm:ss");
|
||||
},
|
||||
showMaxLabel: true,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 1,
|
||||
splitNumber: 6,
|
||||
position: "left",
|
||||
silent: true,
|
||||
axisLabel: {
|
||||
formatter: (v)=>{
|
||||
return v*100 + "%";
|
||||
},
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (data)=>{
|
||||
console.log(data)
|
||||
return moment(data[0].data[0]).format("HH:mm:ss") + "</br> 使用：" + (data[0].data[1]*100).toFixed(2) + "%";
|
||||
}
|
||||
},
|
||||
series: {
|
||||
itemStyle: {
|
||||
color: "#409EFF"
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#50a3f8' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#69b0fa' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// setInterval(()=>{
|
||||
// // console.log(111111)
|
||||
// for (let i = 0; i < this.chartData.rows.length; i++) {
|
||||
// this.chartData.rows[i].销售额 += 1000;
|
||||
// }
|
||||
// },1000)
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {
|
||||
setData: function(data) {
|
||||
this.chartData .rows = data;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
105
web_src/src/components/console/ConsoleMEM.vue
Normal file
105
web_src/src/components/console/ConsoleMEM.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div id="ConsoleMEM" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
|
||||
<ve-line :data="chartData" :extend="extend" width="100%" height="100%" :legend-visible="false"></ve-line>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import moment from "moment/moment";
|
||||
|
||||
export default {
|
||||
name: 'ConsoleMEM',
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['time', 'data'],
|
||||
rows: []
|
||||
},
|
||||
|
||||
extend: {
|
||||
title: {
|
||||
show: true,
|
||||
text: "内存",
|
||||
left: "center",
|
||||
top: 20,
|
||||
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
right: "30px",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
time: "time",
|
||||
max: 'dataMax',
|
||||
boundaryGap: ['20%', '20%'],
|
||||
axisLabel: {
|
||||
formatter:(v)=>{
|
||||
return moment(v).format("HH:mm:ss");
|
||||
},
|
||||
showMaxLabel: true,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 1,
|
||||
splitNumber: 6,
|
||||
position: "left",
|
||||
silent: true,
|
||||
axisLabel: {
|
||||
formatter: (v)=>{
|
||||
return v*100 + "%";
|
||||
},
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (data)=>{
|
||||
console.log(data)
|
||||
return moment(data[0].data[0]).format("HH:mm:ss") + "</br> 使用：" + (data[0].data[1]*100).toFixed(2) + "%";
|
||||
}
|
||||
},
|
||||
series: {
|
||||
itemStyle: {
|
||||
color: "#409EFF"
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: '#50a3f8' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: '#69b0fa' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// setInterval(()=>{
|
||||
// // console.log(111111)
|
||||
// for (let i = 0; i < this.chartData.rows.length; i++) {
|
||||
// this.chartData.rows[i].销售额 += 1000;
|
||||
// }
|
||||
// },1000)
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {
|
||||
setData: function(data) {
|
||||
this.chartData .rows = data;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
86
web_src/src/components/console/ConsoleMediaServer.vue
Normal file
86
web_src/src/components/console/ConsoleMediaServer.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div id="ConsoleMediaServer" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
|
||||
<ve-histogram :data="chartData" :extend="extend" :settings="chartSettings" width="100%" height="100%" ></ve-histogram>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import moment from "moment/moment";
|
||||
|
||||
export default {
|
||||
name: 'ConsoleMediaServer',
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['time', 'in', 'out'],
|
||||
rows: [
|
||||
]
|
||||
},
|
||||
chartSettings: {
|
||||
area: true,
|
||||
labelMap: {
|
||||
'in': '下载',
|
||||
'out': '上传'
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
title: {
|
||||
show: true,
|
||||
text: "网络",
|
||||
left: "center",
|
||||
top: 20,
|
||||
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
right: "30px",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
time: "time",
|
||||
max: 'dataMax',
|
||||
boundaryGap: ['20%', '20%'],
|
||||
axisLabel: {
|
||||
formatter:(v)=>{
|
||||
return moment(v).format("HH:mm:ss");
|
||||
},
|
||||
showMaxLabel: true,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (data)=>{
|
||||
console.log(parseFloat(data[0].data[1]).toFixed(2))
|
||||
console.log(parseFloat(data[1].data[1]).toFixed(2))
|
||||
console.log("############")
|
||||
return "下载：" + parseFloat(data[0].data[1]).toFixed(2) + "Mbps" + "</br> 上传：" + parseFloat(data[1].data[1]).toFixed(2) + "Mbps";
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
left: "center",
|
||||
bottom: "15px",
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// setInterval(()=>{
|
||||
// // console.log(111111)
|
||||
// for (let i = 0; i < this.chartData.rows.length; i++) {
|
||||
// this.chartData.rows[i].销售额 += 1000;
|
||||
// }
|
||||
// },1000)
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {
|
||||
setData: function(data) {
|
||||
console.log(data)
|
||||
this.chartData .rows = data;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
85
web_src/src/components/console/ConsoleNet.vue
Normal file
85
web_src/src/components/console/ConsoleNet.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div id="ConsoleNet" style="width: 100%; height: 100%; background: #FFFFFF; text-align: center">
|
||||
<ve-line :data="chartData" :extend="extend" :settings="chartSettings" width="100%" height="100%" ></ve-line>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import moment from "moment/moment";
|
||||
|
||||
export default {
|
||||
name: 'ConsoleNet',
|
||||
data() {
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['time', 'in', 'out'],
|
||||
rows: []
|
||||
},
|
||||
chartSettings: {
|
||||
area: true,
|
||||
labelMap: {
|
||||
'in': '下载',
|
||||
'out': '上传'
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
title: {
|
||||
show: true,
|
||||
text: "网络",
|
||||
left: "center",
|
||||
top: 20,
|
||||
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
right: "30px",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
time: "time",
|
||||
max: 'dataMax',
|
||||
boundaryGap: ['20%', '20%'],
|
||||
axisLabel: {
|
||||
formatter:(v)=>{
|
||||
return moment(v).format("HH:mm:ss");
|
||||
},
|
||||
showMaxLabel: true,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: (data)=>{
|
||||
console.log(parseFloat(data[0].data[1]).toFixed(2))
|
||||
console.log(parseFloat(data[1].data[1]).toFixed(2))
|
||||
console.log("############")
|
||||
return "下载：" + parseFloat(data[0].data[1]).toFixed(2) + "Mbps" + "</br> 上传：" + parseFloat(data[1].data[1]).toFixed(2) + "Mbps";
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
left: "center",
|
||||
bottom: "15px",
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// setInterval(()=>{
|
||||
// // console.log(111111)
|
||||
// for (let i = 0; i < this.chartData.rows.length; i++) {
|
||||
// this.chartData.rows[i].销售额 += 1000;
|
||||
// }
|
||||
// },1000)
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {
|
||||
setData: function(data) {
|
||||
console.log(data)
|
||||
this.chartData .rows = data;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user