yangfeng
2023-12-11 da4d9e70d2c37f59a365b0fb88ad70e8c1ba79b4
src/views/cockpitPage/index.vue
@@ -1,30 +1,42 @@
<template>
  <BackgroundBoardLayout>
    <template #leftBlock1>
      <StatisticalBox></StatisticalBox>
      <StatisticalBox :all-list="allList"></StatisticalBox>
    </template>
    <template #leftBlock2>
      <MachineStartupRate></MachineStartupRate>
      <MachineStartupRate
        ref="leftBlock2"
        :startup-rate="startupRateString"
      ></MachineStartupRate>
    </template>
    <template #leftBlock3>
      <CountView></CountView>
      <CountView :total-object="totalObject"></CountView>
    </template>
    <template #leftBlock4>
      <OrderCompleteRadio></OrderCompleteRadio>
      <OrderCompleteRadio
        :order-complete-object="orderCompleteObject"
      ></OrderCompleteRadio>
    </template>
    <template #leftBlock5>
      <WorkOrderProgress
        :work-order-finish-rate="workOrderFinishRate"
        :table-data="workOrderData"
      ></WorkOrderProgress>
    </template>
    <template #leftBlock6>
      <PerSonnelProductivity
        @should-reload="reloadAllData"
        ref="leftBlock6"
        :chartData="perSonnelChartData"
      ></PerSonnelProductivity>
    </template>
    <template #rightBlock1>
      <DeviceChart @should-reload="reloadAllData"></DeviceChart>
      <DeviceChart ref="rightBlock1" :chartData="deviceChartData"></DeviceChart>
    </template>
    <template #rightBlock2>
      <MaterialChart @should-reload="reloadAllData"></MaterialChart>
      <MaterialChart :chartData="materialChartData"></MaterialChart>
    </template>
    <template #rightBlock3>
      <BarChart @should-reload="reloadAllData"></BarChart>
      <BarChart :chartData="barChartData"></BarChart>
    </template>
  </BackgroundBoardLayout>
