前言
目录
一、首页效果图
二、首页的基本布局
在src/views/dashboard/index.vue中添加布局代码，由于首页内容大部分都是静态内容，所以在这不做代码演示
三、首页用户资料显示
在src/views/dashboard/index.vue中添加如下代码：
<div class="fl headL">
<div class="headImg">
//当我们加载图片失败的时候，显示默认图片
<img :src="userInfo.staffPhoto" v-imageerror="defaultImg">
</div>
<div class="headInfoTip">
<p class="firstChild">早安，{
{
userInfo.username }}，祝你开心每一天！</p>
<p class="lastChild">{
{
userInfo.username }} | {
{
userInfo.companyName }}-{
{
userInfo.departmentName }}</p>
</div>
</div>
<script>
import {
createNamespacedHelpers } from 'vuex'
const {
mapState } = createNamespacedHelpers('user')
export default {
name: 'Dashboard',
data() {
return {
defaultImg: require('@/assets/common/head.jpg'),
}
},
computed: {
//直接获取Vuex的用户资料即可
...mapState(['userInfo'])
}
}
</script>
四、工作日历组件封装
在src/views/dashboard/components/work-calendar.vue中添加以下代码：
工作日历可以基于Element组件el-calendar进行封装：
<template>
<div>
<el-row type="flex" justify="end">
<el-select v-model="currentYear" size="small" style="width: 120px" @change="dateChange">
<el-option v-for="item in yearList" :key="item" :label="item" :value="item">{
{
item }}</el-option>
</el-select>
<el-select v-model="currentMonth" size="small" style="width: 120px;margin-left:10px" @change="dateChange">
<el-option v-for="item in 12" :key="item" :label="item" :value="item">{
{
item }}</el-option>
</el-select>
</el-row>
<el-calendar v-model="currentDate">
<template v-slot:dateCell="{ date, data }" class="content">
<div class="date-content">
<span class="text"> {
{
data.day | getDay }}</span>
<span v-if="isWeek(date)" class="rest">休</span>
</div>
</template>
</el-calendar>
</div>
</template>
实现工作日历逻辑：
export default {
filters: {
getDay(value) {
const day = value.split('-')[2]
return day.startsWith('0') ? day.substr(1) : day
}
},
props: {
startDate: {
type: Date,
default: () => new Date()
}
},
data() {
return {
currentMonth: null, // 当前月份
currentYear: null, // 当前年份
currentDate: null,
yearList: []
}
},
// 初始化事件
created() {
// 处理起始时间
// 组件要求起始时间必须是 周一开始 以一个月为开始
this.currentMonth = this.startDate.getMonth() + 1
this.currentYear = this.startDate.getFullYear()
// 根据当前的年 生成可选年份 前后各加5年
this.yearList = Array.from(Array(11), (value, index) => this.currentYear + index - 5 )
// 计算 当年当月的第一个周一 再加上 四周之后的一个月月份
this.dateChange()
},
methods: {
// 是否是休息日
isWeek(value) {
return value.getDay() === 6 || value.getDay() === 0
},
// 年月份改变之后
dateChange() {
const year = this.currentYear
const month = this.currentMonth
this.currentDate = new Date(`${
year}-${
month}-1`) // 以当前月的1号为起始
}
}
}
在src/views/dashboard/index.vue中应用该组件：
<!-- 放置日历组件 -->
<work-calendar />
五、雷达图组件封装
5.1 安装echarts图表
$ npm i echarts
5.2 新建雷达图组件
在src/views/dashboard/components/radar.vue添加如下代码：
<template>
<!-- 雷达图 图表必须给高和宽度-->
<div ref="myDiv" class="radar-echart" />
</template>
<script>
// 完成加载过程
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/radar') // 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
// 页面渲染完毕事件
mounted() {
const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
myChart.setOption({
title: {
text: '基础雷达图'
},
tooltip: {
},
legend: {
data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
},
radar: {
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
// 每个区域的最高值
indicator: [
{
name: '工作效率', max: 100 },
{
name: '考勤', max: 100 },
{
name: '积极性', max: 100 },
{
name: '帮助同事', max: 100 },
{
name: '自主学习', max: 100 },
{
name: '正确率', max: 100 }
]
},
series: [{
name: '预算 vs 开销（Budget vs spending）',
type: 'radar',
// areaStyle: {normal: {}},
data: [
{
value: [10, 1, 100, 5, 100, 0],
name: '张三'
},
{
value: [50, 50, 50, 50, 50, 10],
name: '李四'
}
]
}]
})
}
}
</script>
<style>
.radar-echart {
width: 600px;
height: 400px;
}
</style>
这样我们可以得到一个雷达图，对绩效指数进行统计：
5.3 将雷达图组件导入主页
import Radar from './components/radar'
<!-- 放置雷达图 -->
<radar />