生产总览-页面需求调整

src/views/productManagement/productionSummary/components/DeliveryStatusTable.vue

@@ -0,0 +1,369 @@
+<template>
+  <el-card class="box-card">
+    <!-- 合并标题区域和筛选区域 -->
+    <div class="header-container">
+      <div class="left">
+        <span class="title">发货状态</span>
+        <span class="update-time" v-if="updateTime">{{ updateTime }}更新</span>
+      </div>
+      <div class="right">
+        <div class="filter-group">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="发货状态"
+            clearable
+            class="filter-item"
+            size="small"
+            style="width: 120px"
+          >
+            <el-option label="未发货" value="未发货" />
+            <el-option label="部分发货" value="部分发货" />
+            <el-option label="已发货待服务" value="已发货待服务" />
+          </el-select>
+
+          <el-input
+            v-model="queryParams.customerName"
+            placeholder="客户名称（模糊搜索）"
+            class="filter-item"
+            size="small"
+            style="width: 180px"
+            clearable
+          />
+
+          <el-button
+            type="primary"
+            size="small"
+            class="filter-item search-btn"
+            @click="handleFilter"
+            style="height: 32px; padding: 0 30px; line-height: 30px"
+            >查询</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <div class="table-container">
+      <el-table
+        v-loading="loading"
+        :data="displayData"
+        style="width: 100%"
+        border
+        size="small"
+      >
+        <el-table-column
+          prop="status"
+          label="发货状态"
+          width="100"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-tag
+              :type="getStatusType(scope.row.status)"
+              size="mini"
+              effect="plain"
+            >
+              {{ scope.row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="customerName"
+          label="客户名称"
+          min-width="120"
+          align="center"
+        />
+        <el-table-column
+          prop="contractNo"
+          label="合同编号"
+          width="120"
+          align="center"
+        />
+        <el-table-column
+          prop="productName"
+          label="货品名称"
+          min-width="120"
+          align="center"
+        />
+        <el-table-column
+          prop="orderQuantity"
+          label="订单量"
+          width="100"
+          align="center"
+        />
+        <el-table-column
+          prop="shippedQuantity"
+          label="发货量"
+          width="100"
+          align="center"
+        />
+        <el-table-column
+          prop="deliveryNo"
+          label="发货单号"
+          width="120"
+          align="center"
+        />
+        <el-table-column
+          prop="deliveryTime"
+          label="发货时间"
+          width="160"
+          align="center"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.deliveryTime || "-" }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "DeliveryStatusTable",
+  data() {
+    return {
+      loading: false,
+      updateTime: "",
+      queryParams: {
+        status: "未发货",
+        customerName: "",
+      },
+      // 发货状态示例数据
+      defaultData: [
+        {
+          customerName: "和林牧场",
+          contractNo: "111111111",
+          productName: "智能游环",
+          status: "未发货",
+          orderQuantity: 1000,
+          shippedQuantity: 0,
+          deliveryNo: "",
+          deliveryTime: null,
+        },
+        {
+          customerName: "赛宇牧场",
+          contractNo: "111111111",
+          productName: "智能喷淋",
+          status: "未发货",
+          orderQuantity: 10,
+          shippedQuantity: 0,
+          deliveryNo: "",
+          deliveryTime: null,
+        },
+        {
+          customerName: "和林牧场",
+          contractNo: "2222222",
+          productName: "精准铜喷",
+          status: "部分发货",
+          orderQuantity: 2,
+          shippedQuantity: 0,
+          deliveryNo: "",
+          deliveryTime: null,
+        },
+        {
+          customerName: "赛宇牧场",
+          contractNo: "333333",
+          productName: "体况评分",
+          status: "部分发货",
+          orderQuantity: 5,
+          shippedQuantity: 0,
+          deliveryNo: "",
+          deliveryTime: null,
+        },
+        {
+          customerName: "和林牧场",
+          contractNo: "444",
+          productName: "显示大屏",
+          status: "已发货",
+          orderQuantity: 10,
+          shippedQuantity: 3,
+          deliveryNo: "5555555",
+          deliveryTime: "2025-02",
+        },
+        {
+          customerName: "赛宇牧场",
+          contractNo: "5555",
+          productName: "车载控制器",
+          status: "已发货",
+          orderQuantity: 2,
+          shippedQuantity: 1,
+          deliveryNo: "6666666",
+          deliveryTime: "2025-02",
+        },
+      ],
+    };
+  },
+  computed: {
+    displayData() {
+      let data = [...this.defaultData];
+
+      // 根据筛选条件过滤数据
+      if (this.queryParams.status) {
+        data = data.filter((item) => item.status === this.queryParams.status);
+      }
+      if (this.queryParams.customerName) {
+        const keyword = this.queryParams.customerName.toLowerCase();
+        data = data.filter((item) =>
+          item.customerName.toLowerCase().includes(keyword)
+        );
+      }
+
+      return data;
+    },
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    getStatusType(status) {
+      switch (status) {
+        case "已发货":
+          return "success";
+        case "部分发货":
+          return "warning";
+        case "未发货":
+          return "info";
+        default:
+          return "info";
+      }
+    },
+    async initData() {
+      try {
+        await this.fetchTableData();
+      } catch (error) {
+        console.error("初始化数据失败:", error);
+      }
+    },
+    async fetchTableData() {
+      try {
+        this.loading = true;
+        // 模拟接口调用
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        // 更新时间
+        const now = new Date();
+        const month = (now.getMonth() + 1).toString().padStart(2, "0");
+        const day = now.getDate().toString().padStart(2, "0");
+        const hours = now.getHours().toString().padStart(2, "0");
+        const minutes = now.getMinutes().toString().padStart(2, "0");
+        const seconds = now.getSeconds().toString().padStart(2, "0");
+        this.updateTime = `${month}/${day} ${hours}:${minutes}:${seconds}`;
+      } catch (error) {
+        console.error("获取发货状态列表失败:", error);
+        this.$message.error("获取发货状态列表失败");
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleFilter() {
+      this.fetchTableData();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  margin-top: 24px;
+
+  .header-container {
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      display: flex;
+      align-items: center;
+      min-width: 200px;
+
+      .title {
+        font-size: 13px;
+        color: #333;
+      }
+
+      .update-time {
+        margin-left: 8px;
+        font-size: 13px;
+        color: #666;
+      }
+    }
+
+    .right {
+      flex: 1;
+      display: flex;
+      justify-content: flex-start;
+      padding-left: 40px;
+
+      .filter-group {
+        display: flex;
+        align-items: center;
+
+        .filter-item {
+          margin-left: 8px;
+          &:first-child {
+            margin-left: 0;
+          }
+        }
+
+        .search-btn {
+          font-size: 12px;
+          border-radius: 3px;
+          background: linear-gradient(to right, #409eff, #3a8ee6);
+          border: none;
+          transition: all 0.3s ease;
+
+          &:hover {
+            background: linear-gradient(to right, #66b1ff, #409eff);
+            transform: translateY(-1px);
+          }
+
+          &:active {
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+  }
+
+  :deep(.el-card__body) {
+    padding: 15px;
+  }
+
+  :deep(.el-select .el-input__inner) {
+    height: 32px;
+    line-height: 32px;
+  }
+
+  :deep(.el-input__inner) {
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+  }
+}
+
+.table-container {
+  position: relative;
+}
+
+:deep(.el-table) {
+  font-size: 12px;
+
+  .el-table__header th {
+    padding: 8px 0;
+    background-color: #f5f7fa;
+    color: #606266;
+    font-weight: 500;
+  }
+
+  .el-table__body td {
+    padding: 8px 0;
+  }
+
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+</style>

src/views/productManagement/productionSummary/components/OrderProductionTable.vue

@@ -0,0 +1,482 @@
+<template>
+  <el-card class="box-card">
+    <div class="header-container">
+      <div class="left">
+        <span class="title">生产概况</span>
+        <span class="update-time" v-if="updateTime">{{ updateTime }}</span>
+      </div>
+      <div class="right">
+        <div class="filter-group">
+          <slot name="query-buttons"></slot>
+        </div>
+      </div>
+    </div>
+    <div class="table-container">
+      <el-table
+        v-loading="loading"
+        :data="displayData"
+        style="width: 100%"
+        border
+        size="small"
+        @sort-change="handleSortChange"
+      >
+        <el-table-column
+          prop="orderNo"
+          label="订单编号"
+          width="110"
+          align="center"
+        />
+        <el-table-column
+          prop="productName"
+          label="货品名称"
+          min-width="110"
+          align="center"
+          sortable="custom"
+        />
+        <el-table-column
+          prop="process"
+          label="工序"
+          width="100"
+          align="center"
+        />
+        <el-table-column
+          prop="status"
+          label="单据状态"
+          width="100"
+          align="center"
+          sortable="custom"
+        >
+          <template slot-scope="scope">
+            <el-tag
+              :type="getStatusType(scope.row.status)"
+              size="mini"
+              effect="plain"
+            >
+              {{ scope.row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="progress"
+          label="进度"
+          width="250"
+          align="center"
+          sortable="custom"
+        >
+          <template slot-scope="scope">
+            <div class="progress-wrapper">
+              <div class="progress-container">
+                <div class="progress-bar">
+                  <div class="custom-progress">
+                    <div
+                      class="progress-inner"
+                      :style="{
+                        width:
+                          Math.round(
+                            (scope.row.progress / scope.row.total) * 100
+                          ) + '%',
+                        backgroundColor: getProgressColor(scope.row.status),
+                      }"
+                    >
+                      <span class="progress-text">
+                        {{ scope.row.progress }}
+                      </span>
+                    </div>
+                    <span class="total-text"> {{ scope.row.total }} </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="total"
+          label="计划量"
+          width="75"
+          align="center"
+        />
+        <el-table-column
+          prop="finished"
+          label="已完成量"
+          width="85"
+          align="center"
+        />
+        <el-table-column
+          prop="unfinished"
+          label="未完成量"
+          width="85"
+          align="center"
+        />
+        <el-table-column
+          prop="yesterdayFinished"
+          label="昨日完成量"
+          width="95"
+          align="center"
+        />
+        <el-table-column
+          prop="todayFinished"
+          label="今日完成量"
+          width="95"
+          align="center"
+        />
+        <el-table-column
+          prop="rate"
+          label="完成率"
+          width="100"
+          align="center"
+          sortable="custom"
+        >
+          <template slot-scope="scope">
+            {{
+              ((scope.row.finished / scope.row.total) * 100).toFixed(1) + "%"
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="producer"
+          label="生产人员"
+          width="100"
+          align="center"
+        />
+        <el-table-column
+          prop="remainingDays"
+          label="距离完成时间还剩"
+          width="130"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span
+              :style="{ color: scope.row.remainingDays < 0 ? '#F56C6C' : '' }"
+            >
+              {{
+                scope.row.remainingDays > 0
+                  ? scope.row.remainingDays + "天"
+                  : "超期" + Math.abs(scope.row.remainingDays) + "天"
+              }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="expand-button" v-if="tableData.length > 5">
+        <el-button
+          type="text"
+          @click="isExpanded = !isExpanded"
+          class="expand-btn"
+        >
+          <div class="button-content">
+            <i :class="['el-icon-arrow-' + (isExpanded ? 'up' : 'down')]"></i>
+            <span class="expand-text">{{
+              isExpanded ? "收起" : "展开更多"
+            }}</span>
+          </div>
+        </el-button>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "OrderProductionTable",
+  data() {
+    return {
+      loading: false,
+      isExpanded: true,
+      localTableData: [],
+      sortConfig: {
+        prop: "",
+        order: "",
+      },
+      orderDefaultData: [
+        {
+          orderNo: "DD20240001",
+          productName: "包装材料A型",
+          process: "包装",
+          status: "进行中",
+          progress: 900,
+          total: 4000,
+          finished: 900,
+          unfinished: 3100,
+          yesterdayFinished: 100,
+          todayFinished: 50,
+          rate: "22.5%",
+          producer: "张三",
+          remainingDays: 7,
+        },
+        // ... 其他订单数据
+      ],
+    };
+  },
+  props: {
+    updateTime: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    tableData() {
+      let data =
+        this.localTableData.length > 0
+          ? this.localTableData
+          : this.orderDefaultData;
+
+      if (this.sortConfig.prop && this.sortConfig.order) {
+        const { prop, order } = this.sortConfig;
+        data = data.sort((a, b) => {
+          let aValue = a[prop];
+          let bValue = b[prop];
+
+          if (prop === "rate") {
+            aValue = (a.finished / a.total) * 100;
+            bValue = (b.finished / b.total) * 100;
+          }
+
+          return order === "ascending"
+            ? aValue > bValue
+              ? 1
+              : -1
+            : aValue < bValue
+            ? 1
+            : -1;
+        });
+      }
+
+      return data;
+    },
+    displayData() {
+      return this.isExpanded ? this.tableData : this.tableData.slice(0, 5);
+    },
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    getStatusType(status) {
+      switch (status) {
+        case "进行中":
+          return "primary";
+        case "已超期":
+          return "danger";
+        case "未开始":
+          return "info";
+        default:
+          return "info";
+      }
+    },
+    getProgressColor(status) {
+      switch (status) {
+        case "进行中":
+          return "#409EFF";
+        case "已超期":
+          return "#F56C6C";
+        case "未开始":
+          return "#909399";
+        default:
+          return "#909399";
+      }
+    },
+    async initData() {
+      try {
+        await this.fetchTableData();
+      } catch (error) {
+        console.error("初始化数据失败:", error);
+      }
+    },
+    async fetchTableData() {
+      try {
+        this.loading = true;
+        // TODO: 后端接口完成后替换此处
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        this.localTableData = this.orderDefaultData;
+        this.$emit("data-loaded");
+      } catch (error) {
+        console.error("获取生产列表失败:", error);
+        this.$message.error("获取生产列表失败");
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleSortChange({ prop, order }) {
+      this.sortConfig = { prop, order };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+
+  .header-container {
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      display: flex;
+      align-items: center;
+      min-width: 200px;
+
+      .title {
+        font-size: 13px;
+        color: #333;
+      }
+
+      .update-time {
+        margin-left: 8px;
+        font-size: 13px;
+        color: #666;
+      }
+    }
+
+    .right {
+      flex: 1;
+      display: flex;
+      justify-content: flex-start;
+      padding-left: 40px;
+
+      .filter-group {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  :deep(.el-card__body) {
+    padding: 16px;
+    transition: all 0.3s ease;
+  }
+}
+
+.table-container {
+  position: relative;
+  padding-bottom: 0;
+}
+
+.expand-button {
+  text-align: center;
+  border-top: 1px solid #ebeef5;
+  margin-top: -1px;
+
+  .el-button {
+    font-size: 13px;
+    color: #909399;
+    padding: 8px;
+
+    .button-content {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+
+      i {
+        font-size: 12px;
+        color: #c0c4cc;
+        transition: all 0.3s;
+      }
+
+      .expand-text {
+        max-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        transition: all 0.3s ease-in-out;
+        opacity: 0;
+      }
+    }
+
+    &:hover {
+      color: #409eff;
+
+      .button-content {
+        i {
+          color: #409eff;
+          margin-right: 4px;
+        }
+
+        .expand-text {
+          max-width: 100px;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+.progress-wrapper {
+  padding: 6px 0;
+
+  .progress-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .progress-bar {
+      width: 100%;
+      padding: 0 20px;
+
+      .custom-progress {
+        width: 100%;
+        height: 12px;
+        background-color: #ebeef5;
+        border-radius: 100px;
+        overflow: visible;
+        position: relative;
+
+        .progress-inner {
+          height: 100%;
+          transition: all 0.3s ease;
+          border-radius: 100px;
+          position: relative;
+          min-width: 30px;
+
+          .progress-text {
+            position: absolute;
+            right: 6px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: #fff;
+            font-size: 10px;
+            line-height: 1;
+            text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+            white-space: nowrap;
+          }
+        }
+
+        .total-text {
+          position: absolute;
+          right: 6px;
+          top: 50%;
+          transform: translateY(-50%);
+          color: #606266;
+          font-size: 10px;
+          line-height: 1;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+
+:deep(.el-table) {
+  font-size: 12px;
+
+  .el-table__header th {
+    padding: 8px 0;
+    background-color: #f5f7fa;
+  }
+
+  .el-table__body td {
+    padding: 8px 0;
+  }
+
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+:deep(.el-table__body-wrapper) {
+  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>

src/views/productManagement/productionSummary/components/ProductProductionTable.vue

@@ -0,0 +1,492 @@
+<template>
+  <el-card class="box-card">
+    <div class="header-container">
+      <div class="left">
+        <span class="title">生产概况</span>
+        <span class="update-time" v-if="updateTime">{{ updateTime }}</span>
+      </div>
+      <div class="right">
+        <div class="filter-group">
+          <slot name="query-buttons"></slot>
+        </div>
+      </div>
+    </div>
+    <div class="table-container">
+      <el-table
+        v-loading="loading"
+        :data="displayData"
+        style="width: 100%"
+        border
+        size="small"
+        @sort-change="handleSortChange"
+      >
+        <el-table-column
+          prop="productName"
+          label="货品名称"
+          min-width="110"
+          align="center"
+          sortable="custom"
+        />
+        <el-table-column
+          prop="status"
+          label="货品状态"
+          width="100"
+          align="center"
+          sortable="custom"
+        >
+          <template slot-scope="scope">
+            <el-tag
+              :type="getStatusType(scope.row.status)"
+              size="mini"
+              effect="plain"
+            >
+              {{ scope.row.status }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="progress"
+          label="进度"
+          width="250"
+          align="center"
+          sortable="custom"
+        >
+          <template slot-scope="scope">
+            <div class="progress-wrapper">
+              <div class="progress-container">
+                <div class="progress-bar">
+                  <div class="custom-progress">
+                    <div
+                      class="progress-inner"
+                      :style="{
+                        width:
+                          Math.round(
+                            (scope.row.progress / scope.row.total) * 100
+                          ) + '%',
+                        backgroundColor: getProgressColor(scope.row.status),
+                      }"
+                    >
+                      <span class="progress-text">
+                        {{
+                          Math.round(
+                            (scope.row.progress / scope.row.total) * 100
+                          )
+                        }}%
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="total"
+          label="计划量"
+          width="75"
+          align="center"
+        />
+        <el-table-column
+          prop="finished"
+          label="已完成量"
+          width="85"
+          align="center"
+        />
+        <el-table-column
+          prop="unfinished"
+          label="未完成量"
+          width="85"
+          align="center"
+        />
+        <el-table-column
+          prop="yesterdayFinished"
+          label="昨日完成量"
+          width="95"
+          align="center"
+        />
+        <el-table-column
+          prop="todayFinished"
+          label="今日完成量"
+          width="95"
+          align="center"
+        />
+        <el-table-column
+          prop="rate"
+          label="完成率"
+          width="100"
+          align="center"
+          sortable="custom"
+        >
+          <template slot-scope="scope">
+            {{
+              ((scope.row.finished / scope.row.total) * 100).toFixed(1) + "%"
+            }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="expand-button" v-if="tableData.length > 5">
+        <el-button
+          type="text"
+          @click="isExpanded = !isExpanded"
+          class="expand-btn"
+        >
+          <div class="button-content">
+            <i :class="['el-icon-arrow-' + (isExpanded ? 'up' : 'down')]"></i>
+            <span class="expand-text">{{
+              isExpanded ? "收起" : "展开更多"
+            }}</span>
+          </div>
+        </el-button>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "ProductProductionTable",
+  data() {
+    return {
+      loading: false,
+      isExpanded: true,
+      localTableData: [],
+      sortConfig: {
+        prop: "",
+        order: "",
+      },
+      productDefaultData: [
+        {
+          productName: "智能游环",
+          status: "进行中",
+          progress: 900,
+          total: 4000,
+          finished: 900,
+          unfinished: 3100,
+          yesterdayFinished: 3100,
+          todayFinished: 3100,
+          rate: "22.5%",
+        },
+        {
+          productName: "智能喷淋",
+          status: "进行中",
+          progress: 170,
+          total: 350,
+          finished: 170,
+          unfinished: 180,
+          yesterdayFinished: 180,
+          todayFinished: 180,
+          rate: "48.5%",
+        },
+        {
+          productName: "精准铜喷",
+          status: "进行中",
+          progress: 180,
+          total: 200,
+          finished: 180,
+          unfinished: 20,
+          yesterdayFinished: 20,
+          todayFinished: 20,
+          rate: "90%",
+        },
+        {
+          productName: "休闲评分",
+          status: "已超期",
+          progress: 70,
+          total: 150,
+          finished: 70,
+          unfinished: 80,
+          yesterdayFinished: 80,
+          todayFinished: 80,
+          rate: "46.6%",
+        },
+        {
+          productName: "显示大屏",
+          status: "进行中",
+          progress: 1,
+          total: 30,
+          finished: 1,
+          unfinished: 29,
+          yesterdayFinished: 29,
+          todayFinished: 29,
+          rate: "3%",
+        },
+        {
+          productName: "车载控制器",
+          status: "未开始",
+          progress: 0,
+          total: 50,
+          finished: 0,
+          unfinished: 50,
+          yesterdayFinished: 50,
+          todayFinished: 50,
+          rate: "0%",
+        },
+      ],
+    };
+  },
+  props: {
+    updateTime: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    tableData() {
+      let data =
+        this.localTableData.length > 0
+          ? this.localTableData
+          : this.productDefaultData;
+
+      if (this.sortConfig.prop && this.sortConfig.order) {
+        const { prop, order } = this.sortConfig;
+        data = data.sort((a, b) => {
+          let aValue = a[prop];
+          let bValue = b[prop];
+
+          if (prop === "rate") {
+            aValue = (a.finished / a.total) * 100;
+            bValue = (b.finished / b.total) * 100;
+          }
+
+          return order === "ascending"
+            ? aValue > bValue
+              ? 1
+              : -1
+            : aValue < bValue
+            ? 1
+            : -1;
+        });
+      }
+
+      return data;
+    },
+    displayData() {
+      return this.isExpanded ? this.tableData : this.tableData.slice(0, 5);
+    },
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    getStatusType(status) {
+      switch (status) {
+        case "进行中":
+          return "primary";
+        case "已超期":
+          return "danger";
+        case "未开始":
+          return "info";
+        default:
+          return "info";
+      }
+    },
+    getProgressColor(status) {
+      switch (status) {
+        case "进行中":
+          return "#409EFF";
+        case "已超期":
+          return "#F56C6C";
+        case "未开始":
+          return "#909399";
+        default:
+          return "#909399";
+      }
+    },
+    async initData() {
+      try {
+        await this.fetchTableData();
+      } catch (error) {
+        console.error("初始化数据失败:", error);
+      }
+    },
+    async fetchTableData() {
+      try {
+        this.loading = true;
+        // TODO: 后端接口完成后替换此处
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        this.localTableData = this.productDefaultData;
+        this.$emit("data-loaded");
+      } catch (error) {
+        console.error("获取生产列表失败:", error);
+        this.$message.error("获取生产列表失败");
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleSortChange({ prop, order }) {
+      this.sortConfig = { prop, order };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+
+  .header-container {
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      display: flex;
+      align-items: center;
+      min-width: 200px;
+
+      .title {
+        font-size: 13px;
+        color: #333;
+      }
+
+      .update-time {
+        margin-left: 8px;
+        font-size: 13px;
+        color: #666;
+      }
+    }
+
+    .right {
+      flex: 1;
+      display: flex;
+      justify-content: flex-start;
+      padding-left: 40px;
+
+      .filter-group {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .el-card__header {
+    padding: 16px 20px;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  :deep(.el-card__body) {
+    padding: 16px;
+    transition: all 0.3s ease;
+  }
+}
+
+.table-container {
+  position: relative;
+  padding-bottom: 0;
+}
+
+.expand-button {
+  text-align: center;
+  border-top: 1px solid #ebeef5;
+  margin-top: -1px;
+
+  .el-button {
+    font-size: 13px;
+    color: #909399;
+    padding: 8px;
+
+    .button-content {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+
+      i {
+        font-size: 12px;
+        color: #c0c4cc;
+        transition: all 0.3s;
+      }
+
+      .expand-text {
+        max-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        transition: all 0.3s ease-in-out;
+        opacity: 0;
+      }
+    }
+
+    &:hover {
+      color: #409eff;
+
+      .button-content {
+        i {
+          color: #409eff;
+          margin-right: 4px;
+        }
+
+        .expand-text {
+          max-width: 100px;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+.progress-wrapper {
+  padding: 6px 0;
+
+  .progress-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .progress-bar {
+      width: 100%;
+      padding: 0 20px;
+
+      .custom-progress {
+        width: 100%;
+        height: 12px;
+        background-color: #ebeef5;
+        border-radius: 100px;
+        overflow: hidden;
+        position: relative;
+
+        .progress-inner {
+          height: 100%;
+          transition: all 0.3s ease;
+          border-radius: 100px;
+          position: relative;
+          min-width: 30px;
+
+          .progress-text {
+            position: absolute;
+            right: 6px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: #fff;
+            font-size: 10px;
+            line-height: 1;
+            text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+          }
+        }
+      }
+    }
+  }
+}
+
+:deep(.el-table) {
+  font-size: 12px;
+
+  .el-table__header th {
+    padding: 8px 0;
+    background-color: #f5f7fa;
+  }
+
+  .el-table__body td {
+    padding: 8px 0;
+  }
+
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+:deep(.el-table__body-wrapper) {
+  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>

src/views/productManagement/productionSummary/components/ProductionTable.vue

@@ -1,35 +1,100 @@
 <template>
   <el-card class="box-card">
     <div slot="header" class="clearfix">
-      <div style="display: flex; justify-content: space-between; align-items: center;">
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        "
+      >
         <div>
-          <span style="font-size: 13px;">生产概况</span>
-          <span style="margin-left: 8px; font-size: 13px; color: #666;">{{ updateTime }}</span>
+          <span style="font-size: 13px">生产概况</span>
+          <span style="margin-left: 8px; font-size: 13px; color: #666">{{
+            updateTime
+          }}</span>
+        </div>
+        <div class="query-buttons">
+          <el-button-group>
+            <el-button
+              type="primary"
+              size="small"
+              :plain="queryType !== 'order'"
+              @click="queryType = 'order'"
+            >
+              按订单查询
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              :plain="queryType !== 'product'"
+              @click="queryType = 'product'"
+            >
+              按货品查询
+            </el-button>
+          </el-button-group>
         </div>
-        <el-tag type="primary" size="small" style="cursor: pointer" @click="handleUnassignedClick">
-          未接单：{{ unassignedCount }}条
-        </el-tag>
       </div>
     </div>
     <div class="table-container">
-      <el-table 
+      <el-table
         v-loading="loading"
-        :data="displayData" 
-        style="width: 100%" 
-        border 
+        :data="displayData"
+        style="width: 100%"
+        border
         size="small"
         @sort-change="handleSortChange"
       >
-        <el-table-column prop="orderNo" label="订单编号" width="110" align="center"/>
-        <el-table-column prop="productName" label="货品名称" min-width="110" align="center" sortable="custom"/>
-        <el-table-column prop="status" label="单据状态" width="100" align="center" sortable="custom">
+        <!-- 订单编号列 - 仅在订单查询时显示 -->
+        <el-table-column
+          v-if="queryType === 'order'"
+          prop="orderNo"
+          label="订单编号"
+          width="110"
+          align="center"
+        />
+        <!-- 货品名称列 -->
+        <el-table-column
+          prop="productName"
+          label="货品名称"
+          min-width="110"
+          align="center"
+          sortable="custom"
+        />
+        <!-- 工序列 - 仅在订单查询时显示 -->
+        <el-table-column
+          v-if="queryType === 'order'"
+          prop="process"
+          label="工序"
+          width="100"
+          align="center"
+        />
+        <!-- 状态列 -->
+        <el-table-column
+          prop="status"
+          :label="queryType === 'order' ? '单据状态' : '货品状态'"
+          width="100"
+          align="center"
+          sortable="custom"
+        >
           <template slot-scope="scope">
-            <el-tag :type="getStatusType(scope.row.status)" size="mini" effect="plain">
+            <el-tag
+              :type="getStatusType(scope.row.status)"
+              size="mini"
+              effect="plain"
+            >
               {{ scope.row.status }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="progress" label="进度" width="250" align="center" sortable="custom">
+        <!-- 进度列 -->
+        <el-table-column
+          prop="progress"
+          label="进度"
+          width="250"
+          align="center"
+          sortable="custom"
+        >
           <template slot-scope="scope">
             <div class="progress-wrapper">
               <div class="progress-container">
@@ -38,45 +103,117 @@
                     :percentage="(scope.row.progress / scope.row.total) * 100"
                     :stroke-width="8"
                     :show-text="false"
-                    :color="getProgressColor(scope.row.status)"/>
+                    :color="getProgressColor(scope.row.status)"
+                  />
                 </div>
                 <div class="progress-info">
-                  <span 
+                  <span
                     class="finished-number"
                     @click="$emit('progress-click', scope.row)"
-                    style="cursor: pointer; color: #409EFF; margin-right: 2px;">
+                    style="cursor: pointer; color: #409eff; margin-right: 2px"
+                  >
                     {{ scope.row.progress }}
                   </span>
-                  <span style="color: #909399;">/</span>
-                  <span class="total-number" style="color: #606266; margin-left: 2px;">{{ scope.row.total }}</span>
+                  <span style="color: #909399">/</span>
+                  <span
+                    class="total-number"
+                    style="color: #606266; margin-left: 2px"
+                    >{{ scope.row.total }}</span
+                  >
                 </div>
               </div>
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="total" label="计划量" width="75" align="center"/>
-        <el-table-column prop="finished" label="已完成量" width="85" align="center"/>
-        <el-table-column prop="unfinished" label="未完成量" width="85" align="center"/>
-        <el-table-column prop="yesterdayFinished" label="昨日完成量" width="95" align="center"/>
-        <el-table-column prop="todayFinished" label="今日完成量" width="95" align="center"/>
-        <el-table-column prop="rate" label="完成率" width="100" align="center" sortable="custom">
+        <!-- 计划量列 -->
+        <el-table-column
+          prop="total"
+          label="计划量"
+          width="75"
+          align="center"
+        />
+        <!-- 已完成量列 -->
+        <el-table-column
+          prop="finished"
+          label="已完成量"
+          width="85"
+          align="center"
+        />
+        <!-- 未完成量列 -->
+        <el-table-column
+          prop="unfinished"
+          label="未完成量"
+          width="85"
+          align="center"
+        />
+        <!-- 昨日完成量列 -->
+        <el-table-column
+          prop="yesterdayFinished"
+          label="昨日完成量"
+          width="95"
+          align="center"
+        />
+        <!-- 今日完成量列 -->
+        <el-table-column
+          prop="todayFinished"
+          label="今日完成量"
+          width="95"
+          align="center"
+        />
+        <!-- 完成率列 -->
+        <el-table-column
+          prop="rate"
+          label="完成率"
+          width="100"
+          align="center"
+          sortable="custom"
+        >
           <template slot-scope="scope">
-            {{ (scope.row.finished / scope.row.total * 100).toFixed(1) + '%' }}
+            {{
+              ((scope.row.finished / scope.row.total) * 100).toFixed(1) + "%"
+            }}
           </template>
         </el-table-column>
-        <el-table-column prop="remainingDays" label="距离完成时间还剩" width="130" align="center">
+        <!-- 生产人员列 - 仅在订单查询时显示 -->
+        <el-table-column
+          v-if="queryType === 'order'"
+          prop="producer"
+          label="生产人员"
+          width="100"
+          align="center"
+        />
+        <!-- 剩余时间列 - 仅在订单查询时显示 -->
+        <el-table-column
+          v-if="queryType === 'order'"
+          prop="remainingDays"
+          label="距离完成时间还剩"
+          width="130"
+          align="center"
+        >
           <template slot-scope="scope">
-            <span :style="{ color: scope.row.remainingDays < 0 ? '#F56C6C' : '' }">
-              {{ scope.row.remainingDays > 0 ? scope.row.remainingDays + '天' : '超期' + Math.abs(scope.row.remainingDays) + '天' }}
+            <span
+              :style="{ color: scope.row.remainingDays < 0 ? '#F56C6C' : '' }"
+            >
+              {{
+                scope.row.remainingDays > 0
+                  ? scope.row.remainingDays + "天"
+                  : "超期" + Math.abs(scope.row.remainingDays) + "天"
+              }}
             </span>
           </template>
         </el-table-column>
       </el-table>
       <div class="expand-button" v-if="tableData.length > 5">
-        <el-button type="text" @click="isExpanded = !isExpanded" class="expand-btn">
+        <el-button
+          type="text"
+          @click="isExpanded = !isExpanded"
+          class="expand-btn"
+        >
           <div class="button-content">
             <i :class="['el-icon-arrow-' + (isExpanded ? 'up' : 'down')]"></i>
-            <span class="expand-text">{{ isExpanded ? '收起' : '展开更多' }}</span>
+            <span class="expand-text">{{
+              isExpanded ? "收起" : "展开更多"
+            }}</span>
           </div>
         </el-button>
       </div>
@@ -88,282 +225,383 @@
 // import { getProductionList, getUnassignedCount } from '@/api/production' // 后续需要添加此API
 
 export default {
-  name: 'ProductionTable',
+  name: "ProductionTable",
   data() {
     return {
       loading: false,
       unassignedCount: 0,
-      isExpanded: false,
+      isExpanded: true,
+      queryType: "order", // 查询类型：order-按订单，product-按货品
       localTableData: [], // 本地数据
       sortConfig: {
-        prop: '', // 排序的字段
-        order: '' // 排序的方向
+        prop: "", // 排序的字段
+        order: "", // 排序的方向
       },
-      // 示例数据
-      defaultData: [
+      // 按货品查询的示例数据
+      productDefaultData: [
+        {
+          productName: "智能游环",
+          status: "进行中",
+          progress: 900,
+          total: 4000,
+          finished: 900,
+          unfinished: 3100,
+          yesterdayFinished: 3100,
+          todayFinished: 3100,
+          rate: "22.5%",
+        },
+        {
+          productName: "智能喷淋",
+          status: "进行中",
+          progress: 170,
+          total: 350,
+          finished: 170,
+          unfinished: 180,
+          yesterdayFinished: 180,
+          todayFinished: 180,
+          rate: "48.5%",
+        },
+        {
+          productName: "精准铜喷",
+          status: "进行中",
+          progress: 180,
+          total: 200,
+          finished: 180,
+          unfinished: 20,
+          yesterdayFinished: 20,
+          todayFinished: 20,
+          rate: "90%",
+        },
+        {
+          productName: "休闲评分",
+          status: "已超期",
+          progress: 70,
+          total: 150,
+          finished: 70,
+          unfinished: 80,
+          yesterdayFinished: 80,
+          todayFinished: 80,
+          rate: "46.6%",
+        },
+        {
+          productName: "显示大屏",
+          status: "进行中",
+          progress: 1,
+          total: 30,
+          finished: 1,
+          unfinished: 29,
+          yesterdayFinished: 29,
+          todayFinished: 29,
+          rate: "3%",
+        },
+        {
+          productName: "车载控制器",
+          status: "未开始",
+          progress: 0,
+          total: 50,
+          finished: 0,
+          unfinished: 50,
+          yesterdayFinished: 50,
+          todayFinished: 50,
+          rate: "0%",
+        },
+      ],
+      // 原有的按订单查询数据改名为 orderDefaultData
+      orderDefaultData: [
         {
-          orderNo: 'DD20240001',
-          productName: '包装材料A型',
-          status: '进行中',
+          orderNo: "DD20240001",
+          productName: "包装材料A型",
+          process: "包装",
+          status: "进行中",
           progress: 900,
           total: 4000,
           finished: 900,
           unfinished: 3100,
           yesterdayFinished: 100,
           todayFinished: 50,
-          rate: '22.5%',
-          remainingDays: 7
+          rate: "22.5%",
+          producer: "张三",
+          remainingDays: 7,
         },
         {
-          orderNo: 'DD20240002',
-          productName: '塑料外壳B型',
-          status: '已超期',
+          orderNo: "DD20240002",
+          productName: "塑料外壳B型",
+          process: "注塑",
+          status: "已超期",
           progress: 1500,
           total: 2000,
           finished: 1500,
           unfinished: 500,
           yesterdayFinished: 200,
           todayFinished: 150,
-          rate: '75%',
-          remainingDays: -3
+          rate: "75%",
+          producer: "李四",
+          remainingDays: -3,
         },
         {
-          orderNo: 'DD20240003',
-          productName: '金属零件C型',
-          status: '未开始',
+          orderNo: "DD20240003",
+          productName: "金属零件C型",
+          process: "冲压",
+          status: "未开始",
           progress: 0,
           total: 3000,
           finished: 0,
           unfinished: 3000,
           yesterdayFinished: 0,
           todayFinished: 0,
-          rate: '0%',
-          remainingDays: 15
+          rate: "0%",
+          producer: "王五",
+          remainingDays: 15,
         },
         {
-          orderNo: 'DD20240004',
-          productName: '电子元件D型',
-          status: '进行中',
+          orderNo: "DD20240004",
+          productName: "电子元件D型",
+          process: "组装",
+          status: "进行中",
           progress: 2000,
           total: 5000,
           finished: 2000,
           unfinished: 3000,
           yesterdayFinished: 300,
           todayFinished: 200,
-          rate: '40%',
-          remainingDays: 10
+          rate: "40%",
+          producer: "赵六",
+          remainingDays: 10,
         },
         {
-          orderNo: 'DD20240005',
-          productName: '橡胶配件E型',
-          status: '已超期',
+          orderNo: "DD20240005",
+          productName: "橡胶配件E型",
+          process: "成型",
+          status: "已超期",
           progress: 800,
           total: 1000,
           finished: 800,
           unfinished: 200,
           yesterdayFinished: 80,
           todayFinished: 40,
-          rate: '80%',
-          remainingDays: -5
+          rate: "80%",
+          producer: "孙七",
+          remainingDays: -5,
         },
         {
-          orderNo: 'DD20240006',
-          productName: '电路板F型',
-          status: '进行中',
+          orderNo: "DD20240006",
+          productName: "电路板F型",
+          process: "焊接",
+          status: "进行中",
           progress: 1200,
           total: 3500,
           finished: 1200,
           unfinished: 2300,
           yesterdayFinished: 150,
           todayFinished: 100,
-          rate: '34.3%',
-          remainingDays: 8
+          rate: "34.3%",
+          producer: "周八",
+          remainingDays: 8,
         },
         {
-          orderNo: 'DD20240007',
-          productName: '传感器G型',
-          status: '未开始',
+          orderNo: "DD20240007",
+          productName: "传感器G型",
+          process: "测试",
+          status: "未开始",
           progress: 0,
           total: 2500,
           finished: 0,
           unfinished: 2500,
           yesterdayFinished: 0,
           todayFinished: 0,
-          rate: '0%',
-          remainingDays: 12
+          rate: "0%",
+          producer: "吴九",
+          remainingDays: 12,
         },
         {
-          orderNo: 'DD20240008',
-          productName: '控制器H型',
-          status: '进行中',
+          orderNo: "DD20240008",
+          productName: "控制器H型",
+          process: "调试",
+          status: "进行中",
           progress: 600,
           total: 1500,
           finished: 600,
           unfinished: 900,
           yesterdayFinished: 120,
           todayFinished: 80,
-          rate: '40%',
-          remainingDays: 6
+          rate: "40%",
+          producer: "郑十",
+          remainingDays: 6,
         },
         {
-          orderNo: 'DD20240009',
-          productName: '显示屏I型',
-          status: '已超期',
+          orderNo: "DD20240009",
+          productName: "显示屏I型",
+          process: "组装",
+          status: "已超期",
           progress: 400,
           total: 800,
           finished: 400,
           unfinished: 400,
           yesterdayFinished: 50,
           todayFinished: 30,
-          rate: '50%',
-          remainingDays: -2
+          rate: "50%",
+          producer: "张三",
+          remainingDays: -2,
         },
         {
-          orderNo: 'DD20240010',
-          productName: '机箱J型',
-          status: '进行中',
+          orderNo: "DD20240010",
+          productName: "机箱J型",
+          process: "冲压",
+          status: "进行中",
           progress: 1800,
           total: 4500,
           finished: 1800,
           unfinished: 2700,
           yesterdayFinished: 250,
           todayFinished: 180,
-          rate: '40%',
-          remainingDays: 9
+          rate: "40%",
+          producer: "李四",
+          remainingDays: 9,
         },
         {
-          orderNo: 'DD20240011',
-          productName: '散热器K型',
-          status: '未开始',
+          orderNo: "DD20240011",
+          productName: "散热器K型",
+          process: "成型",
+          status: "未开始",
           progress: 0,
           total: 1200,
           finished: 0,
           unfinished: 1200,
           yesterdayFinished: 0,
           todayFinished: 0,
-          rate: '0%',
-          remainingDays: 14
+          rate: "0%",
+          producer: "王五",
+          remainingDays: 14,
         },
         {
-          orderNo: 'DD20240012',
-          productName: '电源L型',
-          status: '已超期',
+          orderNo: "DD20240012",
+          productName: "电源L型",
+          process: "测试",
+          status: "已超期",
           progress: 300,
           total: 600,
           finished: 300,
           unfinished: 300,
           yesterdayFinished: 40,
           todayFinished: 20,
-          rate: '50%',
-          remainingDays: -4
+          rate: "50%",
+          producer: "赵六",
+          remainingDays: -4,
         },
         {
-          orderNo: 'DD20240013',
-          productName: '连接器M型',
-          status: '进行中',
+          orderNo: "DD20240013",
+          productName: "连接器M型",
+          process: "焊接",
+          status: "进行中",
           progress: 700,
           total: 2000,
           finished: 700,
           unfinished: 1300,
           yesterdayFinished: 90,
           todayFinished: 60,
-          rate: '35%',
-          remainingDays: 11
-        }
-      ]
-    }
+          rate: "35%",
+          producer: "孙七",
+          remainingDays: 11,
+        },
+      ],
+    };
   },
   props: {
     updateTime: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     tableData() {
-      let data = this.localTableData.length > 0 ? this.localTableData : this.defaultData
-      
+      // 根据查询类型返回不同的数据
+      const sourceData =
+        this.queryType === "order"
+          ? this.localTableData.length > 0
+            ? this.localTableData
+            : this.orderDefaultData
+          : this.productDefaultData;
+
+      let data = [...sourceData];
+
       // 如果有排序配置，进行排序
       if (this.sortConfig.prop && this.sortConfig.order) {
-        const { prop, order } = this.sortConfig
-        data = [...data].sort((a, b) => {
-          let aValue = a[prop]
-          let bValue = b[prop]
+        const { prop, order } = this.sortConfig;
+        data = data.sort((a, b) => {
+          let aValue = a[prop];
+          let bValue = b[prop];
 
           // 特殊处理完成率字段
-          if (prop === 'rate') {
-            aValue = (a.finished / a.total) * 100
-            bValue = (b.finished / b.total) * 100
+          if (prop === "rate") {
+            aValue = (a.finished / a.total) * 100;
+            bValue = (b.finished / b.total) * 100;
           }
 
           // 根据排序方向返回比较结果
-          if (order === 'ascending') {
-            return aValue > bValue ? 1 : -1
+          if (order === "ascending") {
+            return aValue > bValue ? 1 : -1;
           } else {
-            return aValue < bValue ? 1 : -1
+            return aValue < bValue ? 1 : -1;
           }
-        })
+        });
       }
-      
-      return data
+
+      return data;
     },
     displayData() {
-      return this.isExpanded ? this.tableData : this.tableData.slice(0, 5)
-    }
+      return this.isExpanded ? this.tableData : this.tableData.slice(0, 5);
+    },
   },
   created() {
-    this.initData()
+    this.initData();
   },
   methods: {
     getStatusType(status) {
       switch (status) {
-        case '进行中':
-          return 'primary'
-        case '已超期':
-          return 'danger'
-        case '未开始':
-          return 'info'
+        case "进行中":
+          return "primary";
+        case "已超期":
+          return "danger";
+        case "未开始":
+          return "info";
         default:
-          return 'info'
+          return "info";
       }
     },
     getProgressColor(status) {
       switch (status) {
-        case '进行中':
-          return '#409EFF'
-        case '已超期':
-          return '#F56C6C'
-        case '未开始':
-          return '#909399'
+        case "进行中":
+          return "#409EFF";
+        case "已超期":
+          return "#F56C6C";
+        case "未开始":
+          return "#909399";
         default:
-          return '#909399'
+          return "#909399";
       }
     },
     async initData() {
       try {
-        await Promise.all([
-          this.fetchTableData(),
-          this.fetchUnassignedCount()
-        ])
+        await Promise.all([this.fetchTableData(), this.fetchUnassignedCount()]);
       } catch (error) {
-        console.error('初始化数据失败:', error)
+        console.error("初始化数据失败:", error);
       }
     },
     async fetchTableData() {
       try {
-        this.loading = true
+        this.loading = true;
         // TODO: 后端接口完成后替换此处
         // const { data } = await getProductionList()
         // this.localTableData = data
-        
+
         // 模拟接口调用
-        await new Promise(resolve => setTimeout(resolve, 1000))
-        this.localTableData = this.defaultData
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        this.localTableData = this.orderDefaultData;
       } catch (error) {
-        console.error('获取生产列表失败:', error)
-        this.$message.error('获取生产列表失败')
+        console.error("获取生产列表失败:", error);
+        this.$message.error("获取生产列表失败");
       } finally {
-        this.loading = false
+        this.loading = false;
       }
     },
     async fetchUnassignedCount() {
@@ -371,22 +609,19 @@ export default {
         // TODO: 后端接口完成后替换此处
         // const { data } = await getUnassignedCount()
         // this.unassignedCount = data
-        
+
         // 模拟接口调用
-        await new Promise(resolve => setTimeout(resolve, 500))
-        this.unassignedCount = 7
+        await new Promise((resolve) => setTimeout(resolve, 500));
+        this.unassignedCount = 7;
       } catch (error) {
-        console.error('获取未接单数量失败:', error)
+        console.error("获取未接单数量失败:", error);
       }
     },
-    handleUnassignedClick() {
-      this.$emit('unassigned-click')
-    },
     handleSortChange({ prop, order }) {
-      this.sortConfig = { prop, order }
-    }
-  }
-}
+      this.sortConfig = { prop, order };
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -394,7 +629,7 @@ export default {
   border-radius: 8px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
-  
+
   .el-card__header {
     padding: 16px 20px;
     border-bottom: 1px solid #ebeef5;
@@ -404,6 +639,22 @@ export default {
     padding: 16px;
     transition: all 0.3s ease;
   }
+
+  .query-buttons {
+    .el-button-group {
+      .el-button {
+        padding: 8px 15px;
+
+        &.is-plain {
+          &:hover {
+            color: #409eff;
+            border-color: #c6e2ff;
+            background-color: #ecf5ff;
+          }
+        }
+      }
+    }
+  }
 }
 
 .table-container {
@@ -413,22 +664,22 @@ export default {
 
 .expand-button {
   text-align: center;
-  border-top: 1px solid #EBEEF5;
+  border-top: 1px solid #ebeef5;
   margin-top: -1px;
-  
+
   .el-button {
     font-size: 13px;
     color: #909399;
     padding: 8px;
-    
+
     .button-content {
       display: inline-flex;
       align-items: center;
       position: relative;
-      
+
       i {
         font-size: 12px;
-        color: #C0C4CC;
+        color: #c0c4cc;
         transition: all 0.3s;
       }
 
@@ -440,13 +691,13 @@ export default {
         opacity: 0;
       }
     }
-    
+
     &:hover {
-      color: #409EFF;
-      
+      color: #409eff;
+
       .button-content {
         i {
-          color: #409EFF;
+          color: #409eff;
           margin-right: 4px;
         }
 
@@ -461,22 +712,22 @@ export default {
 
 .progress-wrapper {
   padding: 6px 0;
-  
+
   .progress-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
-    
+
     .progress-bar {
       width: 100%;
       padding: 0 12px;
     }
-    
+
     .progress-info {
       font-size: 12px;
       font-weight: 500;
-      
+
       .finished-number {
         &:hover {
           opacity: 0.8;
@@ -488,12 +739,12 @@ export default {
 
 :deep(.el-table) {
   font-size: 12px;
-  
+
   .el-table__header th {
     padding: 8px 0;
     background-color: #f5f7fa;
   }
-  
+
   .el-table__body td {
     padding: 8px 0;
   }
@@ -508,4 +759,4 @@ export default {
 :deep(.el-table__body-wrapper) {
   transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-</style> 
+</style>

src/views/productManagement/productionSummary/components/StatisticsPanel.vue

@@ -5,7 +5,12 @@
         <svg-icon :icon-class="item.icon" class="icon" />
       </div>
       <div class="stat-info">
-        <count-to :start-val="0" :end-val="item.value" :duration="2000" class="num"/>
+        <count-to
+          :start-val="0"
+          :end-val="item.value"
+          :duration="2000"
+          class="num"
+        />
         <div class="text">{{ item.text }}</div>
       </div>
     </div>
@@ -13,75 +18,34 @@
 </template>
 
 <script>
-import CountTo from 'vue-count-to'
-// import { getStatisticsData } from '@/api/production' // 后续需要添加此API
+import CountTo from "vue-count-to";
 
 export default {
-  name: 'StatisticsPanel',
+  name: "StatisticsPanel",
   components: {
-    CountTo
+    CountTo,
+  },
+  props: {
+    statisticsData: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
       // 示例数据作为默认值
-      defaultData: [
-        { icon: 'order-total', value: 20, text: '本月总订单' },
-        { icon: 'order-produced', value: 5, text: '本月已完订单' },
-        { icon: 'order-producing', value: 8, text: '正在生产订单' },
-        { icon: 'order-unproduced', value: 7, text: '未生产订单' },
-        { icon: 'order-total-count', value: 1000, text: '订单总量' },
-        { icon: 'order-completed', value: 5000, text: '已完成量' },
-        { icon: 'order-uncompleted', value: 5000, text: '未完成量' }
-      ],
-      statisticsData: []
-    }
-  },
-  created() {
-    // 初始化时获取数据
-    this.initData()
-    // 每隔5分钟刷新一次数据
-    this.startDataRefresh()
+      defaultData: [],
+    };
   },
+  created() {},
   beforeDestroy() {
     // 组件销毁前清除定时器
     if (this.refreshTimer) {
-      clearInterval(this.refreshTimer)
+      clearInterval(this.refreshTimer);
     }
   },
-  methods: {
-    async initData() {
-      try {
-        // 先使用示例数据
-        this.statisticsData = this.defaultData
-        // 获取后端数据
-        await this.fetchData()
-      } catch (error) {
-        console.error('初始化统计数据失败:', error)
-      }
-    },
-    async fetchData() {
-      try {
-        // TODO: 后端接口完成后替换此处
-        // const { data } = await getStatisticsData()
-        // this.statisticsData = data
-        
-        // 模拟接口调用
-        await new Promise(resolve => setTimeout(resolve, 1000))
-        // 这里暂时使用示例数据，后续替换为实际接口数据
-        this.statisticsData = this.defaultData
-      } catch (error) {
-        console.error('获取统计数据失败:', error)
-        this.$message.error('获取统计数据失败')
-      }
-    },
-    startDataRefresh() {
-      // 每5分钟刷新一次数据
-      this.refreshTimer = setInterval(() => {
-        this.fetchData()
-      }, 5 * 60 * 1000)
-    }
-  }
-}
+  methods: {},
+};
 </script>
 
 <style lang="scss" scoped>
@@ -111,12 +75,12 @@ export default {
       .icon-wrapper {
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         .icon {
-          color: #409EFF;
+          color: #409eff;
         }
       }
       .stat-info {
         .num {
-          color: #409EFF;
+          color: #409eff;
         }
       }
     }
@@ -167,4 +131,4 @@ export default {
     }
   }
 }
-</style> 
+</style>

src/views/productManagement/productionSummary/components/UnassignedDialog.vue

@@ -1,93 +0,0 @@
-<template>
-  <el-dialog
-    :visible.sync="visible"
-    width="80%"
-    custom-class="unassigned-dialog"
-    :before-close="handleClose">
-    <div slot="title" class="dialog-title">
-      <div class="title-content">
-        <span>生产未接单</span>
-        <span class="dialog-update-time">{{ updateTime }}</span>
-      </div>
-    </div>
-    <el-table :data="unassignedOrders" style="width: 100%" border>
-      <el-table-column prop="orderNo" label="订单编号" width="120" align="center"/>
-      <el-table-column prop="planNum" label="计划量" width="120" align="center"/>
-      <el-table-column prop="goods" label="货品" min-width="120" align="center"/>
-      <el-table-column prop="orderPerson" label="下单人" width="120" align="center"/>
-      <el-table-column prop="orderTime" label="下单时间" width="120" align="center"/>
-      <el-table-column prop="priority" label="优先级" width="100" align="center"/>
-      <el-table-column prop="contract" label="合同" min-width="200" align="center"/>
-    </el-table>
-    <div slot="footer" class="dialog-footer">
-      <el-button type="primary" size="medium" @click="handleClose">关 闭</el-button>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  name: 'UnassignedDialog',
-  props: {
-    visible: {
-      type: Boolean,
-      required: true
-    },
-    updateTime: {
-      type: String,
-      required: true
-    },
-    unassignedOrders: {
-      type: Array,
-      required: true
-    }
-  },
-  methods: {
-    handleClose() {
-      this.$emit('update:visible', false)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-:deep(.unassigned-dialog) {
-  .el-dialog__header {
-    padding: 20px 24px;
-    border-bottom: 1px solid #ebeef5;
-    margin-right: 0;
-    
-    .dialog-title {
-      .title-content {
-        display: inline-flex;
-        align-items: center;
-        font-size: 16px;
-        font-weight: 500;
-        
-        .dialog-update-time {
-          font-size: 14px;
-          color: #666;
-          font-weight: normal;
-          margin-left: 16px;
-        }
-      }
-    }
-  }
-  
-  .el-dialog__body {
-    padding: 24px;
-  }
-  
-  .el-table {
-    th {
-      background-color: #f5f7fa;
-      color: #1f2d3d;
-      font-weight: 500;
-    }
-    
-    td {
-      padding: 12px 0;
-    }
-  }
-}
-</style> 

src/views/productManagement/productionSummary/index.vue

@@ -7,314 +7,268 @@
     </div>
 
     <!-- 顶部统计卡片 -->
-    <statistics-panel />
+    <statistics-panel :statistics-data="statisticsPanelData" />
 
-    <!-- 生产概况表格 -->
-    <production-table 
-      :table-data="tableData"
+    <!-- 按订单查询表格 -->
+    <order-production-table
+      v-if="queryType === 'order'"
       :update-time="updateTime"
-      @unassigned-click="handleUnassignedOrders"
       @progress-click="handleProgressClick"
-    />
+      @data-loaded="handleDataLoaded"
+    >
+      <template #query-buttons>
+        <el-button-group>
+          <el-button
+            type="primary"
+            size="small"
+            :plain="queryType !== 'order'"
+            @click="switchQueryType('order')"
+          >
+            按订单查询
+          </el-button>
+          <el-button
+            type="primary"
+            size="small"
+            :plain="queryType !== 'product'"
+            @click="switchQueryType('product')"
+          >
+            按货品查询
+          </el-button>
+        </el-button-group>
+      </template>
+    </order-production-table>
 
-    <!-- 未接单弹窗 -->
-    <unassigned-dialog
-      :visible.sync="dialogVisible"
+    <!-- 按货品查询表格 -->
+    <product-production-table
+      v-else
       :update-time="updateTime"
-      :unassigned-orders="unassignedOrders"
-    />
+      @progress-click="handleProgressClick"
+      @data-loaded="handleDataLoaded"
+    >
+      <template #query-buttons>
+        <el-button-group>
+          <el-button
+            type="primary"
+            size="small"
+            :plain="queryType !== 'order'"
+            @click="switchQueryType('order')"
+          >
+            按订单查询
+          </el-button>
+          <el-button
+            type="primary"
+            size="small"
+            :plain="queryType !== 'product'"
+            @click="switchQueryType('product')"
+          >
+            按货品查询
+          </el-button>
+        </el-button-group>
+      </template>
+    </product-production-table>
+
+    <!-- 发货状态表格 -->
+    <delivery-status-table />
 
     <!-- 货品生产情况 -->
-    <production-status-chart
+    <!-- <production-status-chart
       :chart-data="chartData"
       @filter-change="handleFilterChange"
-    />
+    />-->
   </div>
 </template>
 
 <script>
-import StatisticsPanel from './components/StatisticsPanel'
-import ProductionTable from './components/ProductionTable'
-import UnassignedDialog from './components/UnassignedDialog'
-import ProductionStatusChart from './components/ProductionStatusChart'
+import StatisticsPanel from "./components/StatisticsPanel";
+import OrderProductionTable from "./components/OrderProductionTable.vue";
+import ProductProductionTable from "./components/ProductProductionTable.vue";
+import DeliveryStatusTable from "./components/DeliveryStatusTable.vue";
+import { GetDataByName, GetDataByNames } from "@/api/common";
 
 export default {
-  name: 'ProductionSummary',
+  name: "ProductionSummary",
   components: {
     StatisticsPanel,
-    ProductionTable,
-    UnassignedDialog,
-    ProductionStatusChart 
+    OrderProductionTable,
+    ProductProductionTable,
+    DeliveryStatusTable,
   },
   data() {
     return {
-      currentTime: '',
-      updateTime: '',
+      currentTime: "",
+      updateTime: "",
       dialogVisible: false,
-      tableData: [
-        {
-          orderNo: 'DD20240001',
-          productName: '包装材料A型',
-          status: '进行中',
-          progress: 900,
-          total: 4000,
-          finished: 900,
-          unfinished: 3100,
-          rate: '22.5%',
-          remainingDays: 7
-        },
-        {
-          orderNo: 'DD20240002',
-          productName: '塑料外壳B型',
-          status: '已超期',
-          progress: 1500,
-          total: 2000,
-          finished: 1500,
-          unfinished: 500,
-          rate: '75%',
-          remainingDays: -3
-        },
-        {
-          orderNo: 'DD20240003',
-          productName: '金属零件C型',
-          status: '未开始',
-          progress: 0,
-          total: 3000,
-          finished: 0,
-          unfinished: 3000,
-          rate: '0%',
-          remainingDays: 15
-        },
-        {
-          orderNo: 'DD20240004',
-          productName: '电子元件D型',
-          status: '进行中',
-          progress: 2000,
-          total: 5000,
-          finished: 2000,
-          unfinished: 3000,
-          rate: '40%',
-          remainingDays: 10
-        },
-        {
-          orderNo: 'DD20240005',
-          productName: '橡胶配件E型',
-          status: '已超期',
-          progress: 800,
-          total: 1000,
-          finished: 800,
-          unfinished: 200,
-          rate: '80%',
-          remainingDays: -5
-        },
-        {
-          orderNo: 'DD20240006',
-          productName: '五金配件F型',
-          status: '进行中',
-          progress: 1200,
-          total: 3000,
-          finished: 1200,
-          unfinished: 1800,
-          rate: '40%',
-          remainingDays: 8
-        },
-        {
-          orderNo: 'DD20240007',
-          productName: '包装材料G型',
-          status: '未开始',
-          progress: 0,
-          total: 2500,
-          finished: 0,
-          unfinished: 2500,
-          rate: '0%',
-          remainingDays: 12
-        },
-        {
-          orderNo: 'DD20240008',
-          productName: '电路板H型',
-          status: '进行中',
-          progress: 300,
-          total: 1000,
-          finished: 300,
-          unfinished: 700,
-          rate: '30%',
-          remainingDays: 5
-        },
-        {
-          orderNo: 'DD20240009',
-          productName: '机械零件I型',
-          status: '已超期',
-          progress: 600,
-          total: 800,
-          finished: 600,
-          unfinished: 200,
-          rate: '75%',
-          remainingDays: -2
-        },
-        {
-          orderNo: 'DD20240010',
-          productName: '塑料外壳J型',
-          status: '进行中',
-          progress: 1500,
-          total: 3000,
-          finished: 1500,
-          unfinished: 1500,
-          rate: '50%',
-          remainingDays: 6
-        }
-      ],
-      unassignedOrders: [
-        {
-          orderNo: '00000021',
-          planNum: 2000,
-          goods: '智能膜环',
-          orderPerson: '孙XX',
-          orderTime: '2024-10-01',
-          priority: '一般',
-          contract: 'HT00000001 泰三农场'
-        },
-        {
-          orderNo: '00000022',
-          planNum: 2000,
-          goods: '智能喷淋',
-          orderPerson: '孙XX',
-          orderTime: '2024-10-12',
-          priority: '一般',
-          contract: 'HT00000002 和祥牧场'
-        },
-        {
-          orderNo: '00000023',
-          planNum: 2000,
-          goods: '佳沃评分',
-          orderPerson: '孙XX',
-          orderTime: '2024-10-15',
-          priority: '一般',
-          contract: 'HT00000003 五河牧场'
-        },
-        {
-          orderNo: '00000024',
-          planNum: 2000,
-          goods: '大屏',
-          orderPerson: '孙XX',
-          orderTime: '2024-10-18',
-          priority: '一般',
-          contract: 'HT00000004 云养牛'
-        },
-        {
-          orderNo: '00000025',
-          planNum: 2000,
-          goods: '耳标',
-          orderPerson: '孙XX',
-          orderTime: '2024-10-20',
-          priority: '高',
-          contract: 'HT00000005 宝塔牧场\nHT00000006 马鞍山牧场'
-        },
-        {
-          orderNo: '00000026',
-          planNum: 2000,
-          goods: '智能称重',
-          orderPerson: '孙XX',
-          orderTime: '2024-10-30',
-          priority: '一般',
-          contract: 'HT00000007 海丰牧场'
-        }
-      ],
-      chartData: {
-        labels: ['智能喷淋', '智能膜环', '佳沃评分', '精准阉割', '奶牛称重', '车载控制器', '大屏', '耳标'],
-        datasets: [
-          {
-            label: '计划量',
-            data: [600, 2000, 700, 970, 680, 840, 500, 1600],
-            backgroundColor: '#409EFF',
-            order: 2
-          },
-          {
-            label: '完成量',
-            data: [550, 1590, 500, 800, 630, 800, 500, 1600],
-            backgroundColor: '#FF9F43',
-            order: 2
-          },
-          {
-            label: '完成率',
-            data: [91.7, 79.5, 71.4, 82.5, 92.6, 95.2, 100, 100],
-            type: 'line',
-            borderColor: '#67C23A',
-            borderWidth: 2,
-            fill: false,
-            yAxisID: 'percentage',
-            order: 1
-          }
-        ]
-      }
-    }
+      statisticsPanelData: [],
+      queryType: "order", // 默认按订单查询
+      autoPlayTimer: null, // 自动轮播定时器
+      manualTimer: null, // 手动模式定时器
+      isAutoPlay: true, // 是否为自动轮播模式
+    };
   },
   created() {
-    this.updateCurrentTime()
-    setInterval(this.updateCurrentTime, 1000)
-    this.getUpdateTime()
-    setInterval(this.getUpdateTime, 60000)
-    this.getTableData()
+    this.updateCurrentTime();
+    setInterval(this.updateCurrentTime, 1000);
+    this.getTableData();
+    this.startAutoPlay(); // 启动自动轮播
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    this.clearTimers();
   },
   methods: {
     updateCurrentTime() {
-      const now = new Date()
-      const year = now.getFullYear()
-      const month = (now.getMonth() + 1).toString().padStart(2, '0')
-      const day = now.getDate().toString().padStart(2, '0')
-      const hours = now.getHours().toString().padStart(2, '0')
-      const minutes = now.getMinutes().toString().padStart(2, '0')
-      const seconds = now.getSeconds().toString().padStart(2, '0')
-      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = (now.getMonth() + 1).toString().padStart(2, "0");
+      const day = now.getDate().toString().padStart(2, "0");
+      const hours = now.getHours().toString().padStart(2, "0");
+      const minutes = now.getMinutes().toString().padStart(2, "0");
+      const seconds = now.getSeconds().toString().padStart(2, "0");
+      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     },
-    async getUpdateTime() {
-      try {
-        const now = new Date()
-        const month = (now.getMonth() + 1).toString().padStart(2, '0')
-        const day = now.getDate().toString().padStart(2, '0')
-        const hours = now.getHours().toString().padStart(2, '0')
-        const minutes = now.getMinutes().toString().padStart(2, '0')
-        this.updateTime = `${month}/${day} ${hours}:${minutes}更新`
-      } catch (error) {
-        console.error('获取更新时间失败:', error)
-      }
+    handleDataLoaded() {
+      // 数据加载完成后更新时间
+      const now = new Date();
+      const month = (now.getMonth() + 1).toString().padStart(2, "0");
+      const day = now.getDate().toString().padStart(2, "0");
+      const hours = now.getHours().toString().padStart(2, "0");
+      const minutes = now.getMinutes().toString().padStart(2, "0");
+      const seconds = now.getSeconds().toString().padStart(2, "0");
+      this.updateTime = `${month}/${day} ${hours}:${minutes}:${seconds}更新`;
     },
     handleUnassignedOrders() {
-      this.getUnassignedOrders()
-      this.dialogVisible = true
+      this.getUnassignedOrders();
+      this.dialogVisible = true;
     },
     async getUnassignedOrders() {
       try {
-        console.log('获取未接单数据')
+        console.log("获取未接单数据");
       } catch (error) {
-        console.error('获取未接单数据失败:', error)
-        this.$message.error('获取未接单数据失败')
+        console.error("获取未接单数据失败:", error);
+        this.$message.error("获取未接单数据失败");
       }
     },
     handleProgressClick(row) {
-      console.log('进度条被点击:', row)
+      console.log("进度条被点击:", row);
     },
-    async getTableData() {
-      try {
-        console.log('获取生产概况表格数据')
-      } catch (error) {
-        console.error('获取表格数据失败:', error)
-        this.$message.error('获取表格数据失败')
-      }
+    getTableData() {
+      const send_select_list = [
+        {
+          name: "getStatisticsPanelNums",
+          offset: 0,
+          pagecount: 0,
+          parammaps: {},
+        },
+        {
+          name: "getDictListSelect",
+          offset: 0,
+          pagecount: 0,
+          parammaps: {
+            pid: "79",
+          },
+        },
+        {
+          name: "getInstallationOrderToDoNum",
+          offset: 0,
+          pagecount: 0,
+          parammaps: {},
+        },
+      ];
+
+      GetDataByNames(send_select_list)
+        .then((response) => {
+          // 处理服务人员数据
+          this.statisticsPanelData =
+            response.data.getStatisticsPanelNums.list || [];
+        })
+        .catch((error) => {
+          console.error("获取下拉框数据失败:", error);
+        });
     },
     handleFilterChange({ month, product }) {
-      console.log('筛选条件变更:', month, product)
-      this.getChartData(month, product)
+      console.log("筛选条件变更:", month, product);
+      this.getChartData(month, product);
     },
     async getChartData(month, product) {
       try {
-        console.log('获取图表数据:', month, product)
+        console.log("获取图表数据:", month, product);
       } catch (error) {
-        console.error('获取图表数据失败:', error)
-        this.$message.error('获取图表数据失败')
+        console.error("获取图表数据失败:", error);
+        this.$message.error("获取图表数据失败");
       }
-    }
-  }
-}
+    },
+    // 切换查询类型
+    switchQueryType(type) {
+      if (this.queryType === type) return;
+
+      this.queryType = type;
+      this.clearTimers(); // 清除现有定时器
+      this.isAutoPlay = false;
+
+      // 提示进入手动模式
+      this.$message({
+        message: "已切换为手动模式，5分钟后恢复自动轮播",
+        type: "info",
+        duration: 3000,
+      });
+
+      // 设置5分钟后恢复自动轮播
+      this.manualTimer = setTimeout(() => {
+        this.startAutoPlay();
+        // 提示恢复自动模式
+        this.$message({
+          message: "已恢复自动轮播模式",
+          type: "success",
+          duration: 3000,
+        });
+      }, 5 * 60 * 1000);
+    },
+
+    // 启动自动轮播
+    startAutoPlay() {
+      this.clearTimers(); // 先清除现有定时器
+      this.isAutoPlay = true;
+
+      if (this.isAutoPlay) {
+        // 首次启动时提示
+        this.$message({
+          message: "自动轮播模式：每1分钟自动切换视图",
+          type: "success",
+          duration: 3000,
+        });
+      }
+
+      // 每分钟切换一次
+      this.autoPlayTimer = setInterval(() => {
+        this.queryType = this.queryType === "order" ? "product" : "order";
+      }, 60 * 1000);
+    },
+
+    // 清除所有定时器
+    clearTimers() {
+      if (this.autoPlayTimer) {
+        clearInterval(this.autoPlayTimer);
+        this.autoPlayTimer = null;
+      }
+      if (this.manualTimer) {
+        clearTimeout(this.manualTimer);
+        this.manualTimer = null;
+      }
+    },
+  },
+  watch: {
+    queryType(newVal) {
+      // 视图切换时的提示
+      if (this.isAutoPlay) {
+        this.$message({
+          message: `自动切换至${newVal === "order" ? "按订单" : "按货品"}视图`,
+          type: "info",
+          duration: 2000,
+        });
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -335,16 +289,16 @@ export default {
     color: #1f2d3d;
     position: relative;
     padding-left: 16px;
-    
+
     &::before {
-      content: '';
+      content: "";
       position: absolute;
       left: 0;
       top: 50%;
       transform: translateY(-50%);
       width: 4px;
       height: 22px;
-      background: #409EFF;
+      background: #409eff;
       border-radius: 4px;
     }
   }
@@ -354,4 +308,67 @@ export default {
     font-size: 14px;
   }
 }
+
+// 添加按钮组样式
+:deep(.el-button-group) {
+  .el-button {
+    padding: 8px 16px;
+    font-size: 13px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:not(.is-plain) {
+      background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
+      border-color: #3a8ee6;
+      box-shadow: 0 2px 6px rgba(64, 158, 255, 0.2);
+
+      &:hover {
+        background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
+        border-color: #409eff;
+        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+      }
+    }
+
+    &.is-plain {
+      color: #409eff;
+      background: #ecf5ff;
+      border-color: #b3d8ff;
+
+      &:hover {
+        color: #fff;
+        background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
+        border-color: #409eff;
+        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+      }
+    }
+  }
+}
+
+// 添加表格切换动画
+.app-container {
+  .el-card {
+    animation: fadeInScale 0.3s ease-out;
+  }
+}
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style>