dd_pc/src/screen.vue

<template>
	<div style="height: 100%;width: 100%;">
		<div class="screenBox back" v-if="isPCa">
			<el-alert v-if="isShowError" :title="errorMsg"  type="error"></el-alert>
			<div v-if="result.company" style="height: 100%;">
				<header>
					<div style="height: 3rem;padding: 0  2rem;font-size: 20px;" class="zhuColor flex-box-ce">
						<div class="flex-1 flex-box-ce">
							<img :src="result.company.logo" class="logo" />
							<div>{{ result.company.name }}</div>
						</div>
						<div style="width: 400px;"></div>
						<div class="flex-1 flex-box-end flex-box-ce">
							<div>{{ nowTime }}</div>
							<el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
								<!-- <i class="el-icon-help" style="cursor: pointer;" @click="fullScreen"></i> -->
								<img src="./assets/image/qp.png" class="logo" style="width: 24px;height: 24px;margin-left: 10px;cursor: pointer;" @click="fullScreen"/>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="退出" placement="bottom">
								<img src="./assets/image/quit.png" class="logo" style="width: 24px;height: 24px;margin-left: 10px;cursor: pointer;" @click="quit"/>
							</el-tooltip>
						</div>
					</div>
					<div class="zhuColor title" style="width: 400px;margin: 0 auto;height: 20px;text-align: center;">
						<span>{{ result.title }}</span>
					</div>
				</header>
				<div style="height: 10px;"></div>
				<div class="flex-box" style="height: calc(100% - 128px);padding: 16px;padding-bottom: 0;">
					<div class="flex-2 box" id="left">
						<div class="boxTitle">{{ result.ranking.name }}</div>
						<div class="ranking" style="border-radius: 8px;margin: 16px;margin-top: 0px;">
							<template v-if="result.ranking.list.length>0">
								<div style="margin-bottom: 8px;border-radius: 8px;box-shadow: 0 8px 8px #191E48;margin-top: 16px;">
									<div v-for="(item, index) in ranking(result.ranking.list, 1)" :key="index" class="flex-box-ce rankingItem">
										<div class="flex-1 flex-box-ce">
											<template v-if="item.rank < 4">
												<div v-if="item.rank == 1" class="index"><img src="./assets/image/1.png" /></div>
												<div v-if="item.rank == 2" class="index"><img src="./assets/image/2.png" /></div>
												<div v-if="item.rank == 3" class="index"><img src="./assets/image/3.png" /></div>
											</template>
											<userImage :user_name="item.employee.name" :img_url="item.employee.img_url" width="54px" height="54px" style="margin: 0 18px;"></userImage>
											<div>
												<div style="font-size: 20px;margin-bottom: 5px;">{{ item.employee.name }}</div>
												<div class="fontColorT" style="font-size: 14px;" v-if="item.dept_list.length>0">
													{{item.dept_list[0].dept_name}} <span v-if="item.dept_list.length>1">...</span>
												</div>
											</div>
										</div>
										<div class="num">{{ item.s_point }}</div>
									</div>
								</div>
								<vue-seamless-scroll :data="result.ranking.list" class="seamless-warp" :style="{height:h1+'px'}" :class-option="classOption">
									<div v-for="(item, index) in ranking(result.ranking.list, 2)" :key="index" class="flex-box-ce rankingItem">
										<div class="flex-1 flex-box-ce">
											<div style="font-size: 20px;width: 36px;text-align: center;">{{ item.rank }}</div>
											<userImage :user_name="item.employee.name" :img_url="item.employee.img_url" width="54px" height="54px" style="margin: 0 18px;"></userImage>
											<div>
												<div style="font-size: 20px;margin-bottom: 5px;">{{ item.employee.name }}</div>
												<div class="fontColorT" style="font-size: 14px;" v-if="item.dept_list.length>0">
													{{item.dept_list[0].dept_name}}<span v-if="item.dept_list.length>1">...</span>
												</div>
											</div>
										</div>
										<div class="num">{{ item.s_point }}</div>
									</div>
								</vue-seamless-scroll>
							</template>
							<div v-else style="height: 200px;text-align: center;line-height: 200px;color: #fff;">
								暂无数据
							</div>
						</div>
					</div>
					<div class="flex-3" style="margin: 0 16px;height: 100%;">
						<div class="flex-box-ce numBox" style="margin-bottom: 16px;">
							<div class="flex-1 flex-box-v flex-center-center" style="border-radius: 12px;margin-right: 16px;background-image: linear-gradient(to top, #2537F7 0%, #258CF6 100%);" @click="endVal = 5123">
								<div style="font-size: 2rem;margin-bottom: 1rem;">今日奖分</div>
								<div style="font-size: 4.2rem;font-weight: 600;letter-spacing:8px;position: relative;">
									<countTo :startVal="startVal" separator="" :endVal="result.center.all_add_point" :duration="3000"></countTo>
								</div>
							</div>
							<div class="flex-1 flex-box-v flex-center-center" style="border-radius: 12px;background-image: linear-gradient(to top, #6342E9 0%, #8468F3 100%);">
								<div style="font-size: 2rem;margin-bottom: 1rem;">今日人次</div>
								<div style="font-size: 4.2rem;font-weight: 600;letter-spacing:8px">
									<countTo :startVal="startVal" separator="" :endVal="result.center.count" :duration="3000"></countTo>
								</div>
							</div>
						</div>
						<div style="background-color: rgba(23, 30, 72, 0.3); border-radius: 8px;position: relative;">
							<div class="boxTitle" style="margin-bottom: 30px;">积分制运用活跃度</div>
							<div class="flex-box-ce" style="position: absolute;color:#fff;font-size:16px;right: 20px;top:108px">
								<span style="height: 2px;width: 30px;background-color: #E6A23C;"></span>
							基准标尺</div>
							<div ref="ManagerSAwardChart" class="chart" :style="{height:h2+'px'}"></div>
						</div>
					</div>
					<div class="flex-2 box">
						<div class="boxTitle">{{ result.event.name }}</div>
						<div class="ranking">
							<template v-if="result.event.list.length">
								<vue-seamless-scroll :data="returnEvent(result.event.list)" class="seamless-warp" style="margin: 16px;" :style="{height:h3+'px'}" :class-option="classOption">
									<div v-for="(item, index) in returnEvent(result.event.list)" :key="item.id" class="flex-box rankingItem" style="margin-bottom: 10px;background-color: #1B3A70">
										<div class="main-right flex-1">
											<div class="context">{{ $moment.unix(item.event_time).format('YYYY-MM-DD') }}-{{ item.remark.customize ? item.remark.customize : item.remark.rule }}</div>
											<div class="flex-box flex-v-ce">
												<div class="name flex-1">{{ item.employee.name }}</div>
												<div class="da" v-if="item.point > 0">+{{ item.point }}  <span style="color: #01EEFE;">{{ item.pt_id == 3 ? 'B分' : 'A分' }}</span></div>
												<div class="red da" v-else>{{ item.point }}  <span style="color: #01EEFE;">{{ item.pt_id == 3 ? 'B分' : 'A分' }}</span></div>
											</div>
										</div>
									</div>
								</vue-seamless-scroll>
							</template>
							<div v-else style="height: 200px;text-align: center;line-height: 200px;color: #fff;">
								暂无数据
							</div>
						</div>
					</div>
				</div>
				<div  style="text-align: center;padding: 6px 0;font-size: 16px;color: #ccc;">@功道云积分制-提供技术支持</div>
			</div>
			<div class="data-all" v-else style="height: 100%;">
				<i class="el-icon-loading" style="margin-top: 15%;width: 150px;margin-bottom: 10px;color: #fff;font-size: 64px;"></i>
				<div style="color: #fff;">管理执行难，就用功道云</div>
			</div>
			<el-dialog title="输入密码" :visible.sync="isShowCode" width="450px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
				<div style="margin: 10px 0;">
					<el-input style="width: 300px;" v-model="code" placeholder="请输入随机密码"></el-input>
					<div class="yellow">密码可在系统后台 “访问大屏” 功能中获取</div>
				</div>
				<div class="flex-box-end"><el-button type="primary" :disabled="isShowlog" :loading="isShowlog" @click="opneWebSocket()">确定</el-button></div>
			</el-dialog>
		</div>
		<div v-else style="height: 100%;" class="back">
			<el-alert v-if="isShowError" :title="errorMsg"  type="error"></el-alert>
			<div v-if="result.company" style="height: 100%;">
				<header>
					<div style="height: 2.4rem;padding: 0 1rem;font-size: 14px;" class="zhuColor flex-box-ce">
						<div class="flex-1 flex-box-ce">
							<img :src="result.company.logo" class="logo" style="width: 1.4rem;height: 1.4rem;" />
							<div>{{ result.company.name }}</div>
						</div>
						<div style="width: 260px;"></div>
						<div class="flex-1 flex-box-end flex-box-ce">
							<div>{{ nowTime }}</div>
							<el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
								<img src="./assets/image/qp.png" class="logo" style="width: 24px;height: 24px;margin-left: 10px;cursor: pointer;" @click="fullScreen"/>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="退出" placement="bottom">
								<img src="./assets/image/quit.png" class="logo" style="width: 24px;height: 24px;margin-left: 10px;cursor: pointer;" @click="quit"/>
							</el-tooltip>
						</div>
					</div>
					<div class="zhuColor title2" style="width: 260px;margin: 0 auto;height: 14px;text-align: center;">
						<span style="font-size: 20px;top: -1rem;">{{ result.title }}</span>
					</div>
				</header>
				<div style="height: 10px;"></div>
				<div class="flex-box" style="height: calc(100% - 92px);padding: 0 10px;">
					<div class="flex-2 box" id="left">
						<div class="boxTitle2">{{ result.ranking.name }}</div>
						<div class="ranking" style="border-radius: 8px;margin: 10px;">
							<template v-if="result.ranking.list.length>0">
								<div style="box-shadow: 0 5px 5px #1d2242;margin-bottom: 5px;border-radius: 8px;">
									<div v-for="(item, index) in ranking(result.ranking.list, 1)" :key="index" class="flex-box-ce rankingItem">
										<div class="flex-1 flex-box-ce">
											<template v-if="item.rank < 4">
												<div v-if="item.rank == 1" class="index2"><img src="./assets/image/1.png" /></div>
												<div v-if="item.rank == 2" class="index2"><img src="./assets/image/2.png" /></div>
												<div v-if="item.rank == 3" class="index2"><img src="./assets/image/3.png" /></div>
											</template>
											<userImage :user_name="item.employee.name" :img_url="item.employee.img_url" width="30px" height="30px" style="margin: 0 6px;"></userImage>
											<div>
												<div style="font-size: 14px;">{{ item.employee.name }}</div>
												<div class="fontColorT" style="font-size: 12px;margin-top: 5px;" v-if="item.dept_list.length>0">
													{{item.dept_list[0].dept_name}} <span v-if="item.dept_list.length>1">...</span>
												</div>
											</div>
										</div>
										<div class="num" style="font-size: 14px;">{{ item.s_point }}</div>
									</div>
								</div>
								<vue-seamless-scroll :data="result.ranking.list" class="seamless-warp" :style="{height:h4+'px'}" :class-option="classOption">
									<div v-for="(item, index) in ranking(result.ranking.list, 2)" :key="index" class="flex-box-ce rankingItem">
										<div class="flex-1 flex-box-ce">
											<div style="font-size: 14px;width: 1.4rem;text-align: center;">{{ item.rank }}</div>
											<userImage :user_name="item.employee.name" :img_url="item.employee.img_url" width="30px" height="30px" style="margin: 0 6px;"></userImage>
											<div>
												<div style="font-size: 14px;">{{ item.employee.name }}</div>
												<div class="fontColorT" style="font-size: 12px;margin-top: 5px;" v-if="item.dept_list.length>0">
													{{item.dept_list[0].dept_name}} <span v-if="item.dept_list.length>1">...</span>
												</div>
											</div>
										</div>
										<div class="num" style="font-size: 14px;">{{ item.s_point }}</div>
									</div>
								</vue-seamless-scroll>
							</template>
							<div v-else style="height: 200px;text-align: center;line-height: 200px;color: #fff;">
								暂无数据
							</div>
						</div>
					</div>
					<div class="flex-3" style="margin: 0 10px;height: 100%;">
						<div class="flex-box-ce numBox" style="margin-bottom: 10px">
							<div class="flex-1 flex-box-v flex-center-center" style="border-radius: 12px;margin-right: 16px;background-image: linear-gradient(to top, #2537F7 0%, #258CF6 100%);height: 5rem;" @click="endVal = 5123">
								<div style="font-size: 0.9rem;margin-bottom: 0.4rem;">今日奖分</div>
								<div style="font-size: 2rem;font-weight: 600;letter-spacing:8px;position: relative;">
									<countTo :startVal="startVal" separator="" :endVal="result.center.all_add_point" :duration="3000"></countTo>
								</div>
							</div>
							<div class="flex-1 flex-box-v flex-center-center" style="border-radius: 12px;background-image: linear-gradient(to top, #6342E9 0%, #8468F3 100%);height: 5rem;">
								<div style="font-size: 0.9rem;margin-bottom: 0.4rem;">今日人次</div>
								<div style="font-size: 2rem;font-weight: 600;letter-spacing:8px">
									<countTo :startVal="startVal" separator="" :endVal="result.center.count" :duration="3000"></countTo>
								</div>
							</div>
						</div>
						<div style="background-color: rgba(23, 30, 72, 0.3); border-radius: 8px;position: relative;">
							<div class="boxTitle2" >积分制运用活跃度</div>
							<div class="flex-box-ce" style="position: absolute;color:#fff;font-size:12px;right: 10px;top:72px">
								<span style="height: 2px;width: 20px;background-color: #E6A23C;"></span>
							基准标尺</div>
							<div ref="ManagerSAwardChart" class="chart" style="position: relative;top: 20px;" :style="{height:h5+'px'}"></div>
						</div>
					</div>
					<div class="flex-2 box">
						<div class="boxTitle2">{{ result.event.name }}</div>
						<div class="ranking">
							<template v-if="result.event.list.length">
								<vue-seamless-scroll :data="returnEvent(result.event.list)" style="margin: 10px;" class="seamless-warp" :style="{height:h6+'px'}" :class-option="classOption">
									<div v-for="(item, index) in returnEvent(result.event.list)" :key="item.id" class="flex-box rankingItem" style="margin-bottom: 10px;background-color: #1B3A70">
										<div class="main-right2 flex-1">
											<div class="context">{{ $moment.unix(item.event_time).format('YYYY-MM-DD') }}-{{ item.remark.customize ? item.remark.customize : item.remark.rule }}</div>
											<div class="flex-box flex-v-ce">
												<div class="name flex-1">{{ item.employee.name }}</div>
												<div style="font-size: 16px;" v-if="item.point > 0">+{{ item.point }}  <span style="color: #01EEFE;">{{ item.pt_id == 3 ? 'B分' : 'A分' }}</span></div>
												<div style="font-size: 16px;" class="red " v-else>{{ item.point }}  <span style="color: #01EEFE;">{{ item.pt_id == 3 ? 'B分' : 'A分' }}</span></div>
											</div>
										</div>
									</div>
								</vue-seamless-scroll>
							</template>
							<div v-else style="height: 200px;text-align: center;line-height: 200px;color: #fff;">
								暂无数据
							</div>
						</div>
					</div>
				</div>
				<div  style="text-align: center;padding: 6px 0;font-size: 8px;color:#C0C4CC;">@功道云积分制-提供技术支持</div>
			</div>
			<div class="data-all" v-else style="height: 100%;">
				<i class="el-icon-loading" style="margin-top: 15%;width: 150px;margin-bottom: 10px;color: #fff;font-size: 64px;"></i>
				<div style="color: #fff;">管理执行难，就用功道云</div>
			</div>
			<el-dialog title="输入密码" :visible.sync="isShowCode" width="450px" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
				<div style="margin: 10px 0;">
					<el-input style="width: 300px;" v-model="code" placeholder="请输入随机密码"></el-input>
					<div class="yellow">密码可在系统后台 “访问大屏” 功能中获取</div>
				</div>
				<div class="flex-box-end"><el-button type="primary" :disabled="isShowlog" :loading="isShowlog" @click="opneWebSocket()">确定</el-button></div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
