处理emai模块，变更邮箱地址和改变时间，图表不重新渲染的问题
alarm模块中所有页面中的图表增加toolTip
This commit is contained in:
parent
6b933e1b6e
commit
d57e7da6c6
|
|
@ -99,6 +99,9 @@ export default {
|
|||
drawAnalysis_bar() {
|
||||
let myChart = echarts.init(document.getElementById("analysisChartBar"))
|
||||
let options = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
grid: {
|
||||
left: '12',
|
||||
right: '0%',
|
||||
|
|
@ -158,6 +161,9 @@ export default {
|
|||
drawLeftChart() {
|
||||
let myChart = echarts.init(document.getElementById("chartLeft"))
|
||||
let options = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
grid: {
|
||||
left: '12',
|
||||
right: '0%',
|
||||
|
|
@ -217,6 +223,9 @@ export default {
|
|||
drawRightChart() {
|
||||
let myChart = echarts.init(document.getElementById("chartRight"))
|
||||
let options = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
graphic: [
|
||||
{
|
||||
type: "text",
|
||||
|
|
|
|||
|
|
@ -30,7 +30,10 @@ export default {
|
|||
drawChart() {
|
||||
let myLine = echarts.init(document.getElementById(`${this.layout}`))
|
||||
this.option = {
|
||||
color:this.color,
|
||||
color: this.color,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
|
|
|
|||
|
|
@ -58,7 +58,10 @@ export default {
|
|||
}
|
||||
})
|
||||
this.option = {
|
||||
color:this.color,
|
||||
color: this.color,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@
|
|||
</div>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="email-footer-content" id="mail"></div>
|
||||
<div class="email-footer-content" id="mailArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -226,6 +226,7 @@ export default {
|
|||
endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||||
guageStore: null,
|
||||
timeLine: null,
|
||||
areaMailLine: null,
|
||||
xData: [],
|
||||
yData: [],
|
||||
currId: "",
|
||||
|
|
@ -284,15 +285,19 @@ export default {
|
|||
})
|
||||
},
|
||||
onEmailChange(val) {
|
||||
this.currId = val
|
||||
this.guageStore.clear()
|
||||
this.emailId = val
|
||||
},
|
||||
onDateChange(val) {
|
||||
console.log(this.getBeforeDate(val-1));
|
||||
this.startDate = this.getBeforeDate(val-1)
|
||||
this.areaMailLine.clear()
|
||||
this.startDate = this.getBeforeDate(val - 1)
|
||||
this.getEmailStatistics()
|
||||
},
|
||||
onRangeDateChange(date, dateString) {
|
||||
this.areaMailLine.clear()
|
||||
this.startDate = dateString[0]
|
||||
this.endDate = dateString[1]
|
||||
this.getEmailStatistics()
|
||||
},
|
||||
getEmailStatus() {
|
||||
getAction("/sysEmailLog/status",{emailId:this.currId}).then(res => {
|
||||
|
|
@ -646,9 +651,12 @@ export default {
|
|||
});
|
||||
},
|
||||
drawAreaMail() {
|
||||
let myLine = echarts.init(document.getElementById("mail"))
|
||||
this.option1 = {
|
||||
color:["#0096ff"],
|
||||
this.areaMailLine = echarts.init(document.getElementById("mailArea"))
|
||||
let option = {
|
||||
color: ["#0096ff"],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
|
|
@ -725,9 +733,9 @@ export default {
|
|||
}
|
||||
]
|
||||
};
|
||||
myLine.setOption(this.option1)
|
||||
this.areaMailLine.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
myLine.resize();
|
||||
this.areaMailLine.resize();
|
||||
})
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -209,7 +209,10 @@ export default {
|
|||
drawChart1() {
|
||||
let myLine = echarts.init(document.getElementById("chart1"))
|
||||
this.option1 = {
|
||||
color:["#0096ff"],
|
||||
color: ["#0096ff"],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
|
|
@ -291,7 +294,10 @@ export default {
|
|||
drawChart2() {
|
||||
let myLine = echarts.init(document.getElementById("chart2"))
|
||||
this.option2 = {
|
||||
color:["#f1e852"],
|
||||
color: ["#f1e852"],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
|
|
@ -373,6 +379,9 @@ export default {
|
|||
drawChart3() {
|
||||
let myLine = echarts.init(document.getElementById("chart3"))
|
||||
this.option3 = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
|
|
@ -470,7 +479,10 @@ export default {
|
|||
drawChart4() {
|
||||
let myLine = echarts.init(document.getElementById("chart4"))
|
||||
this.option4 = {
|
||||
color:this.colorList,
|
||||
color: this.colorList,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
|
|
|
|||
|
|
@ -936,6 +936,9 @@ export default {
|
|||
drawAreaCpu() {
|
||||
this.areaCpu = echarts.init(document.getElementById("areaCpu"))
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
|
|
@ -1000,6 +1003,9 @@ export default {
|
|||
drawDisk() {
|
||||
this.barDisk = echarts.init(document.getElementById("disk"))
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
|
|
|
|||
|
|
@ -45,7 +45,10 @@ export default {
|
|||
}
|
||||
})
|
||||
this.option = {
|
||||
color:["#00ff5a","#0096ff","#ffc600"],
|
||||
color: ["#00ff5a", "#0096ff", "#ffc600"],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
|
|
|
|||
|
|
@ -57,24 +57,24 @@
|
|||
<div class="service-content-center">
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="12">
|
||||
<BoxTitle title="Proces CPU usage(%)">
|
||||
<BoxTitle title="Process CPU usage(%)">
|
||||
<template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item,index) in procesCpu.legend" :key="index">
|
||||
<div :style="`background:${procesCpu.color[index]}`" class="li-icon"></div>
|
||||
<li v-for="(item,index) in processCpu.legend" :key="index">
|
||||
<div :style="`background:${processCpu.color[index]}`" class="li-icon"></div>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</BoxTitle>
|
||||
<div class="service-content-center-item" id="cpu"></div>
|
||||
<div class="service-content-center-item" id="processCpu"></div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<BoxTitle title="Proces memory usage(%)">
|
||||
<BoxTitle title="Process memory usage(%)">
|
||||
<template slot="right">
|
||||
<ul class="legend-list">
|
||||
<li v-for="(item,index) in procesMenbry.legend" :key="index">
|
||||
<div :style="`background:${procesMenbry.color[index]}`" class="li-icon"></div>
|
||||
<li v-for="(item,index) in processMenbry.legend" :key="index">
|
||||
<div :style="`background:${processMenbry.color[index]}`" class="li-icon"></div>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -190,12 +190,12 @@ export default {
|
|||
legend: ["NemuHeadless.exe","System","dwm.exe","CompatTelRunner.exe","msedge.exe"],
|
||||
color: ['#2d5cd3','#60cae8','#1ab060','#ffbf44','#e86954']
|
||||
},
|
||||
procesCpu: {
|
||||
processCpu: {
|
||||
content: null,
|
||||
legend: ["mysqld.exe","svchost.exe"],
|
||||
color: ['#e5ae2d','#00a8ff']
|
||||
},
|
||||
procesMenbry: {
|
||||
processMenbry: {
|
||||
content: null,
|
||||
legend: ["mysqld.exe","svchost.exe"],
|
||||
color: ['#9ed24d','#00a8ff']
|
||||
|
|
@ -268,7 +268,10 @@ export default {
|
|||
drawRanked() {
|
||||
this.ranked.content = echarts.init(document.getElementById("ranked"))
|
||||
let option = {
|
||||
color:this.ranked.color,
|
||||
color: this.ranked.color,
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
grid: {
|
||||
left: 25,
|
||||
right: 0,
|
||||
|
|
@ -321,36 +324,36 @@ export default {
|
|||
type: 'bar',
|
||||
barWidth: 20,
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [20, 32, 71, 34, 90, 30,92]
|
||||
},
|
||||
{
|
||||
name: 'Google',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [12, 25, 46, 34, 29, 23,64]
|
||||
},
|
||||
{
|
||||
name: 'Bing',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [60, 72, 71, 74, 90, 13,43]
|
||||
},
|
||||
{
|
||||
name: 'Others',
|
||||
type: 'bar',
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [62, 82, 91, 84, 19, 11, 55]
|
||||
},
|
||||
{
|
||||
|
|
@ -358,9 +361,9 @@ export default {
|
|||
type: 'bar',
|
||||
barWidth: 20,
|
||||
stack: 'Search Engine',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
data: [20, 32, 71, 34, 90, 30,92]
|
||||
},
|
||||
]
|
||||
|
|
@ -371,8 +374,11 @@ export default {
|
|||
});
|
||||
},
|
||||
drawProcesCpu() {
|
||||
this.procesCpu.content = echarts.init(document.getElementById("cpu"))
|
||||
this.processCpu.content = echarts.init(document.getElementById("processCpu"))
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
|
|
@ -450,14 +456,17 @@ export default {
|
|||
}
|
||||
]
|
||||
};
|
||||
this.procesCpu.content.setOption(option)
|
||||
this.processCpu.content.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.procesCpu.content.resize();
|
||||
this.processCpu.content.resize();
|
||||
});
|
||||
},
|
||||
drawProcesMenbry() {
|
||||
this.procesMenbry.content = echarts.init(document.getElementById("menbry"))
|
||||
this.processMenbry.content = echarts.init(document.getElementById("menbry"))
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
|
|
@ -535,9 +544,9 @@ export default {
|
|||
}
|
||||
]
|
||||
};
|
||||
this.procesMenbry.content.setOption(option)
|
||||
this.processMenbry.content.setOption(option)
|
||||
window.addEventListener("resize", function () {
|
||||
this.procesMenbry.content.resize();
|
||||
this.processMenbry.content.resize();
|
||||
});
|
||||
},
|
||||
handlePageChange(page, pageSize) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user