|
|
|
|
@ -5,7 +5,8 @@
|
|
|
|
|
<header class="dashboard-header">
|
|
|
|
|
<div class="brand">
|
|
|
|
|
<div class="brand-icon">
|
|
|
|
|
<Icon icon="ep:cpu" />
|
|
|
|
|
<!-- <Icon icon="ep:cpu" />-->
|
|
|
|
|
<img alt="" class="mr-10px h-40px w-40px" src="@/assets/imgs/logo.png" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="brand-text">{{ t('Header.subTitle') }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -189,30 +190,25 @@ const getMetricValue = (keys: string[]) => {
|
|
|
|
|
return foundKey ? metricValueMap.value[foundKey] : undefined
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const summaryMap = computed(() => {
|
|
|
|
|
return overviewData.value.summary.reduce<Record<string, number>>((acc, item) => {
|
|
|
|
|
acc[item.status] = Number(item.percent) || 0
|
|
|
|
|
return acc
|
|
|
|
|
}, {})
|
|
|
|
|
})
|
|
|
|
|
const calcDeviceRate = (count: number, total: number) => {
|
|
|
|
|
if (!total) return 0
|
|
|
|
|
return Number(((count / total) * 100).toFixed(1))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const statusCards = computed(() => [
|
|
|
|
|
{
|
|
|
|
|
key: 'total',
|
|
|
|
|
label: t('Metrics.total'),
|
|
|
|
|
icon: 'ep:connection',
|
|
|
|
|
value:
|
|
|
|
|
overviewData.value.totalDevices ||
|
|
|
|
|
getMetricValue(['total', 'deviceTotal', 'totalDevices']) ||
|
|
|
|
|
overviewData.value.timelineRows.length,
|
|
|
|
|
value: totalDeviceCount.value,
|
|
|
|
|
tone: 'total'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'online',
|
|
|
|
|
label: t('Metrics.online'),
|
|
|
|
|
icon: 'ep:cpu',
|
|
|
|
|
value: Math.max(0, totalDeviceCount.value - offlineDeviceCount.value),
|
|
|
|
|
percent: 100 - (summaryMap.value.offline || 0),
|
|
|
|
|
value: onlineDeviceCount.value,
|
|
|
|
|
percent: calcDeviceRate(onlineDeviceCount.value, totalDeviceCount.value),
|
|
|
|
|
tone: 'online'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -220,31 +216,31 @@ const statusCards = computed(() => [
|
|
|
|
|
label: t('Metrics.offline'),
|
|
|
|
|
icon: 'ep:link',
|
|
|
|
|
value: offlineDeviceCount.value,
|
|
|
|
|
percent: summaryMap.value.offline || 0,
|
|
|
|
|
percent: calcDeviceRate(offlineDeviceCount.value, totalDeviceCount.value),
|
|
|
|
|
tone: 'offline'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'running',
|
|
|
|
|
label: t('Metrics.running'),
|
|
|
|
|
icon: 'ep:video-play',
|
|
|
|
|
value: getMetricValue(['running', 'run', 'runningDevices']) ?? getRowsByStatus('running').length,
|
|
|
|
|
percent: summaryMap.value.running || 0,
|
|
|
|
|
value: runningDeviceCount.value,
|
|
|
|
|
percent: calcDeviceRate(runningDeviceCount.value, totalDeviceCount.value),
|
|
|
|
|
tone: 'running'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'standby',
|
|
|
|
|
label: t('Metrics.standby'),
|
|
|
|
|
icon: 'ep:video-pause',
|
|
|
|
|
value: getMetricValue(['standby', 'idle', 'standbyDevices']) ?? getRowsByStatus('standby').length,
|
|
|
|
|
percent: summaryMap.value.standby || 0,
|
|
|
|
|
value: standbyDeviceCount.value,
|
|
|
|
|
percent: calcDeviceRate(standbyDeviceCount.value, totalDeviceCount.value),
|
|
|
|
|
tone: 'standby'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
key: 'fault',
|
|
|
|
|
label: t('Metrics.fault'),
|
|
|
|
|
icon: 'ep:bell',
|
|
|
|
|
value: getMetricValue(['fault', 'alarm', 'faultDevices']) ?? getRowsByStatus('fault').length,
|
|
|
|
|
percent: summaryMap.value.fault || 0,
|
|
|
|
|
value: faultDeviceCount.value,
|
|
|
|
|
percent: calcDeviceRate(faultDeviceCount.value, totalDeviceCount.value),
|
|
|
|
|
tone: 'fault'
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
@ -267,15 +263,22 @@ const detailRows = computed<DetailRow[]>(() => {
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const totalDetailPages = computed(() => Math.max(1, Math.ceil(detailRows.value.length / detailPageSize)))
|
|
|
|
|
const totalDeviceCount = computed(
|
|
|
|
|
() =>
|
|
|
|
|
overviewData.value.totalDevices ||
|
|
|
|
|
getMetricValue(['total', 'deviceTotal', 'totalDevices']) ||
|
|
|
|
|
detailRows.value.length
|
|
|
|
|
const runningDeviceCount = computed(
|
|
|
|
|
() => getMetricValue(['running', 'run', 'runningDevices']) ?? getRowsByStatus('running').length
|
|
|
|
|
)
|
|
|
|
|
const standbyDeviceCount = computed(
|
|
|
|
|
() => getMetricValue(['standby', 'idle', 'standbyDevices']) ?? getRowsByStatus('standby').length
|
|
|
|
|
)
|
|
|
|
|
const faultDeviceCount = computed(
|
|
|
|
|
() => getMetricValue(['fault', 'alarm', 'faultDevices']) ?? getRowsByStatus('fault').length
|
|
|
|
|
)
|
|
|
|
|
const offlineDeviceCount = computed(
|
|
|
|
|
() => getMetricValue(['offline', 'offlineDevices']) ?? getRowsByStatus('offline').length
|
|
|
|
|
)
|
|
|
|
|
const onlineDeviceCount = computed(
|
|
|
|
|
() => runningDeviceCount.value + standbyDeviceCount.value + faultDeviceCount.value
|
|
|
|
|
)
|
|
|
|
|
const totalDeviceCount = computed(() => onlineDeviceCount.value + offlineDeviceCount.value)
|
|
|
|
|
const pagedRows = computed(() => {
|
|
|
|
|
const start = (detailPage.value - 1) * detailPageSize
|
|
|
|
|
return detailRows.value.slice(start, start + detailPageSize)
|
|
|
|
|
@ -575,8 +578,8 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
|
|
.brand-icon {
|
|
|
|
|
display: grid;
|
|
|
|
|
width: 34px;
|
|
|
|
|
height: 34px;
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
color: #8cd3ff;
|
|
|
|
|
background: rgb(78 157 255 / 16%);
|
|
|
|
|
border: 1px solid rgb(93 177 255 / 40%);
|
|
|
|
|
|