大屏

src/views/productionVisualization/equipmentBoard/components/baseStatus.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="status-text" :class="getStatusClass()">
+    {{ injectData.status }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatusLabel',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({}),
+      required: true
+    }
+  },
+  methods: {
+    // 将中文状态转换为英文
+    getStatusText() {
+      const statusMap = {
+        '暂停中': 'Paused',
+        '已终止': 'Terminated',
+        '已终止-回收': 'Terminated-Recycled',
+        '已终止-待回收': 'Terminated-PendingRecycling',
+        '异常': 'Abnormal',
+        '执行中': 'InProgress',
+        '已完成': 'Done',
+        '未完成': 'Pending'
+      };
+      return statusMap[this.injectData.status] || this.injectData.status;
+    },
+    // 判断是否为含"已终止"的状态（用于绑定样式）
+    getStatusClass() {
+      const chineseStatus = this.injectData.status || '';
+      // 包含"已终止"的中文状态统一归类为terminated类
+      if (chineseStatus.includes('已终止')) {
+        return 'terminated';
+      }
+      // 其他状态直接返回英文类名
+      return this.getStatusText();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.status-text {
+  font-size: 14px;
+  padding: 2px 8px 2px 24px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+}
+
+/* 所有含"已终止"的状态共用样式 */
+.status-text.terminated::before {
+  content: '';
+    position: absolute;
+    left: 8px;
+    width: 14px;
+    height: 14px;
+    /* border-radius: 2px; */
+    background: url('../../../../assets/img/recycle.png') no-repeat;
+    background-size: cover;
+  /* 已终止系列统一色块 */
+}
+
+.status-text.terminated {
+  color: rgba(89, 89, 89, 1);
+  /* 已终止系列统一文字色 */
+}
+
+/* 暂停中样式 */
+.status-text.Paused::before {
+  content: '';
+  position: absolute;
+  left: 8px;
+  width: 14px;
+  height: 14px;
+  /* border-radius: 2px; */
+    background: url('../../../../assets/img/recycle.png') no-repeat;
+      background-size: cover;
+}
+
+.status-text.Paused {
+  color: rgba(245, 154, 36, 1);
+}
+
+/* 其他状态样式 */
+.status-text.Abnormal {
+  color: rgba(255, 0, 0, 1);
+  padding: 2px 8px;
+  /* 无左侧色块 */
+}
+
+.status-text.InProgress {
+  color: rgba(0, 101, 255, 1);
+  padding: 2px 8px;
+}
+
+.status-text.Done {
+  color: #4CAF50;
+  padding: 2px 8px;
+}
+
+.status-text.Pending {
+  color: #FF9800;
+  padding: 2px 8px;
+}
+</style>