fix:增加根据id读取配置文件显示页面功能

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 对应的地区名

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>([])
 
-      gridData.value.push(Object.assign({}, item, { ifColor }))
+// 页面挂载时批量请求并更新数据（避免在模板中调用异步）
+// onMounted(async () => {
+//   const rows = props.data.Content || []
+//   for (const item of rows) {
+//     try {
+//       const param = item.Point
+//       const res = await getExaNow(param)
 
-      console.log(gridData.value)
-    }
-    catch (e) {
-    }
-  }
-})
+//       let ifColor: boolean = false
+//       if (res != null)
+//         ifColor = res === '1'
 
-async function ifColor(pointCode: string) {
-  const res = await getExaNow(pointCode)
-  console.log(res)
-  if (res)
-    return false
-  return false
-}
+//       gridData.value.push(Object.assign({}, item, { ifColor }))
+
+//       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">

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,

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>