dd_pc/src/home.vue

<template>
	<div class="">
		<!-- <div class="data-all"> -->
		<!-- <img src="./assets/image/init.gif" class="appImg" />
			<div>管理执行难，就用功道云</div> -->
		<el-row style="min-width:1160px;">
			<el-col :span="18" style="min-width:780px;">
				<el-row class="home-left-header">
					<el-col :span="7" class="hlheader-user" v-loading="">
						<el-row :gutter="40">
							<el-col :span="24" class="hlheader-user-info">
								<div class="headimg" style=" margin-right: 0px;cursor:pointer;" @click="">
									<userImage :user_name="user_info.name" :img_url="user_info.img_url" fontSize="1.1" width="60px" height="60px"></userImage>
								</div>
								<div class="headtext">
									<div class="greetings" style="margin-top:7px;">
										<div style="margin-top:2px;">{{ user_info.name }}</div>
										&nbsp;
										<span style="margin-top:2px;">
											{{
												time <= 4
													? '夜深了'
													: time > 4 && time <= 11
													? '早上好'
													: time > 11 && time <= 14
													? '中午好'
													: time > 14 && time <= 19
													? '下午好'
													: time > 19 && time <= 24
													? '晚上好'
													: ''
											}}
										</span>
									</div>
									<p style="margin-top: 16px; color: #666;">
										<span>
											{{
												time <= 4
													? '烦恼尽退散'
													: time > 4 && time <= 11
													? '又是美好的一天'
													: time > 11 && time <= 14
													? '吃饱睡好更有动力'
													: time > 14 && time <= 19
													? '致敬奋斗中的自己'
													: time > 19 && time <= 24
													? '该养精蓄锐了'
													: ''
											}}
										</span>
									</p>
								</div>
							</el-col>
						</el-row>
					</el-col>

					<el-col :span="17" style="margin:0;padding:0;" v-if="creatorJurisdiction">
						<el-col :gutter="50" style="margin:0;padding:34px 0 0 0;" class="quick_button_box">
							<div style="display:flex;justify-content: space-around;">
								<div v-for="(item, index) in fits" :key="index" @click="openGzd(item.url)" style="display:flex;cursor:pointer;padding:0 5px 0 5px">
									<img :src="item.img" style="width:46px;height:46px;margin:10px 5px 0 0" />
									<p style="display: inline-block;width:100%;">
										<b style="display: inline-block;color:#303133;font-size:16px;margin-top:11px;">{{ item.name }}</b>
										<br />
										<span style="color:#606266;font-size:12px;display: inline-block;margin-top:8px;">{{ item.value }}</span>
									</p>
								</div>
							</div>
						</el-col>
					</el-col>
					<el-col v-else :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;" @click="$router.push({ path: '/individual_statistics' })">
									<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;">本月B分</span>
								</p>
								<p style="text-align:center;cursor:pointer;margin: 0;" @click="$router.push({ path: '/individual_statistics' })">
									<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;">本月A分</span>
								</p>
								<!-- <p style="text-align:center;cursor:pointer;margin: 0;" @click="$router.push({ path: '/my_performance' })"><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;" @click="Administrator"> -->
								<p style="text-align:center;cursor:pointer;margin: 0;" @click="$router.push({ path: '/my_task' })">
									<b style="color:#26A2FF;font-size:27px;">
										{{
											authorityManagerHeaders.performance
												? authorityManagerHeaders.performance.complete_count + '/' + authorityManagerHeaders.performance.total_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>
					<!-- 7.0原版
          <div v-else>
            <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;" @click="$router.push({ path: '/integral_statistics' })"><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;">本月B分</span></p>
                  <p style="text-align:center;cursor:pointer;margin: 0;" @click="$router.push({ path: '/integral_statistics' })"><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;">本月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;" @click="$router.push({ path: '/my_performance' })"><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;" @click="$router.push({ path: '/my_performance' })"><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-row>

				<el-row class="left-all-style">
					<el-row>
						<el-col :span="22"><span class="title">排行榜</span></el-col>
						<el-col :span="2"><span class="noremind" @click="$router.push({ path: RankingPush })">查看详情</span></el-col>
					</el-row>
					<div v-loading="tabPositionLoad">
						<div style="width:100%;height:30px;margin-top:20px;">
							<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;display:flex">
								<div v-for="(item, index) in rankingList" :key="index" style="">
									<el-radio-button :label="item.val" @click.native="tabPositions($event, item)">
										<span style="width:84px;coloe:#606266;display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
											{{ item.group_name }}
										</span>
									</el-radio-button>
								</div>
							</el-radio-group>
						</div>
						<div style="display:flex;margin-top:16px;padding-top:24px;height:100%;" v-loading="addUpRankingLoad">
							<div class="nopoint_box" style="" v-if="rankingListDetails.length == 0">
								<div class="noimg" style="margin:0;"></div>
								<span class="title1" style="margin:0;">暂无积分数据</span>
							</div>
							<!-- <div  v-else v-for="(item,index) in rankingListDetails" :key="index" style="text-align:center;width:80px;cursor:pointer;margin:0 20px;" @click="$router.push({ path: RankingPush })"> -->
							<div v-else v-for="(item, index) in rankingListDetails" :key="index" style="text-align:center;width:80px;cursor:pointer;margin:0 20px;">
								<div class="" style="cursor:pointer;position: relative;height: 60px;">
									<svg-icon
										v-if="item.rank <= 3"
										:icon-class="item.rank == 1 ? 'first' : item.rank == 2 ? 'secondPlace' : item.rank == 3 ? 'third' : ''"
										style="z-index:1;position: absolute;left: 26px;top: -18px;font-size:28px;"
									/>
									<div
										v-if="item.rank == 4 || item.rank == 5"
										style="z-index:1;position: absolute;left: 27px;top: -14px;width:24px;height:24px;border:1px solid #C0C4CC;border-radius:50%;background-color:#fff;font-size:12px;text-align-center;line-height:24px;color:#303133;"
									>
										<b style="">{{ item.rank }}</b>
									</div>
									<div
										v-if="item.employee_id == user_info.id && index == 0 && item.rank > 3"
										style="z-index:1;position: absolute;left: 26px;top: -14px;width:25px;height:25px;border:1px solid #C0C4CC;border-radius:50%;background-color:#fff;font-size:12px;text-align-center;line-height:24px;color:#303133;"
									>
										<!-- <div
                    v-if="
                      
                        index == 0 &&
                        item.rank > 3
                    "
                    style="z-index:1;position: absolute;left: 28px;top: -14px;width:24px;height:24px;border:1px solid #C0C4CC;border-radius:50%;background-color:#fff;font-size:12px;text-align-center;line-height:24px;color:#303133;"
                  > -->
										<b>{{ item.rank }}</b>
									</div>
									<div style="position: absolute;left: 8px;top: -16px;z-index:2;">
										<div
											v-if="index == 5 || index == 6"
											style="width:60px;height:24px;border:1px solid #C0C4CC;background-color:#fff;border-radius:20px;font-size:12px;color:#303133;text-align:center;line-height:24px"
										>
											<b>{{ index == 5 ? '倒数第2' : index == 6 ? '倒数第1' : '' }}</b>
										</div>
									</div>
									<userImage
										:id="item.employee_id"
										:img_url="item.employee_img_url"
										fontSize="1"
										:user_name="item.employee_name"
										width="60px"
										height="60px"
									></userImage>
								</div>
								<span
									style="color:#303133;font-size:14px;text-align:center;margin-top:10px;display: inline-block;width:100%;display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"
								>
									{{ item.employee_name }}
									<span v-if="item.employee_id == user_info.id">(我)</span>
								</span>
							</div>
						</div>
					</div>
				</el-row>

				<el-row class="left-all-style">
					<el-row style="">
						<el-col :span="24"><b class="title" style="margin-bottom:15px;display:block">积分构成</b></el-col>

						<div v-loading="IntegralFormChartLoad">
							<el-col :span="5" style="position: relative;left:10px;z-index:1;margin-top:10px;" v-if="!this.employeeRout">
								<el-cascader
									v-model="dept_name1"
									: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>
							</el-col>
							<div class="nopoint_box" style="height:325px;" v-show="IntegralFormnone">
								<div class="noimg" style="width: 150px;height: 150px;margin-top:94px;"></div>
								<span class="title1">
									暂无积分数据，
									<span @click="$router.push({ path: '/award_punish' })" style="color:#409EFF;cursor:pointer;">去奖扣积分></span>
								</span>
							</div>
							<div v-show="!IntegralFormnone" style="margin-top:20px;"><div ref="IntegralFormChart" :style="{ width: '100%', height: '400px' }"></div></div>
						</div>
					</el-row>
				</el-row>

				<el-row class="left-all-style">
					<el-row style="">
						<el-col :span="24" style="display:flex">
							<b class="title" style="margin:0 20px 15px 0;display:block">本月积分情况</b>
							<el-checkbox v-model="exclusiveMonthChecked">不包含自动积分加分项</el-checkbox>
						</el-col>
						<div v-loading="monthlyIntegralloading">
							<el-col :span="5" style="position: relative;left:10px;z-index:1;" v-if="!this.employeeRout">
								<el-cascader
									v-model="dept_name2"
									:options="dept_tree"
									@change="monthlyIntegralchange"
									:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
									ref="dept2"
									filterable
									change-on-select
									placeholder="请选择部门"
									clearable
								></el-cascader>
							</el-col>

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

							<div v-show="!monthlyIntegralnone">
								<div ref="monthlyIntegralChart" :style="{ width: '100%', height: '350px', marginTop: '40px' }"></div>
								<div style="width:90%;display:flex;justify-content: space-around;margin-top:30px;padding-left:40px">
									<p v-for="(item, index) in monthlyIntegralList" :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-row v-if="!this.employeeRout" class="left-all-style" style="">
					<el-row style="">
						<el-col :span="24"><b class="title" style="margin-bottom:15px;display:block">管理者奖扣任务执行情况</b></el-col>
						<div v-loading="ManagerSAwardloading">
							<el-col :span="5" style="position: relative;left:10px;z-index:1;">
								<el-cascader
									v-model="dept_name3"
									:options="dept_tree"
									@change="ManagerSAwardlchange"
									:props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
									ref="dept3"
									filterable
									change-on-select
									placeholder="请选择部门"
									clearable
								></el-cascader>
							</el-col>
							<div class="nopoint_box" style="height:401px;" v-if="ManagerSAwardnone">
								<div class="noimg" style="width: 150px;height: 170px;margin-top:90px;"></div>
								<span class="title1">暂无积分数据</span>
							</div>
							<div v-show="!ManagerSAwardnone" :style="{ width: widths }">
								<div ref="ManagerSAwardChart" :style="{ width: widths, height: '400px', marginTop: '40px' }"></div>
								<div style="width:90%;display:flex;justify-content: space-around;padding-left:40px">
									<p
										v-for="(item, index) in ManagerSAwardlList"
										:key="index"
										style="z-index:1;"
										class="ManagerSAwardlStyle"
										@click="$router.push({ path: '/manager_statistics' })"
									>
										<b class="ManagerSAwardlStyleB" v-if="index != 2">{{ item.val }}</b>
										<b class="ManagerSAwardlStyleB" v-else-if="index == 2">{{ item.val == -1 ? '—' : item.val + ':1' }}</b>
										<span class="ManagerSAwardlStyleSpan">{{ item.name }}</span>
									</p>
								</div>
							</div>
						</div>
					</el-row>
				</el-row>
			</el-col>
			<el-col :span="6" style="min-width:280px;">
				<el-row v-if="!creatorJurisdiction">
					<div class="right-all-style" style="background-color:#fff;padding:20px;;text-align:left;margin-bottom: 10px;">
					<span class="title">常用</span>
					<div>
						<span v-for="(item,index) in inCommonUse" :key="index" @click="$router.push({ path: item.push })" class="inCommonUseStyle">
						<img :src="item.image" alt="" style="width:31px;height:31px;margin:11px 10% 0 8%;">
						<b>{{item.name}}</b>
						</span>
					</div>
					</div>
				</el-row>
				<el-row>
					<div class="right-all-style" v-loading="highestPrizeBuckleloading" style="background:#fff;padding: 20px 20px 0;">
						<span class="title">本周奖分最高</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" :id="prize.id" :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:rgb(48, 49, 51);overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;padding-bottom:10px; "
								>
									{{ 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">本周扣分最多</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" :id="buckle.id" :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:rgb(48, 49, 51);overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;padding-bottom:10px; "
								>
									{{ buckle.remark ? buckle.remark.customize : '' }}
								</p>
							</div>
						</div>
					</div>
				</el-row>
			</el-col>
		</el-row>
		<!-- </div> -->
	</div>
</template>

<script>
var bool = true; // 五秒执行一次变量
export default {
	data() {
		return {
			employeeRout:this.$authoritys('employee'),

			authorityManagerHeaderLoad: false, //管理员头部loading
			authorityManagerHeaders: {}, //管理员头部 数据
			creatorJurisdiction: this.$getIsCreator('creator'), //是否创始人

			widths: '100%',
			time: this.$moment().format('HH'),
			user_info: this.$getUserData(),
			fits: [
				{
					name: '奖扣A/B分',
					value: '表现好坏，有奖有罚',
					img: require('./assets/image/prizeBuckle.png'),
					url: '/award_punish'
				},
				// {
				//   name: "绩效",
				//   value: "工作目标与价值的体现",
				//   img: require("./assets/image/performance.png"),
				//   url: "/award_punish",
				// },
				{
					name: '管理者奖扣',
					value: '管理执行到位，奖罚分明',
					img: require('./assets/image/performance.png'),
					url: '/manager_statistics'
				},
				{
					name: '任务',
					value: '认可积极完成任务的人',
					img: require('./assets/image/task.png'),
					url: '/my_issue'
				}
			],

			//排行榜
			RankingPush: '', //查看更多跳转
			tabPositionLoad: false, //排名分类loading
			addUpRankingLoad: false, //排名人员loading
			tabPosition: '0',
			rankingList: [], //排行榜数据
			rankingListDetails: [], //排行榜人员列表

			//积分构成
			IntegralFormnone: false, //积分构成为空或报错，展示的开关
			dept_name1: [], //积分构成--部门
			IntegralFormChartLoad: false, //积分构成loading

			//本月积分情况
			exclusiveMonthBranch: 0, //本月积分情况--部门
			exclusiveMonthChecked: true, //本月积分情况--不包含自动积分加分项
			dept_name2: [], //本月积分情况--部门
			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: '对比上月扣分' }
			],
			monthlyIntegralloading: false, //本月积分情况loading
			monthlyIntegralnone: false, //本月积分情况为空或报错，展示的开关

			//管理者奖扣
			dept_name3: [], //管理者统计数据--部门
			ManagerSAwardloading: false, //管理者统计 loading
			ManagerSAwardnone: false, //管理者奖扣执行情况为空或报错，展示的开关
			ManagerSAwardlList: [
				//管理者统计数据
				{ val: '0', name: '总奖分' },
				{ val: '0', name: '总扣分' },
				{ val: '0', name: '奖扣分比例' },
				{ val: '0', name: '奖扣人次' },
				{ val: '0', name: '奖扣执行人数' },
				{ val: '0', name: '达标人数' },
				{ val: '0', name: '未达标人数' }
			],

			dept_tree: [], //部门列表

			//奖扣分
			highestPrizeBuckleloading: false, //奖扣分最高loading
			prize: {}, //奖分
			buckle: {}, //扣分
			
			inCommonUse:[
				{name:'奖扣积分',image:require('./assets/image/entry_list.png'),push:'/award_punish'},
				{name:'发布任务',image:require('./assets/image/my_publish.png'),push:'/my_issue'},
				{name:'申请积分',image:require('./assets/image/a_apply.png'),push:'/apply_list'},
				{name:'领任务',image:require('./assets/image/task_hall.png'),push:'/get_task'},
			],
		};
	},
	watch: {
		// dept_name(val, old_val) {},
		exclusiveMonthChecked() {
			this.monthlyIntegral();
		}
	},
	mounted() {
		if(this.employeeRout){
			this.inCommonUse = []
			this.inCommonUse.push(
				{name:'申请积分',image:require('./assets/image/a_apply.png'),push:'/apply_list'},
				{name:'领任务',image:require('./assets/image/task_hall.png'),push:'/get_task'},
			)
		}
		this.function_All();
		window.addEventListener('resize', this.selfAdaption);
	},
	methods: {
		function_All() {
			if (this.$getIsCreator('creator')) {
				//是否是创始人
			} else {
				this.authorityManagerHeader();
			}
			this.integralForm(); //积分构成
			this.getDepartment(); //获取部门列表
			this.rankingListname(); //获取自定义排行榜名
			this.monthlyIntegral(); //本月积分情况
			if(!this.employeeRout){
				this.ManagerSAward(); //管理者奖扣任务执行情况
			}
			this.highestPrizeBuckle(); //奖扣分最高积分事件
		},

		//echarts自适应
		selfAdaption() {
			var myChart1 = this.$echarts.init(this.$refs.monthlyIntegralChart);
			var myChart2 = this.$echarts.init(this.$refs.IntegralFormChart);
			var myChart3 = this.$echarts.init(this.$refs.ManagerSAwardChart);
			// myChart.setOption(option);
			// setTimeout(function (){
			//     window.onresize = function () {
			myChart1.resize();
			myChart2.resize();
			myChart3.resize();
			//     }
			// },20)
		},
		openGzd(val) {
			val ? this.$router.push({ path: val }) : '';
			// if (val == '/my_issue') {
			// 	this.popout();
			// } else {
			// 	val ? this.$router.push({ path: val }) : '';
			// }
		},
		popout() {
			if (bool) {
				const h = this.$createElement;
				this.$notify({
					message: h('b', { style: 'color:rgb(38, 162, 255)' }, '任务功能将在近期开放，敬请期待')
				});

				// this.$message({
				//   message: '任务功能将在近期开放，敬请期待',
				//   type: 'success'
				// });
				bool = false;
				setTimeout(() => {
					bool = true;
				}, 5000);
			} else {
			}
		},
		Administrator() {
			this.popout();
		},

		//管理员头部
		authorityManagerHeader() {
			this.authorityManagerHeaderLoad = true;
			let params = {
				employee_id: this.user_info.id,
				month: this.$moment().format('YYYY-MM')
			};
			this.$axios('get', '/api/integral/statistics/', params, 'v2')
				.then(res => {
					if (res.data.code == 1) {
						this.authorityManagerHeaders = res.data.data;
					}
				})
				.finally(() => {
					this.authorityManagerHeaderLoad = false;
				});
		},

		//排行榜
		customRanking(target_id, date_interval) {
			//自定义排名   date_interval=时间
			let data = {
				group_id: target_id,
				pt_id: 3,
				index_ranking: 1
			};
			data.date =
				date_interval == 1
					? this.$moment().format('YYYYMM')
					: date_interval == 2
					? this.$moment().format('YYYYQ')
					: date_interval == 3
					? this.$moment().format('YYYY')
					: '0';
			// request.get("/api/integral/statistics/ranking", { params: params })
			this.$axios('get', '/api/integral/statistics/groups/rank', data)
				.then(res => {
					let lists = res.data.data.list;
					let rankingList = [];
					let arr = false;
					for (let i in lists) {
						let rankingJson = {};
						if (lists[i].employee_name) {
							arr = true;
						} else {
							arr = false;
							rankingJson.employee_id = lists[i].employee_id;
							rankingJson.employee_img_url = lists[i].img_url;
							rankingJson.employee_name = lists[i].name;
							rankingJson.point = lists[i].point;
							rankingJson.rank = lists[i].rank;
							rankingJson.status_remark = '';
							rankingList.push(rankingJson);
						}
					}
					if (arr) {
						this.rankingListDetails = lists;
					} else {
						this.rankingListDetails = rankingList;
					}
				})
				.finally(() => {
					this.addUpRankingLoad = false;
				});
		},
		addUpRanking() {
			//累计B分排名
			let params = {
				dept_id: 0,
				sort: 'DESC',
				page: 1,
				page_size: 10,
				pt_id: 3,
				type: 'all',
				index_ranking: 1
			};
			this.$axios('get', '/api/integral/statistics/ranking', params, 'v2')
				.then(res => {
					this.rankingListDetails = res.data.data.list;
				})
				.finally(() => {
					this.addUpRankingLoad = false;
				});
		},
		departmentOfRanking() {
			//部门B分排名
			this.RankingPush = '/dept_rank';
			let params = {
				dept_id: 0,
				sort: 'DESC',
				pt_id: 3,
				time_type: 1,
				page: 1,
				page_size: 10,
				position: 'all',
				month: this.$moment().format('YYYY-MM'),
				index_ranking: 1
			};
			this.$axios('get', '/api/integral/statistics/ranking', params, 'v2')
				.then(res => {
					this.rankingListDetails = res.data.data.list;
				})
				.finally(() => {
					this.addUpRankingLoad = false;
				});
		},
		rankingListname() {
			//获取排名列表
			this.tabPositionLoad = true;
			let params = {
				page: 1,
				page_size: 7
			};
			this.$axios('get', '/api/integral/statistics/ranking/list', params)
				.then(res => {
					if (res.data.code == 1) {
						let lists = res.data.data.list;
						for (let i in lists) {
							lists[i].val = i;
							if (lists[i].type == 'normal') {
								lists[i].group_name = '阶段排名(月)';
							}
							if (lists[i].type == 'all') {
								lists[i].group_name = '累计B分排名';
							}
							this.rankingList.push(lists[i]);
						}

						this.addUpRankingLoad = true;
						this.departmentOfRanking(); //进入获取部门B分排名数据
					} else {
						self.$message.error(res.data.data.msg);
					}
				})
				.finally(() => {
					this.tabPositionLoad = false;
					// self.item_loading = false;
				});
		},
		tabPositions(e, item) {
			//排行榜点击分类
			if (e.target.tagName === 'INPUT') return;
			if (item) {
				this.addUpRankingLoad = true;
			}
			if (item.type == 'normal') {
				this.RankingPush = '/dept_rank';
				this.departmentOfRanking();
			} else if (item.type == 'all') {
				this.RankingPush = '/total_rank';
				this.addUpRanking();
			} else if (item.type == 'custom') {
				this.RankingPush = '/custom_rank';
				this.customRanking(item.target_id, item.date_interval);
			}
		},

		//积分构成
		dept1_null(val) {
			let valItem = 0;
			for (let i in val) {
				valItem = val[i];
			}
			this.integralForm(valItem);
			this.$nextTick(() => {
				this.$refs.dept1.dropDownVisible = false;
			});
		},
		integralForm(item) {
			this.IntegralFormChartLoad = true;
			let listslength = [];
			let params = {};
			if (item) {
				(params.dept_id = item), (params.month = this.$moment().format('YYYY-MM'));
			} else {
				(params.dept_id = null), (params.month = this.$moment().format('YYYY-MM'));
			}
			if(this.employeeRout){
				params.employee_id = this.$getUserData().id;
			}
			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;
				});
		},
		//分为两列展示，多传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 = "28%";
			//   leftBT = "10%";
			// }

			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: '23%',
							itemGap: 20,
							// bottom:'50%',
							textStyle: {
								fontSize: 14,
								color: 'rgb(48, 49, 51)'
							},
							data: legendData1
						}
						//分为两列展示
						// {
						//   type: "scroll",
						//   orient: "vertical",
						//   icon: "square",
						//   left: "62%",
						//   align: "left",
						//   top: "23%",
						//   itemGap: 20,
						//   // bottom:'50%',
						//   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, '50%'],
							roseType: 'radius',
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: false
								}
							},
							data: dadalist
						}
					]
				};
				myChart.setOption(option);
			}
		},

		//月度积分
		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
						}
					},
					// dataZoom: [
					//     {
					//         type: 'slider',
					//         fillerColor : 'rgba(255, 255, 255, 0)',
					//         show: true,
					//         xAxisIndex: [0],
					//         start: 0,
					//         end: 100
					//     },
					//     {
					//         type: 'slider',
					//         fillerColor : 'rgba(255, 255, 255, 0)',
					//         show: true,
					//         yAxisIndex: [0],
					//         start: 0,
					//         end: 100
					//     },
					//     {
					//         type: 'slider',
					//         xAxisIndex: [0],
					//         start: 1,
					//         end: 35
					//     },
					//     {
					//         type: 'slider',
					//         yAxisIndex: [0],
					//         start: 29,
					//         end: 36
					//     }
					// ],
					series: [
						{
							name: '总积分',
							type: 'line',
							data: total
						},
						{
							name: '奖分',
							type: 'line',
							data: reward
						},
						{
							name: '扣分',
							type: 'line',
							data: deduction
						}
					]
				};
				myChart.setOption(option);
			}
		},
		//月度积分
		monthlyIntegralchange(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 = [];
			if(this.employeeRout){
				params.employee_id = this.$getUserData().id;
			}else{
				(params.dept_id = this.exclusiveMonthBranch)
			}
			(params.month = this.$moment().format('YYYY-MM'));
			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;
						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;
						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;
				});
		},

		//管理者奖扣统计
		ManagerSAwardCharts(Name, Award, Deduct) {
			//管理着奖扣统计表
			const chart = this.$refs.ManagerSAwardChart;
			if (chart) {
				const myChart = this.$echarts.init(chart);
				const option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							// type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					grid: {
						//表格偏移量
						// top: '5% '
						left: '5%',
						right: '0%'
					},
					toolbox: {
						feature: {
							// dataView: {show: false, readOnly: true},
							// magicType: {show: false, type: ['line', 'bar']},
							// restore: {show: false},
							// saveAsImage: {show: false}
						}
					},
					color: ['#26A2FF', '#FFC100'],
					legend: {
						right: '0%', //设置位置
						data: ['奖分', '扣分']
					},
					xAxis: [
						{
							type: 'category',
							data: Name,
							axisPointer: {
								type: 'shadow'
							},
							axisLabel: {
								interval: 0 //横轴信息全部显示
								// rotate:-30,//-30度角倾斜显示
							},
							axisLine: {
								//去掉X轴线
								show: false
							},
							axisTick: {
								//去掉X轴刻度
								show: false
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								formatter: '{value}'
							},
							axisLine: {
								//去掉Y轴线
								show: false
							},
							axisTick: {
								//去掉Y轴刻度
								show: false
							}
						}
					],
					series: [
						{
							name: '奖分',
							type: 'bar',
							barWidth: 14, //柱图宽度
							barGap: '0%', //柱图间距
							data: Award
						},
						{
							name: '扣分',
							type: 'bar',
							barWidth: 14, //柱图宽度
							barGap: '0%', //柱图间距
							data: Deduct
						}
					]
				};
				myChart.setOption(option);
			}
		},
		ManagerSAwardlchange(val) {
			//选中规则
			let valItem = 0;
			for (let i in val) {
				valItem = val[i];
			}
			this.ManagerSAward(valItem);
			this.$nextTick(() => {
				this.$refs.dept3.dropDownVisible = false;
			});
		},
		ManagerSAward(item) {
			//管理者奖扣请求
			this.ManagerSAwardloading = true;
			let params = {};
			let listslength = [];
			if (item) {
				(params.dept_id = item), (params.month = this.$moment().format('YYYY-MM'));
			} else {
				(params.dept_id = 0), (params.month = this.$moment().format('YYYY-MM'));
			}
			this.$axios('get', '/api/integral/statistics/task/pie', params, 'v2')
				.then(res => {
					let datas = res.data.data;
					listslength = datas.list;
					let histogramName = [];
					let histogramAward = [];
					let histogramDeduct = [];
					for (let i in datas.list) {
						histogramName.push(datas.list[i].name);
						histogramAward.push(datas.list[i].reward_point);
						histogramDeduct.push(datas.list[i].deduction_point);
					}
					this.ManagerSAwardlList[0].val = datas.reward_point;
					this.ManagerSAwardlList[1].val = datas.deduction_point;
					this.ManagerSAwardlList[2].val = datas.ratio;
					this.ManagerSAwardlList[3].val = datas.exec_count;
					this.ManagerSAwardlList[4].val = datas.manager_count;
					this.ManagerSAwardlList[5].val = datas.pass_count;
					this.ManagerSAwardlList[6].val = datas.fail_count;
					this.ManagerSAwardCharts(histogramName, histogramAward, histogramDeduct);
				})
				.finally(() => {
					if (listslength.length == 0) {
						this.ManagerSAwardnone = true;
					} else {
						this.ManagerSAwardnone = false;
					}
					this.ManagerSAwardloading = false;
				});
		},

		//奖扣分最高积分事件
		highestPrizeBuckle() {
			this.highestPrizeBuckleloading = true;
			let params = {
				time_type: '1',
				pt_id: '3',
				page: '1',
				page_size: '1'
			};
			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;
				});
		},

		//获取部门
		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自适应
	},
	created() {
	// var user = {
    //   accedence_time: "2020-12-26 15:04:33",
    //   company_id: '',
    //   company_info: { creator_ids: [167], id: 15, industry: '计算机软件', is_official: 1, logo_url: '', name: '测试组织', status: 1, user_count_max: 50 },
    //   employee_detail: {
    //     dept_list: [],
    //     manage_scope: [{"id": 164,"name": "刘瑞欣"},{"id": 165,"name": "方慧毅"},{"id": 166,"name": "郭家裕（创始人）"},{"id": 184,"name": "莫仕钊"},{"id": 185,"name": "秦杨升"}],
    //     permission_list: [],
    //     role_list: [
    //       { id: 15, name: 'employee', remark: '员工' },
    //       { id: 12, name: 'admin', remark: '公司管理员' },
    //       { id: 14, name: 'dept_manager', remark: '部门管理者' },
    //       { id: 13, name: 'point_manager', remark: '积分管理员' },
    //     //   { id: 11, name: 'creator', remark: '创始人' }
    //     ],
    //     superior_list: [{id: 164,name: "刘瑞欣"},
	// 			{id: 165,name: "方慧毅"},
	// 			{id: 166,name: "郭家裕（创始人）"},
	// 			{id: 184,name: "莫仕钊"},
	// 			{id: 185,name: "秦杨升"},
	// 			{id: 187,name: "梁丽焕"},
	// 			{id: 188,name: "刘俊华"},{id: 167,name: "蔡文"}]
    //   },
    //   id: 186,
    //   img_url: "https://static-legacy.dingtalk.com/media/lADPBE1Xcf-wCfbNAwvNAwA_768_779.jpg",
    //   is_admin: 0,
    //   is_creator: 0,
    //   is_official: 1,
    //   is_scope: 1,
    //   letter_index: 'C',
    //   name: '程健',
    //   point_config: {
    //     deduct_task_monthly: [
    //       {
    //         name: "A分",
    //         point: "0",
    //         pt_id: 2
    //       },
    //       {
    //         name: "B分",
    //         point: "0",
    //         pt_id: 3
    //       }
    //     ],
    //     reward_ratio: 0,
    //     exec_count: 0,
    //     exec_count_point: 0,
    //     reward_ratio_point: 0,
    //     service_point: 0,
    //     entry_limit: 1000,
    //     point_limit: [
    //       {
    //         name: "A分",
    //         point: "200",
    //         pt_id: 2
    //       },
    //       {
    //         name: "B分",
    //         point: "100",
    //         pt_id: 3
    //       }
    //     ],
    //     reward_task_monthly: [
    //       {
    //         name: "A分",
    //         point: "0",
    //         pt_id: 2
    //       },
    //       {
    //         name: "B分",
    //         point: "0",
    //         pt_id: 3
    //       }
    //     ],
    //   },
    //   post: '',
    //   site_config: {
    //     base_point: 120,
    //     rule_limit_check: 1,
    //     task_review: 0,
    //     service_point: 120,
    //     a2b: 0
    //   },
    //   site_id: 15
    // };
    // localStorage.setItem('userData',JSON.stringify(user));
	}
};
</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{
// 	background: #fff;
// 	border-radius: 5px;
//     margin: 20px 0 20px 0;
// 	.title{
// 		padding-left: 10px;
// 		font-size: 16px;
// 		font-weight: normal;
// 		border-left: 2px solid #409EFF;
// 	}
// }
.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 20px;
	.title {
		padding-left: 10px;
		font-size: 16px;
		font-weight: normal;
		border-left: 2px solid #409eff;
	}
}

