From 7acba9611735eba038469ae59c1417bd8dad1f84 Mon Sep 17 00:00:00 2001
From: zjl <xx@qq.com>
Date: Mon, 16 Dec 2024 19:00:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=8E=A7=E5=88=B6=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/console/index.vue | 298 ++++++++++++++++----------
 1 file changed, 185 insertions(+), 113 deletions(-)

diff --git a/src/views/dashboard/console/index.vue b/src/views/dashboard/console/index.vue
index 6232b7f..f1cb63a 100644
--- a/src/views/dashboard/console/index.vue
+++ b/src/views/dashboard/console/index.vue
@@ -1,128 +1,201 @@
 <template>
   <div class="console">
+    <!--数据卡片-->
     <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
       <n-grid-item>
-        <n-card size="small" :bordered="false" hoverable>
-          <n-space justify="space-between" align="center">
-            <div>
-              <img src="~@/assets/images/visits.svg" class="top-card-img" />
-              <div class="pt-2">访问量</div>
-            </div>
-            <div>
-              <n-text depth="3">周</n-text>
-            </div>
-          </n-space>
-          <n-space justify="space-between" align="center">
-            <n-h1 class="mb-0">98735</n-h1>
-            <div>
-              <n-tag
-                :color="{ color: '#18a058', textColor: '#fff', borderColor: '#18a058' }"
-                type="success"
-                round
-                size="small"
-              >
-                +10%
-              </n-tag>
-              <n-text type="success" class="ml-2">
-                <n-icon size="16">
-                  <ArrowUpOutlined />
+        <n-card
+          title="访问量"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="success">日</n-tag>
+          </template>
+          <div class="flex justify-between px-1 py-1">
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else :startVal="1" :endVal="visits?.dayVisits" class="text-3xl" />
+          </div>
+          <div class="flex justify-between px-1 py-1">
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                日同比
+                <CountTo :startVal="1" suffix="%" :endVal="visits?.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <CaretUpOutlined />
                 </n-icon>
-              </n-text>
+              </template>
             </div>
-          </n-space>
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                周同比
+                <CountTo :startVal="1" suffix="%" :endVal="visits?.decline" />
+                <n-icon size="12" color="#ffde66">
+                  <CaretDownOutlined />
+                </n-icon>
+              </template>
+            </div>
+          </div>
+          <template #footer>
+            <div class="flex justify-between">
+              <n-skeleton v-if="loading" text :repeat="2" />
+              <template v-else>
+                <div class="text-sn"> 总访问量：</div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" :endVal="visits?.amount" />
+                </div>
+              </template>
+            </div>
+          </template>
         </n-card>
       </n-grid-item>
       <n-grid-item>
-        <n-card size="small" :bordered="false" hoverable>
-          <n-space justify="space-between" align="center">
-            <div>
-              <img src="~@/assets/images/sale.svg" class="top-card-img" />
-              <div class="pt-2">销售额</div>
+        <n-card
+          title="销售额"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="info">周</n-tag>
+          </template>
+          <div class="flex justify-between px-1 py-1">
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo
+              v-else
+              prefix="￥"
+              :startVal="1"
+              :endVal="saleroom?.weekSaleroom"
+              class="text-3xl"
+            />
+          </div>
+          <div class="flex justify-between px-2 py-2">
+            <div class="flex-1 text-sn">
+              <n-progress
+                type="line"
+                :percentage="saleroom?.degree"
+                :indicator-placement="'inside'"
+                processing
+              />
             </div>
-            <div>
-              <n-text depth="3">周</n-text>
+          </div>
+          <template #footer>
+            <div class="flex justify-between">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 总销售额：</div>
+                <div class="text-sn">
+                  <CountTo prefix="￥" :startVal="1" :endVal="saleroom?.amount" />
+                </div>
+              </template>
             </div>
-          </n-space>
-          <n-space justify="space-between" align="center">
-            <n-h1 class="mb-0">￥3980</n-h1>
-            <div>
-              <n-tag
-                :color="{ color: '#d03050', textColor: '#fff', borderColor: '#d03050' }"
-                type="error"
-                round
-                size="small"
-              >
-                -20%
-              </n-tag>
-              <n-text type="error" class="ml-2">
-                <n-icon size="16">
-                  <ArrowDownOutlined />
-                </n-icon>
-              </n-text>
-            </div>
-          </n-space>
+          </template>
         </n-card>
       </n-grid-item>
       <n-grid-item>
-        <n-card size="small" :bordered="false" hoverable>
-          <n-space justify="space-between" align="center">
-            <div>
-              <img src="~@/assets/images/order_count.svg" class="top-card-img" />
-              <div class="pt-2">订单量</div>
-            </div>
-            <div>
-              <n-text depth="3">周</n-text>
-            </div>
-          </n-space>
-          <n-space justify="space-between" align="center">
-            <n-h1 class="mb-0">3685</n-h1>
-            <div>
-              <n-tag
-                :color="{ color: '#18a058', textColor: '#fff', borderColor: '#18a058' }"
-                type="success"
-                round
-                size="small"
-              >
-                +35%
-              </n-tag>
-              <n-text type="success" class="ml-2">
-                <n-icon size="16">
-                  <ArrowUpOutlined />
+        <n-card
+          title="订单量"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="warning">周</n-tag>
+          </template>
+          <div class="flex justify-between px-1 py-1">
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else :startVal="1" :endVal="orderLarge?.weekLarge" class="text-3xl" />
+          </div>
+          <div class="flex justify-between px-1 py-1">
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                日同比
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge?.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <CaretUpOutlined />
                 </n-icon>
