工序生产实况模块开发及对接

zhangwencui

8 天以前 76586d395a3bcbf4cc7e92db16e651dee03c32c9

 src/views/productionManagement/processStatistics/index.vue

@@ -19,8 +19,10 @@
        </el-form-item>
      </el-form>
    </div>
    <div class="stats-grid">
      <el-row :gutter="16">
    <div class="stats-grid"
         v-loading="loading">
      <el-row :gutter="16"
              v-if="statsData.length > 0">
        <el-col v-for="(item, index) in statsData"
                :key="index"
                :xs="24"
@@ -56,7 +58,7 @@
            <div class="card-footer">
              <div class="progress-info">
                <span class="progress-label">进度:</span>
                <el-progress :percentage="item.percentage"
                <el-progress :percentage="Math.min(item.percentage, 100)"
                             :color="getProgressColor(item.percentage)"
                             :stroke-width="10"
                             :show-text="false"
@@ -67,94 +69,61 @@
          </div>
        </el-col>
      </el-row>
      <el-empty v-else
                description="暂无数据" />
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref } from "vue";
  import { reactive, ref, onMounted } from "vue";
  import dayjs from "dayjs";
  import { getOperationStatistics } from "@/api/productionManagement/workOrder.js";

  const loading = ref(false);
  const searchForm = reactive({
    dateRange: ["2026-01-30", "2026-04-30"],
    dateRange: [],
  });

  const statsData = ref([
    { name: "装配", total: 100, planned: 90, good: 85, bad: 5, percentage: 100 },
    { name: "加工", total: 120, planned: 110, good: 105, bad: 5, percentage: 60 },
    { name: "包装", total: 80, planned: 70, good: 65, bad: 5, percentage: 92.86 },
    { name: "清洗", total: 90, planned: 80, good: 75, bad: 5, percentage: 33.75 },
    { name: "焊接", total: 110, planned: 100, good: 95, bad: 5, percentage: 50 },
    { name: "涂装", total: 85, planned: 75, good: 70, bad: 5, percentage: 82.35 },
    {
      name: "质检",
      total: 130,
      planned: 120,
      good: 115,
      bad: 5,
      percentage: 100,
    },
    { name: "打磨", total: 95, planned: 85, good: 80, bad: 5, percentage: 84.21 },
    {
      name: "分拣",
      total: 105,
      planned: 95,
      good: 90,
      bad: 5,
      percentage: 55.71,
    },
    {
      name: "喷漆",
      total: 120,
      planned: 110,
      good: 105,
      bad: 5,
      percentage: 77.5,
    },
    { name: "组装", total: 100, planned: 90, good: 85, bad: 5, percentage: 25 },
    {
      name: "清洗",
      total: 105,
      planned: 95,
      good: 90,
      bad: 5,
      percentage: 15.71,
    },
    {
      name: "去油",
      total: 125,
      planned: 115,
      good: 110,
      bad: 5,
      percentage: 100,
    },
    {
      name: "酸洗",
      total: 130,
      planned: 120,
      good: 115,
      bad: 5,
      percentage: 78.46,
    },
    {
      name: "绕线",
      total: 140,
      planned: 130,
      good: 125,
      bad: 5,
      percentage: 89.29,
    },
  ]);
  const statsData = ref([]);

  const getProgressColor = percentage => {
    if (percentage >= 100) return "#67c23a";
    return "#409eff";
    if (percentage >= 50) return "#409eff";
    if (percentage >= 25) return "#e6a23c";
    return "red";
  };

  const getList = () => {
    loading.value = true;
    const params = {
      startDate: searchForm.dateRange?.[0] || "",
      endDate: searchForm.dateRange?.[1] || "",
    };
    getOperationStatistics(params)
      .then(res => {
        // 根据实际接口返回的字段进行映射
        statsData.value = (res.data || []).map(item => ({
          name: item.operationName || "-",
          total: item.productionTaskCount || 0,
          planned: item.planQuantity || 0,
          good: item.goodQuantity || 0,
          bad: item.scrapQty || 0,
          percentage: Number(item.completionStatus || 0),
        }));
      })
      .finally(() => {
        loading.value = false;
      });
  };

  const handleQuery = () => {
    console.log("Query with:", searchForm);
    // 这里可以添加查询逻辑
    getList();
  };

  onMounted(() => {
    getList();
  });
</script>

<style scoped lang="scss">