import ScaleBox from '@/components/ScaleBox.vue';
import countTo from 'vue-count-to';
export default {
	name: 'screen',
	components: { vueSeamlessScroll, ScaleBox, countTo },
	data() {
		return {
			startVal: 0,
			endVal: 321,
			nowTime: '',

			// 长连接结果
			result: {}, //提交的返回结果集合
			code: '',
			isShowCode: false,
			isDp:false,
			isShowlog:false,
			
			h1:'',
			h2:'',
			h3:'',
			errorMsg:'',
			isShowError:false,
			isPCa:true,
			h4:'',
			h5:'',
			h6:'',
			preview:false,
		};
	},
	computed: {
		classOption() {
			return {
				step: 0.5, // 数值越大速度滚动越快
				limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
				hoverStop: true, // 是否开启鼠标悬停stop
				direction: 1, // 0向下 1向上 2向左 3向右
				openWatch: true, // 开启数据实时监控刷新dom
				singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
				singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
				waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
			};
		}
	},
	created() {
		this.isPCa=this.IsPC()
	},
	mounted() {
		if(this.$route.query.preview){
			this.preview=true;
			this.isShowCode = true;
		}else{
			if (this.$getCache('code')) {
				this.code = this.$getCache('code');
				this.opneWebSocket()
			} else {
				this.isShowCode = true;
			}
		}
		this.nowTimes();
		window.addEventListener('resize', this.selfAdaption);
	},
	methods: {
		IsPC() {
		    var userAgentInfo = navigator.userAgent;
		    var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
		    var flag = true;
		    for (var v = 0; v < Agents.length; v++) {
		        if (userAgentInfo.indexOf(Agents[v]) > 0) {
		            flag = false;
		            break;
		        }
		    }
		    return flag;
		},
		quit(){
			if(!this.preview){
				this.$removeCache('code');
			}
			this.result={};
			this.code='';
			this.isShowCode = true;
			this.$socketApi.closewebsocket()
		},
		opneWebSocket() {
			this.isShowlog=true;
			this.$socketApi.closewebsocket()
			if (!this.code) {
				this.$message.error('请输入密码');
				this.isShowlog=false;
				return false;
			}
			this.$socketApi.sendData({ type: 'screen', code: this.code }, this.onmessageWS);
		},
		onmessageWS(e) {
			this.isShowlog=false;
			console.log(e);
			if (e.type == 'screen') {
				if (e.code != 1) {
					this.result={};
					if(e.code=='-2'||e.code=='-3'){
						if(!this.isShowCode){
							this.$alert('密码已被修改或过期，请重新输入密码', '密码错误', {
							  confirmButtonText: '确定',
							  callback: action => {
								this.isShowCode = true;
							  }
							});
						}else{
							this.$message.error('密码错误');
						}
					}
					if(e.code=='-4'){
						this.$message.error('窗口链接数量超过限制');
						this.quit();
					}
					
				} else {
					if(!this.preview){
						this.$setCache('code', this.code);
					}
					this.isShowCode = false;
					this.result = e.result.result;
					this.$nextTick(()=>{
						this.isPCa? this.ManagerSAwardCharts2():this.ManagerSAwardCharts()
						this.selfAdaption();
					})
					
				}
			}
			// 中途断开
			if (e.type == 'break'||e.type == 'error') {
				this.isShowError=true;
				this.errorMsg=e.msg;
				setTimeout(()=>{
					this.isShowError=false;
				},3000)
			}
		},
		//管理者奖扣统计
		ManagerSAwardCharts() {
			//管理着奖扣统计表
			const chart = this.$refs.ManagerSAwardChart;
			let ratio_date=this.result.active.list.ratio_date;
			let ratio_get=this.result.active.list.ratio_get;
			let ratio_set=this.result.active.list.ratio_set;
			if (chart) {
				const myChart = this.$echarts.init(chart);
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: function(a) {
						  let list = [];
						  let listItem = '';
						  for (var i = 0; i < a.length; i++) {
							list.push(
							  '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
								a[i].color +
								';margin-right: 5px;border-radius: 50%;}"></i><span style=" display:inline-block;">' +
								a[i].seriesName +
								'</span>&nbsp：' +
								a[i].value+'%'
							);
						  }
						  listItem = list.join('<br>');
						  return '<div class="showBox"><div>' + a[0].name + '</div>' + listItem + '</div>';
						}
					},
					legend: {
						textStyle: {
							color: '#fff',
							fontSize: '12',
							
						},
						left: '0%',
						// data:['上上周','上周','本周'],
						data: ratio_date
					},
					color: [
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{ offset: 0, color: '#F8E908' },{ offset: 1, color: '#19286D' }
							]
						},
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{ offset: 0, color: '#00F8FF' }, { offset: 1, color: '#19286D' }]
						},
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{ offset: 0, color: '#B117F1' }, { offset: 1, color: '#19286D' }]
						}
					],
					xAxis: {
						type: 'category',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff',
								fontSize: '12'
							}
						},
						data: ['获得积分的人员占比', '执行奖扣的管理者占比']
					},
					yAxis: {
						type: 'value',
						max: 100, //取100为最大刻度
						axisLabel: {
							show: true,
							formatter: '{value}%',
							textStyle: {
								color: '#fff'
							}
						}
					},

					series: [
						{
							type: 'bar',
							name: ratio_date[0],
							stack: 'Total',
							label: {
								show: true,
								position: 'top',
								color:'#fff',
								formatter: '{c}%',
								fontSize: '12'
							},
							data: [ratio_get[0], ratio_set[0]]
						},
						{
							type: 'bar',
							label: {
								show: true,
								position: 'top',
								color:'#fff',
								formatter: '{c}%',
								fontSize: '12'
							},
							name: ratio_date[1],
							data: [ratio_get[1], ratio_set[1]]
						},
						{
							type: 'bar',
							label: {
								show: true,
								position: 'top',
								color:'#fff',
								formatter: '{c}%',
								fontSize: '12'
							},
							name: ratio_date[2],
							data: [ratio_get[2], ratio_set[2]],
						},
						{
							type: 'bar',
							name: '大啊',
							data: [],
							markLine: {
								silent: true,
								data: [
									{
										silent: false, //鼠标悬停事件  true没有，false有
										lineStyle: {
											//警戒线的样式  ，虚实  颜色
											type: 'solid',
											color: '#E6A23C'
										},
										label: {
											position: 'end',
											formatter: '标尺',
											fontSize: '10'
										},
										// yAxis: 80
										yAxis: this.result.active.base_ratio // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
									}
								]
							}
						},
					]
				};
				myChart.setOption(option);
			}
		},
		//管理者奖扣统计
		ManagerSAwardCharts2() {
			//管理着奖扣统计表
			const chart = this.$refs.ManagerSAwardChart;
			let ratio_date=this.result.active.list.ratio_date;
			let ratio_get=this.result.active.list.ratio_get;
			let ratio_set=this.result.active.list.ratio_set;
			if (chart) {
				const myChart = this.$echarts.init(chart);
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						formatter: function(a) {
						  let list = [];
						  let listItem = '';
						  for (var i = 0; i < a.length; i++) {
							list.push(
							  '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
								a[i].color +
								';margin-right: 5px;border-radius: 50%;}"></i><span style=" display:inline-block;">' +
								a[i].seriesName +
								'</span>&nbsp：' +
								a[i].value+'%'
							);
						  }
						  listItem = list.join('<br>');
						  return '<div class="showBox"><div>' + a[0].name + '</div>' + listItem + '</div>';
						}
					},
					legend: {
						textStyle: {
							color: '#fff',
							fontSize: '16',
						},
						left: '3%',
						// data:['上上周','上周','本周'],
						data: ratio_date
					},
					color: [
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{ offset: 0, color: '#F8E908' },{ offset: 1, color: '#19286D' }
							]
						},
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{ offset: 0, color: '#00F8FF' }, { offset: 1, color: '#19286D' }]
						},
						{
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{ offset: 0, color: '#B117F1' }, { offset: 1, color: '#19286D' }]
						}
					],
					xAxis: {
						type: 'category',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#fff',
								fontSize: '16'
							}
						},
						data: ['获得积分的人员占比', '执行奖扣的管理者占比']
					},
					yAxis: {
						type: 'value',
						max: 100, //取100为最大刻度
						axisLabel: {
							show: true,
							formatter: '{value}%',
							textStyle: {
								color: '#fff'
							}
						}
					},
		
					series: [
						{
							type: 'bar',
							name: ratio_date[0],
							label: {
								show: true,
								position: 'top',
								formatter: '{c}%',
								color:'#fff',
								fontSize: '14'
							},
							data: [ratio_get[0], ratio_set[0]]
						},
						{
							type: 'bar',
							name: ratio_date[1],
							label: {
								show: true,
								position: 'top',
								formatter: '{c}%',
								color:'#fff',
								fontSize: '14'
							},
							data: [ratio_get[1], ratio_set[1]]
						},
						{
							type: 'bar',
							name: ratio_date[2],
							label: {
								show: true,
								position: 'top',
								formatter: '{c}%',
								color:'#fff',
								fontSize: '14'
							},
							data: [ratio_get[2], ratio_set[2]],
						},
						{
							type: 'bar',
							name: '大啊',
							data: [],
							markLine: {
								silent: true,
								data: [
									{
										silent: false, //鼠标悬停事件  true没有，false有
										lineStyle: {
											//警戒线的样式  ，虚实  颜色
											type: 'solid',
											color: '#E6A23C'
										},
										label: {
											position: 'end',
											formatter: '标尺',
											fontSize: '14'
										},
										// yAxis: 80
										yAxis: this.result.active.base_ratio // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
									}
								]
							}
						},
					]
				};
				myChart.setOption(option);
			}
		},
		//echarts自适应
		selfAdaption() {
			let height=document.getElementById('left').offsetHeight;
			this.h1=height-344;
			this.h2=height-358;
			this.h3=height-108;
			this.h4=height-234;
			this.h5=height-168;
			this.h6=height-72;
			this.$nextTick(()=>{
				var myChart1 = this.$echarts.init(this.$refs.ManagerSAwardChart);
				myChart1.resize();
			})
		},
		timeFormate(timeStamp) {
			let year = new Date(timeStamp).getFullYear();
			let month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
			let date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
			let hh = new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
			let mm = new Date(timeStamp).getMinutes() < 10 ? '0' + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
			let ss = new Date(timeStamp).getSeconds() < 10 ? '0' + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
			let week = new Date(timeStamp).getDay();
			let weeks = ['日', '一', '二', '三', '四', '五', '六'];
			let getWeek = '星期' + weeks[week];
			this.nowTime = year + '年' + month + '月' + date + '日' + ' ' + hh + ':' + mm + ':' + ss + ' ' + getWeek;
		}, // 实时刷新当前时间，格式化
		nowTimes() {
			this.timeFormate(new Date());
			setInterval(this.nowTimes, 1000);
			this.clear();
		},
		clear() {
			clearInterval(this.nowTimes);
			this.nowTimes = null;
		},
		fullScreen(){
			if(this.isDp){
				this.exitScreen();
				this.isDp=false;
				return false
			}
			this.isDp=true;
			var el = document.documentElement;
			var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
				if(typeof rfs != "undefined" && rfs) {
					rfs.call(el);
				};
			  return;
		},
		exitScreen(){
			if (document.exitFullscreen) {  
				document.exitFullscreen();  
			}  
			else if (document.mozCancelFullScreen) {  
				document.mozCancelFullScreen();  
			}  
			else if (document.webkitCancelFullScreen) {  
				document.webkitCancelFullScreen();  
			}  
			else if (document.msExitFullscreen) {  
				document.msExitFullscreen();  
			} 
			if(typeof cfs != "undefined" && cfs) {
				cfs.call(el);
			}
		},
		returnEvent(list) {
			return list;
		},
		ranking(arr, index) {
			if (index == 1) {
				return arr.filter(item => {
					return item.rank < 4;
				});
			} else {
				return arr.filter(item => {
					return item.rank >= 4;
				});
			}
		},
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.selfAdaption); //取消echarts自适应
		this.clear();
	}
};
</script>

