项目实训13——界面补充

  管理员前端的欢迎界面只有一个发布的动态轮转框太单调，我又加了三个小组件。

1. 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>&nbsp;</span></el-row>
                <el-row><span>&nbsp;</span></el-row>
                <el-row>
                  <span style="float: left">未处理申请数：{
    {
    this.noHandle}}</span>
                </el-row>
                <el-row><span>&nbsp;</span></el-row>
                <el-row>
                  <span style="float: left">已处理申请数：{
    {
    this.alHandle}}</span>
                </el-row>
                <el-row><span>&nbsp;</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()。

3. 快捷模块
     点击快捷模块中的图标即可调到相应的界面，这是由<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>

4. 排布
     这些组件的长度不相同，日历组件更长一些，如果按照普通的排布，直接把这些组件放在一起，则会出现大面积空白的现象。可以使用el-row和el-col来排布。在一个el-row组件中，即一行中，定义<el-col :span="12">得到两列的效果。然后把日历放在右边，进度条和快捷功能放在左边，左边的col再分为两个el-row上下排布这两个组件。最后调整一下个别组件的高度。效果图如下：