# 大屏开发文档

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      边缘阴影

![](C:\Users\15267\AppData\Roaming\marktext\images\2023-08-31-10-38-26-image.png)

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