<!-- 
    filename: index.vue
    author: liubin
    date: 2023-08-29 14:39:40
    description: 状态时序图 
-->

<template>
	<div class="sequence-graph">
		<SequenceGraphItem v-for="eq in Object.keys(list)" :key="eq" />
	</div>
</template>

<script>
import SequenceGraphItem from './sequenceGraphItem.vue';
export default {
	name: 'SequenceGraph',
	components: { SequenceGraphItem },
	props: {
		colors: {
			type: Array,
			default: () => ['', '', '', '', '', ''], // 默认颜色
		},
	},
	data() {
		return {
			list: {
				打孔机: {
					equipmentId: 1,
					equipmentName: 'EQ1',
					status: '',
					startTime: '',
					duration: '',
					startPos: '',
					relativeDuring: '',
				},
				磨边机: {
					equipmentId: 12,
					equipmentName: 'EQ2',
					status: '',
					startTime: '',
					duration: '',
					startPos: '',
					relativeDuring: '',
				},
				清洗机: {
					equipmentId: 13,
					equipmentName: 'EQ3',
					status: '',
					startTime: '',
					duration: '',
					startPos: '',
					relativeDuring: '',
				},
				窑炉: {
					equipmentId: 14,
					equipmentName: 'EQ4',
					status: '',
					startTime: '',
					duration: '',
					startPos: '',
					relativeDuring: '',
				},
				AGV: {
					equipmentId: 15,
					equipmentName: 'EQ5',
					status: '',
					startTime: '',
					duration: '',
					startPos: '',
					relativeDuring: '',
				},
			},
		};
	},
	computed: {},
	methods: {},
};
</script>

<style scoped lang="scss">
.sequence-graph {
	padding: 24px;
	background: #fff;
	border-radius: 6px;
	margin: 12px;
	box-shadow: 0 0 32px 8px rgba($color: #000000, $alpha: 0.2);
}
</style>
