first commit
This commit is contained in:
@@ -0,0 +1,287 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
<script src="http://at.alicdn.com/t/font_2063971_cqi5zxu5jgs.js"></script>
|
||||
<script src="http://at.alicdn.com/t/font_2064092_sfw4i61tj5s.js"></script>
|
||||
<style>
|
||||
.icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.icon2 {
|
||||
width: 50px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
height: calc(100% - 110px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-container > .el-card {
|
||||
width: 25%;
|
||||
margin: 10px 50px;
|
||||
}
|
||||
|
||||
.list-block {
|
||||
/*display: inline-flex;*/
|
||||
border-bottom: 1px dashed #EBEEF5;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0 20px;
|
||||
/*height: 50px;*/
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-item > div {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
height: 50px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.card-container .el-card__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.circle4 {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
margin: 0 auto;
|
||||
/*margin-top: 120px;*/
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.element6 {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #1296db;
|
||||
background: -webkit-radial-gradient(circle closest-side, #1296db 76%, #fff 50%);
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header_card {
|
||||
padding: 0 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<div id="app" v-cloak>
|
||||
|
||||
<el-card class="header_card" shadow="never">
|
||||
<div class="btn-group tool-button">
|
||||
<el-date-picker :clearable="false"
|
||||
:picker-options="pickerOptions"
|
||||
@change="getAllHd"
|
||||
class="mr5" placeholder="选择年"
|
||||
style="width: 100%"
|
||||
type="year" v-model="pageForm.year"
|
||||
value-format="yyyy">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div class="btn-group tool-button">
|
||||
<el-select @change="hdChange" filterable placeholder="请选择活动"
|
||||
style="width: 100%" v-model="pageForm.hdid">
|
||||
<el-option :key="o._id" :label="o.name" :value="o._id"
|
||||
v-for="o in hdOptions"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="btn-group tool-button">
|
||||
<el-input @keyup.enter.native="doSearch" clearable placeholder="请输入内容"
|
||||
style="width: 100%" v-model="pageForm.searchKeyword">
|
||||
<el-select placeholder="查询类型" slot="prepend" style="width: 110px;"
|
||||
v-model="pageForm.searchName">
|
||||
<el-option label="姓名" value="username"></el-option>
|
||||
<el-option label="工号" value="loginname"></el-option>
|
||||
</el-select>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="btn-group tool-button">
|
||||
<el-select @change="unionChange" clearable filterable
|
||||
placeholder="请选择所属工会" style="width: 350px" v-model="pageForm.unionId">
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.unionname"
|
||||
:value="item.id"
|
||||
v-for="item in unionOptions">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="btn-group tool-button">
|
||||
<el-select @change="doSearch" clearable filterable
|
||||
placeholder="请选择所属单位会" style="width: 350px" v-model="pageForm.unitId">
|
||||
<el-option
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in unitOptions">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="btn-group tool-button">
|
||||
<el-button @click="doSearch" icon="el-icon-search" type="primary"></el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div class="card-container">
|
||||
<el-card shadow="hover" v-for="(e,key) in eqe">
|
||||
<div slot="header">
|
||||
{{lj[key]}}
|
||||
</div>
|
||||
<div class="list-block" v-if="e.list.length>0">
|
||||
<div class="list-item" v-for="(o,i) in e.list">
|
||||
<div style="display: inline-flex;align-items: center;justify-content: center;width: 50px"
|
||||
v-if="['today','summary'].includes(key) && i > 0">
|
||||
<svg aria-hidden="true" class="icon" v-if="i===1">
|
||||
<use xlink:href="#icon-gold"></use>
|
||||
</svg>
|
||||
<svg aria-hidden="true" class="icon" v-else-if="i===2">
|
||||
<use xlink:href="#icon-silver"></use>
|
||||
</svg>
|
||||
<svg aria-hidden="true" class="icon" v-else-if="i===3">
|
||||
<use xlink:href="#icon-tongpai"></use>
|
||||
</svg>
|
||||
<div class="element6" v-else>
|
||||
{{i}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-right">
|
||||
<div>
|
||||
<span v-if="o.loginname">
|
||||
{{o.username}}
|
||||
</span>
|
||||
<span>
|
||||
（{{o.loginname}}）
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
{{['today','summary'].includes(key) ? o.step : o.unitname}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center" v-else>
|
||||
暂无数据
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let vue = new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return (
|
||||
time.getFullYear() > new Date().getFullYear()
|
||||
);
|
||||
}
|
||||
},
|
||||
eqe: {
|
||||
today: {list: []},
|
||||
summary: {list: []},
|
||||
yesterday: {list: []},
|
||||
},
|
||||
data: {
|
||||
todaylist: [],
|
||||
summarylist: [],
|
||||
yesterdaylist: [],
|
||||
},
|
||||
pageForm: {
|
||||
year: new Date().getFullYear() + '',
|
||||
},
|
||||
unionOptions: [],
|
||||
unitOptions: [],
|
||||
hdOptions: [],
|
||||
lj: {today: '当日榜', summary: '累计排行榜', yesterday: '昨日中奖榜'}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hdChange() {
|
||||
|
||||
},
|
||||
async getAllHd() {
|
||||
this.pageForm.hdid = ''
|
||||
this.activityOptions = []
|
||||
const {year} = this.pageForm
|
||||
if (year) {
|
||||
const beforeTime = moment().year(year).startOf('year').valueOf();
|
||||
const endTime = moment().year(year).endOf('year').valueOf();
|
||||
this.pageForm = {...this.pageForm, beforeTime, endTime}
|
||||
}
|
||||
|
||||
let {data} = await GET('/jsz/common/getAllHd', this.pageForm)
|
||||
if (data == null || data.length === 0) {
|
||||
this.tableData = []
|
||||
return
|
||||
}
|
||||
|
||||
data = data.filter(v => v.activityModel === 'stepCount')
|
||||
|
||||
this.hdOptions = data
|
||||
if (this.hdOptions) {
|
||||
this.pageForm.hdid = this.hdOptions[0]._id
|
||||
}
|
||||
},
|
||||
async unionChange(val) {
|
||||
this.pageForm.unitId = null
|
||||
this.unitOptions = await getUnits(val)
|
||||
this.doSearch()
|
||||
},
|
||||
doSearch() {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageData()
|
||||
},
|
||||
async pageData() {
|
||||
const resp = await $.post("/jsz/leaderboard/pageData", this.pageForm)
|
||||
if (resp.code === 0) {
|
||||
const {data} = resp
|
||||
this.eqe = data
|
||||
console.log(this.eqe)
|
||||
} else {
|
||||
this.$message.error(resp_data.msg)
|
||||
}
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.unionOptions = await getUnions(null)
|
||||
this.unitOptions = await getUnits(null)
|
||||
await this.getAllHd()
|
||||
this.pageData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user