eln_web/src/views/index.vue

<template>
  <div class="app-container home">
    <el-card class="box-card home-top">
      <div class="count-box">
        <div class="count-item">
          <div class="count-left">
            <img src="@/assets/images/home-icon1.jpg" />
          </div>
          <div class="count-right">
            <div class="count-count">{{count.formTodayCount}}</div>
            <div class="count-tip">{{$t('page.business.home.jrxzbd')}}</div>
          </div>
        </div>
        <div class="count-item">
          <div class="count-left">
            <img src="@/assets/images/home-icon1.jpg" />
          </div>
          <div class="count-right">
            <div class="count-count">{{count.formYtjCount}}</div>
            <div class="count-tip">{{$t('page.business.home.ytjbd')}}</div>
          </div>
        </div>
        <div class="count-item">
          <div class="count-left">
            <img src="@/assets/images/home-icon1.jpg" />
          </div>
          <div class="count-right">
            <div class="count-count">{{count.formTbzCount}}</div>
            <div class="count-tip">{{$t('page.business.home.dtjbd')}}</div>
          </div>
        </div>
        <div class="count-item">
          <div class="count-left">
            <img src="@/assets/images/home-icon1.jpg" />
          </div>
          <div class="count-right">
            <div class="count-count">{{count.studyFinishCount}}</div>
            <div class="count-tip">{{$t('page.business.home.bzxzsy')}}</div>
          </div>
        </div>
        <div class="count-item">
          <div class="count-left">
            <img src="@/assets/images/home-icon1.jpg" />
          </div>
          <div class="count-right">
            <div class="count-count">{{count.studyWeekCount}}</div>
            <div class="count-tip">{{$t('page.business.home.ywcsy')}}</div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="box-card home-content">
      <div slot="header" class="clearfix">
        <span>系统通知</span>
      </div>
      <div class="notice-list" v-loading="loading">
        <div class="notice-item" v-for="(item,index) in noticeList" :key="index">
          <div class="notice-title"><el-badge is-dot class="notice-dot"></el-badge>{{item.title}}</div>
          <div class="notice-date">{{item.createTime}}</div>
        </div>

        <pagination
          v-show="noticeTotal>0"
          :total="noticeTotal"
          :page.sync="searchForm.pageNum"
          :limit.sync="searchForm.pageSize"
          @pagination="getNoticeList"
        />
      </div>

    </el-card>
  </div>
</template>

<script>
import { home_count,home_noticeList} from "@/api/business/home/home";
export default {
  name: "Index",
  data() {
    return {
      count:{
        formTodayCount:'',
        formYtjCount:'',
        formTbzCount:'',
        studyFinishCount:'',
        studyWeekCount:'',
      },
      loading:false,
      searchForm: {
        pageNum: 1,
        pageSize: 10,
      },
      noticeList:[],
      noticeTotal:0
    }
  },
  created(){
    this.getCount()
    this.getNoticeList()
  },
  methods: {
    getCount(){
      this.count = {
        formTodayCount:'',
        formYtjCount:'',
        formTbzCount:'',
        studyFinishCount:'',
        studyWeekCount:'',
      }
      this.$modal.loading()
      home_count().then(response => {
        this.count = response.data
      })
      .finally(() => {
        this.$modal.closeLoading()
      })
    },
    getNoticeList(){
      this.loading = true;
      this.searchForm.startDate = this.daterange && this.daterange.length > 0 ? this.daterange[0] : ''
      this.searchForm.endDate = this.daterange && this.daterange.length > 1 ? this.daterange[1] : ''
      home_noticeList(this.searchForm).then(response => {
        this.noticeList = response.rows;
        this.noticeTotal = response.total;
      }).finally(()=>{
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="scss">
.home{
  .home-top{
    margin-bottom: 20px;
    .count-box{
      display: flex;
      flex-direction: row;
      align-items: center;
      .count-item{
        flex-shrink: 0;
        width: 20%;
        display: flex;
        flex-direction: row;
        align-items: center;
        .count-left{
          flex-shrink: 0;
          img{
            width: 60px;
          }
        }
        .count-right{
          flex-grow: 1;
          margin-left: 20px;
          .count-count{
            font-size: 20px;
            font-weight: bold;
          }
          .count-tip{
            margin-top: 10px;
          }
        }
      }
    }
  }
  .home-content{
    min-height: 400px;
    .notice-list{
      .notice-item{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        padding-bottom: 5px;
        font-size: 12px;
        .notice-title{
          flex-shrink: 0;
          .notice-dot{
            margin-right: 2px;
            margin-top: 5px;
          }
        }
        .notice-date{
          flex-grow: 1;
          text-align: right;
        }
      }
    }
  }
}
</style>