From 439924715bd937ee2accad0bc58752e37470dedc Mon Sep 17 00:00:00 2001
From: zjl <xx@163.com>
Date: Wed, 25 Sep 2024 10:14:45 +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 | 156 +++++++++++++++-----------
 1 file changed, 88 insertions(+), 68 deletions(-)

diff --git a/src/views/dashboard/console/index.vue b/src/views/dashboard/console/index.vue
index e7b63e8..1db5b0c 100644
--- a/src/views/dashboard/console/index.vue
+++ b/src/views/dashboard/console/index.vue
@@ -1,6 +1,42 @@
 <template>
   <PageWrapper>
-    <el-row :gutter="12" class="pt-0">
+    <el-card shadow="hover" class="custom-box-card">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span class="text-base">工作台</span>
+        </div>
+      </template>
+      <el-row :gutter="12">
+        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+          <div class="flex items-center">
+            <div>
+              <el-avatar :size="64" :src="schoolboy" />
+            </div>
+            <div>
+              <p class="px-4 text-xl">早安，开始您一天的工作吧！</p>
+              <p class="px-4 font-extralight">今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</p>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+          <div class="flex justify-end w-full mt-4 sm:mt-0">
+            <div class="flex flex-col justify-center flex-1 text-center md:text-right">
+              <span class="text-secondary">项目数</span>
+              <span class="text-2xl">16</span>
+            </div>
+            <div class="flex flex-col justify-center flex-1 text-center md:text-right">
+              <span class="text-secondary">待办</span>
+              <span class="text-2xl">3/15</span>
+            </div>
+            <div class="flex flex-col justify-center flex-1 text-center md:text-right">
+              <span class="text-secondary">消息</span>
+              <span class="text-2xl">35</span>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+    <el-row :gutter="12" class="mt-0">
       <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
         <el-card shadow="hover" class="custom-box-card card-1">
           <el-skeleton :rows="5" :loading="loading" style="width: 100%">
@@ -196,7 +232,7 @@
     </el-row>
 
     <el-row :gutter="12">
-      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
+      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
         <el-card shadow="hover" class="custom-box-card">
           <template #header>
             <div class="card-header">
@@ -210,6 +246,18 @@
           </el-skeleton>
         </el-card>
       </el-col>
+      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
+        <el-card shadow="hover" class="custom-box-card">
+          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
+            <template #default><Pie /></template>
+          </el-skeleton>
+          <el-table :data="revenue" style="width: 100%">
+            <el-table-column prop="source" label="来源" />
+            <el-table-column prop="value" label="收入" sortable align="right" width="80" />
+            <el-table-column prop="address" label="占比" :formatter="formatter" align="right" />
+          </el-table>
+        </el-card>
+      </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
         <el-card shadow="hover" class="custom-box-card card-4">
           <el-skeleton :rows="5" :loading="loading" style="width: 100%">
@@ -239,14 +287,14 @@
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
-                  padding: 20px;
-                "
+                  padding: 20px;"
               >
                 <el-skeleton-item variant="text" style="width: 30%" />
                 <el-skeleton-item variant="text" style="width: 30%" />
                 <el-skeleton-item variant="text" style="width: 30%" />
               </div>
             </template>
+            
             <!-- 自定义骨架屏 end -->
             <template #default>
               <div class="pt-4 logo">
@@ -271,72 +319,13 @@
         </el-card>
       </el-col>
     </el-row>
-
-    <el-row :gutter="12">
-      <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
+    
+    <!--访问量 | 流量趋势-->
+    <el-row :gutter="12" class="mb-3">
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
         <el-card shadow="hover" class="custom-box-card">
           <el-skeleton :rows="5" :loading="loading" style="width: 100%">
-            <template #default>
-              <el-table :data="tableData" style="width: 100%">
-                <el-table-column prop="date" label="姓名">
-                  <template #default="scope">
-                    <div class="flex items-center">
-                      <el-avatar :size="40" :alt="scope.row.name" :src="scope.row.avatar" />
-                      <p class="ml-4">{{ scope.row.name }}</p>
-                    </div>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="isMember" label="是否会员" align="center">
-                  <template #default="scope">
-                    <el-tag :type="scope.row.isMember ? 'success' : 'danger'">{{
-                      scope.row.isMember ? '是' : '否'
-                    }}</el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="telephone" label="手机" align="center" />
-                <el-table-column prop="date" label="购买日期" align="center" />
-
-                <el-table-column label="操作" align="center">
-                  <template #default="scope">
-                    <el-link href="javascript:;" type="primary">编辑</el-link>
-                    <el-divider direction="vertical" />
-                    <el-popconfirm :title="`您确认要删除 ${scope.row.name} 吗？`">
-                      <template #reference>
-                        <el-link href="javascript:;" type="primary">删除</el-link>
-                      </template>
-                    </el-popconfirm>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </template>
-          </el-skeleton>
-        </el-card>
-      </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
-        <el-card shadow="hover" class="custom-box-card card-6">
-          <template #header>
-            <div class="flex items-center justify-between card-header">
-              <span class="text-base">评论</span>
-              <el-link href="#" target="_blank" type="primary">更多</el-link>
-            </div>
-          </template>
-          <el-skeleton :rows="5" :loading="loading" style="width: 100%">
-            <template #default>
-              <ul>
-                <li v-for="(item, index) of comment" :key="index" class="flex py-3 items-top">
-                  <el-avatar :size="36" :src="item.avatar" />
-                  <div class="flex-grow ml-3">
-                    <div class="flex items-center justify-between">
-                      <span>{{ item.name }}</span>
-                      <span :style="`color: var(--el-text-color-secondary)`" class="text-xs">{{
-                        item.datetime
-                      }}</span>
-                    </div>
-                    <p>{{ item.content }}</p>
-                  </div>
-                </li>
-              </ul>
-            </template>
+            <template #default><VisiTab /></template>
           </el-skeleton>
         </el-card>
       </el-col>
@@ -350,6 +339,8 @@
   import NewVisitAmount from './components/NewVisitAmount.vue';
   import { getConsoleInfo } from '@/api/dashboard/console';
   import { CountTo } from '@/components/CountTo/index';
+  import Pie from '../console/components/Pie.vue';
+    import VisiTab from '../console/components/VisiTab.vue';
 
   import salesDashboard from '@/assets/images/sales-dashboard.svg';
   import schoolboy from '@/assets/images/schoolboy.png';
@@ -474,6 +465,35 @@
       date: '2021-12-14',
     },
   ];
+
+  //收入表
+  const revenue: any = [
+    // {
+    //   id: 1,
+    //   source: '互联网',
+    //   value: 525,
+    //   answer: '',
+    // },
+    // {
+    //   id: 2,
+    //   source: '实体门店',
+    //   value: 305,
+    //   answer: '',
+    // },
+    // {
+    //   id: 3,
+    //   source: '境外',
+    //   value: 134,
+    //   answer: '',
+    // },
+    // {
+    //   id: 4,
+    //   source: '其他',
+    //   value: 60,
+    //   answer: '',
+    // },
+  ];
+  
 </script>
 
 <style lang="scss" scoped>