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

bug修改

Browse Source
This commit is contained in:
pengjunchao 2026-05-13 15:59:20 +08:00
parent a5a53801c6
commit fa149dee25
2 changed files with 152 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,20 +9,24 @@
import * as echarts from 'echarts' import * as echarts from 'echarts'
import BoxTitle from '../../components/boxTitle.vue' import BoxTitle from '../../components/boxTitle.vue'
import moment from 'moment' import moment from 'moment'
export default { export default {
props: ['title', 'layout', 'color', 'dataSource', 'units', 'newUnits'], props: ['title', 'layout', 'color', 'dataSource', 'units', 'newUnits'],
components: { components: {
BoxTitle, BoxTitle
}, },
data() { data() {
return { return {
option: {}, option: {},
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
} }
}, },
mounted() {
this.drawChart()
},
methods: { methods: {
drawChart() { drawChart() {
let seriesData = this.dataSource.map(function (item) { let seriesData = this.dataSource.map(function(item) {
return [item.date * 1000, item.value] return [item.date * 1000, item.value]
}) })
const isCompute = this.units === 'B' || this.units === 'Kb' const isCompute = this.units === 'B' || this.units === 'Kb'
@ -36,28 +40,28 @@ export default {
const [date, value] = param[0].value const [date, value] = param[0].value
return `<div>Time:${moment(date).format('HH:mm')}</div> return `<div>Time:${moment(date).format('HH:mm')}</div>
<div>Data:${isCompute ? value + this.newUnits : value}</div>` <div>Data:${isCompute ? value + this.newUnits : value}</div>`
}, }
}, },
grid: { grid: {
left: 0, left: 0,
right: 20, right: 20,
top: 15, top: 15,
bottom: 0, bottom: 0,
containLabel: true, containLabel: true
}, },
xAxis: { xAxis: {
type: 'time', type: 'time',
// type: 'category', // type: 'category',
axisTick: { axisTick: {
show: false, show: false
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'rgba(115, 191, 255, 0.2)', color: 'rgba(115, 191, 255, 0.2)'
}, }
}, },
axisLabel: { axisLabel: {
color: 'rgba(173, 230, 238, 1)', color: 'rgba(173, 230, 238, 1)'
// formatter: (value,index)=>{ // formatter: (value,index)=>{
// if(index === 0) { // if(index === 0) {
// return ' ' + value; // return ' ' + value;
@ -68,29 +72,29 @@ export default {
// return value // return value
// } // }
}, },
boundaryGap: false, boundaryGap: false
// data: this.xData // data: this.xData
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
title: { title: {
text: isCompute ? 'unit:' + this.newUnits : null, text: isCompute ? 'unit:' + this.newUnits : null
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(115, 191, 255, 0.2)', color: 'rgba(115, 191, 255, 0.2)'
}, }
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: 'rgba(115, 191, 255, 0.5)', color: 'rgba(115, 191, 255, 0.5)'
}, }
}, },
axisLabel: { axisLabel: {
color: 'rgba(173, 230, 238, 1)', color: 'rgba(173, 230, 238, 1)'
}, }
}, },
series: [ series: [
{ {
@ -98,30 +102,30 @@ export default {
type: 'line', type: 'line',
symbol: 'none', symbol: 'none',
lineStyle: { lineStyle: {
width: 2, width: 2
}, },
areaStyle: { areaStyle: {
opacity: 1, opacity: 1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.color[0] }, { 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) myLine.setOption(this.option)
window.addEventListener('resize', function () { window.addEventListener('resize', function() {
myLine.resize() myLine.resize()
}) })
}, }
}, },
watch: { watch: {
dataSource() { dataSource() {
this.drawChart() this.drawChart()
}, }
}, }
} }
</script> </script>

228
src/views/abnormalAlarm/databaseMonitor/instances/monitor.vue
View File

