yangfeng
2023-12-05 8d1a8a22ff13bab740ff3c427eb531fd6ce97844
src/views/cockpitPage/index.vue
@@ -4,7 +4,10 @@
      <StatisticalBox :all-list="allList"></StatisticalBox>
    </template>
    <template #leftBlock2>
      <MachineStartupRate></MachineStartupRate>
      <MachineStartupRate
        ref="leftBlock2"
        :startup-rate="startupRateString"
      ></MachineStartupRate>
    </template>
    <template #leftBlock3>
      <CountView :total-object="totalObject"></CountView>
@@ -15,13 +18,13 @@
      ></OrderCompleteRadio>
    </template>
    <template #leftBlock5>
      <WorkOrderProgress></WorkOrderProgress>
      <WorkOrderProgress :table-data="workOrderData"></WorkOrderProgress>
    </template>
    <template #leftBlock6>
      <PerSonnelProductivity></PerSonnelProductivity>
    </template>
    <template #rightBlock1>
      <DeviceChart></DeviceChart>
      <DeviceChart ref="rightBlock1" :chartData="deviceChartData"></DeviceChart>
    </template>
    <template #rightBlock2>
      <MaterialChart></MaterialChart>
@@ -69,12 +72,26 @@
        { value: 0, label: "物料不足" },
        { value: 0, label: "计划达成率" },
      ],
      // 机器开机率
      startupRate: {
        Total: 0, // 总机器数
        Running: 0, // 开机台数
        Maintenance: 0, // 维修中设备数
      },
      startupRateString: "0", // 开机率
      // 左中数据统计对象
      totalObject: {},
      // 订单完成比率
      orderCompleteObject: {
        startIndex: 0,
        orderCompleteList: [],
      },
      // 工单进度统计
      workOrderData: [],
      // 设备负荷对比
      deviceChartData: {
        datax: [],
        datay: [],
      },
      dataindex: 0,
    };
@@ -83,7 +100,7 @@
    this.getDashboard();
    setInterval(() => {
      this.getDashboard();
    }, 300000);
    }, 30000);
  },
  watch: {},
  methods: {
@@ -92,10 +109,16 @@
        console.log(res);
        // 左上数值统计数据
        this.setLeftBlock1(res.data);
        // 机器开机率数据
        this.setleftBlock2(res.data);
        //  左中数据统计值
        this.setLeftBlock3(res.data);
        // 订单完成比率
        this.setLeftBlock4(res.data);
        // 工单进度统计
        this.setLeftBlock5(res.data);
        // 设备负荷对比
        this.setRightBlock1(res.data);
      });
    },
    // 处理左上数据
@@ -123,6 +146,28 @@
        }
      });
    },
    // 机器开机率数据
    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) {
      this.totalObject = {
@@ -137,44 +182,49 @@
    // 订单完成比率
    setLeftBlock4(data) {
      this.orderCompleteObject.startIndex = 0;
      // 此处后面会替换成真实后端返回数据
      if (this.dataindex == 1) {
        this.orderCompleteObject.orderCompleteList = [
          { title: "SSSSDD19070047", radio: 20.6 },
          { title: "SDD19070048", radio: 79 },
          { title: "SDD19070049", radio: 100 },
          { title: "SDD19070050", radio: 30 },
          { title: "DD19070047", radio: 20.6 },
          { title: "DD19070048", radio: 49 },
          { title: "DD19070049", radio: 60 },
          { title: "SSDD19070050", radio: 10 },
          { title: "SDD19070047", radio: 33.6 },
          { title: "DD19070048", radio: 69 },
          { title: "SDD19070049", radio: 70 },
          { title: "DD19070050", radio: 20 },
          { title: "SDD19070047", radio: 66.6 },
          { title: "DD19070048", radio: 46 },
        ];
        this.dataindex = 0;
      } else {
        this.orderCompleteObject.orderCompleteList = [
          { title: "fffffDD19070047", radio: 50.6 },
          { title: "DD19070043", radio: 89 },
          { title: "DD15566649", radio: 100 },
          { title: "ASD5555550", radio: 30 },
          { title: "DD19070047", radio: 30.6 },
          { title: "DD19070048", radio: 49 },
          { title: "DD19070049", radio: 60 },
          { title: "DD19070050", radio: 10 },
          { title: "DD19070047", radio: 33.6 },
          { title: "DD19070048", radio: 69 },
          { title: "DD19070049", radio: 70 },
          { title: "DD19070050", radio: 20 },
          { title: "DD19070047", radio: 66.6 },
          { title: "DD19070048", radio: 96 },
        ];
        this.dataindex = 1;
      }
      this.orderCompleteObject.orderCompleteList = [];
      let list = data.OrderFinishRate.map((item) => {
        return {
          title: item.Name,
          radio: parseFloat(item.Value),
        };
      });
      this.orderCompleteObject.orderCompleteList = list;
    },
    // 工单进度统计
    setLeftBlock5(data) {
      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;
    },
    // 设备负荷对比
    setRightBlock1(data) {
      this.deviceChartData.datax = [];
      this.deviceChartData.datay = [];
      data.DeviceLoad.map((item) => {
        this.deviceChartData.datax.push(item.Name);
        this.deviceChartData.datay.push(parseFloat(item.Value));
      });
      // this.$refs.rightBlock1.pieChart("chart", this.deviceChartData);
    },
  },
};