panqihua
/
ttsbg-java-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.调整总平台首页

Browse Source 
2.首页改为动态加载
master
panqihua 2 years ago
parent 787dd93a9e
commit fff060f670
3 changed files with 337 additions and 19 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 11
      src/permission.js
  2. 22
      src/router/index.js
  3. 323
      src/views/platform/index.vue

11
src/permission.js
Unescape View File

@ -25,9 +25,18 @@ router.beforeEach((to, from, next) => {
store.dispatch('GetInfo').then(() => {
isRelogin.show = false
store.dispatch('GenerateRoutes').then(accessRoutes => {
// 自动跳转到根路由
let root = accessRoutes.find(item => item.path === '/')
let _to
if (root && root.children.find(item => item.path.endsWith('index'))) {
root.redirect = root.children.find(item => item.path.endsWith('/index')).path
_to = { ...to, replace: true, path: root.redirect }
} else {
_to = { ...to, replace: true }
}
// 根据roles权限生成可访问的路由表
router.addRoutes(accessRoutes) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
next(_to) // hack方法 确保addRoutes已完成
})
}).catch(err => {
store.dispatch('LogOut').then(() => {

22
src/router/index.js
Unescape View File

@ -1,11 +1,10 @@
import Vue from "vue";
import Router from "vue-router";
import Vue from 'vue'
import Router from 'vue-router'
/* Layout */
import Layout from '@/layout'
Vue.use(Router);
/* Layout */
import Layout from "@/layout";
/**
* Note: 路由配置项
*
@ -61,19 +60,6 @@ export const constantRoutes = [
component: () => import("@/views/error/401"),
hidden: true,
},
{
path: "",
component: Layout,
redirect: "index",
children: [
{
path: "index",
component: () => import("@/views/index"),
name: "Index",
meta: { title: "数据面板", icon: "dashboard", affix: true },
},
],
},
{
path: "/user",
component: Layout,

323
src/views/platform/index.vue
Unescape View File

@ -0,0 +1,323 @@
<template>
<div class="app-container home">
<div class="title">{{ $route.meta.title }}</div>
<div class="body">
<el-card class="today">
<div class="card-title">今日核心数据</div>
<el-row type="flex" class="data">
<el-col>
<div class="label">新用户</div>
<div class="num">569</div>
<div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
</el-col>
<div class="divider"></div>
<el-col>
<div class="label">新用户</div>
<div class="num">569</div>
<div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
</el-col>
<div class="divider"></div>
<el-col>
<div class="label">新用户</div>
<div class="num">569</div>
<div class="bottom-label">同比上周<span class="down">8.63%</span><i class="el-icon-caret-bottom down"></i>
</div>
</el-col>
<div class="divider"></div>
<el-col>
<div class="label">近7日UV</div>
<div class="num">569</div>
</el-col>
<div class="divider"></div>
<el-col>
<div class="label">近30日UV</div>
<div class="num">569</div>
</el-col>
</el-row>
</el-card>
<el-row :gutter="10" class="order" type="flex">
<el-col :span="14">
<el-card>
<div class="card-title">全部订单</div>
<el-row type="flex" class="all-card" :gutter="10">
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
<el-col>
<div class="data">
<div class="img"></div>
<div class="value">待付款：123</div>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="5">
<el-card class="today-order">
<div class="num">569</div>
<div class="bottom-label">今日订单数</div>
</el-card>
</el-col>
<el-col :span="5">
<el-card class="total-income">
<div class="num">569.00</div>
<div class="bottom-label">今日总收入</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="10" type="flex" class="bottom">
<el-col :span="14">
<el-card>
<div class="card-title">月销售趋势</div>
<div ref="chart" class="chart"></div>
</el-card>
</el-col>
<el-col :span="10" class="rank">
<el-card class="h-100">
<div class="top">
<div class="card-title">商品销售TOP5</div>
<el-dropdown class="select-day">
<span class="el-dropdown-link">
近7天<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
</el-dropdown-menu>
</el-dropdown>
</div>
<el-table :data="rankData">
<el-table-column label="排名" type="index" align="center"></el-table-column>
<el-table-column label="商品" prop="name" align="center"></el-table-column>
<el-table-column label="订单数" prop="order" align="center"></el-table-column>
<el-table-column label="销售总额" prop="price" align="center"></el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</div>
<div class="service" v-draggable="{ x: true, y: true }"/>
</div>
</template>
<script>
import echarts from '@/plugins/echarts'
export default {
name: 'Index',
data() {
return {
// 商品销售数据
rankData: Array.from(new Array(5).keys()).map(item => {
return {
name: '华为Mate 40 手机',
order: 56,
price: 1555646.00
}
})
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
let myChart = echarts.init(this.$refs.chart)
let option
option = {
xAxis: {
type: 'category',
data: Array.from(new Array(12).keys()).map(item => `${item + 1}月`)
},
yAxis: {
type: 'value'
},
tooltip: {
show: true,
trigger: 'axis'
},
series: [
{
data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
type: 'line'
},
{
data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
type: 'line'
}
]
}
option && myChart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.home {
background-color: #f8f9fd;
.service {
border-radius: 50%;
width: 100px;
height: 100px;
position: absolute;
bottom: 40px;
right: 40px;
background-color: #fff;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
}
& > .title {
color: rgba(22, 132, 252, 1);
font-size: 14px;
text-align: left;
font-family: SourceHanSansSC-regular;
}
.card-title {
font-size: 20px;
margin-bottom: 20px;
font-weight: bold;
}
.num {
font-size: 24px;
margin-top: 10px;
}
.bottom-label {
font-size: 16px;
margin-top: 10px;
}
& > .body {
background-color: #f5f5f5;
& > .today {
margin-top: 10px;
.data {
@for $i from 1 through 4 {
& > .divider:nth-of-type(#{$i*2}) {
height: 75%;
width: 1px;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: 0;
left: 20% * $i;
}
}
.label {
font-size: 16px;
}
.up {
color: red;
}
.down {
color: green;
}
.up,
.down {
margin-left: 10px;
}
.label,
.num,
.bottom-label {
margin-left: 15%;
}
}
}
& > .order {
margin-top: 10px;
.all-card {
.data {
text-align: center;
& > .img {
background-color: #e9f2ff;
width: 50%;
/* 设置高度为宽度 */
padding-top: 50%;
margin: auto;
border-radius: 10px;
}
& > .value {
font-size: 16px;
margin-top: 5px;
}
}
}
.today-order,
.total-income {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
}
& > .bottom {
margin-top: 10px;
.h-100 {
height: 100%;
}
& > .rank {
.top {
display: flex;
justify-content: space-between;
.select-day {
font-size: 16px;
margin-top: 5px;
}
}
}
.chart {
height: 400px;
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save