.home-left-header {
	background: #fff;
	border-radius: 5px;
	// border:1px #e1e4e7 solid;
	// box-shadow: 0 2px 4px rgba(140,140,140,0.1);
	.hlheader-user {
		border-right: 1px #cecccc solid;
		margin: 34px 0;
	}
	.hlheader-user-info .greetings div {
		max-width: 95px;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		vertical-align: top;
	}
	.hlheader-user-info {
		display: flex;
		.headimg {
			margin: 0 auto;
		}
		.headtext {
			margin: 0 auto;
		}
		.greetings {
			margin: 0 auto;
			font-size: 16px;
			font-weight: bold;
			// div {
			//   max-width: 95px;
			//   display: inline-block;
			//   overflow: hidden;
			//   white-space: nowrap;
			//   text-overflow: ellipsis;
			//   vertical-align: top;
			// }
			span {
				font-size: 14px;
				color: #666;
				display: inline-block;
				vertical-align: top;
				padding-left: 5px;
			}
			p span {
				line-height: 30px;
				font-size: 14px;
				color: #666;
				display: inline-block;
				vertical-align: top;
			}
		}
	}
}

.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;
	}
}
.ManagerSAwardlStyle {
	text-align: center;
	display: block;
	cursor: pointer;
	b {
		color: #303133;
		font-size: 18px;
		transition: all 0.5s;
	}
	span {
		color: rgb(48, 49, 51);
		font-size: 14px;
		margin-top: 5px;
		display: block;
	}
}
.ManagerSAwardlStyle:hover .ManagerSAwardlStyleB {
	color: #4eb2ff;
}

::v-deep .el-radio-button__inner {
	border: 0px solid #dcdfe6;
	border-radius: 5px;
	padding: 0px 18px;
	height: 36px;
	line-height: 38px;
}
::v-deep .el-radio-button--medium .el-radio-button__inner {
	padding: 7px 13px;
}
.el-radio-button:first-child ::v-deep .el-radio-button__inner {
	border: 0px solid #dcdfe6;
	border-radius: 5px;
}
.el-radio-button:last-child ::v-deep .el-radio-button__inner {
	border-radius: 5px;
}

.rightexamineAndApproveList {
	text-align: left;
	width: 100%;
	// border-bottom:1px solid #EFEFEF;
}
  .inCommonUseStyle{
    width:95%;
    height:54px;
    border:1px solid #C0C4CC;
    display:block;
    margin:16px 0 0 10px;
    display:flex;
    line-height:54px;
    border-radius:5px;
    cursor:pointer;
    transition: all .5s;
  }
  .inCommonUseStyle b{
    transition: all .5s;
    color:#303133;
    font-size:14px;
  }
  .inCommonUseStyle:hover{
    background-color: #fcfcfc;
    border: 1px solid #409EFF;
  }
  .inCommonUseStyle:hover b{
    color : #409EFF;
  }
</style>