dd_pc/src/views/ranking/individual_statistics.vue

<template>
	<div>
		<el-row style="min-width:1160px;">
			<el-row :span="24" style="display:flex;min-width:650px;">
				<el-col style="width:200px;">
					<el-select v-model="select_employee_id" filterable placeholder="请输入或选择人员">
						<el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-col>
				<el-col style="width:105px;margin-left:20px;">
					<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>
				</el-col>

				<el-col style="width:200px;">
					<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>
				</el-col>
				<!-- <el-col style="margin-left:20px;" :span="5">
			<el-date-picker
			v-model="formData.month"
			type="month"
			placeholder="请选择月份"
			value-format="yyyy-MM"
			></el-date-picker>
		</el-col> -->
			</el-row>

			<el-col :span="24" style="min-width:1160px;margin-top:10px;">
				<el-col :span="18" style="min-width:780px;">
					<el-row :span="24" class="top_user_info" style="margin:0 0 0 0;padding:0;">
						<el-col :span="7" class="userinfo_box">
							<el-row :gutter="40" style="margin:0;padding:0;">
								<el-col :span="24" class="user_info" style="display:flex;" v-loading="personnelMessage">
									<div class="headimg fl" style=" margin: 0 10px 0 20%;">
										<userImage :id="personnel.id" :img_url="personnel.img_url" :user_name="personnel.name" fontSize="1" width="50px" height="50px"></userImage>
									</div>
									<div style="width:100%;">
										<div
											style="max-width: 80%;display: inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;vertical-align: top;margin-left:10%;"
										>
											<b style="font-size:16px;">{{ personnel.name }}</b>
										</div>
										<div
											style="max-width: 80%;display:flex;flex-wrap:wrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;margin-left:10%;"
										>
											<el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
												<div style="font-size:14px;color:#828282;">{{ dept_list }}</div>
												<div slot="reference" class="name-wrapper">
													<span style="font-size:14px;color:#828282;">{{ dept_list }}</span>
												</div>
											</el-popover>
										</div>
									</div>
								</el-col>
							</el-row>
						</el-col>
						<!-- <div>
              <el-col
                :span="8"
                style="margin-top:34px;padding:0;border-right: 1px #cecccc solid;height:58px;"
                v-loading="authorityManagerHeaderLoad"
              >
                <el-col
                  :gutter="50"
                  style="margin:0;padding:0;"
                  class="quick_button_box"
                >
                  <div style="display:flex;justify-content: space-around;">
                    <p style="text-align:center;cursor:pointer;margin: 0;"><b style="color:#26A2FF;font-size:27px;">{{authorityManagerHeaders.b? authorityManagerHeaders.b: "0"}}</b><br /><span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">{{ yearhORmontStr }}度B分</span></p>
                    <p style="text-align:center;cursor:pointer;margin: 0;"><b style="color:#26A2FF;font-size:27px;">{{ authorityManagerHeaders.a? authorityManagerHeaders.a: "0"}}</b><br /><span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">{{ yearhORmontStr }}度A分</span></p>
                  </div>
                </el-col>
              </el-col>
              <el-col :span="8" style="margin:0;padding:0;">
                <el-col
                  :gutter="50"
                  style="margin:0;padding:34px 0 0 0;"
                  class="quick_button_box"
                >
                  <div
                    style="display:flex;justify-content: space-around;"
                    v-loading="authorityManagerHeaderLoad"
                  >
                    <p style="text-align:center;cursor:pointer;margin: 0;">
                      <b style="color:#26A2FF;font-size:27px;">{{
                        authorityManagerHeaders.performance
                          ? authorityManagerHeaders.performance.review_point
                          : "0"
                      }}</b
                      ><br /><span
                        style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;"
                        >绩效分</span
                      >
                    </p>
                    <p style="text-align:center;cursor:pointer;margin: 0;"><b style="color:#26A2FF;font-size:27px;">{{authorityManagerHeaders.performance? authorityManagerHeaders.performance.total_count + "/" +authorityManagerHeaders.performance.complete_count: "0/0"}}</b><br /><span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">任务进度</span></p>
                  </div>
                </el-col>
              </el-col>
            </div> -->

						<el-col :span="17" style="margin-top:34px;padding:0 0 10px 0;height:58px;" v-loading="authorityManagerHeaderLoad">
							<el-col :gutter="50" style="margin:0;padding:0;" class="quick_button_box">
								<div style="display:flex;justify-content: space-around;">
									<p style="text-align:center;cursor:pointer;margin: 0;">
										<b style="color:#26A2FF;font-size:27px;">{{ authorityManagerHeaders.b ? authorityManagerHeaders.b : '0' }}</b>
										<br />
										<span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">{{ yearhORmontStr }}度B分</span>
									</p>
									<p style="text-align:center;cursor:pointer;margin: 0;">
										<b style="color:#26A2FF;font-size:27px;">{{ authorityManagerHeaders.a ? authorityManagerHeaders.a : '0' }}</b>
										<br />
										<span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">{{ yearhORmontStr }}度A分</span>
									</p>
									<!-- <p style="text-align:center;cursor:pointer;margin: 0;"><b style="color:#26A2FF;font-size:27px;">{{authorityManagerHeaders.performance?authorityManagerHeaders.performance.review_point:'0'}}</b><br><span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">绩效分</span></p> -->
									<p style="text-align:center;cursor:pointer;margin: 0;">
										<b style="color:#26A2FF;font-size:27px;">
											{{
												authorityManagerHeaders.performance
													? authorityManagerHeaders.performance.total_count + '/' + authorityManagerHeaders.performance.complete_count
													: '0/0'
											}}
										</b>
										<br />
										<span style="color:#606266;font-size:14px;padding-top:8px;display: inline-block;">任务进度</span>
									</p>
								</div>
							</el-col>
						</el-col>
					</el-row>

					<el-col :span="24">
						<el-row class="left-all-style">
							<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:307px;" v-show="IntegralFormnone">
										<div class="noimg" style="width: 150px;height: 150px;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-col>

					<el-col :span="24" style="">
						<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">
									<div class="nopoint_box" style="height:450px;" 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:rgb(48, 49, 51);font-size:14px;margin-top:5px;display:block;">{{ item.name }}</span>
											</p>
										</div>
									</div>
								</div>
							</el-row>
						</el-row>
					</el-col>
				</el-col>

				<el-col :span="6" style="min-width:280px;">
					<el-col>
						<el-row class="right-all-style" v-loading="awardDeductRanking">
							<el-row style="">
								<el-col :span="24" style="display:flex">
									<b class="title" style="margin:0 20px 15px 0;display:block">{{ yearhORmontStr }}奖分最多</b>
								</el-col>
								<el-col :span="24" style="margin-bottom:10px;">
									<el-col style="">
										<div class="nopoint_box" v-if="IntegralEventO.length == 0">
											<div class="noimg" style="margin: 48px auto 16px;"></div>
											<span class="title1" style="padding-bottom:20px;">暂无积分数据</span>
										</div>

										<el-table :data="IntegralEventO" fit :show-header="false" style="border:0px solid #fff;" v-else>
											<el-table-column prop="remark_data" label="规则">
												<template slot-scope="scope">
													<div
														style="padding-left:10px;display:flex;flex-wrap:wrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"
													>
														<el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
															<div style="font-size:14px;color:#828282;">{{ scope.row.remark.customize || scope.row.remark.rule }}</div>
															<div slot="reference" class="name-wrapper">
																<span style="font-size:14px;color:#828282;">{{ scope.row.remark.customize || scope.row.remark.rule }}</span>
															</div>
														</el-popover>
													</div>
													<!-- <span>{{scope.row.remark.customize || scope.row.remark.rule}}</span> -->
												</template>
											</el-table-column>
											<!-- <el-table-column align="center" prop="create_time" label="创建时间" width="140"></el-table-column> -->
											<el-table-column align="center" prop="point" label="积分" width="110">
												<template slot-scope="scope">
													<span>{{ scope.row.point > 0 ? '+' : '' }}{{ scope.row.point }} <span class="blue">{{getType(scope.row.pt_id)}}</span></span>
												</template>
											</el-table-column>
										</el-table>
									</el-col>
								</el-col>
							</el-row>
						</el-row>
					</el-col>

					<el-col>
						<el-row class="right-all-style" v-loading="awardDeductRanking">
							<el-row style="">
								<el-col :span="24" style="display:flex">
									<b class="title" style="margin:0 20px 15px 0;display:block">{{ yearhORmontStr }}扣分最多</b>
								</el-col>
								<el-col :span="24" style="margin-bottom:10px;">
									<el-col style="">
										<div class="nopoint_box" v-if="IntegralEventT.length == 0">
											<div class="noimg" style="margin: 48px auto 16px;"></div>
											<span class="title1" style="padding-bottom:20px;">暂无积分数据</span>
										</div>
										<el-table :data="IntegralEventT" fit :show-header="false" v-else>
											<el-table-column prop="remark_data" label="规则">
												<template slot-scope="scope">
													<div
														style="padding-left:10px;display:flex;flex-wrap:wrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"
													>
														<el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
															<div style="font-size:14px;color:#828282;">{{ scope.row.remark.customize || scope.row.remark.rule }}</div>
															<div slot="reference" class="name-wrapper">
																<span style="font-size:14px;color:#828282;">{{ scope.row.remark.customize || scope.row.remark.rule }}</span>
															</div>
														</el-popover>
													</div>
													<!-- <span>{{scope.row.remark.customize || scope.row.remark.rule}}</span> -->
												</template>
											</el-table-column>
											<!-- <el-table-column align="center" prop="create_time" label="创建时间" width="140"></el-table-column> -->
											<el-table-column align="center" prop="point_mark" label="积分" width="110">
												<template slot-scope="scope">
													<span>{{ scope.row.point > 0 ? '+' : '' }}{{ scope.row.point }} <span class="blue">{{getType(scope.row.pt_id)}}</span></span>
												</template>
											</el-table-column>
											<!-- <el-table-column align="center" prop="remark_data.rule" show-overflow-tooltip label="规则" width="180"></el-table-column> -->

											<!-- <el-table-column align="center" label="规则" prop="remark_data.rule"  width="180">
									<template slot-scope="scope">
									<el-popover trigger="hover" placement="top" popper-class="popperSPBOX">
										<span>{{scope.row.remark_data.rule || scope.row.remark_data.customize}}</span>
										<div slot="reference" class="name-wrapper"  style="width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"><span>{{scope.row.remark_data.rule || scope.row.remark_data.customize}}</span></div>
									</el-popover>
									</template>
								</el-table-column> -->
										</el-table>
									</el-col>
								</el-col>
							</el-row>
						</el-row>
					</el-col>
				</el-col>
			</el-col>
		</el-row>

		<!-- <el-col  style="display:flex;justify-content: space-between;"> -->
		<!-- </el-col> -->
	</div>
