From 68eb8d86ec8df61fc2abe42e99e31d488e25a063 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Fri, 30 Jan 2026 16:29:25 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E5=A4=A7=E5=B1=8F=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8/=E4=BA=A7=E7=BA=BF=E8=BF=90=E8=A1=8C=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF=E6=B7=BB=E5=8A=A0=E5=85=AB=E4=B8=AA=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/index.ts                   |   4 +
 src/api/iot/deviceWarningRecord/index.ts      |   4 +-
 src/api/mes/plan/index.ts                     |  26 ++-
 src/views/report/dashboardList/index.vue      | 191 ++++++++++++++--
 .../dashboard1/components/DeviceOverview.vue  |   6 +-
 .../dashboard1/components/EnergyMonitor.vue   |   6 +-
 .../dashboard1/components/EventReminder.vue   |   6 +-
 .../dashboard1/components/TaskList.vue        |   7 +-
 .../report/dashboardPage/dashboard1/index.vue | 211 ++++++++++++++++++
 .../dashboard8/components/DayCapacity.vue     |   6 +-
 .../dashboard8/components/EnergyTrend.vue     |   6 +-
 .../dashboard8/components/MonthCapacity.vue   |   6 +-
 .../dashboard8/components/QualityTrend.vue    |   6 +-
 .../dashboard8/components/RealAlarm.vue       |   6 +-
 .../dashboard8/components/TaskBoard.vue       |   6 +-
 .../dashboard8/components/WeekTrend.vue       |   6 +-
 16 files changed, 456 insertions(+), 47 deletions(-)

diff --git a/src/api/iot/device/index.ts b/src/api/iot/device/index.ts
index 98d0565f..fe1610e7 100644
--- a/src/api/iot/device/index.ts
+++ b/src/api/iot/device/index.ts
@@ -97,6 +97,10 @@ export const DeviceApi = {
     return await request.post({ url: `/iot/device/create`, data })
   },
 
