修改查询数据页面，暂存版本1

cmc-temperature-ui/src/views/temperature/temMonitor.vue

@@ -68,17 +68,19 @@
           <div v-else>
             <!-- 数据展示区域 -->
             <div class="table-container">
-              <el-table :data="tableData" border stripe :style="{ minWidth: tableMinWidth + 'px' }" :max-height="600"
-                v-loading="loading" :scrollbar-always-on="true">
+              <el-table :data="tableData" border stripe style="width: 100%" :max-height="600" v-loading="loading">
                 <!-- 序号列 -->
                 <el-table-column type="index" label="序号" width="60" align="center" fixed="left" />
-
                 <!-- 时间列 -->
                 <el-table-column prop="datetime" label="时间" width="160" align="center" fixed="left" />
-
                 <!-- 动态生成传感器列 -->
-                <el-table-column v-for="sensor in sensorColumns" :key="sensor.sensorName" :prop="sensor.sensorName"
-                  :label="sensor.sensorName" width="100" align="center" show-overflow-tooltip>
+                <el-table-column v-for="sensor in sensorColumns" :key="sensor.sensorNo" :prop="sensor.sensorName"
+                  :label="sensor.sensorName" width="120" align="center" show-overflow-tooltip>
+                  <template #default="scope">
+                    <span>
+                      {{ scope.row[sensor.sensorName] ? scope.row[sensor.sensorName].toFixed(2) : '-' }}
+                    </span>
+                  </template>
                 </el-table-column>
               </el-table>
             </div>
@@ -98,7 +100,6 @@
 
 <script setup>
 import { ref, reactive, computed, onMounted } from 'vue'
-import { Search, Refresh, Download } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { listTemperature, listByInfo } from '@/api/monitoring/temperature'
 import { listChannel, channelInfoList } from '@/api/monitoring/channel'
@@ -173,13 +174,6 @@ const hasData = computed(() => {
   return totalCount.value > 0
 })
 
-// 计算表格最小宽度
-const tableMinWidth = computed(() => {
-  const baseWidth = 220 // 序号列(60) + 时间列(160)
-  const sensorWidth = sensorColumns.value.length * 100 // 每个传感器列100px
-  return Math.max(800, baseWidth + sensorWidth) // 最小800px
-})
-
 // 表格数据相关
 const tableData = ref([])
 const sensorColumns = ref([])
@@ -193,14 +187,19 @@ const processTableData = () => {
     return
   }
 
-  // 获取所有唯一的传感器编号
-  const sensorNos = [...new Set(tableList.value.map(item => item.channel.info))]
+  // 获取所有唯一的传感器编号和对应的设备信息
+  const sensorMap = new Map()
+  tableList.value.forEach(item => {
+    if (!sensorMap.has(item.sensorNo)) {
+      sensorMap.set(item.sensorNo, {
+        sensorNo: item.sensorNo,
+        sensorName: item.channel?.info || `传感器${item.sensorNo}`
+      })
+    }
+  })
 
   // 生成传感器列配置
-  sensorColumns.value = sensorNos.map(sensorNo => ({
-    sensorNo: sensorNo,
-    sensorName: `${sensorNo}`
-  }))
+  sensorColumns.value = Array.from(sensorMap.values()).sort((a, b) => a.sensorNo - b.sensorNo)
 
   // 按时间分组数据
   const timeGroups = {}
@@ -208,19 +207,21 @@ const processTableData = () => {
     if (!timeGroups[item.datetime]) {
       timeGroups[item.datetime] = {
         datetime: item.datetime,
-        ...sensorNos.reduce((acc, sensorNo) => {
-          acc[sensorNo] = null
+        ...sensorColumns.value.reduce((acc, sensor) => {
+          acc[sensor.sensorName] = null
           return acc
         }, {})
       }
     }
-    timeGroups[item.datetime][item.channel.info] = item.data
+    const sensorName = item.channel?.info || `传感器${item.sensorNo}`
+    timeGroups[item.datetime][sensorName] = item.data
   })
 
   // 转换为数组并排序
   tableData.value = Object.values(timeGroups).sort((a, b) =>
     new Date(b.datetime) - new Date(a.datetime)
   )
+  console.log('处理后的表格数据:', tableData.value)
 }
 
 // 分页处理
@@ -244,7 +245,10 @@ const handleSearch = async () => {
       ElMessage.warning('请选择时间范围')
       return
     }
-
+    if (!searchForm.Info || searchForm.Info.trim() === '') {
+      ElMessage.warning('请选择查询条件')
+      return
+    }
     const res = await listByInfo({
       startTime: searchForm.timeRange[0],
       endTime: searchForm.timeRange[1],