112 lines
2.4 KiB
Vue
112 lines
2.4 KiB
Vue
<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>
|