<template>
	<div class="threshold-container">
		<div class="top">
			<div class="mapleft">

				<!-- 地图 -->
				<div class="tabBox">
					<!-- <BigMap /> -->
				</div>

			</div>
			<div class="mapright">
				<div class="title">
					<img src="@/assets/map/yujing.png" alt="">
					<span class="ml5">预警图标</span>
				</div>
				<div>
					<ul>
						<li v-for="it in yjzblist" :key="it" class="libox">
							<div style="width: 78%;">
								<div class="name">{{ it.name }}</div>
								<div class="num">{{ it.num }}</div>
							</div>
							<div class="iconmg">
								<img src="@/assets/map/yujing.png" alt="">
							</div>

						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="btom">
			<ul class="one">
				<li v-for="item in list" :key="item" class="ont_li">
					<span style="font-size: 15px;font-weight: 600;">{{ item.title }}</span>
					<div v-for="it in item.lists" :key="it" class="mt10 boxss">
						<span class="coubox">{{ it.name }}</span><span class="szbox">{{ it.num }}</span>
					</div>
				</li>
			</ul>
		</div>



	</div>
</template>

<script setup>
// 引入
import { onMounted, ref, onBeforeUnmount } from "vue";
// import BigMap from "@/components/Map/yjMap.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { useRouter } from "vue-router";
const router = useRouter();
import { useStore } from "vuex";
const store = useStore();
const yjzblist = ref([
	{ name: '安全工程师岗位聘任比率', num: '6.93%' },
	{ name: '专职驾驶员体检率', num: '2.93%' },
	{ name: '电工体检率', num: '6.93%' },
	{ name: '安全协议签订率', num: '6.93%' },
	{ name: '相关方资质符合率', num: '6.93%' },
	{ name: '使用超过8年车辆占比', num: '6.93%' },
	{ name: '较大风险（橙区）现状风险单元数量', num: '6.93%' },
	{ name: '隐患按期整改率', num: '6.93%' },
])
const list = ref([
	{ title: '安全管理队伍', lists: [{ name: '安全管理人员数占比', num: '1.67%' }] },
	{ title: '建筑物', lists: [{ name: '安全管理人员数占比', num: '1.67%' }, { name: '安全管理人员数占比', num: '1.67%' }] },
	{ title: '职业健康', lists: [{ name: '安全管理人员数占比', num: '1.67%' }] },
	{ title: '道路交通', lists: [{ name: '安全管理人员数占比', num: '1.67%' }] },
])
onMounted(() => {

});

</script>

<style lang="scss" scoped>
.threshold-container {
	background: #f0f3fa;
}

.top {
	height: calc(100vh - 359px);
	display: flex;
}

.mapleft {
	width: 58%;

	.tabBox {
		height: calc(100vh - 359px);
	}
}

.mapright {
	width: 42%;
	padding: 10px;
	background-color: #fff;

	.title {

		font-size: 18px;
		color: #000;
	}

	ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
}



.libox {
	width: 215px;
	display: flex;
	justify-content: space-between;
	background: rgba(243, 198, 183, 0.5607843137);
	padding: 10px;
	margin: 8px;

	.name {
		font-size: 14px;
		color: #000;
	}

	.num {
		font-size: 20px;
		color: red;
	}

	.iconmg {
		>img {
			height: 31px;
		}

	}

}

.one {
	display: flex;
	justify-content: start;

	.ont_li {
		padding: 10px;
		margin: 10px;
		background: #ffffff7a;
		color: #000;
		height: 159px;
	}
}

.coubox {
	display: inline-block;
	width: 60%;
	overflow: hidden; // 溢出隐藏
	white-space: nowrap; // 强制一行
	text-overflow: ellipsis; // 文字溢出显示省略号
}

.szbox {
	color: var(--el-color-primary);
	font-size: 15px;
	font-weight: 600;
}

.boxss {
	display: flex;
	justify-content: space-between;
	background: linear-gradient(378deg, #a8e3f5 0%, #c7ebf13d 100%);
	padding: 5px;
}
</style>
