<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="problems?.length" class="trouble">
|
<div v-for="(item, index) in problems" :key="index" class="trouble-item">
|
<div class="trouble-content">
|
<div class="trouble-icon">
|
<el-icon v-if="item.CheckResult" size="30" color="#00ff00"><CircleCheckFilled /></el-icon>
|
<el-icon v-if="!item.CheckResult" size="30" color="#ff0000"><WarnTriangleFilled /></el-icon>
|
</div>
|
<div class="trouble-text">{{ item.ItemName }}</div>
|
</div>
|
<div class="trouble-status" :class="{ green: item.CheckResult, red: !item.CheckResult }">
|
{{ item.CheckResult ? '正常' : '异常' }}
|
</div>
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
</BaseModal>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { useVModel } from '@vueuse/core'
|
import { CircleCheckFilled, WarnTriangleFilled } from '@element-plus/icons-vue'
|
import type { Problem } from '@/api/problem'
|
import { toRefs } from 'vue'
|
export interface TroubleTrackerModalProps {
|
modelValue: boolean
|
problems?: Problem[]
|
}
|
const props = withDefaults(defineProps<TroubleTrackerModalProps>(), {
|
modelValue: false,
|
problems: undefined
|
})
|
const { problems } = toRefs(props)
|
const emit = defineEmits<{
|
'update:modelValue': [show: boolean]
|
}>()
|
const modelData = useVModel(props, 'modelValue', emit)
|
|
function closeModal() {
|
modelData.value = false
|
}
|
</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>
|
