tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完善首页，添加项目简介和团队介绍

Browse Source
This commit is contained in:
郝先瑞
2022-01-25 23:55:40 +08:00
parent 251637cf17
commit d382c8cb95
3 changed files with 129 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/views/dashboard/components/BarChart.vue
View File

@@ -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)

11
src/views/dashboard/components/PieChart.vue
View File

@@ -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: '手机数码' }
]
}
]

128
src/views/dashboard/index.vue
View File

@@ -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>