Merge branch 'main' of https://git.ngsk.tech/linweidong/besure_web
commit
21fdceb26f
@ -0,0 +1,270 @@
|
||||
<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>
|
||||
@ -0,0 +1,114 @@
|
||||
<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>
|
||||
@ -0,0 +1,120 @@
|
||||
<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>
|
||||
@ -0,0 +1,240 @@
|
||||
<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>
|
||||
@ -0,0 +1,58 @@
|
||||
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
|
||||
}
|
||||
@ -0,0 +1,176 @@
|
||||
<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>
|
||||
@ -0,0 +1,178 @@
|
||||
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