dd_pc/src/views/ranking/department_statistics.vue

<template>
	<div>
		<el-row style="min-width:1160px;">
			<div class="flex-box-ce">
				<div>
					<el-cascader
						v-model="dept_name"
						:options="dept_tree"
						@change="dept1_null"
						:props="{
							checkStrictly: true,
							value: 'id',
							label: 'name',
							children: '_child'
						}"
						ref="dept1"
						filterable
						change-on-select
						placeholder="全公司"
						clearable
					></el-cascader>
				</div>
				<div style="margin:0 10px;">
					<el-select 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>
				</div>
				<div>
					<el-date-picker
						v-show="time_type == '2'"
						v-model="export_from.year"
						class="date-picker-width"
						type="year"
						value-format="yyyy"
						:clearable="false"
						:editable="false"
						placeholder="选择年份排名"
					></el-date-picker>
					<el-date-picker
						v-show="time_type == '1' || time_type == '月份'"
						v-model="export_from.month"
						class="date-picker-width"
						type="month"
						value-format="yyyy-MM"
						:clearable="false"
						:editable="false"
						placeholder="选择月份排名"
					></el-date-picker>
				</div>
			</div>

			<el-col :span="24" style="min-width:1160px;">
				<el-col :span="18" style="min-width:780px;">
					<el-row class="left-all-style" style="margin-top:10px;">
						<el-row style="position: relative;">
							<el-col :span="24">
								<b class="title" style="margin-bottom:15px;display:block">{{ yearhORmontStr }}积分构成</b>
							</el-col>
							<div v-loading="IntegralFormChartLoad">
								<div class="nopoint_box" style="height:306px;" v-show="IntegralFormnone">
									<div class="noimg" style="width: 150px;height: 160px;margin-top:80px;"></div>
									<span class="title1">
										暂无积分数据 ，
										<span @click="$router.push({ path: '/award_punish' })" style="color:#409EFF;cursor:pointer;">去奖扣积分></span>
									</span>
								</div>
								<div v-show="!IntegralFormnone"><div ref="IntegralFormChart" :style="{ width: '100%', height: '350px' }"></div></div>
							</div>
						</el-row>
					</el-row>

					<el-row class="left-all-style">
						<el-row style="position: relative;">
							<el-col :span="24" style="display:flex">
								<b class="title" style="margin:0 20px 15px 0;display:block">部门{{ yearhORmontStr }}积分情况</b>
								<el-checkbox v-model="exclusiveMonthChecked">不包含自动积分加分项</el-checkbox>
							</el-col>
							<div v-loading="monthlyIntegralloading">
								<!-- <el-col :span="5" style="position: absolute;top:40px;left:10px;z-index: 1;">
						<el-cascader
						v-model="dept_name2"
						:options="dept_tree"
						@change="monthlyIntegralchange"
						ref="dept2"
						filterable
						change-on-select
						placeholder="请选择部门"
						clearable
						></el-cascader>
					</el-col> -->

								<div class="nopoint_box" style="height:430px;" v-if="monthlyIntegralnone">
									<div class="noimg" style="width: 150px;height: 150px;margin-top:110px;"></div>
									<span class="title1">暂无积分数据</span>
								</div>

								<div v-show="!monthlyIntegralnone">
									<div ref="monthlyIntegralChart" :style="{ width: '100%', height: '400px' }"></div>
									<div style="width:90%;display:flex;justify-content: space-around;margin-top:30px;padding-left:40px">
										<p v-for="(item, index) in monthORyear == '2' ? monthlyIntegralList : yearlyIntegralList" :key="index" style="text-align:center">
											<b style="display:block;color:#303133;font-size:18px;" v-if="index < 3">
												{{ index == 0 ? item.total_point : index == 1 ? item.reward_point : index == 2 ? item.deduction_point : '' }}
											</b>
											<b style="display:block;color:#303133;font-size:18px;" v-else-if="index == 3">{{ item.ratio == -1 ? '—' : item.ratio + ':1' }}</b>
											<b style="display:block;color:#303133;font-size:18px;" v-else>
												{{ item.toRatio.ratio + '%' }}
												<svg-icon
													:icon-class="item.toRatio.type == 1 ? 'litrearrows' : item.toRatio.type == 2 ? 'droparrows' : ''"
													style="font-size:10px;margin-bottom:2px"
												/>
											</b>
											<span style="color:#303133;font-size:14px;margin-top:5px;display:block;">{{ item.name }}</span>
										</p>
									</div>
								</div>
							</div>
						</el-row>
					</el-row>
				</el-col>

				<el-col :span="6" style="min-width:280px;">
					<!-- <el-col :span="24">
			<el-row class="pointsevent_box">
			<div
				class="grid-content bg-purple"
				v-loading="highestPrizeBuckleloading"
				style="background:#fff;padding: 20px 20px 0;"
			>
				<span class="title">{{ yearhORmontStr }}奖分最高</span>

				<div class="nopoint_box" v-if="!prize.id">
				<div
					class="noimg"
					style="margin: 0px auto 0;width:80px;height:80px;"
				></div>
				<span class="title1" style="padding-bottom:20px;"
					>暂无积分数据</span
				>
				</div>

				<div v-else style="display:flex;padding:8px 0 20px 0;height:126px;">
				<userImage
					width="45px"
					height="45px"
					:id="prize.id"
					:user_name="prize.name"
					style="margin-right:8px"
				></userImage>
				<div class="rightexamineAndApproveList" style="border:0px">
					<p
					style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#73767c;font-size:16px;display:flex;"
					>
					<b style="color:#303133;font-size:16px;">{{ prize.name }}</b
					><span style="color:#26A2FF;font-size:16px;"
						><span v-if="prize.point > 0" style="padding-left:30px;"
						>+</span
						>{{ prize.point }} B分</span
					>
					</p>
					<p
					style="font-size:13px;line-height:20px;color:rgb(48, 49, 51);overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; "
					>
					{{ prize.remark ? prize.remark.customize : "" }}
					</p>
				</div>
				</div>
			</div>
			</el-row>
		</el-col> -->

					<!-- <el-col :span="24">
			<el-row class="pointsevent_box">
			<div
				class="grid-content bg-purple"
				v-loading="highestPrizeBuckleloading"
				style="background:#fff;padding: 20px 20px 0;"
			>
				<span class="title">{{ yearhORmontStr }}扣分最多</span>

				<div class="nopoint_box" v-if="!buckle.id">
				<div
					class="noimg"
					style="margin: 0px auto 0;width:80px;height:80px;"
				></div>
				<span class="title1" style="padding-bottom:20px;"
					>暂无积分数据</span
				>
				</div>

				<div v-else style="display:flex;padding:8px 0 20px 0;height:126px;">
				<userImage
					width="45px"
					height="45px"
					:id="buckle.id"
					:user_name="buckle.name"
					style="margin-right:8px"
				></userImage>
				<div class="rightexamineAndApproveList" style="border:0px">
					<p
					style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#73767c;font-size:16px;display:flex;"
					>
					<b style="color:#303133;font-size:16px;">{{ buckle.name }}</b
					><span style="color:#FF9600;font-size:16px;padding-left:30px;"
						>{{ buckle.point }} B分</span
					>
					</p>
					<p
					style="font-size:13px;line-height:20px;color:rgb(48, 49, 51);overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;"
					>
					{{ buckle.remark ? buckle.remark.customize : "" }}
					</p>
				</div>
				</div>
			</div>
			</el-row>
		</el-col> -->

					<el-row>
						<div class="right-all-style" v-loading="highestPrizeBuckleloading" style="background:#fff;padding: 20px 20px 0;margin-top:10px;">
							<span class="title">{{ yearhORmontStr }}奖分最高</span>

							<div class="nopoint_box" v-if="!prize.id">
								<div class="noimg"></div>
								<span class="title1" style="padding-bottom:20px;">暂无积分数据</span>
							</div>

							<div v-else style="display:flex;padding:20px 0 20px 0;">
								<userImage width="45px" height="45px" :user_name="prize.name" fontSize=".9" style="margin-right:8px"></userImage>
								<div class="rightexamineAndApproveList" style="border:0px">
									<p
										style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#73767c;font-size:16px;display:flex;justify-content: space-between;"
									>
										<b style="color:#303133;font-size:16px;margin:0px 0 0 5px;">{{ prize.name }}</b>
										<span style="color:#26A2FF;font-size:16px;">
											<span v-if="prize.point > 0">+</span>
											{{ prize.point }} B分
										</span>
									</p>
									<p
										style="margin:8px 0 0 5px;font-size:13px;line-height:20px;color:#303133;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3;"
									>
										{{ prize.remark ? prize.remark.customize : '' }}
									</p>
								</div>
							</div>
						</div>
					</el-row>

					<el-row>
						<div class="right-all-style" v-loading="highestPrizeBuckleloading" style="background:#fff;padding: 20px 20px 0;">
							<span class="title">{{ yearhORmontStr }}扣分最多</span>

							<div class="nopoint_box" v-if="!buckle.id">
								<div class="noimg"></div>
								<span class="title1" style="padding-bottom:10px;">暂无积分数据</span>
							</div>

							<div v-else style="display:flex;padding:20px 0 20px 0;">
								<userImage width="45px" height="45px" :user_name="buckle.name" fontSize=".9" style="margin-right:8px"></userImage>
								<div class="rightexamineAndApproveList">
									<p
										style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#73767c;font-size:16px;display:flex;justify-content: space-between;"
									>
										<b style="color:#303133;font-size:16px;margin:0px 0 0 5px;">{{ buckle.name }}</b>
										<span style="color:#FF9600;font-size:16px;">{{ buckle.point }} B分</span>
									</p>
									<p
										style="margin:8px 0 0 5px;font-size:13px;line-height:20px;color:#303133;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3;"
									>
										{{ buckle.remark ? buckle.remark.customize : '' }}
									</p>
								</div>
							</div>
						</div>
					</el-row>
				</el-col>
			</el-col>
		</el-row>
	</div>
