diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue b/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
index a4aa736..d62d321 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
@@ -9,20 +9,24 @@
import * as echarts from 'echarts'
import BoxTitle from '../../components/boxTitle.vue'
import moment from 'moment'
+
export default {
props: ['title', 'layout', 'color', 'dataSource', 'units', 'newUnits'],
components: {
- BoxTitle,
+ BoxTitle
},
data() {
return {
option: {},
- xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
},
+ mounted() {
+ this.drawChart()
+ },
methods: {
drawChart() {
- let seriesData = this.dataSource.map(function (item) {
+ let seriesData = this.dataSource.map(function(item) {
return [item.date * 1000, item.value]
})
const isCompute = this.units === 'B' || this.units === 'Kb'
@@ -36,28 +40,28 @@ export default {
const [date, value] = param[0].value
return `Time:${moment(date).format('HH:mm')}
Data:${isCompute ? value + this.newUnits : value}
`
- },
+ }
},
grid: {
left: 0,
right: 20,
top: 15,
bottom: 0,
- containLabel: true,
+ containLabel: true
},
xAxis: {
type: 'time',
// type: 'category',
axisTick: {
- show: false,
+ show: false
},
axisLine: {
lineStyle: {
- color: 'rgba(115, 191, 255, 0.2)',
- },
+ color: 'rgba(115, 191, 255, 0.2)'
+ }
},
axisLabel: {
- color: 'rgba(173, 230, 238, 1)',
+ color: 'rgba(173, 230, 238, 1)'
// formatter: (value,index)=>{
// if(index === 0) {
// return ' ' + value;
@@ -68,29 +72,29 @@ export default {
// return value
// }
},
- boundaryGap: false,
+ boundaryGap: false
// data: this.xData
},
yAxis: {
type: 'value',
title: {
- text: isCompute ? 'unit:' + this.newUnits : null,
+ text: isCompute ? 'unit:' + this.newUnits : null
},
splitLine: {
show: true,
lineStyle: {
- color: 'rgba(115, 191, 255, 0.2)',
- },
+ color: 'rgba(115, 191, 255, 0.2)'
+ }
},
axisLine: {
show: true,
lineStyle: {
- color: 'rgba(115, 191, 255, 0.5)',
- },
+ color: 'rgba(115, 191, 255, 0.5)'
+ }
},
axisLabel: {
- color: 'rgba(173, 230, 238, 1)',
- },
+ color: 'rgba(173, 230, 238, 1)'
+ }
},
series: [
{
@@ -98,30 +102,30 @@ export default {
type: 'line',
symbol: 'none',
lineStyle: {
- width: 2,
+ width: 2
},
areaStyle: {
opacity: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.color[0] },
- { offset: 1, color: this.color[1] },
- ]),
+ { offset: 1, color: this.color[1] }
+ ])
},
- data: seriesData,
- },
- ],
+ data: seriesData
+ }
+ ]
}
myLine.setOption(this.option)
- window.addEventListener('resize', function () {
+ window.addEventListener('resize', function() {
myLine.resize()
})
- },
+ }
},
watch: {
dataSource() {
this.drawChart()
- },
- },
+ }
+ }
}
diff --git a/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
index 62cd992..1b1f6db 100644
--- a/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
+++ b/src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
@@ -7,7 +7,7 @@
{
- const item = result[index]
+ this.chartData = []
+ result.forEach((item, index) => {
if (item.units === 'B' || item.units === 'Kb') {
item.newUnits = this.unitConversion(item.min, item.units)
item.list.forEach((val) => {
@@ -380,7 +389,8 @@ export default {
val.value = Number(this.dataConversion(number, item.newUnits))
})
}
- Object.assign(chartItem, item)
+ item.color = this.chartDataColors[index]
+ this.chartData.push(item)
})
} else {
this.$message.error(message)
@@ -425,20 +435,20 @@ export default {
label: {
formatter: (text) => {
return moment(text * 1000).format('HH:mm')
- },
- },
+ }
+ }
},
yAxis: {
title: {
- text: isCompute ? '单位:' + item.newUnits : null,
- },
+ text: isCompute ? '单位:' + item.newUnits : null
+ }
},
color: color,
// seriesField: 'name',
areaStyle: () => {
return {
- fill: 'l(270) 0:#ffffff 1:' + color,
+ fill: 'l(270) 0:#ffffff 1:' + color
}
},
tooltip: {
@@ -449,13 +459,13 @@ export default {
num = text.value + item.newUnits
}
return { name: moment(text.date * 1000).format('HH:mm'), value: num }
- },
- },
+ }
+ }
})
this.echartObj[item.name].render()
})
- },
- },
+ }
+ }
}
@@ -465,19 +475,23 @@ export default {
margin-top: 10px;
overflow-y: auto;
overflow-x: hidden;
- /deep/.ant-spin-nested-loading {
+
+ /deep/ .ant-spin-nested-loading {
width: 100%;
height: 100%;
}
- /deep/.ant-spin-container {
+
+ /deep/ .ant-spin-container {
width: 100%;
height: 100%;
}
+
&-item {
width: 100%;
height: 100%;
padding: 5px 10px 5px 0;
}
+
&-item-child {
width: 100%;
height: auto;