SynthesisManagement/src/views/screens/screen-components/ProductionScheduleOfHeavyParts.vue

<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="关重件生产进度" />
    <dv-capsule-chart
      :config="config"
      class="charts-container"
      style="width: calc(100% - 20px)"
    />
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import { productionSchedule } from "@/api/screens";
import { allChartColors } from "@/views/screens/configs/chartsConfig";

const config = ref({});

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});

onMounted(async () => {
  let res = await productionSchedule();
  let { data } = res;
  let bigData: any[] = [];
  data?.forEach((item: any) => {
    bigData.push({
      name: item.materialName,
      value: item.count,
    });
  });
  config.value = {
    colors: allChartColors,
    data: bigData,
    showValue: true,
  };
});
</script>