<script setup lang="ts">
|
import { computed, onMounted } from "vue";
|
import { useRouter } from "vue-router";
|
import { EyeOutlined, ExperimentOutlined } from "@ant-design/icons-vue";
|
|
import ArtifactState from "@/components/ArtifactState.vue";
|
import PageHeader from "@/components/PageHeader.vue";
|
import { capabilities, verifiedCapabilities } from "@/data/capabilities";
|
import { artifactUrl } from "@/api/artifacts";
|
import { useArtifactStore } from "@/stores/artifacts";
|
|
const store = useArtifactStore();
|
const router = useRouter();
|
const planned = computed(() => capabilities.filter((item) => item.status === "planned"));
|
|
onMounted(async () => Promise.all([store.loadDetection(), store.loadTrajectory()]));
|
function openCapability(id: string) { router.push({ name: "capability", params: { id } }); }
|
</script>
|
|
<template>
|
<div class="view-container"><PageHeader eyebrow="WORKBENCH / OVERVIEW" title="实验结果一眼可见" description="独立于无人机产品的本地控制台。它只读取当前工作区已有结果，不上传数据，也不会触发算法运行。" /><ArtifactState :loading="store.loading" :error="store.error" />
|
<a-row :gutter="[14, 14]" class="metric-row"><a-col :xs="12" :lg="6"><a-statistic title="能力目录" :value="capabilities.length" /></a-col><a-col :xs="12" :lg="6"><a-statistic title="已验证 Demo" :value="verifiedCapabilities.length" /></a-col><a-col :xs="12" :lg="6"><a-statistic title="最近检测结果" :value="store.detectionRun?.detection_count ?? 0" suffix="个" /></a-col><a-col :xs="12" :lg="6"><a-statistic title="最近轨迹事件" :value="store.trajectoryRun?.event_count ?? 0" suffix="个" /></a-col></a-row>
|
<section class="view-section"><div class="section-heading"><div><h2>已验证能力</h2><p>从实验结果进入，不需要再查找输出目录。</p></div></div><a-row :gutter="[18, 18]"><a-col :xs="24" :xl="12"><a-card class="capability-card" :body-style="{ padding: '0' }"><img class="card-media" :src="artifactUrl('shared/outputs/01-object-detection/annotated/DJI_20260810092727_0001_V_10.jpeg')" alt="目标检测标注图" /><div class="card-copy"><div class="card-topline"><div><h3>地物目标检测</h3><p>原图与标注图切换、检测框明细与运行参数。</p></div><a-tag color="green">已验证</a-tag></div><a-space wrap><a-tag color="gold">A：直接能力</a-tag><a-tag>{{ store.detectionRun?.processed_images ?? 0 }} 张影像</a-tag><a-tag>{{ store.detectionRun?.detection_count ?? 0 }} 个候选</a-tag></a-space><a-button type="primary" @click="openCapability('01-object-detection')"><EyeOutlined />查看实验结果</a-button></div></a-card></a-col><a-col :xs="24" :xl="12"><a-card class="capability-card" :body-style="{ padding: '0' }"><img class="card-media" :src="artifactUrl('shared/outputs/15-trajectory-analysis/difficult/analysis.png')" alt="轨迹分析图" /><div class="card-copy"><div class="card-topline"><div><h3>轨迹分析与行为识别</h3><p>Cesium 轨迹地图、规则事件和轨迹汇总。</p></div><a-tag color="green">已验证</a-tag></div><a-space wrap><a-tag color="gold">C：产品能力</a-tag><a-tag>{{ store.trajectoryRun?.track_count ?? 0 }} 条轨迹</a-tag><a-tag>{{ store.trajectoryRun?.event_count ?? 0 }} 个事件</a-tag></a-space><a-button type="primary" @click="openCapability('15-trajectory-analysis')"><EyeOutlined />查看实验结果</a-button></div></a-card></a-col></a-row></section>
|
<section class="view-section"><div class="section-heading"><div><h2>待实现能力</h2><p>首个 Demo 产生可检查工件后，可以按相同方式接入控制台。</p></div></div><a-row :gutter="[14, 14]"><a-col v-for="capability in planned.slice(0, 8)" :key="capability.id" :xs="24" :md="12" :xl="6"><a-card size="small" class="planned-card"><div class="card-topline"><h3>{{ capability.title }}</h3><a-tag>{{ capability.level }}</a-tag></div><p>{{ capability.note }}</p><a-button type="link" size="small" @click="openCapability(capability.id)"><ExperimentOutlined />查看状态</a-button></a-card></a-col></a-row></section>
|
</div>
|
</template>
|
