dd_pc/src/views/ranking/manager_statistics.vue

<template>
	<div>
		<div class="all padding-20">
			<el-tabs v-model="activeName">
				<!-- 奖扣完成情况 -->
				<el-tab-pane label="奖扣完成情况" name="second">
					<el-form :model="condition" :inline="true" ref="formData">
						<!-- 部门 -->
						<el-form-item label="部门">
							<el-cascader
								size="medium"
								class="date-picker-width"
								v-model="dept_name_xq_xq"
								:options="dept_tree"
								@change="get_last_dept_null"
								:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
								ref="dept"
								clearable
								filterable
								change-on-select
								placeholder="全公司"
							></el-cascader>
						</el-form-item>

						<!-- 时间 -->
						<el-form-item label="时间">
							<el-date-picker
								class="date-picker-width"
								v-model="condition.month"
								:clearable="false"
								size="medium"
								width="100%"
								type="month"
								placeholder="请选择月份"
								value-format="yyyy-MM"
							></el-date-picker>
						</el-form-item>

						<!-- 搜索框 -->
						<el-form-item>
							<el-input
								v-model="condition.keyword"
								placeholder="输入同事姓名"
								max="200"
								size="medium"
								@keyup.enter.native="keyWordSelect"
								class="persons_name"
								:clearable="true"
							>
								<el-button slot="append" size="medium" icon="el-icon-search" @click="search_box"></el-button>
							</el-input>
						</el-form-item>

						<!-- 达标选项 -->
						<br />
						<el-form-item><el-checkbox v-model="allPass" size="medium" label="只看全部达标的"></el-checkbox></el-form-item>
						<!-- 导出报表 -->
						<el-form-item>
							<downloadexcel
								v-if="exportExcelArr.length>0"
								:fetch="returnArr"
								 name="管理者奖扣列表.xls"
								:fields="json_fields"
								>
								<el-button type="primary" plain size="medium" style="margin-left:20px">导出报表</el-button>
							</downloadexcel>
						</el-form-item>
					</el-form>
					<div class="flex-box-end">
						<span class="orange">*管理者奖扣任务均为B分，对A分不做要求*</span>
					</div>
					<el-table :data="last" style="width: 100%;cursor: pointer;" v-loading="loading2"  @row-click="openDetail">
						<el-table-column label="管理者">
							<template slot-scope="scope">
								<div class="flex-box flex-v-ce">
									<userImage :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px"></userImage>
									<span style=" margin-left: 10px; line-height: 50px; display: inline-block;">{{ scope.row.name }}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="部门" align="left" prop="dept" show-overflow-tooltip></el-table-column>
						<el-table-column label="奖分" prop="scope_count">
							<template slot-scope="scope">
								<b>{{ scope.row.reward.point }}&nbsp;</b>
								<span :class="scope.row.reward.status == 1 ? 'green' : ''">{{ scope.row.reward.status == 1 ? '达标' : '' }}</span>
								<br />
								<span class="span_h">奖分目标 {{ scope.row.reward.target }}</span>
							</template>
						</el-table-column>
						<el-table-column label="扣分" prop="reward_count">
							<template slot-scope="scope">
								<b>{{ scope.row.deduction.point }}&nbsp;</b>
								<span :class="scope.row.deduction.status == 1 ? 'green' : ''">{{ scope.row.deduction.status == 1 ? '达标' : '' }}</span>
								<br />
								<span class="span_h">扣分目标 {{ scope.row.deduction.target }}</span>
							</template>
						</el-table-column>
						<el-table-column label="奖扣比例" prop="deduct_count">
							<template slot-scope="scope">
								<div>
									<template v-if="scope.row.ratio.enable == 1">
										<b>{{ scope.row.ratio.reward_ratio }}&nbsp;:1</b>
										<span :class="scope.row.ratio.status == 1 ? 'green' : ''">{{ scope.row.ratio.status == 1 ? '达标' : '' }}</span>
									</template>
									<b v-else>-</b>
									<br />
									<span class="span_h">比例目标 {{ scope.row.ratio.target }}<b>:</b>&nbsp;1</span>
								</div>
								<!-- <div v-else style="padding-left:21px">—</div> -->
							</template>
						</el-table-column>
						<el-table-column label="人次目标" prop="deduct_count">
							<template slot-scope="scope">
								<b>{{ scope.row.exec.count }}&nbsp;</b>
								<span :class="scope.row.exec.status == 1 ? 'green' : ''">{{ scope.row.exec.status == 1 ? '达标' : '' }}</span>
								<br />
								<span class="span_h">人次目标 {{ scope.row.exec.target }}人次</span>
							</template>
						</el-table-column>
						<el-table-column>
							<template slot-scope="scope">
								<span  class="blue" style="cursor: pointer;" @click="openDetail(scope.row)">查看奖扣明细</span>
							</template>
						</el-table-column>
						<template slot="empty">
							<div class="nopoint_box">
								<div class="noimg noperson"></div>
								<span class="title">没有对应的数据</span>
							</div>
						</template>
					</el-table>
					<center style="padding: 20px 0;">
						<el-pagination
							background
							@size-change="handleSizeChange_xq"
							@current-change="handleCurrentChange_xq"
							:current-page="condition.page"
							:page-sizes="[10, 20, 50, 100]"
							layout="total, sizes, prev, pager, next"
							:page-size="condition.page_size"
							:total="totals"
						></el-pagination>
					</center>
				</el-tab-pane>
				<el-tab-pane label="奖扣执行对比" name="first" v-if="false">
					<el-form :model="formData" :inline="true" ref="formData">
						<el-form-item label="部门">
							<el-cascader
								v-model="dept_name_xq"
								:options="dept_tree"
								@change="dept_null"
								:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
								ref="depts"
								filterable
								size="medium"
								change-on-select
								placeholder="全公司"
								clearable
							></el-cascader>
						</el-form-item>
						<el-form-item label="时间">
							<el-date-picker
								class="date-picker-width"
								v-model="formData.month"
								:clearable="false"
								width="100%"
								type="month"
								size="medium"
								placeholder="请选择月份"
								value-format="yyyy-MM"
							></el-date-picker>
						</el-form-item>
					</el-form>
					<div class="flex-box-end">
						<span class="orange">*管理者奖扣任务均为B分，对A分不做要求*</span>
					</div>
					<el-table :data="list" style="width: 100%;cursor: pointer;" v-loading="loading" @row-click="open_detail">
						<el-table-column label="管理者">
							<template slot-scope="scope">
								<div class="flex-box flex-v-ce">
									<userImage  :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px"></userImage>
									<span style=" margin-left: 10px; line-height: 50px; display: inline-block;">{{ scope.row.name }}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip label="部门" align="left" min-width="120px" prop="deptName"></el-table-column>
						<el-table-column label="管理范围(人)" prop="scope_count"></el-table-column>
						<el-table-column label="人均奖分(次)" prop="reward_count"></el-table-column>
						<el-table-column label="人均扣分(次)" prop="deduct_count"></el-table-column>
						<template slot="empty">
							<div class="nopoint_box">
								<div class="noimg noperson"></div>
								<span class="title">没有对应的数据</span>
							</div>
						</template>
					</el-table>

					<center style="padding: 20px 0;">
						<el-pagination
							background
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="formData.page"
							:page-sizes="[10, 20, 50, 100]"
							layout="total, sizes, prev, pager, next"
							:page-size="formData.page_size"
							:total="total"
						></el-pagination>
					</center>

					<el-drawer size="500px" :visible.sync="detail_show" :with-header="false" direction="rtl">
						<el-button type="info" style="position: absolute; left: -100px;">test</el-button>
						<div class="drawer_title">
							{{ item.name }}的奖扣统计
							<el-tooltip placement="top">
								<div slot="content" style="width: 300px">作为管理者，管理执行力是关键，每月按要求完成奖分和扣分任务。</div>
								<span class="tips">?</span>
							</el-tooltip>
						</div>
						<div class="chart_content">
							<div v-if="personalData !== null" class="flex-box-ce" v-loading="personalData_loading">
								<div class="dataItem flex-1">
									<p class="point">{{ personalData.task.reward.point }}</p>
									<p>奖分</p>
									<p class="target">目标{{ personalData.task.reward.target }}</p>
								</div>
								<div class="dataItem flex-1">
									<p class="point">{{ personalData.task.deduction.point }}</p>
									<p>扣分</p>
									<p class="target">目标{{ personalData.task.deduction.target }}</p>
								</div>
