<template>
	<view class="person_count">
		<view class="piece">
			<view class="user">
				<view class="img">王</view>
				<view class="info">
					<view class="name">王小虎</view>
					<view class="position">安检员·T3航站楼</view>
				</view>
			</view>
			<view class="cont">
				<view class="item" v-for="(item, index) in seizureData" :key="index">
					<view class="itm_title">{{ item.title }}</view>
					<view class="num">{{ item.count }}</view>
					<view class="item_text">
						<img src="" alt="" />
						<view class="text">{{ item.percentage }}%</view>
						<view class="compare">vs上月</view>
					</view>
				</view>
			</view>
		</view>
		<view class="piece">
			<view class="title">查获情况分析</view>
			<view class="top">
				<view>查获总数排名</view>
				<view>第8名/126人</view>
			</view>
			<view class="percentage"><u-line-progress :percentage="126/8" :showText="false"></u-line-progress></view>
			<view class="top_cont">
				<view id="top_Echart" class="top_Echart"></view>
			</view>
			<view class="top_cont">
				<view id="brokenLine" class="top_Echart"></view>
			</view>
		</view>
		<view class="piece">
			<view class="title">巡检与整改情况</view>
			<view class="top">
				<view>本月巡检记录</view>
				<view>5次</view>
			</view>
			<view class="cont_item" v-for="(item, index) in inspectionList" :key="index">
				<view class="left">
					<h4>{{ item.title }}</h4>
					<view class="time">检查时间：{{item.time}}</view>
					<view :style="item.status == '合格' ? 'color: green' : item.status == '待整改' ? 'color: red' : 'color: #ffaa00'" v-if="item.problem">问题：{{item.time}}</view>
				</view>
				<view class="right" :style="item.status == '合格' ? 'color: green' : item.status == '待整改' ? 'color: red' : 'color: #ffaa00'">{{ item.status }}</view>
			</view>
			<view class="top_cont">
				<view id="typeScatter" class="top_Echart"></view>
			</view>
		</view>
		<view class="piece">
			<view class="title">测试与培训情况</view>
			<view class="top">
				<view>综合成绩排名</view>
				<view>第12名/126人</view>
			</view>
			<view class="percentage"><u-line-progress :percentage="126/12" :showText="false"></u-line-progress></view>
			<view class="top_cont">
				<view id="knowledge_area" class="top_Echart"></view>
			</view>
			<view>
				<view class="title">最近三次测试成绩</view>
				<view class="top">
					<view>安检设备操作规范</view>
					<view>96分</view>
				</view>
				<view class="percentage"><u-line-progress :percentage="96" :showText="false"></u-line-progress></view>
				<view class="top">
					<view>违禁物品识别</view>
					<view>88分</view>
				</view>
				<view class="percentage"><u-line-progress activeColor="#ffaa00" :percentage="96" :showText="false"></u-line-progress></view>
				<view class="top">
					<view>应急处置流程</view>
					<view>92分</view>
				</view>
				<view class="percentage"><u-line-progress activeColor="#155DFF" :percentage="96" :showText="false"></u-line-progress></view>
			</view>
		</view>
		<view class="piece">
			<view class="title">个人发展建议</view>
			<view class="suggest" v-for="(item, index) in suggestList" :key="index">
				<view class="serial_num" :style="index == 0 ? 'background: blue' : (index == 1 ? 'background: red' :  'background: yellow')"></view>
				<view class="info">
					<view class="name">{{ item.suggestTitle }}</view>
					<view class="position">{{ item.suggestCont }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
  export default {
    data() {
      return {
        seizureData: [{
        	count: '1029',
        	title: '查获总数',
        	percentage: '23',
        	status: true
        }, {
        	count: '2',
        	title: '重大违禁品数',
        	percentage: '2',
        	status: false
        }, {
        	count: '2',
        	title: '巡检问题',
        	percentage: '33.3',
        	status: false
        }, {
        	count: '92',
        	title: '测试成绩',
        	percentage: '4.5',
        	status: false
        }],
				suggestList: [
					{
						url: '',
						suggestTitle: '保持优势',
						suggestCont: '您在金属物品识别和爆炸物检测方面表现出色，继续保持！建议您将经验分享给新同事，共同提升团队整体水平。'
					},
					{
						url: '',
						suggestTitle: '重点提升',
						suggestCont: '您在液态物品检测和电子设备检查环节还有提升空间。建议参加下周三的“新型液态违禁品识别”专项培训，并在日常工作中加强对电子设备复杂结构的检查。'
					},
					{
						url: '',
						suggestTitle: '即将开始的培训',
						suggestCont: '7月5日将开展“锂电池安全检查规范”培训，建议您报名参加，进一步提升相关领域知识水平。'
					},
				],
				inspectionList: [
					{
						title: '日常操作规范检查',
						status: '合格',
						time: '2025-06-12',
						problem: ''
					},
					{
						title: '设备使用规范检查',
						status: '待整改',
						time: '2025-06-15',
						problem: '金属探测器操作不规范'
					},
					{
						title: '安全意识抽查',
						status: '已整改',
						time: '2025-06-19',
						problem: '未及时记录特殊旅客信息'
					},
				],
				echart: null,
				chartOption: {
					title: {
						text: '查获物品分类',
						textStyle: {
							fontSize: 14
						},
						padding: [0, 14]
					},
					legend: {
						top: '8%',
						left: 'center'
					},
					series: [
						{
							name: '查获占比',
							type: 'pie',
							radius: ['40%', '70%'],
							center:['50%','60%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							data: [
								{ value: 1048, name: '金属物品' },
								{ value: 735, name: '液态物品' },
								{ value: 580, name: '锂电池' },
								{ value: 484, name: '其他违禁品' },
								{ value: 300, name: '管制刀具' }
							]
						}
					],
				},
				brokenLine: null,
				brokenLineOption: {
					title: {
						text: '月度查获趋势',
						textStyle: {
							fontSize: 14
						},
						padding: [20, 14, 0, 14]
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							data: ['1月', '2月', '3月', '4月', '5月', '6月']
						}
					],
					yAxis: [
						{
							type: 'value'
						}
					],
					series: [
						{
							name: '趋势',
							type: 'line',
							stack: 'Total',
							areaStyle: {},
							data: [100, 101, 98, 96, 99, 95]
						}
					]
				},
				typeScatter: null,
				typeScatterOption: {
					title: {
						text: '问题类型分布',
						textStyle: {
							fontSize: 14
						},
						padding: [20, 14, 0, 14]
					},
					grid: {
						left: '5%',
						right: '5%',
						bottom: '4%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['操作规范', '设备使用', '安全意识', '记录规范', '应急处置'],
						axisLabel: {
							interval: 0, // 控制标签的显示间隔，0表示全部显示
							margin: 10,
						}
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							data: [
								{
									value: 2,
									itemStyle: {
										color: '#FF5253'
									}
								},
								{
									value: 5,
									itemStyle: {
										color: '#FF5253'
									}
								},
								{
									value: 3,
									itemStyle: {
										color: '#FF5253'
									}
								},
								{
									value: 1,
									itemStyle: {
										color: '#FF5253'
									}
								},
								{
									value: 0,
									itemStyle: {
										color: '#FF5253'
									}
								},
							],
							type: 'bar'
						}
					]
				},
				knowledgeArea: null,
				knowledgeAreaOption: {
					title: {
						text: '知识领域得分',
						textStyle: {
							fontSize: 14
						},
						padding: [20, 14, 0, 14]
					},
					legend: {
						data: ['您的得分', '全站平均'],
						bottom: '5%',
						left: 'center'
					},
					radar: {
						indicator: [
							{ name: '安检设备操作', max: 100 },
							{ name: '安全法规知识', max: 100 },
							{ name: '旅客服务规范', max: 100 },
							{ name: '应急处置流程', max: 100 },
							{ name: '违禁物品识别', max: 100 },
						],
						center: ['50%', '50%'],
						radius: '50%',
						name: {
							// 修改指标名称的文本样式
							textStyle: {
								fontSize: 12, // 设置文字大小
								fontWeight: 'bold' // 设置文字粗细
							}
						}
					},
					series: [
						{
							name: 'Budget vs spending',
							type: 'radar',
							data: [
								{
									value: [80, 70, 75, 80, 80, 80],
									name: '您的得分',
									label: {
										show: true,
									},
									areaStyle: {
										color: '#a9bdff',
									},
									itemStyle: {
										color: 'blue',
									},
								},
								{
									value: [8, 50, 25, 70, 60, 80],
									name: '全站平均',
									label: {
										show: true,
									},
									areaStyle: {
										color: '#e6e6e6',
									},
									itemStyle: {
										color: '#ccc',
									},
								}
							]
						}
					]
				}
      }
    },
    mounted() {
			this.initEcharts();
    },
    methods: {
			// 初始化图表
      initEcharts() {
				this.echart = echarts.init(document.getElementById('top_Echart'));
				this.echart.setOption(this.chartOption);
				this.brokenLine = echarts.init(document.getElementById('brokenLine'));
				this.brokenLine.setOption(this.brokenLineOption);
				this.typeScatter = echarts.init(document.getElementById('typeScatter'));
				this.typeScatter.setOption(this.typeScatterOption);
				this.knowledgeArea = echarts.init(document.getElementById('knowledge_area'));
				this.knowledgeArea.setOption(this.knowledgeAreaOption);
			}
		}
  }
