s
<template>
	<div class="leftBottom">
		<div class="header">
			<div class="hLeft">项目人员考勤</div>
		</div>
		<div class="content">
			<div class="contentTop">
				<div class="line1">
					<span>出勤人员总数:</span>
					<!-- <div class="numberCard" v-for="(item,i) in '0234'" :key="i">{{item}}</div> -->
					<div class="numberCard" v-for="(item, i) in totalPerson" :key="i">{{ item }}</div>
					<span style="margin-left: 15px">考勤日环比</span>
					<div style="display: flex" v-if="typeof totalPersonRhbRatio == 'undefined'">
						<div class="dayRadio">0%</div>
					</div>
					<!-- <div style="display:flex" v-if="!totalPersonRhbRatio">
						<div class="dayRadio">0%</div>
					</div> -->
					<div style="display: flex" v-if="totalPersonRhbRatio > 0">
						<div class="dayRadio">{{ totalPersonRhbRatio }}%</div>
						<div class="iconCenter">
							<el-icon size="20" color="#1E90FF"><Top /></el-icon>
						</div>
					</div>
					<div style="display: flex" v-if="totalPersonRhbRatio == 0">
						<!-- <div class="dayRadio">{{totalPersonRhbRatio}}%</div> -->
						<div class="dayRadio">0%</div>
					</div>
					<div style="display: flex" v-if="totalPersonRhbRatio < 0">
						<div class="dayRadio">{{ Math.abs(totalPersonRhbRatio) }}%</div>
						<div class="iconCenter">
							<el-icon size="20" color="#8B0000"><Bottom /></el-icon>
						</div>
					</div>
				</div>
				<div class="line2">
					<div :class="['line2Item', activeIndex == 0 ? 'activeTab' : '']" @click="handleTab(0)">总包出勤情况分析</div>
					<div :class="['line2Item', activeIndex === 1 ? 'activeTab' : '']" @click="handleTab(1)">人员风险趋势分析</div>
				</div>
				<div class="barContent1" v-if="activeIndex == 0">
					<div class="barContent" v-if="isFlag">
						<div id="bar" style="width: 98%; height: 100%" ref="bar"></div>
					</div>
					<div class="cbProcess" v-if="!isFlag">
						<div class="notoDta" v-if="projectCompanyWorkTotalList.length == 0">
							<img src="@/assets/images/noData.png" style="margin-top: 100px" alt="" />
							<p>暂无数据</p>
						</div>
					</div>
				</div>
				<div class="barContent1" v-else-if="activeIndex == 1">
					<radarMapOption @openRadarDialog="openDialogData" :randerInfo="randerInfo" />
				</div>
			</div>
			<div class="centerBottom">
				<div class="cbTop">
					<div class="header"><div class="hLeft">进度情况分析</div></div>
					<div class="content" style="backgound: black">
						<div class="cbLine1">
							<div style="display: flex">
								<span>项目总进度:</span>
								<div class="numberCard" v-for="(item, i) in projectTotalProgress" :key="i">{{ item }}</div>
								<span style="margin-left: 5px">%</span>
							</div>
							<div style="display: flex">
								<span style="margin-left: 15px">项目剩余天数</span>
								<div class="numberCard" v-for="(item, i) in projectSurplusDayNum" :key="i">{{ item }}</div>
								<span style="margin-left: 5px">天</span>
							</div>
						</div>
						<div class="cbProcess" v-if="processList.length >= 5">
							<!-- v-if="listData.length>0" :list="listData"  -->
							<vue3-seamless-scroll
								v-if="processList.length > 0"
								:list="processList"
								:speed="1"
								:limitScrollNum="5"
								:step="0.3"
								:hover="true"
								class="scroll"
							>
								<div class="pItem" v-for="(item, i) in processList" :key="i">
									<div class="pLeft">
										<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
											<span style="margin-left: 10px">Top{{ i + 1 }}</span>
										</span>
									</div>
									<div class="pRight">
										<div class="prTop">
											<div class="prtLeft">{{ item.enterpriseName }}</div>
											<div class="prtRight">{{ item.changeAfter }}%</div>
										</div>
										<div class="prBottom">
											<div class="processLineBg">
												<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
													<div class="processLineBtn"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</vue3-seamless-scroll>
						</div>
						<div class="cbProcess" v-else-if="processList.length == 0">
							<div class="notoDta" v-if="processList.length == 0">
								<img src="@/assets/images/noData.png" alt="" />
								<p>暂无数据</p>
							</div>
						</div>
						<div class="cbProcess" v-else>
							<!-- v-if="listData.length>0" :list="listData"  -->
							<!-- <vue3-seamless-scroll 
							v-if="processList.length>0" :list="processList" 
							:speed="1" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll"> -->
							<div class="pItem" v-for="(item, i) in processList" :key="i">
								<div class="pLeft">
									<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
										<span style="margin-left: 10px">Top{{ i + 1 }}</span>
									</span>
								</div>
								<div class="pRight">
									<div class="prTop">
										<div class="prtLeft">{{ item.enterpriseName }}</div>
										<div class="prtRight">{{ item.changeAfter }}%</div>
									</div>
									<div class="prBottom">
										<div class="processLineBg">
											<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
												<div class="processLineBtn"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- </vue3-seamless-scroll> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import * as echarts from "echarts";
