<template>
	<div style="font-size: 14px;" class="padding-xs">
		<div class="margin-bottom-xs">
			<el-radio-group v-model="engRadio" size="small">
				<el-radio-button label="0">发电机组1</el-radio-button>
				<el-radio-button style="border-left: var(--el-border);" label="1" class="margin-lr-xs">发电机组2</el-radio-button>
				<el-radio-button style="border-left: var(--el-border);" label="2">发电机组3</el-radio-button>
			</el-radio-group>
		</div>
		<el-row :gutter="5">
			<el-col :xs="24" :span="5">
				<el-card class="box-card" :body-style="{ padding: '0' }">
					<div class="square">发电机功率</div>
					<roundbDashChart :name="`enginePower`" style="height: calc(26vh - 30px);" :data="engineData[engRadio]['enginePower']"/>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="5">
				<el-card class="box-card" :body-style="{ padding: '0' }">
					<div class="square">发电机转速</div>
					<specialDashChart :name="`engineSpeed`" style="height: calc(26vh - 30px);" :data="engineData[engRadio]['engineSpeed']"/>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="5">
				<el-card class="box-card" :body-style="{ padding: '0' }">
					<div class="square">增压器转速</div>
					<specialDashChart :name="`shipBooster`" style="height: calc(26vh - 30px);" :data="engineData[engRadio]['boosterSpeed']"/>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="5">
				<el-card class="box-card" :body-style="{ padding: '0' }">
					<div class="square">启动空气压力</div>
					<gaugeDashChart :name="`shipGas`" style="height: calc(26vh - 30px);" :data="engineData[engRadio]['shipGas']"/>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="4">
				<el-card class="box-card" :body-style="{ padding: '0' }">
					<div class="square">关键参数</div>
					<div style="height: calc(26vh - 30px);padding: 10% 0;" class="flex align-center justify-center text-bold">
						<div class="flex-direction flex justify-between" style="height:100%;">
							<div class="flex align-center">
								<svg-icon icon-class="dianliu" class="text-df text-blue" style="vertical-align: middle;"/>
								<text class="margin-left-sm">发电机电流：</text>
								<text class="text-blue">100</text>
								<text class="margin-left-xs text-xs" style="font-weight: 200;">A</text>
							</div>
							<div class="flex align-center">
								<svg-icon icon-class="dianya" class="text-df text-blue" style="vertical-align: middle;"/>
								<text class="margin-left-sm">发电机电压：</text>
								<text class="text-blue">100</text>
								<text class="margin-left-xs text-xs" style="font-weight: 200;">V</text>
							</div>
							<div class="flex align-center">
								<svg-icon icon-class="frequency" class="text-df text-blue" style="vertical-align: middle;"/>
								<text class="margin-left-sm">发电机频率：</text>
								<text class="text-blue">100</text>
								<text class="margin-left-xs text-xs" style="font-weight: 200;">HZ</text>
							</div>
							<div class="flex align-center">
								<svg-icon icon-class="wendu" class="text-xl text-blue" style="vertical-align: middle;"/>
								<text class="margin-left-sm">轴承温度：</text>
								<text class="text-blue">100</text>
								<text class="margin-left-xs text-xs" style="font-weight: 200;">℃</text>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="18">
				<el-card class="box-card margin-top-xs" :body-style="{ padding: '0' }">
					<div class="square">发电机结构图</div>
					<div class="flex align-center justify-center" style="height: calc(74vh - 154px);">
						<el-image :src="shipEngineImg" style="width: 84%;"></el-image>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :span="6">
				<el-card class="box-card margin-top-xs" :body-style="{ padding: '0' }">
					<div class="square">报警信息</div>
					<div style="height:  calc(74vh - 154px);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>
	</div>
</template>

<script setup>
	const store = useStore();   
	const { proxy } = getCurrentInstance();
	const engRadio = ref(0);
	import shipEngineImg from "@/assets/images/shipEngine.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";
	const data = reactive({
		engineData: [{
			enginePower: { value: 83.4, name: "功率", unit: "kw", scalc: "90%", max: 600},
			engineSpeed: { 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},
			
		},{
			enginePower: { value: 56.03, name: "功率", unit: "kw", scalc: "90%", max: 600},
			engineSpeed: { 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},
		},{
			enginePower: { value: 24.6, name: "功率", unit: "kw", scalc: "90%", max: 600},
			engineSpeed: { value: 1867.6, name: "发电机转速", unit: "r/min", max: 2000},
			boosterSpeed: { value: 2684.1, name: "增压器转速", unit: "r/min", max: 2000},
			shipGas: { value: 6.5, name: "启动空气压力", unit: "", scalc: "90%", max: 10},
		}]
	 });
	 const {
	 	engineData
	 } = 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;
	}
	.el-radio-button__inner{
		border-left: var(--el-border);
	}
</style>
