tiantian-system/app/pages/admin/management/decision.vue

<script setup lang="ts">
definePageMeta({ layout: 'admin' })
const { activeTab } = useNav()
activeTab.value = 'management-decision'

const kpis = ref([
  { name: '设备综合效率 OEE', value: 78.5, target: 85, unit: '%', trend: '+2.3%', color: '#6366f1' },
  { name: '订单准时交付率', value: 96.2, target: 98, unit: '%', trend: '+1.5%', color: '#10b981' },
  { name: '产品一次合格率', value: 97.8, target: 98.5, unit: '%', trend: '+0.3%', color: '#3b82f6' },
  { name: '人均产值', value: 8.5, target: 9.0, unit: '万/月', trend: '+0.3', color: '#f59e0b' },
])

const analysis = ref([
  { title: '生产效能分析', desc: '本月产能利用率达85%，较上月提升5个百分点', type: 'production', icon: '📊' },
  { title: '质量趋势分析', desc: '近30天良品率稳定在97%以上，呈上升趋势', type: 'quality', icon: '✅' },
  { title: '成本分析报告', desc: '本月生产成本控制良好，材料利用率提升3%', type: 'cost', icon: '💰' },
  { title: '库存周转分析', desc: '库存周转天数28天，处于健康水平', type: 'inventory', icon: '📦' },
])

const typeColor: Record<string, string> = {
  production: 'indigo',
  quality: 'green',
  cost: 'orange',
  inventory: 'blue',
}
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <h2 class="page-title">决策支持</h2>
      <a-button @click="() => {}">导出报告</a-button>
    </div>

    <!-- KPI 指标卡 -->
    <a-row :gutter="[16, 16]" class="mb-6">
      <a-col :xs="24" :sm="12" :xl="6" v-for="kpi in kpis" :key="kpi.name">
        <div class="kpi-card">
          <div class="kpi-header">
            <span class="kpi-name">{{ kpi.name }}</span>
            <span class="kpi-trend">{{ kpi.trend }}</span>
          </div>
          <div class="kpi-value" :style="{ color: kpi.color }">{{ kpi.value }}<span class="kpi-unit">{{ kpi.unit }}</span></div>
          <div class="kpi-bar">
            <a-progress :percent="Math.round(kpi.value / kpi.target * 100)" :showInfo="false" :strokeColor="kpi.color" size="small" />
            <span class="kpi-target">目标: {{ kpi.target }}{{ kpi.unit }}</span>
          </div>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="[20, 20]">
      <a-col :xs="24" :xl="16">
        <div class="card">
          <div class="card-title">经营分析报告</div>
          <div class="analysis-list">
            <div v-for="item in analysis" :key="item.title" class="analysis-item">
              <div class="analysis-icon" :class="item.type">{{ item.icon }}</div>
              <div class="analysis-body">
                <div class="analysis-title">{{ item.title }}</div>
                <div class="analysis-desc">{{ item.desc }}</div>
              </div>
              <a-button type="link" size="small">查看详情</a-button>
            </div>
          </div>
        </div>
      </a-col>

      <a-col :xs="24" :xl="8">
        <div class="card">
          <div class="card-title">数据趋势</div>
          <div class="trend-list">
            <div class="trend-item">
              <div class="trend-label">营收趋势</div>
              <div class="trend-bar">
                <div class="trend-fill" style="width: 72%; background: #10b981;"></div>
              </div>
              <div class="trend-val">72%</div>
            </div>
            <div class="trend-item">
              <div class="trend-label">利润趋势</div>
              <div class="trend-bar">
                <div class="trend-fill" style="width: 65%; background: #6366f1;"></div>
              </div>
              <div class="trend-val">65%</div>
            </div>
            <div class="trend-item">
              <div class="trend-label">产能趋势</div>
              <div class="trend-bar">
                <div class="trend-fill" style="width: 85%; background: #f59e0b;"></div>
              </div>
              <div class="trend-val">85%</div>
            </div>
            <div class="trend-item">
              <div class="trend-label">质量趋势</div>
              <div class="trend-bar">
                <div class="trend-fill" style="width: 78%; background: #3b82f6;"></div>
              </div>
              <div class="trend-val">78%</div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.page-container { padding: 24px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-title { font-size: 20px; font-weight: 600; color: #1f2937; margin: 0; }

.kpi-card { background: white; border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; }
.kpi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kpi-name { font-size: 13px; color: #6b7280; }
.kpi-trend { font-size: 12px; color: #10b981; font-weight: 600; }
.kpi-value { font-size: 30px; font-weight: 700; }
.kpi-unit { font-size: 13px; font-weight: 400; color: #9ca3af; margin-left: 2px; }
.kpi-bar { margin-top: 10px; }
.kpi-target { font-size: 11px; color: #9ca3af; margin-top: 4px; display: block; }

.card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; }
.card-title { font-size: 16px; font-weight: 600; color: #1f2937; margin-bottom: 16px; }

.analysis-list { display: flex; flex-direction: column; gap: 14px; }
.analysis-item { display: flex; align-items: center; gap: 14px; padding: 14px; background: #fafafa; border-radius: 10px; }
.analysis-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: #f0f0f0; }
.analysis-icon.production { background: #eef2ff; }
.analysis-icon.quality { background: #ecfdf5; }
.analysis-icon.cost { background: #fffbeb; }
.analysis-icon.inventory { background: #eff6ff; }
.analysis-body { flex: 1; }
.analysis-title { font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.analysis-desc { font-size: 12px; color: #9ca3af; }

.trend-list { display: flex; flex-direction: column; gap: 16px; }
.trend-item { display: flex; align-items: center; gap: 10px; }
.trend-label { width: 80px; font-size: 13px; color: #6b7280; }
.trend-bar { flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.trend-fill { height: 100%; border-radius: 4px; }
.trend-val { width: 40px; text-align: right; font-size: 13px; font-weight: 600; color: #374151; }

.mb-6 { margin-bottom: 20px; }
</style>