Merge remote-tracking branch 'origin/main'

main
zhongwenkai 5 days ago
commit 0a74505ff6

@ -179,8 +179,8 @@ export default {
},
Dashboard3: {
Header: {
title: '设备运行总览大屏标题',
subTitle: 'IOT 实时监控中心副标题',
title: '制品车间设备运行总览',
subTitle: 'IOT 实时监控中心',
currentTime: '当前时间:',
lastUpdate: '最后更新:',
refreshRate: '刷新频率:',

@ -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%);

Loading…
Cancel
Save