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/components/Page/src/PageWrapper.vue

@@ -129,7 +129,7 @@ watch(
     <PageHeader
       v-if="getShowHeader"
       v-bind="omit($attrs, 'class')"
-      ref="headerRef" class="m-1" :style="getHeaderStyle"
+      ref="headerRef" :style="getHeaderStyle"
       style="padding:6px 8px;" :ghost="ghost" :title="title"
     >
       <template #default>

src/design/theme.less

@@ -60,3 +60,111 @@ html[data-theme="dark"] {
     color: rgb(0 0 0 / 90%);
   }
 }
+
+.workbench[data-theme="dark"] {
+  --text-color: rgb(255 255 255 0.85);
+  --component-background: rgb(36 37 37 75%);
+  --border-color: #b6b7b9;
+
+  color: rgb(255 255 255 0.85);
+  background: rgb(36 37 37 75%);
+  border-color: #b6b7b9;
+
+  .xingyuv-basic-table .ant-table-wrapper {
+    color: rgb(255 255 255 0.85);
+    background: rgb(36 37 37 75%);
+  }
+
+  .ant-table-wrapper table {
+    color: rgb(255 255 255 0.85);
+    background: rgb(36 37 37 75%);
+  }
+
+  .ant-table-wrapper .ant-table-thead > tr > td {
+    color: rgb(255 255 255 0.85);
+    background: rgb(36 37 37 75%);
+  }
+
+  .ant-table-container {
+    color: rgb(255 255 255 0.85);
+    background: rgb(36 37 37 75%);
+  }
+
+  .ant-table-wrapper .ant-table .ant-table-header {
+    color: rgb(255 255 255 0.85);
+    background: rgb(36 37 37 75%);
+  }
+
+  .ant-table-wrapper .ant-table.ant-table-small {
+    color: rgb(255 255 255 0.85);
+    background: rgb(36 37 37 75%);
+  }
+
+  .ant-card-head-title {
+    color: rgb(255 255 255 0.85);
+  }
+
+  .ant-card-body {
+    color: rgb(255 255 255 0.85);
+  }
+
+  .ant-list-split .ant-list-item {
+    border-block-end: 1px solid #8b949e;
+  }
+
+  .ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-title {
+    color: rgb(255 255 255 0.85);
+  }
+
+  .ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-description {
+    color: rgb(255 255 255 0.85);
+  }
+
+  .ant-comment .ant-comment-content-author-name {
+    color: #8b949e;
+  }
+
+  .ant-comment .ant-comment-content-author-name > * {
+    color: #8b949e;
+  }
+
+  .ant-comment .ant-comment-content-author-name > *:hover {
+    color: #8b949e;
+  }
+
+  .ant-comment .ant-comment-content-author-time {
+    color: #8b949e;
+  }
+
+  .ant-list .ant-list-item {
+    color: rgb(255 255 255 0.85);
+  }
+
+  .text-secondary {
+    color: #8b949e;
+  }
+
+  .ant-card-grid-hoverable:hover {
+    box-shadow:
+      0 3px 6px -4px rgb(0 0 0 / 48%),
+      0 6px 16px 0 rgb(0 0 0 / 32%),
+      0 9px 28px 8px rgb(0 0 0 / 20%);
+  }
+
+  .ant-card-grid {
+    box-shadow:
+      1px 0 0 0 #434343,
+      0 1px 0 0 #434343,
+      1px 1px 0 0 #434343,
+      1px 0 0 0 #434343 inset,
+      0 1px 0 0 #434343 inset;
+  }
+
+  .ant-calendar-selected-day .ant-calendar-date {
+    color: rgb(0 0 0 / 80%);
+  }
+
+  .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
+    color: rgb(0 0 0 / 90%);
+  }
+}

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

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 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: {
@@ -9,6 +11,29 @@ const props = defineProps({
     default: () => {},
   },
 })
