428 lines
18 KiB
Vue
428 lines
18 KiB
Vue
<template>
|
||
<!-- Report Detail View -->
|
||
<div v-if="viewingReport" class="flex flex-col h-full bg-white">
|
||
<div class="p-6 border-b border-slate-200 flex items-center justify-between flex-none">
|
||
<div class="flex items-center">
|
||
<button
|
||
@click="closeReport"
|
||
class="mr-4 text-slate-400 hover:text-slate-600"
|
||
>
|
||
<ArrowLeft :size="20"/>
|
||
</button>
|
||
<h2 class="text-xl font-bold text-slate-900">
|
||
{{ reportTitle }}
|
||
</h2>
|
||
</div>
|
||
<button
|
||
@click="handleDownload"
|
||
class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||
>
|
||
<Download :size="16" class="mr-2" />
|
||
导出 PDF
|
||
</button>
|
||
</div>
|
||
<div class="flex-1 overflow-y-auto p-8 bg-slate-50">
|
||
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-sm border border-slate-200 p-8">
|
||
<!-- Summary Report -->
|
||
<template v-if="viewingReport === 'summary'">
|
||
<div class="space-y-6">
|
||
<div>
|
||
<h3 class="text-2xl font-bold text-slate-900 mb-4">项目概述</h3>
|
||
<p class="text-slate-700 leading-relaxed">
|
||
本次数据资产盘点项目已完成对企业数据资产的全面梳理和评估。通过 AI 智能识别技术，
|
||
系统自动识别了核心数据表结构、PII 敏感信息标识、重要数据特征等关键信息。
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-bold text-slate-900 mb-3">盘点成果</h3>
|
||
<ul class="space-y-2 text-slate-700">
|
||
<li class="flex items-start">
|
||
<span class="text-blue-600 mr-2">•</span>
|
||
<span>识别核心数据表 <strong>4 张</strong>，包含 <strong>2,400 万+</strong> 条记录</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-600 mr-2">•</span>
|
||
<span>识别 PII 敏感信息 <strong>3 类</strong>：手机号、身份证、收货地址</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-600 mr-2">•</span>
|
||
<span>识别重要数据 <strong>1 项</strong>：门店测绘地理信息</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-600 mr-2">•</span>
|
||
<span>生成潜在数据应用场景 <strong>{{ selectedScenarios.length }} 个</strong></span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-bold text-slate-900 mb-3">下一步建议</h3>
|
||
<p class="text-slate-700 leading-relaxed">
|
||
建议企业基于本次盘点结果，优先推进高价值潜力的数据应用场景，同时加强数据合规管理，
|
||
建立完善的数据资产管理制度。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Inventory Report -->
|
||
<template v-else-if="viewingReport === 'inventory' && viewingInventoryId">
|
||
<div class="space-y-6">
|
||
<div>
|
||
<h3 class="text-2xl font-bold text-slate-900 mb-4">数据资产目录</h3>
|
||
<p class="text-slate-600 mb-6">以下为该场景相关的数据资产清单</p>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-6">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h4 class="text-lg font-bold text-slate-900">{{ currentScenario?.name }}</h4>
|
||
<span class="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded-full">
|
||
{{ currentScenario?.type }}
|
||
</span>
|
||
</div>
|
||
<p class="text-slate-600 mb-4">{{ currentScenario?.desc }}</p>
|
||
<div>
|
||
<p class="text-sm font-bold text-slate-700 mb-2">核心数据支撑：</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
v-for="(dep, i) in currentScenario?.dependencies"
|
||
:key="i"
|
||
class="px-2 py-1 bg-slate-100 text-slate-700 text-xs rounded border border-slate-200"
|
||
>
|
||
{{ dep }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Legacy Optimization Report -->
|
||
<template v-else-if="viewingReport === 'legacy-optimization'">
|
||
<div class="space-y-6">
|
||
<div>
|
||
<h3 class="text-2xl font-bold text-slate-900 mb-4">存量数据应用场景优化建议</h3>
|
||
<p class="text-slate-600 mb-6">
|
||
基于 Step 3 填写的存量场景及截图，AI 识别出以下改进点
|
||
</p>
|
||
</div>
|
||
<div class="space-y-6">
|
||
<div
|
||
v-for="item in legacyOptimizationData"
|
||
:key="item.id"
|
||
class="border border-slate-200 rounded-lg p-6"
|
||
>
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h4 class="text-xl font-bold text-slate-900">{{ item.title }}</h4>
|
||
<span :class="[
|
||
'px-3 py-1 rounded text-xs font-bold',
|
||
item.impact === '高' ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700'
|
||
]">
|
||
{{ item.impact }} 价值潜力
|
||
</span>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div class="bg-red-50 p-4 rounded-lg border border-red-100">
|
||
<p class="text-xs font-bold text-red-700 mb-2">现有问题诊断</p>
|
||
<p class="text-sm text-slate-700">{{ item.issue }}</p>
|
||
</div>
|
||
<div class="bg-green-50 p-4 rounded-lg border border-green-100">
|
||
<p class="text-xs font-bold text-green-700 mb-2">AI 优化建议</p>
|
||
<p class="text-sm text-slate-700">{{ item.suggestion }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- Potential Scenarios Report -->
|
||
<template v-else-if="viewingReport === 'potential-scenarios'">
|
||
<div class="space-y-6">
|
||
<div>
|
||
<h3 class="text-2xl font-bold text-slate-900 mb-4">潜在数据应用场景评估</h3>
|
||
<p class="text-slate-600 mb-6">
|
||
基于数据资产盘点结果，AI 推荐以下潜在数据应用场景
|
||
</p>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div
|
||
v-for="scenario in selectedScenarios"
|
||
:key="scenario.id"
|
||
class="border border-slate-200 rounded-lg p-6"
|
||
>
|
||
<div class="flex items-center justify-between mb-3">
|
||
<h4 class="text-lg font-bold text-slate-900">{{ scenario.name }}</h4>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-xs font-bold text-slate-500 border border-slate-200 px-2 py-1 rounded">
|
||
{{ scenario.type }}
|
||
</span>
|
||
<span :class="[
|
||
'text-xs font-bold px-2 py-1 rounded',
|
||
scenario.impact === 'High' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'
|
||
]">
|
||
{{ scenario.impact }} Impact
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<p class="text-slate-600 mb-4">{{ scenario.desc }}</p>
|
||
<div>
|
||
<p class="text-sm font-bold text-slate-700 mb-2">核心数据支撑：</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
v-for="(dep, i) in scenario.dependencies"
|
||
:key="i"
|
||
class="px-2 py-1 bg-slate-100 text-slate-700 text-xs rounded border border-slate-200"
|
||
>
|
||
{{ dep }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Delivery View -->
|
||
<div v-else class="flex flex-col h-full bg-slate-50 overflow-y-auto animate-fade-in p-8 min-h-0">
|
||
<div class="text-center mb-10">
|
||
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center text-green-600 mx-auto mb-4 shadow-sm">
|
||
<PackageCheck :size="36" />
|
||
</div>
|
||
<h2 class="text-3xl font-bold text-slate-900">项目交付与结算</h2>
|
||
<p class="text-slate-500 mt-2">数据资产盘点项目已完成，请查看并下载最终交付物。</p>
|
||
</div>
|
||
|
||
<div class="max-w-5xl mx-auto w-full space-y-6 mb-12">
|
||
<!-- 整体数据资产盘点工作总结 -->
|
||
<div class="bg-white p-6 rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex items-center flex-1">
|
||
<div class="p-3 bg-blue-100 rounded-lg text-blue-600 mr-4">
|
||
<FileText :size="24"/>
|
||
</div>
|
||
<div class="flex-1">
|
||
<h3 class="font-bold text-slate-900 text-lg mb-1">整体数据资产盘点工作总结</h3>
|
||
<p class="text-sm text-slate-500">项目整体概述、盘点成果汇总及下一步建议</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
@click="viewingReport = 'summary'"
|
||
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center"
|
||
>
|
||
<Eye :size="16" class="mr-2" />
|
||
在线查看
|
||
</button>
|
||
<button
|
||
@click="handleDownloadReport('summary')"
|
||
class="p-2 text-slate-400 hover:text-blue-600 transition-colors"
|
||
title="下载 PDF"
|
||
>
|
||
<Download :size="18" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据资产目录 - 多个 -->
|
||
<div>
|
||
<h3 class="text-sm font-bold text-slate-500 uppercase tracking-wider mb-4 flex items-center">
|
||
<Database :size="16" class="mr-2"/> 数据资产目录
|
||
</h3>
|
||
<div v-if="selectedScenarios.length === 0" class="bg-slate-50 border border-slate-200 rounded-lg p-6 text-center">
|
||
<p class="text-sm text-slate-500">暂无可用的数据资产目录，请返回价值挖掘步骤选择场景</p>
|
||
</div>
|
||
<div v-else class="space-y-4">
|
||
<div
|
||
v-for="scenario in selectedScenarios"
|
||
:key="scenario.id"
|
||
class="bg-white p-6 rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
|
||
>
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex items-center flex-1">
|
||
<div class="p-3 bg-green-50 rounded-lg text-green-600 mr-4">
|
||
<FileSpreadsheet :size="24"/>
|
||
</div>
|
||
<div class="flex-1">
|
||
<h4 class="font-bold text-slate-900 mb-1">数据资产目录 - {{ scenario.name }}</h4>
|
||
<p class="text-xs text-slate-500">包含该场景相关的数据表结构、字段定义及元数据信息</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
@click="openInventoryReport(scenario.id)"
|
||
class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center"
|
||
>
|
||
<Eye :size="16" class="mr-2" />
|
||
在线查看
|
||
</button>
|
||
<button
|
||
@click="handleDownloadReport('inventory', scenario.id)"
|
||
class="p-2 text-slate-400 hover:text-green-600 transition-colors"
|
||
title="下载 Excel"
|
||
>
|
||
<Download :size="18" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 存量数据应用场景优化建议 -->
|
||
<div class="bg-white p-6 rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex items-center flex-1">
|
||
<div class="p-3 bg-amber-50 rounded-lg text-amber-600 mr-4">
|
||
<TrendingUp :size="24"/>
|
||
</div>
|
||
<div class="flex-1">
|
||
<h3 class="font-bold text-slate-900 text-lg mb-1">存量数据应用场景优化建议</h3>
|
||
<p class="text-sm text-slate-500">基于现有应用场景的 AI 诊断与优化建议</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
@click="viewingReport = 'legacy-optimization'"
|
||
class="px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 flex items-center"
|
||
>
|
||
<Eye :size="16" class="mr-2" />
|
||
在线查看
|
||
</button>
|
||
<button
|
||
@click="handleDownloadReport('legacy-optimization')"
|
||
class="p-2 text-slate-400 hover:text-amber-600 transition-colors"
|
||
title="下载 PDF"
|
||
>
|
||
<Download :size="18" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 潜在数据应用场景评估 -->
|
||
<div v-if="selectedScenarios.length > 0" class="bg-white p-6 rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
|
||
<div class="flex items-start justify-between">
|
||
<div class="flex items-center flex-1">
|
||
<div class="p-3 bg-purple-50 rounded-lg text-purple-600 mr-4">
|
||
<TrendingUp :size="24"/>
|
||
</div>
|
||
<div class="flex-1">
|
||
<h3 class="font-bold text-slate-900 text-lg mb-1">潜在数据应用场景评估</h3>
|
||
<p class="text-sm text-slate-500">AI 推荐的潜在数据应用场景详细评估报告</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
@click="viewingReport = 'potential-scenarios'"
|
||
class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center"
|
||
>
|
||
<Eye :size="16" class="mr-2" />
|
||
在线查看
|
||
</button>
|
||
<button
|
||
@click="handleDownloadReport('potential-scenarios')"
|
||
class="p-2 text-slate-400 hover:text-purple-600 transition-colors"
|
||
title="下载 PDF"
|
||
>
|
||
<Download :size="18" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="max-w-4xl mx-auto w-full text-center">
|
||
<button
|
||
@click="handleBatchDownload"
|
||
class="px-8 py-3 bg-slate-900 text-white rounded-lg font-bold shadow-lg hover:bg-slate-800 transition-transform hover:scale-105 flex items-center mx-auto"
|
||
>
|
||
<PackageCheck :size="20" class="mr-2"/>
|
||
一键打包下载所有交付物 (Zip)
|
||
</button>
|
||
<p class="text-xs text-slate-400 mt-4">
|
||
操作提示: 确认下载后，系统将自动锁定本项目的所有编辑权限 (Audit Lock)。如需修改，请联系总监申请解锁。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue';
|
||
import {
|
||
PackageCheck,
|
||
FileText,
|
||
Database,
|
||
FileSpreadsheet,
|
||
TrendingUp,
|
||
Download,
|
||
Eye,
|
||
ArrowLeft
|
||
} from 'lucide-vue-next';
|
||
import { Scenario } from '@/types';
|
||
import { legacyOptimizationData } from '@/data/mockData';
|
||
|
||
type ReportType = 'summary' | 'inventory' | 'legacy-optimization' | 'potential-scenarios' | null;
|
||
|
||
interface Props {
|
||
selectedScenarios: Scenario[];
|
||
}
|
||
|
||
const props = defineProps<Props>();
|
||
|
||
const viewingReport = ref<ReportType>(null);
|
||
const viewingInventoryId = ref<number | null>(null);
|
||
|
||
const reportTitle = computed(() => {
|
||
if (viewingReport.value === 'summary') return '整体数据资产盘点工作总结';
|
||
if (viewingReport.value === 'inventory' && viewingInventoryId.value) {
|
||
const scenario = props.selectedScenarios.find(s => s.id === viewingInventoryId.value);
|
||
return `数据资产目录 - ${scenario?.name}`;
|
||
}
|
||
if (viewingReport.value === 'legacy-optimization') return '存量数据应用场景优化建议';
|
||
if (viewingReport.value === 'potential-scenarios') return '潜在数据应用场景评估';
|
||
return '';
|
||
});
|
||
|
||
const currentScenario = computed(() => {
|
||
if (!viewingInventoryId.value) return null;
|
||
return props.selectedScenarios.find(s => s.id === viewingInventoryId.value);
|
||
});
|
||
|
||
const closeReport = () => {
|
||
viewingReport.value = null;
|
||
viewingInventoryId.value = null;
|
||
};
|
||
|
||
const openInventoryReport = (id: number) => {
|
||
viewingInventoryId.value = id;
|
||
viewingReport.value = 'inventory';
|
||
};
|
||
|
||
const handleDownload = () => {
|
||
const reportName = reportTitle.value;
|
||
console.log(`Download PDF: ${reportName}`);
|
||
};
|
||
|
||
const handleDownloadReport = (type: ReportType, scenarioId?: number) => {
|
||
let reportName = '';
|
||
if (type === 'summary') reportName = '整体数据资产盘点工作总结';
|
||
else if (type === 'inventory' && scenarioId) {
|
||
const scenario = props.selectedScenarios.find(s => s.id === scenarioId);
|
||
reportName = `数据资产目录-${scenario?.name}`;
|
||
}
|
||
else if (type === 'legacy-optimization') reportName = '存量数据应用场景优化建议';
|
||
else if (type === 'potential-scenarios') reportName = '潜在数据应用场景评估';
|
||
|
||
console.log(`Download: ${reportName}`);
|
||
};
|
||
|
||
const handleBatchDownload = () => {
|
||
if (confirm('确认下载所有交付物？下载后系统将自动锁定本项目的所有编辑权限 (Audit Lock)。')) {
|
||
console.log('Download all deliverables as ZIP');
|
||
}
|
||
};
|
||
</script>
|