From 96fe27bee619f23d23a4b31acf7785a073467604 Mon Sep 17 00:00:00 2001
From: chenhc <2369838784@qq.com>
Date: Wed, 6 Nov 2024 10:36:54 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=B5=8B=E8=AF=95=E8=B4=A7?=
 =?UTF-8?q?=E6=9E=B6=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ShelfDisplay/index.vue         | 53 +++++++++++
 src/views/basic/collectPoint/timerSetting.vue | 94 ++++++++++++++++++-
 2 files changed, 146 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ShelfDisplay/index.vue

diff --git a/src/components/ShelfDisplay/index.vue b/src/components/ShelfDisplay/index.vue
new file mode 100644
index 00000000..ba51f51e
--- /dev/null
+++ b/src/components/ShelfDisplay/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="shelf">
+    <div
+      v-for="(row, rowIndex) in shelfData"
+      :key="rowIndex"
+      class="shelf-row"
+      :style="{ display: 'flex', flexWrap: 'nowrap' ,height: `${ row.height}px`}"
+    >
+      <div
+        v-for="(slot, slotIndex) in row.slots"
+        :key="slot.id"
+        class="shelf-slot"
+        :style="{ width: `${100 / row.slots.length}%` }"
+      >
+        {{ slot.item }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ShelfDisplay',
+  props: {
+    shelfData: {
+      type: Array,
+      required: true,
+    },
+  },
+  created() {
+    this.shelfData = this.shelfData.sort((a, b) => a.row - b.row);
+  }
+};
+</script>
+
+<style scoped>
+.shelf {
+  width: 100%;
+  margin: auto;
+}
+
+.shelf-row {
+  margin: 0; /* 移除外边距 */
+  padding: 0; /* 移除内边距 */
+}
+
+.shelf-slot {
+  box-sizing: border-box;
+  border: 1px solid #ccc; /* Adjust border style as needed */
+  padding: 10px; /* Adjust padding as needed */
+  text-align: center; /* Center text inside the slot */
+}
+</style>
diff --git a/src/views/basic/collectPoint/timerSetting.vue b/src/views/basic/collectPoint/timerSetting.vue
index f35013ea..e10bb0a8 100644
--- a/src/views/basic/collectPoint/timerSetting.vue
+++ b/src/views/basic/collectPoint/timerSetting.vue
@@ -4,6 +4,7 @@
       <el-form :model="formData" :rules="formRules" label-width="160px" ref="dataForm">
 
         <el-button-group style="display: flex;margin: 0px 0 10px 90%; ">
+          <el-button type="primary" @click.native="saveTest()">测试货架组件</el-button>
           <el-button type="primary" @click.native="save()">保存</el-button>
         </el-button-group>
 
@@ -123,6 +124,21 @@
         </el-collapse>
 
 
+        <el-dialog
+          title="测试组件"
+          :visible.sync="ShelfDisplayFlag"
+          width="75%"
+          v-if="ShelfDisplayFlag"
+          :close-on-click-modal="false"
+          :close-on-press-escape="false"
+        >
+          <ShelfDisplay
+            :shelfData="this.shelfData"
+          >
+          </ShelfDisplay>
+        </el-dialog>
+
+
       </el-form>
     </el-card>
   </div>
@@ -131,12 +147,82 @@
 <script>
 
 import {getSet, updateSet} from "@/api/collect/collectSet";
+import ShelfDisplay from "@/components/ShelfDisplay";
 
 export default {
   name: 'timerSetting',
-
   data() {
     return {
+      ShelfDisplayFlag: false,
+      shelfData:[
+        {
+          row: 1,
+          height: 50,
+          slots: [
+            { id: 1, item: 'Item A1' },
+            { id: 2, item: 'Item A2' },
+            { id: 3, item: 'Item 3' },
+            { id: 4, item: 'Item 4' },
+          ]
+        },
+        {
+          row: 2,
+          height: 80,
+          slots: [
+            { id: 1, item: 'Item B1' },
+            { id: 2, item: 'Item B2' },
+            { id: 3, item: 'Item 3' },
+            { id: 4, item: 'Item 4' },
+            { id: 5, item: 'Item 3' },
+          ]
+        },
+        {
+          row: 3,
+          height: 80,
+          slots: [
+            { id: 1, item: 'Item B1' },
+            { id: 2, item: 'Item B2' },
+            { id: 3, item: 'Item 3' },
+            { id: 4, item: 'Item 4' },
+            { id: 5, item: 'Item 3' },
+          ]
+        },
+        {
+          row: 6,
+          height: 80,
+          slots: [
+            { id: 1, item: 'Item B1' },
+            { id: 2, item: 'Item B2' },
+            { id: 3, item: 'Item 3' },
+            { id: 4, item: 'Item 4' },
+            { id: 5, item: 'Item 3' },
+            { id: 5, item: 'Item 3' },
+            { id: 5, item: 'Item 3' },
+            { id: 5, item: 'Item 3' },
+            { id: 5, item: 'Item 3' },
+            { id: 5, item: 'Item 3' },
+          ]
+        },
+        {
+          row: 5,
+          height: 200,
+          slots: [
+            { id: 1, item: 'Item B1' },
+            { id: 2, item: 'Item B2' },
+          ]
+        },
+        {
+          row: 4,
+          height: 80,
+          slots: [
+            { id: 1, item: 'Item B1' },
+            { id: 2, item: 'Item B2' },
+            { id: 3, item: 'Item 3' },
+            { id: 4, item: 'Item 4' },
+            { id: 5, item: 'Item 3' },
+          ]
+        },
+      ],
       activeNames: ['0', '1', '2', '3'],
       formData: {
         startDownloadTime: null,
@@ -146,6 +232,9 @@ export default {
 
     }
   },
+  components:{
+    ShelfDisplay
+  },
   methods: {
     selectSysParam() {
       getSet().then((response) => {
@@ -154,6 +243,9 @@ export default {
         }
       })
     },
+    saveTest(){
+      this.ShelfDisplayFlag = true
+    },
     save() {
       updateSet(this.formData)
         .then((response) => {