feat(看板管理): 新增轮播看板功能及三个数据展示卡片

新增轮播看板组件，包含质量统计、工单在线和毛坯库存三个数据展示卡片每个卡片实现数据获取、表格展示和响应式高度调整功能
2025-10-23 17:50:22 +08:00
parent e4f4023338
commit 384e32cae8
5 changed files with 367 additions and 0 deletions
--- a/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/QualityStatisticsCard.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="quality-statistics-card">
+    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">质量统计信息</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>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { QueryQualityStatisticsTable } from '@/api/qualityManagement/qualityStatistics.js'
+
+export default {
+  name: 'QualityStatisticsCard',
+  data() {
+    return {
+      loading: false,
+      qualityData: [],
+      tableHeight: '700px'
+    }
+  },
+  mounted() {
+    this.getQualityData()
+    // 监听窗口大小变化，调整表格高度
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    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,
+        pageNum: 1,
+        pageSize: 20
+      }
+      
+      QueryQualityStatisticsTable(query)
+        .then((res) => {
+          if (res.code == 200) {
+            this.qualityData = res.data.item1 || []
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleResize() {
+      // 简单的响应式调整
+      const windowHeight = window.innerHeight
+      this.tableHeight = Math.max(windowHeight * 0.7, 500) + 'px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.quality-statistics-card {
+  padding: 10px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>