pixwsber7
/
dsl3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

吴雨瞳添加了注释

Browse Source
master
wyt 6 months ago
parent e88be90907
commit 71479f9e6b
1 changed files with 134 additions and 109 deletions
Show Stats Download Patch File Download Diff File

243
aurora-vue/aurora-admin/src/views/home/Home.vue
Unescape View File

@ -1,9 +1,12 @@
<template>
<div>
<!-- 第一行：数据统计卡片区域，使用24分栏布局，每列占6份，间隔30px -->
<el-row :gutter="30">
<!-- 访问量统计卡片 -->
<el-col :span="6">
<el-card>
<div class="card-icon-container">
<!-- 访问量图标，自定义颜色 -->
<i class="iconfont el-icon-myfangwenliang" style="color: #40c9c6" />
</div>
<div class="card-desc">
@ -12,9 +15,11 @@
</div>
</el-card>
</el-col>
<!-- 用户量统计卡片 -->
<el-col :span="6">
<el-card>
<div class="card-icon-container">
<!-- 用户量图标，自定义颜色 -->
<i class="iconfont el-icon-myuser" style="color: #34bfa3" />
</div>
<div class="card-desc">
@ -23,9 +28,11 @@
</div>
</el-card>
</el-col>
<!-- 文章量统计卡片 -->
<el-col :span="6">
<el-card>
<div class="card-icon-container">
<!-- 文章量图标，自定义颜色 -->
<i class="iconfont el-icon-mywenzhang-copy" style="color: #f4516c" />
</div>
<div class="card-desc">
@ -34,9 +41,11 @@
</div>
</el-card>
</el-col>
<!-- 留言量统计卡片 -->
<el-col :span="6">
<el-card>
<div class="card-icon-container">
<!-- 留言量图标，使用Element UI内置图标，自定义颜色 -->
<i class="el-icon-s-comment" style="color: #36a3f7" />
</div>
<div class="card-desc">
@ -46,55 +55,74 @@
</el-card>
</el-col>
</el-row>
<!-- 一周访问量图表卡片，顶部margin 1.25rem -->
<el-card style="margin-top: 1.25rem">
<div class="e-title">一周访问量</div>
<div style="height: 350px">
<!-- 访问量图表，加载时显示loading状态 -->
<v-chart :options="viewCount" v-loading="loading" />
</div>
</el-card>
<!-- 文章贡献统计卡片，顶部margin 1.25rem -->
<el-card style="margin-top: 1.25rem">
<div class="e-title">文章贡献统计</div>
<div v-loading="loading">
<!-- 日历热图组件，结束日期为当前日期，数据为文章统计DTO数组 -->
<calendar-heatmap :end-date="new Date()" :values="articleStatisticsDTOs" />
</div>
</el-card>
<!-- 第三行：文章排行和分类统计，使用24分栏，间隔20px，顶部margin 1.25rem -->
<el-row :gutter="20" style="margin-top: 1.25rem">
<!-- 文章浏览量排行图表，占16份宽度 -->
<el-col :span="16">
<el-card>
<div class="e-title">文章浏览量排行</div>
<div style="height: 350px">
<!-- 文章排行图表，加载时显示loading状态 -->
<v-chart :options="ariticleRank" v-loading="loading" />
</div>
</el-card>
</el-col>
<!-- 文章分类统计图表，占8份宽度 -->
<el-col :span="8">
<el-card>
<div class="e-title">文章分类统计</div>
<div style="height: 350px">
<!-- 分类统计图表，加载时显示loading状态 -->
<v-chart :options="category" v-loading="loading" />
</div>
</el-card>
</el-col>
</el-row>
<!-- 第四行：用户地域分布和标签统计，使用24分栏，间隔20px，顶部margin 1.25rem -->
<el-row :gutter="20" style="margin-top: 1.25rem">
<!-- 用户地域分布图表，占16份宽度 -->
<el-col :span="16">
<el-card>
<div class="e-title">用户地域分布</div>
<div style="height: 350px" v-loading="loading">
<div class="area-wrapper">
<!-- 切换用户/游客的单选按钮组 -->
<el-radio-group v-model="type">
<el-radio :label="1">用户</el-radio>
<el-radio :label="2">游客</el-radio>
</el-radio-group>
</div>
<!-- 地域分布地图图表 -->
<v-chart :options="userAreaMap" />
</div>
</el-card>
</el-col>
<!-- 文章标签统计，占8份宽度 -->
<el-col :span="8">
<el-card>
<div class="e-title">文章标签统计</div>
<div style="height: 350px" v-loading="loading">
<!-- 标签云组件，顶部margin 1.5rem -->
<tag-cloud style="margin-top: 1.5rem" :data="tagDTOs" />
</div>
</el-card>
@ -104,70 +132,64 @@
</template>
<script>
// 引入中国地图数据
import '@/assets/js/china'
export default {
// 页面创建时执行的钩子函数
created() {
// 加载用户地域分布数据
this.listUserArea()
// 加载首页统计数据
this.getData()
},
data: function () {
return {
loading: true,
type: 1,
viewsCount: 0,
messageCount: 0,
userCount: 0,
articleCount: 0,
articleStatisticsDTOs: [],
tagDTOs: [],
loading: true, // 图表加载状态
type: 1, // 用户/游客切换（1：用户，2：游客）
viewsCount: 0, // 访问量统计值
messageCount: 0, // 留言量统计值
userCount: 0, // 用户量统计值
articleCount: 0, // 文章量统计值
articleStatisticsDTOs: [], // 文章贡献统计数据
tagDTOs: [], // 标签统计数据
// 一周访问量图表配置
viewCount: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
color: ['#3888fa'],
legend: {
data: ['访问量']
trigger: 'axis', // 坐标轴触发提示框
axisPointer: { type: 'cross' } // 十字准星指示器
},
grid: {
color: ['#3888fa'], // 图表颜色
legend: { data: ['访问量'] }, // 图例
grid: { // 图表网格布局
left: '0%',
right: '0%',
bottom: '0%',
top: '10%',
containLabel: true
containLabel: true // 包含坐标轴标签
},
xAxis: {
data: [],
axisLine: {
lineStyle: {
color: '#666'
}
}
xAxis: { // X轴配置
data: [], // X轴数据（日期）
axisLine: { lineStyle: { color: '#666' } } // 轴线样式
},
yAxis: {
axisLine: {
lineStyle: {
color: '#048CCE'
}
}
yAxis: { // Y轴配置
axisLine: { lineStyle: { color: '#048CCE' } } // 轴线样式
},
series: [
series: [ // 数据系列
{
name: '访问量',
type: 'line',
data: [],
smooth: true
type: 'line', // 折线图
data: [], // 访问量数据
smooth: true // 平滑曲线
}
]
},
// 文章浏览量排行图表配置
ariticleRank: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
axisPointer: { type: 'cross' }
},
color: ['#58AFFF'],
grid: {
@ -177,85 +199,65 @@ export default {
top: '10%',
containLabel: true
},
xAxis: {
data: []
},
yAxis: {},
xAxis: { data: [] }, // X轴数据（文章标题）
yAxis: {}, // Y轴默认配置
series: [
{
name: ['浏览量'],
type: 'bar',
data: []
type: 'bar', // 柱状图
data: [] // 浏览量数据
}
]
},
// 文章分类统计图表配置
category: {
color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#36dc59', '#C0FF3E'],
color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#36dc59', '#C0FF3E'], // 分类颜色数组
legend: {
data: [],
bottom: 'bottom'
},
tooltip: {
trigger: 'item'
data: [], // 分类名称
bottom: 'bottom' // 图例位置在底部
},
tooltip: { trigger: 'item' }, // 点击项目触发提示框
series: [
{
name: '文章分类',
type: 'pie',
roseType: 'radius',
data: []
type: 'pie', // 饼图
roseType: 'radius', // 南丁格尔玫瑰图（半径模式）
data: [] // 分类数据（名称+数量）
}
]
},
// 用户地域分布地图配置
userAreaMap: {
tooltip: {
// 自定义提示框格式
formatter: function (e) {
var value = e.value ? e.value : 0
return e.seriesName + '<br />' + e.name + '：' + value
}
},
visualMap: {
visualMap: { // 视觉映射配置（颜色区分数量范围）
min: 0,
max: 1000,
right: 26,
bottom: 40,
showLabel: !0,
pieces: [
{
gt: 100,
label: '100人以上',
color: '#ED5351'
},
{
gte: 51,
lte: 100,
label: '51-100人',
color: '#59D9A5'
},
{
gte: 21,
lte: 50,
label: '21-50人',
color: '#F6C021'
},
{
label: '1-20人',
gt: 0,
lte: 20,
color: '#6DCAEC'
}
showLabel: !0, // 显示标签
pieces: [ // 分段配置
{ gt: 100, label: '100人以上', color: '#ED5351' },
{ gte: 51, lte: 100, label: '51-100人', color: '#59D9A5' },
{ gte: 21, lte: 50, label: '21-50人', color: '#F6C021' },
{ label: '1-20人', gt: 0, lte: 20, color: '#6DCAEC' }
],
show: !0
show: !0 // 显示视觉映射组件
},
geo: {
map: 'china',
zoom: 1.2,
layoutCenter: ['50%', '50%'],
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
geo: { // 地理坐标系配置
map: 'china', // 使用中国地图
zoom: 1.2, // 缩放比例
layoutCenter: ['50%', '50%'], // 地图中心位置
itemStyle: { // 地图区域样式
normal: { borderColor: 'rgba(0, 0, 0, 0.2)' }, // 正常状态
emphasis: { // 高亮状态
areaColor: '#F5DEB3',
shadowOffsetX: 0,
shadowOffsetY: 0,
@ -266,9 +268,9 @@ export default {
series: [
{
name: '用户人数',
type: 'map',
geoIndex: 0,
data: [],
type: 'map', // 地图类型
geoIndex: 0, // 关联geo配置
data: [], // 地域数据（省份+人数）
areaColor: '#0FB8F0'
}
]
@ -276,61 +278,71 @@ export default {
}
},
methods: {
// 获取首页统计数据
getData() {
this.axios.get('/api/admin').then(({ data }) => {
// 更新统计数字
this.viewsCount = data.data.viewsCount
this.messageCount = data.data.messageCount
this.userCount = data.data.userCount
this.articleCount = data.data.articleCount
this.articleStatisticsDTOs = data.data.articleStatisticsDTOs
// 处理一周访问量数据
if (data.data.uniqueViewDTOs != null) {
data.data.uniqueViewDTOs.forEach((item) => {
this.viewCount.xAxis.data.push(item.day)
this.viewCount.series[0].data.push(item.viewsCount)
this.viewCount.xAxis.data.push(item.day) // 日期
this.viewCount.series[0].data.push(item.viewsCount) // 访问量
})
}
// 处理文章分类统计数据
if (data.data.categoryDTOs != null) {
data.data.categoryDTOs.forEach((item) => {
this.category.series[0].data.push({
value: item.articleCount,
name: item.categoryName
value: item.articleCount, // 文章数量
name: item.categoryName // 分类名称
})
this.category.legend.data.push(item.categoryName)
this.category.legend.data.push(item.categoryName) // 图例添加分类名称
})
}
// 处理文章浏览量排行数据
if (data.data.articleRankDTOs != null) {
data.data.articleRankDTOs.forEach((item) => {
this.ariticleRank.series[0].data.push(item.viewsCount)
this.ariticleRank.xAxis.data.push(item.articleTitle)
this.ariticleRank.series[0].data.push(item.viewsCount) // 浏览量
this.ariticleRank.xAxis.data.push(item.articleTitle) // 文章标题
})
}
// 处理标签统计数据
if (data.data.tagDTOs != null) {
data.data.tagDTOs.forEach((item) => {
this.tagDTOs.push({
id: item.id,
name: item.tagName
name: item.tagName // 标签名称
})
})
}
// 关闭加载状态
this.loading = false
})
},
// 获取用户地域分布数据
listUserArea() {
this.axios
.get('/api/admin/users/area', {
params: {
type: this.type
}
})
.then(({ data }) => {
this.userAreaMap.series[0].data = data.data
})
.get('/api/admin/users/area', {
params: { type: this.type } // 1-用户，2-游客
})
.then(({ data }) => {
// 更新地图数据
this.userAreaMap.series[0].data = data.data
})
}
},
// 监听type变化，重新加载地域分布数据
watch: {
type() {
this.listUserArea()
@ -340,36 +352,49 @@ export default {
</script>
<style scoped>
/* 卡片图标容器样式 */
.card-icon-container {
display: inline-block;
font-size: 3rem;
}
/* 地域选择器容器样式 */
.area-wrapper {
display: flex;
justify-content: center;
}
/* 卡片描述区域样式 */
.card-desc {
font-weight: bold;
float: right;
}
/* 卡片标题样式 */
.card-title {
margin-top: 0.3rem;
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 1rem;
}
/* 卡片统计数字样式 */
.card-count {
margin-top: 0.75rem;
color: #666;
font-size: 1.25rem;
}
/* 图表容器样式 */
.echarts {
width: 100%;
height: 100%;
}
/* 图表标题样式 */
.e-title {
font-size: 13px;
color: #202a34;
font-weight: 700;
}
</style>
</style>
Write Preview
Loading…
Cancel
Save