展会大屏 计划产量修改

src/views/MicroExhibition/table.vue

@@ -15,7 +15,9 @@
             </div>
         </div>
         <div class="table-container">
-            <el-table :data="tableData" style="width: 100%" :header-cell-style="{
+            <div class="item" v-for="(val, key) in objList">
+                <h3>{{ key }}</h3>
+                <el-table :data="val" style="width: 100%" :header-cell-style="{
                     'text-align': 'center',
                     'font-size': '20px',
                     'background': '#162556 !important',
@@ -34,19 +36,35 @@
                     </el-table-column>
                 </el-table>
             </div>
-        <div>
-            <el-button @click="saveData" type="success" style="background-color: #00B38B;">保存</el-button>
+            <div class="item">
+                <el-button @click="saveData" size="large" type="success" style="background-color: #00B38B;">保存</el-button>
             </div>
+        </div>
+
 
     </div>
 </template>
 
 <script setup lang="ts">
 import header2 from '@/components/headerBox/header2.vue'
-import { ref, onMounted } from 'vue';
-import { ElTable, ElTableColumn, ElInput, ElButton, ElMessage,ElMessageBox } from 'element-plus';
+import { ref, reactive, onMounted } from 'vue';
+import { ElTable, ElTableColumn, ElInput, ElButton, ElMessage, ElMessageBox } from 'element-plus';
 import { getPlanProduction, insertPlanProduction } from '@/http/cisma';
 const tableData = ref([]);
+let obj = {
+    caijian: ['1190269', '1050910'],
+    tuoxie: ['116023#'],
+    fengzhong: ['RP2011001#', '1021629', '10102109', '10102154', 'RP2011157'],
+    banfang: ['10410207', '104019420', '10404393', '1131514', '104019428'],
+    zuoyi: ['1171902', '10201557', '1171701', '1170304']
+}
+let objList = reactive({
+    '裁剪设备': [],
+    '一次性拖鞋生产线': [],
+    '缝中设备': [],
+    '板房设备': [],
+    '座椅面套生产线': []
+})
 onMounted(() => {
     // 获取数据
     fetchPlanProduction();
@@ -58,6 +76,19 @@ async function fetchPlanProduction(): Promise<any> {
         if (res.code === 200) {
             // console.log(res);
             tableData.value = res.data
+            res.data.forEach((item) => {
+                if (obj.caijian.includes(item.label)) {
+                    objList.裁剪设备.push(item)
+                } else if (obj.tuoxie.includes(item.label)) {
+                    objList.一次性拖鞋生产线.push(item)
+                } else if (obj.fengzhong.includes(item.label)) {
+                    objList.缝中设备.push(item)
+                } else if (obj.banfang.includes(item.label)) {
+                    objList.板房设备.push(item)
+                } else if (obj.zuoyi.includes(item.label)) {
+                    objList.座椅面套生产线.push(item)
+                }
+            })
         }
     } catch (error) {
         console.error('Failed to fetch plan production:', error);
@@ -95,12 +126,20 @@ async function saveData() {
 
 </script>
 <style scoped>
+h3 {
+    font-size: 24px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: left;
+}
+
 .container {
     height: 1080px;
     width: 1920px;
     color: #FFFFFF;
     background-color: #0E0E0E;
-    position: relative;
+    overflow: auto;
+    overflow-y: scroll;
     /* text-align: center; */
 
 }
@@ -125,14 +164,23 @@ async function saveData() {
 }
 
 .table-container {
-    width: 70%;
-    margin-left: 15%;
-    margin-top: 20px;
+    width: 95%;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
 }
 
-.el-button {
-    margin-left: 65%;
-    margin-top: 10px;
+.item {
+    width: 48%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
 }
+
 </style>