90 lines
1.6 KiB
Vue
90 lines
1.6 KiB
Vue
<!--
|
|
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>
|