+  // 批量获取设备属性列表
+  getDeviceAttributeBatchList: async (params: { deviceIds: string }) => {
+    return await request.get({ url: `/iot/device/device-attribute/batchList`, params })
+  },
   // 修改物联设备
   updateDevice: async (data: DeviceVO) => {
     return await request.put({ url: `/iot/device/update`, data })
diff --git a/src/api/iot/deviceWarningRecord/index.ts b/src/api/iot/deviceWarningRecord/index.ts
index 60aeff3b..b15cd8a3 100644
--- a/src/api/iot/deviceWarningRecord/index.ts
+++ b/src/api/iot/deviceWarningRecord/index.ts
@@ -22,7 +22,7 @@ export interface DeviceWarningRecordVO {
 // 实时报警记录 API
 export const DeviceWarningRecordApi = {
   // 获得实时报警记录列表
-  getList: async () => {
-    return await request.get({ url: `/iot/device-warinning-record/getList` })
+  getList: async (params?: any) => {
+    return await request.get({ url: `/iot/device-warinning-record/getList`, params })
   }
 }
diff --git a/src/api/mes/plan/index.ts b/src/api/mes/plan/index.ts
index d1fadfd5..5c166df7 100644
--- a/src/api/mes/plan/index.ts
+++ b/src/api/mes/plan/index.ts
@@ -96,18 +96,22 @@ export const PlanApi = {
   getPlanByTicketType: async (status: number) => {
     return await request.get({ url: `/mes/plan/getByTicketType?status=` + status })
   },
-    // 产线任务看板
-  getProductPlans: async () => {
-    return await request.get({ url: `/mes/plan/getProductPlans` })
+      // 产线任务看板
+  getProductPlans: async (params?: any) => {
+    return await request.get({ url: `/mes/plan/getProductPlans`, params })
   },
       // 周生产趋势
-  getWeekTrend: async () => {
-    return await request.get({ url: `/mes/plan/getWeekTrend` })
-  },
-  getPlanCapacity: async (type: number) => {
-    return await request.get({ url: `/mes/plan/getPlanCapacity?type=` + type })
-  },
-  getLastDaysRate: async () => {
-    return await request.get({ url: `/mes/plan/getLastDaysRate` })
+  getWeekTrend: async (params?: any) => {
+    return await request.get({ url: `/mes/plan/getWeekTrend`, params })
+  },
+  getPlanCapacity: async (type: number, orgId?: any) => {
+    let url = `/mes/plan/getPlanCapacity?type=` + type
+    if (orgId) {
+      url += `&orgId=` + orgId
+    }
+    return await request.get({ url })
+  },
+  getLastDaysRate: async (params?: any) => {
+    return await request.get({ url: `/mes/plan/getLastDaysRate`, params })
   }
 }
diff --git a/src/views/report/dashboardList/index.vue b/src/views/report/dashboardList/index.vue
index c23a02ce..623b90fa 100644
--- a/src/views/report/dashboardList/index.vue
+++ b/src/views/report/dashboardList/index.vue
@@ -76,7 +76,12 @@
                 alt="封面图"
               />
               <div class="dashboard-card-state">
-                <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="item.state" />
+                <el-tag v-if="item.state === 1" type="success" size="small">
+                  启用
+                </el-tag>
+                <el-tag v-else type="info" size="small">
+                  禁用
+                </el-tag>
               </div>
             </div>
             <div class="dashboard-card-body">
@@ -123,29 +128,53 @@
     v-model="createDialogVisible"
     :title="dialogMode === 'create' ? '新增数据大屏' : '编辑数据大屏'"
     width="600px"
+    draggable
   >
-    <el-form :model="createForm" ref="createFormRef" label-width="80px">
-      <el-form-item label="名称">
+    <el-form :model="createForm" ref="createFormRef" label-width="80px" :rules="createFormRules">
+      <el-form-item label="名称" prop="name">
         <el-input v-model="createForm.name" placeholder="请输入名称" />
       </el-form-item>
-      <el-form-item label="备注">
-        <el-input v-model="createForm.remark" placeholder="请输入备注" />
-      </el-form-item>
-      <el-form-item label="启用状态">
-        <el-select v-model="createForm.state" placeholder="请选择启用状态" class="!w-240px">
+      <el-form-item label="大屏类型" prop="type">
+        <el-select v-model="createForm.type" placeholder="请选择大屏类型" class="!w-240px">
           <el-option
-            v-for="dict in getStrDictOptions(DICT_TYPE.COMMON_STATUS)"
+            v-for="dict in getStrDictOptions('mes_goview_type')"
             :key="dict.value"
             :label="dict.label"
             :value="dict.value"
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="图片路径">
-        <el-input v-model="createForm.indexImage" placeholder="请输入图片路径" />
+      <el-form-item label="产线" prop="orgId">
+        <el-tree-select
+          v-model="createForm.orgId"
+          :data="organizationTree"
+          :props="lineTreeProps"
+          filterable
+          clearable
+          class="!w-240px"
+          placeholder="请选择产线"
+          @change="handleOrgChange"
+        />
       </el-form-item>
-      <el-form-item label="路由路径">
-        <el-input v-model="createForm.route" placeholder="请输入路由路径" />
+      <el-form-item label="设备" v-if="createForm.type === '1'">
+        <el-select
+          v-model="selectedDeviceIds"
+          multiple
+          :multiple-limit="8"
+          collapse-tags
+          collapse-tags-tooltip
+          placeholder="请选择设备（必须选择8个）"
+          clearable
+          filterable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="item in deviceList"
+            :key="item.id"
+            :label="item.deviceName"
+            :value="String(item.id)"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="内容">
         <el-input
@@ -155,6 +184,16 @@
           placeholder="请输入内容"
         />
       </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="createForm.remark" placeholder="请输入备注" />
+      </el-form-item>
+      <el-form-item label="启用状态">
+        <el-switch
+          v-model="createForm.state"
+          :active-value="1"
+          :inactive-value="0"
+        />
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="createDialogVisible = false">取 消</el-button>
@@ -169,20 +208,27 @@
 import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
 import request from '@/config/axios'
 import defaultImage from '@/assets/imgs/logo.png'
+import { OrganizationApi } from '@/api/mes/organization'
+import { handleTree } from '@/utils/tree'
+import { DeviceApi } from '@/api/iot/device'
 
 defineOptions({ name: 'DashboardList' })
 
-const { push } = useRouter()
+const router = useRouter()
 const message = useMessage()
 
 interface DashboardItem {
   id: number
   name: string
   remark: string
-  state: string
+  state: number
   indexImage?: string
   route?: string
   content?: string
+  type?: string
+  orgId?: number | string
+  orgName?: string
+  deviceIds?: string
 }
 
 const loading = ref(false)
@@ -207,12 +253,32 @@ const editingId = ref<number | null>(null)
 const createForm = reactive({
   name: '',
   remark: '',
-  state: '',
+  state: 1,
+  type: '',
+  orgId: undefined as number | string | undefined,
+  orgName: '',
+  deviceIds: '',
   indexImage: '',
   route: '',
   content: ''
 })
 
+const createFormRules = reactive({
+  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '大屏类型不能为空', trigger: 'change' }],
+  orgId: [{ required: true, message: '产线不能为空', trigger: 'change' }]
+})
+
+const organizationTree = ref<any[]>([])
+const lineTreeProps = {
+  label: 'name',
+  children: 'children',
+  value: 'id'
+}
+
+const deviceList = ref<any[]>([])
+const selectedDeviceIds = ref<string[]>([])
+
 const getList = async () => {
   loading.value = true
   try {
@@ -238,21 +304,33 @@ const resetQuery = () => {
 }
 
 const handlePreview = (item: DashboardItem) => {
-  if (!item.route) {
+  const typeRoute = getRouteByType(item.type)
+  const route = typeRoute || item.route || ''
+  if (!route) {
     message.error('未配置预览路由')
     return
   }
-  const path = item.route.startsWith('/') ? item.route : `/${item.route}`
-  push(path)
+  const path = route.startsWith('/') ? route : `/${route}`
+  const queryParams = new URLSearchParams()
+  if (item.orgId) queryParams.append('orgId', String(item.orgId))
+  if (item.type === '1' && item.deviceIds) queryParams.append('deviceIds', item.deviceIds)
+  const queryString = queryParams.toString()
+  const url = router.resolve(path + (queryString ? `?${queryString}` : '')).href
+  window.open(url, '_blank')
 }
 
 const resetCreateForm = () => {
   createForm.name = ''
   createForm.remark = ''
-  createForm.state = ''
+  createForm.state = 1
+  createForm.type = ''
+  createForm.orgId = undefined
+  createForm.orgName = ''
+  createForm.deviceIds = ''
   createForm.indexImage = ''
   createForm.route = ''
   createForm.content = ''
+  selectedDeviceIds.value = []
 }
 
 const openCreateDialog = () => {
@@ -267,18 +345,55 @@ const openEditDialog = (item: DashboardItem) => {
   editingId.value = item.id
   createForm.name = item.name || ''
   createForm.remark = item.remark || ''
-  createForm.state = item.state || ''
+  createForm.state = item.state
+  createForm.type = item.type || ''
+  createForm.orgId = item.orgId || undefined
+  createForm.orgName = item.orgName || ''
+  createForm.deviceIds = item.deviceIds || ''
   createForm.indexImage = item.indexImage || ''
   createForm.route = item.route || ''
   createForm.content = item.content || ''
+  selectedDeviceIds.value = createForm.deviceIds
+    ? createForm.deviceIds.split(',').filter((v) => v)
+    : []
   createDialogVisible.value = true
 }
 
+const getRouteByType = (type?: string) => {
+  if (type === '1') return 'iot/report/dashboardPage/Dashboard1'
+  if (type === '2') return 'iot/report/dashboardPage/Dashboard8'
+  return ''
+}
+
 const submitDialog = async () => {
-  if (!createForm.name) {
-    message.error('名称不能为空')
+  try {
+    await createFormRef.value?.validate()
+  } catch {
     return
   }
+  if (createForm.type === '1') {
+    if (!selectedDeviceIds.value.length) {
+      message.error('设备不能为空')
+      return
+    }
+    if (selectedDeviceIds.value.length !== 8) {
+      message.error('设备必须选择8个')
+      return
+    }
+    createForm.deviceIds = selectedDeviceIds.value.join(',')
+  } else {
+    createForm.deviceIds = ''
+  }
+  if (createForm.orgId) {
+    const org = findOrgNode(organizationTree.value || [], createForm.orgId)
+    createForm.orgName = org?.name || ''
+  } else {
+    createForm.orgName = ''
+  }
+  const route = getRouteByType(createForm.type)
+  if (route) {
+    createForm.route = route
+  }
   if (dialogMode.value === 'edit' && !editingId.value) {
     message.error('缺少数据编号，无法编辑')
     return
@@ -320,8 +435,38 @@ const handleDelete = async (item: DashboardItem) => {
   } catch {}
 }
 
+const loadOrganizationTree = async () => {
+  const data = await OrganizationApi.getOrganizationList()
+  organizationTree.value = handleTree(data, 'id', 'parentId')
+}
+
+const findOrgNode = (nodes: any[], id: any): any | undefined => {
+  for (const node of nodes) {
+    if (String(node.id) === String(id)) return node
+    const children = Array.isArray(node.children) ? node.children : []
+    const found = findOrgNode(children, id)
+    if (found) return found
+  }
+  return undefined
+}
+
+const handleOrgChange = () => {
+  if (!createForm.orgId) {
+    createForm.orgName = ''
+    return
+  }
+  const org = findOrgNode(organizationTree.value || [], createForm.orgId)
+  createForm.orgName = org?.name || ''
+}
+
+const loadDeviceList = async () => {
+  deviceList.value = await DeviceApi.getDeviceList()
+}
+
 onMounted(() => {
   getList()
+  loadOrganizationTree()
+  loadDeviceList()
 })
 </script>
 
diff --git a/src/views/report/dashboardPage/dashboard1/components/DeviceOverview.vue b/src/views/report/dashboardPage/dashboard1/components/DeviceOverview.vue
index f2fd3737..6c7bbb8e 100644
--- a/src/views/report/dashboardPage/dashboard1/components/DeviceOverview.vue
+++ b/src/views/report/dashboardPage/dashboard1/components/DeviceOverview.vue
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { colors } from '../utils'
 import { DashboardApi } from '@/api/dashboard'
 
@@ -32,6 +33,9 @@ interface OverviewItem {
   color: string
 }
 
+const route = useRoute()
+const orgId = route.query.orgId
+
 const overviewItems = ref<OverviewItem[]>([
   { key: 'device', label: '设备数量', value: '0', percent: 0, color: colors.cyan },
   { key: 'running', label: '运行数量', value: '0', percent: 0, color: colors.blue },
@@ -62,7 +66,7 @@ const calcPercent = (part: number, total: number) => {
 
 const loadOverview = async () => {
   try {
-    const res: any = await DashboardApi.getDeviceOperationalStatus()
+    const res: any = await DashboardApi.getDeviceOperationalStatus({ orgId })
     const data = (res && typeof res === 'object' ? (res.data ?? res) : {}) as any
 
     const totalDevices = Number(data.totalDevices ?? 0)
diff --git a/src/views/report/dashboardPage/dashboard1/components/EnergyMonitor.vue b/src/views/report/dashboardPage/dashboard1/components/EnergyMonitor.vue
index d2b7ff4a..fb19dd4e 100644
--- a/src/views/report/dashboardPage/dashboard1/components/EnergyMonitor.vue
+++ b/src/views/report/dashboardPage/dashboard1/components/EnergyMonitor.vue
@@ -21,11 +21,15 @@ v-model="selectedEnergyTypeId" placeholder="请选择" style="width: 120px" size
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import * as echarts from 'echarts'
 import { colors, style } from '../utils'
 import { EnergyTypeApi, EnergyTypeVO } from '@/api/mes/energytype'
 import { EnergyDeviceApi } from '@/api/mes/energydevice'
 
+const route = useRoute()
+const orgId = route.query.orgId
+
 const energyTypes = ref<EnergyTypeVO[]>([])
 const selectedEnergyTypeId = ref<number | undefined>(undefined)
 const chartRef = ref<HTMLElement | null>(null)
@@ -50,7 +54,7 @@ const getChartData = async () => {
   try {
     const res = await EnergyDeviceApi.getLastEnergyStatistics({
       deviceTypeId: selectedEnergyTypeId.value,
-      orgId: 132
+      orgId: orgId
     })
     render(res)
   } catch (e) {
diff --git a/src/views/report/dashboardPage/dashboard1/components/EventReminder.vue b/src/views/report/dashboardPage/dashboard1/components/EventReminder.vue
index d666b15c..8e167742 100644
--- a/src/views/report/dashboardPage/dashboard1/components/EventReminder.vue
+++ b/src/views/report/dashboardPage/dashboard1/components/EventReminder.vue
@@ -33,6 +33,7 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import * as echarts from 'echarts'
 import { DashboardApi, TaskStatisticsData } from '@/api/dashboard'
 import { colors } from '../utils'
@@ -45,6 +46,9 @@ interface EventItem {
 	color: string
 }
 
+const route = useRoute()
+const orgId = route.query.orgId
+
 const chartRef = ref<HTMLElement | null>(null)
 let chart: echarts.ECharts | null = null
 const mode = ref<'device' | 'mold'>('device')
@@ -129,7 +133,7 @@ const applyTaskStatistics = (data: TaskStatisticsData) => {
 
 const loadTaskStatistics = async () => {
 	try {
-		const res = await DashboardApi.getTaskStatistics()
+		const res = await DashboardApi.getTaskStatistics({ orgId })
 		const payload = (res && typeof res === 'object' && 'data' in res ? (res as any).data : res) as
 			| TaskStatisticsData
 			| null
diff --git a/src/views/report/dashboardPage/dashboard1/components/TaskList.vue b/src/views/report/dashboardPage/dashboard1/components/TaskList.vue
index 2c07f1b3..ce4406e6 100644
--- a/src/views/report/dashboardPage/dashboard1/components/TaskList.vue
+++ b/src/views/report/dashboardPage/dashboard1/components/TaskList.vue
@@ -57,6 +57,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
 import type { ElTable } from 'element-plus'
 import { DashboardApi, DashboardTaskItem } from '@/api/dashboard'
 
@@ -70,6 +71,10 @@ interface TaskRow {
 	finishStatusType: '' | 'success' | 'warning' | 'danger' | 'info'
 	resultStatusType: '' | 'success' | 'warning' | 'danger' | 'info'
 }
+
+const route = useRoute()
+const orgId = route.query.orgId
+
 const taskRows = ref<TaskRow[]>([])
 const tableRef = ref<InstanceType<typeof ElTable> | null>(null)
 let scrollTimer: number | undefined
@@ -108,7 +113,7 @@ const mapItemToRow = (item: DashboardTaskItem, index: number): TaskRow => {
 
 const loadTaskList = async () => {
 	try {
-		const res = await DashboardApi.getAllTaskList()
+		const res = await DashboardApi.getAllTaskList({ orgId })
 		const payload = (res && typeof res === 'object' && 'data' in res ? (res as any).data : res) as
 			| DashboardTaskItem[]
 			| null
diff --git a/src/views/report/dashboardPage/dashboard1/index.vue b/src/views/report/dashboardPage/dashboard1/index.vue
index cf9af525..a3d8fa68 100644
--- a/src/views/report/dashboardPage/dashboard1/index.vue
+++ b/src/views/report/dashboardPage/dashboard1/index.vue
@@ -26,6 +26,42 @@
           <el-col :span="14" class="col">
             <div class="center-shell">
               <img class="dashboard-center-image" src="@/assets/imgs/dashboard_img.png" alt="dashboard" />
+              <!-- 上面4个 -->
+              <div v-for="(item, index) in topDevices" :key="'top-' + index" class="device-card top-card" :style="{ left: getTopLeft(index) }">
+                <div class="device-header">
+                  <div class="header-left">
+                    <span class="device-dot"></span>
+                    <span class="device-name" :title="item.deviceName">{{ item.deviceName }}</span>
+                  </div>
+                  <div class="header-right">
+                    <span class="device-id">ID: {{ item.deviceId }}</span>
+                  </div>
+                </div>
+                <div class="device-body">
+                  <div v-for="(attr, aIndex) in item.attributes" :key="aIndex" class="device-row">
+                    <span class="label" :title="attr.attributeName">{{ attr.attributeName }}:</span>
+                    <span class="value">{{ attr.addressValue ?? '-' }} {{ attr.dataUnit || '' }}</span>
+                  </div>
+                </div>
+              </div>
+              <!-- 下面4个 -->
+              <div v-for="(item, index) in bottomDevices" :key="'bottom-' + index" class="device-card bottom-card" :style="{ left: getBottomLeft(index) }">
+                <div class="device-header">
+                  <div class="header-left">
+                    <span class="device-dot"></span>
+                    <span class="device-name" :title="item.deviceName">{{ item.deviceName }}</span>
+                  </div>
+                  <div class="header-right">
+                    <span class="device-id">ID: {{ item.deviceId }}</span>
+                  </div>
+                </div>
+                <div class="device-body">
+                  <div v-for="(attr, aIndex) in item.attributes" :key="aIndex" class="device-row">
+                    <span class="label" :title="attr.attributeName">{{ attr.attributeName }}:</span>
+                    <span class="value">{{ attr.addressValue ?? '-' }} {{ attr.dataUnit || '' }}</span>
+                  </div>
+                </div>
+              </div>
             </div>
           </el-col>
 
@@ -50,6 +86,9 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { DeviceApi } from '@/api/iot/device'
 import DashboardHeader from './components/DashboardHeader.vue'
 import DeviceOverview from './components/DeviceOverview.vue'
 import PaymentMethod from './components/PaymentMethod.vue'
@@ -57,6 +96,66 @@ import EventReminder from './components/EventReminder.vue'
 import TaskList from './components/TaskList.vue'
 import EnergyMonitor from './components/EnergyMonitor.vue'
 import ProductionTrend from './components/ProductionTrend.vue'
+
+const route = useRoute()
+const deviceIds = route.query.deviceIds as string
+
+interface DeviceAttribute {
+  attributeName: string
+  addressValue?: number | string | null
+  dataUnit?: string | null
+}
+
+interface DeviceCardData {
+  deviceName: string
+  deviceId: number
+  attributes: DeviceAttribute[]
+}
+
+const topDevices = ref<DeviceCardData[]>([])
+const bottomDevices = ref<DeviceCardData[]>([])
+
+const getTopLeft = (index: number) => {
+  // 简单均匀分布，可根据实际需求微调
+  const positions = ['5%', '30%', '55%', '80%']
+  return positions[index] || '0'
+}
+
+const getBottomLeft = (index: number) => {
+  const positions = ['5%', '30%', '55%', '80%']
+  return positions[index] || '0'
+}
+
+const loadDeviceAttributes = async () => {
+  if (!deviceIds) return
+  try {
+    const res = await DeviceApi.getDeviceAttributeBatchList({ deviceIds })
+    const list = (res && Array.isArray(res) ? res : []) as any[]
+    
+    // 假设返回的 list 顺序对应传入的 deviceIds 顺序，或者根据 deviceId 匹配
+    // 这里简单按顺序分配前4个给 top，后4个给 bottom
+    const cards: DeviceCardData[] = list.map((d: any) => {
+      return {
+        deviceName: d.deviceName || 'Device',
+        deviceId: d.deviceId,
+        attributes: (d.attributes || []).map((attr: any) => ({
+          attributeName: attr.attributeName || '-',
+          addressValue: attr.addressValue,
+          dataUnit: attr.dataUnit
+        }))
+      }
+    })
+
+    topDevices.value = cards.slice(0, 4)
+    bottomDevices.value = cards.slice(4, 8)
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+onMounted(() => {
+  loadDeviceAttributes()
+})
 </script>
 
 <style scoped>
@@ -186,6 +285,118 @@ main {
   border: 1px solid rgba(30,64,175,0.55);
   background: rgba(2,6,23,0.18);
   padding: 10px;
+  position: relative; /* 用于定位内部绝对定位的设备卡片 */
+}
+
+.device-card {
+  position: absolute;
+  width: 18%; /* 约占宽度的1/5，留出间隔 */
+  min-width: 120px;
+  background: rgba(15, 23, 42, 0.85);
+  border: 1px solid rgba(56, 189, 248, 0.4);
+  border-radius: 6px;
+  padding: 8px;
+  color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.top-card {
+  top: 6%;
+}
+
+.bottom-card {
+  bottom: 5%;
+}
+
+.device-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
+  padding-bottom: 4px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  flex: 1;
+  margin-right: 8px;
+}
+
+.header-right {
+  flex-shrink: 0;
+}
+
+.device-dot {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 4px 0 4px 6px;
+  border-color: transparent transparent transparent #38bdf8;
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.device-name {
+  font-size: 14px;
+  font-weight: bold;
+  color: #e5f0ff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.device-id {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.device-body {
+  font-size: 12px;
+  height: 100px; /* 固定高度，内容不足留白，内容多则滚动 */
+  overflow-y: auto; /* 启用垂直滚动 */
+  padding-right: 4px; /* 防止滚动条遮挡内容 */
+}
+
+/* 滚动条样式 */
+.device-body::-webkit-scrollbar {
+  width: 4px;
+}
+
+.device-body::-webkit-scrollbar-thumb {
+  background: rgba(56, 189, 248, 0.3);
+  border-radius: 2px;
+}
+
+.device-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.device-row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+.device-row .label {
+  color: #94a3b8;
+  margin-right: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 60%;
+}
+
+.device-row .value {
+  color: #cbd5e1;
+  text-align: right;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .dashboard-center-image {
diff --git a/src/views/report/dashboardPage/dashboard8/components/DayCapacity.vue b/src/views/report/dashboardPage/dashboard8/components/DayCapacity.vue
index e4762b3f..344b32c4 100644
--- a/src/views/report/dashboardPage/dashboard8/components/DayCapacity.vue
+++ b/src/views/report/dashboardPage/dashboard8/components/DayCapacity.vue
@@ -41,10 +41,14 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
 import * as echarts from 'echarts'
 import { colors, animateCount, style } from '../utils'
 import { PlanApi } from '@/api/mes/plan'
 
+const route = useRoute()
+const orgId = route.query.orgId
+
 type CapacityData = {
   orders: number
   scheduled: number
@@ -77,7 +81,7 @@ const mapCapacity = (raw: any): CapacityData => {
 
 const loadDayCapacity = async () => {
   try {
-    const raw = await PlanApi.getPlanCapacity(1)
+    const raw = await PlanApi.getPlanCapacity(1, orgId)
     const mapped = mapCapacity(raw || {})
     day.orders = mapped.orders
     day.scheduled = mapped.scheduled
diff --git a/src/views/report/dashboardPage/dashboard8/components/EnergyTrend.vue b/src/views/report/dashboardPage/dashboard8/components/EnergyTrend.vue
index 642ef5d7..5e03082a 100644
--- a/src/views/report/dashboardPage/dashboard8/components/EnergyTrend.vue
+++ b/src/views/report/dashboardPage/dashboard8/components/EnergyTrend.vue
@@ -23,11 +23,15 @@ v-model="selectedEnergyTypeId" placeholder="请选择" class="energy-type-select
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import * as echarts from 'echarts'
 import { colors, style } from '../utils'
 import { EnergyTypeApi, EnergyTypeVO } from '@/api/mes/energytype'
 import { EnergyDeviceApi } from '@/api/mes/energydevice'
 
+const route = useRoute()
+const orgId = route.query.orgId
+
 const energyTypes = ref<EnergyTypeVO[]>([])
 const selectedEnergyTypeId = ref<number | undefined>(undefined)
 const chartRef = ref<HTMLElement | null>(null)
@@ -52,7 +56,7 @@ const getChartData = async () => {
   try {
     const res = await EnergyDeviceApi.getLatestSevenDaysStatistics({
       deviceTypeId: selectedEnergyTypeId.value,
-      orgId: 132
+      orgId: orgId
     })
     render(res)
   } catch (e) {
diff --git a/src/views/report/dashboardPage/dashboard8/components/MonthCapacity.vue b/src/views/report/dashboardPage/dashboard8/components/MonthCapacity.vue
index 0f260689..e0e612f0 100644
--- a/src/views/report/dashboardPage/dashboard8/components/MonthCapacity.vue
+++ b/src/views/report/dashboardPage/dashboard8/components/MonthCapacity.vue
@@ -41,10 +41,14 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
 import * as echarts from 'echarts'
 import { colors, animateCount, style } from '../utils'
 import { PlanApi } from '@/api/mes/plan'
 
+const route = useRoute()
+const orgId = route.query.orgId
+
 type CapacityData = {
   orders: number
   scheduled: number
@@ -77,7 +81,7 @@ const mapCapacity = (raw: any): CapacityData => {
 
 const loadMonthCapacity = async () => {
   try {
-    const raw = await PlanApi.getPlanCapacity(2)
+    const raw = await PlanApi.getPlanCapacity(2, orgId)
     const mapped = mapCapacity(raw || {})
     month.orders = mapped.orders
     month.scheduled = mapped.scheduled
diff --git a/src/views/report/dashboardPage/dashboard8/components/QualityTrend.vue b/src/views/report/dashboardPage/dashboard8/components/QualityTrend.vue
index fb4a272e..4ee08af9 100644
--- a/src/views/report/dashboardPage/dashboard8/components/QualityTrend.vue
+++ b/src/views/report/dashboardPage/dashboard8/components/QualityTrend.vue
@@ -17,10 +17,14 @@
 
 <script setup lang="ts">
 import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import * as echarts from 'echarts'
 import { useChart, colors, style } from '../utils'
 import { PlanApi } from '@/api/mes/plan'
 
+const route = useRoute()
+const orgId = route.query.orgId
+
 const { init } = useChart('chart-quality')
 
 const last7Days: string[] = []
@@ -71,7 +75,7 @@ onMounted(async () => {
   let seriesData = passRate.slice()
 
   try {
-    const data = await PlanApi.getLastDaysRate()
+    const data = await PlanApi.getLastDaysRate({ orgId })
     const list = normalizeQualityData(data)
     if (list.length > 0) {
       xAxisData = list.map((item) => item.label)
diff --git a/src/views/report/dashboardPage/dashboard8/components/RealAlarm.vue b/src/views/report/dashboardPage/dashboard8/components/RealAlarm.vue
index e2ae3a70..fb9833fb 100644
--- a/src/views/report/dashboardPage/dashboard8/components/RealAlarm.vue
+++ b/src/views/report/dashboardPage/dashboard8/components/RealAlarm.vue
@@ -29,8 +29,12 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { DeviceWarningRecordApi, DeviceWarningRecordVO } from '@/api/iot/deviceWarningRecord'
 
+const route = useRoute()
+const orgId = route.query.orgId
+
 const alarms = ref<any[]>([])
 
 const isAnimating = ref(false)
@@ -38,7 +42,7 @@ let timer: ReturnType<typeof setInterval> | null = null
 
 const getAlarms = async () => {
   try {
-    const data = await DeviceWarningRecordApi.getList() || []
+    const data = await DeviceWarningRecordApi.getList({ orgId }) || []
     console.log('data',data)
     
     alarms.value = data.map((item: DeviceWarningRecordVO) => {
diff --git a/src/views/report/dashboardPage/dashboard8/components/TaskBoard.vue b/src/views/report/dashboardPage/dashboard8/components/TaskBoard.vue
index fa2e1498..0a2dae65 100644
--- a/src/views/report/dashboardPage/dashboard8/components/TaskBoard.vue
+++ b/src/views/report/dashboardPage/dashboard8/components/TaskBoard.vue
@@ -51,8 +51,12 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { PlanApi, PlanVO } from '@/api/mes/plan'
 
+const route = useRoute()
+const orgId = route.query.orgId
+
 const colors = {
   blue: '#1e90ff',
   cyan: '#22d3ee',
@@ -109,7 +113,7 @@ onMounted(async () => {
   setBodyHeight()
   startScroll()
   window.addEventListener('resize', setBodyHeight)
-  tasks.value = await PlanApi.getProductPlans()
+  tasks.value = await PlanApi.getProductPlans({ orgId })
   // console.log(tasks.value)
 })
 
diff --git a/src/views/report/dashboardPage/dashboard8/components/WeekTrend.vue b/src/views/report/dashboardPage/dashboard8/components/WeekTrend.vue
index b678f20b..c5daccef 100644
--- a/src/views/report/dashboardPage/dashboard8/components/WeekTrend.vue
+++ b/src/views/report/dashboardPage/dashboard8/components/WeekTrend.vue
@@ -20,10 +20,14 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
 import * as echarts from 'echarts'
 import { colors, style } from '../utils'
 import { PlanApi } from  '@/api/mes/plan'
 
+const route = useRoute()
+const orgId = route.query.orgId
+
 const weekDays = ref()
 const weekPlan = ref()
 const weekReal = ref()
@@ -76,7 +80,7 @@ const resizeHandler = () => {
 
 onMounted( async() => { 
   window.addEventListener('resize', resizeHandler)
-  const data = await PlanApi.getWeekTrend()
+  const data = await PlanApi.getWeekTrend({ orgId })
   weekDays.value = data.weekDays
   weekPlan.value = data.weekPlan
   weekReal.value = data.weekReal