dd_pc/src/home.vue

<template>
	<div class="">
		<div class="flex-box ts flex-center-center" v-if="isSubject">
			<img mode="scaleToFill" src="./assets/image/tz.png" />
			<div class="flex-1">你正在使用个人体验版，如需正式使用，请联系管理员</div>
			<div class="btn" type="primary" @click="openGly">联系管理员</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;">
									<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;">{{ headDayBs.b ? headDayBs.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.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_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>
				</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;">
								<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;"
									>
										<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 :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 v-if="$supremeAuthority()!='employee'" @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">待我审批({{ auditList.length }})</span>

						<div class="nopoint_box" v-if="auditList.length == 0">
							<div class="noimg"></div>
							<span class="title1" style="padding-bottom:20px;">还没有待我审批</span>
						</div>

						<div v-else style="padding:20px 0 20px 0;" class="flex-box-v">
							<div
								v-for="(item, index) in auditList"
								class="List_border"
								:key="index"
								style="cursor:pointer;display:flex;padding-top:10px;"
								@click="openDetail(item)"
							>
								<userImage width="45px" height="45px" :id="item.employee_id" :user_name="item.employee_name" style="margin-right:8px"></userImage>
								<div class="rightexamineAndApproveList2">
									<p style="width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#303133;font-size:16px">
										<b>
											{{ item.employee_name
											}}{{
												item.source_type == 1
													? '的积分任务'
													: item.source_type == 2
													? '的积分申请'
													: item.source_type == 3
													? '的积分录入'
													: item.source_type == 4
													? '的绩效工作'
													: ''
											}}
										</b>
									</p>
									<p
										style="padding:10px 0;font-size:13px;line-height:20px;color:#303133;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; "
									>
										{{ item.remark.rule || item.remark.customize }}
									</p>
									<div style="display:flex;padding-bottom:10px;justify-content: space-between;">
										<span style="color:#909399">{{ item.event_time }}</span>
										<div><span style="color:#26A2FF;cursor:pointer">审批</span></div>
									</div>
								</div>
							</div>
							<div
								class="more"
								v-show="auditList.length >= 3"
								style="text-align: center;color: #909399;font-size: 14px; padding:16px 16px 0 16px; cursor: pointer;"
								@click="$router.push({ path: '/approval_list' })"
							>
								查看更多
							</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="!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">本周扣分最多</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-row>
					<div class="right-all-style" v-loading="announLoad" style="background:#fff;padding: 20px 20px 20px 20px;">
						<div style="display:flex;justify-content: space-between;">
							<span class="title">系统通知</span>
							<span v-if="announcement.title" @click="$router.push({ path: '/update_notice' })" class="announcementc" style="font-size:13px;">查看详情</span>
						</div>
						<div v-if="announcement.title" class="announs">
							<b style="font-size:15px;margin:10px 0 0 10px;display: inline-block;">{{ announcement.title }}</b>
							<div class="announDetails" style="padding:0 0 0 18px;margin-top:10px;" v-html="announcement.focus"></div>
						</div>
						<div v-else class="nopoint_box">
							<div class="noimg"></div>
							<span class="title1" style="padding-bottom:10px;">暂无系统通知</span>
						</div>
					</div>
				</el-row>
			</el-col>
		</el-row>
		<div class="updateNotice">
			<el-dialog title="系统通知" :visible.sync="updateVisible" width="500px" top="20vh" :before-close="updateClose">
				<b style="font-size:16px;margin:0 0 10px 0;display: inline-block;">{{ announcement.title }}</b>
				<div class="announDetails" style="padding:0 0 0 0" v-html="announcement.focus"></div>
				<span slot="footer" class="dialog-footer"><el-button @click="$router.push({ path: '/update_notice' })" type="primary" round>查看详情</el-button></span>
			</el-dialog>
		</div>
		<examinePopup :title="'审核详情'" :id="detail_id" :show.sync="detailShow"></examinePopup>
	</div>
</template>

