首页优化
This commit is contained in:
piexlmax
@@ -1,119 +1,143 @@
|
||||
<template>
|
||||
<div class="dashbord-line" style="height: 400px;width: 100%;"></div>
|
||||
<div class="dashbord-line-box">
|
||||
<div class="dashbord-line-title">Gva 仓库commit 记录</div>
|
||||
<div
|
||||
ref="echart"
|
||||
class="dashbord-line"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons");
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons')
|
||||
|
||||
|
||||
var dataAxis = [];
|
||||
for (var i = 1 ; i < 21 ; i++){
|
||||
dataAxis.push(`${i}号`)
|
||||
var dataAxis = []
|
||||
for (var i = 1; i < 21; i++) {
|
||||
dataAxis.push(`${i}号`)
|
||||
}
|
||||
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
|
||||
var yMax = 500;
|
||||
var dataShadow = [];
|
||||
var data = [
|
||||
220,
|
||||
182,
|
||||
191,
|
||||
234,
|
||||
290,
|
||||
330,
|
||||
310,
|
||||
123,
|
||||
442,
|
||||
321,
|
||||
90,
|
||||
149,
|
||||
210,
|
||||
122,
|
||||
133,
|
||||
334,
|
||||
198,
|
||||
123,
|
||||
125,
|
||||
220,
|
||||
]
|
||||
var yMax = 500
|
||||
var dataShadow = []
|
||||
|
||||
// eslint-disable-next-line no-redeclare
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
dataShadow.push(yMax);
|
||||
dataShadow.push(yMax)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "line",
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
};
|
||||
name: 'Line',
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.echart, 'macarons')
|
||||
this.setOptions()
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, "macarons");
|
||||
this.setOptions();
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: dataAxis,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
z: 10,
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: 'GVA 图标示例',
|
||||
},
|
||||
xAxis: {
|
||||
data: dataAxis,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
z: 10
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
borderRadius: [5, 5, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
]
|
||||
),
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
]
|
||||
)
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
});
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#999',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
borderRadius: [5, 5, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' },
|
||||
]),
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: data,
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dashbord-line {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
.dashbord-line-box {
|
||||
padding: 20px;
|
||||
.dashbord-line {
|
||||
background-color: #fff;
|
||||
height: 360px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
.dashbord-line-title {
|
||||
color: rgb(56, 137, 206);
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,56 +1,53 @@
|
||||
<template>
|
||||
<div class="commit-table">
|
||||
<div class="commit-table-title">Gva 仓库commit 记录</div>
|
||||
<el-table :data="dataTimeline" style="width: 100%" v-loading="loading">
|
||||
<el-table-column prop="from" show-overflow-tooltip label="日期" width="180"></el-table-column>
|
||||
<el-table-column prop="title" show-overflow-tooltip label="推送者" width="120"></el-table-column>
|
||||
<el-table-column prop="message" show-overflow-tooltip label="commit 信息"></el-table-column>
|
||||
<div class="commit-table">
|
||||
<div class="commit-table-title">Gva 仓库commit 记录</div>
|
||||
<el-table v-loading="loading" :data="dataTimeline" style="width: 100%">
|
||||
<el-table-column prop="from" show-overflow-tooltip label="日期" width="180" />
|
||||
<el-table-column prop="title" show-overflow-tooltip label="推送者" width="120" />
|
||||
<el-table-column prop="message" show-overflow-tooltip label="commit 信息" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Commits } from '@/api/github'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
dataTimeline: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCommits()
|
||||
},
|
||||
methods: {
|
||||
loadCommits() {
|
||||
Commits(0).then(({ data }) => {
|
||||
this.loading = false
|
||||
data.forEach((element , index) => {
|
||||
if (element.commit.message && index < 6) {
|
||||
this.dataTimeline.push({
|
||||
from: new Date(element.commit.author.date),
|
||||
title: element.commit.author.name,
|
||||
showDayAndMonth: true,
|
||||
message: element.commit.message,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
dataTimeline: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCommits()
|
||||
},
|
||||
methods: {
|
||||
loadCommits() {
|
||||
Commits(0).then(({ data }) => {
|
||||
this.loading = false
|
||||
data.forEach((element, index) => {
|
||||
if (element.commit.message && index < 6) {
|
||||
this.dataTimeline.push({
|
||||
from: new Date(element.commit.author.date),
|
||||
title: element.commit.author.name,
|
||||
showDayAndMonth: true,
|
||||
message: element.commit.message,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.commit-table{
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
height: 400px;
|
||||
&-title{
|
||||
color: rgb(56,137,206);
|
||||
font-size: 18px;
|
||||
margin: 20px 0;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+139
-140
@@ -1,152 +1,151 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="mycard dashbord1">
|
||||
<div class="dashbord1-left">
|
||||
<div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
|
||||
<div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
|
||||
<div class="dashbord1-left-rows">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8" :xs="24" :sm="8">
|
||||
<div class="flex-center">
|
||||
<i class="el-icon-sort icon"></i>今日流量 (1231231)
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" :xs="24" :sm="8">
|
||||
<div class="flex-center">
|
||||
<i class="el-icon-s-custom icon"></i>总用户数 (24001)
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" :xs="24" :sm="8">
|
||||
<div class="flex-center">
|
||||
<i class="el-icon-s-comment icon"></i>好评率 (99%)
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/dashbord.png" class="dashbord1-right" alt />
|
||||
</div>
|
||||
<div class="mycard dashbord2">
|
||||
<div>
|
||||
<div class="dashbord2-item">
|
||||
使用教学：
|
||||
<a
|
||||
style="color:#409EFF"
|
||||
target="view_window"
|
||||
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
|
||||
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
|
||||
</div>
|
||||
<div class="dashbord2-item">
|
||||
插件仓库：
|
||||
<a
|
||||
style="color:#409EFF"
|
||||
target="view_window"
|
||||
href="https://github.com/flipped-aurora/gva-plugins"
|
||||
>https://github.com/flipped-aurora/gva-plugins</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card class="mycard quick-entrance">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>快捷入口</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col
|
||||
v-for="(card, key) in toolCards"
|
||||
:key="key"
|
||||
:span="4"
|
||||
:xs="8"
|
||||
@click="toTarget(card.name)"
|
||||
class="quick-entrance-items"
|
||||
>
|
||||
<div class="quick-entrance-item">
|
||||
<div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
|
||||
<i :class="card.icon" :style="{ color: card.color }" />
|
||||
</div>
|
||||
<p>{{ card.label }}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<!-- <div class="quick-entrance-title"></div> -->
|
||||
|
||||
|
||||
<div class="mycard">
|
||||
<el-row :gutter="0">
|
||||
<el-col :xs="24" :sm="16">
|
||||
<echarts-line></echarts-line>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8">
|
||||
<dashbord-table></dashbord-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="page">
|
||||
<div class="mycard dashbord1">
|
||||
<div class="dashbord1-left">
|
||||
<div class="dashbord1-left-title">早安，管理员，请开始一天的工作吧</div>
|
||||
<div class="dashbord1-left-dot">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
|
||||
<div class="dashbord1-left-rows">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8" :xs="24" :sm="8">
|
||||
<div class="flex-center">
|
||||
<i class="el-icon-sort icon" />今日流量 (1231231)
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" :xs="24" :sm="8">
|
||||
<div class="flex-center">
|
||||
<i class="el-icon-s-custom icon" />总用户数 (24001)
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8" :xs="24" :sm="8">
|
||||
<div class="flex-center">
|
||||
<i class="el-icon-s-comment icon" />好评率 (99%)
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/dashbord.png" class="dashbord1-right" alt>
|
||||
</div>
|
||||
<div class="mycard dashbord2">
|
||||
<div>
|
||||
<div class="dashbord2-item">
|
||||
使用教学：
|
||||
<a
|
||||
style="color:#409EFF"
|
||||
target="view_window"
|
||||
href="https://www.bilibili.com/video/BV1Rg411u7xH/"
|
||||
>https://www.bilibili.com/video/BV1Rg411u7xH</a>
|
||||
</div>
|
||||
<div class="dashbord2-item">
|
||||
插件仓库：
|
||||
<a
|
||||
style="color:#409EFF"
|
||||
target="view_window"
|
||||
href="https://github.com/flipped-aurora/gva-plugins"
|
||||
>https://github.com/flipped-aurora/gva-plugins</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card class="mycard quick-entrance">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>快捷入口</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20">
|
||||
<el-col
|
||||
v-for="(card, key) in toolCards"
|
||||
:key="key"
|
||||
:span="4"
|
||||
:xs="8"
|
||||
class="quick-entrance-items"
|
||||
@click="toTarget(card.name)"
|
||||
>
|
||||
<div class="quick-entrance-item">
|
||||
<div class="quick-entrance-item-icon" :style="{ backgroundColor: card.bg }">
|
||||
<i :class="card.icon" :style="{ color: card.color }" />
|
||||
</div>
|
||||
<p>{{ card.label }}</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<!-- <div class="quick-entrance-title"></div> -->
|
||||
|
||||
<div class="mycard">
|
||||
<el-row :gutter="0">
|
||||
<el-col :xs="24" :sm="16">
|
||||
<echarts-line />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="8">
|
||||
<dashbord-table />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echartsLine from '@/components/dashbordCharts/echartsLine.vue'
|
||||
import dashbordTable from '@/components/dashbordTable/dashbordTable.vue'
|
||||
export default {
|
||||
components: {
|
||||
echartsLine,
|
||||
dashbordTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toolCards: [
|
||||
{
|
||||
label: '用户管理',
|
||||
icon: 'el-icon el-icon-monitor',
|
||||
name: 'user',
|
||||
color: '#ff9c6e',
|
||||
bg: 'rgba(255, 156, 110,.3)'
|
||||
},
|
||||
{
|
||||
label: '角色管理',
|
||||
icon: 'el-icon el-icon-setting',
|
||||
name: 'authority',
|
||||
color: '#69c0ff',
|
||||
bg: 'rgba(105, 192, 255,.3)'
|
||||
},
|
||||
{
|
||||
label: '菜单管理',
|
||||
icon: 'el-icon el-icon-menu',
|
||||
name: 'menu',
|
||||
color: '#b37feb',
|
||||
bg: 'rgba(179, 127, 235,.3)'
|
||||
},
|
||||
{
|
||||
label: '代码生成器',
|
||||
icon: ' el-icon-cpu',
|
||||
name: 'autoCode',
|
||||
color: '#ffd666',
|
||||
bg: 'rgba(255, 214, 102,.3)'
|
||||
},
|
||||
{
|
||||
label: '表单生成器',
|
||||
icon: 'el-icon-document-checked',
|
||||
name: 'formCreate',
|
||||
color: '#ff85c0',
|
||||
bg: 'rgba(255, 133, 192,.3)'
|
||||
},
|
||||
{
|
||||
label: '关于我们',
|
||||
icon: ' el-icon-user',
|
||||
name: 'about',
|
||||
color: '#5cdbd3',
|
||||
bg: 'rgba(92, 219, 211,.3)'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toTarget(name) {
|
||||
this.$router.push({ name })
|
||||
components: {
|
||||
echartsLine,
|
||||
dashbordTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toolCards: [
|
||||
{
|
||||
label: '用户管理',
|
||||
icon: 'el-icon el-icon-monitor',
|
||||
name: 'user',
|
||||
color: '#ff9c6e',
|
||||
bg: 'rgba(255, 156, 110,.3)'
|
||||
},
|
||||
{
|
||||
label: '角色管理',
|
||||
icon: 'el-icon el-icon-setting',
|
||||
name: 'authority',
|
||||
color: '#69c0ff',
|
||||
bg: 'rgba(105, 192, 255,.3)'
|
||||
},
|
||||
{
|
||||
label: '菜单管理',
|
||||
icon: 'el-icon el-icon-menu',
|
||||
name: 'menu',
|
||||
color: '#b37feb',
|
||||
bg: 'rgba(179, 127, 235,.3)'
|
||||
},
|
||||
{
|
||||
label: '代码生成器',
|
||||
icon: ' el-icon-cpu',
|
||||
name: 'autoCode',
|
||||
color: '#ffd666',
|
||||
bg: 'rgba(255, 214, 102,.3)'
|
||||
},
|
||||
{
|
||||
label: '表单生成器',
|
||||
icon: 'el-icon-document-checked',
|
||||
name: 'formCreate',
|
||||
color: '#ff85c0',
|
||||
bg: 'rgba(255, 133, 192,.3)'
|
||||
},
|
||||
{
|
||||
label: '关于我们',
|
||||
icon: ' el-icon-user',
|
||||
name: 'about',
|
||||
color: '#5cdbd3',
|
||||
bg: 'rgba(92, 219, 211,.3)'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toTarget(name) {
|
||||
this.$router.push({ name })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -277,4 +276,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user