fix:增强用户体验，挂载前就修改变色

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

@@ -10,54 +10,13 @@ const props = defineProps({
     default: () => {},
   },
 })
-const gridData = ref<any>([])
-
 watch(
   () => props.data,
   (newValue, oldValue) => {
     // 下方信息不会打印在控制台中
     console.log('a has changed', newValue, oldValue)
-    getNewData()
   },
 )
-async function getNewData() {
-  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 }))
-    }
-    catch (e) {
-    }
-  }
-}
-
-// 页面挂载时批量请求并更新数据（避免在模板中调用异步）
-// 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>
@@ -68,7 +27,7 @@ async function getNewData() {
       </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">
+    <CardGrid v-for="item in props.data.Content" :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">

src/views/dashboard/demo/index.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { message } from 'ant-design-vue'
 import ProjectCard from './components/ProjectCard.vue'
 import DynamicInfo from './components/DynamicInfo.vue'
 import StaticImg from './components/staticImg.vue'
@@ -16,10 +15,8 @@ import { getExaNow } from '@/api/alert/exa'
 
 const loading = ref(true)
 const route = useRoute()
+const gridData = ref<any[]>([])
 
-setTimeout(() => {
-  loading.value = false
-}, 500)
 // 为了解决系统不支持传参的问题，改为从路由参数中获取id，不是最终解决办法，带系统commitbug
 const id = route.path.split('/').pop() || ''
 const data = ref<any>(data1)
@@ -28,30 +25,32 @@ onMounted(async () => {
   const res = await getDeviceInfo(id)
   if (res)
     data.value = JSON.parse(res.Page_Content)
-  // getColor(data.value)
+  // 加载数据后调用 getNewData 处理 LeftMidUp 数据
+  await getNewData()
+  loading.value = false
 })
 
-// async function getColor(data: any) {
+// 处理故障诊断的数据，为每个对象增加ifColor属性
-//   const rows = data.LeftMidUp.Content || []
+async function getNewData() {
-//   const gridData = [] as any[]
+  const rows = data.value.LeftMidUp.Content || []
-//   for (const item of rows) {
+  for (const item of rows) {
-//     try {
+    try {
-//       const param = item.Point
+      const param = item.Point
-//       const res = await getExaNow(param)
+      const res = await getExaNow(param)
-
+      console.log(res)
-//       let ifColor: boolean = false
+      let ifColor: boolean = false
-//       if (res != null)
+      if (res != null)
-//         ifColor = res === '1'
+        ifColor = res === '1'
-
+      // 直接修改原始对象，添加ifColor属性
-//       gridData.push(Object.assign({}, item, { ifColor }))
+      item.ifColor = ifColor
-
+    }
-//       console.log(gridData)
+    catch (e) {
-//     }
+      // 出错时默认添加ifColor为false
-//     catch (e) {
+      item.ifColor = false
-//     }
+    }
-//   }
+  }
-//   data.LeftMidUp.Content = gridData
+  console.log(data.value)
-// }
+}
 </script>
 
 <template>
@@ -72,23 +71,6 @@ onMounted(async () => {
         <StaticSvg class="m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftDown || {}" />
         <ParameterInfo class="m-1 w-full md:w-1/2" :loading="loading" :data="data.RightDown || {}" />
       </div>
-      <!-- <div class="enter-y w-full !mr-4 lg:w-7/10">
-        <StaticImg :loading="loading" :data="data.LeftUp" class="enter-y" />
-      </div> -->
-
-      <!-- <div class="enter-y w-full !mr-4 lg:w-7/10">
-        <ProjectCard :loading="loading" class="enter-y" />
-        <DynamicInfo :loading="loading" class="enter-y !my-4" />
-      </div>
-      <div class="enter-y w-full lg:w-3/10">
-        <QuickNav :loading="loading" class="enter-y" />
-
-        <Card class="enter-y !my-4" :loading="loading">
-          <img class="mx-auto h-30 xl:h-50" src="@/assets/svg/illustration.svg">
-        </Card>
-
-        <SaleRadar :loading="loading" class="enter-y" />
-      </div> -->
     </div>
   </pagewrapper>
 </template>