1.任务状态统计图

src/api/order/index.ts

@@ -126,3 +126,12 @@ export function distributeWorkOrder(workOrderId: any) {
     method: "get",
   });
 }
+
+// 工位任务状态统计
+export function getStatistics(data: Object) {
+  return request({
+    url: "/api/v1/plan/task/statistics",
+    method: "post",
+    data: data,
+  });
+}

src/views/plan/schedule/index.vue

@@ -16,7 +16,7 @@
       @current-change="dataList"
       @selection-change="selectionChange"
     >
-      <template #menu-left="{ size }">
+      <template #menu-left>
         <div id="charts"></div>
       </template>
     </avue-crud>
@@ -28,6 +28,8 @@ import { useCrud } from "@/hooks/userCrud";
 import dictDataUtil from "@/common/configs/dictDataUtil";
 
 import { useDictionaryStoreHook } from "@/store";
+import { getStatistics } from "@/api/order/index";
+import * as echarts from "echarts";
 
 // 数据字典相关
 const { dicts } = useDictionaryStoreHook();
@@ -44,8 +46,41 @@ const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等
 
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
 
+const charts = ref(null);
+
 onMounted(() => {
+  charts.value = echarts.init(document.getElementById("charts"));
+
   dataList();
+
+  getStatistics(search.value).then((res) => {
+    const { data } = res;
+    const { value, key } = data;
+    charts.value.setOption({
+      title: {
+        text: "任务状态统计图",
+        left: "center",
+      },
+      xAxis: {
+        data: key,
+      },
+      yAxis: {},
+      series: [
+        {
+          type: "bar",
+          data: value,
+          itemStyle: {
+            barBorderRadius: 5,
+            borderWidth: 1,
+            borderType: "solid",
+            borderColor: "#73c0de",
+            shadowColor: "#5470c6",
+            shadowBlur: 3,
+          },
+        },
+      ],
+    });
+  });
 });
 
 // 设置表格列或者其他自定义的option
@@ -73,15 +108,7 @@ option.value = Object.assign(option.value, {
       prop: "workOrderCode",
       search: true,
     },
-    {
-      label: "工单名称",
-      prop: "workOrderName",
-    },
-    {
-      label: "产线编码",
-      prop: "productLineCode",
-      search: true,
-    },
+
     {
       label: "产线名称",
       prop: "productLineName",
@@ -95,10 +122,7 @@ option.value = Object.assign(option.value, {
       prop: "materialCode",
       search: true,
     },
-    {
-      label: "工单名称",
-      prop: "workOrderName",
-    },
+
     {
       label: "工序编码",
       prop: "operationCode",
@@ -129,17 +153,17 @@ option.value = Object.assign(option.value, {
       label: "计划结束时间",
       prop: "planStartEnd",
     },
-    {
-      label: "修改时间",
-      prop: "updated",
-    },
   ],
 });
 </script>
 
 <style lang="scss" scoped>
+:deep(.avue-crud__left) {
+  width: 100%;
+}
 #charts {
   width: 100%;
   height: 300px;
+  border: 1px solid #ccc;
 }
 </style>