</script>

<style scoped lang="scss">
	.person_count {
		width: 100%;
		height: 100vh;
		.piece {
			width: 96%;
			margin-left: 2%;
			background: #fff;
			border-radius: 0.2rem;
			margin-top: 2%;
			padding-bottom: 0.5rem;
			.suggest {
				width: 100%;
				display: flex;
				padding: 0.5rem;
				&:last-child {
					padding-bottom: 2rem;
				}
				.serial_num {
					width: 0.5rem;
					border-radius: 5px;
				}
				.info {
					width: 90%;
					margin-left: 0.5rem;
					.name {
						font-size: 14px;
						font-weight: 700;
					}
					.position {
						font-size: 12px;
						color: #9c9c9c;
					}
				}
			}
			.user {
				width: 100%;
				height: 2.5rem;
				display: flex;
				padding: 0.5rem;
				.img {
					width: 2rem;
					height: 2rem;
					background: #E7EEFF;
					border-radius: 50%;
					color: blue;
					text-align: center;
					line-height: 2rem;
				}
				.info {
					margin-left: 0.5rem;
					.name {
						font-size: 14px;
						font-weight: 700;
					}
					.position {
						font-size: 12px;
						color: #9c9c9c;
					}
				}
			}
			.top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 0 1rem;
				font-size: 13px;
			}
			.cont_item {
				width: 96%;
				background: #EFF6FF;
				display: flex;
				justify-content: space-between;
				padding: 0.7rem;
				margin-top: 0.5rem;
				margin-left: 2%;
				line-height: 1.4rem;
				.left {
					.time {
						color: #9c9c9c;
						font-size: 13px;
					}
				}
				&:nth-child(4) {
					background: #FFF2F2;
				}
				&:nth-child(5) {
					background: #FEFBE8;
				}
			}
			.percentage {
				height: 2rem;
				padding: 0 1rem;
				display: flex;
				align-items: center;
			}
			.top_cont {
				width: 100%;
				display: flex;
				justify-content: center;
				.top_Echart {
					width: 100%;
					height: 30vh;
				}
			}
			.title {
				width: 100%;
				height: 2rem;
				line-height: 2rem;
				font-size: 14px;
				font-weight: 700;
				& {
					padding-left: 1rem;
				}
			}
			.cont {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				.item {
					width: 46%;
					margin: 2%;
					background: #E7EEFF;
					border-radius: 5%;
					padding: 0.3rem;
					line-height: 1.3rem;
					.itm_title {
						font-size: 12px;
						color: blue;
					}
					&:nth-child(2) {
						background: #FEF2F2;
						.itm_title {
							color: #ffaa00;
						}
					}
					&:nth-child(3) {
						background: #FEF2F2;
						.itm_title {
							color: #ca0000;
						}
					}
					&:nth-child(4) {
						background: #FBF5FF;
						.itm_title {
							color: #aa00ff;
						}
					}
					.num {
						font-size: 14px;
						font-weight: 700;
					}
					.item_text {
						display: flex;
						.text {
							font-size: 13px;
							color: #00ff00;
						}
						.compare {
							font-size: 12px;
							color: #949494;
							margin-left: 3px;
						}
					}
				}
			}
		}
	}
</style>