fix:更改设备展示布局

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

@@ -45,7 +45,7 @@ const ListItemMeta = List.Item.Meta
 
 <style scoped>
 ::v-deep(.ant-card-body) {
-  height:80%;
+  height:50%;
   padding:10px;
 overflow-y: auto;
 }

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

@@ -54,7 +54,7 @@ dayjs.extend(relativeTime)
 
 <style scoped>
 ::v-deep(.ant-card-body) {
-  height:80%;
+  height:70%;
   padding:5px;
 overflow-y: auto;
 }
@@ -66,4 +66,8 @@ overflow-y: auto;
 ::v-deep(.ant-list-header) {
 padding:5px
 }
+
+::v-deep(.ant-comment-inner) {
+  padding: 5px 0
+}
 </style>

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

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { Card } from 'ant-design-vue'
+import { onBeforeUpdate, onMounted, onUpdated } from 'vue'
 import { BasicTable, useTable } from '@/components/Table'
+import { getExaNow } from '@/api/alert/exa'
 
 const props = defineProps({
   data: {
@@ -9,16 +11,61 @@ const props = defineProps({
   },
 })
 
-const [registerTable] = useTable({
+function getInterval(record: any) {
-  dataSource: props.data.Content,
+  console.log(record)
-  rowKey: 'id',
+  if (record.originValue === '-')
+    return '-'
+  record.originValue = Number(record.originValue).toFixed(2)
+
+  const threshold = record.ResidualThreshold
+  console.log(threshold)
+  const originValue = record.originValue || 0
+  return `[${Number(originValue) - threshold},${Number(originValue) + threshold}]`
+}
+const [registerTable, { setTableData }] = useTable({
+  dataSource: [],
+  rowKey: 'ID',
   size: 'small',
+
   immediate: false,
   columns: props.data.Columns,
   useSearchForm: false,
   showTableSetting: false,
   showIndexColumn: false,
 })
+// 页面挂载时批量请求并更新数据（避免在模板中调用异步）
+onBeforeUpdate(async () => {
+  const rr = [] as any[]
+  const rows = props.data.Content || []
+  for (const item of rows) {
+    try {
+      // 如果后端需要同时传 ObservedPoint 和 PredictedPoint，用逗号拼接（请根据后端接口调整）
+      const param = item.PredictedPoint ? `${item.ObservedPoint},${item.PredictedPoint}` : `${item.ObservedPoint}`
+      const res = await getExaNow(param)
+
+      let origin: any = '-'
+      let predict: any = '-'
+      if (res != null) {
+        if (Array.isArray(res)) {
+          origin = res[0] ?? '-'
+          predict = res[1] ?? '-'
+        }
+        else if (typeof res === 'object') {
+          origin = res.originValue ?? res[0] ?? '-'
+          predict = res.predictValue ?? res[1] ?? '-'
+        }
+        else {
+          origin = String(res)
+        }
+      }
+      rr.push(Object.assign({}, item, { originValue: origin, predictValue: predict }))
+    }
+    catch (e) {
+    }
+  }
+
+  setTableData(rr)
+})
 </script>
 
 <template>
@@ -28,7 +75,11 @@ const [registerTable] = useTable({
         更多
       </a-button>
     </template> -->
-    <BasicTable @register="registerTable" />
+    <BasicTable @register="registerTable">
+      <template #threshold="{ record }">
+        <span>{{ getInterval(record) }}</span>
+      </template>
+    </BasicTable>
   </Card>
 </template>
 

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

@@ -19,7 +19,7 @@ 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/2">
+    <CardGrid v-for="item in props.data.Content" :key="item.Point" 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">
         {{ item.Point }}

src/views/dashboard/demo/index.vue

@@ -22,13 +22,15 @@ setTimeout(() => {
       <WorkbenchHeader :data="data" />
     </template>
     <div class="bg-[#f5f5f5]">
-      <div class="enter-y h-90 md:flex">
+      <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/4" :loading="loading" :data="data.LeftMidUp" />
+        <ProjectCard class="enter-y m-1 w-full md:w-1/2" :loading="loading" :data="data.LeftMidUp" />
-        <DynamicInfo :loading="loading" class="enter-y m-1 w-full md:w-1/4" :data="data.RightMidUp" />
+        <div class="enter-y w-full !mr-4 md:w-1/4">
-        <Operation class="m-1 w-full md:w-1/4" :loading="loading" :data="data.RightUp" />
+          <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>
       </div>
-      <div class="enter-y h-95 md:flex">
+      <div class="enter-y h-98 md:flex">
         <StaticImg 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>