<template>
	<div class="margin-bottom">
		<el-row :gutter="20">
			<el-col :span="12" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<el-form ref="systemFormRef" :model="systemForm" label-width="100px" class="grid">
						<el-form-item label="系统选择：" class="flex-twice" style="margin-bottom: 8px;">
							<el-select v-model="systemForm.systemId" placeholder="请选择" size="small" style="width: 80%;">
								<el-option
								  v-for="item in systemOptions"
								  :key="item.value"
								  :label="item.label"
								  :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="时间范围：" class="flex-treble" style="margin-bottom: 8px;">
							<el-date-picker
							  v-model="systemForm.sendTime"
							  type="daterange"
							  size="small"
							  style="width: 80%;flex-grow: 0;box-shadow: 0 0 7px 2px #dcdcdc;"
							  range-separator=" - "
							  start-placeholder="开始日期"
							  end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<div class="flex-sub text-center">
							<el-button style="width: 80%;" type="primary" size="small">查询</el-button>
						</div>
					</el-form>
					<div style="position: relative;padding: 0 2%;">
						<div class="sTitleSty text-sm">温度</div>
						<line-chart name="HostTempl" :data="templData" height="calc(33.33vh - 88px)"/>
					</div>
					<div style="position: relative;padding: 0 2%;margin: 16px 0;">
						<div class="sTitleSty">压力</div>
						<line-chart name="HostPressure" :data="pressureData" height="calc(33.33vh - 88px)"/>
					</div>
					<div style="position: relative;padding: 0 2%;">
						<div class="sTitleSty">轴转速</div>
						<line-chart name="HostSpeed" :data="speedData" height="calc(33.33vh - 89px)"/>
					</div>
					<div class="margin-top-xs text-bold text-black">主机</div>
				</el-card>
			</el-col>
			<el-col :span="12" :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
				<el-card class="box-card cardSty" :body-style="{ padding: '10px !important' }">
					<el-form ref="equipFormRef" :model="equipForm" label-width="100px" class="grid">
						<el-form-item label="设备选择：" class="flex-twice" style="margin-bottom: 8px;">
							<el-select v-model="equipForm.equipId" placeholder="请选择" size="small" style="width: 80%;">
								<el-option
								  v-for="item in equipOptions"
								  :key="item.value"
								  :label="item.label"
								  :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="时间范围：" class="flex-treble" style="margin-bottom: 8px;">
							<el-date-picker
							  v-model="equipForm.sendTime"
							  type="daterange"
							  size="small"
							  style="width: 80%;flex-grow: 0;box-shadow: 0 0 7px 2px #dcdcdc;"
							  range-separator=" - "
							  start-placeholder="开始日期"
							  end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<div class="flex-sub text-center">
							<el-button style="width: 80%;" type="primary" size="small">查询</el-button>
						</div>
					</el-form>
					<div style="position: relative;padding: 0 2%;">
						<div class="sTitleSty">温度</div>
						<line-chart name="EngiTempl" :data="eTemplData" height="calc(33.33vh - 88px)"/>
					</div>
					<div style="position: relative;padding: 0 2%;margin: 16px 0;">
						<div class="sTitleSty">压力</div>
						<line-chart name="EngiPressure" :data="ePressureData" height="calc(33.33vh - 88px)"/>
					</div>
					<div style="position: relative;padding: 0 2%;">
						<div class="sTitleSty">功率</div>
						<line-chart name="EngiPower" :data="powerData" height="calc(33.33vh - 89px)"/>
					</div>
					<div class="margin-top-xs text-bold text-black">辅机</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import lineChart from "@/components/Echarts/LineChart"
	const systemOptions = ref([]);
	const equipOptions = ref([]);
	const data = reactive({
		systemForm: {
			systemId: 1
		},
		equipForm: {
			equipId: 1
		},
		templData: {
			name: "温度",
			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
			data: [{
				name: '主机缸套冷却水进机温度',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '主机X号气打冷却水出口温度',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10]
			},{
				name: '主机活塞冷却油进口温度',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [50, 10, 14, 13, 11, 12]
			},{
				name: '主机X号活塞冷却油出口温度',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 12, 14, 13, 12, 11]
			}]
		},
		pressureData: {
			name: "压力",
			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
			data: [{
				name: '主机缸套冷却水进机压力',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '主机活塞冷却油进口压力',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10]
			}]
		},
		speedData: {
			name: "轴转速",
			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
			data: [{
				name: '主机缸套冷却水进机温度',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '主机X号气打冷却水出口温度',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10]
			}]
		},
		ePressureData: {
			name: "压力",
			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
			data: [{
				name: '数据1',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '数据2',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10]
			}]
		},
		eTemplData: {
			name: "温度",
			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
			data: [{
				name: '数据1',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '数据2',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10]
			}]
		},
		powerData: {
			name: "数据",
			xAxis: ["一月", "二月", "三月", "四月", "五月", "六月"],
			data: [{
				name: '数据1',
				type: 'line',
				stack: 'Total',
				unit: "℃",
				smooth: true,
				data: [15.3, 26.1, 14.1, 16.1, 13.1, 16.4]
			},{
				name: '数据2',
				type: 'line',
				stack: 'Total',
				smooth: true,
				data: [10, 14, 18, 19, 13, 10]
			}]
		}
	});
	const { systemForm, 
			equipForm, 
			templData, 
			pressureData, 
			speedData,
			eTemplData,
			ePressureData,
			powerData
	} = toRefs(data);
	const getOptions = function(){
		systemOptions.value = [{
			label: "冷却系统",
			value: 0
		},{
			label: "润滑系统",
			value: 1
		},{
			label: "燃油系统",
			value: 2
		},{
			label: "进气和排气系统",
			value: 3
		}];
		equipOptions.value = [{
			label: "X号辅机",
			value: 0
		},{
			label: "锅炉",
			value: 1
		}]
	}
	getOptions();
</script>

<style scoped lang="scss">
	::v-deep .el-form-item__label {
		line-height:  var(--el-component-size-small);
		color: var(--bGray);
		font-weight: 700;
	}
</style>