|
@@ -0,0 +1,96 @@
|
|
|
+<template>
|
|
|
+ <div class="m-container">
|
|
|
+ <p class="title">预约人数</p>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell title="总人数" :value="totalNum" />
|
|
|
+ <van-cell title="激活总人数" :value="activeNum" />
|
|
|
+ <van-cell title="预约总人数" :value="makeNum" />
|
|
|
+ </van-cell-group>
|
|
|
+ <div class="tableWrap">
|
|
|
+ <div class="item">
|
|
|
+ <span>序号</span>
|
|
|
+ <span>分部名</span>
|
|
|
+ <span>总人数</span>
|
|
|
+ <span>激活人数</span>
|
|
|
+ <span>预约人数</span>
|
|
|
+ <span>预约比例</span>
|
|
|
+ </div>
|
|
|
+ <div class="item" v-for="(item,index) in orangeList" :key="index">
|
|
|
+ <span>{{index+1}}</span>
|
|
|
+ <span>{{ item.organName}}</span>
|
|
|
+ <span>{{ item.totalNum}}</span>
|
|
|
+ <span>{{ item.activeNum}}</span>
|
|
|
+ <span>{{ item.makeNum}}</span>
|
|
|
+ <span>{{ item.per *100+'%'}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getactiveList } from "@/api/teacher";
|
|
|
+export default {
|
|
|
+ name: "FortuneBag",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeNum: null,
|
|
|
+ totalNum: null,
|
|
|
+ makeNum: null,
|
|
|
+ orangeList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ getactiveList().then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.activeNum = res.data.data.activeNum;
|
|
|
+ this.totalNum = res.data.data.totalNum;
|
|
|
+ this.makeNum = res.data.data.makeNum;
|
|
|
+ this.orangeList = res.data.data.practiceSumDtos;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less">
|
|
|
+.m-container {
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ height: 0.4rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #14928a;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.tableWrap {
|
|
|
+ .item {
|
|
|
+ padding: 0 5px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-bottom: 1px solid #ebedf0;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ &:nth-child(1) {
|
|
|
+ background-color: #ebedf0;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16%;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 10%;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ display: block;
|
|
|
+ width: 26%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|