0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 设备管理、运维管理、告警中心仪表盘

This commit is contained in:
XieYongHong 2023-07-20 11:39:34 +08:00
parent 58183fa597
commit f7f2ed9298
8 changed files with 91 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/device/DashBoard/components/TimeSelect.vue
View File

@ -82,11 +82,13 @@ const getTimeByType = (type: string) => {
case 'hour':
return dayjs().subtract(1, 'hours').valueOf();
case 'week':
return dayjs().subtract(6, 'days').valueOf();
return dayjs().subtract(6, 'days').startOf('day').valueOf();
case 'month':
return dayjs().subtract(29, 'days').valueOf();
case 'year':
return dayjs().subtract(365, 'days').valueOf();
case 'day':
return dayjs().subtract(24, 'hours').valueOf();
default:
return dayjs().startOf('day').valueOf();
}

20
src/views/device/DashBoard/index.vue
View File

@ -42,6 +42,11 @@
<template #extra>
<TimeSelect
key="flow-static"
:quickBtnList="[
{ label: '最近1小时', value: 'hour' },
{ label: '最近24小时', value: 'day' },
{ label: '近一周', value: 'week' },
]"
:type="'week'"
@change="getEcharts"
/>
@ -539,20 +544,25 @@ const getDevice = () => {
};
const getEcharts = (data: any) => {
let _time = '1h';
let format = 'HH';
let _time = '1m';
let format = 'M月dd日 HH:mm';
let limit = 12;
const dt = data.end - data.start;
const hour = 60 * 60 * 1000;
const days = hour * 24;
const months = days * 30;
const year = 365 * days;
if (dt <= days) {
limit = Math.abs(Math.ceil(dt / hour));
if (dt <= (hour + 10)) {
limit = 60
format = 'HH:mm';
} else if (dt > hour && dt <= days) {
_time = '1h'
limit = 24;
} else if (dt > days && dt < year) {
limit = Math.abs(Math.ceil(dt / days)) + 1;
_time = '1d';
format = 'M月dd日';
format = 'M月dd日 HH:mm:ss';
} else if (dt >= year) {
limit = Math.abs(Math.floor(dt / months));
_time = '1M';

39
src/views/link/DashBoard/components/Cpu.vue
View File

@ -20,17 +20,13 @@
style="margin-right: 10px"
v-model:value="data.type"
>
<j-radio-button value="hour">
最近1小时
</j-radio-button>
<j-radio-button value="today">
今日
</j-radio-button>
<j-radio-button value="week">
近一周
</j-radio-button>
</j-radio-group></template
>
<j-radio-button value="hour">
最近1小时
</j-radio-button>
<j-radio-button value="day"> 最近24小时 </j-radio-button>
<j-radio-button value="week"> 近一周 </j-radio-button>
</j-radio-group>
</template>
</j-range-picker>
</div>
<div>
@ -125,11 +121,11 @@ const echartsOptions = computed(() => {
{
type: 'inside',
start: 0,
end: 100,
end: data.value.type !== 'hour' ? 5 : 100,
},
{
start: 0,
end: 100,
end: data.value.type !== 'hour' ? 5 : 100,
},
],
color: ['#2CB6E0'],
@ -194,18 +190,19 @@ watch(
if (value === undefined) return;
const date = getTimeByType(value);
data.value.time = [dayjs(date), dayjs(new Date())];
if (props.isNoCommunity) {
getCPUEcharts(data.value);
}
},
{ immediate: true, deep: true },
);
watchEffect(() => {
const time = data.value.time
if (time && Array.isArray(time) && time.length === 2 && time[0]) {
if (!props.isNoCommunity || props.serviceId) {
getCPUEcharts(data.value);
}
}
})
// watchEffect(() => {
// const time = data.value.time
// if (time && Array.isArray(time) && time.length === 2 && time[0]) {
//
// }
// })
</script>

36
src/views/link/DashBoard/components/Jvm.vue
View File

@ -20,15 +20,11 @@
style="margin-right: 10px"
v-model:value="data.type"
>
<j-radio-button value="hour">
最近1小时
</j-radio-button>
<j-radio-button value="today">
今日
</j-radio-button>
<j-radio-button value="week">
近一周
</j-radio-button>
<j-radio-button value="hour">
最近1小时
</j-radio-button>
<j-radio-button value="day"> 最近24小时 </j-radio-button>
<j-radio-button value="week"> 近一周 </j-radio-button>
</j-radio-group></template
>
</j-range-picker>
@ -180,11 +176,11 @@ const echartsOptions = computed(() => {
{
type: 'inside',
start: 0,
end: 100,
end: data.value.type !== 'hour' ? 10 : 100,
},
{
start: 0,
end: 100,
end: data.value.type !== 'hour' ? 10 : 100,
},
],
color: ['#60DFC7'],
@ -198,18 +194,20 @@ watch(
if (value === undefined) return;
const date = getTimeByType(value);
data.value.time = [dayjs(date), dayjs(new Date())];
if (props.isNoCommunity) {
getJVMEcharts(data.value);
}
},
{ immediate: true, deep: true },
);
watchEffect(() => {
const time = data.value.time
if (time && Array.isArray(time) && time.length === 2 && time[0]) {
if (!props.isNoCommunity || props.serviceId) {
getJVMEcharts(data.value);
}
}
})
// watchEffect(() => {
// const time = data.value.time
// if (time && Array.isArray(time) && time.length === 2 && time[0]) {
//
// }
// })
</script>

18
src/views/link/DashBoard/components/Network.vue
View File

@ -26,7 +26,7 @@
<j-radio-button value="hour">
最近1小时
</j-radio-button>
<j-radio-button value="day"> 近24小时 </j-radio-button>
<j-radio-button value="day"> 最近24小时 </j-radio-button>
<j-radio-button value="week"> 近一周 </j-radio-button>
</j-radio-group>
<j-range-picker
@ -194,7 +194,7 @@ const echartsOptions = computed(() => {
},
grid: {
left: '70px',
right: 10,
right: data.value.time.type === 'week' ? 50 :10,
bottom: '24px',
top: 24
},
@ -213,16 +213,18 @@ watch(
if (value === undefined) return;
const date = getTimeByType(value);
data.value.time.time = [dayjs(date), dayjs(new Date())];
getNetworkEcharts(data.value);
},
{ immediate: true, deep: true },
);
watchEffect(() => {
const time = data.value.time.time
if (time && Array.isArray(time) && time.length === 2 && time[0] && props.serviceId) {
getNetworkEcharts(data.value);
}
})
// watchEffect(() => {
// const time = data.value.time.time
// if (time && Array.isArray(time) && time.length === 2 && time[0] && props.serviceId) {
//
// }
// })
</script>

18
src/views/link/DashBoard/components/tool.ts
View File

@ -36,7 +36,7 @@ export const getTimeByType = (type: string) => {
case 'hour':
return dayjs().subtract(1, 'hours');
case 'week':
return dayjs().subtract(6, 'days');
return dayjs().subtract(6, 'days').startOf('day');
case 'month':
return dayjs().subtract(29, 'days');
case 'year':
@ -59,7 +59,7 @@ export const arrayReverse = (data: string) => {
export const networkParams = (val: any) => {
let _time = '1h';
let _limit = 12;
let format = 'HH';
let format = 'M月dd日 HH:mm';
// @ts-ignore
const dt = dayjs(val.time.time[1]) - dayjs(val.time.time[0])
const hour = 60 * 60 * 1000;
@ -68,17 +68,15 @@ export const networkParams = (val: any) => {
const year = 365 * days;
if (dt <= (hour + 10)) {
format = 'mm:ss';
_time = '1m';
_limit = 30;
} else if (dt > hour && dt <= days) {
_limit = Math.abs(Math.ceil(dt / hour));
_limit = 24;
format = 'HH:mm';
_time = '1m';
_limit = 60;
} else if (dt > hour && dt <= days) {
_limit = 24;
} else if (dt > days && dt <= months * 3) {
_limit = Math.abs(Math.ceil(dt / days)) + 1;
_time = '1d';
format = 'M月dd日';
format = 'M月dd日 HH:mm:ss';
} else if (dt > months * 3 && dt < year) {
_limit = Math.abs(Math.ceil(dt / months)) + 1;
_time = '1M';
@ -101,7 +99,7 @@ export const networkParams = (val: any) => {
from: Number(val.time.time[0]),
to: Number(val.time.time[1]),
limit: _limit,
format: 'YYYY-MM-dd HH:mm',
format: format,
},
},
];

2
src/views/rule-engine/DashBoard/components/TimeSelect.vue
View File

@ -86,6 +86,8 @@ const getTimeByType = (type: string) => {
return dayjs().subtract(29, 'days').valueOf();
case 'year':
return dayjs().subtract(365, 'days').valueOf();
case 'day':
return dayjs().subtract(24, 'hours').valueOf();
default:
return dayjs().startOf('day').valueOf();
}

25
src/views/rule-engine/DashBoard/index.vue
View File

@ -42,6 +42,11 @@
<TimeSelect
key="flow-static"
:type="'week'"
:quickBtnList="[
{ label: '最近1小时', value: 'hour' },
{ label: '最近24小时', value: 'day' },
{ label: '近一周', value: 'week' },
]"
@change="initQueryTime"
/>
</template>
@ -238,6 +243,7 @@ const getDashBoard = () => {
.filter((item) => item.group === '15day')
.map((item) => item.data)
.sort((a, b) => b.timestamp - a.timestamp);
state.fifteenOptions = {
xAxis: {
type: 'category',
@ -355,20 +361,25 @@ const initQueryTime = (data: any) => {
selectChange();
};
const selectChange = () => {
let time = '1h';
let format = 'HH';
let time = '1m';
let format = 'M月dd日 HH:mm';
let limit = 12;
const dt = queryCodition.endTime - queryCodition.startTime;
const hour = 60 * 60 * 1000;
const day = hour * 24;
const month = day * 30;
const year = 365 * day;
if (dt <= day) {
limit = Math.abs(Math.ceil(dt / hour));
if (dt <= (hour + 10)) {
limit = 60
format = 'HH:mm';
} else if (dt > hour && dt <= day) {
time = '1h'
limit = 24;
} else if (dt > day && dt < year) {
limit = Math.abs(Math.ceil(dt / day)) + 1;
time = '1d';
format = 'M月dd日';
format = 'M月dd日 HH:mm:ss';
} else if (dt >= year) {
limit = Math.abs(Math.floor(dt / month));
time = '1M';
@ -429,7 +440,7 @@ const selectChange = () => {
.filter((item: any) => item.group === 'alarmTrend')
.forEach((item: any) => {
xData.push(item.data.timeString);
sData.push(item.data.value * 100000);
sData.push(item.data.value);
});
const maxY = sData.sort((a,b)=>{
return b-a
@ -452,7 +463,7 @@ const selectChange = () => {
grid: {
top: '2%',
bottom: '5%',
left: maxY < 1000 ? '40px' : maxY.toString().length * 10,
left: maxY < 1000 ? 50 : maxY.toString().length * 10,
right: '48px',
},
series: [