// import ECharts from "vue-echarts";
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
import {
	getPersonTypeAndEduStatisticsApi,
	queryAttendanceOfEachCompanyApi,
	getCountTaskProgressApi,
	queryCountEnterpriseApi,
	getWorkerRiskByProjectApi,
	getWorkerRiskByEnterpriseApi
} from "@/api/modules/agjtCommandApi";
import type { TabsPaneContext, ElMessageBox } from "element-plus";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { GlobalStore } from "@/stores";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
const store = GlobalStore();

const randerInfo = reactive({
	id: "radarMap1",
	isLegend: "right",
	radarCenter: ["34%", "50%"],
	radius: "65%",
	dataList: [
		{
			value: [0, 0, 0, 0, 0, 0],
			name: "项目人员风险"
			// areaStyle: {}
		}
	],
	indicator: [
		{ name: "高龄人员总数", max: 1 },
		{ name: "人员总数", max: 1 },
		{ name: "未闭合隐患", max: 1 },
		{ name: "特殊工种人员", max: 1 },
		{ name: "平均安全绩效评分", max: 1 },
		{ name: "平均培训通过率", max: 1 }
	],
	titleInfo: {
		titleLeft: "未来三天人员风险概率预测",
		titleRight: "查看各企业人员风险概率预测",
		percentage: 0
	},
	workerFlag: true,
	workerList: [] as any[]
});
const emits = defineEmits(["openDialog"]);

// 打开弹窗
const openDialogData = async () => {
	console.log("我打开了!!!!!!!!!!11");
	// 人员风险趋势
	const res: any = await getWorkerRiskByEnterpriseApi(
		{
			projectSn: store.sn
		},
		false
	);
	const resultList = [] as any[];
	if (res.result) {
		console.log("人员风险趋势", res.result);
		res.result.forEach((item: any, index: number) => {
			resultList.push({
				id: `list${index}`,
				radius: "70%",
				isLegend: "top",
				radarCenter: ["50%", "60%"],
				dataList: [
					{
						value: [item.age, 1, item.safe, item.workerType, item.security, item.exam],
						name: item.enterpriseName
						// areaStyle: {}
					}
				],
				indicator: [
					{ name: "高龄人员总数", max: 1 },
					{ name: "人员总数", max: 1 },
					{ name: "未闭合隐患", max: 1 },
					{ name: "特殊工种人员", max: 1 },
					{ name: "平均安全绩效评分", max: 1 },
					{ name: "平均培训通过率", max: 1 }
				],
				titleInfo: {
					titleLeft: "未来三天人员风险概率预测",
					// titleRight: "查看各企业应急事故风险概率预测",
					percentage: item.area
				},
				workerFlag: true,
				workerList: [item.age, item.total, item.safe, item.workerType, item.security, item.exam]
			});
		});
	}
	const resultInfo = {
		index: 11,
		title: "总包单位人员风险概率分析",
		radarType: 1,
		randerList: resultList
	};
	emits("openDialog", resultInfo);
};
const activeName = ref("总包出勤情况分析");
const activeIndex = ref(0 as any);
//出勤人员数据
let totalPerson = ref("" as any);
//考勤日环比
let totalPersonRhbRatio = ref("" as any);
//获取出勤人员数据/考勤日环比
const getPersonTypeAndEduStatistics = async (showLoading: boolean) => {
	const res: any = await getPersonTypeAndEduStatisticsApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		totalPerson.value = res.result.personType.attendancePerson.totalPerson;
		// if(totalPerson.value.length < 4){
		// 	let temp = 4-totalPerson.value.length
		// 	for(let i = 0;i<temp;i++){
		// 		totalPerson.value = "0" + totalPerson.value
		// 	}
		// }
		totalPersonRhbRatio.value = res.result.personType.attendancePerson.totalPersonRhbRatio;
	}
};

