<template>
	<div>
		<div class="diy_tip_bg" v-show="tips_show">
			<el-alert class="diy-tip" @close="tips_close" type="success" description>
				<p>排名不包含初始分和工龄分</p>
				<p>
					人员角色以系统角色为准：管理者即为系统现有的公司管理员、积分管理员、部门管理员三大角色（系统管理员不参与排名），员工即除以上管理角色以外的人员
				</p>
			</el-alert>
		</div>
		<div class="all padding-20">
			<FormBox>
				<div class="form-item">
					<div class="form-label">时间范围</div>
					<div class="form-search">
						<el-select size="medium" v-model="time_type" placeholder="请选择分类" style="width: 95px;margin-right: 5px;">
							<el-option v-for="item in time_types" :key="item.label" :label="item.label" :value="item.value"></el-option>
						</el-select>
						<el-date-picker
							size="medium"
							v-show="time_type == '1'"
							v-model="formData.month"
							class="date-picker-width"
							type="month"
							:clearable="false"
							value-format="yyyy-MM"
							placeholder="选择月份排名"
						></el-date-picker>
						<el-date-picker
							size="medium"
							v-show="time_type == '2'"
							v-model="formData.year"
							class="date-picker-width"
							type="year"
							:clearable="false"
							value-format="yyyy"
							placeholder="选择年份排名"
						></el-date-picker>
						<season v-if="time_type == '3'" style="display: inline-block" class="date-picker-width" @confirm="export_quarter_confirm"></season>
						<el-date-picker
							size="medium"
							v-show="time_type == '4'"
							class="date-picker-width"
							v-model="formData.time_range"
							type="daterange"
							value-format="yyyy-MM-dd"
							range-separator="至"
							:clearable="false"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="instantPickerOptions"
						></el-date-picker>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">所在部门</div>
					<div class="form-search">
							<el-cascader
								size="medium"
								v-model="dept_name"
								:options="dept_tree"
								:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
								ref="dept"
								clearable
								filterable
								placeholder="全公司"
							></el-cascader>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">规则分类</div>
					<div class="form-search">
						<el-cascader
						   size="medium"
							v-model="rule_id"
							:options="rule_trees"
							:props="props2"
							ref="rule_id"
							clearable
							placeholder="请选择规则分类"
						></el-cascader>
					</div>
				</div>
				
				<div class="form-item">
					<div class="form-label">积分类型</div>
					<div class="form-search">
						<el-select size="medium" v-model="formData.pt_id" placeholder="请选择积分类型">
							<el-option v-for="item in point_types" :key="item.name" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>
				</div>
				
				<div class="form-item">
					<div class="form-label">人员角色</div>
					<div class="form-search">
						<el-select size="medium" v-model="formData.position"  placeholder="请选择">
							<el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>
				</div>
				<div class="form-item">
					<div class="form-label">谁不参与排名</div>
					<div class="form-search">
						<el-select v-model="formData.exclusion" size="medium" clearable multiple filterable collapse-tags placeholder="请选择员工">
							<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</div>
				</div>
			</FormBox>
			<div style="padding: 10px 0;position: relative;z-index: 1;background-color: #fff;">
				<el-button type="primary" style="margin-right: 10px;" size="medium" plain @click="dialogVisible = true">导出排名</el-button>
				<el-checkbox v-model="sort" size="medium" label="排名由低到高" border></el-checkbox>
			</div>
			<el-table :data="list" style="width: 100%;cursor: pointer;" v-loading="loading" @row-click="open_detail">
				<el-table-column label="名次" width="80" align="center">
					<template slot-scope="scope">
						<img v-if="scope.row.rank === 1" src="@/assets/image/statistics_NO1.png" alt="" />
						<img v-if="scope.row.rank === 2" src="@/assets/image/statistics_NO2.png" alt="" />
						<img v-if="scope.row.rank === 3" src="@/assets/image/statistics_NO3.png" alt="" />
						<span v-if="scope.row.rank > 3">{{ scope.row.rank }}</span>
					</template>
				</el-table-column>
				<el-table-column label="姓名" align="left">
					<template slot-scope="scope">
						<div class="flex-box">
							<userImage :user_name="scope.row.employee_name" :img_url="scope.row.employee_img_url" width="50px" height="50px"></userImage>
							<span style="line-height: 50px; padding-left: 10px;">{{ scope.row.employee_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="labelName" align="left" prop="point"></el-table-column>
				<el-table-column>
					<template slot-scope="scope">
						<span  class="blue" style="cursor: pointer;">查看详情</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"
					@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>
		</div>
		
		<!-- 导出弹窗 -->
		<el-dialog title="导出排名" :visible.sync="dialogVisible" width="730px" top="3%">
			<div style="font-size:15px;margin-bottom:10px;font-weight: 600;">系统将按以下已选条件导出对应的排名报表</div>
			<el-form :inline="true" label-width="70px">
				<el-form-item label="时间范围">
					<el-date-picker
						v-model="Dc_Data.value1"
						type="daterange"
						size="medium"
						value-format="yyyy-MM-dd"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="instantPickerOptions"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="人员角色">
					<el-select size="medium" v-model="Dc_Data.DC_position" style="width:150px" placeholder="请选择">
						<el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所在部门">
					<el-cascader
						class="cascader_bm"
						v-model="Dc_Data.dept_name"
						:options="dept_tree"
						:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
						ref="dept2"
						size="medium"
						clearable
						filterable
						placeholder="全公司"
					></el-cascader>
				</el-form-item>
				<el-form-item label="规则分类">
					<el-cascader
						@change="ruleInquiredialog"
						v-model="rule_ids"
						:options="rule_trees"
						:props="props"
						size="medium"
						ref="derive"
						clearable
						collapse-tags
						placeholder="请选择规则分类"
					></el-cascader>
				</el-form-item>
				<el-form-item label="积分类型">
					<el-select style="width: 80px;" size="medium" v-model="Dc_Data.pt_id" placeholder="请选择积分分类">
						<el-option v-for="item in point_types" :key="item.name" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false" size="medium">取 消</el-button>
				<el-button type="primary" @click="exportExcel" size="medium">导 出</el-button>
			</span>
		</el-dialog>

		<!-- 轮播弹窗 -->
		<el-dialog title="轮播排名" :visible.sync="byRankingShow" width="500px" top="10%">
			<div>
				<el-form :inline="true" ref="byRankingData" :model="byRankingData" :rules="byRankingDataRules" label-width="90px">
					<el-form-item label="月份" prop="month">
						<el-date-picker
							v-model="byRankingData.month"
							size="medium"
							type="month"
							value-format="yyyy-MM"
							placeholder="选择月份排名"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="选择部门" prop="dept_id">
						<el-cascader
							size="medium"
							v-model="byRankingData.dept_id"
							:options="dept_tree"
							:props="{ checkStrictly: true, value: 'obj', label: 'name', children: '_child' }"
							ref="dept1"
							clearable
							filterable
							placeholder="全公司"
						></el-cascader>
					</el-form-item>
					<el-form-item label="人员范围" prop="position">
						<el-radio-group size="medium" v-model="byRankingData.position">
							<el-radio label="all">管理者和员工</el-radio>
							<el-radio label="manager">只看管理者</el-radio>
							<el-radio label="employee">只看员工</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer">
				<el-button @click="byRankingShow = false" size="medium">取 消</el-button>
				<el-button type="primary" @click="swiperPage('byRankingData')" size="medium">开始轮播</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import moment from 'moment';
import season from '@/components/season';
export default {
	name:'dept_rank',
	data() {
		return {
			rule_ids: null,
			Dc_Data: {
				//导出数据
				value1: '', //时间
				DC_position: 'all', //人员
				dept_name: [], //部门
				rule: [] ,//规则
				pt_id: 3,
			},
			dialogVisible: false,
			dept_name: [],
			dept_tree: [],
			loading: false,
			formData: {
				dept_id: '0',
				sort: 'DESC',
				pt_id: 3,
				time_type: 1,
				exclusion: [],
				page: 1,
				rule: '',
				page_size: 10,
				position: 'all' ,
				year:moment().format('YYYY'),
				month: moment().format('YYYY-MM'),
				quarter: '',
				time_range: []
			},
			total: null,
			rule_trees: null,
			rule_id: null,
			list: null,
			point_types: [],
			point_type: [],
			sort: false,
			time_types: [{ label: '月份', value: '1' }, { label: '季度', value: '3' }, { label: '年份', value: '2' }, { label: '自定义', value: '4' }],
			props: { value: 'id', label: 'name', children: 'child', multiple: true },
			props2: { value: 'id', label: 'name', children: 'child', checkStrictly: true},
			time_type: '1',
			employee_map: this.$getCache('SET_EMPLOYEE_MAP'),
			positions: [{ id: 'all', name: '全部' }, { id:'manager', name: '管理者' }, { id: 'employee',name: '员工' }],
			tips_show: false,
			byRankingShow: false,
			byRankingData: {
				month: '',
				dept_id: '',
				position: 'all'
			},
			byRankingDeptId: '',
			byRankingDataRules: {
				month: [{ required: true, message: '请选择月份', trigger: 'blur' }],
				dept_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
				position: [{ required: true, message: '请选择人员范围', trigger: 'change' }]
			},
			labelName: 'B分',
			instantPickerOptions: {
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							const now = new Date(new Date().toLocaleDateString());
							const start = now.getTime();
							picker.$emit('pick', [moment(start).format('YYYY-MM-DD'), moment(start).format('YYYY-MM-DD')]);
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							const now = new Date(new Date().toLocaleDateString());
							const start = now.getTime() - 60 * 60 * 24 * 1000;
							picker.$emit('pick', [moment(start).format('YYYY-MM-DD'),moment(start).format('YYYY-MM-DD')]);
						}
					},
					{
						text: '本周',
						onClick(picker) {
							picker.$emit('pick', [moment().startOf('isoWeek').format('YYYY-MM-DD'),moment().endOf('isoWeek').format('YYYY-MM-DD')]);
						}
					},
					{
						text: '上周',
						onClick(picker) {
							picker.$emit('pick', [moment().subtract(1, 'w').startOf('isoWeek').format('YYYY-MM-DD'),moment().subtract(1, 'w').endOf('isoWeek').format('YYYY-MM-DD')]);
						}
					},
					{
						text: '本月',
						onClick(picker) {
						const now = new Date();
							const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
							const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
							picker.$emit('pick', [moment(startDate.getTime()).format('YYYY-MM-DD'), moment(endDate.getTime()).format('YYYY-MM-DD')]);
						}
					},
					{
						text: '上月',
						onClick(picker) {
							const now = new Date();
							const startDate = new Date(now.getFullYear() - (now.getMonth() > 0 ? 0 : 1), (now.getMonth() + 11) % 12, 1);
							const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
							picker.$emit('pick', [moment(startDate.getTime()).format('YYYY-MM-DD'), moment(endDate.getTime()).format('YYYY-MM-DD')]);
						}
					},
          {
            text: '一季度',
            onClick(picker){
              let year = moment().year()
              let startDate = year + "-01-01"
              let endDate = year + "-03-31"
              picker.$emit('pick',[startDate,endDate])
            }
          },
          {
            text: '二季度',
            onClick(picker){
              let year = moment().year()
              let startDate = year + "-04-01"
              let endDate = year + "-06-30"
              picker.$emit('pick',[startDate,endDate])
            }
          },
          {
            text: '三季度',
            onClick(picker){
              let year = moment().year()
              let startDate = year + "-07-01"
              let endDate = year + "-09-30"
              picker.$emit('pick',[startDate,endDate])
            }
          },
          {
            text: '四季度',
            onClick(picker){
              let year = moment().year()
              let startDate = year + "-10-01"
              let endDate = year + "-12-31"
              picker.$emit('pick',[startDate,endDate])
            }
          },
          {
            text: '本年',
            onClick(picker){
              picker.$emit('pick',[moment().startOf('year').format('YYYY-MM-DD'),moment().endOf('year').format('YYYY-MM-DD')])
            }
          },
				],
                onPick: (obj) => {
					if(!this.dialogVisible){
                   	  	this.pickerMinDate = new Date(obj.minDate).getTime();
					}
                },
				// disabledDate : time => {
    //                 if (this.pickerMinDate && !this.dialogVisible) {
    //                     const day1 =  30 * 24 * 3600 * 1000//限制只能选一个月的范围区间
    //                     let maxTime = this.pickerMinDate + day1
    //                     let minTime = this.pickerMinDate - day1
    //                     return time.getTime() > maxTime || time.getTime()<minTime
    //                 }
				// }
			},
		};
	},
	watch: {
		time_type(val){
			if(val=='1'){
				this.selectBtn();
			}else if(val=='2'){
				this.selectBtn();
			}else if(val=='3'){
				// this.formData.quarter=moment().format('YYYY')+moment().format("Q");
			}else {
				this.formData.time_range=[moment().startOf('month').format('YYYY-MM-DD'),moment().endOf('month').format('YYYY-MM-DD')]
			}
		},
		'formData.time_range'(){
			this.selectBtn();
		},
		'formData.year'(val,val2){
			this.selectBtn();
		},
		'formData.month'(){
			this.selectBtn();
		},
		'formData.pt_id'(){
			this.selectBtn();
		},
		'formData.position'(){
			this.selectBtn();
		},
		'formData.exclusion'(){
			this.selectBtn();
		},
		sort(val) {
			if (val) {
				this.formData.sort = 'ASC';
			} else {
				this.formData.sort = 'DESC';
			}
			this.selectBtn();
		},
		dept_name(val) {
			if (val.length !== 0) {
				// 这是选部门多选。如果更改需求用这个：
				// let dept_id = [];
				// for (var i in val) {
				//   dept_id.push(val[i][0]);
				// }
				// this.formData.dept_id = dept_id;//传入选中的部门ID,是数组
				this.formData.exclusion=[];
				this.formData.dept_id = val[val.length - 1];
			} else {
				this.formData.dept_id = 0;
			}
			this.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
				this.getEmployeeList();
				this.selectBtn();
			});
		},
		'byRankingData.dept_id'(val) {
			this.$refs.dept1.dropDownVisible = false;
		},
		'Dc_Data.dept_name': function(val) {
			this.$refs.dept2.dropDownVisible = false;
		},
		rule_id(val) {
			if(val.length==0){
				this.formData.rule='';
				this.selectBtn();
				return false
			}
			if(val.length==1){
				this.formData.rule=(val).toString()
			}else{
				this.formData.rule=(val[val.length-1]).toString()
			}
			this.$refs.rule_id.dropDownVisible = false;
			this.selectBtn();
		}
	},
	components: { season },
	methods: {
		open_detail(item) {
			let parameter=JSON.parse(JSON.stringify(this.formData));
			parameter.time_type=this.time_type
			let data={
				userInfo:JSON.stringify(item),
				type:1,
			}
			let date='';
			switch (this.time_type) {
				case '1':
					if(parameter.month){
						let month=parameter.month.split("-");
						date={type:3,year:month[0],month:month[1]<10? month[1].slice(1):month[1]}
					}
					break;
				case '2':
					if(parameter.year){
						date={type:1,year:parameter.year}
					}
					break;
				case '月份':
					if(parameter.month){
						let month2=parameter.month.split("-");
						date={type:3,year:month2[0],month:month2[1]<10? month2[1].slice(1):month2[1]}
					}
					break;
				case '3':
					if(parameter.quarter){
						date={type:2,year:parameter.quarter.slice(0,4),season:parameter.quarter.slice(4)}
					}
					break;
				case '4':
					if(parameter.time_range&&parameter.time_range.length>0){
						date=true;
						parameter.start_date = this.$moment(parameter.time_range[0]).format('YYYY-MM-DD')
						parameter.end_date = this.$moment(parameter.time_range[1]).format('YYYY-MM-DD')
					}
					break;
				default:
					break;
			}
			if(!date){
					data.parameter=JSON.stringify(parameter);
					this.$router.push({path: '/JfDetail',query:data})
				return false
			}
			if(parameter.time_type==4){
				data.parameter=JSON.stringify(parameter);
				this.$router.push({path: '/JfDetail',query:data})
			}else{
				this.getDate((res)=>{
					parameter.start_date = this.$moment(Number(res.data.start+'000')).format('YYYY-MM-DD')
					parameter.end_date = this.$moment(Number(res.data.end+'000')).format('YYYY-MM-DD')
					data.parameter=JSON.stringify(parameter);
					this.$router.push({path: '/JfDetail',query:data})
				},date)
			}
		},
		getDate(func,date) {
			this.$axios('post', '/api/timestamp', date).then(res => {
					func(res.data)
			});
		},
		ruleInquiredialog() {
			this.ruleUtif('derive');
		},
		ruleUtif(rule) {
			let ruleList = this.$refs[rule].getCheckedNodes();
			let ruleId = [];
			ruleList.forEach(item => {
				ruleId.push(item.value);
			});
			if (rule == 'ruleinquire') {
				this.formData.rule = ruleId;
			} else {
				this.Dc_Data.rule = ruleId;
			}
			this.$nextTick(() => {
				if (this.$refs[rule].presentTags[1]) {
					this.$refs[rule].presentTags[1].text = '+ ' + (ruleId.length - 1).toString();
				} else {
					if (ruleId.length > 1) {
						let list = {
							closable: false,
							key: -1,
							text: '+ ' + (ruleId.length - 1).toString()
						};
						this.$refs[rule].presentTags[1] = list;
					}
				}
			});
		},
		// 轮播页面跳转
		swiperPage(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					var { href } = this.$router.resolve({
						path: '/deptRankSwiper',
						query: {
							month: this.byRankingData.month || 0,
							type: '2',
							position: this.byRankingData.position,
							dept_id: this.byRankingData.dept_id[0].id,
							dept_name: this.byRankingData.dept_id[0].name,
							pt_id: 3
						}
					});
					window.open(href);
				}
			});
		},
		// 轮播排名弹窗
		byRanking() {
			(this.byRankingData = {
				month: '',
				dept_id: '',
				position: 'all'
			}),
				(this.byRankingShow = true);
		},
		// 提示信息
		tips_close() {
			this.$setCache('dept_rank_tips', 'true');
			this.tips_show = false;
		},
		// 查询
		selectBtn() {
			this.formData.page = 1;
			this.formData.page_size = 10;
			this.$nextTick(() => {
				this.get_list();
			});
		},
		// 页面变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list();
		},
		handleSizeChange(val) {
			this.formData.page = 1;
			this.formData.page_size = val;
			this.get_list();
		},
		// 选择时间
		export_quarter_confirm(val) {
			this.formData.quarter = val;
			this.selectBtn();
		},
		//请求数据
		get_list() {
			let data={
				page: this.formData.page,
				page_size: this.formData.page_size,
				dept_id: this.formData.dept_id,
				sort:this.formData.sort,
				pt_id:this.formData.pt_id,
				time_type: this.formData.time_type,
				exclusion:  this.formData.exclusion.toString(),
				rule: this.formData.rule,
				position: this.formData.position,
			};
			if(this.time_type==1||this.time_type=='月份'){
				data.month=this.formData.month
			}else if(this.time_type==2){
				data.year=this.formData.year
			}else if(this.time_type==3){
				data.quarter=this.formData.quarter
			}else if(this.time_type==4){
				data.start_date= moment(this.formData.time_range[0]).format('YYYY-MM-DD')
				data.end_date=moment(this.formData.time_range[1]).format('YYYY-MM-DD')
			}
			this.loading = true;
			this.$axios('get', '/api/integral/statistics/ranking', data, 'v2').then(res => {
				this.labelName = this.formData.pt_id == 2 ? 'A分' : 'B分';
				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;
			});
		},
		// 获取积分规则
		get_rule_tree() {
			this.$axios('get', '/api/integral/rule/trees', { cycle_type: '1' }).then(res => {
				this.rule_trees = this.getRuleTreeData(res.data.data.rule_tree);
			});
		},
		// 规则递归 children
		getRuleTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i].child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i].child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getRuleTreeData(data[i].child);
				}
			}
			return data;
		},
		// 递归判断列表，把最后的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;
		},
		getEmployeeList() {
			let self = this;
			self.$axios('get', '/api/employee/list', { dept_id: self.formData.dept_id }).then(res => {
				if (res.data.code == 1) {
					this.employee_map = res.data.data.list;
				} else {
					self.$message.error(res.data.data.msg);
				}
			});
		},

		exportExcel() {
			//部门
			let dept_name;
			for (let i in this.Dc_Data.dept_name) {
				dept_name = this.Dc_Data.dept_name[i];
			}
			this.Dc_Data.dept_name = dept_name;
			let data = '';
			if (this.Dc_Data.value1) {
				data += '&start_date=' + this.Dc_Data.value1[0];
				data += '&end_date=' + this.Dc_Data.value1[1];
			}
			data += '&position=' + this.Dc_Data.DC_position;
			this.Dc_Data.dept_name > 0 ? (data += '&dept_id=' + this.Dc_Data.dept_name) : (data += '&dept_id=0');
			if (this.Dc_Data.rule.length > 0) {
				data += '&rule_id=' + this.Dc_Data.rule;
			}
			window.open(process.env.VUE_APP_BASE_API + 'api/download/ranking/v2?pt_id=' + this.Dc_Data.pt_id + '&employee_id=' + this.$getUserData().id + data, '_blank');
			this.dialogVisible = false;
		},
		//获取部门
		getDepartment() {
			this.$axios('get', '/api/department/tree').then(res => {
				this.dept_tree = this.getTreeData(res.data.data.list);
			});
		}
	},
	mounted() {
		this.point_types = this.$getTyps();
		this.tips_show = this.$getCache('dept_rank_tips') ? false : true;
		this.getDepartment();
		this.getEmployeeList();
		this.get_rule_tree();
		this.get_list();
	}
};
</script>
<style scoped lang="scss">
.date-picker-width{
	width: 188px;
}	
.search_box {
	::v-deep button:active {
		background: #26a2ff;
	}
	::v-deep button:active .el-icon-search {
		color: #fff;
	}
}
.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:url("/static/images/nodata_default.png") no-repeat center; */
	background-size: 99%;
}
.noperson {
	display: inline-block;
	width: 110px;
	height: 110px;
	line-height: none;
	margin: 22px auto 16px;
	background: url('/static/images/noperson_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 {
	.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%;
			}
		}
	}
}
.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;
	}
}
.diy_tip_bg {
	background: #f5f6f9;
	overflow: hidden;
	.diy-tip {
		margin-bottom: 15px;
		border: 1px solid #67c23a;
		padding: 20px 16px;
		p {
			color: #67c23a !important;
			font-size: 14px;
			margin: 0 !important;
			padding: 4px 0;
		}
	}
}
::v-deep .el-dialog {
	top: 21%;
}
.picker_er {
	margin-top: 20px;
}
.el-checkbox.is-bordered.el-checkbox--medium {
	padding: 9px 20px 7px 10px;
}
</style>
