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': case 'hour':
return dayjs().subtract(1, 'hours').valueOf(); return dayjs().subtract(1, 'hours').valueOf();
case 'week': case 'week':
return dayjs().subtract(6, 'days').valueOf(); return dayjs().subtract(6, 'days').startOf('day').valueOf();
case 'month': case 'month':
return dayjs().subtract(29, 'days').valueOf(); return dayjs().subtract(29, 'days').valueOf();
case 'year': case 'year':
return dayjs().subtract(365, 'days').valueOf(); return dayjs().subtract(365, 'days').valueOf();
case 'day':
return dayjs().subtract(24, 'hours').valueOf();
default: default:
return dayjs().startOf('day').valueOf(); return dayjs().startOf('day').valueOf();
} }

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

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

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

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

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

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

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

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

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

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

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

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