From 450e3911ec15d94d49f2df2e037ecc60c77c8e1a Mon Sep 17 00:00:00 2001
From: git_rabbit <zhaozhengyi1b@126.com>
Date: Fri, 24 Oct 2025 17:05:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=9C=8B=E6=9D=BF=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AE=BE=E5=A4=87=E7=9B=91=E6=8E=A7=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF=E5=B9=B6=E4=BC=98=E5=8C=96=E7=8E=B0=E6=9C=89=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加设备监控看板组件，展示设备实时数据和报警记录
- 调整轮播看板高度为95vh以更好利用屏幕空间
- 统一各看板数据接口，使用新的carouselBoard API
- 优化质量统计、生产工单和毛坯库存看板的显示内容和样式
- 添加车间滚动大屏路由配置
---
 src/api/kanbanManagement/carouselBoard.js     |  46 +++
 src/router/index.js                           | 326 +++++++++---------
 .../components/DeviceMonitoringCard.vue       | 323 +++++++++++++++++
 .../components/QualityStatisticsCard.vue      | 198 +++++++++--
 .../components/WmBlankInventoryCard.vue       |  21 +-
 .../components/WorkorderOnlineCard.vue        |  14 +-
 .../kanbanManagement/CarouselBoard/index.vue  |   9 +-
 7 files changed, 718 insertions(+), 219 deletions(-)
 create mode 100644 src/api/kanbanManagement/carouselBoard.js
 create mode 100644 src/views/kanbanManagement/CarouselBoard/components/DeviceMonitoringCard.vue