//总包出勤情况分析数据列表
let projectCompanyWorkTotalList = ref([] as any);
let xData = ref([] as any);
let yData = ref([] as any);
//获取总包出勤情况分析数据
let isFlag = ref(true as any);
const queryAttendanceOfEachCompany = async (showLoading: boolean) => {
	const res: any = await queryAttendanceOfEachCompanyApi(
		{
			projectSn: store.sn,
			isCountMainEnterprise: 1
		},
		showLoading
	);
	if (res.result) {
		projectCompanyWorkTotalList.value = res.result.projectCompanyWorkTotalList;
		xData.value = projectCompanyWorkTotalList.value.map(item => item.enterpriseName.substring(0, 4));
		yData.value = projectCompanyWorkTotalList.value.map(item => item.attendancePersonNum);
		if (projectCompanyWorkTotalList.value.length > 0) {
			isFlag.value = true;
			drawBar();
		} else {
			isFlag.value = false;
		}
	}
};

//切换tab
const handleTab = (val: number) => {
	if (isFlag.value && activeIndex.value == 1) {
		activeIndex.value = val;
		queryAttendanceOfEachCompany(false);
	} else if (activeIndex.value == 0) {
		getWorkerRiskByProject(false, 1);
	}
};

//绘画柱状图
function drawBar() {
	type EChartsOption = echarts.EChartsOption;
	let chartDom = document.getElementById("bar")!;
	let myChart = echarts.init(chartDom);
	let option: EChartsOption;

	option = {
		xAxis: {
			type: "category",
			// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			data: xData.value,
			axisLabel: {
				fontSize: 12, // 设置字体大小为12px
				// rotate: 45,
				interval: 0 // 显示所有标签
			},
			axisLine: {
				lineStyle: {
					// color: 'white' // 设置X轴刻度线的颜色为白色
					color: "rgba(200,200,200,1)"
				}
			}
		},
		yAxis: {
			type: "value",
			axisLabel: {
				fontSize: 12 // 设置字体大小为12px
			},
			axisLine: {
				lineStyle: {
					// color: 'white' // 设置Y轴刻度线的颜色为白色
					color: "rgba(200,200,200,1)"
				}
			},
			// show:false
			splitLine: {
				show: true,
				lineStyle: {
					// type: 'dashed', //y轴分割线类型
					type: "solid", //y轴实线类型
					color: "rgba(102,102,102,0.25)",
					width: 2.5
				}
			}
		},
		dataZoom: [
			{
				type: "slider",
				start: 0,
				end: 40,
				width: "98%",
				height: 5,
				left: "center",
				bottom: 3
			}
		],
		grid: {
			top: "8%",
			right: "0",
			left: "8%",
			bottom: "10%"
		},
		series: [
			{
				// data: [120, 200, 150, 80, 70, 110, 130],
				data: yData.value,
				type: "bar",
				barWidth: 20,
				itemStyle: {
					color: "#3398DB" // 设置柱状图颜色为蓝色
				},
				emphasis: {
					itemStyle: {
						// color: '#8B0000' // 设置鼠标悬浮时的颜色为深红色
						// color: '#ff6b70' // 设置鼠标悬浮时的颜色为水红色
						color: "#00008B" // 设置鼠标悬浮时的颜色为深蓝色
					}
				}
			}
		],
		tooltip: {
			borderColor: "rgba(50,50,50, 0.5)",
			backgroundColor: "rgba(50,50,50, 0.5)",
			textStyle: { color: "#fff", fontSize: "15" },
			formatter: function (params) {
				// 出勤率
				let attendanceRate = projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonRate;
				if (!attendanceRate) {
					attendanceRate = "--";
				} else {
					attendanceRate = attendanceRate + "%";
				}
				// 出勤率日环比
				let attendanceRhbRate = projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonRhbRate;
				if (!attendanceRhbRate) {
					attendanceRhbRate = "--";
				} else {
					if (attendanceRhbRate > 0)
						attendanceRhbRate = "<span style='color:blue;margin-right:5px'>↑</span>" + Math.abs(attendanceRhbRate) + "%";
					if (attendanceRhbRate < 0)
						attendanceRhbRate = "<span style='color:darkred;margin-right:5px'>↓</span>" + Math.abs(attendanceRhbRate) + "%";
					if (attendanceRhbRate == 0) attendanceRhbRate = "0%";
					// attendanceRhbRate = attendanceRhbRate + "%";
				}
				return (
					'<div style="font-weight:bold">' +
					params.name +
					"</div>" +
					'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#1E90FF">●</span>在册人员：' +
					projectCompanyWorkTotalList.value[params.dataIndex].totalPersonNum +
					"</div>" +
					'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#4682B4">●</span>出勤人员总数：' +
					projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonNum +
					"</div>" +
					'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#87CEFA">●</span>出勤率：' +
					attendanceRate +
					"</div>" +
					'<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#00BFFF">●</span>出勤率日环比：' +
					attendanceRhbRate +
					"</div>"
				);

				// '<div style="line-height:23px"><span style="font-size:16px;margin-right:5px;color:#87CEFA">●</span>出勤率：'+projectCompanyWorkTotalList.value[params.dataIndex].attendancePersonRate+'%</div>' +
			}
		}
	};
	// window.addEventListener('resize',function(){
	//       myChart.resize()
	//   })

	option && myChart.setOption(option);
}

