工位任务布局，datav安装。

package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@kjgl77/datav-vue3": "^1.7.3",
     "@smallwei/avue": "^3.3.3",
     "@types/smallwei__avue": "^3.0.5",
     "@vueup/vue-quill": "1.0.0-alpha.40",

src/plugins/icons.ts

@@ -1,8 +1,12 @@
 import type { App } from "vue";
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 
+import DataVVue3 from "@kjgl77/datav-vue3";
+
 // 注册所有图标
 export function setupElIcons(app: App<Element>) {
+  app.use(DataVVue3);
+
   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component);
   }

src/views/report/statistics/screens/tasks/index.vue

@@ -1,14 +1,35 @@
 <template>
-  <div class="screen-container">
-    <common-header title="工位任务分布" />
-    <div class="screen-content">
-      <div v-for="(item, index) in data" :key="index" class="grid-item"></div>
+  <dv-full-screen-container>
+    <div class="screen-container">
+      <common-header title="工位任务分布" />
+      <div class="screen-content">
+        <div v-for="(item, index) in data" :key="index" class="grid-item">
+          <title-header title="入库检料" />
+          <div class="grid-bottom">
+            <div class="left-info">
+              <div class="box">
+                <div class="title">工位名称</div>
+                <div class="code">工位代码</div>
+              </div>
+              <div class="box">
+                <div>
+                  <span class="com-num">完成数量/</span>
+                  <span class="plan-num">计划数量</span>
+                </div>
+                <div class="desc">任务描述</div>
+              </div>
+            </div>
+            <div class="right-chart">dd</div>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
+  </dv-full-screen-container>
 </template>
 
 <script lang="ts" setup>
 import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
+import TitleHeader from "@/views/report/statistics/screens/titleHeader.vue";
 
 const data = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
 </script>
@@ -40,6 +61,68 @@ const data = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
     height: 300px;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 8px 8px 8px 8px;
+    padding: 16px;
+
+    .grid-bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 100%;
+
+      .left-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: start;
+        padding: 0px 18px;
+        border: 2px solid white;
+
+        .box {
+          height: 50%;
+          border: 2px solid red;
+        }
+
+        .title {
+          font-weight: 500;
+          font-size: 24px;
+          color: #ffffff;
+          line-height: 20px;
+        }
+
+        .code {
+          font-weight: 400;
+          font-size: 17px;
+          color: #fff8;
+          line-height: 17px;
+        }
+
+        .com-num {
+          font-weight: 500;
+          font-size: 48px;
+          color: #55d1aa;
+        }
+
+        .plan-num {
+          font-weight: 500;
+          font-size: 48px;
+          color: #fff;
+        }
+
+        .desc {
+          font-weight: 400;
+          font-size: 17px;
+          color: #ffffff;
+          line-height: 17px;
+        }
+      }
+
+      .right-chart {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-right: 28px;
+      }
+    }
   }
 }
 </style>