<script>
var bool = true; // 五秒执行一次变量
import examinePopup from '@/components/examinePopup';
import { contactAdminToUseApp } from 'dingtalk-design-libs';
export default {
	components: { examinePopup },
	data() {
		return {
			isSubject: false, //判断是否是个人版进入
			mainCorpId: '', //如果是个人版，这个企业ID是登录者所在的企业ID，不是钉钉那边提供的隐藏企业ID

			announLoad: false,
			announcement: {},

			updateVisible: false,

			employeeRout: this.$authoritys('employee'),

			authorityManagerHeaderLoad: false, //管理员头部loading
			authorityManagerHeaders: {}, //管理员头部 数据
			headDayBs: {},//管理员头部 数据 天
			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' }
			],
			// 待我审批模块
			auditList: [],
			detail_id: 0,
			detailShow: false
		};
	},
	watch: {
		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);
		// 个人版处理
		if (this.$getUserData().is_personal == 1) {
			this.isSubject = true;
			this.mainCorpId = this.$getUserData().main_corp_id;
		}
		var url = window.location.href;
		var rUrl = this.GetRequest(url).url || '';
		console.log('url=' + rUrl);
		this.$nextTick(function() {
			if (rUrl) {
				setTimeout(() => {
					this.$router.push({ path: '/' + rUrl });
				}, 200);
			}
		});
	},
	methods: {
		GetRequest(urlStr) {
			if (typeof urlStr == 'undefined') {
				var url = decodeURI(location.search); //获取url中"?"符后的字符串
			} else {
				var url = '?' + urlStr.split('?')[1];
			}
			var theRequest = new Object();
			var strs;
			if (url.indexOf('?') != -1) {
				var str = url.substr(1);
				strs = str.split('&');
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return theRequest;
		},
		openGly() {
			contactAdminToUseApp({ id: '55493', corpId: this.mainCorpId }).catch(err => {
				// 入参不正确，或者遇到技术异常时才会进入这个链路
				console.error(err);
			});
		},
		function_All() {
			if (this.$getIsCreator('creator')) {
				//是否是创始人
			} else {
				this.authorityManagerHeader();
			}
			this.noticeList(); //系统公告
			this.integralForm(); //积分构成
			this.getDepartment(); //获取部门列表
			this.rankingListname(); //获取自定义排行榜名
			this.monthlyIntegral(); //本月积分情况
			this.getSpList(); //待我审批列表
			if (!this.employeeRout) {
				this.ManagerSAward(); //管理者奖扣任务执行情况
			}
			this.highestPrizeBuckle(); //奖扣分最高积分事件
		},
		//审批
		openDetail(item) {
			this.detail_id = item.id;
			this.detailShow = true;
		},
		// 待我审批列表
		getSpList() {
			let params = {
				source_type: 0,
				type: 'waiting',
				page: 1,
				pt_id: 0,
				page_size: '3'
			};
			this.$axios('get', '/api/integral/review/list', params)
				.then(res => {
					if (res.data.code == 1) {
						this.auditList = res.data.data.list;
					}
				})
				.finally(() => {});
		},
		noticeList() {
			//系统公告
			this.announLoad = true;
			let params = {
				page: 1,
				page_size: 10
			};
			this.$axios('get', '/api/announcement/list', params)
				.then(res => {
					if (res.data.code == 1) {
						let list = res.data.data.list[0];
						if (this.$getCache('noticeId')) {
							if (this.$getCache('noticeId') != list.id) {
								this.updateVisible = true;
								this.$setCache('noticeId', list.id);
							}
						} else {
							this.$setCache('noticeId', list.id);
							this.updateVisible = true;
						}
						this.announcement = list;
					}
				})
				.finally(() => {
					this.announLoad = false;
				});
		},
		updateClose(none) {
			none();
		},
		//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);
			myChart1.resize();
			myChart2.resize();
			myChart3.resize();
		},
		openGzd(val) {
			val ? this.$router.push({ path: val }) : '';
		},
		popout() {
			if (bool) {
				const h = this.$createElement;
				this.$notify({
					message: h('b', { style: 'color:rgb(38, 162, 255)' }, '任务功能将在近期开放，敬请期待')
				});
				bool = false;
				setTimeout(() => {
					bool = true;
				}, 5000);
			} else {
			}
		},
		Administrator() {
			this.popout();
		},

		//管理员头部
		authorityManagerHeader() {
			this.authorityManagerHeaderLoad = true;
			let params1 = this.$axios('get', '/api/integral/statistics/', {employee_id: this.user_info.id, month: this.$moment().format('YYYY-MM')}, 'v2')
			let params2 = this.$axios('get', '/api/integral/statistics/', {employee_id: this.user_info.id, day: this.$moment().format('YYYY-MM-DD')}, 'v2')
			Promise.all([params1, params2]).then(res => {
				this.authorityManagerHeaders = res[0].data.data;
				this.headDayBs = res[1].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';
			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 = [];
					//分为两列展示
					for (let i in lists) {
						if (lists[i].name.length > 15) {
							lists[i].name = lists[i].name.slice(0, 15) + '...';
						}

						//分为两列展示
						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 + '%';
						dadalist.push(dataListDx);
					}
					this.drawLine(legendData1, dadalist); //图表
				})
				.finally(() => {
					if (listslength.length == 0) {
						this.IntegralFormnone = true;
					} else {
						this.IntegralFormnone = false;
					}
					this.IntegralFormChartLoad = false;
				});
		},
		//分为两列展示，多传legendDataTwo
		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 legendDataLeng = legendDataOne.length;
			if (legendDataLeng > colors.length) {
				//当列表大于固定颜色时，给随机颜色
				let colorsLeng = colors.length;
				for (let i = 0; i <= legendDataLeng - colorsLeng; i++) {
					colors.push('rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')');
				}
			}

			//只显示 N 条标题，多余隐藏，但是饼图不会隐藏
			let DataLengths = [];
			let left1 = '45%';
			let left2 = '45%';
			let leftBT = '25%';
			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
						}
					],
					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
						}
					},
					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自适应
	}
};
</script>

