420 lines
10 KiB
Markdown
420 lines
10 KiB
Markdown
# 大屏开发文档
|
||
|
||
demo下载地址 http://47.100.54.81:3000/LiuXue/Youchain_DaPinDemo.git
|
||
|
||
[Examples - Apache ECharts](https://echarts.apache.org/examples/zh/index.html)
|
||
|
||
关键代码地址：/src/router/index.js /src/router/router.js
|
||
|
||
router.js
|
||
|
||
你需要像login 页面一样给新页面添加访问路径，并配置标题（浏览器顶部显示）以及vue的路径
|
||
|
||
```
|
||
import Vue from 'vue'
|
||
import Router from 'vue-router'
|
||
import Layout from '../layout/index'
|
||
|
||
Vue.use(Router)
|
||
|
||
export const constantRouterMap = [
|
||
{ path: '/login',
|
||
meta: { title: '登录', noCache: true },
|
||
component: (resolve) => require(['@/views/login'], resolve),
|
||
hidden: true
|
||
},
|
||
{ path: '/home',
|
||
meta: { title: '登录', noCache: true },
|
||
component: (resolve) => require(['@/views/home'], resolve),
|
||
hidden: true
|
||
},
|
||
{ path: '/test',
|
||
meta: { title: '测试', noCache: true },
|
||
component: (resolve) => require(['@/views/app-dashboard/index'], resolve),
|
||
hidden: true
|
||
},
|
||
{ path: '/test2',
|
||
meta: { title: '测试2', noCache: true },
|
||
component: (resolve) => require(['@/views/zhongwei-daping/index'], resolve),
|
||
hidden: true
|
||
},
|
||
{
|
||
path: '/404',
|
||
component: (resolve) => require(['@/views/features/404'], resolve),
|
||
hidden: true
|
||
},
|
||
{
|
||
path: '/401',
|
||
component: (resolve) => require(['@/views/features/401'], resolve),
|
||
hidden: true
|
||
},
|
||
{
|
||
path: '/redirect',
|
||
component: Layout,
|
||
hidden: true,
|
||
children: [
|
||
{
|
||
path: '/redirect/:path*',
|
||
component: (resolve) => require(['@/views/features/redirect'], resolve)
|
||
}
|
||
]
|
||
},
|
||
{
|
||
path: '/',
|
||
component: Layout,
|
||
redirect: '/dashboard',
|
||
children: [
|
||
{
|
||
path: 'dashboard',
|
||
component: (resolve) => require(['@/views/home'], resolve),
|
||
name: 'Dashboard',
|
||
meta: { title: '首页', icon: 'index', affix: true, noCache: true }
|
||
}
|
||
]
|
||
},
|
||
{
|
||
path: '/user',
|
||
component: Layout,
|
||
hidden: true,
|
||
redirect: 'noredirect',
|
||
children: [
|
||
{
|
||
path: 'center',
|
||
component: (resolve) => require(['@/views/system/user/center'], resolve),
|
||
name: '个人中心',
|
||
meta: { title: '个人中心' }
|
||
}
|
||
]
|
||
}
|
||
]
|
||
|
||
export default new Router({
|
||
// mode: 'hash',
|
||
mode: 'history',
|
||
scrollBehavior: () => ({ y: 0 }),
|
||
routes: constantRouterMap
|
||
})
|
||
|
||
```
|
||
|
||
|
||
|
||
index.js
|
||
|
||
whiteList 为白名单列表，你需要把 访问路径添加到白名单
|
||
|
||
import router from './routers'
|
||
import store from '@/store'
|
||
import Config from '@/settings'
|
||
import NProgress from 'nprogress' // progress bar
|
||
import 'nprogress/nprogress.css'// progress bar style
|
||
import { buildMenus } from '@/api/system/menu'
|
||
import { filterAsyncRouter } from '@/store/modules/permission'
|
||
|
||
NProgress.configure({ showSpinner: false })// NProgress Configuration
|
||
|
||
const whiteList = ['/login', '/401', '/404', '/home', '/test', '/test2']// no redirect whitelist
|
||
|
||
router.beforeEach((to, from, next) => {
|
||
if (to.meta.title) {
|
||
document.title = to.meta.title + ' - ' + Config.title
|
||
}
|
||
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
|
||
next()
|
||
} else {
|
||
next(`/login`) // 否则全部重定向到登录页
|
||
NProgress.done()
|
||
}
|
||
})
|
||
|
||
export const loadMenus = (next, to) => {
|
||
buildMenus().then(res => {
|
||
const sdata = JSON.parse(JSON.stringify(res))
|
||
const rdata = JSON.parse(JSON.stringify(res))
|
||
const sidebarRoutes = filterAsyncRouter(sdata)
|
||
const rewriteRoutes = filterAsyncRouter(rdata, false, true)
|
||
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
|
||
|
||
store.dispatch('GenerateRoutes', rewriteRoutes).then(() => { // 存储路由
|
||
router.addRoutes(rewriteRoutes) // 动态添加可访问路由表
|
||
next({ ...to, replace: true })
|
||
})
|
||
store.dispatch('SetSidebarRouters', sidebarRoutes)
|
||
})
|
||
}
|
||
|
||
router.afterEach(() => {
|
||
NProgress.done() // finish progress bar
|
||
})
|
||
|
||
/src/view/zhongwei-daping/index.vue
|
||
|
||
使用el-row 对页面进行布局
|
||
|
||
.mian-container / background-image 为背景图片
|
||
|
||
.divmao 单块背景模糊
|
||
|
||
backdrop-filter 模糊像素，越大越模糊
|
||
|
||
background 背景色，最后两位是透明度
|
||
|
||
box-shadow 边缘阴影
|
||
|
||
|
||
|
||
```
|
||
<template>
|
||
<div class="mian-container">
|
||
<el-row style="height: 20px">
|
||
<el-col :span="24"><div style="height: 100px;background: #f4516c00" /></el-col>
|
||
</el-row>
|
||
<el-row style="height: 100%">
|
||
<el-col :span="8" style="height: 95%">
|
||
<el-row class="divmao" style="height: 30%; margin: 5px;">
|
||
<RadarChart />
|
||
</el-row>
|
||
<el-row class="divmao" style="height: 30%; margin: 5px;">
|
||
<RadarChart />
|
||
</el-row>
|
||
<el-row class="divmao" style="height: 40%; margin: 5px;">
|
||
<RadarChart />
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :span="8" style="height: 95%">
|
||
<el-row class="divmao" style="height: 100%; margin: 5px 5px 5px 5px;">
|
||
<BarChart />
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :span="8" style="height: 95%">
|
||
<el-row class="divmao" style="height: 30%; margin: 5px ;">
|
||
<RightChart1 />
|
||
</el-row>
|
||
<el-row class="divmao" style="height: 30%; margin: 5px;">
|
||
<RadarChart />
|
||
</el-row>
|
||
<el-row class="divmao" style="height: 40%; margin: 5px;">
|
||
<RadarChart />
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import RadarChart from './RadarChart.vue'
|
||
import BarChart from '@/views/zhongwei-daping/BarChart.vue'
|
||
import RightChart1 from '@/views/zhongwei-daping/RightChart1.vue'
|
||
export default {
|
||
name: 'DataView',
|
||
components: {
|
||
BarChart,
|
||
RightChart1,
|
||
// eslint-disable-next-line vue/no-unused-components
|
||
RadarChart
|
||
},
|
||
data() {
|
||
return {}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.mian-container{
|
||
height: 100%;
|
||
width: 100%;
|
||
background-image: url('./img/bg2.png');
|
||
display: flex;
|
||
background-size:cover;
|
||
flex-direction: column;
|
||
}
|
||
.divmao{
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
backdrop-filter: blur(1px);
|
||
background: #ffffff10;
|
||
color: #fff;
|
||
box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
|
||
}
|
||
|
||
</style>
|
||
|
||
```
|
||
|
||
页面添加雷达图
|
||
|
||
import RadarChart from './RadarChart.vue'
|
||
|
||
在components 中引用
|
||
|
||
```
|
||
export default {
|
||
name: 'DataView',
|
||
components: {
|
||
BarChart,
|
||
RightChart1,
|
||
// eslint-disable-next-line vue/no-unused-components
|
||
RadarChart
|
||
},
|
||
data() {
|
||
return {}
|
||
}
|
||
|
||
}
|
||
```
|
||
|
||
直接在 EL 中添加
|
||
|
||
```
|
||
<el-row class="divmao" style="height: 30%; margin: 5px ;">
|
||
<RightChart1 />
|
||
</el-row>
|
||
```
|
||
|
||
/src/zhongwei-daping/RadarChatr 雷达图
|
||
|
||
静态数据
|
||
|
||
```
|
||
<template>
|
||
<div :class="className" :style="{height:height,width:width}" />
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from 'echarts' // echarts theme
|
||
import { debounce } from '@/utils'
|
||
require('echarts/theme/macarons')
|
||
|
||
const animationDuration = 3000
|
||
|
||
export default {
|
||
props: {
|
||
className: {
|
||
type: String,
|
||
default: 'chart'
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: '100%'
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: '200px'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initChart()
|
||
this.__resizeHandler = debounce(() => {
|
||
if (this.chart) {
|
||
this.chart.resize()
|
||
}
|
||
}, 100)
|
||
window.addEventListener('resize', this.__resizeHandler)
|
||
},
|
||
beforeDestroy() {
|
||
if (!this.chart) {
|
||
return
|
||
}
|
||
window.removeEventListener('resize', this.__resizeHandler)
|
||
this.chart.dispose()
|
||
this.chart = null
|
||
},
|
||
methods: {
|
||
initChart() {
|
||
this.chart = echarts.init(this.$el, 'macarons')
|
||
|
||
this.chart.setOption({
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
radar: {
|
||
radius: '66%',
|
||
center: ['50%', '42%'],
|
||
splitNumber: 8,
|
||
splitArea: {
|
||
areaStyle: {
|
||
color: 'rgba(127,95,132,.3)',
|
||
opacity: 1,
|
||
shadowBlur: 45,
|
||
shadowColor: 'rgba(0,0,0,.5)',
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 15
|
||
}
|
||
},
|
||
indicator: [
|
||
{ name: 'Sales', max: 10000 },
|
||
{ name: 'Administration', max: 20000 },
|
||
{ name: 'Information Techology', max: 20000 },
|
||
{ name: 'Customer Support', max: 20000 },
|
||
{ name: 'Development', max: 20000 },
|
||
{ name: 'Marketing', max: 20000 }
|
||
]
|
||
},
|
||
legend: {
|
||
left: 'center',
|
||
bottom: '10',
|
||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||
},
|
||
series: [{
|
||
type: 'radar',
|
||
symbolSize: 0,
|
||
areaStyle: {
|
||
normal: {
|
||
shadowBlur: 13,
|
||
shadowColor: 'rgba(0,0,0,.2)',
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 10,
|
||
opacity: 1
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||
name: 'Allocated Budget'
|
||
},
|
||
{
|
||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||
name: 'Expected Spending'
|
||
},
|
||
{
|
||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||
name: 'Actual Spending'
|
||
}
|
||
],
|
||
animationDuration: animationDuration
|
||
}]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
```
|
||
|
||
动态数据的话，修改 initChart()部分为
|
||
|
||
```
|
||
methods: {
|
||
initChart() {
|
||
this.chart = echarts.init(this.$el, 'macarons')
|
||
crudSysAppUpdate.get().then(res => {
|
||
this.chart.setOption(res)
|
||
})
|
||
}
|
||
}
|
||
```
|
||
|
||
|