<template>
	<div style="font-size: 14px;" class="padding-xs">
		<div class="margin-bottom-xs">
			<el-radio-group v-model="hostRadio" size="small">
				<el-radio-button label="0">左主机</el-radio-button>
				<el-radio-button style="border-left: var(--el-border);" label="1" class="margin-left-xs">右主机</el-radio-button>
			</el-radio-group>
		</div>
		<el-row :gutter="5">
			<el-col :xs="24" :span="14">
				<el-card class="box-card" :body-style="{ padding: '0' }">
					<div class="square">主机结构图</div>
					<div class="flex align-center justify-center" style="height: calc(70vh - 154px);">
						<el-image :src="shipHostImg" style="height: 94%;"></el-image>
					</div>
				</el-card>
				<el-card class="box-card margin-top-xs" :body-style="{ padding: '0' }">
					<div class="square">排气口温差</div>
					<barChart :name="`milEage`" style="height: calc(30vh - 30px);" :data="hostData[hostRadio]['pqTemp']" />
				</el-card>
			</el-col>
			<el-col :xs="24" :span="10">
				<el-row :gutter="5">
					<el-col :xs="24" :span="12">
						<el-card class="box-card" :body-style="{ padding: '0' }">
							<div class="square">主机转速</div>
							<specialDashChart :name="`hostSpeed`" style="height: calc(35vh - 93px);" :data="hostData[hostRadio]['hostSpeed']"/>
						</el-card>
					</el-col>
					<el-col :xs="24" :span="12">
						<el-card class="box-card" :body-style="{ padding: '0' }">
							<div class="square">启动空气压力</div>
							<gaugeDashChart :name="`shipGas`" style="height: calc(35vh - 93px);" :data="hostData[hostRadio]['shipGas']"/>
						</el-card>
					</el-col>
					<el-col :xs="24" :span="12" class="margin-top-xs">
						<el-card class="box-card" :body-style="{ padding: '0' }">
							<div class="square">主机功率</div>
							<roundbDashChart :name="`hostPower`" style="height: calc(35vh - 93px);" :data="hostData[hostRadio]['hostPower']"/>
						</el-card>
						<el-card class="box-card margin-top-xs" :body-style="{ padding: '0' }">
							<div class="square">轴转速</div>
							<specialDashChart :name="`shipBooster`" style="height: calc(30vh - 30px);" :data="hostData[hostRadio]['boosterSpeed']"/>
						</el-card>
					</el-col>
					<el-col :xs="24" :span="12">
						<el-card class="box-card margin-top-xs" :body-style="{ padding: '0' }">
							<div class="square">主机报警信息</div>
							<div style="height:  calc(70vh - 130px);padding: 30px 20px 10px;overflow-y: auto;" class="text-sm">
								<div class="flex align-center"><text class="text-xxl margin-right text-green">●</text><text>进机温度报警</text></div>
								<div class="flex align-center"><text class="text-xxl margin-right text-green">●</text><text>进机温度过高</text></div>
								<div class="flex align-center"><text class="text-xxl margin-right text-red">●</text><text>出机温度报警</text></div>
								<div class="flex align-center"><text class="text-xxl margin-right text-green">●</text><text>出机温度过高</text></div>
								<div class="flex align-center"><text class="text-xxl margin-right text-green">●</text><text>低温水进口压力报警</text></div>
								<div class="flex align-center"><text class="text-xxl margin-right text-green">●</text><text>后进气温度报警</text></div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	const store = useStore();   
	const { proxy } = getCurrentInstance();
	const hostRadio = ref(0);
	import shipHostImg from "@/assets/images/shipHost.png";
	import roundbDashChart from "@/components/Echarts/Dashboard/roundbDashChart.vue";
	import specialDashChart from "@/components/Echarts/Dashboard/specialDashChart.vue";
	import gaugeDashChart from "@/components/Echarts/Dashboard/gaugeDashChart.vue";
	import barChart from "@/components/Echarts/warmBarChart";
	const data = reactive({
		hostData: [{
			hostPower: { value: 83.4, name: "功率", unit: "kw", scalc: "90%", max: 600},
			hostSpeed: { value: 1053.4, name: "发电机转速", unit: "r/min", max: 2000},
			boosterSpeed: { value: 1053.4, name: "增压器转速", unit: "r/min", max: 2000},
			shipGas: { value: 7, name: "启动空气压力", unit: "", scalc: "90%", max: 10},
			pqTemp: {
				xAxis: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号'],
				data: [45.4, 69.4, 40.6, -54.4, -34.4, 15.4, 29.4, 15.6, 34.4, 61.4],
				show: true,
				splitShow: false,
				unit: "℃",
				title: "排气口温差"
			}
		},{
			hostPower: { value: 56.03, name: "功率", unit: "kw", scalc: "90%", max: 600},
			hostSpeed: { value: 0, name: "发电机转速", unit: "r/min", max: 2000},
			boosterSpeed: { value: 2607.5, name: "增压器转速", unit: "r/min", max: 2000},
			shipGas: { value: 2.6, name: "启动空气压力", unit: "", scalc: "90%", max: 10},
			pqTemp: {
				xAxis: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号'],
				data: [15.4, 29.4, 60.6,-34.4, 55.4, 29.4, 35.6, 34.4, -44.4, 61.4],
				show: true,
				splitShow: false,
				unit: "℃",
				title: "排气口温差"
			}
		}]
	 });
	 const {
	 	hostData
	 } = toRefs(data);
</script>

<style lang='scss' scoped>
	.warnDrog{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		padding-top:10px;
		&::after{
			content: "";
			position: absolute;
			top: 0;
			left: 10%;
			width: 80%;
			opacity: 0.2;
			border-top: 1px solid var(--el-text-color-primary);
		}
	}
	.aisNum {
		font-weight: bold;
		color: #fbbd08;
		font-size:20px;
	}
	
</style>
