<template>
	<div class="flex justify-center align-center">
		<!-- <el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }"> -->
			<div class="flex align-center" style="height: calc(100vh - 135px);width: 66%;position: relative;">
				<el-image style="width: 100%;" class="margin-top-xl" :src="propulsionImg"></el-image>
				<div style="position: absolute;top: 0;left: 0;width: 100%;" class="flex">
					<el-card :body-style="{ padding: '10px !important' }">
						<template #header>
							<span class="text-bold text-bGray">燃油系统</span>
						</template>
						<div class="text-sm text-bGray">
							<div>进机压力：<span class="text-purple text-bold text-xl margin-left">463.1</span> Mpa</div>
							<div class="margin-top-sm">进机温度：<span class="text-purple text-bold text-xl margin-left">121.2</span> ℃</div>
						</div>
					</el-card>
					<el-card style="margin-left: calc(4% + 20px)" :body-style="{ padding: '10px !important' }">
						<template #header>
							<span class="text-bold text-bGray">滑油系统</span>
						</template>
						<div class="text-sm text-bGray">
							<div>进机压力：<span class="text-purple text-bold text-xl margin-left">463.1</span> Mpa</div>
							<div class="margin-top-sm">进机温度：<span class="text-purple text-bold text-xl margin-left">121.2</span> ℃</div>
						</div>
					</el-card>
				</div>
				<div class="flex" :style="btem.style" v-for="(btem, bndex) in realData.dataBear" :key="bndex">
					<el-card :body-style="{ padding: '10px !important' }">
						<template #header>
							<span class="text-bold text-bGray">{{ btem.name }}</span>
						</template>
						<div class="text-sm text-bGray">
							<div :class="bsndex>0?'margin-top-sm':''" v-for="(bstem,bsndex) in btem.data" :key="bsndex">
								{{ bstem.name }}：
								<span class="text-purple text-bold text-xl margin-left">{{ bstem.value }}</span> 
								{{ bstem.unit }}
							</div>
						</div>
					</el-card>
				</div>
				<div class="text-sm text-black" v-for="(ctem,cndex) in realData.dataCool" :key="cndex"
					:style="ctem.style">
					<div class="flex text-bold" :class="rndex>0?'margin-top-xs':''" v-for="(rtem,rndex) in ctem.rows" :key="rndex">
						<el-tooltip class="item" effect="dark" :content="rtem.name" placement="top">
							<div class="ellipsis">{{rtem.name}}：</div>
						</el-tooltip>
						<div class="text-center flex justify-between" style="width: 61%;">
							<div class="bg-blue radius" style="padding: 3px 0;width: 13%;" v-for="(stem,sndex) in rtem.data" :key="sndex">
								{{stem.value}}
							</div>
						</div>
					</div>
				</div>
				<div class="text-sm text-black" style="position: absolute;left: -6.5%;bottom:29.5%;width: 48%;">
					<div class="flex text-bold" :class="index>0?'margin-top-sm':''" v-for="(item,index) in realData.dataPiston" :key="index">
						<el-tooltip class="item" effect="dark" :content="item.name" placement="top">
							<div class="ellipsis">{{item.name}}：</div>
						</el-tooltip>
						<div class="text-center flex justify-between" style="width: 61%;">
							<div class="bg-blue radius" style="padding: 3px 0;width: 13%;" v-for="(ditem,dindex) in item.data" :key="dindex">
								{{ditem.value}}
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- </el-card> -->
	</div>
</template>

