1
0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-16 02:34:45 +08:00

62 lines
1.3 KiB
Vue
Raw Normal View History

2022-12-04 18:17:36 +08:00
<template>
2023-01-09 14:30:49 +08:00
<el-tag :type="getType(status)" round effect="light">
2022-12-04 18:17:36 +08:00
{{ $t('commons.status.' + status) }}
2023-04-06 16:38:16 +08:00
<el-icon v-if="loadingIcon(status)" class="is-loading">
2023-01-16 15:30:24 +08:00
<Loading />
</el-icon>
2023-01-09 14:30:49 +08:00
</el-tag>
2022-12-04 18:17:36 +08:00
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
status: {
type: String,
default: 'running',
2022-12-04 18:17:36 +08:00
},
});
let status = ref('running');
2022-12-04 18:17:36 +08:00
2023-01-09 14:30:49 +08:00
const getType = (status: string) => {
2023-05-18 16:48:19 +08:00
if (status.includes('error') || status.includes('err')) {
return 'danger';
}
2022-12-04 18:17:36 +08:00
switch (status) {
case 'running':
2023-01-09 14:30:49 +08:00
return 'success';
case 'stopped':
return 'danger';
case 'unhealthy':
case 'paused':
case 'exited':
case 'dead':
case 'removing':
return 'warning';
2022-12-04 18:17:36 +08:00
default:
return '';
}
};
const loadingStatus = [
'installing',
'building',
'restarting',
'upgrading',
'rebuilding',
'recreating',
'creating',
'starting',
'removing',
'applying',
];
2023-04-06 16:38:16 +08:00
const loadingIcon = (status: string): boolean => {
return loadingStatus.indexOf(status) > -1;
};
2022-12-04 18:17:36 +08:00
onMounted(() => {
status.value = props.status.toLocaleLowerCase();
});
</script>