+
+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>
@@ -19,14 +44,15 @@ const props = defineProps({
       </a-button>
     </template>
 
-    <CardGrid v-for="item in props.data.Content" :key="item.Point" 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="text-center text-lg">
+      <div class="flex flex-col items-center">
+        <div class="text-center text-base">
+          {{ item.FaultDesc }}
+        </div>
+        <div class="text-secondary mt-1 h-10 flex">
           {{ item.Point }}
         </div>
-
-      <div class="text-secondary mt-2 h-10 flex">
-        {{ item.FaultDesc }}
       </div>
       <!-- <div class="text-secondary flex justify-between">
         <span>{{ item.group }}</span>

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

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { Card } from 'ant-design-vue'
+
 const props = defineProps({
   data: {
     type: Object,
@@ -8,7 +10,6 @@ const props = defineProps({
 </script>
 
 <template>
-  <div>
   <!-- <Avatar :src="userinfo.user.avatar || headerImg" :size="72" class="!mx-auto !block" /> -->
   <div class="mt-2 md:mt-0">
     <h1 class="text-center text-lg md:text-2xl">
@@ -16,7 +17,7 @@ const props = defineProps({
       {{ props.data.title }}
     </h1>
     <!-- <span class="text-secondary"> 今日晴，20℃ - 32℃！ </span> -->
-    </div>
+    <!-- </div> -->
     <!-- <div class="mt-4 flex flex-1 justify-end md:mt-0">
       <div class="flex flex-col justify-center text-right">
         <span class="text-secondary"> 待办 </span>
@@ -34,3 +35,9 @@ const props = defineProps({
     </div> -->
   </div>
 </template>
+
+<style scoped>
+::v-deep(.ant-card-grid) {
+  padding:15px;
+}
+</style>

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 copy.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { onMounted, ref } from '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 { PageWrapper } from '@/components/Page'
+
+const loading = ref(true)
+
+onMounted(() => {
+  const htmlRoot = document.getElementsByClassName('workbench')
+  // let theme = window.localStorage.getItem('__APP__DARK__MODE__')
+  const theme = 'dark'
+
+  if (htmlRoot && theme) {
+    for (let i = 0; i < htmlRoot.length; i++)
+      htmlRoot[i].setAttribute('data-theme', theme)
+  }
+  // theme = htmlRoot = null
+})
+
+setTimeout(() => {
+  loading.value = false
+}, 500)
+</script>
+
+<template>
+  <div class="workbench m-1" data-theme="light">
+    <WorkbenchHeader class="workbench m-1" data-theme="light" :data="data" />
+    <div class="enter-y workbench h-92 md:flex" data-theme="light">
+      <StaticImg data-theme="light" class="workbench m-1 w-full md:w-1/4" :loading="loading" :data="data.LeftUp" />
+      <ProjectCard data-theme="light" class="enter-y workbench m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftMidUp" />
+      <div class="enter-y w-full !mr-4 md:w-1/4">
+        <DynamicInfo :loading="loading" data-theme="light" class="workbench enter-y m-1 h-35 w-full" :data="data.RightMidUp" />
+        <Operation data-theme="light" class="workbench enter-y m-1 h-54 w-full" :loading="loading" :data="data.RightUp" />
+      </div>
+    </div>
+    <div class="enter-y workbench h-95 md:flex" data-theme="light">
+      <StaticImg data-theme="light" class="workbench m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftDown" />
+      <ParameterInfo data-theme="light" class="workbench 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>
+</template>
+
+<style lang="less">
+
+</style>

src/views/dashboard/demo/index.vue

@@ -1,31 +1,70 @@
 <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)
+// 为了解决系统不支持传参的问题，改为从路由参数中获取id，不是最终解决办法，带系统commitbug
+const id = route.path.split('/').pop() || ''
+onBeforeMount(async () => {
+  console.log(route.path)
+  const res = await getDeviceInfo(id)
+  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 :data="data" />
+      <WorkbenchHeader class="m-1" :data="data" />
     </template>
     <div class="bg-[#f5f5f5]">
       <div class="enter-y h-95 md:flex">
         <StaticImg class="m-1 w-full md:w-1/4" :loading="loading" :data="data.LeftUp" />
         <ProjectCard class="enter-y m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftMidUp" />
-        <div class="enter-y w-full !mr-4 md:w-1/4">
+        <div class="enter-y w-full md:w-1/4">
           <DynamicInfo :loading="loading" class="enter-y m-1 h-35 w-full" :data="data.RightMidUp" />
           <Operation class="enter-y m-1 h-57 w-full" :loading="loading" :data="data.RightUp" />
         </div>
@@ -52,5 +91,5 @@ setTimeout(() => {
         <SaleRadar :loading="loading" class="enter-y" />
       </div> -->
     </div>
-  </PageWrapper>
+  </pagewrapper>
 </template>