<style scoped="scoped" lang="scss">
.ts {
	height: 64px;
	padding: 8px 16px;
	font-size: 14px;
	color: #089fff;
	background: #e6f3ff;
	font-weight: 500;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.ts img {
	width: 24px;
	height: 24px;
}
.ts .flex-1 {
	padding: 0 8px;
}
.ts .btn {
	width: 94px;
	height: 28px;
	background-color: #089fff;
	line-height: 28px;
	font-size: 14px;
	color: #fff;
	border-radius: 3px;
	cursor: pointer;
	text-align: center;
}

.updateNotice ::v-deep .el-dialog {
	border-radius: 10px;
	.el-dialog__header {
		padding: 13px 20px;
		text-align: center;
		background-color: #3193fc;
		border-radius: 8px 8px 0 0;
		.el-dialog__title {
			font-size: 16px;
			color: #fff;
		}
		.el-icon-close {
			color: #fff;
		}
	}
	.el-dialog__body {
		padding: 20px 20px 30px 20px;
	}
	.el-dialog__footer {
		.dialog-footer {
			.is-round {
				padding: 10px 19px;
				border-radius: 15px;
			}
		}
	}
}

.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 10px;
	.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;
}
.rightexamineAndApproveList2 {
	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 0.5s;
}
.inCommonUseStyle b {
	transition: all 0.5s;
	color: #303133;
	font-size: 14px;
}
.inCommonUseStyle:hover {
	background-color: #fcfcfc;
	border: 1px solid #409eff;
}
.inCommonUseStyle:hover b {
	color: #409eff;
}
.announs {
	padding: 0 0 10px 0;
	border: 1px solid rgb(236, 236, 236);
	border-radius: 10px;
	overflow: hidden;
	cursor: default;
	// min-height: calc(60vh - 160px);
	margin: 10px 0 0 0;
}
::v-deep .announDetails {
	// max-height: 410px;
	// overflow-y: auto;
	// *{
	// 	color: #8c8c8c !important;
	// }
	// img{
	// 	width: 100% !important;
	// }
}
.announDetails {
	max-height: 410px;
	overflow-y: auto;
}
.announDetails::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}
.announDetails::-webkit-scrollbar-track {
	width: 6px;
	background-color: #fff0;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.announDetails::-webkit-scrollbar-thumb {
	background-color: #fff0;
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.announDetails:hover::-webkit-scrollbar-thumb {
	overflow-x: none;
	background-color: rgba(144, 147, 153, 0.3);
}
.announcementc {
	display: block;
	text-align: right;
	font-size: 13px;
	color: #909399;
	cursor: pointer;
}
.announcementc:hover {
	color: #409eff;
}
.announcementc:active {
	color: #409eff;
}
</style>