xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

处理emai模块，变更邮箱地址和改变时间，图表不重新渲染的问题

Browse Source 
alarm模块中所有页面中的图表增加toolTip
This commit is contained in:
renpy 2023-08-18 10:47:53 +08:00
parent 6b933e1b6e
commit d57e7da6c6
8 changed files with 99 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/abnormalAlarm/analysisMonitor/alarmAnalysis/index.vue
View File

@ -99,6 +99,9 @@ export default {
drawAnalysis_bar() { drawAnalysis_bar() {
let myChart = echarts.init(document.getElementById("analysisChartBar")) let myChart = echarts.init(document.getElementById("analysisChartBar"))
let options = { let options = {
tooltip: {
trigger: 'item'
},
grid: { grid: {
left: '12', left: '12',
right: '0%', right: '0%',
@ -158,6 +161,9 @@ export default {
drawLeftChart() { drawLeftChart() {
let myChart = echarts.init(document.getElementById("chartLeft")) let myChart = echarts.init(document.getElementById("chartLeft"))
let options = { let options = {
tooltip: {
trigger: 'item'
},
grid: { grid: {
left: '12', left: '12',
right: '0%', right: '0%',
@ -217,6 +223,9 @@ export default {
drawRightChart() { drawRightChart() {
let myChart = echarts.init(document.getElementById("chartRight")) let myChart = echarts.init(document.getElementById("chartRight"))
let options = { let options = {
tooltip: {
trigger: 'item'
},
graphic: [ graphic: [
{ {
type: "text", type: "text",

5
src/views/abnormalAlarm/databaseMonitor/instances/areaChart.vue
View File

@ -30,7 +30,10 @@ export default {
drawChart() { drawChart() {
let myLine = echarts.init(document.getElementById(`${this.layout}`)) let myLine = echarts.init(document.getElementById(`${this.layout}`))
this.option = { this.option = {
color:this.color, color: this.color,
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,

5
src/views/abnormalAlarm/databaseMonitor/instances/stackedAreaChart.vue
View File

@ -58,7 +58,10 @@ export default {
} }
}) })
this.option = { this.option = {
color:this.color, color: this.color,
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,

26
src/views/abnormalAlarm/emailMonitor/instances/index.vue
View File

@ -120,7 +120,7 @@
</div> </div>
</template> </template>
</BoxTitle> </BoxTitle>
<div class="email-footer-content" id="mail"></div> <div class="email-footer-content" id="mailArea"></div>
</div> </div>
</div> </div>
</template> </template>
@ -226,6 +226,7 @@ export default {
endDate: dateFormat(new Date(), 'yyyy-MM-dd'), endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
guageStore: null, guageStore: null,
timeLine: null, timeLine: null,
areaMailLine: null,
xData: [], xData: [],
yData: [], yData: [],
currId: "", currId: "",
@ -284,15 +285,19 @@ export default {
}) })
}, },
onEmailChange(val) { onEmailChange(val) {
this.currId = val this.guageStore.clear()
this.emailId = val
}, },
onDateChange(val) { onDateChange(val) {
console.log(this.getBeforeDate(val-1)); this.areaMailLine.clear()
this.startDate = this.getBeforeDate(val-1) this.startDate = this.getBeforeDate(val - 1)
this.getEmailStatistics()
}, },
onRangeDateChange(date, dateString) { onRangeDateChange(date, dateString) {
this.areaMailLine.clear()
this.startDate = dateString[0] this.startDate = dateString[0]
this.endDate = dateString[1] this.endDate = dateString[1]
this.getEmailStatistics()
}, },
getEmailStatus() { getEmailStatus() {
getAction("/sysEmailLog/status",{emailId:this.currId}).then(res => { getAction("/sysEmailLog/status",{emailId:this.currId}).then(res => {
@ -646,9 +651,12 @@ export default {
}); });
}, },
drawAreaMail() { drawAreaMail() {
let myLine = echarts.init(document.getElementById("mail")) this.areaMailLine = echarts.init(document.getElementById("mailArea"))
this.option1 = { let option = {
color:["#0096ff"], color: ["#0096ff"],
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: 25, left: 25,
right: 0, right: 0,
@ -725,9 +733,9 @@ export default {
} }
] ]
}; };
myLine.setOption(this.option1) this.areaMailLine.setOption(option)
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myLine.resize(); this.areaMailLine.resize();
}) })
}, },
}, },

18
src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
View File

@ -209,7 +209,10 @@ export default {
drawChart1() { drawChart1() {
let myLine = echarts.init(document.getElementById("chart1")) let myLine = echarts.init(document.getElementById("chart1"))
this.option1 = { this.option1 = {
color:["#0096ff"], color: ["#0096ff"],
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: 25, left: 25,
right: 0, right: 0,
@ -291,7 +294,10 @@ export default {
drawChart2() { drawChart2() {
let myLine = echarts.init(document.getElementById("chart2")) let myLine = echarts.init(document.getElementById("chart2"))
this.option2 = { this.option2 = {
color:["#f1e852"], color: ["#f1e852"],
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: 25, left: 25,
right: 0, right: 0,
@ -373,6 +379,9 @@ export default {
drawChart3() { drawChart3() {
let myLine = echarts.init(document.getElementById("chart3")) let myLine = echarts.init(document.getElementById("chart3"))
this.option3 = { this.option3 = {
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: 25, left: 25,
right: 0, right: 0,
@ -470,7 +479,10 @@ export default {
drawChart4() { drawChart4() {
let myLine = echarts.init(document.getElementById("chart4")) let myLine = echarts.init(document.getElementById("chart4"))
this.option4 = { this.option4 = {
color:this.colorList, color: this.colorList,
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: 25, left: 25,
right: 0, right: 0,

6
src/views/abnormalAlarm/serverMonitor/instances/details.vue
View File

@ -936,6 +936,9 @@ export default {
drawAreaCpu() { drawAreaCpu() {
this.areaCpu = echarts.init(document.getElementById("areaCpu")) this.areaCpu = echarts.init(document.getElementById("areaCpu"))
let option = { let option = {
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: '0%', left: '0%',
right: '0%', right: '0%',
@ -1000,6 +1003,9 @@ export default {
drawDisk() { drawDisk() {
this.barDisk = echarts.init(document.getElementById("disk")) this.barDisk = echarts.init(document.getElementById("disk"))
let option = { let option = {
tooltip: {
trigger: 'item'
},
grid: { grid: {
left: '0%', left: '0%',
right: '0%', right: '0%',

5
src/views/abnormalAlarm/serverMonitor/instances/lineChart.vue
View File

@ -45,7 +45,10 @@ export default {
} }
}) })
this.option = { this.option = {
color:["#00ff5a","#0096ff","#ffc600"], color: ["#00ff5a", "#0096ff", "#ffc600"],
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,

71
src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
View File

@ -57,24 +57,24 @@
<div class="service-content-center"> <div class="service-content-center">
<a-row :gutter="20"> <a-row :gutter="20">
<a-col :span="12"> <a-col :span="12">
<BoxTitle title="Proces CPU usage(%)"> <BoxTitle title="Process CPU usage(%)">
<template slot="right"> <template slot="right">
<ul class="legend-list"> <ul class="legend-list">
<li v-for="(item,index) in procesCpu.legend" :key="index"> <li v-for="(item,index) in processCpu.legend" :key="index">
<div :style="`background:${procesCpu.color[index]}`" class="li-icon"></div> <div :style="`background:${processCpu.color[index]}`" class="li-icon"></div>
{{ item }} {{ item }}
</li> </li>
</ul> </ul>
</template> </template>
</BoxTitle> </BoxTitle>
<div class="service-content-center-item" id="cpu"></div> <div class="service-content-center-item" id="processCpu"></div>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<BoxTitle title="Proces memory usage(%)"> <BoxTitle title="Process memory usage(%)">
<template slot="right"> <template slot="right">
<ul class="legend-list"> <ul class="legend-list">
<li v-for="(item,index) in procesMenbry.legend" :key="index"> <li v-for="(item,index) in processMenbry.legend" :key="index">
<div :style="`background:${procesMenbry.color[index]}`" class="li-icon"></div> <div :style="`background:${processMenbry.color[index]}`" class="li-icon"></div>
{{ item }} {{ item }}
</li> </li>
</ul> </ul>
@ -190,12 +190,12 @@ export default {
legend: ["NemuHeadless.exe","System","dwm.exe","CompatTelRunner.exe","msedge.exe"], legend: ["NemuHeadless.exe","System","dwm.exe","CompatTelRunner.exe","msedge.exe"],
color: ['#2d5cd3','#60cae8','#1ab060','#ffbf44','#e86954'] color: ['#2d5cd3','#60cae8','#1ab060','#ffbf44','#e86954']
}, },
procesCpu: { processCpu: {
content: null, content: null,
legend: ["mysqld.exe","svchost.exe"], legend: ["mysqld.exe","svchost.exe"],
color: ['#e5ae2d','#00a8ff'] color: ['#e5ae2d','#00a8ff']
}, },
procesMenbry: { processMenbry: {
content: null, content: null,
legend: ["mysqld.exe","svchost.exe"], legend: ["mysqld.exe","svchost.exe"],
color: ['#9ed24d','#00a8ff'] color: ['#9ed24d','#00a8ff']
@ -268,7 +268,10 @@ export default {
drawRanked() { drawRanked() {
this.ranked.content = echarts.init(document.getElementById("ranked")) this.ranked.content = echarts.init(document.getElementById("ranked"))
let option = { let option = {
color:this.ranked.color, color: this.ranked.color,
tooltip: {
trigger: 'item'
},
grid: { grid: {
left: 25, left: 25,
right: 0, right: 0,
@ -321,36 +324,36 @@ export default {
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
stack: 'Search Engine', stack: 'Search Engine',
emphasis: { // emphasis: {
focus: 'series' // focus: 'series'
}, // },
data: [20, 32, 71, 34, 90, 30,92] data: [20, 32, 71, 34, 90, 30,92]
}, },
{ {
name: 'Google', name: 'Google',
type: 'bar', type: 'bar',
stack: 'Search Engine', stack: 'Search Engine',
emphasis: { // emphasis: {
focus: 'series' // focus: 'series'
}, // },
data: [12, 25, 46, 34, 29, 23,64] data: [12, 25, 46, 34, 29, 23,64]
}, },
{ {
name: 'Bing', name: 'Bing',
type: 'bar', type: 'bar',
stack: 'Search Engine', stack: 'Search Engine',
emphasis: { // emphasis: {
focus: 'series' // focus: 'series'
}, // },
data: [60, 72, 71, 74, 90, 13,43] data: [60, 72, 71, 74, 90, 13,43]
}, },
{ {
name: 'Others', name: 'Others',
type: 'bar', type: 'bar',
stack: 'Search Engine', stack: 'Search Engine',
emphasis: { // emphasis: {
focus: 'series' // focus: 'series'
}, // },
data: [62, 82, 91, 84, 19, 11, 55] data: [62, 82, 91, 84, 19, 11, 55]
}, },
{ {
@ -358,9 +361,9 @@ export default {
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
stack: 'Search Engine', stack: 'Search Engine',
emphasis: { // emphasis: {
focus: 'series' // focus: 'series'
}, // },
data: [20, 32, 71, 34, 90, 30,92] data: [20, 32, 71, 34, 90, 30,92]
}, },
] ]
@ -371,8 +374,11 @@ export default {
}); });
}, },
drawProcesCpu() { drawProcesCpu() {
this.procesCpu.content = echarts.init(document.getElementById("cpu")) this.processCpu.content = echarts.init(document.getElementById("processCpu"))
let option = { let option = {
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,
@ -450,14 +456,17 @@ export default {
} }
] ]
}; };
this.procesCpu.content.setOption(option) this.processCpu.content.setOption(option)
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
this.procesCpu.content.resize(); this.processCpu.content.resize();
}); });
}, },
drawProcesMenbry() { drawProcesMenbry() {
this.procesMenbry.content = echarts.init(document.getElementById("menbry")) this.processMenbry.content = echarts.init(document.getElementById("menbry"))
let option = { let option = {
tooltip: {
trigger: 'axis'
},
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,
@ -535,9 +544,9 @@ export default {
} }
] ]
}; };
this.procesMenbry.content.setOption(option) this.processMenbry.content.setOption(option)
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
this.procesMenbry.content.resize(); this.processMenbry.content.resize();
}); });
}, },
handlePageChange(page, pageSize) { handlePageChange(page, pageSize) {