生产量情况,生产任务统计。

src/api/screens/index.ts

@@ -58,3 +58,19 @@ export function productionSchedule() {
     method: "POST",
   });
 }
+
+//生产任务统计
+export function productionStatistics() {
+  return request({
+    url: "/data/orderStatistics",
+    method: "POST",
+  });
+}
+
+// 生产量情况
+export function productionQuantity() {
+  return request({
+    url: "/data/productionInfo",
+    method: "POST",
+  });
+}

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

@@ -12,62 +12,6 @@ import { allChartColors } from "@/views/screens/configs/chartsConfig";
 import { unqualifiedProduct } from "@/api/screens";
 
 const chartRef = ref(null);
-const data = {
-  legendData: [
-    "沈蓝郎",
-    "何岑董",
-    "喻路孙尤·黄屈",
-    "殷祁岑鲁·齐",
-    "乐赵方",
-    "郎柳",
-    "苏尤",
-    "金邵茅",
-    "康姚汪",
-    "袁奚汪茅·孙",
-  ],
-  seriesData: [
-    {
-      name: "沈蓝郎",
-      value: 92046,
-    },
-    {
-      name: "何岑董",
-      value: 4647,
-    },
-    {
-      name: "喻路孙尤·黄屈",
-      value: 67173,
-    },
-    {
-      name: "殷祁岑鲁·齐",
-      value: 85032,
-    },
-    {
-      name: "乐赵方",
-      value: 42687,
-    },
-    {
-      name: "郎柳",
-      value: 39540,
-    },
-    {
-      name: "苏尤",
-      value: 43617,
-    },
-    {
-      name: "金邵茅",
-      value: 18320,
-    },
-    {
-      name: "康姚汪",
-      value: 30264,
-    },
-    {
-      name: "袁奚汪茅·孙",
-      value: 84637,
-    },
-  ],
-};
 
 const gernerateOptionsWithData = (
   data: any,

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

@@ -1,17 +1,17 @@
 <template>
   <div class="screen-common-component">
-    <ScreenComHeader :module-id="moduleId" align="start" title="产品生产情况" />
+    <ScreenComHeader :module-id="moduleId" align="start" title="生产量情况" />
     <div class="container">
       <div ref="chartRef" class="charts-container"></div>
       <div class="describe-container">
         <div>
           <span class="typeText">生产目标</span>
-          <span class="valueText">70</span>
+          <span class="valueText">{{ progressOption.orderNum }}</span>
           <span class="unitText">件</span>
         </div>
         <div>
           <span class="typeText">实际生产量</span>
-          <span class="valueText">80</span>
+          <span class="valueText">{{ progressOption.comNum }}</span>
           <span class="unitText">件</span>
         </div>
       </div>
@@ -29,75 +29,92 @@
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
+import { productionQuantity } from "@/api/screens";
 
 const chartRef = ref(null);
 
-const option = {
-  series: [
-    {
-      type: "gauge",
-      progress: {
-        show: true,
-        width: 12,
-      },
-      axisLine: {
-        lineStyle: {
+const generateOption = (c: string, o: string) => {
+  const option = {
+    series: [
+      {
+        type: "gauge",
+        progress: {
+          show: true,
           width: 12,
         },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        distance: 2,
-        length: 4,
-        lineStyle: {
-          width: 2,
+        axisLine: {
+          lineStyle: {
+            width: 12,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          distance: 2,
+          length: 4,
+          lineStyle: {
+            width: 2,
+            color: "#999",
+          },
+        },
+        axisLabel: {
+          distance: 12,
           color: "#999",
+          fontSize: 14,
         },
-      },
-      axisLabel: {
-        distance: 12,
-        color: "#999",
-        fontSize: 14,
-      },
-      anchor: {
-        show: true,
-        showAbove: true,
-        size: 16,
-        itemStyle: {
-          borderWidth: 10,
+        anchor: {
+          show: true,
+          showAbove: true,
+          size: 16,
+          itemStyle: {
+            borderWidth: 10,
+          },
         },
-      },
-      title: {
-        show: false,
-      },
-      detail: {
-        valueAnimation: true,
-        fontSize: 16,
-        offsetCenter: [0, "70%"],
-        formatter: "{value}%",
-        textStyle: {
-          color: "#fff",
+        title: {
+          show: false,
         },
-      },
-      data: [
-        {
-          value: 70,
+        detail: {
+          valueAnimation: true,
+          fontSize: 16,
+          offsetCenter: [0, "70%"],
+          formatter: "{value}%",
+          textStyle: {
+            color: "#fff",
+          },
         },
-      ],
-    },
-  ],
+        data: [
+          {
+            value: Number((Number(c) / Number(o)) * 100).toFixed(0),
+          },
+        ],
+      },
+    ],
+  };
+  return option;
 };
 
 const progressOption = ref({
   value: 66,
   localGradient: true,
+  orderNum: 0,
+  comNum: 0,
 });
 
-onMounted(() => {
+onMounted(async () => {
   const chart = echarts.init(chartRef.value);
-  chart.setOption(option);
+
+  let res: any = await productionQuantity();
+  let { data } = res;
+
+  progressOption.value = {
+    value: Number(data.rate) * 100,
+    localGradient: true,
+    orderNum: Number(data.orderNum),
+    comNum: Number(data.completeNum),
+  };
+
+  chart.setOption(generateOption(data.completeNum, data.orderNum));
 });
 
 const props = defineProps({

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

@@ -14,6 +14,7 @@
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
+import { productionStatistics } from "@/api/screens";
 
 const props = defineProps({
   moduleId: {
@@ -26,16 +27,33 @@ const chartLeftRef = ref(null);
 const chartMiddleRef = ref(null);
 const chartRightRef = ref(null);
 
-onMounted(() => {
+onMounted(async () => {
   const chartl = echarts.init(chartLeftRef.value, "dark");
   const chartm = echarts.init(chartMiddleRef.value, "dark");
   const chartr = echarts.init(chartRightRef.value, "dark");
 
-  chartl.setOption(gernerateOptionsWithData([40, 4], "1000", "件"));
+  let res: any = await productionStatistics();
+  let { data } = res;
+
+  chartl.setOption(
+    gernerateOptionsWithData([data.orderNum], data.orderNum, "件")
+  );
   chartm.setOption(
-    gernerateOptionsWithData([40, 50], "1000", "件", "实际生产数")
+    gernerateOptionsWithData(
+      [data.completeNum],
+      data.completeNum,
+      "件",
+      "实际生产数"
+    )
+  );
+  chartr.setOption(
+    gernerateOptionsWithData(
+      [Number(data.rate), 1 - Number(data.rate)],
+      Number(data.rate) * 100 + "",
+      "%",
+      "合格率"
+    )
   );
-  chartr.setOption(gernerateOptionsWithData([40, 50], "57", "%", "合格率"));
 });
 
 const gernerateOptionsWithData = (