Compare commits
No commits in common. '2f9cd9e0d08b25cdb127a4fcd0b212d319f2adc1' and 'e5c9c6194341b25d35f2f833ab6ab2b99dc5cbf1' have entirely different histories.
2f9cd9e0d0
...
e5c9c61943
@ -1,270 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ContentWrap class="timeline-panel">
|
|
||||||
<div class="timeline-panel__header">
|
|
||||||
<div class="timeline-panel__title">{{ t('DataCollection.RunOverview.timelineTitle') }}</div>
|
|
||||||
<div class="timeline-panel__actions">
|
|
||||||
<el-select model-value="" class="!w-140px">
|
|
||||||
<el-option value="" :label="t('DataCollection.RunOverview.deviceFilterAll')" />
|
|
||||||
</el-select>
|
|
||||||
<el-select model-value="expand" class="!w-120px">
|
|
||||||
<el-option value="expand" :label="t('DataCollection.RunOverview.expandAllText')" />
|
|
||||||
</el-select>
|
|
||||||
<el-button class="timeline-panel__icon-btn">
|
|
||||||
<Icon icon="ep:data-analysis" />
|
|
||||||
</el-button>
|
|
||||||
<el-button class="timeline-panel__icon-btn">
|
|
||||||
<Icon icon="ep:download" />
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="timeline-legend">
|
|
||||||
<div v-for="item in legendItems" :key="item.status" class="timeline-legend__item">
|
|
||||||
<span class="timeline-legend__dot" :style="{ background: item.color }"></span>
|
|
||||||
<span>{{ item.label }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="timeline-table">
|
|
||||||
<div class="timeline-table__head">
|
|
||||||
<div class="timeline-table__meta">
|
|
||||||
<div class="timeline-table__device">{{ t('DataCollection.RunOverview.tableDeviceNameColumn') }}</div>
|
|
||||||
<div class="timeline-table__rate">{{ t('DataCollection.RunOverview.tableUtilizationRateColumn') }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="timeline-scale">
|
|
||||||
<div v-for="hour in hourTicks" :key="hour" class="timeline-scale__tick">
|
|
||||||
{{ hour }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-for="row in pagedRows" :key="row.id" class="timeline-table__row">
|
|
||||||
<div class="timeline-table__meta">
|
|
||||||
<div class="timeline-table__device">{{ row.name }}</div>
|
|
||||||
<div class="timeline-table__rate">{{ row.utilizationRate.toFixed(2) }}%</div>
|
|
||||||
</div>
|
|
||||||
<div class="timeline-track">
|
|
||||||
<div v-for="hour in 24" :key="hour" class="timeline-track__hour"></div>
|
|
||||||
<div
|
|
||||||
v-for="(segment, index) in row.segments"
|
|
||||||
:key="`${row.id}-${index}`"
|
|
||||||
class="timeline-segment"
|
|
||||||
:style="{
|
|
||||||
left: `${(segment.startHour / 24) * 100}%`,
|
|
||||||
width: `${((segment.endHour - segment.startHour) / 24) * 100}%`,
|
|
||||||
background: statusColors[segment.status]
|
|
||||||
}"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="timeline-panel__footer">
|
|
||||||
<div class="timeline-panel__summary">
|
|
||||||
{{ t('DataCollection.RunOverview.statisticsTimeText', { start: statisticsStart, end: statisticsEnd }) }}
|
|
||||||
</div>
|
|
||||||
<div class="timeline-panel__pager">
|
|
||||||
<span>{{ t('DataCollection.RunOverview.totalDevicesText', { total }) }}</span>
|
|
||||||
<el-select :model-value="pageSize" class="!w-100px" @update:model-value="emit('update:pageSize', Number($event))">
|
|
||||||
<el-option :value="10" :label="`10${t('DataCollection.RunOverview.pageUnit')}`" />
|
|
||||||
<el-option :value="20" :label="`20${t('DataCollection.RunOverview.pageUnit')}`" />
|
|
||||||
</el-select>
|
|
||||||
<el-pagination
|
|
||||||
layout="prev, pager, next"
|
|
||||||
:page-size="pageSize"
|
|
||||||
:current-page="pageNo"
|
|
||||||
:total="total"
|
|
||||||
small
|
|
||||||
@current-change="emit('update:pageNo', $event)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ContentWrap>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import type { DeviceTimelineRow, RunStatus } from './types'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
rows: DeviceTimelineRow[]
|
|
||||||
total: number
|
|
||||||
pageNo: number
|
|
||||||
pageSize: number
|
|
||||||
statisticsStart: string
|
|
||||||
statisticsEnd: string
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:pageNo', value: number): void
|
|
||||||
(e: 'update:pageSize', value: number): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const statusColors: Record<RunStatus, string> = {
|
|
||||||
running: '#67c35b',
|
|
||||||
standby: '#f5c243',
|
|
||||||
fault: '#ff6b6b',
|
|
||||||
offline: '#d5dae3'
|
|
||||||
}
|
|
||||||
|
|
||||||
const legendItems = computed(() => [
|
|
||||||
{ status: 'running' as const, color: statusColors.running, label: t('DataCollection.RunOverview.legend.running') },
|
|
||||||
{ status: 'standby' as const, color: statusColors.standby, label: t('DataCollection.RunOverview.legend.standby') },
|
|
||||||
{ status: 'fault' as const, color: statusColors.fault, label: t('DataCollection.RunOverview.legend.fault') },
|
|
||||||
{ status: 'offline' as const, color: statusColors.offline, label: t('DataCollection.RunOverview.legend.offline') }
|
|
||||||
])
|
|
||||||
|
|
||||||
const hourTicks = Array.from({ length: 13 }, (_, index) => `${String(index * 2).padStart(2, '0')}:00`)
|
|
||||||
|
|
||||||
const pagedRows = computed(() => {
|
|
||||||
const start = (props.pageNo - 1) * props.pageSize
|
|
||||||
return props.rows.slice(start, start + props.pageSize)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.timeline-panel__header,
|
|
||||||
.timeline-panel__footer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-panel__title {
|
|
||||||
color: #101828;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-panel__actions,
|
|
||||||
.timeline-panel__pager {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-panel__icon-btn {
|
|
||||||
width: 36px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-legend {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 32px;
|
|
||||||
margin: 10px 0 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-legend__item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
color: #475467;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-legend__dot {
|
|
||||||
width: 18px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-table {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-table__head,
|
|
||||||
.timeline-table__row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 210px minmax(720px, 1fr);
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-table__head {
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-table__row {
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-table__meta {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 70px;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-table__device,
|
|
||||||
.timeline-table__rate {
|
|
||||||
color: #344054;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-table__head .timeline-table__device,
|
|
||||||
.timeline-table__head .timeline-table__rate {
|
|
||||||
color: #475467;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-scale,
|
|
||||||
.timeline-track {
|
|
||||||
position: relative;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(24, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-scale {
|
|
||||||
color: #667085;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-scale__tick {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-scale__tick::after {
|
|
||||||
position: absolute;
|
|
||||||
top: 18px;
|
|
||||||
right: 0;
|
|
||||||
width: 1px;
|
|
||||||
height: 12px;
|
|
||||||
background: #e4e7ec;
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-track {
|
|
||||||
height: 20px;
|
|
||||||
background: #f5f7fb;
|
|
||||||
border-radius: 999px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-track__hour {
|
|
||||||
border-right: 1px solid #edf1f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-segment {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-panel__summary {
|
|
||||||
color: #667085;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1100px) {
|
|
||||||
.timeline-panel__header,
|
|
||||||
.timeline-panel__footer {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,114 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ContentWrap class="run-overview-filter">
|
|
||||||
<el-form :model="modelValue" inline label-width="auto">
|
|
||||||
<el-form-item :label="t('DataCollection.RunOverview.groupLabel')">
|
|
||||||
<el-select
|
|
||||||
:model-value="modelValue.groupId"
|
|
||||||
:placeholder="t('DataCollection.RunOverview.groupPlaceholder')"
|
|
||||||
class="!w-220px"
|
|
||||||
@update:model-value="updateField('groupId', $event)"
|
|
||||||
>
|
|
||||||
<el-option v-for="item in groupOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="t('DataCollection.RunOverview.deviceLabel')">
|
|
||||||
<el-select
|
|
||||||
:model-value="modelValue.deviceId"
|
|
||||||
clearable
|
|
||||||
:placeholder="t('DataCollection.RunOverview.devicePlaceholder')"
|
|
||||||
class="!w-240px"
|
|
||||||
@update:model-value="updateField('deviceId', $event || '')"
|
|
||||||
>
|
|
||||||
<el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="t('DataCollection.RunOverview.timeRangeLabel')">
|
|
||||||
<el-date-picker
|
|
||||||
:model-value="modelValue.timeRange"
|
|
||||||
type="datetimerange"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
:start-placeholder="t('DataCollection.RunOverview.timeRangeStartPlaceholder')"
|
|
||||||
:end-placeholder="t('DataCollection.RunOverview.timeRangeEndPlaceholder')"
|
|
||||||
class="!w-360px"
|
|
||||||
@update:model-value="updateField('timeRange', $event)"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item class="run-overview-filter__actions">
|
|
||||||
<el-button
|
|
||||||
v-for="item in quickRanges"
|
|
||||||
:key="item.value"
|
|
||||||
:type="modelValue.quickRange === item.value ? 'primary' : 'default'"
|
|
||||||
@click="emit('quick-range-change', item.value)"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" @click="emit('query')">
|
|
||||||
<Icon icon="ep:search" class="mr-5px" />
|
|
||||||
{{ t('DataCollection.RunOverview.searchButtonText') }}
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="emit('reset')">
|
|
||||||
<Icon icon="ep:refresh" class="mr-5px" />
|
|
||||||
{{ t('DataCollection.RunOverview.resetButtonText') }}
|
|
||||||
</el-button>
|
|
||||||
<el-button type="success" plain @click="emit('export')">
|
|
||||||
<Icon icon="ep:download" class="mr-5px" />
|
|
||||||
{{ t('DataCollection.RunOverview.exportButtonText') }}
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</ContentWrap>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { OverviewOption, QuickRangeKey, RunOverviewQueryParams } from './types'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
modelValue: RunOverviewQueryParams
|
|
||||||
groupOptions: OverviewOption[]
|
|
||||||
deviceOptions: OverviewOption[]
|
|
||||||
quickRanges: Array<{ label: string; value: QuickRangeKey }>
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'update:modelValue', value: RunOverviewQueryParams): void
|
|
||||||
(e: 'query'): void
|
|
||||||
(e: 'reset'): void
|
|
||||||
(e: 'export'): void
|
|
||||||
(e: 'quick-range-change', value: QuickRangeKey): void
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const updateField = <K extends keyof RunOverviewQueryParams>(key: K, value: RunOverviewQueryParams[K]) => {
|
|
||||||
emit('update:modelValue', {
|
|
||||||
...props.modelValue,
|
|
||||||
[key]: value
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.run-overview-filter {
|
|
||||||
:deep(.el-form) {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-form-item) {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-form-item__label) {
|
|
||||||
min-width: 84px;
|
|
||||||
color: #475467;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.run-overview-filter__actions :deep(.el-button + .el-button) {
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,120 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="metric-grid">
|
|
||||||
<div v-for="item in metrics" :key="item.key" class="metric-card">
|
|
||||||
<div class="metric-card__icon" :style="{ background: itemColors[item.key]?.bg, color: itemColors[item.key]?.fg }">
|
|
||||||
<Icon :icon="item.icon" />
|
|
||||||
</div>
|
|
||||||
<div class="metric-card__content">
|
|
||||||
<div class="metric-card__title">{{ t(`DataCollection.RunOverview.metrics.${item.key}`) }}</div>
|
|
||||||
<div class="metric-card__value">
|
|
||||||
{{ item.value.toFixed(2) }}<span>{{ item.unit }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="metric-card__compare">
|
|
||||||
<span>{{ t('DataCollection.RunOverview.compareLabel') }}</span>
|
|
||||||
<span :class="item.change >= 0 ? 'is-up' : 'is-down'">
|
|
||||||
{{ item.change >= 0 ? '↑' : '↓' }} {{ Math.abs(item.change).toFixed(2) }}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import type { RunOverviewMetric } from './types'
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
metrics: RunOverviewMetric[]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const itemColors: Record<string, { bg: string; fg: string }> = {
|
|
||||||
utilizationRate: { bg: 'rgba(61, 132, 255, 0.12)', fg: '#3d84ff' },
|
|
||||||
powerOnRate: { bg: 'rgba(86, 196, 94, 0.12)', fg: '#56c45e' },
|
|
||||||
faultRate: { bg: 'rgba(255, 164, 54, 0.12)', fg: '#ffa436' },
|
|
||||||
standbyRate: { bg: 'rgba(156, 108, 255, 0.12)', fg: '#9c6cff' }
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.metric-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-card {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 104px;
|
|
||||||
padding: 22px 24px;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #edf1f7;
|
|
||||||
border-radius: 14px;
|
|
||||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-card__icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 52px;
|
|
||||||
height: 52px;
|
|
||||||
margin-right: 18px;
|
|
||||||
font-size: 28px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-card__content {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-card__title {
|
|
||||||
margin-bottom: 6px;
|
|
||||||
color: #475467;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-card__value {
|
|
||||||
color: #101828;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.2;
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: 2px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric-card__compare {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: #667085;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-up {
|
|
||||||
color: #f04438;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-down {
|
|
||||||
color: #12b76a;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.metric-grid {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.metric-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,240 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ContentWrap class="chart-panel">
|
|
||||||
<div class="chart-panel__header">
|
|
||||||
<div class="chart-panel__title">
|
|
||||||
{{ t('DataCollection.RunOverview.statusDistributionTitle') }}
|
|
||||||
</div>
|
|
||||||
<div class="chart-panel__actions">
|
|
||||||
<el-select model-value="hour" class="!w-120px">
|
|
||||||
<el-option value="hour" :label="t('DataCollection.RunOverview.granularityHour')" />
|
|
||||||
</el-select>
|
|
||||||
<el-button class="chart-panel__icon-btn">
|
|
||||||
<Icon icon="ep:data-analysis" />
|
|
||||||
</el-button>
|
|
||||||
<el-button class="chart-panel__icon-btn">
|
|
||||||
<Icon icon="ep:download" />
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chart-panel__body">
|
|
||||||
<div class="chart-panel__main">
|
|
||||||
<Echart :options="barOption" height="320px" />
|
|
||||||
</div>
|
|
||||||
<div class="chart-panel__side">
|
|
||||||
<div class="chart-panel__side-title">{{ t('DataCollection.RunOverview.summaryTitle') }}</div>
|
|
||||||
<Echart :options="pieOption" height="320px" />
|
|
||||||
<div class="chart-panel__legend">
|
|
||||||
<div v-for="item in summary" :key="item.status" class="chart-panel__legend-item">
|
|
||||||
<span class="dot" :style="{ background: statusColors[item.status] }"></span>
|
|
||||||
<span class="label">{{ statusLabelMap[item.status] }}</span>
|
|
||||||
<span class="value">{{ item.percent.toFixed(2) }}% ({{ item.hours.toFixed(2) }}h)</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ContentWrap>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import type { EChartsOption } from 'echarts'
|
|
||||||
import { Echart as EchartChart } from '@/components/Echart'
|
|
||||||
import type { HourlyStatusItem, RunStatus, StatusSummaryItem } from './types'
|
|
||||||
|
|
||||||
const Echart = EchartChart
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
hourlyStatus: HourlyStatusItem[]
|
|
||||||
summary: StatusSummaryItem[]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const statusColors: Record<RunStatus, string> = {
|
|
||||||
running: '#67c35b',
|
|
||||||
standby: '#f5c243',
|
|
||||||
fault: '#ff6b6b',
|
|
||||||
offline: '#cfd4df'
|
|
||||||
}
|
|
||||||
|
|
||||||
const statusLabelMap = computed<Record<RunStatus, string>>(() => ({
|
|
||||||
running: t('DataCollection.RunOverview.legend.running'),
|
|
||||||
standby: t('DataCollection.RunOverview.legend.standby'),
|
|
||||||
fault: t('DataCollection.RunOverview.legend.fault'),
|
|
||||||
offline: t('DataCollection.RunOverview.legend.offline')
|
|
||||||
}))
|
|
||||||
|
|
||||||
const barOption = computed<EChartsOption>(() => ({
|
|
||||||
color: [
|
|
||||||
statusColors.running,
|
|
||||||
statusColors.standby,
|
|
||||||
statusColors.fault,
|
|
||||||
statusColors.offline
|
|
||||||
],
|
|
||||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
|
||||||
legend: {
|
|
||||||
top: 8,
|
|
||||||
itemWidth: 14,
|
|
||||||
itemHeight: 8,
|
|
||||||
textStyle: { color: '#667085', fontSize: 12 }
|
|
||||||
},
|
|
||||||
grid: { left: 48, right: 18, top: 46, bottom: 36 },
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: props.hourlyStatus.map((item) => item.hour),
|
|
||||||
axisTick: { show: false },
|
|
||||||
axisLine: { lineStyle: { color: '#d0d5dd' } },
|
|
||||||
axisLabel: { color: '#667085', fontSize: 11 }
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
min: 0,
|
|
||||||
max: 100,
|
|
||||||
interval: 20,
|
|
||||||
axisLabel: { color: '#667085', formatter: '{value}%' },
|
|
||||||
splitLine: { lineStyle: { color: '#eef2f6' } }
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: statusLabelMap.value.running,
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'status',
|
|
||||||
barWidth: 18,
|
|
||||||
data: props.hourlyStatus.map((item) => item.running)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: statusLabelMap.value.standby,
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'status',
|
|
||||||
barWidth: 18,
|
|
||||||
data: props.hourlyStatus.map((item) => item.standby)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: statusLabelMap.value.fault,
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'status',
|
|
||||||
barWidth: 18,
|
|
||||||
data: props.hourlyStatus.map((item) => item.fault)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: statusLabelMap.value.offline,
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'status',
|
|
||||||
barWidth: 18,
|
|
||||||
data: props.hourlyStatus.map((item) => item.offline)
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}))
|
|
||||||
|
|
||||||
const pieOption = computed<EChartsOption>(() => ({
|
|
||||||
color: props.summary.map((item) => statusColors[item.status]),
|
|
||||||
tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
|
|
||||||
graphic: [
|
|
||||||
{
|
|
||||||
type: 'text',
|
|
||||||
left: 'center',
|
|
||||||
top: '42%',
|
|
||||||
style: {
|
|
||||||
text: `${t('DataCollection.RunOverview.totalTimeLabel')}\n24.00 h`,
|
|
||||||
textAlign: 'center',
|
|
||||||
fill: '#101828',
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: 600,
|
|
||||||
lineHeight: 24
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: t('DataCollection.RunOverview.summaryTitle'),
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['55%', '76%'],
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
label: { show: false },
|
|
||||||
data: props.summary.map((item) => ({
|
|
||||||
name: statusLabelMap.value[item.status],
|
|
||||||
value: item.percent
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}))
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.chart-panel {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-panel__header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-panel__title,
|
|
||||||
.chart-panel__side-title {
|
|
||||||
color: #101828;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-panel__actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-panel__icon-btn {
|
|
||||||
width: 36px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-panel__body {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-panel__side {
|
|
||||||
padding: 8px 8px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-panel__legend {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: -8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-panel__legend-item {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 12px 1fr auto;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
color: #344054;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
color: #667085;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
color: #101828;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1100px) {
|
|
||||||
.chart-panel__body {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
export type RunStatus = 'running' | 'standby' | 'fault' | 'offline'
|
|
||||||
|
|
||||||
export type QuickRangeKey = 'today' | 'yesterday' | 'last7Days' | 'last30Days' | 'custom'
|
|
||||||
|
|
||||||
export interface OverviewOption {
|
|
||||||
label: string
|
|
||||||
value: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RunOverviewQueryParams {
|
|
||||||
groupId: string
|
|
||||||
deviceId: string
|
|
||||||
quickRange: QuickRangeKey
|
|
||||||
timeRange: [string, string]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RunOverviewMetric {
|
|
||||||
key: string
|
|
||||||
icon: string
|
|
||||||
value: number
|
|
||||||
unit: string
|
|
||||||
change: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface HourlyStatusItem {
|
|
||||||
hour: string
|
|
||||||
running: number
|
|
||||||
standby: number
|
|
||||||
fault: number
|
|
||||||
offline: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface StatusSummaryItem {
|
|
||||||
status: RunStatus
|
|
||||||
percent: number
|
|
||||||
hours: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TimelineSegment {
|
|
||||||
status: RunStatus
|
|
||||||
startHour: number
|
|
||||||
endHour: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DeviceTimelineRow {
|
|
||||||
id: string
|
|
||||||
name: string
|
|
||||||
utilizationRate: number
|
|
||||||
segments: TimelineSegment[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RunOverviewData {
|
|
||||||
metrics: RunOverviewMetric[]
|
|
||||||
hourlyStatus: HourlyStatusItem[]
|
|
||||||
summary: StatusSummaryItem[]
|
|
||||||
timelineRows: DeviceTimelineRow[]
|
|
||||||
totalDevices: number
|
|
||||||
}
|
|
||||||
@ -1,176 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="fullscreenTargetRef" class="run-overview-page" :class="{ 'is-fullscreen': isFullscreen }">
|
|
||||||
<div class="run-overview-page__floating-tools">
|
|
||||||
<el-tooltip
|
|
||||||
:content="
|
|
||||||
isFullscreen
|
|
||||||
? t('DataCollection.RunOverview.exitFullscreen')
|
|
||||||
: t('DataCollection.RunOverview.enterFullscreen')
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<button class="run-overview-page__screenfull" type="button" @click="toggleFullscreen">
|
|
||||||
<Icon :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" color="#344054" />
|
|
||||||
</button>
|
|
||||||
</el-tooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<OverviewFilterBar
|
|
||||||
v-model="queryParams"
|
|
||||||
:group-options="groupOptions"
|
|
||||||
:device-options="deviceOptions"
|
|
||||||
:quick-ranges="quickRanges"
|
|
||||||
@quick-range-change="handleQuickRangeChange"
|
|
||||||
@query="handleQuery"
|
|
||||||
@reset="resetQuery"
|
|
||||||
@export="handleExport"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<OverviewMetricCards :metrics="overviewData.metrics" />
|
|
||||||
|
|
||||||
<StatusDistributionChart :hourly-status="overviewData.hourlyStatus" :summary="overviewData.summary" />
|
|
||||||
|
|
||||||
<OperationTimelineChart
|
|
||||||
:rows="overviewData.timelineRows"
|
|
||||||
:total="overviewData.totalDevices"
|
|
||||||
:page-no="pageNo"
|
|
||||||
:page-size="pageSize"
|
|
||||||
:statistics-start="queryParams.timeRange[0]"
|
|
||||||
:statistics-end="queryParams.timeRange[1]"
|
|
||||||
@update:page-no="pageNo = $event"
|
|
||||||
@update:page-size="handlePageSizeChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import dayjs from 'dayjs'
|
|
||||||
import { useFullscreen } from '@vueuse/core'
|
|
||||||
import OverviewFilterBar from './components/OverviewFilterBar.vue'
|
|
||||||
import OverviewMetricCards from './components/OverviewMetricCards.vue'
|
|
||||||
import OperationTimelineChart from './components/OperationTimelineChart.vue'
|
|
||||||
import StatusDistributionChart from './components/StatusDistributionChart.vue'
|
|
||||||
import { buildDefaultQueryParams, buildRunOverviewData, DEVICE_OPTIONS, GROUP_OPTIONS } from './mock'
|
|
||||||
import type { QuickRangeKey, RunOverviewData, RunOverviewQueryParams } from './components/types'
|
|
||||||
|
|
||||||
defineOptions({ name: 'IotRunOverview' })
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
const message = useMessage()
|
|
||||||
const fullscreenTargetRef = ref()
|
|
||||||
const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(fullscreenTargetRef)
|
|
||||||
|
|
||||||
const groupOptions = GROUP_OPTIONS
|
|
||||||
const deviceOptions = DEVICE_OPTIONS
|
|
||||||
|
|
||||||
const createDateRangeByQuickKey = (key: QuickRangeKey): [string, string] => {
|
|
||||||
const format = 'YYYY-MM-DD HH:mm:ss'
|
|
||||||
if (key === 'today') return [dayjs().startOf('day').format(format), dayjs().endOf('day').format(format)]
|
|
||||||
if (key === 'yesterday') {
|
|
||||||
return [
|
|
||||||
dayjs().subtract(1, 'day').startOf('day').format(format),
|
|
||||||
dayjs().subtract(1, 'day').endOf('day').format(format)
|
|
||||||
]
|
|
||||||
}
|
|
||||||
if (key === 'last7Days') return [dayjs().subtract(6, 'day').startOf('day').format(format), dayjs().endOf('day').format(format)]
|
|
||||||
if (key === 'last30Days') {
|
|
||||||
return [dayjs().subtract(29, 'day').startOf('day').format(format), dayjs().endOf('day').format(format)]
|
|
||||||
}
|
|
||||||
return [dayjs().startOf('day').format(format), dayjs().endOf('day').format(format)]
|
|
||||||
}
|
|
||||||
|
|
||||||
const quickRanges = computed(() => [
|
|
||||||
{ label: t('DataCollection.RunOverview.quickRange.today'), value: 'today' as const },
|
|
||||||
{ label: t('DataCollection.RunOverview.quickRange.yesterday'), value: 'yesterday' as const },
|
|
||||||
{ label: t('DataCollection.RunOverview.quickRange.last7Days'), value: 'last7Days' as const },
|
|
||||||
{ label: t('DataCollection.RunOverview.quickRange.last30Days'), value: 'last30Days' as const },
|
|
||||||
{ label: t('DataCollection.RunOverview.quickRange.custom'), value: 'custom' as const }
|
|
||||||
])
|
|
||||||
|
|
||||||
const queryParams = ref<RunOverviewQueryParams>(buildDefaultQueryParams())
|
|
||||||
const overviewData = ref<RunOverviewData>(buildRunOverviewData(queryParams.value))
|
|
||||||
const pageNo = ref(1)
|
|
||||||
const pageSize = ref(10)
|
|
||||||
|
|
||||||
const refreshData = () => {
|
|
||||||
overviewData.value = buildRunOverviewData(queryParams.value)
|
|
||||||
const maxPage = Math.max(1, Math.ceil(overviewData.value.totalDevices / pageSize.value))
|
|
||||||
if (pageNo.value > maxPage) pageNo.value = maxPage
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleQuickRangeChange = (key: QuickRangeKey) => {
|
|
||||||
queryParams.value = {
|
|
||||||
...queryParams.value,
|
|
||||||
quickRange: key,
|
|
||||||
timeRange: key === 'custom' ? queryParams.value.timeRange : createDateRangeByQuickKey(key)
|
|
||||||
}
|
|
||||||
pageNo.value = 1
|
|
||||||
refreshData()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleQuery = () => {
|
|
||||||
pageNo.value = 1
|
|
||||||
refreshData()
|
|
||||||
}
|
|
||||||
|
|
||||||
const resetQuery = () => {
|
|
||||||
queryParams.value = buildDefaultQueryParams()
|
|
||||||
pageNo.value = 1
|
|
||||||
pageSize.value = 10
|
|
||||||
refreshData()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleExport = () => {
|
|
||||||
message.success(t('DataCollection.RunOverview.exportPlaceholderMessage'))
|
|
||||||
}
|
|
||||||
|
|
||||||
const handlePageSizeChange = (size: number) => {
|
|
||||||
pageSize.value = size
|
|
||||||
pageNo.value = 1
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.run-overview-page {
|
|
||||||
position: relative;
|
|
||||||
min-width: 0;
|
|
||||||
//padding-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.run-overview-page.is-fullscreen {
|
|
||||||
height: 100%;
|
|
||||||
padding: 16px;
|
|
||||||
overflow: auto;
|
|
||||||
background: #f5f7fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.run-overview-page__floating-tools {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
right: 12px;
|
|
||||||
z-index: 20;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.run-overview-page__screenfull {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
padding: 0;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #e4e7ec;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.run-overview-page__screenfull:hover {
|
|
||||||
background: #f8fbff;
|
|
||||||
border-color: #bfd3ff;
|
|
||||||
box-shadow: 0 8px 18px rgba(61, 132, 255, 0.12);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,178 +0,0 @@
|
|||||||
import dayjs from 'dayjs'
|
|
||||||
import type {
|
|
||||||
DeviceTimelineRow,
|
|
||||||
HourlyStatusItem,
|
|
||||||
OverviewOption,
|
|
||||||
RunOverviewData,
|
|
||||||
RunOverviewQueryParams,
|
|
||||||
RunOverviewMetric,
|
|
||||||
RunStatus
|
|
||||||
} from './components/types'
|
|
||||||
|
|
||||||
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
|
|
||||||
|
|
||||||
export const GROUP_OPTIONS: OverviewOption[] = [
|
|
||||||
{ label: 'SMT一组', value: 'group-1' },
|
|
||||||
{ label: '成型二组', value: 'group-2' },
|
|
||||||
{ label: '总装三组', value: 'group-3' }
|
|
||||||
]
|
|
||||||
|
|
||||||
export const DEVICE_OPTIONS: OverviewOption[] = [
|
|
||||||
{ label: '模拟干燥设备04', value: 'device-01' },
|
|
||||||
{ label: '模拟干燥设备03', value: 'device-02' },
|
|
||||||
{ label: '模拟干燥设备02', value: 'device-03' },
|
|
||||||
{ label: '成型模拟设备05', value: 'device-04' },
|
|
||||||
{ label: '成型模拟设备04', value: 'device-05' },
|
|
||||||
{ label: '模拟干燥设备', value: 'device-06' },
|
|
||||||
{ label: '成型模拟设备02', value: 'device-07' },
|
|
||||||
{ label: '成型模拟设备01', value: 'device-08' },
|
|
||||||
{ label: '物流输送设备01', value: 'device-09' },
|
|
||||||
{ label: '包装工作站02', value: 'device-10' },
|
|
||||||
{ label: '包装工作站03', value: 'device-11' },
|
|
||||||
{ label: '拧紧设备01', value: 'device-12' },
|
|
||||||
{ label: '视觉检测设备01', value: 'device-13' }
|
|
||||||
]
|
|
||||||
|
|
||||||
const shiftTimeline = (segments: Array<{ status: RunStatus; startHour: number; endHour: number }>, offset: number) =>
|
|
||||||
segments.map((segment, index) => {
|
|
||||||
let nextStart = segment.startHour + offset
|
|
||||||
let nextEnd = segment.endHour + offset
|
|
||||||
if (index === 0 && nextStart < 0) nextStart = 0
|
|
||||||
if (index === segments.length - 1 && nextEnd > 24) nextEnd = 24
|
|
||||||
return {
|
|
||||||
...segment,
|
|
||||||
startHour: Math.max(0, Math.min(24, Number(nextStart.toFixed(2)))),
|
|
||||||
endHour: Math.max(0, Math.min(24, Number(nextEnd.toFixed(2))))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const BASE_SEGMENTS = [
|
|
||||||
{ status: 'running' as const, startHour: 0, endHour: 2.7 },
|
|
||||||
{ status: 'standby' as const, startHour: 2.7, endHour: 3.1 },
|
|
||||||
{ status: 'running' as const, startHour: 3.1, endHour: 6.6 },
|
|
||||||
{ status: 'standby' as const, startHour: 6.6, endHour: 7.15 },
|
|
||||||
{ status: 'running' as const, startHour: 7.15, endHour: 13.9 },
|
|
||||||
{ status: 'standby' as const, startHour: 13.9, endHour: 14.25 },
|
|
||||||
{ status: 'offline' as const, startHour: 14.25, endHour: 14.95 },
|
|
||||||
{ status: 'running' as const, startHour: 14.95, endHour: 17.45 },
|
|
||||||
{ status: 'fault' as const, startHour: 17.45, endHour: 18.15 },
|
|
||||||
{ status: 'standby' as const, startHour: 18.15, endHour: 18.8 },
|
|
||||||
{ status: 'running' as const, startHour: 18.8, endHour: 20.55 },
|
|
||||||
{ status: 'standby' as const, startHour: 20.55, endHour: 20.95 },
|
|
||||||
{ status: 'running' as const, startHour: 20.95, endHour: 22.25 },
|
|
||||||
{ status: 'offline' as const, startHour: 22.25, endHour: 23.05 },
|
|
||||||
{ status: 'running' as const, startHour: 23.05, endHour: 23.7 },
|
|
||||||
{ status: 'offline' as const, startHour: 23.7, endHour: 24 }
|
|
||||||
]
|
|
||||||
|
|
||||||
const TIMELINE_OFFSETS = [0, -0.3, 0.8, -0.5, 0.45, 1.05, -1.1, 0.25, -0.75, 0.6, -0.2, 1.2, -0.45]
|
|
||||||
|
|
||||||
export const buildDefaultQueryParams = (): RunOverviewQueryParams => {
|
|
||||||
const start = dayjs().startOf('day')
|
|
||||||
const end = dayjs().endOf('day')
|
|
||||||
return {
|
|
||||||
groupId: GROUP_OPTIONS[0].value,
|
|
||||||
deviceId: '',
|
|
||||||
quickRange: 'today',
|
|
||||||
timeRange: [start.format(DATE_TIME_FORMAT), end.format(DATE_TIME_FORMAT)]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const toTimelineRows = (): DeviceTimelineRow[] =>
|
|
||||||
DEVICE_OPTIONS.map((device, index) => ({
|
|
||||||
id: device.value,
|
|
||||||
name: device.label,
|
|
||||||
utilizationRate: [82.35, 76.12, 68.54, 75.63, 72.18, 91.24, 65.32, 78.44, 71.05, 83.67, 69.18, 87.42, 74.56][index],
|
|
||||||
segments: shiftTimeline(BASE_SEGMENTS, TIMELINE_OFFSETS[index] || 0)
|
|
||||||
}))
|
|
||||||
|
|
||||||
const toHourlyStatus = (summaryFactor: number): HourlyStatusItem[] => {
|
|
||||||
return Array.from({ length: 24 }, (_, hour) => {
|
|
||||||
const runningBase = 74 + Math.sin((hour / 24) * Math.PI * 3) * 14 + summaryFactor * 2
|
|
||||||
const standbyBase = 10 + Math.cos((hour / 24) * Math.PI * 4) * 7
|
|
||||||
const faultBase = 2 + Math.max(0, Math.sin((hour - 5) / 2.2)) * 5
|
|
||||||
const offlineBase = 100 - runningBase - standbyBase - faultBase
|
|
||||||
|
|
||||||
const running = Math.max(48, Math.min(88, Number(runningBase.toFixed(2))))
|
|
||||||
const standby = Math.max(4, Math.min(26, Number(standbyBase.toFixed(2))))
|
|
||||||
const fault = Math.max(1, Math.min(8, Number(faultBase.toFixed(2))))
|
|
||||||
const offline = Number(Math.max(4, 100 - running - standby - fault).toFixed(2))
|
|
||||||
|
|
||||||
return {
|
|
||||||
hour: `${String(hour).padStart(2, '0')}:00`,
|
|
||||||
running,
|
|
||||||
standby,
|
|
||||||
fault,
|
|
||||||
offline
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const createMetrics = (summaryFactor: number): RunOverviewMetric[] => [
|
|
||||||
{
|
|
||||||
key: 'utilizationRate',
|
|
||||||
icon: 'ep:pie-chart',
|
|
||||||
value: Number((75.42 + summaryFactor * 1.2).toFixed(2)),
|
|
||||||
unit: '%',
|
|
||||||
change: 4.32
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'powerOnRate',
|
|
||||||
icon: 'ep:video-play',
|
|
||||||
value: Number((90.12 + summaryFactor * 0.7).toFixed(2)),
|
|
||||||
unit: '%',
|
|
||||||
change: 2.15
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'faultRate',
|
|
||||||
icon: 'ep:warning',
|
|
||||||
value: Number(Math.max(1.5, 3.21 - summaryFactor * 0.35).toFixed(2)),
|
|
||||||
unit: '%',
|
|
||||||
change: -1.03
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'standbyRate',
|
|
||||||
icon: 'ep:timer',
|
|
||||||
value: Number(Math.max(4, 6.67 - summaryFactor * 0.25).toFixed(2)),
|
|
||||||
unit: '%',
|
|
||||||
change: -1.14
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const createSummary = (summaryFactor: number) => {
|
|
||||||
const running = Number((75.42 + summaryFactor * 1.2).toFixed(2))
|
|
||||||
const standby = Number(Math.max(4, 6.67 - summaryFactor * 0.25).toFixed(2))
|
|
||||||
const fault = Number(Math.max(1.5, 3.21 - summaryFactor * 0.35).toFixed(2))
|
|
||||||
const offline = Number((100 - running - standby - fault).toFixed(2))
|
|
||||||
|
|
||||||
return [
|
|
||||||
{ status: 'running' as const, percent: running, hours: Number(((24 * running) / 100).toFixed(2)) },
|
|
||||||
{ status: 'standby' as const, percent: standby, hours: Number(((24 * standby) / 100).toFixed(2)) },
|
|
||||||
{ status: 'fault' as const, percent: fault, hours: Number(((24 * fault) / 100).toFixed(2)) },
|
|
||||||
{ status: 'offline' as const, percent: offline, hours: Number(((24 * offline) / 100).toFixed(2)) }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
export const buildRunOverviewData = (query: RunOverviewQueryParams): RunOverviewData => {
|
|
||||||
const summaryFactor =
|
|
||||||
query.quickRange === 'today'
|
|
||||||
? 0
|
|
||||||
: query.quickRange === 'yesterday'
|
|
||||||
? -0.8
|
|
||||||
: query.quickRange === 'last7Days'
|
|
||||||
? 1.1
|
|
||||||
: query.quickRange === 'last30Days'
|
|
||||||
? 0.45
|
|
||||||
: 0.15
|
|
||||||
|
|
||||||
const rows = toTimelineRows()
|
|
||||||
const filteredRows = query.deviceId ? rows.filter((row) => row.id === query.deviceId) : rows
|
|
||||||
|
|
||||||
return {
|
|
||||||
metrics: createMetrics(summaryFactor),
|
|
||||||
hourlyStatus: toHourlyStatus(summaryFactor),
|
|
||||||
summary: createSummary(summaryFactor),
|
|
||||||
timelineRows: filteredRows,
|
|
||||||
totalDevices: filteredRows.length
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue