<template>
	<div
		class="top-three"
		style="flex: 1; display: flex; gap: 20px; padding: 0px 16px;">
		<div class="left-side" style="flex: 1;">
			<div
				style="
					display: grid;
					grid-template-rows: 462px;
				">
				<EqAlarm />
			</div>
		</div>
		<div class="middle-side" style="flex: 1">
			<div
				style="
					display: grid;
					grid-template-rows: 462px;
				">
				<DefectSum />
			</div>
		</div>
		<div class="righe-side" style="flex: 1">
			<div
				style="
					display: grid;
					grid-template-rows: 462px;
				">
				<WorkOrderMonitoring />
			</div>
		</div>
	</div>
</template>

<script>
import WorkOrderMonitoring from './WorkOrderMonitoring';
import EqAlarm from './EqAlarm'
import DefectSum from './DefectSum'
export default {
	name: 'TopThree',
	components: { EqAlarm, DefectSum, WorkOrderMonitoring },
	props: {},
	data() {
		return {};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss"></style>
