展会大屏 计划产量修改

src/views/MicroExhibition/table.vue

@@ -15,38 +15,56 @@
             </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">
-                'text-align': 'center',
+                <h3>{{ key }}</h3>
-                'font-size': '20px',
+                <el-table :data="val" style="width: 100%" :header-cell-style="{
-                'background': '#162556 !important',
+                    'text-align': 'center',
-                'color': '#ffffff',
+                    'font-size': '20px',
-                'border': 'none !important'
+                    'background': '#162556 !important',
-            }">
+                    'color': '#ffffff',
-                <el-table-column prop="order" label="序号" width="80" align="center"></el-table-column>
+                    'border': 'none !important'
-                <el-table-column align="center" prop="name" label="设备名称"></el-table-column>
+                }">
-                <el-table-column prop="label" label="设备编号" align="center"></el-table-column>
+                    <el-table-column prop="order" label="序号" width="80" align="center"></el-table-column>
-                <el-table-column prop="planProduction" label="计划任务" align="center">
+                    <el-table-column align="center" prop="name" label="设备名称"></el-table-column>
-                    <template #default="{ row }">
+                    <el-table-column prop="label" label="设备编号" align="center"></el-table-column>
-                        <div class="centered-input">
+                    <el-table-column prop="planProduction" label="计划任务" align="center">
-                            <el-input v-model="row.planProduction" placeholder="请输入" clearable />
+                        <template #default="{ row }">
-                        </div>
+                            <div class="centered-input">
-                    </template>
+                                <el-input v-model="row.planProduction" placeholder="请输入" clearable />
-                </el-table-column>
+                            </div>
-            </el-table>
+                        </template>
-        </div>
+                    </el-table-column>
-        <div>
+                </el-table>
-            <el-button @click="saveData" type="success" style="background-color: #00B38B;">保存</el-button>
+            </div>
+            <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 { ref, reactive, onMounted } from 'vue';
-import { ElTable, ElTableColumn, ElInput, ElButton, ElMessage,ElMessageBox } from 'element-plus';
+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%;
+    width: 95%;
-    margin-left: 15%;
+    padding: 20px;
-    margin-top: 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
 }
 
-.el-button {
+.item {
-    margin-left: 65%;
+    width: 48%;
-    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
 }
+
 </style>