<style scoped>
.back{
	background-image: url('assets/image/shuju.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}	
.da{
	font-size: 20px;
	font-weight: 700;
}	
.index2 img{
	width: 1.4rem !important;
	height: 1.4rem !important;
}	
.data-all{
	text-align: center;
}	
 html,body{
	  height: 100%;
 }
.barg {
	position: absolute;
}
.barg div {
	width: 1.4rem;
	height: 2.8rem;
	background-color: #1d2242;
	margin: 0 1rem;
	top: ;
}
.boxTitle {
	padding: 0.6rem 1.4rem;
	color: #fff;
	font-size: 22px;
	position: relative;
	background-color: #16215F;
	display: inline-block;
	border-radius: 25px;
	margin-left: 16px;
	padding-left: 50px;
	margin-top: 30px;
	box-shadow: 2px 0px 2px #ccc;
}
.boxTitle::before {
	content: ' ';
	position: absolute;
	height: 18px;
	width: 18px;
	background-color: #F8E908;
	border-radius: 25px;
	top: 16px;
	left: 20px;
}
.boxTitle::after {
	content: ' ';
	position: absolute;
	height: 3px;
	width: 150px;
	background-color: #03F4FD;
	top: -20px;
	left: 0px;
	border-radius: 2px;
}

.boxTitle2 {
	padding:0.4rem 0.8rem;
	color: #fff;
	font-size: 14px;
	position: relative;
	background-color: #16215F;
	display: inline-block;
	border-radius: 25px;
	margin-left: 10px;
	padding-left: 30px;
	margin-top: 20px;
	box-shadow: 2px 0px 2px #ccc;
}
.boxTitle2::before {
	content: ' ';
	position: absolute;
	height: 12px;
	width: 12px;
	background-color: #F8E908;
	border-radius: 25px;
	top: 10px;
	left: 10px;
}
.boxTitle2::after {
	content: ' ';
	position: absolute;
	height: 3px;
	width: 120px;
	background-color: #03F4FD;
	top: -14px;
	left: 0px;
	border-radius: 2px;
}
.chart {
	height: 480px;
}
.main-right {
	margin-left: 5px;
}
.main-right .name {
	font-size: 18px;
	color: #0DD3DB;
}
.main-right .context {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 20px;
	height: 50px;
	margin-bottom: 6px;
}
.main-right2 .date {
	color: #909399;
}
.main-right2 {
	margin-left: 5px;
}
.main-right2 .name {
	font-size: 14px;
	color: #0DD3DB;
}
.main-right2 .context {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	height: 40px;
	font-size: 16px;
	margin-bottom: 5px;
}
.main-right .date {
	color: #909399;
}
.numBox .flex-1 {
	height: 13rem;
	text-align: center;
	color: #fff;
	padding: 0.8rem;
}
.seamless-warp {
	/* padding: 10px; */
	overflow: hidden;
}
.num {
	font-size: 24px;
	font-weight: 700;
	color: #9ecef8;
}
.ranking {
	/* height: 100%; */
}
.rankingItem {
	color: #fff;
	border-radius: 8px;
	padding: 10px;
}
.rankingItem img {
	width: 30px;
	height: 30px;
}
.el-icon-help {
	font-size: 26px;
	margin-left: 10px;
}
.logo {
	width: 2.1rem;
	height: 2.1rem;
	margin-right: 10px;
	border-radius: 3px;
}
.box {
	background-color: rgba(23, 30, 72, 0.6);
	border-radius: 8px;
	height: 100%;
}
.screenBox {
	width: 100%;
	height: 100%;
	min-width: 1000px;
}
.zhuColor {
	background-color: #021D3B;
	box-shadow: 0px 2px 2px #01EEFE;
	position: relative;
	color: #fff;
}
.title span {
	color: #fff;
	font-size: 1.8rem;
	font-weight: 550;
	position: relative;
	top: -1.8rem;
}
.title::after {
	content: ' ';
	position: absolute;
	top: 0px;
	right: -15px;
	border-width: 20px 15px;
	border-style: solid;
	border-color: transparent transparent #021D3B transparent;
	transform: rotate(180deg);
}
.title::before {
	content: ' ';
	position: absolute;
	top: 0px;
	left: -15px;
	border-width: 20px 15px;
	border-style: solid;
	transform: rotate(180deg);
	border-color: transparent transparent #021D3B transparent;
}
.title2 span {
	color: #fff;
	font-size: 2rem;
	font-weight: 550;
	position: relative;
	top: -2.1rem;
}
.title2::after {
	content: ' ';
	position: absolute;
	top: 0px;
	right: -7px;
	border-width: 14px 7px;
	border-style: solid;
	border-color: transparent transparent #021D3B transparent;
	transform: rotate(180deg);
}
.title2::before {
	content: ' ';
	position: absolute;
	top: 0px;
	left: -7px;
	border-width: 14px 7px;
	border-style: solid;
	transform: rotate(180deg);
	border-color: transparent transparent #021D3B transparent;
}
</style>