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>
--- a/src/views/kanbanManagement/CarouselBoard/components/WmBlankInventoryCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/WmBlankInventoryCard.vue
@@ -0,0 +1,99 @@
+<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; margin-bottom: 10px;">
+      <span style="font-size: 16px; color: #67c23a;">毛坯仓库零件数: {{ partTotal }}</span>
+    </div>
+    <el-table 
+      :data="inventoryData" 
+      v-loading="loading" 
+      border 
+      style="width: 100%"
+      :height="tableHeight"
+    >
+      <el-table-column prop="blankNum" label="毛坯号" width="160"></el-table-column>
+      <el-table-column prop="description" label="产品描述"></el-table-column>
+      <el-table-column prop="specification" label="规格" width="120"></el-table-column>
+      <el-table-column prop="quantity" label="库存数量" width="100" align="center"></el-table-column>
+      <el-table-column prop="type" label="类别" width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag effect="plain" v-if="scope.row.type === 1" type="primary">毛坯</el-tag>
+          <el-tag effect="plain" v-if="scope.row.type === 2" type="warning">返工件</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag effect="plain" v-if="scope.row.status === 0" type="info">停用</el-tag>
+          <el-tag effect="plain" v-if="scope.row.status === 1" type="success">启用</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { listWmBlankInventory, getPartNumber } from '@/api/wmsManagement/wmBlankInventory.js'
+
+export default {
+  name: 'WmBlankInventoryCard',
+  data() {
+    return {
+      loading: false,
+      inventoryData: [],
+      partTotal: 0,
+      tableHeight: '700px'
+    }
+  },
+  mounted() {
+    this.getInventoryData()
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    getInventoryData() {
+      this.loading = true
+      
+      // 查询库存数据
+      const queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        type: 1,  // 默认显示毛坯类型
+        status: 1 // 默认显示启用状态
+      }
+      
+      listWmBlankInventory(queryParams)
+        .then((res) => {
+          if (res.code == 200) {
+            this.inventoryData = res.data.result || []
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+      
+      // 获取零件总数
+      getPartNumber()
+        .then((res) => {
+          if (res.code === 200) {
+            this.partTotal = res.data || 0
+          }
+        })
+    },
+    handleResize() {
+      const windowHeight = window.innerHeight
+      this.tableHeight = Math.max(windowHeight * 0.7, 500) + 'px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.wm-blank-inventory-card {
+  padding: 10px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>
--- a/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
+++ b/src/views/kanbanManagement/CarouselBoard/components/WorkorderOnlineCard.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="workorder-online-card">
+    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">工单在线信息</div>
+    <el-table 
+      :data="workorderData" 
+      v-loading="loading" 
+      border 
+      style="width: 100%"
+      :height="tableHeight"
+    >
+      <el-table-column type="index" width="60"></el-table-column>
+      <el-table-column prop="clientWorkorder" label="工单号" width="130"></el-table-column>
+      <el-table-column prop="blankNumber" label="毛坯号" width="120"></el-table-column>
+      <el-table-column prop="finishedPartNumber" label="成品零件号" width="150"></el-table-column>
+      <el-table-column prop="productDescription" label="产品描述"></el-table-column>
+      <el-table-column prop="colour" label="颜色" width="100"></el-table-column>
+      <el-table-column prop="specifications" label="规格" width="100"></el-table-column>
+      <el-table-column prop="vehicleNumber" label="车数" width="80"></el-table-column>
+      <el-table-column prop="previousNumber" label="上件数" width="80"></el-table-column>
+      <el-table-column prop="remark3" label="状态" width="100">
+        <template slot-scope="scope">
+          <el-tag size="small" v-if="scope.row.status === 2" type="success">已完成</el-tag>
+          <el-tag size="small" v-else-if="scope.row.status === 1" type="warning">进行中</el-tag>
+          <el-tag size="small" v-else type="info">未开始</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getWorkoderList } from '@/api/productManagement/workorder_online.js'
+
+export default {
+  name: 'WorkorderOnlineCard',
+  data() {
+    return {
+      loading: false,
+      workorderData: [],
+      tableHeight: '700px'
+    }
+  },
+  mounted() {
+    this.getWorkorderData()
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    getWorkorderData() {
+      this.loading = true
+      // 获取今天的数据
+      const today = this.$dayjs ? this.$dayjs() : new Date()
+      let year, week, date
+      
+      if (this.$dayjs) {
+        year = today.year()
+        week = today.week()
+        // 将0(周日)转为7
+        date = '' + (today.day() === 0 ? 7 : today.day())
+      } else {
+        // 兼容不使用dayjs的情况
+        const now = new Date()
+        year = now.getFullYear()
+        // 简化的周计算
+        const onejan = new Date(now.getFullYear(), 0, 1)
+        week = Math.ceil((((now - onejan) / 86400000) + onejan.getDay() + 1) / 7)
+        date = '' + (now.getDay() === 0 ? 7 : now.getDay())
+      }
+      
+      const query = {
+        year: year,
+        week: week,
+        date: date,
+        pageNum: 1,
+        pageSize: 20
+      }
+      
+      getWorkoderList(query)
+        .then((res) => {
+          if (res.code == 200) {
+            this.workorderData = res.data.item1 || []
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleResize() {
+      const windowHeight = window.innerHeight
+      this.tableHeight = Math.max(windowHeight * 0.7, 500) + 'px'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.workorder-online-card {
+  padding: 10px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>
--- a/src/views/kanbanManagement/CarouselBoard/index.vue
+++ b/src/views/kanbanManagement/CarouselBoard/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="carousel-board-container">
+    <el-carousel
+      ref="carousel"
+      :interval="10000"
+      height="90vh"
+      arrow="never"
+      indicator-position="bottom"
+      autoplay
+      class="dashboard-carousel"
+    >
+      <el-carousel-item>
+        <QualityStatisticsCard />
+      </el-carousel-item>
+      <el-carousel-item>
+        <WorkorderOnlineCard />
+      </el-carousel-item>
+      <el-carousel-item>
+        <WmBlankInventoryCard />
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import QualityStatisticsCard from './components/QualityStatisticsCard.vue'
+import WorkorderOnlineCard from './components/WorkorderOnlineCard.vue'
+import WmBlankInventoryCard from './components/WmBlankInventoryCard.vue'
+
+export default {
+  name: 'CarouselBoard',
+  components: {
+    QualityStatisticsCard,
+    WorkorderOnlineCard,
+    WmBlankInventoryCard
+  },
+  mounted() {
+    // 可以在这里添加一些初始化逻辑
+    console.log('Carousel board initialized')
+  },
+  methods: {
+    // 可以添加一些控制轮播的方法
+    nextSlide() {
+      this.$refs.carousel.next()
+    },
+    prevSlide() {
+      this.$refs.carousel.prev()
+    },
+    pause() {
+      this.$refs.carousel.pause()
+    },
+    play() {
+      this.$refs.carousel.play()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.carousel-board-container {
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  background-color: #f5f7fa;
+}
+
+.dashboard-carousel {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* 隐藏轮播指示器，因为在大屏幕看板上可能不需要 */
+
+</style>