</template>
@@ -39,6 +51,8 @@
import MaterialChart from "@/views/cockpitPage/components/MaterialChart.vue";
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,
@@ -50,14 +64,302 @@
    MachineStartupRate,
    CountView,
    OrderCompleteRadio,
    WorkOrderProgress,
  },
  props: {},
  data() {
    return {};
    return {
      // 左上数据统计数据
      allList: [
        { value: 0, label: "开机台数" },
        { value: 0, label: "总产量" },
        { value: 0, label: "生产工单数" },
        { value: 0, label: "延期交付" },
        { value: 0, label: "物料不足/待排程" },
        { value: 0, label: "计划达成率" },
      ],
      // 机器开机率
      startupRate: {
        Total: 0, // 总机器数
        Running: 0, // 开机台数
        Maintenance: 0, // 维修中设备数
      },
      startupRateString: "0", // 开机率
      // 左中数据统计对象
      totalObject: {},
      // 订单完成比率
      orderCompleteObject: {
        startIndex: 0,
        orderCompleteList: [],
      },
      // 工单进度统计
      workOrderData: [],
      workOrderFinishRate: "",
      // 人员生产效率
      perSonnelChartData: {
        datax: [],
        datay: [],
      },
      // 设备负荷对比
      deviceChartData: {
        datax: [],
        datay: [],
      },
      // 物料需求统计
      materialChartData: {
        datax: [],
        datay: [],
      },
      // 车间正品率
      barChartData: {
        total: 0,
        rate: "0",
        datax: [],
        datay: [],
        datay2: [],
      },
    };
  },
  mounted() {},
  mounted() {
    this.getDashboard();
  },
  watch: {},
  methods: {},
  methods: {
    async getDashboard() {
      await getDashboard()
        .then((res) => {
          console.log(res);
          // 左上数值统计数据
          this.setLeftBlock1(res.data);
          // 机器开机率数据
          this.setleftBlock2(res.data);
          //  左中数据统计值
          this.setLeftBlock3(res.data);
          // 订单完成比率
          this.setLeftBlock4(res.data);
          // 工单进度统计
          this.setLeftBlock5(res.data);
          // 人员生效效率比 人员技能
          this.setLeftBlock6(res.data);
          // 设备负荷对比
          this.setRightBlock1(res.data);
          // 物料需求统计
          this.setRightBlock2(res.data);
          // 车间正品率
          this.setRightBlock3(res.data);
        })
        .finally(() => {
          setTimeout(() => {
            this.getDashboard();
          }, 300000);
        });
    },
    // 处理左上数据
    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;
          item.value1 = data?.WaitSchedulingWorkOrderAmount ?? 0;
        } else if (item.label === "计划达成率") {
          let value =
            typeof data?.PlanOrderFinishRate === "string"
              ? parseFloat(
                  data?.PlanOrderFinishRate.length > 0
                    ? data?.PlanOrderFinishRate
                    : "0"
                )
              : data?.PlanOrderFinishRate ?? 0;
          item.value = value.toString() + "%";
        }
      });
    },
    // 机器开机率数据
    setleftBlock2(data) {
      this.startupRate = {
        Total: data?.TotalDeviceAmount ?? 0,
        Running: data?.DeviceRunningAmount ?? 0,
        Maintenance: data?.InMaintenanceDeviceAmount ?? 0,
      };
      // 开机率
      let setsInUse = (this.startupRate.Running / this.startupRate.Total) * 100;
      this.startupRateString = setsInUse.toFixed(1).toString();
      // 维修率
      let maintenanceRate =
        (this.startupRate.Maintenance / this.startupRate.Total) * 100;
      // 闲置率
      let idle = 100 - setsInUse - maintenanceRate;
      let chartData = [
        { value: idle.toFixed(1), name: "闲置" },
        { value: maintenanceRate.toFixed(1), name: "维修" },
        { value: setsInUse.toFixed(1), name: "工作" },
      ];
      this.$refs.leftBlock2.pieChart("chart", chartData);
    },
    // 左中数据统计值
    setLeftBlock3(data) {
      console.log(this.setNumbers(data?.OutPlanProductionAmount ?? 0));
      this.totalObject = {
        InternalDeviceRunningAmount: (
          data?.InternalDeviceRunningAmount ?? 0
        ).toString(),
        ExternalDeviceRunningAmount: data?.ExternalDeviceRunningAmount ?? 0,
        OutPlanProductionAmount: this.setNumbers(
          data?.OutPlanProductionAmount ?? 0
        ),
        PlanProductionAmount: this.setNumbers(data?.PlanProductionAmount ?? 0),
        RealExternalProductionAmount: this.setNumbers(
          data?.RealExternalProductionAmount ?? 0
        ),
        RealProductionAmount: this.setNumbers(data?.RealProductionAmount ?? 0),
      };
    },
    // 订单完成比率
    setLeftBlock4(data) {
      this.orderCompleteObject.startIndex = 0;
      this.orderCompleteObject.orderCompleteList = [];
      if (data.OrderFinishRate && data.OrderFinishRate.length > 0) {
        let list = data?.OrderFinishRate.map((item) => {
          return {
            title: item.Name,
            radio: parseFloat(item.Value),
          };
        });
        this.orderCompleteObject.orderCompleteList = list;
      }
    },
    // 工单进度统计
    setLeftBlock5(data) {
      this.workOrderFinishRate = data?.WorkOrderFinishRate.toString() ?? "0";
      if (data.WorkOrderStats && data.WorkOrderStats.length > 0) {
        let list = data.WorkOrderStats.map((item) => {
          let completeProgerss = [];
          for (let i = 0; i < item.ProcedureNum; i++) {
            let status = 0;
            if (i < item.FinishProcedureNum) {
              status = 1;
            } else if (
              i >= item.FinishProcedureNum &&
              i < item.FinishProcedureNum + item.ProcessingProcedureNum
            ) {
              status = 2;
            } else {
              status = 0;
            }
            completeProgerss.push({ status: status });
          }
          return {
            ...item,
            completeProgerss: completeProgerss,
          };
        });
        this.workOrderData = list;
      }
    },
    // 人员生效效率比 人员技能
    setLeftBlock6(data) {
      this.perSonnelChartData.datax = [];
      this.perSonnelChartData.datay = [];
      if (data.PersonnelProductivity && data.PersonnelProductivity.length > 0) {
        data.PersonnelProductivity.map((item) => {
          this.perSonnelChartData.datax.push(item.Name);
          this.perSonnelChartData.datay.push(parseFloat(item.Value));
        });
      }
      // 人员技能饼图
      let chartData2 = [];
      if (data.WorkerTypeStats && data.WorkerTypeStats.length > 0) {
        chartData2 = data.WorkerTypeStats.map((item) => {
          return {
            name: item.Name,
            value: parseFloat(item.Value),
          };
        });
        this.$refs.leftBlock6.getChartRight("chart2", chartData2);
      }
    },
    // 设备负荷对比
    setRightBlock1(data) {
      this.deviceChartData.datax = [];
      this.deviceChartData.datay = [];
      if (data.DeviceLoad && data.DeviceLoad.length > 0) {
        data.DeviceLoad.map((item) => {
          this.deviceChartData.datax.push(item.Name);
          this.deviceChartData.datay.push(parseFloat(item.Value));
        });
      }
    },
    // 物料需求统计
    setRightBlock2(data) {
      this.materialChartData.datax = [];
      this.materialChartData.datay = [];
      if (data.MaterialRequirement && data.MaterialRequirement.length > 0) {
        data.MaterialRequirement.map((item) => {
          this.materialChartData.datax.push(item.Name);
          this.materialChartData.datay.push(parseFloat(item.Value));
        });
      }
    },
    // 车间正品率
    setRightBlock3(data) {
      this.barChartData.total = data.TodayFinishAmount;
      this.barChartData.rate = data.TodayQualifiedRate;
      this.barChartData.datax = [];
      this.barChartData.datay = [];
      this.barChartData.datay2 = [];
      if (data.WorkshopStats && data.WorkshopStats.length > 0) {
        data.WorkshopStats.map((item) => {
          this.barChartData.datax.push(item.Name);
          this.barChartData.datay.push(parseFloat(item.Qualified));
          this.barChartData.datay2.push(parseFloat(item.Defective));
        });
      }
    },
    // 计算加工数 生产数
    setNumbers(val) {
      if (val > 1000 && val < 10000) {
        let count = (val / 1000).toFixed(2);
        return count.toString() + "千";
      } else if (val >= 10000 && val < 100000) {
        let count1 = (val / 10000).toFixed(2);
        return count1.toString() + "万";
      } else if (val >= 100000 && val < 1000000) {
        let count1 = (val / 100000).toFixed(0);
        return count1.toString() + "十万";
      } else if (val >= 1000000 && val < 10000000) {
        let count1 = (val / 1000000).toFixed(0);
        return count1.toString() + "百万";
      } else if (val >= 10000000 && val < 100000000) {
        let count1 = (val / 10000000).toFixed(0);
        return count1.toString() + "千万";
      } else if (val >= 100000000 && val < 1000000000) {
        let count1 = (val / 100000000).toFixed(2);
        return count1 + "亿";
      } else if (val >= 1000000000 && val < 10000000000) {
        let count1 = (val / 1000000000).toFixed(0);
        return count1.toString() + "十亿";
      } else if (val >= 10000000000 && val < 100000000000) {
        let count1 = (val / 10000000000).toFixed(0);
        return count1.toString() + "百亿";
      } else if (val >= 100000000000 && val < 1000000000000) {
        let count1 = (val / 100000000000).toFixed(0);
        return count1.toString() + "千亿";
      } else if (val >= 1000000000000) {
        let count1 = (val / 1000000000000).toFixed(0);
        return count1.toString() + "万亿";
      } else {
        return val.toString();
      }
    },
  },
};
</script>