当前生产订单进度,第n周生产订单完成情况, 不良top10。

src/api/screens/index.ts

@@ -98,3 +98,27 @@ export function productionStatisticsDetail() {
     method: "POST",
   });
 }
+
+//当前生产订单进度
+export function currentProductionSchedule() {
+  return request({
+    url: `/data/order/finish`,
+    method: "POST",
+  });
+}
+
+// 第n周生产订单完成情况
+export function weekProductionSchedule(num?: number) {
+  return request({
+    url: `/data/workOrder/finish`,
+    method: "POST",
+  });
+}
+
+//不良top10
+export function top10UnqualifiedProduct() {
+  return request({
+    url: `/data/bad`,
+    method: "POST",
+  });
+}

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

@@ -1,6 +1,6 @@
 <template>
   <div class="screen-common-component" style="padding: 8px 25px">
-    <ScreenComHeader :module-id="moduleId" title="第那周不良10" />
+    <ScreenComHeader :module-id="moduleId" title="第n周不良10" />
     <dv-scroll-ranking-board
       :config="config"
       style="width: 100%; height: calc(100% - 32px)"
@@ -10,6 +10,7 @@
 
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import { top10UnqualifiedProduct } from "@/api/screens";
 
 const config = ref({});
 
@@ -20,51 +21,11 @@ const props = defineProps({
   },
 });
 