//进度数据
let listData = ref([
	{ a: "新地能源工程技术有限公司", b: "54" },
	{ a: "中冶沈勘秦皇岛工程设计研究总院有限公司", b: "23" },
	{ a: "鞍山电力实业有限公司", b: "49" },
	{ a: "鞍钢矿业资源利用（鞍山）有限公司", b: "35" },
	{ a: "上海建工五建集团有限公司", b: "34" },
	{ a: "辽宁普凡建设有限公司", b: "67" },
	{ a: "沈阳隆基电磁科技股份有限公司", b: "56" },
	{ a: "中国科学院过程工程研究所", b: "78" },
	{ a: "宏大爆破工程集团有限责任公司", b: "45" },
	{ a: "鞍钢集团矿业设计研究院有限公司", b: "23" },
	{ a: "辽宁电力能源发展集团监理有限公司鞍山分公司", b: "69" },
	{ a: "辽宁五寰特种材料与智能装备产业技术研究院有限公司", b: "27" },
	{ a: "中铝山东工程技术有限公司", b: "59" },
	{ a: "中国华冶科工集团有限公司", b: "14" },
	{ a: "沈阳岩土工程技术测试开发有限公司", b: "38" },
	{ a: "永明项目管理有限公司", b: "41" }
] as any);

// 进度情况分析
// 项目总进度
let projectTotalProgress = ref("" as any);
// 项目剩余天数
let projectSurplusDayNum = ref({} as any);
// 获取项目总进度/项目剩余天数
const getCountTaskProgress = async (showLoading: boolean) => {
	const res: any = await getCountTaskProgressApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		projectTotalProgress.value = res.result.projectTotalProgress + "";
		projectSurplusDayNum.value = res.result.projectSurplusDayNum + "";
	}
};
// 总包进度列表
let processList = ref([] as any);
// 获取总包进度列表
const queryCountEnterprise = async (showLoading: boolean) => {
	const res: any = await queryCountEnterpriseApi(
		{
			projectSn: store.sn,
			isCountMainEnterprise: 1
		},
		showLoading
	);
	if (res.result) {
		processList.value = res.result;
	}
};
// 人员风险趋势
const getWorkerRiskByProject = async (showLoading: boolean, val: number) => {
	const res: any = await getWorkerRiskByProjectApi(
		{
			projectSn: store.sn
		},
		showLoading
	);
	if (res.result) {
		console.log("人员风险趋势", res.result);
		randerInfo.dataList[0].value = [
			res.result.age,
			1,
			res.result.safe,
			res.result.workerType,
			res.result.security,
			res.result.exam
		];
		randerInfo.workerList = [
			res.result.age,
			res.result.total,
			res.result.safe,
			res.result.workerType,
			res.result.security,
			res.result.exam
		];
		randerInfo.titleInfo.percentage = res.result.area;
	}
	activeIndex.value = val;
};