diff --git a/src/api/kanbanManagement/carouselBoard.js b/src/api/kanbanManagement/carouselBoard.js
new file mode 100644
index 0000000..da6d90f
--- /dev/null
+++ b/src/api/kanbanManagement/carouselBoard.js
@@ -0,0 +1,46 @@
+import request from "@/utils/request";
+
+// 获取质量大屏轮播数据
+export function getQualityStatisticsCarouselBoardData(data) {
+    return request({
+        url: "/BI/CarouselBoard/getQualityStatisticsCarouselBoardData",
+        method: "POST",
+        data: data,
+    });
+}
+
+// 获取生产大屏轮播数据
+export function getWorkOrderCarouselBoardData(data) {
+    return request({
+        url: "/BI/CarouselBoard/getWorkOrderCarouselBoardData",
+        method: "POST",
+        data: data,
+    });
+}
+
+// 获取毛坯大屏轮播数据
+export function getBlankInventoryCarouselBoardData(data) {
+    return request({
+        url: "/BI/CarouselBoard/getBlankInventoryCarouselBoardData",
+        method: "POST",
+        data: data,
+    });
+}
+
+// 获取设备报警大屏轮播数据
+export function getEquipmentAlarmCarouselBoardData(data) {
+    return request({
+        url: "/BI/CarouselBoard/getEquipmentAlarmCarouselBoardData",
+        method: "POST",
+        data: data,
+    });
+}
+
+// 获取设备实时参数信息大屏轮播数据
+export function getEquipmentLiveCarouselBoardData(data) {
+    return request({
+        url: "/BI/CarouselBoard/getEquipmentLiveCarouselBoardData",
+        method: "POST",
+        data: data,
+    });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 3e87206..93952cd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,10 +1,10 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue";
+import Router from "vue-router";
 
-Vue.use(Router)
+Vue.use(Router);
 
 /* Layout */
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 /**
  * Note: 路由配置项
@@ -26,161 +26,167 @@ import Layout from '@/layout'
 
 // 公共路由
 export const constantRoutes = [
-  {
-    path: '/redirect',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '/redirect/:path(.*)',
-        component: (resolve) => require(['@/views/redirect'], resolve),
-      },
-    ],
-  },
-  {
-    path: '/login',
-    component: (resolve) => require(['@/views/login'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/register',
-    component: (resolve) => require(['@/views/register'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/404',
-    component: (resolve) => require(['@/views/error/404'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/401',
-    component: (resolve) => require(['@/views/error/401'], resolve),
-    hidden: true,
-  },
-  {
-    path: '',
-    component: Layout,
-    redirect: 'index',
-    children: [
-      {
-        path: 'index',
-        component: (resolve) => require(['@/views/index'], resolve),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true },
-      },
-    ],
-  },
-  {
-    path: '/user',
-    component: Layout,
-    hidden: true,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'profile',
-        component: (resolve) => require(['@/views/system/user/profile/index'], resolve),
-        name: 'Profile',
-        meta: { title: '个人中心', icon: 'user' },
-      },
-    ],
-  },
-  {
-    path: '/echarts',
-    component: (resolve) => require(['@/views/components/Echarts'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/icons',
-    component: (resolve) => require(['@/views/components/icons/index'], resolve),
-    hidden: true,
-  },
-  // 质量检验中的初次检验
-  {
-    path: '/firstFQC',
-    component: (resolve) => require(['@/views/qualityManagement/FQC/firstFQC.vue'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/againFQC',
-    component: (resolve) => require(['@/views/qualityManagement/FQC/againFQC.vue'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/thirtyFQC',
-    component: (resolve) => require(['@/views/qualityManagement/FQC/thirtyFQC.vue'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/polishManagement/WmPolishWorkOrder',
-    component: (resolve) => require(['@/views/wmsManagement/WmPolishInventory/WmPolishWorkOrder.vue'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/polishManagement/PolishReport',
-    component: (resolve) => require(['@/views/wmsManagement/WmPolishInventory/PolishReport.vue'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/polishManagement/PolishFQC',
-    component: (resolve) => require(['@/views/wmsManagement/WmPolishInventory/PolishFQC.vue'], resolve),
-    hidden: true,
-  },
-  // 看板
-  {
-    path: '/kanbanManagement/FqcQualityDataBoard',
-    component: (resolve) => require(['@/views/kanbanManagement/FqcQualityDataBoard/index.vue'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/kanbanManagement/productionBoard',
-    component: (resolve) => require(['@/views/kanbanManagement/productionBoard/index.vue'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/gp12Management/touchScreen',
-    component: (resolve) => require(['@/views/qualityManagement/gp12/touchScreen/main/index.vue'], resolve),
-    hidden: true,
-  },
-  {
-    path: '/BackEndManagement/BackendTouchScreen',
-    component: (resolve) => require(['@/views/qualityManagement/backend/touchScreen/main/index.vue'], resolve),
-    hidden: true,
-  },
-  // 车间生产看板
-  {
-    path: '/kanbanManagement/mainProductionBoard',
-    component: (resolve) => require(['@/views/kanbanManagement/mainProductionBoard.vue'], resolve),
-    hidden: true,
-  },
-  // 设备管理
-  {
-    name: 'Fullscreen',
-    path: '/fullscreen',
-    component: () => import('@/views/deviceManagement/datascreen/index.vue'),
-    hidden: true
-  },
-  // {
-  //   name: 'Fullscreen2',
-  //   path: '/fullscreen2',
-  //   component: () => import('@/views/andonManagement/analysis/fullscreen/index.vue'),
-  //   hidden: true
-  // },
-  {
-    name: 'TheTaskExecuteView',
-    path: '/TheTaskExecuteView',
-    component: () => import('@/views/deviceManagement/deviceTaskExecute/TheTaskExecuteView.vue'),
-    hidden: true
-  },
-  // {
-  // 	path: '/qualityManagement/FQC/qualityStatistics',
-  // 	component: (resolve) => require(['@/views/qualityManagement/FQC/qualityStatistics.vue'], resolve),
-  // 	hidden: true
-  // },
-]
+    {
+        path: "/redirect",
+        component: Layout,
+        hidden: true,
+        children: [
+            {
+                path: "/redirect/:path(.*)",
+                component: (resolve) => require(["@/views/redirect"], resolve),
+            },
+        ],
+    },
+    {
+        path: "/login",
+        component: (resolve) => require(["@/views/login"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/register",
+        component: (resolve) => require(["@/views/register"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/404",
+        component: (resolve) => require(["@/views/error/404"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/401",
+        component: (resolve) => require(["@/views/error/401"], resolve),
+        hidden: true,
+    },
+    {
+        path: "",
+        component: Layout,
+        redirect: "index",
+        children: [
+            {
+                path: "index",
+                component: (resolve) => require(["@/views/index"], resolve),
+                name: "Index",
+                meta: { title: "首页", icon: "dashboard", affix: true },
+            },
+        ],
+    },
+    {
+        path: "/user",
+        component: Layout,
+        hidden: true,
+        redirect: "noredirect",
+        children: [
+            {
+                path: "profile",
+                component: (resolve) => require(["@/views/system/user/profile/index"], resolve),
+                name: "Profile",
+                meta: { title: "个人中心", icon: "user" },
+            },
+        ],
+    },
+    {
+        path: "/echarts",
+        component: (resolve) => require(["@/views/components/Echarts"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/icons",
+        component: (resolve) => require(["@/views/components/icons/index"], resolve),
+        hidden: true,
+    },
+    // 质量检验中的初次检验
+    {
+        path: "/firstFQC",
+        component: (resolve) => require(["@/views/qualityManagement/FQC/firstFQC.vue"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/againFQC",
+        component: (resolve) => require(["@/views/qualityManagement/FQC/againFQC.vue"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/thirtyFQC",
+        component: (resolve) => require(["@/views/qualityManagement/FQC/thirtyFQC.vue"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/polishManagement/WmPolishWorkOrder",
+        component: (resolve) => require(["@/views/wmsManagement/WmPolishInventory/WmPolishWorkOrder.vue"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/polishManagement/PolishReport",
+        component: (resolve) => require(["@/views/wmsManagement/WmPolishInventory/PolishReport.vue"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/polishManagement/PolishFQC",
+        component: (resolve) => require(["@/views/wmsManagement/WmPolishInventory/PolishFQC.vue"], resolve),
+        hidden: true,
+    },
+    // 看板
+    {
+        path: "/kanbanManagement/FqcQualityDataBoard",
+        component: (resolve) => require(["@/views/kanbanManagement/FqcQualityDataBoard/index.vue"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/kanbanManagement/productionBoard",
+        component: (resolve) => require(["@/views/kanbanManagement/productionBoard/index.vue"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/gp12Management/touchScreen",
+        component: (resolve) => require(["@/views/qualityManagement/gp12/touchScreen/main/index.vue"], resolve),
+        hidden: true,
+    },
+    {
+        path: "/BackEndManagement/BackendTouchScreen",
+        component: (resolve) => require(["@/views/qualityManagement/backend/touchScreen/main/index.vue"], resolve),
+        hidden: true,
+    },
+    // 车间生产看板
+    {
+        path: "/kanbanManagement/mainProductionBoard",
+        component: (resolve) => require(["@/views/kanbanManagement/mainProductionBoard.vue"], resolve),
+        hidden: true,
+    },
+    // 车间滚动大屏
+    {
+        path: "/kanbanManagement/CarouselBoard",
+        component: (resolve) => require(["@/views/kanbanManagement/CarouselBoard/index.vue"], resolve),
+        hidden: true,
+    },
+    // 设备管理
+    {
+        name: "Fullscreen",
+        path: "/fullscreen",
+        component: () => import("@/views/deviceManagement/datascreen/index.vue"),
+        hidden: true,
+    },
+    // {
+    //   name: 'Fullscreen2',
+    //   path: '/fullscreen2',
+    //   component: () => import('@/views/andonManagement/analysis/fullscreen/index.vue'),
+    //   hidden: true
+    // },
+    {
+        name: "TheTaskExecuteView",
+        path: "/TheTaskExecuteView",
+        component: () => import("@/views/deviceManagement/deviceTaskExecute/TheTaskExecuteView.vue"),
+        hidden: true,
+    },
+    // {
+    // 	path: '/qualityManagement/FQC/qualityStatistics',
+    // 	component: (resolve) => require(['@/views/qualityManagement/FQC/qualityStatistics.vue'], resolve),
+    // 	hidden: true
+    // },
+];
 
 export default new Router({
-  base: process.env.VUE_APP_ROUTER_PREFIX,
-  mode: 'history', // 去掉url中的#
-  // scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes,
-})
+    base: process.env.VUE_APP_ROUTER_PREFIX,
+    mode: "history", // 去掉url中的#
+    // scrollBehavior: () => ({ y: 0 }),
+    routes: constantRoutes,
+});
diff --git a/src/views/kanbanManagement/CarouselBoard/components/DeviceMonitoringCard.vue b/src/views/kanbanManagement/CarouselBoard/components/DeviceMonitoringCard.vue
new file mode 100644
index 0000000..dd5585b
--- /dev/null
+++ b/src/views/kanbanManagement/CarouselBoard/components/DeviceMonitoringCard.vue
@@ -0,0 +1,323 @@
+<template>
+  <div class="device-monitoring-card">
+    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 20px;">设备监控面板</div>
+    
+    <!-- 设备实时数据区域 -->
+    <div class="realtime-data-section">
+      <h3 style="margin-bottom: 15px; color: #303133;">设备实时数据</h3>
+      <div class="data-grid">
+        <div class="data-item" v-for="item in deviceData" :key="item.id">
+          <div class="data-label">{{ item.label }}</div>
+          <div class="data-value" :class="{ 'normal': item.status === 'normal', 'warning': item.status === 'warning', 'error': item.status === 'error' }">
+            {{ item.value }}{{ item.unit }}
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 设备报警记录区域 -->
+    <div class="alarm-record-section">
+      <h3 style="margin-bottom: 15px; color: #303133;">设备报警记录</h3>
+      <el-table 
+        :data="alarmRecords" 
+        style="width: 100%" 
+        border 
+        size="mini"
+        :height="tableHeight"
+      >
+        <el-table-column prop="id" label="编号" width="80"></el-table-column>
+        <el-table-column prop="type" label="报警类型" width="120">
+          <template slot-scope="scope">
+            <el-tag :type="getAlarmTypeColor(scope.row.type)">{{ scope.row.type }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="content" label="报警内容"></el-table-column>
+        <el-table-column prop="time" label="报警时间" width="150"></el-table-column>
+        <el-table-column prop="status" label="处理状态" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.status === '已处理' ? 'success' : 'danger'">{{ scope.row.status }}</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeviceMonitoringCard',
+  data() {
+    return {
+      tableHeight: '400px',
+      // 设备实时数据
+      deviceData: [
+        {
+          id: 1,
+          label: '底漆循环温度',
+          value: 45.2,
+          unit: '°C',
+          status: 'normal'
+        },
+        {
+          id: 2,
+          label: '底漆循环湿度',
+          value: 65.5,
+          unit: '%',
+          status: 'normal'
+        },
+        {
+          id: 3,
+          label: '色漆循环温度',
+          value: 52.1,
+          unit: '°C',
+          status: 'warning'
+        },
+        {
+          id: 4,
+          label: '色漆循环湿度',
+          value: 72.3,
+          unit: '%',
+          status: 'normal'
+        },
+        {
+          id: 5,
+          label: '清漆循环温度',
+          value: 48.7,
+          unit: '°C',
+          status: 'normal'
+        },
+        {
+          id: 6,
+          label: '清漆循环湿度',
+          value: 68.9,
+          unit: '%',
+          status: 'normal'
+        },
+        {
+          id: 7,
+          label: '纯水电导率',
+          value: 1.2,
+          unit: 'μS/cm',
+          status: 'normal'
+        },
+        {
+          id: 8,
+          label: '水份烘干温度',
+          value: 85.6,
+          unit: '°C',
+          status: 'normal'
+        },
+        {
+          id: 9,
+          label: '清漆烘干温度',
+          value: 135.8,
+          unit: '°C',
+          status: 'error'
+        }
+      ],
+      // 设备报警记录
+      alarmRecords: [
+        {
+          id: 'ALM-20240315-001',
+          type: '温度异常',
+          content: '清漆烘干温度超过阈值(130°C)',
+          time: '2024-03-15 14:25:30',
+          status: '未处理'
+        },
+        {
+          id: 'ALM-20240315-002',
+          type: '湿度异常',
+          content: '色漆循环湿度接近上限(75%)',
+          time: '2024-03-15 13:45:10',
+          status: '已处理'
+        },
+        {
+          id: 'ALM-20240315-003',
+          type: '设备故障',
+          content: '底漆循环泵压力异常',
+          time: '2024-03-15 11:30:45',
+          status: '已处理'
+        },
+        {
+          id: 'ALM-20240314-001',
+          type: '水质异常',
+          content: '纯水电导率偏高',
+          time: '2024-03-14 16:15:20',
+          status: '已处理'
+        },
+        {
+          id: 'ALM-20240314-002',
+          type: '温度异常',
+          content: '水份烘干温度波动较大',
+          time: '2024-03-14 10:05:50',
+          status: '已处理'
+        },
+        {
+          id: 'ALM-20240313-001',
+          type: '系统警告',
+          content: '压缩空气压力低于正常值',
+          time: '2024-03-13 15:40:15',
+          status: '已处理'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.handleResize()
+    window.addEventListener('resize', this.handleResize)
+    
+    // 模拟数据实时更新
+    this.startDataSimulation()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.simulationInterval) {
+      clearInterval(this.simulationInterval)
+    }
+  },
+  methods: {
+    // 处理窗口大小变化
+    handleResize() {
+      const windowHeight = window.innerHeight
+      this.tableHeight = Math.max(windowHeight * 0.35, 300) + 'px'
+    },
+    
+    // 根据报警类型获取标签颜色
+    getAlarmTypeColor(type) {
+      const colorMap = {
+        '温度异常': 'danger',
+        '湿度异常': 'warning',
+        '设备故障': 'danger',
+        '水质异常': 'warning',
+        '系统警告': 'info'
+      }
+      return colorMap[type] || 'info'
+    },
+    
+    // 模拟数据实时更新
+    startDataSimulation() {
+      this.simulationInterval = setInterval(() => {
+        this.deviceData.forEach(item => {
+          // 模拟数据小幅度波动
+          const variation = (Math.random() - 0.5) * 2
+          const newValue = Math.round((item.value + variation) * 10) / 10
+          
+          // 更新值
+          item.value = newValue
+          
+          // 根据值更新状态
+          this.updateDataStatus(item)
+        })
+      }, 5000) // 每5秒更新一次
+    },
+    
+    // 更新数据状态
+    updateDataStatus(item) {
+      // 根据不同参数设置不同的阈值
+      switch (item.id) {
+        case 1: // 底漆循环温度
+          item.status = item.value > 50 ? 'error' : item.value > 45 ? 'warning' : 'normal'
+          break
+        case 2: // 底漆循环湿度
+          item.status = item.value > 80 ? 'error' : item.value > 70 ? 'warning' : 'normal'
+          break
+        case 3: // 色漆循环温度
+          item.status = item.value > 55 ? 'error' : item.value > 50 ? 'warning' : 'normal'
+          break
+        case 4: // 色漆循环湿度
+          item.status = item.value > 80 ? 'error' : item.value > 70 ? 'warning' : 'normal'
+          break
+        case 5: // 清漆循环温度
+          item.status = item.value > 55 ? 'error' : item.value > 50 ? 'warning' : 'normal'
+          break
+        case 6: // 清漆循环湿度
+          item.status = item.value > 80 ? 'error' : item.value > 70 ? 'warning' : 'normal'
+          break
+        case 7: // 纯水电导率
+          item.status = item.value > 2.0 ? 'error' : item.value > 1.5 ? 'warning' : 'normal'
+          break
+        case 8: // 水份烘干温度
+          item.status = item.value > 90 ? 'error' : item.value > 80 ? 'warning' : 'normal'
+          break
+        case 9: // 清漆烘干温度
+          item.status = item.value > 130 ? 'error' : item.value > 125 ? 'warning' : 'normal'
+          break
+        default:
+          item.status = 'normal'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.device-monitoring-card {
+  padding: 20px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  height: 100%;
+  overflow: hidden;
+}
+
+.realtime-data-section,
+.alarm-record-section {
+  margin-bottom: 20px;
+}
+
+.data-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.data-item {
+  background: #f5f7fa;
+  padding: 15px;
+  border-radius: 8px;
+  text-align: center;
+  border: 1px solid #ebeef5;
+  transition: all 0.3s ease;
+}
+
+.data-item:hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.data-label {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 8px;
+}
+
+.data-value {
+  font-size: 24px;
+  font-weight: bold;
+  transition: color 0.3s ease;
+}
+
+.data-value.normal {
+  color: #67c23a;
+}
+
+.data-value.warning {
+  color: #e6a23c;
+}
+
+.data-value.error {
+  color: #f56c6c;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .data-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  }
+  
+  .data-value {
+    font-size: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue b/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
index c280697..e4f7472 100644
--- a/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
@@ -1,42 +1,150 @@
 <template>
   <div class="quality-statistics-card">
-    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">质量统计信息</div>
+    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">质量统计报表</div>
+    <div class="middle-data">
+      <span>{{ reportType_options[search.reportType].label }} 共 {{ realTotal }} 条</span>
+      <span style="margin-left: 20px">投入数:{{ totalQuantity }}</span>
+      <span style="margin-left: 20px">合格数:{{ totalQualifiedNumber }}</span>
+      <span style="margin-left: 20px">合格率:{{ passRate }}</span>
+      <span style="margin-left: 20px">抛光数:{{ totalPaoguangTotal }}</span>
+      <span style="margin-left: 20px">打磨数:{{ totalDamoTotal }}</span>
+      <span style="margin-left: 20px">报废数:{{ totalBaofeiTotal }}</span>
+      <span style="margin-left: 20px">倒车雷达:{{ parkingSensor }}</span>
+    </div>
     <el-table 
-      :data="qualityData" 
-      v-loading="loading" 
-      border 
-      style="width: 100%"
-      :height="tableHeight"
-    >
-      <el-table-column type="index" width="60"></el-table-column>
-      <el-table-column prop="fkWorkorderId" label="工单id" width="120"></el-table-column>
-      <el-table-column prop="productName" label="产品名称"></el-table-column>
-      <el-table-column prop="color" label="颜色" width="100"></el-table-column>
-      <el-table-column prop="require" label="投入数" width="80"></el-table-column>
-      <el-table-column prop="team" label="班组" width="80"></el-table-column>
-      <el-table-column prop="firstgoodNum" label="一次合格数量" width="120"></el-table-column>
-      <el-table-column prop="firstgoodRate" label="一次合格率" width="120"></el-table-column>
-      <el-table-column prop="finalgoodNum" label="最终合格数量" width="120"></el-table-column>
-      <el-table-column prop="finalgoodRate" label="最终合格率" width="120"></el-table-column>
-      <el-table-column prop="scrapNum" label="报废数" width="80"></el-table-column>
-      <el-table-column prop="scrapRate" label="报废率" width="80"></el-table-column>
+        border
+        :loading="loading"
+        :data="QualityStatisticsTable" 
+        size="mini" 
+        :height="tableHeight"
+        style="width: 100%"
+      >
+        <el-table-column prop="workorderId" label="工单号" width="140" sortable></el-table-column>
+        <el-table-column prop="finishedPartNumber" label="零件号" min-width="120" sortable></el-table-column>
+        <el-table-column prop="color" label="颜色" min-width="100" sortable></el-table-column>
+        <el-table-column prop="productDescription" label="描述" min-width="100"></el-table-column>
+        <el-table-column prop="team" label="班次" sortable></el-table-column>
+        <el-table-column prop="requireNumber" label="生  产  投  入  数" min-width="60"></el-table-column>
+        
+        <el-table-column prop="qualifiedNumber" label="合  格  数" min-width="60"></el-table-column>
+        <el-table-column label="合格率" min-width="70">
+          <template slot-scope="{ row }"> {{ offsetRate(row.qualifiedRate) }}% </template>
+        </el-table-column>
+        <el-table-column prop="paoguangTotal" label="抛光总数" min-width="60"></el-table-column>
+        <el-table-column prop="damoTotal" label="打磨总数" min-width="60"></el-table-column>
+        <el-table-column prop="baofeiTotal" label="报废总数" min-width="60"></el-table-column>
+        <el-table-column prop="startTime" label="开始时间" width="108" sortable></el-table-column>
+        <el-table-column prop="endTime" label="结束时间" width="108" sortable></el-table-column>
     </el-table>
   </div>
 </template>
 
 <script>
-import { QueryQualityStatisticsTable } from '@/api/qualityManagement/qualityStatistics.js'
+import { getQualityStatisticsCarouselBoardData } from '@/api/kanbanManagement/carouselBoard.js'
 
 export default {
   name: 'QualityStatisticsCard',
   data() {
     return {
       loading: false,
-      qualityData: [],
-      tableHeight: '700px'
+      QualityStatisticsTable: [],
+      tableHeight: '700px',
+      search: {
+        starttime: null,
+        endtime: null,
+        team: null,
+        workorderid: null,
+        partnumber: null,
+        sortType: 0,
+        reportType: 0,
+        product_description: '',
+      },
+      reportType_options: [
+        { label: '首检报表', value: 0 },
+        { label: '抛光报表', value: 1 },
+        { label: '包装报表', value: 2 },
+        { label: '总报表', value: 3 },
+      ],
+      pagination: {
+        total: 0,
+        pageNum: 1,
+        pageSize: 30,
+      },
+      realTotal: 0,
+      allDataList: [],
+      parkingSensor: 0
     }
   },
+  computed: {
+    // 过滤掉倒车雷达的数据
+    filteredDataList() {
+      return this.allDataList.filter(data => !data.productDescription.includes('倒车雷达'))
+    },
+    
+    // 投入数
+    totalQuantity() {
+      return Math.trunc(
+        this.filteredDataList.reduce((acc, data) => acc + (data.requireNumber || 0), 0) / 3
+      )
+    },
+    
+    // 合格数
+    totalQualifiedNumber() {
+      return Math.trunc(
+        this.filteredDataList.reduce((acc, data) => acc + (data.qualifiedNumber || 0), 0) / 3
+      )
+    },
+    // 抛光数
+    totalPaoguangTotal() {
+      return Math.trunc(
+        this.allDataList.reduce((acc, data) => {
+          let str = data.productDescription
+          if (!str || !str.includes('倒车雷达')) {
+            return acc + (data.paoguangTotal || 0)
+          } else {
+            return acc
+          }
+        }, 0) / 3,
+      )
+    },
+    // 打磨数
+    totalDamoTotal() {
+      return Math.trunc(
+        this.allDataList.reduce((acc, data) => {
+          let str = data.productDescription
+          if (!str || !str.includes('倒车雷达')) {
+            return acc + (data.damoTotal || 0)
+          } else {
+            return acc
+          }
+        }, 0) / 3,
+      )
+    },
+    // 报废数
+    totalBaofeiTotal() {
+      return Math.trunc(
+        this.allDataList.reduce((acc, data) => {
+          let str = data.productDescription
+          if (!str || !str.includes('倒车雷达')) {
+            return acc + (data.baofeiTotal || 0)
+          } else {
+            return acc
+          }
+        }, 0) / 3,
+      )
+    },
+    // 总合格率
+    passRate() {
+      let _totalQuantity = this.totalQuantity * 1.0
+      if (this.totalQuantity > 0) {
+        return ((this.totalQualifiedNumber / _totalQuantity) * 100).toFixed(1) + '%'
+      } else {
+        return '0%'
+      }
+    },
+  },
   mounted() {
+    this.init()
     this.getQualityData()
     // 监听窗口大小变化，调整表格高度
     window.addEventListener('resize', this.handleResize)
@@ -45,24 +153,40 @@ export default {
     window.removeEventListener('resize', this.handleResize)
   },
   methods: {
+    init() {
+      // 设置默认时间范围为今天
+      const today = new Date()
+      this.search.starttime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)
+      this.search.endtime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59)
+    },
+    // 合格率去除小数
+    offsetRate(num) {
+      if (num === null || num === '' || isNaN(num)) {
+        return '0'
+      }
+      return parseInt(num)
+    },
+    // 数据去除0
+    offsetValue(num) {
+      if (num === 0 || num === '0') {
+        return ''
+      }
+      return num
+    },
     getQualityData() {
       this.loading = true
-      // 获取今天的时间范围
-      const today = new Date()
-      const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)
-      const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59)
-      
-      const query = {
-        starttime: startOfDay,
-        endtime: endOfDay,
+      // 设置默认查询参数
+      let query = { 
+        ...this.search, 
         pageNum: 1,
         pageSize: 20
       }
       
-      QueryQualityStatisticsTable(query)
+      getQualityStatisticsCarouselBoardData(query)
         .then((res) => {
           if (res.code == 200) {
-            this.qualityData = res.data.item1 || []
+            this.QualityStatisticsTable = res.data || []
+            this.allDataList = res.data || []
           }
         })
         .finally(() => {
@@ -85,4 +209,14 @@ export default {
   border-radius: 4px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
+.middle-data {
+  width: 100%;
+  font-size: 14px;
+  color: #606266;
+  text-align: center;
+  margin: 0 auto 10px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/kanbanManagement/CarouselBoard/components/WmBlankInventoryCard.vue b/src/views/kanbanManagement/CarouselBoard/components/WmBlankInventoryCard.vue
index 55f04e3..360e1ca 100644
--- a/src/views/kanbanManagement/CarouselBoard/components/WmBlankInventoryCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/WmBlankInventoryCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wm-blank-inventory-card">
-    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">毛坯库存信息</div>
+    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">毛坯库存</div>
     <div style="text-align: center; margin-bottom: 10px;">
       <span style="font-size: 16px; color: #67c23a;">毛坯仓库零件数: {{ partTotal }}</span>
     </div>
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { listWmBlankInventory, getPartNumber } from '@/api/wmsManagement/wmBlankInventory.js'
+import { getBlankInventoryCarouselBoardData } from '@/api/kanbanManagement/carouselBoard.js'
 
 export default {
   name: 'WmBlankInventoryCard',
@@ -57,29 +57,18 @@ export default {
       
       // 查询库存数据
       const queryParams = {
-        pageNum: 1,
-        pageSize: 20,
-        type: 1,  // 默认显示毛坯类型
-        status: 1 // 默认显示启用状态
+        
       }
       
-      listWmBlankInventory(queryParams)
+      getBlankInventoryCarouselBoardData(queryParams)
         .then((res) => {
           if (res.code == 200) {
-            this.inventoryData = res.data.result || []
+            this.inventoryData = res.data || []
           }
         })
         .finally(() => {
           this.loading = false
         })
-      
-      // 获取零件总数
-      getPartNumber()
-        .then((res) => {
-          if (res.code === 200) {
-            this.partTotal = res.data || 0
-          }
-        })
     },
     handleResize() {
       const windowHeight = window.innerHeight
diff --git a/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue b/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
index 85e59a8..b642aaa 100644
--- a/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="workorder-online-card">
-    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">工单在线信息</div>
+    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">生产计划工单</div>
     <el-table 
       :data="workorderData" 
       v-loading="loading" 
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { getWorkoderList } from '@/api/productManagement/workorder_online.js'
+import { getWorkOrderCarouselBoardData } from '@/api/kanbanManagement/carouselBoard.js'
 
 export default {
   name: 'WorkorderOnlineCard',
@@ -70,17 +70,13 @@ export default {
       }
       
       const query = {
-        year: year,
-        week: week,
-        date: date,
-        pageNum: 1,
-        pageSize: 20
+
       }
       
-      getWorkoderList(query)
+      getWorkOrderCarouselBoardData(query)
         .then((res) => {
           if (res.code == 200) {
-            this.workorderData = res.data.item1 || []
+            this.workorderData = res.data || []
           }
         })
         .finally(() => {
diff --git a/src/views/kanbanManagement/CarouselBoard/index.vue b/src/views/kanbanManagement/CarouselBoard/index.vue
index 1361937..bf492ce 100644
--- a/src/views/kanbanManagement/CarouselBoard/index.vue
+++ b/src/views/kanbanManagement/CarouselBoard/index.vue
@@ -3,7 +3,7 @@
     <el-carousel
       ref="carousel"
       :interval="10000"
-      height="90vh"
+      height="95vh"
       arrow="never"
       indicator-position="bottom"
       autoplay
@@ -18,6 +18,9 @@
       <el-carousel-item>
         <WmBlankInventoryCard />
       </el-carousel-item>
+      <el-carousel-item>
+        <DeviceMonitoringCard />
+      </el-carousel-item>
     </el-carousel>
   </div>
 </template>
@@ -26,13 +29,15 @@
 import QualityStatisticsCard from './components/QualityStatisticsCard.vue'
 import WorkorderOnlineCard from './components/WorkorderOnlineCard.vue'
 import WmBlankInventoryCard from './components/WmBlankInventoryCard.vue'
+import DeviceMonitoringCard from './components/DeviceMonitoringCard.vue'
 
 export default {
   name: 'CarouselBoard',
   components: {
     QualityStatisticsCard,
     WorkorderOnlineCard,
-    WmBlankInventoryCard
+    WmBlankInventoryCard,
+    DeviceMonitoringCard
   },
   mounted() {
     // 可以在这里添加一些初始化逻辑