feat: initial commit - Phase 1 & 2 core features

frontend/src/views/report/Report.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="page-container">
+    <h2 class="page-title">报表统计</h2>
+
+    <el-row :gutter="16" class="chart-row">
+      <el-col :xs="24" :md="12">
+        <div class="chart-card card-shadow">
+          <div class="chart-title">数据分级分布</div>
+          <v-chart class="chart" :option="levelOption" autoresize />
+        </div>
+      </el-col>
+      <el-col :xs="24" :md="12">
+        <div class="chart-card card-shadow">
+          <div class="chart-title">项目进度</div>
+          <v-chart class="chart" :option="projectOption" autoresize />
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="16" class="chart-row">
+      <el-col :xs="24" :md="12">
+        <div class="chart-card card-shadow">
+          <div class="chart-title">识别来源占比</div>
+          <v-chart class="chart" :option="sourceOption" autoresize />
+        </div>
+      </el-col>
+      <el-col :xs="24" :md="12">
+        <div class="chart-card card-shadow">
+          <div class="chart-title">敏感数据趋势（近7天）</div>
+          <v-chart class="chart" :option="trendOption" autoresize />
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart, BarChart, LineChart } from 'echarts/charts'
+import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
+import VChart from 'vue-echarts'
+
+use([CanvasRenderer, PieChart, BarChart, LineChart, TooltipComponent, LegendComponent, GridComponent])
+
+const levelOption = ref({
+  tooltip: { trigger: 'item' },
+  legend: { bottom: '0%', left: 'center' },
+  color: ['#67c23a', '#409eff', '#e6a23c', '#f56c6c', '#909399'],
+  series: [
+    {
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
+      label: { show: false },
+      data: [
+        { value: 35000, name: 'L1 公开级' },
+        { value: 62000, name: 'L2 内部级' },
+        { value: 48000, name: 'L3 敏感级' },
+        { value: 22000, name: 'L4 重要级' },
+        { value: 6931, name: 'L5 核心级' },
+      ],
+    },
+  ],
+})
+
+const projectOption = ref({
+  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  xAxis: { type: 'category', data: ['项目A', '项目B', '项目C', '项目D'] },
+  yAxis: { type: 'value', max: 100 },
+  series: [
+    {
+      type: 'bar',
+      data: [68, 92, 25, 45],
+      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#409eff' },
+      label: { show: true, position: 'top', formatter: '{c}%' },
+    },
+  ],
+})
+
+const sourceOption = ref({
+  tooltip: { trigger: 'item' },
+  legend: { bottom: '0%', left: 'center' },
+  color: ['#e6a23c', '#67c23a'],
+  series: [
+    {
+      type: 'pie',
+      radius: ['40%', '70%'],
+      itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
+      label: { show: false },
+      data: [
+        { value: 124500, name: '自动识别' },
+        { value: 27840, name: '人工打标' },
+      ],
+    },
+  ],
+})
+
+const trendOption = ref({
+  tooltip: { trigger: 'axis' },
+  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+  xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
+  yAxis: { type: 'value' },
+  series: [
+    {
+      type: 'line',
+      data: [120, 132, 101, 134, 90, 230, 210],
+      smooth: true,
+      itemStyle: { color: '#f56c6c' },
+      areaStyle: { color: 'rgba(245,108,108,0.1)' },
+    },
+  ],
+})
+</script>
+
+<style scoped lang="scss">
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #303133;
+}
+
+.chart-row {
+  margin-bottom: 16px;
+}
+
+.chart-card {
+  padding: 20px;
+  margin-bottom: 16px;
+  background: #fff;
+  border-radius: 8px;
+
+  .chart-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: #303133;
+  }
+
+  .chart {
+    width: 100%;
+    height: 300px;
+  }
+}
+</style>