<template>
|
<div class="trouble-tracker-modal">
|
<BaseModal v-model="modelData" :wider="true" @close="closeModal">
|
<template #title>问题诊断 </template>
|
<div class="modal-content">
|
<el-scrollbar always class="scroller">
|
<div v-if="fakeTroubles?.length" class="trouble">
|
<div v-for="(item, index) in fakeTroubles" :key="index" class="trouble-item">
|
<div class="trouble-content">
|
<div class="trouble-icon">
|
<el-icon v-if="item.status === 2" size="30" color="#ff0000"><WarnTriangleFilled /></el-icon>
|
<el-icon v-if="item.status === 1" size="30" color="#00ff00"><CircleCheckFilled /></el-icon>
|
</div>
|
<div class="trouble-text">{{ item.content }}</div>
|
</div>
|
<div class="trouble-status" :class="{ green: item.status === 1, red: item.status === 2 }">
|
{{ DEVICE_STATUS_NAME_MAP[item.status] }}
|
</div>
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
</BaseModal>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { useVModel } from '@vueuse/core'
|
import { ref } from 'vue'
|
import { CircleCheckFilled, WarnTriangleFilled } from '@element-plus/icons-vue'
|
import { DEVICE_STATUS_NAME_MAP } from '@/common/constants'
|
export interface TroubleTrackerModalProps {
|
modelValue: boolean
|
}
|
const props = withDefaults(defineProps<TroubleTrackerModalProps>(), {
|
modelValue: false
|
})
|
const emit = defineEmits<{
|
'update:modelValue': [show: boolean]
|
}>()
|
const modelData = useVModel(props, 'modelValue', emit)
|
|
function closeModal() {
|
modelData.value = false
|
}
|
|
const fakeTroubles = ref<{ content: string; status: 1 | 2 }[]>([{ content: '云端网络连接', status: 1 }])
|
// TODO: 等接口
|
fakeTroubles.value.push(
|
...Array(100)
|
.fill(0)
|
.map(() => {
|
return {
|
content: '云端网络连接',
|
status: Math.ceil(Math.random() + 1)
|
} as { content: string; status: 1 | 2 }
|
})
|
)
|
</script>
|
<style scoped lang="scss">
|
.modal-content {
|
height: 600px;
|
}
|
.trouble {
|
color: #fff;
|
font-size: 18px;
|
padding: 6px 40px 6px 20px;
|
|
&-item {
|
min-height: 40px;
|
padding: 10px 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
&-icon {
|
height: 30px;
|
margin-right: 14px;
|
}
|
&-content {
|
display: flex;
|
align-items: center;
|
}
|
&-status {
|
&.green {
|
color: #00ff00;
|
}
|
&.red {
|
color: #ff0000;
|
}
|
}
|
}
|
.scroller {
|
padding: 4px 16px;
|
}
|
</style>
|
