From 5dbfc3b835cf6948be535defb1007893f614f7ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=82=96=E6=99=8B=E9=A3=9E?= <378266566@qq.com>
Date: Wed, 17 Sep 2025 18:38:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=A2=9E=E5=8A=A0=E6=A0=B9=E6=8D=AEid?=
 =?UTF-8?q?=E8=AF=BB=E5=8F=96=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/index.ts                       |  8 ++++
 .../dashboard/demo/components/ProjectCard.vue | 48 ++++++++-----------
 .../dashboard/demo/components/staticImg.vue   |  4 --
 src/views/dashboard/demo/index.vue            | 43 +++++++++++++++--
 4 files changed, 69 insertions(+), 34 deletions(-)
 create mode 100644 src/api/device/index.ts

diff --git a/src/api/device/index.ts b/src/api/device/index.ts
new file mode 100644
index 0000000..2606d35
--- /dev/null
+++ b/src/api/device/index.ts
@@ -0,0 +1,8 @@
+import { defHttp } from '@/utils/http/axios'
+
+// 获得地区树
+export function getDeviceInfo(id: string) {
+  return defHttp.get({ url: `/device/info?id=${id}` })
+}
+
+// 获得 IP 对应的地区名
diff --git a/src/views/dashboard/demo/components/ProjectCard.vue b/src/views/dashboard/demo/components/ProjectCard.vue
index 51732ff..2af3a5b 100644
--- a/src/views/dashboard/demo/components/ProjectCard.vue
+++ b/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,36 +12,30 @@ const props = defineProps({
   },
 })
 
-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'
+// 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)
 
-      gridData.value.push(Object.assign({}, item, { ifColor }))
+//       let ifColor: boolean = false
+//       if (res != null)
+//         ifColor = res === '1'
 
-      console.log(gridData.value)
-    }
-    catch (e) {
-    }
-  }
-})
+//       gridData.value.push(Object.assign({}, item, { ifColor }))
 
-async function ifColor(pointCode: string) {
-  const res = await getExaNow(pointCode)
-  console.log(res)
-  if (res)
-    return false
-  return false
-}
+//       console.log(gridData.value)
+//     }
+//     catch (e) {
+//     }
+//   }
+// })
 </script>
 
 <template>
@@ -52,7 +46,7 @@ async function ifColor(pointCode: string) {
       </a-button>
     </template>
 
-    <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">
+    <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">
       <!-- <Icon :icon="item.icon" :color="item.color" size="30" /> -->
       <div class="flex flex-col items-center">
         <div class="text-center text-base">
diff --git a/src/views/dashboard/demo/components/staticImg.vue b/src/views/dashboard/demo/components/staticImg.vue
index 95139bd..8141c7e 100644
--- a/src/views/dashboard/demo/components/staticImg.vue
+++ b/src/views/dashboard/demo/components/staticImg.vue
@@ -1,9 +1,5 @@
 <script lang="ts" setup>
 import { Card, CardGrid } from 'ant-design-vue'
-import { ref } from 'vue'
-import { navItems } from './data'
-import { Icon } from '@/components/Icon'
-
 const props = defineProps({
   data: {
     type: Object,
diff --git a/src/views/dashboard/demo/index.vue b/src/views/dashboard/demo/index.vue
index 2884f1f..f12ad38 100644
--- a/src/views/dashboard/demo/index.vue
+++ b/src/views/dashboard/demo/index.vue
@@ -1,23 +1,60 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { onBeforeMount, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { message } from 'ant-design-vue'
 import WorkbenchHeader from './components/WorkbenchHeader.vue'
 import ProjectCard from './components/ProjectCard.vue'
 import DynamicInfo from './components/DynamicInfo.vue'
 import StaticImg from './components/staticImg.vue'
 import ParameterInfo from './components/ParameterInfo.vue'
 import Operation from './components/Operation.vue'
-import data from './components/demo.json'
+import data1 from './components/demo.json'
 import { PageWrapper } from '@/components/Page'
+import { getDeviceInfo } from '@/api/device'
+import { getExaNow } from '@/api/alert/exa'
 
 const loading = ref(true)
+const route = useRoute()
 
 setTimeout(() => {
   loading.value = false
 }, 500)
+
+const data = ref<any>(data1)
+const id = ref<any>(route.query.id)
+onBeforeMount(async () => {
+  const res = await getDeviceInfo(id.value)
+  console.log(res)
+  if (res)
+    data.value = JSON.parse(res.Page_Content)
+  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)
+
+      let ifColor: boolean = false
+      if (res != null)
+        ifColor = res === '1'
+
+      gridData.push(Object.assign({}, item, { ifColor }))
+
+      console.log(gridData)
+    }
+    catch (e) {
+    }
+  }
+  data.LeftMidUp.Content = gridData
+}
 </script>
 
 <template>
-  <PageWrapper class="m-1">
+  <PageWrapper v-if="id != null && id !== undefined" class="m-1">
     <template #headerContent>
       <WorkbenchHeader class="m-1" :data="data" />
     </template>