Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
d382c8cb
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
3
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue3-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
d382c8cb
编写于
1月 25, 2022
作者:
郝
郝先瑞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 完善首页,添加项目简介和团队介绍
上级
251637cf
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
128 addition
and
21 deletion
+128
-21
src/views/dashboard/components/BarChart.vue
src/views/dashboard/components/BarChart.vue
+6
-6
src/views/dashboard/components/PieChart.vue
src/views/dashboard/components/PieChart.vue
+4
-7
src/views/dashboard/index.vue
src/views/dashboard/index.vue
+118
-8
未找到文件。
src/views/dashboard/components/BarChart.vue
浏览文件 @
d382c8cb
...
...
@@ -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
)
...
...
src/views/dashboard/components/PieChart.vue
浏览文件 @
d382c8cb
...
...
@@ -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
:
'
手机数码
'
}
]
}
]
...
...
src/views/dashboard/index.vue
浏览文件 @
d382c8cb
...
...
@@ -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: 9
0px"
src=
"https://gitee.com/haoxr/image/raw/master/20210606213932.png"
></el-image
>
<el-image
style=
"width:
180px; height: 10
0px"
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"
>
<
PieChart
id=
"pie
Chart"
height=
"400px"
width=
"100%"
class=
"chart-container"
/>
<el-col
:
sm=
"24"
:lg
=
"8"
>
<
BarChart
id=
"bar
Chart"
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
: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"
:s
pan
=
"8"
>
<el-col
:xs=
"24"
:s
m=
"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
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录