dd_pc/src/views/ranking/dept_rank.vue

<template>
	<div>
		<div class="diy_tip_bg" v-show="tips_show">
			<el-alert class="diy-tip" @close="tips_close" type="success" description><p>排名不包含初始分和工龄分</p></el-alert>
		</div>
		<div class="all padding-20">
			<el-form :inline="true">
				<el-form-item label="时间">
					<el-select size="medium" v-model="time_type" placeholder="请选择分类" style="width: 100px;">
						<el-option v-for="item in time_types" :key="item.label" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker
						size="medium"
						v-show="time_type == '2'"
						v-model="export_from.year"
						class="date-picker-width"
						type="year"
						value-format="yyyy"
						placeholder="选择年份排名"
					></el-date-picker>
					<el-date-picker
						size="medium"
						v-show="time_type == '1' || time_type == '月份'"
						v-model="export_from.month"
						class="date-picker-width"
						type="month"
						value-format="yyyy-MM"
						placeholder="选择月份排名"
					></el-date-picker>
					<season v-if="time_type == '3'" :isActive="true" 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="export_from.time_range"
						type="daterange"
						value-format="timestamp"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="instantPickerOptions"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="部门">
					<el-cascader
						size="medium"
						class="date-picker-width"
						v-model="dept_name"
						:options="dept_tree"
						:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
						ref="dept"
						clearable
						filterable
						placeholder="全公司"
					></el-cascader>
					<!-- 这是选部门多选。如果更改需求用这个： -->
					<!-- <el-cascader
						v-model="dept_name"
						:options="dept_tree"
						:props="{ multiple: true, checkStrictly: true }"
						class="date-picker-width"
						ref="dept"
						clearable
						collapse-tags
						placeholder="全公司"
					  ></el-cascader>-->
				</el-form-item>
				<el-form-item label="谁不参与排名">
					<el-select v-model="formData.exclusion" size="medium" 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>
				</el-form-item>
				<el-form-item label="规则分类">
					<el-cascader
					   size="medium"
						class="date-picker-width"
						v-model="rule_id"
						:options="rule_trees"
						:props="props2"
						ref="rule_id"
						clearable
						placeholder="请选择规则分类"
					></el-cascader>
				</el-form-item>
				<el-form-item label="积分分类">
					<el-select class="date-picker-width" 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>
				</el-form-item>
				<el-form-item label="人员">
					<el-select size="medium" v-model="formData.position" style="width:150px" placeholder="请选择">
						<el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.age"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-checkbox v-model="sort" size="medium" label="排名由低到高" border></el-checkbox>
					<el-button type="primary" size="medium" @click="selectBtn" style="margin-left:20px">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" plain @click="dialogVisible = true">导出排名</el-button>
					<!-- <el-button type="primary"  size="medium" plain @click="byRanking('byRankingData')">轮播排名</el-button> -->
				</el-form-item>
			</el-form>
			<el-table :data="list" style="width: 100%" v-loading="loading">
				<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 :label="labelName" align="left" prop="point"></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"
					: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="10%">
			<span style="font-size:15px">系统将按以下已选条件导出对应的排名报表</span>
			<el-form :inline="true">
				<div class="picker_er">
					<el-form-item label="时间">
						<el-date-picker
							v-model="Dc_Data.value1"
							type="daterange"
							size="medium"
							value-format="timestamp"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							:picker-options="instantPickerOptions"
						></el-date-picker>
					</el-form-item>

					<el-form-item label="人员" style="margin-left:30px">
						<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.age"></el-option>
						</el-select>
					</el-form-item>
				</div>
				<el-form-item label="部门">
					<el-cascader
						class="date-picker-width 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-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-item label="规则分类" style="margin-left:20px">
					<el-cascader
						class="date-picker-width"
						@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>
			<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"
							class="date-picker-width"
							type="month"
							value-format="yyyy-MM"
							placeholder="选择月份排名"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="选择部门" prop="dept_id">
						<el-cascader
							size="medium"
							class="date-picker-width"
							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 {
	data() {
		return {
			rule_ids: null,
			Dc_Data: {
				//导出数据
				value1: '', //时间
				DC_position: '全部', //人员
				dept_name: [], //部门
				rule_id: [] ,//规则
				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_id: '',
				page_size: 10,
				position: 0 //部门多选删除这个
			},
			total: null,
			rule_trees: null,
			rule_id: null,
			list: null,
			point_types: [],
			point_type: [],
			sort: false,
			time_types: [{ label: '月份', value: '1' }, { label: '年份', value: '2' }, { label: '季度', value: '3' }, { label: '自定义', value: '4' }],
			props: { value: 'id', label: 'name', children: 'child', multiple: true },
			props2: { value: 'id', label: 'name', children: 'child', checkStrictly: true},
			time_type: '月份',
			export_from: {
				year: '',
				month: moment().format('YYYY-MM'),
				quarter: '',
				// time_range: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime()]
				time_range: []
			},
			employee_map: JSON.parse(localStorage.getItem('SET_EMPLOYEE_MAP')),
			positions: [{ id: 0, age: 'all', name: '全部' }, { id: 1, age: 'manager', name: '管理者' }, { id: 2, age: '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', [start, start]);
						}
					},
					{
						text: '昨天',
						onClick(picker) {
						const now = new Date(new Date().toLocaleDateString());
						const start = now.getTime() - 60 * 60 * 24 * 1000;
						picker.$emit('pick', [start, start]);
						}
					},
					{
						text: '本周',
						onClick(picker) {
						const now = new Date(new Date().toLocaleDateString());
						const start = now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000;
						const end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
						picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '上周',
						onClick(picker) {
						const now = new Date(new Date().toLocaleDateString());
						const start = now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000;
						const end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
						picker.$emit('pick', [start, end]);
						}
					},
					{
						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', [startDate.getTime(), endDate.getTime()]);
						}
					},
					{
						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', [startDate.getTime(), endDate.getTime()]);
						}
					}
				],
                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
                    }
				}
			},
			pickerDisabledDate: {
			},
		};
	},
	watch: {
		sort(val) {
			if (val) {
				this.formData.sort = 'ASC';
			} else {
				this.formData.sort = 'DESC';
			}
		},
		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.dept_id = val[val.length - 1];
			} else {
				this.formData.dept_id = 0;
			}
			this.$nextTick(() => {
				this.$refs.dept.dropDownVisible = false;
				this.getEmployeeList();
			});
		},
		'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_id='';
				return false
			}
			if(val.length==1){
				this.formData.rule_id=(val).toString()
			}else{
				this.formData.rule_id=(val[val.length-1]).toString()
			}
			this.$refs.rule_id.dropDownVisible = false;
		}
	},
	components: { season },
	methods: {
		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_id = ruleId;
			} else {
				this.Dc_Data.rule_id = 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() {
			localStorage.setItem('dept_rank_tips', 'true');
			this.tips_show = false;
		},
		// 查询
		selectBtn() {
			switch (this.time_type) {
				case '1':
					this.$set(this.formData, 'month', this.export_from.month);
					this.formData.month ? '' : delete this.formData.month;
					break;
				case '2':
					this.$set(this.formData, 'year', this.export_from.year);
					this.formData.year ? '' : delete this.formData.year;
					break;
				case '月份':
					this.$set(this.formData, 'month', this.export_from.month);
					this.formData.month ? '' : delete this.formData.month;
					break;
				case '3':
					this.$set(this.formData, 'quarter', this.export_from.quarter);
					this.formData.quarter ? '' : delete this.formData.quarter;
					break;
				case '4':
					this.$set(this.formData, 'time_range', this.export_from.time_range);
					this.formData.time_range ? '' : delete this.formData.time_range;
					break;
				default:
					break;
			}

			let data = JSON.parse(JSON.stringify(this.formData));
			var employee_ids = data.exclusion.join(',');
			data.exclusion = employee_ids;
			data.page = 1;
			data.page_size = 10;
			this.$nextTick(() => {
				this.get_list(data);
			});
		},
		// 页面变更
		handleCurrentChange(val) {
			this.formData.page = val;
			this.get_list(this.formData);
		},
		handleSizeChange(val) {
			this.formData.page = 1;
			this.formData.page_size = val;
			this.get_list(this.formData);
		},
		// 选择时间
		export_quarter_confirm(val) {
			this.export_from.quarter = val;
		},
		//请求数据
		get_list(data, bool) {
			if (this.time_type == 1) {
				delete data.year;
				delete data.quarter;
				delete data.time_range;
			} else if (this.time_type == 2) {
				delete data.month;
				delete data.quarter;
				delete data.time_range;
			} else if (this.time_type == '月份') {
				delete data.year;
				delete data.quarter;
				delete data.time_range;
			} else if (this.time_type == 3) {
				delete data.month;
				delete data.year;
				delete data.time_range;
			} else if (this.time_type == 4) {
				delete data.month;
				delete data.year;
				delete data.quarter;
				if(data.time_range && data.time_range.length > 0){
					data.start_date = moment(data.time_range[0]).format('YYYY-MM-DD')
					data.end_date = moment(data.time_range[1]).format('YYYY-MM-DD')
				}
				delete data.time_range
			}
			if (bool) {
				data.month = moment().format('YYYY-MM');
			}
			let self = this;
			self.loading = true;
			data ? '' : (data = this.formData);

			data.position = data.position == 'manager' ? 'manager' : data.position == 'employee' ? 'employee' : 'all';
			self.$axios('get', '/api/integral/statistics/ranking', data, 'v2')
				.then(res => {
					this.labelName = this.formData.pt_id == 2 ? 'A分' : 'B分';
					if (res.data.code == 1) {
						self.list = res.data.data.list;
						self.total = res.data.data.total;
					} else {
						self.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					self.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() {
			//人员
			this.Dc_Data.DC_position =
				this.Dc_Data.DC_position == 'manager' ? 'manager' : this.Dc_Data.DC_position == 'employee' ? 'employee' : this.Dc_Data.DC_position == '全部' ? 'all' : 'all';
			//部门
			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 rule_id = [];
			// for (let i in this.Dc_Data.rule_id) {
			// 	for (let a in this.Dc_Data.rule_id[i]) {
			// 		rule_id.push(this.Dc_Data.rule_id[i][a]);
			// 	}
			// }
			// this.Dc_Data.rule_id = rule_id;
			let data = '';
			if (this.Dc_Data.value1) {
				data += '&start_date=' + moment(this.Dc_Data.value1[0]).format('YYYY-MM-DD');
				data += '&end_date=' + moment(this.Dc_Data.value1[1]).format('YYYY-MM-DD');
			}
			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_id.length > 0) {
				data += '&rule_id=' + this.Dc_Data.rule_id;
			}
			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 = JSON.parse(localStorage.getItem('dept_rank_tips')) ? false : true;
		this.getDepartment();
		this.getEmployeeList();
		this.get_list(this.formData, true);
		this.get_rule_tree();
	}
};
</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: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-range-editor--medium.el-input__inner {
	width: 280px;
}
::v-deep .el-cascader .el-input .el-input__inner {
	width: 150px;
}
.el-checkbox.is-bordered.el-checkbox--medium {
	padding: 9px 20px 7px 10px;
}
</style>