</template>
<script>
export default {
	data() {
		return {
			//筛选项
			formData: {
				dept_id: 0
			},
			//时间
			time_type: '月份',
			time_types: [{ label: '月份', value: '1' }, { label: '年份', value: '2' }],
			export_from: {
				year: this.$moment().format('YYYY'),
				month: this.$moment().format('YYYY-MM')
			},
			yearhORmontStr: '月',
			monthORyear: '2',
			//部门
			dept_name: [],
			dept_tree: [],

			//饼图
			IntegralFormChartLoad: false, //积分构成loading
			IntegralFormnone: false, //积分构成为空或报错，展示的开关

			//奖扣分最高积分事件
			highestPrizeBuckleloading: false, //奖扣最高loading
			prize: {}, //奖分最高
			buckle: {}, //扣分最高

			//本月积分情况
			exclusiveMonthChecked: true, //不包含自动积分加分项
			monthlyIntegralList: [
				//年积分情况数据
				{ total_point: '0', name: '月总积分' },
				{ reward_point: '0', name: '月总奖分' },
				{ deduction_point: '0', name: '月总扣分' },
				{ ratio: '0', name: '奖扣分比例' },
				{ toRatio: { ratio: '0', type: 0 }, name: '对比上月总分' },
				{ toRatio: { ratio: '0', type: 0 }, name: '对比上月奖分' },
				{ toRatio: { ratio: '0', type: 0 }, name: '对比上月扣分' }
			],
			yearlyIntegralList: [
				//年积分情况数据
				{ total_point: '0', name: '年总积分' },
				{ reward_point: '0', name: '年总奖分' },
				{ deduction_point: '0', name: '年总扣分' },
				{ ratio: '0', name: '奖扣分比例' },
				{ toRatio: { ratio: '0', type: 0 }, name: '对比去年总分' },
				{ toRatio: { ratio: '0', type: 0 }, name: '对比去年奖分' },
				{ toRatio: { ratio: '0', type: 0 }, name: '对比去年扣分' }
			],
			monthlyIntegralloading: false, //本月积分情况loading
			monthlyIntegralnone: false, //本月积分情况为空或报错，展示的开关
			exclusiveMonthBranch: 0 //本月积分情况--部门
		};
	},
	watch: {
		time_type(val) {
			if (val == '1') {
				//月
				this.monthORyear = '2';
				this.formData.year = null;
				this.formData.month = this.$moment().format('YYYY-MM');
				this.export_from.month = this.$moment().format('YYYY-MM');
				this.yearhORmontStr = '月';
			} else if (val == '2') {
				//年
				this.monthORyear = '3';
				this.formData.month = null;
				this.formData.year = this.$moment().format('YYYY');
				this.export_from.year = this.$moment().format('YYYY');
				this.yearhORmontStr = '年';
			}
			this.executiveFunction();
		},
		'export_from.month'(val, old_val) {
			this.formData.month = val;
			this.executiveFunction();
		},
		'export_from.year'(val, old_val) {
			this.formData.year = val;
			this.executiveFunction();
		},
		'formData.dept_id'(val, old_val) {
			if (!val) {
				this.formData.dept_id = 0;
			}
			this.executiveFunction();
		},
		//不包含自动积分加分项
		exclusiveMonthChecked() {
			this.monthlyIntegral();
		}
	},
	mounted() {
		this.formData.month = this.$moment().format('YYYY-MM');
		this.executiveFunction();
		window.addEventListener('resize', this.selfAdaption);
		// 		if (localStorage.getItem('dept_tree')) {
		// 			this.dept_tree = this.getTreeData(JSON.parse(localStorage.getItem('dept_tree')))
		//   }else{
		// this.$store.dispatch('get_dept_tree').then((res) => {
		//   this.$nextTick(() => {
		//     this.dept_tree = 	this.getTreeData(JSON.parse(localStorage.getItem('dept_tree')))
		//   })
		// })
		//   }
	},
	methods: {
		//需要执行的所有函数
		executiveFunction() {
			this.integralForm(); //饼图
			this.highestPrizeBuckle(); //奖扣分最高积分事件
			this.monthlyIntegral(); //本月积分情况
			this.getDepartment(); //部门
		},

		//echarts自适应
		selfAdaption() {
			var myChart1 = this.$echarts.init(this.$refs.monthlyIntegralChart);
			var myChart2 = this.$echarts.init(this.$refs.IntegralFormChart);
			// myChart.setOption(option);
			myChart1.resize();
			myChart2.resize();
		},
		//饼图
		//分为两列展示，多传legendDataTwo
		// drawLine(legendDataOne, legendDataTwo, dadalist) {
		drawLine(legendDataOne, dadalist) {
			const chart = this.$refs.IntegralFormChart;
			//此处可给固定颜色，不给就所有颜色随机
			let colors = ['rgb(38, 162, 255)', '#f36f2a', '#fecb09', '#00b6bd', '#e85d53', '#fecb09', '#725197', '#fcb814', '#41a08d', '#425a95', '#ea8b84', '#9d1d62', '#fcb814'];
			// let colors = [];
			// let legendDataLeng = legendDataOne.length + legendDataTwo.length;
			let legendDataLeng = legendDataOne.length;
			if (legendDataLeng > colors.length) {
				//当列表大于固定颜色时，给随机颜色
				let colorsLeng = colors.length;
				for (let i = 0; i <= legendDataLeng - colorsLeng; i++) {
					// colors.push('#' + Math.random().toString(16).substr(2, 6).toUpperCase());//也是随机色
					colors.push('rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')');
				}
			}
			//只显示 N 条标题，多余隐藏，但是饼图不会隐藏
			let DataLengths = [];
			// for (let i in legendDataTwo) {
			//   if (i < 8) {
			//     DataLengths.push(legendDataTwo[i]);
			//   }
			// }
			let left1 = '45%';
			let left2 = '45%';
			let leftBT = '25%';
			// if (legendDataTwo.length != 0) {
			//   left1 = "36%";
			//   leftBT = "18%";
			// }
			if (chart) {
				const myChart = this.$echarts.init(chart);
				var legendData1 = legendDataOne;
				// var legendData2 = DataLengths;
				const option = {
					tooltip: { trigger: 'item', formatter: '{b}' },
					legend: [
						{
							type: 'scroll',
							orient: 'vertical',
							icon: 'square',
							left: left1,
							align: 'left',
							top: '10%',
							itemGap: 20,
							textStyle: { fontSize: 14, color: 'rgb(48, 49, 51)' },
							data: legendData1
						}
						//分为两列展示
						// {
						//   type: "scroll",
						//   orient: "vertical",
						//   icon: "square",
						//   left: "70%",
						//   align: "left",
						//   top: "10%",
						//   itemGap: 20,
						//   textStyle: { fontSize: 14, color: "rgb(48, 49, 51)" },
						//   data: legendData2,
						// },
					],
					color: colors,
					grid: { x: 25, y: 45, x2: 5, y2: 20, borderWidth: 1 },
					toolbox: {
						show: true,
						feature: {
							mark: { show: true },
							magicType: { show: true, type: ['pie', 'funnel'] }
						}
					},
					series: [
						{
							name: '',
							type: 'pie',
							radius: [20, 110],
							center: [leftBT, '40%'],
							roseType: 'radius',
							label: { show: false },
							emphasis: { label: { show: false } },
							data: dadalist
						}
					]
				};
				myChart.setOption(option);
			}
		},
		integralForm() {
			this.IntegralFormChartLoad = true;
			let listslength = [];
			let params = {};
			params.dept_id = this.formData.dept_id;
			if (this.monthORyear == '2') {
				//月
				params.month = this.formData.month;
			} else if (this.monthORyear == '3') {
				//年
				params.year = this.formData.year;
			}
			this.$axios('get', '/api/integral/statistics/pie/b', params, 'v2')
				.then(res => {
					let lists = res.data.data.list;
					listslength = lists;
					let legendData1 = [];
					let legendData2 = [];
					let dadalist = [];
					//分为两列展示
					// let listLeng = Math.ceil((lists.length)/2)

					for (let i in lists) {
						if (lists[i].name.length > 15) {
							lists[i].name = lists[i].name.slice(0, 15) + '...';
						}
						//分为两列展示
						// if(i<listLeng){
						//   legendData1.push(lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%')
						// }else{
						//   legendData2.push(lists[i].name+' '+'奖'+lists[i].reward+' '+'扣'+lists[i].deduction+' '+lists[i].ratio+'%')
						// }
						if (i < 8) {
							legendData1.push(lists[i].name + ' ' + '奖' + lists[i].reward + ' ' + '扣' + lists[i].deduction + ' ' + lists[i].ratio + '%');
						} else {
							legendData2.push(lists[i].name + ' ' + '奖' + lists[i].reward + ' ' + '扣' + lists[i].deduction + ' ' + lists[i].ratio + '%');
						}

						let dataListDx = {};
						if (lists[i].ratio < 0) {
							dataListDx.value = 0;
						} else {
							dataListDx.value = lists[i].ratio;
						}
						dataListDx.name = lists[i].name + ' ' + '奖' + lists[i].reward + ' ' + '扣' + lists[i].deduction + ' ' + lists[i].ratio + '%';
						// dataListDx.name = lists[i].name
						dadalist.push(dataListDx);
					}
					//分为两列展示，多传legendData2
					// this.drawLine(legendData1, legendData2, dadalist); //图表
					this.drawLine(legendData1, dadalist); //图表
				})
				.finally(() => {
					if (listslength.length == 0) {
						this.IntegralFormnone = true;
					} else {
						this.IntegralFormnone = false;
					}
					this.IntegralFormChartLoad = false;
				});
		},

		//奖扣分最高积分事件
		highestPrizeBuckle() {
			this.highestPrizeBuckleloading = true;
			let params = {
				page: '1',
				page_size: '1'
			};
			params.dept_ids = this.formData.dept_id;
			(params.time_type = this.monthORyear), (params.pt_id = '3');
			if (this.monthORyear == '2') {
				//月
				params.month = this.formData.month;
			} else if (this.monthORyear == '3') {
				params.year = this.formData.year;
			}
			this.$axios('get', '/api/integral/statistics/prize/buckle/ranking', params)
				.then(res => {
					if (res.data.code == 1) {
						if (res.data.data.prize.length != 0) {
							this.prize = res.data.data.prize[0];
						} else {
							this.prize = [];
						}
						if (res.data.data.buckle.length != 0) {
							this.buckle = res.data.data.buckle[0];
						} else {
							this.buckle = [];
						}
					}
				})
				.finally(() => {
					this.highestPrizeBuckleloading = false;
				});
		},

		//月度积分
		monthlyIntegralRanking(date, total, reward, deduction) {
			const chart = this.$refs.monthlyIntegralChart;
			if (chart) {
				const myChart = this.$echarts.init(chart);
				const option = {
					tooltip: {
						trigger: 'axis'
					},
					color: ['#F56C6C', '#26A2FF', '#FFC100'],
					legend: {
						right: '0%',
						data: ['总积分', '奖分', '扣分']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: date
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						}
					},
					series: [
						{
							name: '总积分',
							type: 'line',
							data: total
						},
						{
							name: '奖分',
							type: 'line',
							data: reward
						},
						{
							name: '扣分',
							type: 'line',
							data: deduction
						}
					]
				};
				myChart.setOption(option);
			}
		},
		monthlyIntegral() {
			this.monthlyIntegralloading = true;
			let params = {};
			let listslength = [];
			params.dept_id = this.formData.dept_id;
			if (this.monthORyear == '2') {
				//月
				params.month = this.formData.month;
			} else if (this.monthORyear == '3') {
				//年
				params.year = this.formData.year;
			}
			if (this.exclusiveMonthChecked) {
				params.include_fixed = 1;
			} else {
				params.include_fixed = 0;
			}
			this.$axios('get', '/api/integral/statistics/curve', params)
				.then(res => {
					if (res.data.code == 1) {
						let lists = res.data.data;
						listslength = lists;
						if (this.monthORyear == '2') {
							this.monthlyIntegralList[0].total_point = lists.total_point;
							this.monthlyIntegralList[1].reward_point = lists.reward_point;
							this.monthlyIntegralList[2].deduction_point = lists.deduction_point;
							this.monthlyIntegralList[3].ratio = lists.ratio;
							this.monthlyIntegralList[4].toRatio = lists.contrast_total;
							this.monthlyIntegralList[5].toRatio = lists.contrast_reward;
							this.monthlyIntegralList[6].toRatio = lists.contrast_deduction;
						} else if (this.monthORyear == '3') {
							this.yearlyIntegralList[0].total_point = lists.total_point;
							this.yearlyIntegralList[1].reward_point = lists.reward_point;
							this.yearlyIntegralList[2].deduction_point = lists.deduction_point;
							this.yearlyIntegralList[3].ratio = lists.ratio;
							this.yearlyIntegralList[4].toRatio = lists.contrast_total;
							this.yearlyIntegralList[5].toRatio = lists.contrast_reward;
							this.yearlyIntegralList[6].toRatio = lists.contrast_deduction;
						}
						let dates = []; //日期
						let totals = []; //总积分
						let rewards = []; //奖分
						let deductions = []; //扣分
						for (let i in lists.total) {
							dates.push(lists.total[i].date);
							totals.push(lists.total[i].point);
						}
						for (let i in lists.reward) {
							rewards.push(lists.reward[i].point);
						}
						for (let i in lists.deduction) {
							deductions.push(lists.deduction[i].point);
						}
						this.monthlyIntegralRanking(dates, totals, rewards, deductions);
					}
				})
				.finally(() => {
					if (listslength.total.length == 0) {
						this.monthlyIntegralnone = true;
					} else {
						this.monthlyIntegralnone = false;
					}
					this.monthlyIntegralloading = false;
				});
		},

		//筛选部门数据
		dept1_null(val) {
			if (val.length == 0) {
				this.formData.dept_id = 0;
			} else {
				this.formData.dept_id = this.dept_name[this.dept_name.length - 1];
			}
			this.$nextTick(() => {
				this.$refs.dept1.dropDownVisible = false;
			});
		},
		// 		// 递归判断列表，把最后的children设为undefined
		// 		getTreeData(data){
		// 			for(var i=0;i<data.length;i++){
		// 				if(data[i].children.length<1){
		// 					// children若为空数组，则将children设为undefined
		// 					data[i].children=undefined;
		// 				}else {
		// 					// children若不为空数组，则继续 递归调用 本方法
		// 					this.getTreeData(data[i].children);
		// 				}
		// 			}
		// 			return data;
		// 		},

		//获取部门
		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++) {
				if (data[i]._child.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i]._child = undefined;
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i]._child);
				}
			}
			return data;
		}
	},
	beforeDestroy() {
		//离开路由
		window.removeEventListener('resize', this.selfAdaption); //取消echarts自适应
	}
};
</script>
<style scoped="scoped" lang="scss">
.refresh {
	margin-top: 100px;
	width: 100px;
}
.noData {
	text-align: center;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.data-all {
	margin-bottom: 10%;
	color: #595959;
}
.left-all-style {
	margin-top: 10px;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	.title {
		padding-left: 10px;
		font-size: 16px;
		font-weight: normal;
		border-left: 2px solid #409eff;
	}
	.titledes {
		display: block;
		padding-top: 10px;
		font-size: 14px;
		color: #909399;
	}
	.noremind {
		display: block;
		text-align: right;
		font-size: 12px;
		color: #909399;
		cursor: pointer;
	}
	.noremind:hover {
		color: #409eff;
	}
	.noremind:active {
		color: #409eff;
	}
}

.right-all-style {
	background: #fff;
	border-radius: 5px;
	margin: 0 0 10px 10px;
	.title {
		padding-left: 10px;
		font-size: 16px;
		font-weight: normal;
		border-left: 2px solid #409eff;
	}
}
.rightexamineAndApproveList {
	text-align: left;
	width: 100%;
	/* border-bottom: 1px solid #efefef; */
}

.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('../../assets/image/nodata_default.png') no-repeat center;
		background-size: 99%;
	}
	.noperson {
		display: inline-block;
		width: 110px;
		height: 110px;
		margin: 22px auto 16px;
		background: url('../../assets/image/noperson_default.png') no-repeat center;
		background-size: 99%;
	}
	.title1 {
		display: block;
		text-align: center;
		font-size: 12px !important;
		color: #909399 !important;
		padding: 0;
	}
	a {
		color: #26a2ff;
	}
}
</style>