<script setup>
	import { reactive } from "vue";
	const { proxy } = getCurrentInstance();
	import propulsionImg from "@/assets/images/propulsion.png";
	const realData = computed(() => {
		let _obj = {
			dataBear: [{
				name: "涡轮增压器",
				style: { position: 'absolute', right: 0, top: ' 18%', width: '45%' },
				data: [{
					name: "进气温度",
					value: 123.2,
					unit: "℃"
				},{
					name: "出气温度",
					value: 123.2,
					unit: "℃"
				}]
			},{
				name: "推力轴承",
				style: { position: 'absolute', right: 0, bottom:' 44%', width: '33%' },
				data: [{
					name: "滑油压力",
					value: 123.2,
					unit: "Mpa"
				},{
					name: "滑油温度",
					value: 123.2,
					unit: "℃"
				}]
			},{
				name: "主轴承",
				style: { position: 'absolute', right: 0, bottom: '11%', width: '48%' },
				data: [{
					name: "轴转速",
					value: 123.2,
					unit: "RPM"
				},{
					name: "滑油温度",
					value: 123.2,
					unit: "℃"
				},{
					name: "滑油压力",
					value: 123.2,
					unit: "Mpa"
				}]
			}],
			dataCool: [{
				style: { position: 'absolute', left: '-10%', bottom: '63%', width: '48%' },
				rows: [{
					name: "气缸排气温度（℃）",
					data: [{
						name: "1#缸",
						value: 123.2,
						unit: "℃"
					},{
						name: "2#缸",
						value: 123.2,
						unit: "℃"
					},{
						name: "3#缸",
						value: 123.2,
						unit: "℃"
					},{
						name: "4#缸",
						value: 123.2,
						unit: "℃"
					},{
						name: "5#缸",
						value: 123.2,
						unit: "℃"
					},{
						name: "6#缸",
						value: 123.2,
						unit: "℃"
					}]
				},{
					name: "冷却水出口温度（℃）",
					data: [{
						name: "1#冷却水",
						value: 123.2,
						unit: "℃"
					},{
						name: "2#冷却水",
						value: 123.2,
						unit: "℃"
					},{
						name: "3#冷却水",
						value: 123.2,
						unit: "℃"
					},{
						name: "4#冷却水",
						value: 123.2,
						unit: "℃"
					},{
						name: "5#冷却水",
						value: 123.2,
						unit: "℃"
					},{
						name: "6#冷却水",
						value: 123.2,
						unit: "℃"
					}]
				}]
			},{
				style: { position: 'absolute', left: '-8.5%', bottom: '55%', width: '48%' },
				rows: [{
					name: "冷却水进口温度（℃）",
					data: [{
						name: "1#冷却水",
						value: 123.2,
						unit: "℃"
					},{
						name: "2#冷却水",
						value: 123.2,
						unit: "℃"
					},{
						name: "3#冷却水",
						value: 123.2,
						unit: "℃"
					},{
						name: "4#冷却水",
						value: 123.2,
						unit: "℃"
					},{
						name: "5#冷却水",
						value: 123.2,
						unit: "℃"
					},{
						name: "6#冷却水",
						value: 123.2,
						unit: "℃"
					}]
				},{
					name: "冷却水进口压力（MPa）",
					data: [{
						name: "1#冷却水",
						value: 123.2,
						unit: "MPa"
					},{
						name: "2#冷却水",
						value: 123.2,
						unit: "MPa"
					},{
						name: "3#冷却水",
						value: 123.2,
						unit: "MPa"
					},{
						name: "4#冷却水",
						value: 123.2,
						unit: "MPa"
					},{
						name: "5#冷却水",
						value: 123.2,
						unit: "MPa"
					},{
						name: "6#冷却水",
						value: 123.2,
						unit: "MPa"
					}]
				}]
			}],
			dataPiston: [{
				name: "扫气箱温度（℃）",
				data: [{
					name: "1#扫气箱",
					value: 123.2,
					unit: "℃"
				},{
					name: "2#扫气箱",
					value: 123.2,
					unit: "℃"
				},{
					name: "3#扫气箱",
					value: 123.2,
					unit: "℃"
				},{
					name: "4#扫气箱",
					value: 123.2,
					unit: "℃"
				},{
					name: "5#扫气箱",
					value: 123.2,
					unit: "℃"
				},{
					name: "6#扫气箱",
					value: 123.2,
					unit: "℃"
				}]
			},{
				name: "活塞冷却油进口压力（Mpa）",
				data: [{
					name: "1#活塞",
					value: 123.2,
					unit: "Mpa"
				},{
					name: "2#活塞",
					value: 123.2,
					unit: "Mpa"
				},{
					name: "3#活塞",
					value: 123.2,
					unit: "Mpa"
				},{
					name: "4#活塞",
					value: 123.2,
					unit: "Mpa"
				},{
					name: "5#活塞",
					value: 123.2,
					unit: "Mpa"
				},{
					name: "6#活塞",
					value: 123.2,
					unit: "Mpa"
				}]
			},{
				name: "活塞冷却油进口温度（℃）",
				data: [{
					name: "1#活塞",
					value: 123.2,
					unit: "℃"
				},{
					name: "2#活塞",
					value: 123.2,
					unit: "℃"
				},{
					name: "3#活塞",
					value: 123.2,
					unit: "℃"
				},{
					name: "4#活塞",
					value: 123.2,
					unit: "℃"
				},{
					name: "5#活塞",
					value: 123.2,
					unit: "℃"
				},{
					name: "6#活塞",
					value: 123.2,
					unit: "℃"
				}]
			},{
				name: "活塞冷却油出口温度（℃）",
				data: [{
					name: "1#活塞",
					value: 123.2,
					unit: "℃"
				},{
					name: "2#活塞",
					value: 123.2,
					unit: "℃"
				},{
					name: "3#活塞",
					value: 123.2,
					unit: "℃"
				},{
					name: "4#活塞",
					value: 123.2,
					unit: "℃"
				},{
					name: "5#活塞",
					value: 123.2,
					unit: "℃"
				},{
					name: "6#活塞",
					value: 123.2,
					unit: "℃"
				}]
			}]
		};
		return _obj;
	})
	const data = reactive({
		
	});
	const {  } = toRefs(data);
</script>


<style scoped lang="scss">
	.ellipsis{
		width: 39%;
		padding-right: 5%;
		color: var(--bGray);
		text-align: right;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
</style>