yangfeng
2023-12-12 1519870c0e18171ced014a840e86a459dc6b00f1
src/views/dashboard/components/TroubleTrackerModal.vue
@@ -4,17 +4,17 @@
      <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>
@@ -25,15 +25,18 @@
</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]
}>()
@@ -42,19 +45,6 @@
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 {