Project training 13 - Interface supplement

   The welcome interface on the front end of the administrator has only one published dynamic rotation box, which is too monotonous , I added three more widgets .

1. element UI The progress bar
     element UI The progress bar can visually display the scale . Add a progress bar on the home page to display the number of applications processed by the administrator , The progress bar is in a el-card In component , Specific figures are shown below . The front-end code is as follows ：

            <el-card class="box-card" style=" margin-top: 15px">
              <div slot="header" class="clearfix">
                <span style="float: left"> Processed application </span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="jumpToHA"> Processing applications </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"> Number of outstanding applications ：{
    {
    this.noHandle}}</span>
                </el-row>
                <el-row><span>&nbsp;</span></el-row>
                <el-row>
                  <span style="float: left"> Number of applications processed ：{
    {
    this.alHandle}}</span>
                </el-row>
                <el-row><span>&nbsp;</span></el-row>
                <el-row>
                  <span style="float: left"> Total number of applications ：{
    {
    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(" Number of outstanding applications ："+_this.noHandle)
          _this.twHandle=totalCount;
          console.log(" Total number of applications ："+_this.twHandle)
          _this.alHandle=totalCount-totalNA;
          console.log(" Number of applications processed ："+_this.alHandle)
          _this.percentage=(_this.alHandle/_this.twHandle*100).toFixed(1)
          console.log(" percentage ："+_this.percentage)
        });
</script>

stay created Partial call this.countApp(), The progress bar is also loaded when the page is loaded .
2. Add a calendar to the page
  element UI Provides a calendar component , But the size of the calendar has been fixed . In order to adapt to the size of the home page , Can be in style Use in /deep/ Depth selector to change element UI Style of component . The code is as follows ：

/deep/ .el-calendar-table .el-calendar-day{
    
  width: 50px;
  height: 50px;
}

Introduction of calendar components ：

            <el-card class="box-card" style=" margin-top: 15px">
              <el-calendar v-model="value">
              </el-calendar>
            </el-card>

stay data() Of return In a statement value: new Date().

3. Quick module
      Click the icon in the shortcut module to call the corresponding interface , This is from <router-link :to="'/0-0'"> Component implemented . take icon And text type buttons are placed in this component , Click anywhere in the component to jump . The code is as follows ：

                  <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" > Processing applications </el-button></div>
                    </div>
                  </router-link>

4. Arrangement
      These components are not the same length , The calendar component is longer , If you follow the normal arrangement , Just put these components together , There will be a large area of blank . have access to el-row and el-col To arrange . In a el-row In the component , That is, in one line , Definition <el-col :span="12"> Get the effect of two columns . Then put the calendar on the right , The progress bar and shortcut functions are on the left , Sinister col Divided into two el-row Arrange the two components up and down . Finally, adjust the height of individual components . The renderings are as follows ：