first commit
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
<!--#
|
||||
layout("/layouts/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.top-col {
|
||||
background-color: white;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
width: calc((100% - (20px * 3)) / 4);
|
||||
overflow: hidden;
|
||||
color: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.top-col:hover {
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.top-col:not(:last-child), .center-col:not(:last-child) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.col-title {
|
||||
/*color: rgba(0, 0, 0, .45);*/
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.top-col-member-number {
|
||||
font-size: 30px;
|
||||
/*color: rgba(0, 0, 0, .85);*/
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.top-col-chart {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.center-col {
|
||||
background-color: white;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
/*width: calc((100% - (20px)) / 2);*/
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
scrollbar-width: none; /* firefox */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.num-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.num-card .top-col {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak style="background-color: #f0f2f5;padding: 20px;box-sizing: border-box;">
|
||||
|
||||
<el-card shadow="never">
|
||||
|
||||
<el-date-picker
|
||||
@change="getData()"
|
||||
v-model="pageForm.year"
|
||||
value-format="yyyy"
|
||||
type="year"
|
||||
placeholder="年度">
|
||||
</el-date-picker>
|
||||
</el-card>
|
||||
|
||||
<el-row type="flex" style="margin-top: 20px" class="num-card">
|
||||
<el-col :span="6" class="top-col" style="background: rgb(248, 108, 107)">
|
||||
<div class="col-title">总开放场次</div>
|
||||
<div class="top-col-member-number">{{numberSessionMap.total}}<span
|
||||
style="font-size: 14px"> 次</span></div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="top-col" style="background: rgb(133, 149, 244)">
|
||||
<div class="col-title">预约成功场次</div>
|
||||
<div class="top-col-member-number">{{numberSessionMap.successNum}}<span
|
||||
style="font-size: 14px"> 次</span></div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="top-col" style="background: rgb(254, 187, 80)">
|
||||
<div @click="tableIndex = 1; tableChange()">
|
||||
<div class="col-title">咨询师人数</div>
|
||||
<div class="top-col-member-number">{{doctorList.length}}<span
|
||||
style="font-size: 14px"> 人</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" class="top-col" style="background: #26A65B">
|
||||
<div @click="tableIndex = 2; tableChange()">
|
||||
<div class="col-title">总计服务教师人数</div>
|
||||
<div class="top-col-member-number">{{serviceTeacherCount}}<span
|
||||
style="font-size: 14px"> 人</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row type="flex" style="background-color: #f0f2f5;margin-top: 20px">
|
||||
<!-- <el-col class="center-col" :span="12">-->
|
||||
<!-- <vi-title title="按分工会统计"></vi-title>-->
|
||||
<!-- <el-table ref="unionTable" :data="unionData" style="width: 100%;"-->
|
||||
<!-- :height="tableHeight"-->
|
||||
<!-- :header-cell-style="{background:'#FAFAFA'}" row-key="id">-->
|
||||
<!-- <el-table-column label="序号" width="100px" type="index"></el-table-column>-->
|
||||
<!-- <el-table-column prop="unioncode" label="院级工会" sortable show-overflow-tooltip>-->
|
||||
<!-- <template scope="{row}">-->
|
||||
<!-- {{row.unionName}} {{isDisPlayCode?'（'+row.unionCode+'）':null}}-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- <el-table-column prop="userNum" label="预约人数" width="120px" sortable-->
|
||||
<!-- show-overflow-tooltip></el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col v-show="tableIndex === 1" class="center-col" :span="24">
|
||||
<vi-title title="按咨询师统计"></vi-title>
|
||||
<el-table ref="unionTable" :data="doctorList" style="width: 100%;"
|
||||
:height="tableHeight"
|
||||
:header-cell-style="{background:'#FAFAFA'}" row-key="id">
|
||||
<el-table-column label="序号" width="100px" type="index"></el-table-column>
|
||||
<el-table-column prop="doctorUserName" label="咨询师" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="sex" label="性别" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="jobTitle" label="职称" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="serviceNum" label="服务次数" width="120px" sortable
|
||||
show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="操作" width="160px">
|
||||
<template scope="{row}">
|
||||
<el-button @click="openView(row)" type="primary" size="mini">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
|
||||
<el-col v-if="tableIndex === 2" class="center-col" :span="24">
|
||||
<vi-title title="按服务教师统计"></vi-title>
|
||||
<el-table ref="unionTable" :data="applyUserTable" style="width: 100%;"
|
||||
:height="tableHeight"
|
||||
:header-cell-style="{background:'#FAFAFA'}" row-key="id">
|
||||
<el-table-column label="序号" width="100px" type="index"></el-table-column>
|
||||
<el-table-column prop="applyUserName" label="教师" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="sex" label="性别" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="unitName" label="所属单位" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="unionName" label="所属工会" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="startTime" label="开始时间" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="endTime" label="结束时间" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="doctorUserName" label="咨询师" sortable show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
|
||||
|
||||
<el-dialog :visible.sync="applyUserVisible" width="60%" title="服务教师列表" top="100px">
|
||||
<el-table :data="applyUserList" style="width: 100%;" row-key="id">
|
||||
<el-table-column label="序号" width="100px" type="index"></el-table-column>
|
||||
<el-table-column prop="applyUserName" label="教师" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="sex" label="性别" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="unitName" label="所属单位" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="unionName" label="所属工会" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="startTime" label="开始时间" sortable show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="endTime" label="结束时间" sortable show-overflow-tooltip></el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="applyUserVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
data() {
|
||||
return {
|
||||
applyUserList: [],
|
||||
applyUserVisible: false,
|
||||
numberSessionMap: {},
|
||||
unionData: [],
|
||||
tableHeight: '0px',
|
||||
doctorList: [],
|
||||
pageForm: {
|
||||
year: null
|
||||
},
|
||||
serviceTeacherCount: 0,
|
||||
tableIndex: 1,
|
||||
applyUserTable: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async openView(row) {
|
||||
const resp = await $.post(loc() + '/tableChangeData', {
|
||||
year: this.pageForm.year,
|
||||
tableIndex: 2,
|
||||
doctorUser: row.userId
|
||||
})
|
||||
if (resp.code === 0) {
|
||||
this.applyUserList = resp.data
|
||||
}
|
||||
this.applyUserVisible = true
|
||||
},
|
||||
async tableChange() {
|
||||
this.pageForm.tableIndex = this.tableIndex
|
||||
const resp = await $.post(loc() + '/tableChangeData', this.pageForm)
|
||||
if (resp.code === 0) {
|
||||
if (this.tableIndex === 1) {
|
||||
this.doctorList = resp.data
|
||||
} else {
|
||||
this.applyUserTable = resp.data
|
||||
}
|
||||
}
|
||||
},
|
||||
async getData() {
|
||||
const resp = await $.post(loc() + '/getData', this.pageForm)
|
||||
if (resp.code === 0) {
|
||||
this.numberSessionMap = resp.data.numberSessionMap
|
||||
this.unionData = resp.data.unionList
|
||||
this.doctorList = resp.data.doctorList
|
||||
this.serviceTeacherCount = resp.data.serviceTeacherCount
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.tableHeight = window.innerHeight - (this.$refs.unionTable.$el.getBoundingClientRect().top) - 20 - 20 + 'px'
|
||||
window.onresize = () => {
|
||||
this.tableHeight = window.innerHeight - (this.$refs.unionTable.$el.getBoundingClientRect().top) - 20 - 20 + 'px'
|
||||
}
|
||||
})
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user