fix:换一种方法实现变色

src/views/dashboard/demo/components/ProjectCard.vue

@@ -3,7 +3,7 @@ import { Card, CardGrid } from 'ant-design-vue'
 import { computed, onBeforeMount, onMounted, ref } from 'vue'
 import { groupItems } from './data'
 import { Icon } from '@/components/Icon'
-
+import { getExaNow } from '@/api/alert/exa'
 
 const props = defineProps({
   data: {
@@ -12,30 +12,28 @@ const props = defineProps({
   },
 })
 
-
-
-// const gridData = ref<any>([])
+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)
+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'
+      let ifColor: boolean = false
+      if (res != null)
+        ifColor = res === '1'
 
-//       gridData.value.push(Object.assign({}, item, { ifColor }))
+      gridData.value.push(Object.assign({}, item, { ifColor }))
 
-//       console.log(gridData.value)
-//     }
-//     catch (e) {
-//     }
-//   }
-// })
+      console.log(gridData.value)
+    }
+    catch (e) {
+    }
+  }
+})
 </script>
 
 <template>
@@ -46,7 +44,7 @@ const props = defineProps({
       </a-button>
     </template>
 
-    <CardGrid v-for="item in props.data.Content" :key="item.Point" :class="{ 'bg-[#990000] bg-opacity-50': item.ifColor }" class="!h-1/3 !w-full !md:w-1/4">
+    <CardGrid v-for="item in gridData" :key="item.Point" :class="{ 'bg-[#990000] bg-opacity-50': item.ifColor }" class="!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">
         <div class="text-center text-base">

src/views/dashboard/demo/index.vue

@@ -29,30 +29,30 @@ onBeforeMount(async () => {
   console.log(res)
   if (res)
     data.value = JSON.parse(res.Page_Content)
-  getColor(data.value)
+  // getColor(data.value)
 })
 
-async function getColor(data: any) {
-  const rows = data.LeftMidUp.Content || []
-  const gridData = [] as any[]
-  for (const item of rows) {
-    try {
-      const param = item.Point
-      const res = await getExaNow(param)
+// async function getColor(data: any) {
+//   const rows = data.LeftMidUp.Content || []
+//   const gridData = [] as any[]
+//   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'
+//       let ifColor: boolean = false
+//       if (res != null)
+//         ifColor = res === '1'
 
-      gridData.push(Object.assign({}, item, { ifColor }))
+//       gridData.push(Object.assign({}, item, { ifColor }))
 
-      console.log(gridData)
-    }
-    catch (e) {
-    }
-  }
-  data.LeftMidUp.Content = gridData
-}
+//       console.log(gridData)
+//     }
+//     catch (e) {
+//     }
+//   }
+//   data.LeftMidUp.Content = gridData
+// }
 </script>
 
 <template>