物料情况,关重件生产进度。

src/api/screens/index.ts

@@ -42,3 +42,19 @@ export function productionPlan() {
     method: "POST",
   });
 }
+
+// 物料情况
+export function materialSituation() {
+  return request({
+    url: "/data/material",
+    method: "POST",
+  });
+}
+
+// 关重件生产进度
+export function productionSchedule() {
+  return request({
+    url: "/data/important",
+    method: "POST",
+  });
+}

src/styles/index.scss

@@ -136,3 +136,8 @@
   //background-color: yellow;
 }
 
+//胶囊柱图 下面的标签
+.unit-label {
+  //height: 1px;
+  visibility: hidden;
+}

src/views/screens/screen-components/MaterialsCondition.vue

@@ -1,12 +1,18 @@
 <template>
   <div class="screen-common-component">
     <ScreenComHeader :module-id="moduleId" title="物料情况" />
-    <dv-capsule-chart :config="config" class="charts-container" />
+    <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 { materialSituation } from "@/api/screens";
+import { allChartColors } from "@/views/screens/configs/chartsConfig";
 
 const config = ref({});
 
@@ -17,30 +23,20 @@ const props = defineProps({
   },
 });
 
-onMounted(() => {
+onMounted(async () => {
+  let res = await materialSituation();
+  let { data } = res;
+  let bigData: any[] = [];
+  data?.forEach((item: any) => {
+    bigData.push({
+      name: item.materialName,
+      value: item.count,
+    });
+  });
   config.value = {
-    data: [
-      {
-        name: "南阳",
-        value: 167,
-      },
-      {
-        name: "周口",
-        value: 67,
-      },
-      {
-        name: "漯河",
-        value: 123,
-      },
-      {
-        name: "郑州",
-        value: 55,
-      },
-      {
-        name: "西峡",
-        value: 98,
-      },
-    ],
+    colors: allChartColors,
+    data: bigData,
+    showValue: true,
   };
 });
 </script>

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

@@ -1,12 +1,18 @@
 <template>
   <div class="screen-common-component">
     <ScreenComHeader :module-id="moduleId" title="关重件生产进度" />
-    <dv-capsule-chart :config="config" class="charts-container" />
+    <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({});
 
@@ -17,22 +23,20 @@ const props = defineProps({
   },
 });
 
-onMounted(() => {
+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 = {
-    data: [
-      {
-        name: "关重件1",
-        value: 167,
-      },
-      {
-        name: "关重件2",
-        value: 67,
-      },
-      {
-        name: "关重件3",
-        value: 123,
-      },
-    ],
+    colors: allChartColors,
+    data: bigData,
+    showValue: true,
   };
 });
 </script>