You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
5.1 KiB
195 lines
5.1 KiB
<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>
|
|
|