CrossBorder_OS/frontend/src/views/report/ProcurementReportView.vue

<template>
  <div class="app-page">
    <section class="glass-card page-hero">
      <div class="page-hero__meta">
        <span class="page-hero__eyebrow">Procurement Analytics</span>
        <h1>采购报表</h1>
        <p>追踪采购额、到货及时率、质量合格率和供应商排名，优化采购策略。</p>
      </div>
    </section>

    <section class="glass-card section-card" style="padding:20px">
      <div style="display:flex;gap:16px;flex-wrap:wrap">
        <div class="procure-card">
          <div class="procure-card__icon" style="background:linear-gradient(135deg,#409EFF,#67C23A)">
            <el-icon><ShoppingCart /></el-icon>
          </div>
          <div class="procure-card__info">
            <div class="procure-card__value">¥1,258,600</div>
            <div class="procure-card__label">本月采购额</div>
            <div class="procure-card__trend trend-up">+15.2% ↑</div>
          </div>
        </div>
        <div class="procure-card">
          <div class="procure-card__icon" style="background:linear-gradient(135deg,#67C23A,#E6A23C)">
            <el-icon><Timer /></el-icon>
          </div>
          <div class="procure-card__info">
            <div class="procure-card__value">94.2%</div>
            <div class="procure-card__label">到货及时率</div>
            <div class="procure-card__trend trend-up">+2.1% ↑</div>
          </div>
        </div>
        <div class="procure-card">
          <div class="procure-card__icon" style="background:linear-gradient(135deg,#E6A23C,#F56C6C)">
            <el-icon><CircleCheck /></el-icon>
          </div>
          <div class="procure-card__info">
            <div class="procure-card__value">97.8%</div>
            <div class="procure-card__label">质量合格率</div>
            <div class="procure-card__trend trend-up">+0.8% ↑</div>
          </div>
        </div>
        <div class="procure-card">
          <div class="procure-card__icon" style="background:linear-gradient(135deg,#F56C6C,#909399)">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="procure-card__info">
            <div class="procure-card__value">12.5天</div>
            <div class="procure-card__label">平均交期</div>
            <div class="procure-card__trend trend-down">-1.2天 ↓</div>
          </div>
        </div>
      </div>
    </section>

    <section class="page-grid" style="grid-template-columns: 1fr 1fr;">
      <article class="glass-card section-card">
        <h3 style="margin:0 0 16px">采购额趋势</h3>
        <v-chart :option="purchaseTrendOption" autoresize style="height:280px" />
      </article>
      <article class="glass-card section-card">
        <h3 style="margin:0 0 16px">供应商采购分布</h3>
        <v-chart :option="supplierDistOption" autoresize style="height:280px" />
      </article>
    </section>

    <section class="glass-card section-card">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
        <h3 style="margin:0">供应商排名</h3>
        <el-radio-group v-model="rankingType" size="small">
          <el-radio-button label="amount">采购额</el-radio-button>
          <el-radio-button label="quality">质量</el-radio-button>
          <el-radio-button label="delivery">交期</el-radio-button>
        </el-radio-group>
      </div>
      <div class="supplier-ranking">
        <div v-for="(s, idx) in supplierRanking" :key="idx" class="supplier-item">
          <div class="supplier-item__rank" :class="{ 'supplier-item__rank--top': idx < 3 }">
            {{ idx + 1 }}
          </div>
          <div class="supplier-item__info">
            <div class="supplier-item__name">{{ s.name }}</div>
            <el-progress :percentage="s.score" :stroke-width="6" :show-text="false" :color="idx < 3 ? '#409EFF' : '#909399'" />
          </div>
          <div class="supplier-item__meta">
            <div class="supplier-item__value">¥{{ s.amount.toLocaleString() }}</div>
            <div class="supplier-item__rate">{{ s.rate }}%</div>
          </div>
          <el-tag :type="getSupplierLevel(s.level).type" size="small">
            {{ getSupplierLevel(s.level).label }}
          </el-tag>
        </div>
      </div>
    </section>

    <section class="glass-card section-card">
      <h3 style="margin:0 0 16px">采购明细</h3>
      <el-table :data="purchaseDetail">
        <el-table-column prop="poNo" label="采购单号" width="150" />
        <el-table-column prop="supplier" label="供应商" width="130" />
        <el-table-column prop="sku" label="SKU" width="110" />
        <el-table-column label="数量/单价" width="120">
          <template #default="{ row }">
            <span>{{ row.qty }} / ¥{{ row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="120">
          <template #default="{ row }">
            <span style="font-weight:600;color:var(--cb-primary)">¥{{ row.amount.toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交期" width="140">
          <template #default="{ row }">
            <span :class="row.onTime ? 'trend-up' : 'trend-down'">
              {{ row.onTime ? '✓ 准时' : '✗ 延迟' }}
            </span>
            {{ row.expectedDate }}
          </template>
        </el-table-column>
        <el-table-column prop="qualityStatus" label="质检" width="90">
          <template #default="{ row }">
            <el-tag :type="getQualityStatus(row.qualityStatus).type" size="small">
              {{ getQualityStatus(row.qualityStatus).label }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { ShoppingCart, Timer, CircleCheck, Clock } from '@element-plus/icons-vue';
import VChart from 'vue-echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart, PieChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { getQualityStatus, getSupplierLevel } from '@/utils/enumMappings';

use([CanvasRenderer, LineChart, BarChart, PieChart, GridComponent, TooltipComponent, LegendComponent]);

const loading = ref(false);
const rankingType = ref('amount');

const supplierRanking = ref([
  { name: '深圳华通供应链有限公司', amount: 428600, score: 100, rate: 98.5, level: 'A' },
  { name: '广州鼎盛纺织制衣厂', amount: 325800, score: 76, rate: 95.0, level: 'A' },
  { name: '东莞鑫达皮革制品厂', amount: 258200, score: 60, rate: 88.0, level: 'B' },
  { name: '宁波海天塑业有限公司', amount: 185600, score: 43, rate: 92.0, level: 'B' },
  { name: '苏州金诚纺织集团', amount: 125400, score: 29, rate: 82.0, level: 'C' }
]);

const purchaseDetail = ref([
  { poNo: 'PO-20260420-001', supplier: '深圳华通', sku: 'SKU-NM-BK-M', qty: 500, price: 85, amount: 42500, expectedDate: '2026-04-25', onTime: true, qualityStatus: '合格' },
  { poNo: 'PO-20260419-002', supplier: '广州鼎盛', sku: 'SKU-AE-GR-L', qty: 800, price: 42, amount: 33600, expectedDate: '2026-04-28', onTime: false, qualityStatus: '待检' },
  { poNo: 'PO-20260418-003', supplier: '东莞鑫达', sku: 'SKU-UT-WH-XL', qty: 200, price: 156, amount: 31200, expectedDate: '2026-04-22', onTime: false, qualityStatus: '合格' },
  { poNo: 'PO-20260417-004', supplier: '宁波海天', sku: 'SKU-UT-BK-42', qty: 150, price: 185, amount: 27750, expectedDate: '2026-04-30', onTime: true, qualityStatus: '待检' }
]);

const days = ['4/14', '4/15', '4/16', '4/17', '4/18', '4/19', '4/20'];

const purchaseTrendOption = computed(() => ({
  tooltip: { trigger: 'axis' },
  grid: { left: 60, right: 20, top: 20, bottom: 30 },
  xAxis: { type: 'category', data: days, boundaryGap: false },
  yAxis: { type: 'value', axisLabel: { formatter: '¥{value}' } },
  series: [{
    type: 'line',
    smooth: true,
    data: [168000, 185000, 172000, 198000, 182000, 215000, 186000],
    areaStyle: { opacity: 0.3, color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(64,158,255,0.5)' }, { offset: 1, color: 'rgba(64,158,255,0.05)' }] } },
    lineStyle: { width: 3, color: '#409EFF' },
    itemStyle: { color: '#409EFF' },
    symbol: 'circle',
    symbolSize: 6
  }]
}));

const supplierDistOption = computed(() => ({
  tooltip: { trigger: 'item', formatter: '{b}: ¥{c} ({d}%)' },
  series: [{
    type: 'pie',
    radius: ['45%', '75%'],
    center: ['50%', '50%'],
    roseType: 'area',
    itemStyle: { borderRadius: 8 },
    data: [
      { value: 428600, name: '深圳华通', itemStyle: { color: '#409EFF' } },
      { value: 325800, name: '广州鼎盛', itemStyle: { color: '#67C23A' } },
      { value: 258200, name: '东莞鑫达', itemStyle: { color: '#E6A23C' } },
      { value: 185600, name: '宁波海天', itemStyle: { color: '#F56C6C' } },
      { value: 125400, name: '苏州金诚', itemStyle: { color: '#909399' } }
    ],
    label: { color: '#666' }
  }]
}));

const loadData = () => { loading.value = true; setTimeout(() => { loading.value = false; }, 300); };

onMounted(loadData);
</script>

<style scoped>
.procure-card { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: linear-gradient(135deg, rgba(255,255,255,1), rgba(248,249,250,1)); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); min-width: 200px; }
.procure-card__icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; }
.procure-card__value { font-size: 22px; font-weight: 700; color: var(--cb-text-primary); }
.procure-card__label { font-size: 13px; color: var(--cb-text-soft); margin: 2px 0; }
.procure-card__trend { font-size: 12px; }
.supplier-ranking { display: flex; flex-direction: column; gap: 12px; }
.supplier-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(248,249,250,1); border-radius: 8px; }
.supplier-item__rank { width: 28px; height: 28px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
.supplier-item__rank--top { background: linear-gradient(135deg, #409EFF, #67C23A); color: white; }
.supplier-item__info { flex: 1; min-width: 0; }
.supplier-item__name { font-weight: 500; margin-bottom: 6px; font-size: 14px; }
.supplier-item__value { font-weight: 600; color: var(--cb-primary); font-size: 14px; }
.supplier-item__rate { font-size: 12px; color: var(--cb-text-soft); }
.supplier-item__meta { text-align: right; margin-right: 12px; }
.trend-up { color: var(--el-color-success); }
.trend-down { color: var(--el-color-danger); }
</style>