| | |
| | | <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 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.status === 2" size="30" color="#ff0000"><WarnTriangleFilled /></el-icon> |
| | | <el-icon v-if="item.status === 1" size="30" color="#00ff00"><CircleCheckFilled /></el-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.content }}</div> |
| | | <div class="trouble-text">{{ item.ItemName }}</div> |
| | | </div> |
| | | <div class="trouble-status" :class="{ green: item.status === 1, red: item.status === 2 }"> |
| | | {{ DEVICE_STATUS_NAME_MAP[item.status] }} |
| | | <div class="trouble-status" :class="{ green: item.CheckResult, red: !item.CheckResult }"> |
| | | {{ item.CheckResult ? '正常' : '异常' }} |
| | | </div> |
| | | </div> |
| | | </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' |
| | | import type { Problem } from '@/api/problem' |
| | | import { toRefs } from 'vue' |
| | | export interface TroubleTrackerModalProps { |
| | | modelValue: boolean |
| | | problems?: Problem[] |
| | | } |
| | | const props = withDefaults(defineProps<TroubleTrackerModalProps>(), { |
| | | modelValue: false |
| | | modelValue: false, |
| | | problems: undefined |
| | | }) |
| | | const { problems } = toRefs(props) |
| | | const emit = defineEmits<{ |
| | | 'update:modelValue': [show: boolean] |
| | | }>() |
| | |
| | | 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 { |