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 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 `<div>Time:${moment(date).format('HH:mm')}</div>
<div>Data:${isCompute ? value + this.newUnits : value}</div>`
},
}
},
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()
},
},
}
}
}
</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">
<div class="monitor-content-item">
<AreaChart
:title="el.title"
:title="el.name"
:layout="`area${i}`"
:color="el.color"
:dataSource="el.list"
@ -58,7 +58,7 @@ export default {
BoxTitle,
ConditionBox,
AreaChart,
StackedAreaChart,
StackedAreaChart
},
data() {
return {
@ -66,7 +66,7 @@ export default {
queryParams: {
hostId: '',
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],
@ -78,66 +78,66 @@ export default {
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Max Used Connections',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Aborted Clients',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Aborted Connects',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Threads Connected',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'New Connections',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
},
avg: '151.0'
}
],
data: [
{
name: 'Email1',
data: [120, 132, 101, 134, 90, 230, 210],
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Email2',
data: [220, 182, 191, 234, 290, 330, 310],
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Email3',
data: [150, 232, 201, 154, 190, 330, 410],
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Email4',
data: [320, 332, 301, 334, 390, 330, 320],
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Email5',
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
},
{
legends: [
@ -146,66 +146,66 @@ export default {
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Max Used Connections',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Aborted Clients',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Aborted Connects',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Threads Connected',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'New Connections',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
},
avg: '151.0'
}
],
data: [
{
name: 'Email1',
data: [120, 132, 101, 134, 90, 230, 210],
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Email2',
data: [220, 182, 191, 234, 290, 330, 310],
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Email3',
data: [150, 232, 201, 154, 190, 330, 410],
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Email4',
data: [320, 332, 301, 334, 390, 330, 320],
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Email5',
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
},
{
legends: [
@ -214,113 +214,122 @@ export default {
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Max Used Connections',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Aborted Clients',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Aborted Connects',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'Threads Connected',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
avg: '151.0'
},
{
connections: 'New Connections',
now: '151.0',
min: '151.0',
max: '151.0',
avg: '151.0',
},
avg: '151.0'
}
],
data: [
{
name: 'Email1',
data: [120, 132, 101, 134, 90, 230, 210],
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Email2',
data: [220, 182, 191, 234, 290, 330, 310],
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Email3',
data: [150, 232, 201, 154, 190, 330, 410],
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Email4',
data: [320, 332, 301, 334, 390, 330, 320],
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Email5',
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
],
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: '',
},
chartDataColors: [
['rgba(38, 180, 246, .5)', 'rgba(38, 180, 246, .1)'],
['rgba(214, 238, 80, .8)', 'rgba(214, 238, 80, .1)'],
['rgba(236, 137, 41, .5)', 'rgba(236, 137, 41, .1)'],
['rgba(84, 95, 213, .5)', 'rgba(84, 95, 213, .1)'],
['rgba(1, 238, 206, .5)', 'rgba(1, 238, 206, .1)'],
['rgba(237, 190, 61, .5)', 'rgba(237, 190, 61, .1)']
],
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: {
@ -346,19 +355,19 @@ export default {
}
},
dataConversion() {
return function (number, units) {
return function(number, units) {
const obj = {
KB: 1024,
MB: Math.pow(1024, 2),
GB: Math.pow(1024, 3),
TB: Math.pow(1024, 4),
PB: Math.pow(1024, 5),
EB: Math.pow(1024, 6),
EB: Math.pow(1024, 6)
}
// console.log(obj[units],number / obj[units])
return (number / obj[units]).toFixed(2)
}
},
}
},
methods: {
// 获取数据
@ -368,8 +377,8 @@ export default {
try {
const { success, result, message } = await getAction('/systemMonitor/dbDetail', this.queryParams)
if (success) {
this.chartData.forEach((chartItem, index) => {
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()
})
},
},
}
}
}
</script>
@ -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;