仪表盘顶部增加车间产量卡片(降序排列)

frontend/src/views/dashboard/DashboardPage.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="dashboard-page">
-    <!-- 第1行 — 3个统计卡片 -->
+    <!-- 第1行 — 2个统计卡片 -->
     <el-row :gutter="16" class="stat-row">
-      <el-col :span="8">
+      <el-col :span="12">
         <el-card shadow="hover">
           <div class="stat-card">
             <div class="stat-label">
@@ -15,7 +15,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="12">
         <el-card shadow="hover">
           <div class="stat-card">
             <div class="stat-label">
@@ -29,6 +29,17 @@
         </el-card>
       </el-col>
     </el-row>
+    <!-- 车间产量卡片 -->
+    <el-row :gutter="16" class="stat-row">
+      <el-col v-for="w in sortedWorkshopData" :key="w.workshopName" :span="8">
+        <el-card shadow="hover">
+          <div class="stat-card">
+            <div class="stat-label">{{ w.workshopName }}</div>
+            <div class="stat-value">{{ w.quantity?.toLocaleString() }}<span class="stat-unit"> 件</span></div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
 
     <!-- 第2行 — 双图表 -->
     <el-row :gutter="16" class="chart-row">
@@ -450,7 +461,7 @@ const workerSortOrder = ref<'asc' | 'desc'>('desc')
 
 // ==================== 计算属性 ====================
 
-const workshopDateLabel = computed(() => dateLabels[workshopDateType.value])
+const sortedWorkshopData = computed(() => [...workshopData.value].sort((a, b) => (b.quantity || 0) - (a.quantity || 0)))
 
 const workshopDays = computed(() => {
   const { startDate, endDate } = getDateRange(workshopDateType.value, workshopDateRange.value)
@@ -646,7 +657,7 @@ function initProgramDistChart() {
 }
 
 function initWorkshopChart() {
-  if (workshopChartRef.value && workshopData.value.length) {
+  if (workshopChartRef.value && sortedWorkshopData.value.length) {
     const unit = workshopUnit.value
     const unitLabel = workshopUnitLabel.value
     workshopChart = echarts.init(workshopChartRef.value)
@@ -654,14 +665,14 @@ function initWorkshopChart() {
       tooltip: {
         trigger: 'axis',
         formatter: (params: { name: string; value: number; dataIndex: number }[]) => {
-          const d = workshopData.value[params[0].dataIndex]
+          const d = sortedWorkshopData.value[params[0].dataIndex]
           return `${d.workshopName}<br/>${unitLabel}产量: ${Number(params[0].value).toFixed(2)} ${unit}<br/>总产量: ${d.quantity} 件<br/>机床数: ${d.machineCount} 台`
         },
       },
       grid: { left: 60, right: 20, top: 20, bottom: 30 },
       xAxis: {
         type: 'category',
-        data: workshopData.value.map(i => i.workshopName),
+        data: sortedWorkshopData.value.map(i => i.workshopName),
         axisLabel: { fontSize: 12 },
       },
       yAxis: {
@@ -672,7 +683,7 @@ function initWorkshopChart() {
       series: [
         {
           type: 'bar',
-          data: workshopData.value.map(i => i.avgQuantity),
+          data: sortedWorkshopData.value.map(i => i.avgQuantity),
           itemStyle: { color: '#67C23A', borderRadius: [4, 4, 0, 0] },
           barWidth: '40%',
           label: {
@@ -767,7 +778,7 @@ async function loadWorkshopData() {
       '/admin/dashboard/workshop-production',
       { params: { startDate, endDate } }
     )
-    workshopData.value = res.data?.items || []
+    workshopData.value = (res.data?.items || []).sort((a:any,b:any)=>(b.quantity||0)-(a.quantity||0))
     workshopChart?.dispose()
     workshopChart = null
     await nextTick()