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)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|