管理员前端的欢迎界面只有一个发布的动态轮转框太单调,我又加了三个小组件。
- element UI的进度条
element UI的进度条可以直观展示比例。在首页增加一个进度条显示管理员已处理的申请数,进度条在一个el-card组件内,还有具体数字展示在下方。前端代码如下:
<el-card class="box-card" style=" margin-top: 15px">
<div slot="header" class="clearfix">
<span style="float: left">已处理申请</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="jumpToHA">处理申请</el-button>
</div>
<div class="text item">
<el-row>
<el-progress :percentage=percentage ></el-progress>
</el-row>
<el-row><span> </span></el-row>
<el-row><span> </span></el-row>
<el-row>
<span style="float: left">未处理申请数:{{this.noHandle}}</span>
</el-row>
<el-row><span> </span></el-row>
<el-row>
<span style="float: left">已处理申请数:{{this.alHandle}}</span>
</el-row>
<el-row><span> </span></el-row>
<el-row>
<span style="float: left">总申请数:{{this.twHandle}}</span>
</el-row>
</div>
</el-card>
<script>
countApp(){
let _this = this;
axios.get(`api/getAllApplicationList`).then(function (response) {
let result = response.data;
let totalNA=0;
let totalCount=0;
for (let i = 0;i < result.length;i++) {
if(result[i].apg === 2){
totalNA=totalNA+1;
}
totalCount=totalCount+1;
}
_this.noHandle=totalNA;
console.log("未处理申请数:"+_this.noHandle)
_this.twHandle=totalCount;
console.log("总申请数:"+_this.twHandle)
_this.alHandle=totalCount-totalNA;
console.log("已处理申请数:"+_this.alHandle)
_this.percentage=(_this.alHandle/_this.twHandle*100).toFixed(1)
console.log("百分比:"+_this.percentage)
});
</script>
在created部分调用this.countApp(),页面加载时也加载进度条。
2. 在页面添加日历
element UI提供一个日历组件,但日历的大小已被固定。为了适应首页大小,可以在style中使用/deep/
深度选择器来改变element UI组件的样式。代码如下:
/deep/ .el-calendar-table .el-calendar-day{
width: 50px;
height: 50px;
}
日历组件的引入:
<el-card class="box-card" style=" margin-top: 15px">
<el-calendar v-model="value">
</el-calendar>
</el-card>
在data()的return中声明value: new Date()
。
- 快捷模块
点击快捷模块中的图标即可调到相应的界面,这是由<router-link :to="'/0-0'">
组件实现的。将icon和文字类型的按钮都放在这个组件中,点击组件中的任意地方就可以实现跳转。代码如下:
<router-link :to="'/0-0'">
<div class="quick_menu_item">
<div class="icon">
<i class="el-icon-circle-plus-outline"></i>
</div>
<div class="text"><el-button type="text" >处理申请</el-button></div>
</div>
</router-link>
- 排布
这些组件的长度不相同,日历组件更长一些,如果按照普通的排布,直接把这些组件放在一起,则会出现大面积空白的现象。可以使用el-row和el-col来排布。在一个el-row组件中,即一行中,定义<el-col :span="12">
得到两列的效果。然后把日历放在右边,进度条和快捷功能放在左边,左边的col再分为两个el-row上下排布这两个组件。最后调整一下个别组件的高度。效果图如下: