You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.9 KiB
81 lines
1.9 KiB
<script lang="ts" setup>
|
|
import { Card, CardGrid } from 'ant-design-vue'
|
|
import { onMounted, ref, watch } from 'vue'
|
|
|
|
import { getExaNow } from '@/api/alert/exa'
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
})
|
|
watch(
|
|
() => props.data,
|
|
(newValue, oldValue) => {
|
|
// 下方信息不会打印在控制台中
|
|
console.log('a has changed', newValue, oldValue)
|
|
},
|
|
)
|
|
const gridData = ref<any>([])
|
|
|
|
// 页面挂载时批量请求并更新数据（避免在模板中调用异步）
|
|
onMounted(async () => {
|
|
const rows = props.data.Content || []
|
|
for (const item of rows) {
|
|
try {
|
|
const param = item.Point
|
|
const res = await getExaNow(param)
|
|
|
|
let ifColor: boolean = false
|
|
if (res != null)
|
|
ifColor = res === '1'
|
|
|
|
gridData.value.push(Object.assign({}, item, { ifColor }))
|
|
|
|
console.log(gridData.value)
|
|
}
|
|
catch (e) {
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Card :title="props.data.Header" v-bind="$attrs">
|
|
<template #extra>
|
|
<a-button type="link">
|
|
更多
|
|
</a-button>
|
|
</template>
|
|
|
|
<CardGrid v-for="item in gridData" :key="item.Point" :class="{ 'bg-[#990000] bg-opacity-50': item.ifColor }" class="flex flex-col items-center justify-center !h-1/3 !w-full !md:w-1/4">
|
|
<!-- <Icon :icon="item.icon" :color="item.color" size="30" /> -->
|
|
<div class="flex flex-col items-center justify-center">
|
|
<div class="text-center text-base">
|
|
{{ item.FaultDesc }}
|
|
</div>
|
|
|
|
<!-- <div class="text-secondary mt-1 h-10 flex">
|
|
{{ item.Point }}
|
|
</div> -->
|
|
</div>
|
|
<!-- <div class="text-secondary flex justify-between">
|
|
<span>{{ item.group }}</span>
|
|
<span>{{ item.date }}</span>
|
|
</div> -->
|
|
</CardGrid>
|
|
</Card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
::v-deep(.ant-card-grid) {
|
|
padding:15px;
|
|
}
|
|
|
|
::v-deep(.ant-card-body) {
|
|
height:80%;
|
|
overflow-y: auto;
|
|
|
|
}
|
|
</style>
|
|
|