|  | @@ -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>
 |