@ -7,7 +7,7 @@
<a-col :span="12" style="height: 33.3333%" v-for="(el, i) in chartData" :key="i"> <a-col :span="12" style="height: 33.3333%" v-for="(el, i) in chartData" :key="i">
<div class="monitor-content-item"> <div class="monitor-content-item">
<AreaChart <AreaChart
:title="el.title" :title="el.name"
:layout="`area${i}`" :layout="`area${i}`"
:color="el.color" :color="el.color"
:dataSource="el.list" :dataSource="el.list"
@ -58,7 +58,7 @@ export default {
BoxTitle, BoxTitle,
ConditionBox, ConditionBox,
AreaChart, AreaChart,
StackedAreaChart, StackedAreaChart
}, },
data() { data() {
return { return {
@ -66,7 +66,7 @@ export default {
queryParams: { queryParams: {
hostId: '', hostId: '',
start: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'), start: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'), end: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
}, },
data: [5, 23, 12, 48, 15, 27, 56], data: [5, 23, 12, 48, 15, 27, 56],
@ -78,66 +78,66 @@ export default {
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Max Used Connections', connections: 'Max Used Connections',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Aborted Clients', connections: 'Aborted Clients',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Aborted Connects', connections: 'Aborted Connects',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Threads Connected', connections: 'Threads Connected',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'New Connections', connections: 'New Connections',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, }
], ],
data: [ data: [
{ {
name: 'Email1', name: 'Email1',
data: [120, 132, 101, 134, 90, 230, 210], data: [120, 132, 101, 134, 90, 230, 210]
}, },
{ {
name: 'Email2', name: 'Email2',
data: [220, 182, 191, 234, 290, 330, 310], data: [220, 182, 191, 234, 290, 330, 310]
}, },
{ {
name: 'Email3', name: 'Email3',
data: [150, 232, 201, 154, 190, 330, 410], data: [150, 232, 201, 154, 190, 330, 410]
}, },
{ {
name: 'Email4', name: 'Email4',
data: [320, 332, 301, 334, 390, 330, 320], data: [320, 332, 301, 334, 390, 330, 320]
}, },
{ {
name: 'Email5', name: 'Email5',
data: [820, 932, 901, 934, 1290, 1330, 1320], data: [820, 932, 901, 934, 1290, 1330, 1320]
}, }
], ]
}, },
{ {
legends: [ legends: [
@ -146,66 +146,66 @@ export default {
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Max Used Connections', connections: 'Max Used Connections',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Aborted Clients', connections: 'Aborted Clients',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Aborted Connects', connections: 'Aborted Connects',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Threads Connected', connections: 'Threads Connected',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'New Connections', connections: 'New Connections',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, }
], ],
data: [ data: [
{ {
name: 'Email1', name: 'Email1',
data: [120, 132, 101, 134, 90, 230, 210], data: [120, 132, 101, 134, 90, 230, 210]
}, },
{ {
name: 'Email2', name: 'Email2',
data: [220, 182, 191, 234, 290, 330, 310], data: [220, 182, 191, 234, 290, 330, 310]
}, },
{ {
name: 'Email3', name: 'Email3',
data: [150, 232, 201, 154, 190, 330, 410], data: [150, 232, 201, 154, 190, 330, 410]
}, },
{ {
name: 'Email4', name: 'Email4',
data: [320, 332, 301, 334, 390, 330, 320], data: [320, 332, 301, 334, 390, 330, 320]
}, },
{ {
name: 'Email5', name: 'Email5',
data: [820, 932, 901, 934, 1290, 1330, 1320], data: [820, 932, 901, 934, 1290, 1330, 1320]
}, }
], ]
}, },
{ {
legends: [ legends: [
@ -214,113 +214,122 @@ export default {
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Max Used Connections', connections: 'Max Used Connections',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Aborted Clients', connections: 'Aborted Clients',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Aborted Connects', connections: 'Aborted Connects',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'Threads Connected', connections: 'Threads Connected',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, },
{ {
connections: 'New Connections', connections: 'New Connections',
now: '151.0', now: '151.0',
min: '151.0', min: '151.0',
max: '151.0', max: '151.0',
avg: '151.0', avg: '151.0'
}, }
], ],
data: [ data: [
{ {
name: 'Email1', name: 'Email1',
data: [120, 132, 101, 134, 90, 230, 210], data: [120, 132, 101, 134, 90, 230, 210]
}, },
{ {
name: 'Email2', name: 'Email2',
data: [220, 182, 191, 234, 290, 330, 310], data: [220, 182, 191, 234, 290, 330, 310]
}, },
{ {
name: 'Email3', name: 'Email3',
data: [150, 232, 201, 154, 190, 330, 410], data: [150, 232, 201, 154, 190, 330, 410]
}, },
{ {
name: 'Email4', name: 'Email4',
data: [320, 332, 301, 334, 390, 330, 320], data: [320, 332, 301, 334, 390, 330, 320]
}, },
{ {
name: 'Email5', name: 'Email5',
data: [820, 932, 901, 934, 1290, 1330, 1320], data: [820, 932, 901, 934, 1290, 1330, 1320]
}, }
], ]
}, }
], ],
chartData: [ chartDataColors: [
{ ['rgba(38, 180, 246, .5)', 'rgba(38, 180, 246, .1)'],
title: 'Database memory state(Total memory)', ['rgba(214, 238, 80, .8)', 'rgba(214, 238, 80, .1)'],
color: ['rgba(38, 180, 246, .5)', 'rgba(38, 180, 246, .1)'], ['rgba(236, 137, 41, .5)', 'rgba(236, 137, 41, .1)'],
list: [], ['rgba(84, 95, 213, .5)', 'rgba(84, 95, 213, .1)'],
units: '', ['rgba(1, 238, 206, .5)', 'rgba(1, 238, 206, .1)'],
newUnits: '', ['rgba(237, 190, 61, .5)', 'rgba(237, 190, 61, .1)']
},
{
title: 'Database user status(Logins per second)',
color: ['rgba(214, 238, 80, .8)', 'rgba(214, 238, 80, .1)'],
list: [],
units: '',
newUnits: '',
},
{
title: 'Database connection number',
color: ['#ec8929'],
color: ['rgba(236, 137, 41, .5)', 'rgba(236, 137, 41, .1)'],
list: [],
units: '',
newUnits: '',
},
{
title: 'Database connection response time',
color: ['rgba(84, 95, 213, .5)', 'rgba(84, 95, 213, .1)'],
list: [],
units: '',
newUnits: '',
},
{
title: 'Remaining space of the databasce log file',
color: ['rgba(1, 238, 206, .5)', 'rgba(1, 238, 206, .1)'],
list: [],
units: '',
newUnits: '',
},
{
title: 'Database file size',
color: ['rgba(237, 190, 61, .5)', 'rgba(237, 190, 61, .1)'],
list: [],
units: '',
newUnits: '',
},
], ],
chartData: []
// chartData: [
// {
// title: 'Database memory state(Total memory)',
// color: ['rgba(38, 180, 246, .5)', 'rgba(38, 180, 246, .1)'],
// list: [],
// units: '',
// newUnits: '',
// },
// {
// title: 'Database user status(Logins per second)',
// color: ['rgba(214, 238, 80, .8)', 'rgba(214, 238, 80, .1)'],
// list: [],
// units: '',
// newUnits: '',
// },
// {
// title: 'Database connection number',
// color: ['#ec8929'],
// color: ['rgba(236, 137, 41, .5)', 'rgba(236, 137, 41, .1)'],
// list: [],
// units: '',
// newUnits: '',
// },
// {
// title: 'Database connection response time',
// color: ['rgba(84, 95, 213, .5)', 'rgba(84, 95, 213, .1)'],
// list: [],
// units: '',
// newUnits: '',
// },
// {
// title: 'Remaining space of the databasce log file',
// color: ['rgba(1, 238, 206, .5)', 'rgba(1, 238, 206, .1)'],
// list: [],
// units: '',
// newUnits: '',
// },
// {
// title: 'Database file size',
// color: ['rgba(237, 190, 61, .5)', 'rgba(237, 190, 61, .1)'],
// list: [],
// units: '',
// newUnits: '',
// },
// ],
} }
}, },
computed: { computed: {
@ -346,19 +355,19 @@ export default {
} }
}, },
dataConversion() { dataConversion() {
return function (number, units) { return function(number, units) {
const obj = { const obj = {
KB: 1024, KB: 1024,
MB: Math.pow(1024, 2), MB: Math.pow(1024, 2),
GB: Math.pow(1024, 3), GB: Math.pow(1024, 3),
TB: Math.pow(1024, 4), TB: Math.pow(1024, 4),
PB: Math.pow(1024, 5), PB: Math.pow(1024, 5),
EB: Math.pow(1024, 6), EB: Math.pow(1024, 6)
} }
// console.log(obj[units],number / obj[units]) // console.log(obj[units],number / obj[units])
return (number / obj[units]).toFixed(2) return (number / obj[units]).toFixed(2)
} }
}, }
}, },
methods: { methods: {
// 获取数据 // 获取数据
@ -368,8 +377,8 @@ export default {
try { try {
const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams) const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
if (success) { if (success) {
this.chartData.forEach((chartItem, index) => { this.chartData = []
const item = result[index] result.forEach((item, index) => {
if (item.units === 'B' || item.units === 'Kb') { if (item.units === 'B' || item.units === 'Kb') {
item.newUnits = this.unitConversion(item.min, item.units) item.newUnits = this.unitConversion(item.min, item.units)
item.list.forEach((val) => { item.list.forEach((val) => {
@ -380,7 +389,8 @@ export default {
val.value = Number(this.dataConversion(number, item.newUnits)) val.value = Number(this.dataConversion(number, item.newUnits))
}) })
} }
Object.assign(chartItem, item) item.color = this.chartDataColors[index]
this.chartData.push(item)
}) })
} else { } else {
this.$message.error(message) this.$message.error(message)
@ -425,20 +435,20 @@ export default {
label: { label: {
formatter: (text) => { formatter: (text) => {
return moment(text * 1000).format('HH:mm') return moment(text * 1000).format('HH:mm')
}, }
}, }
}, },
yAxis: { yAxis: {
title: { title: {
text: isCompute ? '单位:' + item.newUnits : null, text: isCompute ? '单位:' + item.newUnits : null
}, }
}, },
color: color, color: color,
// seriesField: 'name', // seriesField: 'name',
areaStyle: () => { areaStyle: () => {
return { return {
fill: 'l(270) 0:#ffffff 1:' + color, fill: 'l(270) 0:#ffffff 1:' + color
} }
}, },
tooltip: { tooltip: {
@ -449,13 +459,13 @@ export default {
num = text.value + item.newUnits num = text.value + item.newUnits
} }
return { name: moment(text.date * 1000).format('HH:mm'), value: num } return { name: moment(text.date * 1000).format('HH:mm'), value: num }
}, }
}, }
}) })
this.echartObj[item.name].render() this.echartObj[item.name].render()
}) })
}, }
}, }
} }
</script> </script>
@ -465,19 +475,23 @@ export default {
margin-top: 10px; margin-top: 10px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
/deep/.ant-spin-nested-loading {
/deep/ .ant-spin-nested-loading {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/deep/.ant-spin-container {
/deep/ .ant-spin-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&-item { &-item {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 5px 10px 5px 0; padding: 5px 10px 5px 0;
} }
&-item-child { &-item-child {
width: 100%; width: 100%;
height: auto; height: auto;