10 KiB

Raw Blame History

大屏开发文档

demo下载地址 http://47.100.54.81:3000/LiuXue/Youchain_DaPinDemo.git

关键代码地址：/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)  
    })  
  }  
}

10 KiB Raw Blame History Unescape Escape

大屏开发文档

10 KiB

Raw Blame History