-              </n-text>
+              </template>
             </div>
-          </n-space>
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                周同比
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge?.rise" />
+                <n-icon size="12" color="#ffde66">
+                  <CaretDownOutlined />
+                </n-icon>
+              </template>
+            </div>
+          </div>
+          <template #footer>
+            <div class="flex justify-between">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 转化率：</div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" suffix="%" :endVal="orderLarge?.amount" />
+                </div>
+              </template>
+            </div>
+          </template>
         </n-card>
       </n-grid-item>
       <n-grid-item>
-        <n-card size="small" :bordered="false" hoverable>
-          <n-space justify="space-between" align="center">
-            <div>
-              <img src="~@/assets/images/volume.svg" class="top-card-img" />
-              <div class="pt-2">成交额</div>
-            </div>
-            <div>
-              <n-text depth="3">月</n-text>
-            </div>
-          </n-space>
-          <n-space justify="space-between" align="center">
-            <n-h1 class="mb-0">￥29856</n-h1>
-            <div>
-              <n-tag
-                :color="{ color: '#d03050', textColor: '#fff', borderColor: '#d03050' }"
-                type="error"
-                round
-                size="small"
-              >
-                -5%
-              </n-tag>
-              <n-text type="error" class="ml-2">
-                <n-icon size="16">
-                  <ArrowDownOutlined />
+        <n-card
+          title="成交额"
+          :segmented="{ content: true, footer: true }"
+          size="small"
+          :bordered="false"
+        >
+          <template #header-extra>
+            <n-tag type="error">月</n-tag>
+          </template>
+          <div class="flex justify-between px-1 py-1">
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo
+              v-else
+              prefix="￥"
+              :startVal="1"
+              :endVal="volume?.weekLarge"
+              class="text-3xl"
+            />
+          </div>
+          <div class="flex justify-between px-1 py-1">
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                月同比
+                <CountTo :startVal="1" suffix="%" :endVal="volume?.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <CaretUpOutlined />
                 </n-icon>
-              </n-text>
+              </template>
             </div>
-          </n-space>
+            <div class="text-sn">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                月同比
+                <CountTo :startVal="1" suffix="%" :endVal="volume?.decline" />
+                <n-icon size="12" color="#ffde66">
+                  <CaretDownOutlined />
+                </n-icon>
+              </template>
+            </div>
+          </div>
+          <template #footer>
+            <div class="flex justify-between">
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 总成交额：</div>
+                <div class="text-sn">
+                  <CountTo prefix="￥" :startVal="1" :endVal="volume?.amount" />
+                </div>
+              </template>
+            </div>
+          </template>
         </n-card>
       </n-grid-item>
     </n-grid>
@@ -220,7 +293,6 @@
 
 <script lang="ts" setup>
   import { onMounted, h } from 'vue';
-  import { ArrowUpOutlined, ArrowDownOutlined } from '@vicons/antd';
   import { useNotification } from 'naive-ui';
   import NewVisitAmount from './components/NewVisitAmount.vue';
   import VisitSource from './components/VisitSource.vue';
@@ -244,7 +316,7 @@
     {
       icon: UsergroupAddOutlined,
       size: '32',
-      title: '用户',
+      title: '用户管理',
       color: '#69c0ff',
       eventObject: {
         click: () => {},
@@ -253,7 +325,7 @@
     {
       icon: BarChartOutlined,
       size: '32',
-      title: '分析',
+      title: '租户管理',
       color: '#69c0ff',
       eventObject: {
         click: () => {},
@@ -262,7 +334,7 @@
     {
       icon: ShoppingCartOutlined,
       size: '32',
-      title: '商品',
+      title: '操作日志',
       color: '#ff9c6e',
       eventObject: {
         click: () => {},
@@ -271,7 +343,7 @@
     {
       icon: AccountBookOutlined,
       size: '32',
-      title: '订单',
+      title: '参数管理',
       color: '#b37feb',
       eventObject: {
         click: () => {},
@@ -280,7 +352,7 @@
     {
       icon: CreditCardOutlined,
       size: '32',
-      title: '票据',
+      title: '字典管理',
       color: '#ffd666',
       eventObject: {
         click: () => {},
@@ -289,7 +361,7 @@
     {
       icon: MailOutlined,
       size: '32',
-      title: '消息',
+      title: '消息管理',
       color: '#5cdbd3',
       eventObject: {
         click: () => {},
@@ -298,7 +370,7 @@
     {
       icon: TagsOutlined,
       size: '32',
-      title: '标签',
+      title: '定时任务',
       color: '#ff85c0',
       eventObject: {
         click: () => {},
@@ -307,7 +379,7 @@
     {
       icon: SettingOutlined,
       size: '32',
-      title: '配置',
+      title: '配置管理',
       color: '#ffc069',
       eventObject: {
         click: () => {},