开发serverMonitor 模块 instances页面，图表配置
This commit is contained in:
parent
7e9c13b401
commit
0434cef898
BIN
src/assets/images/abnormalAlarm/line.png
Normal file
BIN
src/assets/images/abnormalAlarm/line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 975 B |
93
src/views/abnormalAlarm/components/summaryArea.vue
Normal file
93
src/views/abnormalAlarm/components/summaryArea.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
<template>
|
||||||
|
<div id="abstractechar"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Area } from '@antv/g2plot';
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
lineData:{
|
||||||
|
type:Array,
|
||||||
|
required:true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.pieChart()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/* 图表 */
|
||||||
|
pieChart() {
|
||||||
|
const data = this.lineData
|
||||||
|
let _vm= this
|
||||||
|
if(this.chart){
|
||||||
|
this.chart.update({
|
||||||
|
data:data
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart = new Area("abstractechar",{
|
||||||
|
data,
|
||||||
|
xField: 'date',
|
||||||
|
yField: 'value',
|
||||||
|
colorField: '#0096FF',
|
||||||
|
areaStyle:()=>{
|
||||||
|
return { fill: '#0096FF' }
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
line:{
|
||||||
|
subTickLine:{
|
||||||
|
count:5,
|
||||||
|
max:100
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
line:{
|
||||||
|
lineWidth:0,
|
||||||
|
lineDash:[0,0]
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
}})
|
||||||
|
this.chart.render()
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 直接当做普通属性调用不加括号
|
||||||
|
// 任何data中数据变化立即重新计算
|
||||||
|
// 计算属性会缓存
|
||||||
|
textColor() {
|
||||||
|
return this.$store.getters.theme
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
textColor: function (val) {
|
||||||
|
this.chart.update({
|
||||||
|
areaStyle:{
|
||||||
|
fill:val == 'default' ? '#282828' : '#C7C7C7'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
lineData: function (val) {
|
||||||
|
this.pieChart()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#abstractechar {
|
||||||
|
padding: 0 30px;
|
||||||
|
width:100%;
|
||||||
|
height: 151px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -265,8 +265,17 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="content-center">
|
<div class="content-center">
|
||||||
<BoxTitle title="Event Timelinen">
|
<BoxTitle title="Event Timelinen">
|
||||||
<template slot="right">asdfadf</template>
|
<template slot="right">
|
||||||
|
<ul class="legend-list">
|
||||||
|
<li v-for="(item,index) in types" :key="index">
|
||||||
|
<div :style="`background:${item.color}`" class="li-icon"></div>
|
||||||
|
{{ item.name }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
</BoxTitle>
|
</BoxTitle>
|
||||||
|
<div class="line-bg"></div>
|
||||||
|
<div class="time-line" id="timeLine"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-bottom">
|
<div class="content-bottom">
|
||||||
<div class="content-bottom-left">
|
<div class="content-bottom-left">
|
||||||
|
|
@ -274,32 +283,122 @@
|
||||||
<a-row :gutter="20">
|
<a-row :gutter="20">
|
||||||
<a-col class="gutter-row" :span="8">
|
<a-col class="gutter-row" :span="8">
|
||||||
<BoxTitle title="CPU"></BoxTitle>
|
<BoxTitle title="CPU"></BoxTitle>
|
||||||
|
<div class="gauge-content" id="cpu"></div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col class="gutter-row" :span="8">
|
<a-col class="gutter-row" :span="8">
|
||||||
<BoxTitle title="MEMORY"></BoxTitle>
|
<BoxTitle title="MEMORY"></BoxTitle>
|
||||||
|
<div class="gauge-content" id="memory"></div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col class="gutter-row" :span="8">
|
<a-col class="gutter-row" :span="8">
|
||||||
<BoxTitle title="LOADS"></BoxTitle>
|
<BoxTitle title="LOADS"></BoxTitle>
|
||||||
|
<div class="gauge-content" id="loads"></div>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-bottom-left-bottom">
|
<div class="content-bottom-left-bottom">
|
||||||
<BoxTitle title="CPU utilization">
|
<BoxTitle title="CPU utilization">
|
||||||
<template slot="right">asdfadf</template>
|
<template slot="right">
|
||||||
|
<div class="right-title">
|
||||||
|
<div class="right-title-item">
|
||||||
|
average value:<i>32%</i>
|
||||||
|
</div>
|
||||||
|
<div class="right-title-item">
|
||||||
|
minimum value:<i>32%</i>
|
||||||
|
</div>
|
||||||
|
<div class="right-title-item">
|
||||||
|
Maximum value:<i>32%</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</BoxTitle>
|
</BoxTitle>
|
||||||
|
<div class="area-cpu" id="areaCpu"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width:542px">
|
<div style="width:542px">
|
||||||
<BoxTitle title="DISK"></BoxTitle>
|
<BoxTitle title="DISK"></BoxTitle>
|
||||||
|
<div class="bar-disk" id="disk"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 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' }
|
||||||
|
];
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
function renderItem1(params, api) {
|
||||||
|
var categoryIndex = api.value(0);
|
||||||
|
var start = api.coord([api.value(1), categoryIndex]);
|
||||||
|
var end = api.coord([api.value(2), categoryIndex]);
|
||||||
|
var height = api.size([0, 1])[1] * 1;
|
||||||
|
var rectShape = echarts.graphic.clipRectByRect(
|
||||||
|
{
|
||||||
|
x: start[0],
|
||||||
|
y: start[1] - height / 2,
|
||||||
|
width: end[0] - start[0],
|
||||||
|
height: height
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: params.coordSys.x,
|
||||||
|
y: params.coordSys.y,
|
||||||
|
width: params.coordSys.width,
|
||||||
|
height: params.coordSys.height
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
rectShape && {
|
||||||
|
type: 'rect',
|
||||||
|
transition: ['shape'],
|
||||||
|
shape: rectShape,
|
||||||
|
style: api.style()
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
import BoxTitle from '../../components/boxTitle.vue';
|
import BoxTitle from '../../components/boxTitle.vue';
|
||||||
import infiniteScroll from 'vue-infinite-scroll';
|
import infiniteScroll from 'vue-infinite-scroll';
|
||||||
import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
|
import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
export default {
|
export default {
|
||||||
directives: { infiniteScroll },
|
directives: { infiniteScroll },
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -307,6 +406,7 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
types,
|
||||||
dataSource: [],
|
dataSource: [],
|
||||||
loading: false,
|
loading: false,
|
||||||
busy: false,
|
busy: false,
|
||||||
|
|
@ -323,7 +423,13 @@ export default {
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
total: 0
|
total: 0
|
||||||
},
|
},
|
||||||
currIndex:null,
|
currIndex: null,
|
||||||
|
timeLine: null,
|
||||||
|
guageCpu: null,
|
||||||
|
guageMemory: null,
|
||||||
|
guageLoads: null,
|
||||||
|
areaCpu: null,
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|
@ -345,6 +451,16 @@ export default {
|
||||||
this.$message.warning("This operation fails. Contact your system administrator")
|
this.$message.warning("This operation fails. Contact your system administrator")
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.drawTimeline()
|
||||||
|
this.drawGuageCpu()
|
||||||
|
this.drawGuageMemory()
|
||||||
|
this.drawGuageLoads()
|
||||||
|
this.drawAreaCpu()
|
||||||
|
this.drawDisk()
|
||||||
|
},0)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getSysServer(callBack) {
|
getSysServer(callBack) {
|
||||||
|
|
@ -409,7 +525,603 @@ 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';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '0%',
|
||||||
|
bottom: '0',
|
||||||
|
top:15,
|
||||||
|
height: 32,
|
||||||
|
containLabel: false,
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
min: startTime,
|
||||||
|
axisLabel: {
|
||||||
|
color: "#ade6ee",
|
||||||
|
fontSize: 14,
|
||||||
|
formatter: function (val) {
|
||||||
|
return Math.max(0, val - startTime) + ' ms';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
show:false,
|
||||||
|
data: categories
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{ name: legendData[0], type: 'bar', data: [] },
|
||||||
|
{ name: legendData[1], type: 'bar', data: [] },
|
||||||
|
{ name: legendData[2], type: 'bar', data: [] },
|
||||||
|
{ name: legendData[3], type: 'bar', data: [] },
|
||||||
|
{ name: legendData[4], type: 'bar', data: [] },
|
||||||
|
{ name: legendData[5], type: 'bar', data: [] },
|
||||||
|
{
|
||||||
|
type: 'custom',
|
||||||
|
renderItem: renderItem1,
|
||||||
|
encode: {
|
||||||
|
x: [1, 2],
|
||||||
|
y: 0
|
||||||
|
},
|
||||||
|
data: data1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.timeLine.setOption(option)
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
this.timeLine.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
drawGuageCpu() {
|
||||||
|
this.guageCpu = echarts.init(document.getElementById("cpu"))
|
||||||
|
let option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
center: ['50%', '93%'],
|
||||||
|
radius: 90,
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
itemStyle:{
|
||||||
|
color: "#8531f6"
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: 20
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color:[[1, '#162b39']],
|
||||||
|
width: 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
anchor: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
fontFamily: "MicrogrammaD-MediExte",
|
||||||
|
fontSize: 24,
|
||||||
|
lineHeight: 28,
|
||||||
|
offsetCenter: [0, '-10%'],
|
||||||
|
formatter: '{value} %',
|
||||||
|
color: 'white'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 20
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
center: ['50%', '93%'],
|
||||||
|
radius: 100,
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 1,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#7776ff' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#ae2cf1' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: 2
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 100
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.guageCpu.setOption(option)
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
this.guageCpu.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
drawGuageMemory() {
|
||||||
|
this.guageMemory = echarts.init(document.getElementById("memory"))
|
||||||
|
let option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
center: ['50%', '93%'],
|
||||||
|
radius: 90,
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
itemStyle:{
|
||||||
|
color: "#1aad32"
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: 20
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color:[[1, '#162b39']],
|
||||||
|
width: 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
anchor: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
fontFamily: "MicrogrammaD-MediExte",
|
||||||
|
fontSize: 24,
|
||||||
|
lineHeight: 28,
|
||||||
|
offsetCenter: [0, '-10%'],
|
||||||
|
formatter: '{value} %',
|
||||||
|
color: 'white'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 20
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
center: ['50%', '93%'],
|
||||||
|
radius: 100,
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 1,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#1bad33' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#14ea38' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: 2
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 100
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.guageMemory.setOption(option)
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
this.guageMemory.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
drawGuageLoads() {
|
||||||
|
this.guageLoads = echarts.init(document.getElementById("loads"))
|
||||||
|
let option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
center: ['50%', '93%'],
|
||||||
|
radius: 90,
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
itemStyle:{
|
||||||
|
color: "#61bbfa"
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: 20
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color:[[1, '#162b39']],
|
||||||
|
width: 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show:false,
|
||||||
|
},
|
||||||
|
anchor: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
valueAnimation: true,
|
||||||
|
fontFamily: "MicrogrammaD-MediExte",
|
||||||
|
fontSize: 24,
|
||||||
|
lineHeight: 28,
|
||||||
|
offsetCenter: [0, '-10%'],
|
||||||
|
formatter: '{value} %',
|
||||||
|
color: 'white'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 20
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
center: ['50%', '93%'],
|
||||||
|
radius: 100,
|
||||||
|
startAngle: 180,
|
||||||
|
endAngle: 0,
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
itemStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 1,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#4facfe' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#00f2fe' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
width: 2
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 100
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.guageLoads.setOption(option)
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
this.guageLoads.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
drawAreaCpu() {
|
||||||
|
this.areaCpu = echarts.init(document.getElementById("areaCpu"))
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '0%',
|
||||||
|
bottom: '0',
|
||||||
|
top:15,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(119, 181, 213, 0.5)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(173, 230, 238, 1)"
|
||||||
|
},
|
||||||
|
data: date
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
axisLine: {
|
||||||
|
show:true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(119, 181, 213, 0.5)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(119, 181, 213, 0.2)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(173, 230, 238, 1)"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type:'line',
|
||||||
|
smooth:true,
|
||||||
|
symbol: 'none',
|
||||||
|
sampling: 'average',
|
||||||
|
itemStyle:{ normal:{color:"#10b3d6"}},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#10b3d6",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.areaCpu.setOption(option)
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
this.areaCpu.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
drawDisk() {
|
||||||
|
this.barDisk = echarts.init(document.getElementById("disk"))
|
||||||
|
let option = {
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
right: '0%',
|
||||||
|
bottom: '0',
|
||||||
|
top:15,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show:false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(119, 181, 213, 0.5)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(173, 230, 238, 1)"
|
||||||
|
},
|
||||||
|
data: ['C', 'D', 'E']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
|
||||||
|
axisLine: {
|
||||||
|
show:true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(119, 181, 213, 0.5)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: "rgba(119, 181, 213, 0.2)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: "rgba(173, 230, 238, 1)",
|
||||||
|
formatter: "{value}%"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 50,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: function(params) {
|
||||||
|
//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
||||||
|
var colorList = [
|
||||||
|
{
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 1,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#b43c2b' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#d3a721' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
}, {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 1,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#0c5fa6' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#0af0f8' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
}, {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 1,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0, color: '#0a6f0a' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1, color: '#90d40c' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return colorList[params.dataIndex]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [60, 80, 30],
|
||||||
|
z: 10,
|
||||||
|
zlevel: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// 分隔
|
||||||
|
type: "pictorialBar",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#0F375F",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
symbolRepeat: "fixed",
|
||||||
|
symbolMargin: 2,
|
||||||
|
symbol: "rect",
|
||||||
|
symbolClip: true,
|
||||||
|
symbolSize: [50, 4],
|
||||||
|
symbolPosition: "start",
|
||||||
|
data: [60, 80, 30],
|
||||||
|
width: 5,
|
||||||
|
z: 0,
|
||||||
|
zlevel: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
this.barDisk.setOption(option)
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
this.barDisk.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -578,12 +1290,43 @@ export default {
|
||||||
}
|
}
|
||||||
.content-center{
|
.content-center{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 130px;
|
height: 115px;
|
||||||
|
position: relative;
|
||||||
// height: 14.9%;
|
// height: 14.9%;
|
||||||
|
.legend-list{
|
||||||
|
list-style:none;
|
||||||
|
li{
|
||||||
|
float: left;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 25px;
|
||||||
|
.li-icon{
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: red;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line-bg{
|
||||||
|
width: 100%;
|
||||||
|
height: 32px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 55px;
|
||||||
|
background: url(~@/assets/images/abnormalAlarm/line.png) repeat;
|
||||||
|
}
|
||||||
|
.time-line{
|
||||||
|
width: 100%;
|
||||||
|
height: 75px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.content-bottom{
|
.content-bottom{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 461px);
|
height: calc(100% - 446px);
|
||||||
// height: 41.6%;
|
// height: 41.6%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -593,11 +1336,40 @@ export default {
|
||||||
&-top{
|
&-top{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 160px;
|
height: 160px;
|
||||||
|
.gauge-content{
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&-bottom{
|
&-bottom{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 160px);
|
height: calc(100% - 160px);
|
||||||
|
.right-title{
|
||||||
|
font-family: ArialMT;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #ade6ee;
|
||||||
|
font-weight: normal;
|
||||||
|
&-item{
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: #ade6ee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.area-cpu{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.bar-disk{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user