122 lines
3.5 KiB
Vue
122 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<section class="card checksquare-detail">
|
||
|
|
<div class="detail-header">
|
||
|
|
<div>
|
||
|
|
<div class="section-title">连续性详情</div>
|
||
|
|
<div class="section-description">
|
||
|
|
{{ selectedItem ? resolveChecksquareRowName(selectedItem) : '请选择总览表中的指标' }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-empty v-if="!selectedItem" description="请选择指标查看缺失区间" />
|
||
|
|
|
||
|
|
<template v-else>
|
||
|
|
<div class="stat-grid">
|
||
|
|
<div v-for="statType in CHECKSQUARE_STAT_TYPES" :key="statType" class="stat-card">
|
||
|
|
<span class="stat-name">{{ formatChecksquareStatType(statType) }}</span>
|
||
|
|
<span class="stat-value">{{ formatStatMissingRate(selectedItem, statType) }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-table class="segment-table" :data="segments" size="small" max-height="220" empty-text="暂无缺失区间">
|
||
|
|
<el-table-column prop="statType" label="统计类型" width="96">
|
||
|
|
<template #default="{ row }">{{ formatChecksquareStatType(row.statType) }}</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="startTime" label="开始时间" min-width="160" />
|
||
|
|
<el-table-column prop="endTime" label="结束时间" min-width="160" />
|
||
|
|
<el-table-column prop="missingPointCount" label="缺失点数" width="100" align="right">
|
||
|
|
<template #default="{ row }">{{ row.missingPointCount ?? '-' }}</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="durationMinutes" label="持续分钟" width="100" align="right">
|
||
|
|
<template #default="{ row }">{{ row.durationMinutes ?? '-' }}</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</template>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import type { SteadyDataView } from '@/api/steady/steadyDataView/interface'
|
||
|
|
import {
|
||
|
|
CHECKSQUARE_STAT_TYPES,
|
||
|
|
collectMissingSegments,
|
||
|
|
formatChecksquareStatType,
|
||
|
|
formatStatMissingRate,
|
||
|
|
resolveChecksquareRowName
|
||
|
|
} from '../utils/checksquareTable'
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'ChecksquareDetailPanel'
|
||
|
|
})
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
selectedItem: SteadyDataView.SteadyChecksquareItem | null
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const segments = computed(() => collectMissingSegments(props.selectedItem))
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.checksquare-detail {
|
||
|
|
display: flex;
|
||
|
|
flex: none;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12px;
|
||
|
|
min-height: 0;
|
||
|
|
padding: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--el-text-color-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-description {
|
||
|
|
margin-top: 4px;
|
||
|
|
font-size: 13px;
|
||
|
|
color: var(--el-text-color-regular);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-card {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 8px;
|
||
|
|
min-width: 0;
|
||
|
|
padding: 8px 10px;
|
||
|
|
border: 1px solid var(--el-border-color-lighter);
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-name {
|
||
|
|
color: var(--el-text-color-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-value {
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--el-text-color-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 1200px) {
|
||
|
|
.stat-grid {
|
||
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|