<!-- 								<div class="dataItem flex-1">
									<p class="point">{{ personalData.task.ratio.ratio }}:1</p>
									<p>奖扣比例</p>
									<p class="target">目标 ≤ {{ personalData.task.ratio.target_ratio }}:1</p>
								</div> -->
								<div class="dataItem flex-1">
									<p class="point" v-if="personalData.task.ratio.enable==1">{{ personalData.task.ratio.reward_ratio }}:1</p>
									<p class="point" v-else>-</p>
									<p>奖扣比例</p>
									<p class="target">目标 ≤ {{ personalData.task.ratio.target }}:1</p>
								</div>
								<div class="dataItem flex-1">
									<p class="point">{{ personalData.task.exec.count }}</p>
									<p>奖扣人次</p>
									<p class="target">目标{{ personalData.task.exec.target }}</p>
								</div>
							</div>

							<div class="chart-legend__wrap">
								<span class="fl">月奖扣执行情况</span>
								<span class="chart-legend__pink">奖分</span>
								<span class="chart-legend__green">扣分</span>
							</div>
							<div id="situationChart" v-loading="echart_loading" style="height: 300px;"></div>

							<div class="chart-legend__wrap">
								<div class="fl">月奖扣人次</div>
								<span class="chart-legend__pink">奖分人次</span>
								<span class="chart-legend__green">扣分人次</span>
							</div>
							<div id="passengersChart" v-loading="echart_loading" style="height: 300px;"></div>
						</div>
					</el-drawer>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>