</template>
<script>
export default {
	data() {
		return {
			//筛选项
			formData: {
				employee_id: this.$getUserData().id
			},
			//时间
			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',

			//选择人员
			select_employee_id: this.$getUserData().name,
			employee_map: '', //获取人员列表

			dept_list: '',
			//人员详情
			personnel: {},
			authorityManagerHeaderLoad: false, //人员loading
			authorityManagerHeaders: {}, //人员数据
			personnelMessage: false, //人员信息loading

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

			//本月积分情况
			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, //本月积分情况--部门

			IntegralEventO: [], //个人奖分数据
			IntegralEventT: [], //个人扣分数据

			awardDeductRanking: false //个人奖扣分loading
		};
	},
	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.month"(val, old_val) {
		//   this.executiveFunction();
		//   console.log(this.formData);
		// },
		//不包含自动积分加分项
		exclusiveMonthChecked() {
			this.monthlyIntegral();
		},

		select_employee_id(val) {
			this.formData.employee_id = val;
			this.executiveFunction(true);
		}
	},
	mounted() {
		window.addEventListener('resize', this.selfAdaption);
		this.getEmployee();
		// if(JSON.parse(localStorage.getItem("SET_EMPLOYEE_MAP"))){
		//   this.employee_map = JSON.parse(localStorage.getItem("SET_EMPLOYEE_MAP"))
		// }else{
		//   this.$store.dispatch('get_employee_map').then((res) => {
		//     this.$nextTick(() => {
		//       this.employee_map = JSON.parse(localStorage.getItem("SET_EMPLOYEE_MAP"))
		//     })
		//   })
		// }
		// if (this.$store.getters.user_info) {
		//   this.personnel = this.$store.getters.user_info;
		//   let dept_li = this.personnel.employee_detail.dept_list;
		//   let dept_ = "";
		//   for (let i in dept_li) {
		//     dept_ += dept_li[i].dept_name + " ";
		//   }
		//   this.dept_list = dept_;
		// } else {
		//   this.personnelDetails(); //获取人员详情
		// }
		if (this.$getUserData()) {
			this.personnel = this.$getUserData();
			let dept_li = this.personnel.employee_detail.dept_list;
			let dept_ = '';
			for (let i in dept_li) {
				dept_ += dept_li[i].dept_name + ' ';
			}
			this.dept_list = dept_;
		} else {
			this.personnelDetails(); //获取人员详情
		}
		this.formData.month = this.$moment().format('YYYY-MM');
		this.executiveFunction();
	},
	methods: {
		getType(id){
			return this.$getTyps(id).name;
		},
		
		//获取员工列表
		getEmployee() {
			this.$axios('get', '/api/employee/index', { dept_id: 0, keywords: '', page: 1, page_size: 2000 })
				.then(res => {
					let list = res.data.data.list;
					this.employee_map = list;
					// for(let i in list){

					// }
				})
				.finally(err => {});
		},

		//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();
		},
		//需要执行的所有函数
		executiveFunction(item) {
			//切换角色才请求--人员详情--。
			if (item) {
				this.personnelDetails(); //获取人员详情
				this.authorityManagerHeader(); //本月 A B 绩效分 比例
				this.integralForm(); //饼图
				this.monthlyIntegral(); //本月积分情况
				this.integralEvents(); //积分事件列表
			} else {
				this.authorityManagerHeader(); //本月 A B 绩效分 比例
				this.integralForm(); //饼图
				this.monthlyIntegral(); //本月积分情况
				this.integralEvents(); //积分事件列表
			}
		},

		//获取人员详情
		personnelDetails() {
			this.personnelMessage = true;
			let params = {
				id: this.formData.employee_id
			};
			this.$axios('get', '/api/employee/info', params)
				.then(res => {
					this.personnel = res.data.data;
					let dept_li = this.personnel.employee_detail.dept_list;
					let dept_ = '';
					for (let i in dept_li) {
						dept_ += dept_li[i].dept_name + ' ';
					}
					this.dept_list = dept_;
				})
				.finally(() => {
					this.personnelMessage = false;
				});
		},
		//本月 A B 绩效分 比例
		authorityManagerHeader() {
			this.authorityManagerHeaderLoad = true;
			let params = {};
			params.employee_id = this.formData.employee_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/', params, 'v2')
				.then(res => {
					if (res.data.code == 1) {
						this.authorityManagerHeaders = res.data.data;
					}
				})
				.finally(() => {
					this.authorityManagerHeaderLoad = false;
				});
		},

		//饼图
		//分为两列展示，多传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.employee_id = this.formData.employee_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 + '%');
						}
						// console.log(lists.length/2)

						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;
				});
		},

		//月度积分
		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);
			}
		},
		//月度积分
		// monthlyIntegralchange(val){
		//   console.log(val)
		//   if(val.length == 0){
		//     this.exclusiveMonthBranch = 0
		//   }else{
		//     let valItem = 0
		//     for(let i in val){
		//       valItem = val[i]
		//     }
		//     this.exclusiveMonthBranch = valItem
		//   }
		//   this.monthlyIntegral()
		// 	this.$nextTick(()=>{
		// 		this.$refs.dept2.dropDownVisible = false;
		// 	})
		// },
		monthlyIntegral() {
			this.monthlyIntegralloading = true;
			let params = {};
			let listslength = [];
			params.employee_id = this.formData.employee_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) {
						this.monthlyIntegralnone = true;
					} else {
						this.monthlyIntegralnone = false;
					}
					this.monthlyIntegralloading = false;
				});
		},

		//积分事件列表
		integralEvents() {
			this.awardDeductRanking = true;
			let params = {
				page: 1,
				page_size: 5,
				pt_id: '3',
				time_type: '2'
			};
			params.employee_id = this.formData.employee_id;
			if (this.monthORyear == '2') {
				//月
				params.month = this.formData.month;
				params.time_type = '2';
			} else if (this.monthORyear == '3') {
				//年
				params.year = this.formData.year;
				params.time_type = '3';
			}
			this.$axios('get', '/api/integral/statistics/prize/buckle/ranking', params)
				.then(res => {
					this.IntegralEventO = res.data.data.prize;
					this.IntegralEventT = res.data.data.buckle;
				})
				.finally(() => {
					this.awardDeductRanking = false;
				});
		}
	},
	beforeDestroy() {
		//取消echarts自适应
		window.removeEventListener('resize', this.selfAdaption);
	}
};
</script>
<style scoped="scoped" lang="scss">
.el-table::before {
	height: 0px;
}

