概览界面优化

src/views/workbench/index.vue

@@ -41,44 +41,47 @@
             </el-card>
             <el-card class="!border-none mb-4 flex-1" shadow="never" style="flex-grow: 4">
                 <template #header>
-                    <div>
-                        <span class="card-title">统计数据</span>
-                        <!-- <span class="text-tx-secondary text-xs ml-4">
-                            更新时间：{{ workbenchData.today.time }}
-                        </span> -->
+                    <div style="display: flex;line-height: 21px;">
+                        <span class="card-title" :style="{ fontWeight: activeIndex === 0 ? 'bold' : 'normal',fontSize: activeIndex === 0 ? '18px' : '14px' }"
+                              style="flex-grow: 1;cursor: pointer;" @click="activeIndex = 0">今日数据</span>
+                        <span class="card-title" :style="{ fontWeight: activeIndex === 1 ? 'bold' : 'normal',fontSize: activeIndex === 1 ? '18px' : '14px' }"
+                              style="flex-grow: 1;cursor: pointer;" @click="activeIndex = 1">本月数据</span>
+                        <span class="card-title" :style="{ fontWeight: activeIndex === 2 ? 'bold' : 'normal',fontSize: activeIndex === 2 ? '18px' : '14px' }"
+                              style="flex-grow: 1;cursor: pointer;" @click="activeIndex = 2">累计数据</span>
+                        <span class="card-title" style="flex-grow: 9"></span>
                     </div>
                 </template>
 
                 <div class="flex flex-wrap">
                     <div class="w-1/2 md:w-1/3">
                         <div class="leading-10">下单人数</div>
-                        <div class="text-6xl">{{ workbenchData.statistic.todayVisits }}</div>
-                        <div class="text-tx-secondary text-lg">
-                            当月：{{ workbenchData.statistic.monthVisits }}
-                        </div>
-                        <div class="text-tx-secondary text-lg">
-                            累计：{{ workbenchData.statistic.totalVisits }}
-                        </div>
+                        <div class="text-6xl">{{ showData(0) }}</div>
+<!--                        <div class="text-tx-secondary text-lg">-->
+<!--                            当月：{{ workbenchData.statistic.monthVisits }}-->
+<!--                        </div>-->
+<!--                        <div class="text-tx-secondary text-lg">-->
+<!--                            累计：{{ workbenchData.statistic.totalVisits }}-->
+<!--                        </div>-->
                     </div>
                     <div class="w-1/2 md:w-1/3">
                         <div class="leading-10">订单数(笔)</div>
-                        <div class="text-6xl">{{ workbenchData.statistic.todayOrder }}</div>
-                        <div class="text-tx-secondary text-lg">
-                            当月：{{ workbenchData.statistic.monthOrder }}
-                        </div>
-                        <div class="text-tx-secondary text-lg">
-                            累计：{{ workbenchData.statistic.totalOrder }}
-                        </div>
+                        <div class="text-6xl">{{ showData(1) }}</div>
+<!--                        <div class="text-tx-secondary text-lg">-->
+<!--                            当月：{{ workbenchData.statistic.monthOrder }}-->
+<!--                        </div>-->
+<!--                        <div class="text-tx-secondary text-lg">-->
+<!--                            累计：{{ workbenchData.statistic.totalOrder }}-->
+<!--                        </div>-->
                     </div>
                     <div class="w-1/2 md:w-1/3">
                         <div class="leading-10">营收额(元)</div>
-                        <div class="text-6xl">{{ workbenchData.statistic.todaySales }}</div>
-                        <div class="text-tx-secondary text-lg">
-                            当月：{{ workbenchData.statistic.monthSales }}
-                        </div>
-                        <div class="text-tx-secondary text-lg">
-                            累计：{{ workbenchData.statistic.totalSales }}
-                        </div>
+                        <div class="text-6xl">{{ showData(2) }}</div>
+<!--                        <div class="text-tx-secondary text-lg">-->
+<!--                            当月：{{ workbenchData.statistic.monthSales }}-->
+<!--                        </div>-->
+<!--                        <div class="text-tx-secondary text-lg">-->
+<!--                            累计：{{ workbenchData.statistic.totalSales }}-->
+<!--                        </div>-->
                     </div>
                     <!-- <div class="w-1/2 md:w-1/4">
                         <div class="leading-10">新到店人数</div>
@@ -167,6 +170,7 @@ import menu_web from './image/menu_web.png'
 import oa_code from './image/oa_code.png'
 import service_code from './image/service_code.png'
 import { getShopConfig, changeShopStatus, statisticsDishTop10 } from '@/api/shop'
+const activeIndex = ref(0)
 // 表单数据
 const workbenchData: any = reactive({
     shopId: '',
@@ -359,6 +363,43 @@ const workbenchData: any = reactive({
     }
 })
 
+const showData = (index: number) => {
+    if (index === 0) {
+        if (activeIndex.value === 0) {
+            return workbenchData.statistic.todayVisits;
+        }
+        if (activeIndex.value === 1) {
+          return workbenchData.statistic.monthVisits;
+        }
+        if (activeIndex.value === 2) {
+          return workbenchData.statistic.totalVisits;
+        }
+    }
+    if (index === 1) {
+      if (activeIndex.value === 0) {
+        return workbenchData.statistic.todayOrder;
+      }
+      if (activeIndex.value === 1) {
+        return workbenchData.statistic.monthOrder;
+      }
+      if (activeIndex.value === 2) {
+        return workbenchData.statistic.totalOrder;
+      }
+    }
+    if (index === 2) {
+      if (activeIndex.value === 0) {
+        return workbenchData.statistic.todaySales;
+      }
+      if (activeIndex.value === 1) {
+        return workbenchData.statistic.monthSales;
+      }
+      if (activeIndex.value === 2) {
+        return workbenchData.statistic.totalSales;
+      }
+    }
+};
+
+
 // 获取工作台主页数据
 const getData = async () => {
     const res = await getWorkbench()