add 设备状态时序图组件

src/components/SequenceGraph/index.vue

@@ -0,0 +1,41 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-08-29 14:39:40
+    description: 状态时序图 
+-->
+
+<template>
+	<div class="sequence-graph">
+		<SequenceGraphItem />
+	</div>
+</template>
+
+<script>
+import SequenceGraphItem from './sequenceGraphItem.vue';
+export default {
+	name: 'SequenceGraph',
+	components: { SequenceGraphItem },
+	props: {
+		colors: {
+			type: Array,
+			default: () => ['', '', '', '', '', ''], // 默认颜色
+		},
+	},
+	data() {
+		return {};
+	},
+	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>

src/components/SequenceGraph/sequenceGraphItem.vue

@@ -0,0 +1,49 @@
+<!-- 
+    filename: sequenceGraphItem.vue
+    author: liubin
+    date: 2023-08-29 14:40:51
+    description: 时序图最小单元
+-->
+
+<template>
+	<div class="sequence-graph-item" :style="styles">
+        <span v-if="time != null">{{ time }}</span>
+    </div>
+</template>
+
+<script>
+export default {
+	name: 'SequenceGraphItem',
+	components: {},
+	props: {
+		color: {
+			type: String,
+			default: 'black',
+		},
+        time: {
+            type: String,
+            default: null
+        }
+	},
+    computed: {
+        styles() {
+            return {
+                color: this.color
+            }
+        }
+    },
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.sequence-graph-item {
+    width: 40px;
+    height: 32px;
+    display: inline-block;
+}
+</style>