CN_Tool_client/frontend/src/views/steady/checksquare/components/ChecksquareCreateResultPanel.vue

<template>
    <aside class="table-main card checksquare-result-panel">
        <div class="table-header">
            <div class="header-button-lf">
                <span class="section-title">校验任务摘要</span>
            </div>
        </div>

        <div v-if="loading" class="create-loading">
            <el-icon class="create-loading__icon"><Loading /></el-icon>
            <span class="create-loading__title">正在创建校验任务</span>
            <span class="create-loading__desc">任务提交后将在此显示摘要</span>
        </div>

        <el-empty v-else-if="!task" class="empty-result" description="新增后在此查看任务摘要" />

        <template v-else>
            <div class="result-scroll">
                <div class="result-body">
                    <div class="result-overview">
                        <div class="task-card">
                            <div class="task-title">
                                <span>{{ task.taskNo || task.taskId || '-' }}</span>
                                <el-tag :type="resolveChecksquareTaskStatusType(task.taskStatus)" effect="plain">
                                    {{ formatChecksquareTaskStatus(task.taskStatus) }}
                                </el-tag>
                            </div>
                            <div class="task-meta">
                                <span>{{ task.lineName || task.lineId || '-' }}</span>
                                <span>{{ task.timeStart || '-' }} 至 {{ task.timeEnd || '-' }}</span>
                            </div>
                        </div>

                        <div class="result-metrics">
                            <div class="metric-item">
                                <span class="metric-label">进线/监测点</span>
                                <span class="metric-value">{{ task.lineName || task.lineId || '-' }}</span>
                            </div>
                            <div class="metric-item">
                                <span class="metric-label">检测项</span>
                                <span class="metric-value">{{ displayItemCount }}</span>
                            </div>
                            <div class="metric-item">
                                <span class="metric-label">异常项</span>
                                <span class="metric-value is-danger">{{ task.abnormalItemCount ?? '-' }}</span>
                            </div>
                            <div class="metric-item">
                                <span class="metric-label">最低完整率</span>
                                <span class="metric-value">
                                    {{ formatChecksquareIntegrity(task.minDataIntegrity) }}
                                </span>
                            </div>
                            <div class="metric-item">
                                <span class="metric-label">统计间隔</span>
                                <span class="metric-value">{{ task.intervalMinutes ?? '-' }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="result-detail-grid">
                        <div class="detail-block">
                            <span class="detail-label">校验时间</span>
                            <span class="detail-value">{{ task.timeStart || '-' }} 至 {{ task.timeEnd || '-' }}</span>
                        </div>
                        <div class="detail-block">
                            <span class="detail-label">创建时间</span>
                            <span class="detail-value">{{ task.createTime || '-' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </aside>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Loading } from '@element-plus/icons-vue'
import type { SteadyDataView } from '@/api/steady/steadyDataView/interface'
import {
    formatChecksquareIntegrity,
    formatChecksquareTaskStatus,
    resolveChecksquareTaskStatusType
} from '../utils/checksquareTaskTable'

defineOptions({
    name: 'ChecksquareCreateResultPanel'
})

const props = defineProps<{
    task: SteadyDataView.SteadyChecksquareTask | null
    expectedItemCount: number
    loading?: boolean
}>()

const displayItemCount = computed(() => {
    if (Number(props.task?.itemCount || 0) > 0) return props.task?.itemCount
    if (props.expectedItemCount > 0) return props.expectedItemCount

    return props.task?.itemCount ?? '-'
})
</script>

<style scoped lang="scss">
.checksquare-result-panel {
    display: flex;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--el-text-color-primary);
}

.empty-result {
    flex: 1;
}

.create-loading {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--el-text-color-secondary);
}

.create-loading__icon {
    color: var(--el-color-primary);
    font-size: 28px;
    animation: rotate-loading 1s linear infinite;
}

.create-loading__title {
    color: var(--el-text-color-primary);
    font-size: 14px;
    font-weight: 600;
}

.create-loading__desc {
    font-size: 13px;
}

@keyframes rotate-loading {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.result-body {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
}

.result-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.result-overview {
    display: grid;
    flex: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.task-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 4px;
}

.task-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 600;
}

.task-title span:first-child,
.task-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--el-text-color-secondary);
}

.result-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.metric-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 4px;
}

.metric-label,
.detail-label {
    font-size: 12px;
    color: var(--el-text-color-secondary);
}

.metric-value,
.detail-value {
    overflow: hidden;
    font-weight: 600;
    color: var(--el-text-color-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-value.is-danger {
    color: var(--el-color-danger);
}

.result-detail-grid {
    display: grid;
    flex: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.detail-block {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 4px;
    background: var(--el-fill-color-blank);
}

.detail-value {
    font-size: 13px;
    white-space: normal;
    word-break: break-all;
}

@media (max-width: 1280px) {
    .result-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
</style>