<script>
import downloadexcel from "vue-json-excel";	
export default {
	components:{downloadexcel},
	data() {
		return {
			json_fields:{
				'姓名':'name',
				'部门':'dept',
				'实际奖分':'point',
				'奖分目标':'target',
				'实际扣分':'point2',
				'扣分目标':'target2',
				'实际奖扣比例':'jkbl',
				'比例目标':'blmb2',
				'实际奖扣人次':'sjjk',
				'人次目标':'rcmb',
			},
			last: [],
			//完成情况
			condition: {
				month: this.$moment().format('YYYY-MM'), //时间
				page: 1, //当前页
				page_size: 10, //每页数量
				dept_id: 0, //部门id
				keyword: '', //关键字
				complete: '' //是否达标 1是
			},
			activeName: 'second',
			totals: null,
			dept_name_xq_xq: '',

			//对比
			loading: false,
			loading2: false,
			choose_time: '',
			input: '',
			radio: '1',
			formData: {
				month: this.$moment().format('YYYY-MM'),
				page: 1,
				page_size: 10,
				dept_id: 0
			},
			total: null,
			allPass: false,
			list: [],
			detail_show: false,
			echart_loading: false,
			item: {},
			dept_name_xq: '',
			dept_tree: [],
			personalData_loading: false,
			personalData: null,
			exportExcelArr:[]
		};
	},
	watch: {
		//对比
		'formData.month'(val, old_val) {
			this.formData.page = 1;
			this.get_list();
		},
		//情况
		'condition.month'(val, old_val) {
			this.condition.page = 1;
			this.get_last();
		},
		//查看全部达标
		allPass(val, old_val) {
			if (val) {
				this.condition.complete = '1';
			} else {
				this.condition.complete = '0';
			}
			this.condition.page = 1;
			this.get_last();
		}
	},
	methods: {
		returnArr(){
			return this.exportExcelArr;
		},
		opneWebSocket(index) {
			let data={};
			if(index==2){
				this.loading =true ;
				data={
					type:"es_avg",
					employee_id:this.$getUserData().id,
					page:this.formData.page,
					page_size:this.formData.page_size,
					month:this.formData.month,
					dept_id:this.formData.dept_id,
					keyword:this.formData.keyword
				};
			}else if(index==1){
				this.loading2 = true;
				data={
					type:"es",
					employee_id:this.$getUserData().id,
					page:this.condition.page,
					page_size:this.condition.page_size,
					month:this.condition.month,
					dept_id:this.condition.dept_id,
					complete:this.condition.complete||0,
					keyword:this.condition.keyword
				};
			}else if(index==3){
				data={
					type:"es",
					employee_id:this.$getUserData().id,
					page:1,
					page_size:100000,
					month:this.condition.month,
					dept_id:this.condition.dept_id,
					complete:this.condition.complete||0,
					keyword:this.condition.keyword
				};
			}else if(index==4){
				this.echart_loading=true;
				data={
					type:"es_info",
					recorder_id:this.item.id,
					month:this.formData.month
				};
			}
			
			this.$socketApiTow.sendData(data,(res)=>{
				if (res.code == 1&&res.type=='es') {
					if(res.result.source_msg.page_size==100000){
						let list = res.result.list;
						list.forEach(item=>{
							item.point=item.reward.point;
							item.target=item.reward.target;
							item.point2=item.deduction.point;
							item.target2=item.deduction.target;
							item.jkbl=item.ratio.enable == 1? item.ratio.reward_ratio+'比1':'-';
							item.blmb2=item.ratio.target+'比1';
							item.sjjk=item.exec.count;
							item.rcmb=item.exec.target;
						})
						this.exportExcelArr=list;
					}else{
						this.last = res.result.list;
						this.totals = res.result.total;
						this.$nextTick(()=>{
							this.loading2 = false;
							this.opneWebSocket(3);
						})
					}
				}
				if (res.code == 1&&res.type=='es_avg') {
					this.list =this.$returnDeptName(res.result.list);
					this.total = res.result.total;
					this.$nextTick(()=>{
						this.loading = false;
					})
				}
				if (res.code == 1&&res.type=='es_info') {
					this.personalData = res.result;
					const chart = res.result.chart;
					this.employeeName = res.result.name;
					const deduct = chart.deduct;
					const situationRewardData = [];
					const situationDeductionData = [];
					const passengersRewardData = [];
					const passengersDeductionData = [];
					const xAxisData = chart.reward.map((o, i) => {
						// 降分分数
						situationDeductionData.push(chart.reward[i].point);
						// 扣分分数
						passengersDeductionData.push(chart.deduct[i].point);
						// 奖分次数
						situationRewardData.push(chart.reward[i].count);
						// 扣分次数
						passengersRewardData.push(chart.deduct[i].count);
						return o.date;
					});
					this.situationChart.setOption(this.getChartOption(xAxisData, situationDeductionData, passengersDeductionData)); //奖分数值、扣分数值
					this.passengersChart.setOption(this.getChartOption(xAxisData, situationRewardData, passengersRewardData)); //月奖扣人次
					this.$nextTick(()=>{
						this.echart_loading = false;
					})
				}
				if (res.type=='break') {
					this.loading2 = false;
				}
				
			},true)
		},
		openDetail(e){
			let data={
				date:this.condition.month,
				id:e.id,
				name:e.name
			}
			this.$router.push({path:'/integral_event_two',query:{data:JSON.stringify(data)}})
		},
		//情况
		get_last() {
			this.opneWebSocket(1);
			return false
			this.loading = true;
			this.$axios('get', '/api/integral/statistics/prize/list', this.condition, 'v4').then(res => {
				if (res.data.code == 1) {
					this.last = res.data.data.list;
					this.totals = res.data.data.total;
				} else {
					this.$message.error(res.data.data.msg);
				}
			}).finally(() => {
				this.loading = false;
			});
		},
		//部门
		get_last_dept_null(val) {
			if (val.length == 0) {
				this.condition.dept_id = 0;
			} else {
				this.condition.dept_id = val[val.length-1];
			}
			this.$nextTick(() => {
				this.condition.page = 1;
				this.$refs.dept.dropDownVisible = false; //监听值发生变化就关闭它
				this.get_last();
			});
		},
		//搜索框
		search_box() {
			this.get_last();
		},
		//导出报表
		// opneWebSocket() {
			// let data = '';
			// //部门
			// this.condition.dept_id > 0 ? (data += '&dept_id=' + this.condition.dept_id) : (data += '&dept_id=0');
			// //时间
			// data += '&month=' + this.condition.month;
			// //搜索框
			// this.condition.keyword == '' ? (data += '&keyword=') : (data += '&keyword=' + this.condition.keyword);
			// //是否达标
			// this.condition.complete != 0 ? (data += '&complete=' + this.condition.complete) : (data += '&complete=0');
			// //当前页数
			// data += '&page=1&page_size=9999';
			// window.open(process.env.VUE_APP_BASE_API + 'api/download/prize/list/v4?employee_id=' + this.$getUserData().id + data, '_blank');
		// },
		//分页选择显示多少条
		handleCurrentChange_xq(val) {
			this.condition.page = val;
			this.get_last();
		},
		//分页
		handleSizeChange_xq(val) {
			this.condition.page_size = val;
			this.get_last();
		},
		handleSizeChange(val) {
			this.formData.page_size = val;
			this.get_list();
		},
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		get_list() {
			// this.opneWebSocket(2);
			return false
			this.loading = true;
			this.$axios('get', '/api/integral/statistics/prize/list', this.formData, 'v3')
				.then(res => {
					if (res.data.code == 1) {
						this.list =this.$returnDeptName(res.data.data.list);
						this.total = res.data.data.total;
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		search() {
			this.get_list();
		},
		open_detail(row, column, event) {
			this.detail_show = true;
			this.item = row;
			this.$nextTick(() => {
				this.situationChart = this.$echarts.init(document.getElementById('situationChart'));
				this.passengersChart = this.$echarts.init(document.getElementById('passengersChart'));
			});
			this.opneWebSocket(4);
			
			// this.getData(() => (this.echart_loading = false));
			// this.getDataV1(() => (this.personalData_loading = false));
		},
		getChartOption(xAxisData, rewardData, deductionData) {
			return {
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					containLabel: true,
					top: '4%',
					right: '4%',
					bottom: '5%',
					left: '7%'
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLine: { lineStyle: { color: '#eee' } },
					axisLabel: { color: '#333' },
					data: xAxisData
				},
				yAxis: {
					position: 'right',
					axisLine: { lineStyle: { color: '#eee' } },
					axisLabel: { color: '#333' },
					type: 'value',
					splitLine: { lineStyle: { color: '#eee' } }
				},
				series: [
					{
						name: '奖分',
						type: 'line',
						data: rewardData,
						lineStyle: { normal: { color: '#F56C6C' } }
					},
					{
						name: '扣分',
						type: 'line',
						data: deductionData,
						lineStyle: { normal: { color: '#53B87F' } }
					}
				]
			};
		},
		// v2
		getData(callBack) {
			this.echart_loading = true;
			const data = {
				employee_id: this.item.id || 0,
				month: this.formData.month
			};
			this.$axios('get', '/api/integral/statistics/prize', data)
				.then(res => {
					if (res.data.code === 1) {
						const item = res.data.data;
						this.employeeName = item.name;
						const deduct = item.chart.deduct;
						const situationRewardData = [];
						const situationDeductionData = [];
						const passengersRewardData = [];
						const passengersDeductionData = [];
						const xAxisData = item.chart.reward.map((o, i) => {
							// 降分分数
							situationDeductionData.push(item.chart.reward[i].point);
							// 扣分分数
							passengersDeductionData.push(item.chart.deduct[i].point);
							// 奖分次数
							situationRewardData.push(item.chart.reward[i].count);
							// 扣分次数
							passengersRewardData.push(item.chart.deduct[i].count);
							return o.date;
						});
						this.situationChart.setOption(this.getChartOption(xAxisData, situationDeductionData, passengersDeductionData)); //奖分数值、扣分数值
						this.passengersChart.setOption(this.getChartOption(xAxisData, situationRewardData, passengersRewardData)); //月奖扣人次
					}
				})
				.finally(() => {
					this.echart_loading = false;
				});
		},
		// v1
		getDataV1(callBack) {
			this.personalData_loading = true;
			const data = {
				employee_id: this.item.id || 0,
				month: this.formData.month
			};
			this.$axios('get', '/api/integral/statistics', data)
				.then(res => {
					if (res.data.code == 1) {
						this.personalData = res.data.data;
					} else {
						this.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.personalData_loading = false;
				});
		},
		
		
		dept_null(val) {
			if (val.length == 0) {
				this.formData.dept_id = 0;
			} else {
				this.formData.dept_id = this.dept_name_xq[this.dept_name_xq.length - 1];
			}
			this.$nextTick(() => {
				this.formData.page = 1;
				this.$refs.depts.dropDownVisible = false;
				this.get_list();
			});
		},
		//获取部门
		getDepartment() {
			this.$axios('get', '/api/department/tree').then(res => {
				this.dept_tree = this.getTreeData(res.data.data.list);
			});
		},
		// 递归判断列表，把最后的children设为undefined
		getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				data[i].obj = { id: data[i].id, name: data[i].name };
				if (data[i]._child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i]._child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i]._child);
				}
			}
			return data;
		}
	},
	created() {
		this.get_last();
	},
	mounted() {
		this.getDepartment();
		this.get_list();
	},
	beforeDestroy() {
		this.$socketApiTow.closewebsocket();
	}
};
</script>
<style scoped lang="scss">
.search_box {
	::v-deep button:active {
		background: #26a2ff;
	}
	::v-deep button:active .el-icon-search {
		color: #fff;
	}
}
.date-picker-width {
	width: 100% !important;
}
.nopoint_box {
	display: inline-block;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
}
.noimg {
	display: inline-block;
	width: 110px;
	height: 110px;
	margin: 22px auto 16px;
	background-size: 99%;
}
.noperson {
	display: inline-block;
	width: 110px;
	height: 110px;
	line-height: none;
	margin: 22px auto 16px;
	background: url('../../assets/image/nodata_default.png') no-repeat center;
	background-size: 99%;
}
.title {
	display: block;
	text-align: center;
	font-size: 12px !important;
	line-height: 30px;
	color: #909399 !important;
	padding: 0;
}
.nopoint_box a {
	color: #26a2ff;
}
.chart_content {
	height: 90vh;
	overflow-y: auto;
	overflow-x: hidden;
	.chart-legend__wrap {
		text-align: right;
		padding: 20px;
		padding-right: 50px;
		& .chart-legend__pink {
			position: relative;
			padding-left: 12px;
			padding-right: 5px;
			&:after {
				content: '';
				position: absolute;
				margin-top: -2px;
				top: 35%;
				left: 0;
				width: 8px;
				height: 8px;
				background: #f56c6c;
				border-radius: 100%;
			}
		}

		& .chart-legend__green {
			position: relative;
			padding-left: 12px;
			&:after {
				content: '';
				position: absolute;
				margin-top: -2px;
				top: 35%;
				left: 0;
				width: 8px;
				height: 8px;
				background: #53b87f;
				border-radius: 100%;
			}
		}
	}
}

// 滚动条样式
.chart_content::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px #fff;
	border-radius: 5px;
	background-color: #fff;
}
.chart_content::-webkit-scrollbar {
	width: 5px;
	background-color: rgba(201, 201, 201, 0);
}
.chart_content::-webkit-scrollbar-thumb {
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgb(153, 145, 145) (160, 154, 154);
	background-color: #a8a7a7;
}

.dataItem {
	text-align: center;
	.point {
		font-size: 22px;
		color: #26a2ff;
		margin: 10px 0;
	}
	.target {
		font-size: 12px;
		color: #909399;
	}
}
.drawer_title {
	font-size: 18px;
	padding: 20px;
}
.manager_statistics_box {
	background-color: #ffffff;
	padding: 20px;
	min-height: calc(100vh - 160px);
	::v-deep .el-row .el-checkbox .el-checkbox__label {
		line-height: 20px;
	}
}
.tips {
	background: #409eff;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	line-height: 14px;
	text-align: center;
}
.el-form-item__label {
	width: 0px !important;
}
b {
	font-size: 14px;
}
.span_h {
	font-size: 13px;
	color: #898c94;
}
</style>