From 707e771053870315b7f821503a321ccce85af1c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=89=BE=E8=B4=A4=E5=87=8C?= <aixianling@sinoecare.com>
Date: Tue, 18 Jun 2024 18:03:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BD=AE=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/AppStoresTable.vue | 59 ++++++++++++++++++++++++++----------
 1 file changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/views/AppStoresTable.vue b/src/views/AppStoresTable.vue
index d1b9f9d..2ce8ec2 100644
--- a/src/views/AppStoresTable.vue
+++ b/src/views/AppStoresTable.vue
@@ -4,6 +4,7 @@ export default {
   label: "多店监控",
   data() {
     return {
+      height: '600px',
       stores: [
         {}, {}, {}, {}, {}
       ],
@@ -26,28 +27,54 @@ export default {
         ]
       },
     }
+  },
+  computed: {
+    storeList: v => {
+      const list = []
+      let group = []
+      v.stores.map((e, i) => {
+        if (group.length < 4) {
+          group.push(e)
+          if (i + 1 == v.stores.length) {
+            list.push(group)
+          }
+        } else {
+          list.push(group)
+          group = [e]
+        }
+      })
+      return list
+    }
+  },
+  mounted() {
+    this.height = `${this.$el.clientHeight}px`
   }
 }
 </script>
 
 <template>
   <section class="AppStoresTable">
-    <div class="layout">
-      <div class="store" v-for="store in stores" :key="store.id">
-        <div class="header" v-text="'郑州朗程康桥店'"/>
-        <el-carousel indicator-position="none" height="250px">
-          <el-carousel-item></el-carousel-item>
-        </el-carousel>
-        <div class="title" v-text="'品类销售情况'"/>
-        <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
-          <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
-        </el-table>
-        <div class="title" v-text="'重点单品情况'"/>
-        <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
-          <el-table-column v-for="column in columns.重点单品情况" v-bind="column" :key="column.prop"/>
-        </el-table>
-      </div>
-    </div>
+    <el-carousel indicator-position="none" :height="height">
+      <el-carousel-item v-for="(group,i) in storeList" :key="i">
+        <div class="layout">
+          <div class="store" v-for="store in group" :key="store.id">
+            <div class="header" v-text="'郑州朗程康桥店'"/>
+            <el-carousel indicator-position="none" height="250px">
+              <el-carousel-item></el-carousel-item>
+            </el-carousel>
+            <div class="title" v-text="'品类销售情况'"/>
+            <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
+              <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
+            </el-table>
+            <div class="title" v-text="'重点单品情况'"/>
+            <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
+              <el-table-column v-for="column in columns.重点单品情况" v-bind="column" :key="column.prop"/>
+            </el-table>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+
   </section>
 </template>