接口联调及人员饼图模块样式优化

yangfeng

2023-12-04 bb7f2e3ecbd47edfde477d742990bcbad3d601e1

 src/views/cockpitPage/index.vue

@@ -1,13 +1,13 @@
<template>
  <BackgroundBoardLayout>
    <template #leftBlock1>
      <StatisticalBox></StatisticalBox>
      <StatisticalBox :all-list="allList"></StatisticalBox>
    </template>
    <template #leftBlock2>
      <MachineStartupRate></MachineStartupRate>
    </template>
    <template #leftBlock3>
      <CountView></CountView>
      <CountView :total-object="totalObject"></CountView>
    </template>
    <template #leftBlock4>
      <OrderCompleteRadio></OrderCompleteRadio>
@@ -16,8 +16,7 @@
      <WorkOrderProgress></WorkOrderProgress>
    </template>
    <template #leftBlock6>
      <PerSonnelProductivity
      ></PerSonnelProductivity>
      <PerSonnelProductivity></PerSonnelProductivity>
    </template>
    <template #rightBlock1>
      <DeviceChart></DeviceChart>
@@ -42,6 +41,7 @@
import BarChart from "@/views/cockpitPage/components/BarChart.vue";
import OrderCompleteRadio from "@/views/cockpitPage/components/OrderCompleteRadio";
import WorkOrderProgress from "@/views/cockpitPage/components/WorkOrderProgress";
import { getDashboard } from "@/api/cockpitPage/index";
export default {
  components: {
    StatisticalBox,
@@ -57,11 +57,72 @@
  },
  props: {},
  data() {
    return {};
    return {
      allList: [
        { value: 0, label: "开机台数" },
        { value: 0, label: "总产量" },
        { value: 0, label: "生产工单数" },
        { value: 0, label: "延期交付" },
        { value: 0, label: "物料不足" },
        { value: 0, label: "计划达成率" },
      ],
      totalObject: {},
    };
  },
  mounted() {},
  mounted() {
    this.getDashboard();
    setInterval(() => {
      this.getDashboard();
    }, 300000);
  },
  watch: {},
  methods: {},
  methods: {
    async getDashboard() {
      await getDashboard().then((res) => {
        console.log(res);
        // 左上数值统计数据
        this.setLeftBlock1(res.data);
        //  左中数据统计值
        this.setLeftBlock3(res.data);
      });
    },
    // 处理左上数据
    setLeftBlock1(data) {
      this.allList.map((item) => {
        if (item.label === "开机台数") {
          item.value = data?.DeviceRunningAmount ?? 0;
        } else if (item.label === "总产量") {
          item.value = data?.TotalProductionAmount ?? 0;
        } else if (item.label === "生产工单数") {
          item.value = data?.WorkOrderAmount ?? 0;
        } else if (item.label === "延期交付") {
          item.value = data?.DelayWorkOrderAmount ?? 0;
        } else if (item.label === "物料不足") {
          item.value = data?.MaterialMissWorkOrderAmount ?? 0;
        } else if (item.label === "计划达成率") {
          item.value =
            typeof data?.PlanOrderFinishRate === "string"
              ? parseFloat(
                  data?.PlanOrderFinishRate.length > 0
                    ? data?.PlanOrderFinishRate
                    : "0"
                )
              : data?.PlanOrderFinishRate ?? 0;
        }
      });
    },
    // 左中数据统计值
    setLeftBlock3(data) {
      this.totalObject = {
        InternalDeviceRunningAmount: data?.InternalDeviceRunningAmount ?? 0,
        ExternalDeviceRunningAmount: data?.ExternalDeviceRunningAmount ?? 0,
        OutPlanProductionAmount: data?.OutPlanProductionAmount ?? 0,
        PlanProductionAmount: data?.PlanProductionAmount ?? 0,
        RealExternalProductionAmount: data?.RealExternalProductionAmount ?? 0,
        RealProductionAmount: data?.RealProductionAmount ?? 0,
      };
    },
  },
};
</script>