const setIntervalFn = (showLoading: boolean) => {
	// drawBar()
	getPersonTypeAndEduStatistics(showLoading);
	if (activeIndex.value == 0) {
		queryAttendanceOfEachCompany(showLoading);
	}
	getCountTaskProgress(showLoading);
	queryCountEnterprise(showLoading);
};
onMounted(async () => {
	setIntervalFn(false);
	// 定时三十秒刷新
	setInterval(() => {
		setIntervalFn(true);
	}, 30000);
});
</script>

<style lang="scss" scoped>
.leftBottom {
	background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
	background-size: 100% 100%;
	height: 100%;

	.header {
		display: flex;
		justify-content: space-between;
		padding: 10px 20px;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #0059ff;
		.hLeft {
			width: 50%;
			font-size: 20px;
			font-weight: bold;
			background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}
	}

	.content {
		// background-color: darkred;
		height: 92.5%;
		.contentTop {
			padding: 0 10px;
			height: 50%;
			// background-color: #fff;
			font-size: 13px;
			.line1 {
				color: #fff;
				padding-top: 5px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				line-height: 30px;
				height: 30px;
				font-size: 15px;
				.numberCard {
					font-size: 15px;
					padding: 0 8px;
					margin-left: 3px;
					font-weight: bold;
					color: #47bcec;
					background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
					background-size: 100% 100%;
				}
				.dayRadio {
					font-size: 15px;
					margin-left: 15px;
					font-weight: bold;
					color: #47bcec;
				}
				.iconCenter {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.line2 {
				padding-top: 5px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				line-height: 25px;
				height: 25px;
				.line2Item {
					color: #fff;
					width: 140px;
					text-align: center;
					cursor: pointer;
					// background-color: #fff;
					background: rgb(0, 33, 116);
					background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
				}
				.activeTab {
					background: rgb(0, 33, 116);
					background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
				}
			}

			.barContent1 {
				height: calc(100% - 65px);
				.barContent {
					height: 100%;
				}
			}
		}

		.centerBottom {
			height: 50%;
			position: relative;

			.cbTop {
				width: 100%;
				height: 100%;

				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// padding: 20px 20px;
					border-bottom: 1px solid #0059ff;

					.hLeft {
						width: 50%;
						font-size: 20px;
						font-weight: bold;
						background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
						-webkit-background-clip: text;
						background-clip: text;
						color: transparent;
					}
				}

				.content {
					padding: 0 10px;
					height: 90%;
					// background-color: rgba($color: #fff, $alpha: 0.1);
					.cbLine1 {
						color: #fff;
						padding-top: 5px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						line-height: 30px;
						height: 30px;
						font-size: 15px;
						.numberCard {
							font-size: 15px;
							padding: 0 8px;
							margin-left: 3px;
							font-weight: bold;
							color: #47bcec;
							background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
							background-size: 100% 100%;
						}
					}
					.cbProcess {
						padding-top: 5px;
						height: calc(100% - 55px);
						overflow: hidden;
						// background-color: #fff;
						.pItem {
							width: 100%;
							height: 55px;
							display: flex;
							// background-color: #fff;
							font-size: 13px;
							color: #fff;
							.pLeft {
								width: 20%;
								height: 55px;
								display: flex;
								justify-content: center;
								align-items: center;
								.plInner {
									width: 80px;
									// text-align: center;
									line-height: 30px;
									// background-color: darkred;
									border-radius: 100px;
								}
							}
							.pRight {
								width: 80%;
								height: 55px;
								.prTop {
									// background-color: darkblue;
									display: flex;
									justify-content: space-between;
									height: 30px;
									.prtLeft {
										display: flex;
										justify-content: center;
										align-items: flex-end;
									}
									.prtRight {
										display: flex;
										justify-content: center;
										align-items: flex-end;
									}
								}
								.prBottom {
									// background-color: purple;
									height: 15px;
									.processLineBg {
										background-color: rgba(50, 50, 50, 0.5);
										// transform: scaleX(-1);
										.processLine {
											margin-top: 10px;
											// padding-top: 10px;
											height: 5px;
											display: flex;
											justify-content: flex-end;
											.processLineBtn {
												width: 3px;
												height: 9px;
												background: #fff;
												transform: translateY(-2px);
											}
										}
										// .plBgc1{
										// 	background: rgb(150,0,0);
										// 	background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
										// }
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
.scroll {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.notoDta {
	top: 35%;
	width: 50%;
	// left: 40%;
	position: absolute;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);

	img {
		width: 40%;
		margin: 5% 30%;
	}

	p {
		color: #fff;
		font-size: calc(100vw * 14 / 1920);
		margin: -6% 30%;
	}
}
.plBgc1 {
	background: rgb(139, 0, 0);
	background: linear-gradient(90deg, rgba(139, 0, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc1 {
	background: rgb(139, 0, 0);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 0, 1) 100%);
}
.plBgc2 {
	background: rgb(155, 155, 0);
	background: linear-gradient(90deg, rgba(155, 155, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc2 {
	background: rgb(155, 155, 0);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(155, 155, 0, 1) 100%);
}
.plBgc3 {
	background: rgb(0, 0, 139);
	background: linear-gradient(90deg, rgba(0, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc3 {
	background: rgb(0, 0, 139);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 0, 139, 1) 100%);
}
.plBgc4 {
	background: rgb(139, 0, 139);
	background: linear-gradient(90deg, rgba(139, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc4 {
	background: rgb(139, 0, 139);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 139, 1) 100%);
}
.plBgc5 {
	background: rgb(72, 61, 139);
	background: linear-gradient(90deg, rgba(72, 61, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc5 {
	background: rgb(72, 61, 139);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(72, 61, 139, 1) 100%);
}
.plBgc6 {
	background: rgb(0, 206, 209);
	background: linear-gradient(90deg, rgba(0, 206, 209, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc6 {
	background: rgb(0, 206, 209);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 206, 209, 1) 100%);
}
.plBgc7 {
	background: rgb(47, 79, 79);
	background: linear-gradient(90deg, rgba(47, 79, 79, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc7 {
	background: rgb(47, 79, 79);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(47, 79, 79, 1) 100%);
}
.plBgc8 {
	background: rgb(0, 100, 0);
	background: linear-gradient(90deg, rgba(0, 100, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc8 {
	background: rgb(0, 100, 0);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 100, 0, 1) 100%);
}
.plBgc9 {
	background: rgb(189, 183, 107);
	background: linear-gradient(90deg, rgba(189, 183, 107, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc9 {
	background: rgb(189, 183, 107);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(189, 183, 107, 1) 100%);
}
.plBgc10 {
	background: rgb(255, 140, 0);
	background: linear-gradient(90deg, rgba(255, 140, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc10 {
	background: rgb(255, 140, 0);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(255, 140, 0, 1) 100%);
}
.plBgc11 {
	background: rgb(233, 150, 122);
	background: linear-gradient(90deg, rgba(233, 150, 122, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc11 {
	background: rgb(233, 150, 122);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(233, 150, 122, 1) 100%);
}
.plBgc0 {
	background: rgb(0, 139, 139);
	background: linear-gradient(90deg, rgba(0, 139, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc0 {
	background: rgb(0, 139, 139);
	background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 139, 139, 1) 100%);
}
</style>