.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 {
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	margin: 0 0 10px 20px;
	.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;
	}
}

.top_user_info {
	position: relative;
	padding-top: 0;
	background: #fff;
	.userinfo_box {
		border-right: 1px #cecccc solid;
		margin: 34px 0;
	}
	.user_box {
		padding-left: 0 !important;
		border-right: 1px #333 solid;
	}
	.headimg_box {
		padding-left: 0 !important;
	}
	.headimg_box .headimg {
		width: 50px;
		height: 50px;
		background: #909399;
		border-radius: 50px;
	}
	.user_info {
		padding: 0 !important;
		line-height: 25px;
		.greetings {
			margin: 4px 0px 0 120px;
			font-size: 16px;
			font-weight: bold;
		}
		.greetings span {
			font-size: 14px;
			color: #666;
			display: inline-block;
			vertical-align: top;
		}
		span:nth-child(1) {
			display: block;
			font-size: 16px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.person {
		display: block;
		font-size: 14px;
		padding: 32px 0 18px 0;
		color: #606266;
	}
	.time {
		font-size: 14px;
		padding-right: 10px;
		position: relative;
	}
}
/*
padding: 18px 0 16px 0;
color: #606266;
height: 32px;
box-sizing: content-box;
*/

.pointsevent_box {
	display: block;
	text-align: center;
	margin: 20px 0 0 0px;
	padding-right: 0 !important;
	border: 1px #e1e4e7 solid;
	box-shadow: 0 2px 4px rgba(140, 140, 140, 0.1);
	.title {
		font-family: Microsoft Yahei;
		display: block;
		text-align: left;
		margin-bottom: 20px;
		padding: 0 0 0 10px;
		font-size: 16px;
		font-weight: normal;
		border-left: 2px solid #409eff;
	}
}
.popperSPBOX {
	max-width: calc(100vh - 400px);
	background-color: rgb(255, 255, 255);
}
</style>