CN_Tool_client/frontend/src/views/steady/checksquare/components/ChecksquareDetailPanel.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>