From d382c8cb953c102fb4c0d0e472598fcf1679b531 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Tue, 25 Jan 2022 23:55:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E9=A1=B9=E7=9B=AE=E7=AE=80=E4=BB=8B?=
 =?UTF-8?q?=E5=92=8C=E5=9B=A2=E9=98=9F=E4=BB=8B=E7=BB=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/components/BarChart.vue |  12 +-
 src/views/dashboard/components/PieChart.vue |  11 +-
 src/views/dashboard/index.vue               | 128 ++++++++++++++++++--
 3 files changed, 129 insertions(+), 22 deletions(-)

diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue
index 0bfa09fc..8944b003 100644
--- a/src/views/dashboard/components/BarChart.vue
+++ b/src/views/dashboard/components/BarChart.vue
@@ -47,7 +47,7 @@ function initChart() {
   barChart.setOption({
     title: {
       show: true,
-      text: '分公司业绩总览(2021年财报)',
+      text: '分公司业绩总览(2021年)',
       x: 'center',
       padding: 15,
       textStyle: {
@@ -80,7 +80,7 @@ function initChart() {
     xAxis: [
       {
         type: 'category',
-        data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽', '湖南', '山东', '海外'],
+        data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽'],
         axisPointer: {
           type: 'shadow'
         }
@@ -111,7 +111,7 @@ function initChart() {
         name: '收入',
         type: 'bar',
         data: [
-          8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213
+          8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800,
         ],
         barWidth: 20
 
@@ -120,7 +120,7 @@ function initChart() {
         name: '毛利润',
         type: 'bar',
         data: [
-          6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213, 8000, 8200, 7000
+          6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213,
         ],
         barWidth: 20
       },
@@ -128,13 +128,13 @@ function initChart() {
         name: '收入增长率',
         type: 'line',
         yAxisIndex: 1,
-        data: [42, 41, 53, 65, 67, 65, 52, 45, 43, 54, 42, 46]
+        data: [42, 41, 53, 65, 67, 65, 52, 45, 43]
       },
       {
         name: '利润增长率',
         type: 'line',
         yAxisIndex: 1,
-        data: [82, 81, 56, 45, 51, 65, 65, 67, 78, 76, 67, 78]
+        data: [82, 81, 56, 45, 51, 65, 65, 67, 78]
       }
     ]
   } as EChartsOption)
diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue
index aafa90ed..7841f289 100644
--- a/src/views/dashboard/components/PieChart.vue
+++ b/src/views/dashboard/components/PieChart.vue
@@ -77,13 +77,10 @@ function initChart() {
           borderRadius: 8
         },
         data: [
-          { value: 22, name: 'rose 1' },
-          { value: 24, name: 'rose 2' },
-          { value: 32, name: 'rose 3' },
-          { value: 30, name: 'rose 4' },
-          { value: 28, name: 'rose 5' },
-          { value: 26, name: 'rose 6' },
-          { value: 22, name: 'rose 7' }
+          { value: 26, name: '家用电器' },
+          { value: 27, name: '户外运动' },
+          { value: 24, name: '汽车用品' },
+          { value: 23, name: '手机数码' }
         ]
       }
     ]
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 4641960e..ac52601d 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -2,12 +2,13 @@
   <div class="dashboard-container">
     <github-corner class="github-corner"/>
 
+
     <el-row :gutter="40" class="card-panel-col">
       <el-col :xs="12" :span="12" :lg="6">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper" style="margin-top: -10px">
-            <el-image style="width:200px; height: 90px"
-                      src="https://gitee.com/haoxr/image/raw/master/20210606213932.png"></el-image>
+            <el-image style="width:180px; height: 100px"
+                      src="https://gitee.com/haoxr/image/raw/master/20210606213932.png"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
@@ -34,6 +35,7 @@
           </div>
         </div>
       </el-col>
+
       <el-col :xs="12" :span="12" :lg="6" class="card-panel-col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-money">
@@ -62,18 +64,108 @@
       </el-col>
     </el-row>
 
-    <BarChart id="barChart" height="400px" width="100%" class="chart-container"/>
 
+    <!-- 项目 + 团队成员介绍 -->
+    <el-row :gutter="40">
+
+      <!-- 项目介绍 -->
+      <el-col :sm="24" :lg="12">
+        <el-card class="project-card">
+          <template #header>
+            <span class="fw-b">有来项目简介</span>
+          </template>
+          <div class="project-card__main">
+            <!-- 项目简介 -->
+            <el-link target="_blank" type="primary" href="https://gitee.com/haoxr">
+              youlai-mall
+            </el-link>
+            是基于Spring Boot 2.5、Spring Cloud 2020 &
+            Alibaba 2021、Vue3、Element-Plus、uni-app等主流技术栈构建的一整套全栈开源商城项目，
+            涉及
+            <el-link target="_blank" type="primary" href="https://gitee.com/youlaitech/youlai-mall">后端微服务</el-link>
+            、
+            <el-link target="_blank" type="success" href="https://gitee.com/youlaitech/youlai-mall-admin">前端管理</el-link>
+            、
+            <el-link target="_blank" type="warning" href="https://gitee.com/youlaitech/youlai-mall-weapp">微信小程序
+            </el-link>
+            和
+            <el-link target="_blank" type="danger" href="https://gitee.com/youlaitech/youlai-mall-weapp">APP应用</el-link>
+            等多端的开发。
+            <el-divider/>
+
+            <!-- 源码地址 -->
+            <el-row :gutter="10">
+              <el-col :span="4">
+                <el-badge value="免费开源" class="fw-b">
+                  源码地址
+                </el-badge>
+              </el-col>
+              <el-col :span="4">
+                <el-link target="_blank" type="primary" href="https://github.com/youlaitech">Github</el-link>
+              </el-col>
+              <el-col :span="16">
+                <el-link target="_blank" type="success" href="https://gitee.com/youlaiorg">码云</el-link>
+              </el-col>
+            </el-row>
+            <el-divider/>
+            <!-- 技术栈 -->
+            <el-row :gutter="10">
+              <el-col :span="4" class="fw-b">
+                后端技术栈
+              </el-col>
+              <el-col :span="20" >
+                Spring Boot、Spring Cloud & Alibaba、Spring Security
+                OAuth2、JWT、Seata、Sentinel、Elastic Stack ...
+              </el-col>
+            </el-row>
+            <el-divider/>
+            <el-row :gutter="10" >
+              <el-col :span="4" class="fw-b">
+                前端技术栈
+              </el-col>
+              <el-col :span="20">
+                Vue3、TypeScript、Element-Plus、uni-app、vue3-element-admin ...
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 团队介绍 -->
+      <el-col :sm="24" :lg="12">
+        <el-card class="team-card">
+          <template #header>
+            <span class="fw-b">有来开源组织</span>
+          </template>
+          <el-tabs>
+            <el-tab-pane label="开发人员" name="1">
+            </el-tab-pane>
+
+            <el-tab-pane label="有来交流群" name="2">
+            </el-tab-pane>
+
+            <el-tab-pane label="无回开发群(加入我们)" name="3">
+            </el-tab-pane>
+
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+
+
+    <!-- Echarts 图表 -->
     <el-row :gutter="40" style="margin-top: 20px">
-      <el-col :xs="24" :span="8">
+      <el-col :sm="24" :lg="8">
+        <BarChart id="barChart" height="400px" width="100%" class="chart-container"/>
+      </el-col>
+
+      <el-col :xs="24" :sm="12" :lg="8">
         <PieChart id="pieChart" height="400px" width="100%" class="chart-container"/>
+        <!--订单漏斗图-->
+        <!--<FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>-->
       </el-col>
 
-      <el-col :xs="24" :span="8">
-        <FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>
-      </el-col>
-
-      <el-col :xs="24" :span="8">
+      <el-col :xs="24" :sm="12" :lg="8">
         <RadarChart id="radarChart" height="400px" width="100%" class="chart-container"/>
       </el-col>
     </el-row>
@@ -259,10 +351,28 @@ const {updateLogActiveName, contactActiveName, documentActiveName} = toRefs(stat
     }
   }
 
+  .project-card {
+    font-size: 14px;
+    &__main {
+      line-height: 28px;
+    }
+  }
+
+  .team-card {
+    font-size: 14px;
+    &__main {
+      line-height: 28px;
+    }
+  }
+
   .chart-container {
     background: #ffffff;
   }
 
+  .fw-b {
+    font-weight: bold;
+  }
+
 }
 
 </style>