-onMounted(() => {
+onMounted(async () => {
+  let res: any = await top10UnqualifiedProduct();
   config.value = {
     rowNum: 10,
-    data: [
-      {
-        name: "南阳",
-        value: 167,
-      },
-      {
-        name: "周口",
-        value: 67,
-      },
-      {
-        name: "漯河",
-        value: 123,
-      },
-      {
-        name: "郑州",
-        value: 55,
-      },
-      {
-        name: "西峡",
-        value: 98,
-      },
-      {
-        name: "南阳",
-        value: 167,
-      },
-      {
-        name: "周口",
-        value: 67,
-      },
-      {
-        name: "漯河",
-        value: 123,
-      },
-      {
-        name: "郑州",
-        value: 55,
-      },
-      {
-        name: "西峡",
-        value: 98,
-      },
-    ],
+    data: res?.data ?? [],
   };
 });
 </script>

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

@@ -16,17 +16,17 @@
         size="large"
         style="width: 100%; height: 100%"
       >
-        <el-table-column label="订单编号" prop="date" />
-        <el-table-column label="产品型号" prop="date" />
-        <el-table-column label="计划数量" prop="date" />
+        <el-table-column label="订单编号" prop="orderCode" />
+        <el-table-column label="产品型号" prop="materialModel" />
+        <el-table-column label="计划数量" prop="planNum" />
         <el-table-column label="各班次实际生产数量">
-          <el-table-column label="8:00-12:00" prop="state" />
-          <el-table-column label="12:00-16:00" prop="city" />
-          <el-table-column label="16:00-20:00" prop="address" />
+          <el-table-column label="8:00-12:00" prop="completeSum" />
+          <el-table-column label="12:00-16:00" prop="completeSum1" />
+          <el-table-column label="16:00-20:00" prop="completeSum2" />
         </el-table-column>
-        <el-table-column label="未完成数量" prop="date" />
-        <el-table-column label="完成进度" prop="date" />
-        <el-table-column label="状态" prop="date" />
+        <el-table-column label="未完成数量" prop="noCompleteNum" />
+        <el-table-column label="完成进度" prop="schedule" />
+        <el-table-column label="状态" prop="stateLabel" />
       </el-table>
     </div>
   </div>
@@ -34,6 +34,7 @@
 
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
+import { currentProductionSchedule } from "@/api/screens";
 
 const props = defineProps({
   moduleId: {
@@ -42,18 +43,12 @@ const props = defineProps({
   },
 });
 
-const tableData = [
-  {
-    date: "2016-05-03",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036",
-  },
-];
+const tableData = ref<any[]>([]);
 
-onMounted(() => {});
+onMounted(async () => {
+  let res: any = await currentProductionSchedule();
+  tableData.value = res.data ?? [];
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -9,112 +9,105 @@
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
+import { weekProductionSchedule } from "@/api/screens";
 
 const chartRef = ref(null);
 
-var data = [220, 182, 191, 234, 290, 120, 65, 444];
-var barWidth = 20;
-var maxNum = 0;
-for (var i = 0; i < data.length; i++) {
-  if (data[i] > maxNum) {
-    maxNum = data[i];
-  }
-}
+onMounted(async () => {
+  const chart = echarts.init(chartRef.value, "dark");
 
-const option = {
-  backgroundColor: "transparent",
-  // grid: {
-  //   top: "0%",
-  //   left: "0%",
-  //   right: "0%",
-  //   bottom: "0%",
-  // },
+  let res: any = await weekProductionSchedule();
 
-  title: {
-    text: "百分比柱子",
-    show: false,
-  },
-  xAxis: {
-    show: false,
-  },
-  yAxis: {
-    data: data.map((item, index) => `data ${index}`),
-    splitLine: {
+  const maxNum = Math.max.apply(null, res?.data[2]);
+  const barWidth = 20;
+
+  const option = {
+    backgroundColor: "transparent",
+    title: {
+      text: "百分比柱子",
       show: false,
     },
-    axisLabel: {
-      textStyle: { fontSize: "80%", color: "#02afff" },
-    },
-    axisLine: {
+    xAxis: {
       show: false,
     },
-    axisTick: false,
-  },
-  series: [
-    {
-      type: "bar",
-      barWidth: barWidth,
-      zlevel: 2,
-      data: data.map(function (item) {
-        return {
-          value: item,
-          maxNum: maxNum,
-        };
-      }),
-      label: {
-        show: true,
-        position: "inside",
-        // distance: 80,
-        align: "center",
-        formatter: function (params) {
-          // return params.data.realValue;
-          var percent =
-            Number((params.data.value / params.data.maxNum) * 100).toFixed(2) +
-            "%";
-          return percent;
-        },
-        color: "#fff",
-        fontSize: 12,
+    yAxis: {
+      data: res?.data[0],
+      splitLine: {
+        show: false,
       },
-      itemStyle: {
-        borderRadius: 10,
-        color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
-          { offset: 0, color: "#395CFE" },
-          { offset: 1, color: "#2EC7CF" },
-        ]),
+      axisLabel: {
+        textStyle: { fontSize: "40%", color: "#02afff" },
       },
+      axisLine: {
+        show: false,
+      },
+      axisTick: false,
     },
-    {
-      type: "bar",
-      barWidth: barWidth,
-      barGap: "-100%",
-      data: data.map(function (item) {
-        return {
-          realValue: item,
-          value: maxNum,
-        };
-      }),
-      label: {
-        show: true,
-        position: "right",
-        distance: 80,
-        align: "right",
-        formatter: function (params) {
-          return params.data.realValue + " 件";
+    series: [
+      {
+        type: "bar",
+        barWidth: barWidth,
+        zlevel: 2,
+        data: res?.data[1].map(function (item, index) {
+          return {
+            value: item,
+            maxNum: res?.data[2][index],
+          };
+        }),
+        label: {
+          show: true,
+          position: "inside",
+          // distance: 80,
+          align: "left",
+          formatter: function (params) {
+            // return params.data.realValue;
+            var percent =
+              Number((params.data.value / params.data.maxNum) * 100).toFixed(
+                2
+              ) + "%";
+            return percent;
+          },
+          color: "#fff",
+          fontSize: 12,
+        },
+        itemStyle: {
+          borderRadius: 10,
+          color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+            { offset: 0, color: "#395CFE" },
+            { offset: 1, color: "#2EC7CF" },
+          ]),
         },
-        color: "#02afff",
-        fontSize: 18,
       },
-      itemStyle: {
-        borderRadius: 10,
-        color: "rgba(3,169,244, 0.5)",
+      {
+        type: "bar",
+        barWidth: barWidth,
+        barGap: "-100%",
+        data: res?.data[2].map(function (item, index) {
+          return {
+            maxNum: maxNum,
+            completeNum: res?.data[1][index],
+            value: item,
+          };
+        }),
+        label: {
+          show: true,
+          position: "right",
+          distance: 80,
+          align: "right",
+          formatter: function (params) {
+            return params.data.completeNum + "/" + params.data.value + " 件";
+          },
+          color: "#02afff",
+          fontSize: 18,
+        },
+        itemStyle: {
+          borderRadius: 10,
+          color: "rgba(3,169,244, 0.5)",
+        },
       },
-    },
-  ],
-};
+    ],
+  };
 
-onMounted(() => {
-  const chart = echarts.init(chartRef.value, "dark");
   chart.setOption(option);
 });