浏览代码

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

余思翰 2 周前
父节点
当前提交
00f3365a54
共有 1 个文件被更改,包括 28 次插入24 次删除
  1. 28
    24
      cmc-temperature-ui/src/views/temperature/temMonitor.vue

+ 28
- 24
cmc-temperature-ui/src/views/temperature/temMonitor.vue 查看文件

68
           <div v-else>
68
           <div v-else>
69
             <!-- 数据展示区域 -->
69
             <!-- 数据展示区域 -->
70
             <div class="table-container">
70
             <div class="table-container">
71
-              <el-table :data="tableData" border stripe :style="{ minWidth: tableMinWidth + 'px' }" :max-height="600"
72
-                v-loading="loading" :scrollbar-always-on="true">
71
+              <el-table :data="tableData" border stripe style="width: 100%" :max-height="600" v-loading="loading">
73
                 <!-- 序号列 -->
72
                 <!-- 序号列 -->
74
                 <el-table-column type="index" label="序号" width="60" align="center" fixed="left" />
73
                 <el-table-column type="index" label="序号" width="60" align="center" fixed="left" />
75
-
76
                 <!-- 时间列 -->
74
                 <!-- 时间列 -->
77
                 <el-table-column prop="datetime" label="时间" width="160" align="center" fixed="left" />
75
                 <el-table-column prop="datetime" label="时间" width="160" align="center" fixed="left" />
78
-
79
                 <!-- 动态生成传感器列 -->
76
                 <!-- 动态生成传感器列 -->
80
-                <el-table-column v-for="sensor in sensorColumns" :key="sensor.sensorName" :prop="sensor.sensorName"
81
-                  :label="sensor.sensorName" width="100" align="center" show-overflow-tooltip>
77
+                <el-table-column v-for="sensor in sensorColumns" :key="sensor.sensorNo" :prop="sensor.sensorName"
78
+                  :label="sensor.sensorName" width="120" align="center" show-overflow-tooltip>
79
+                  <template #default="scope">
80
+                    <span>
81
+                      {{ scope.row[sensor.sensorName] ? scope.row[sensor.sensorName].toFixed(2) : '-' }}
82
+                    </span>
83
+                  </template>
82
                 </el-table-column>
84
                 </el-table-column>
83
               </el-table>
85
               </el-table>
84
             </div>
86
             </div>
98
 
100
 
99
 <script setup>
101
 <script setup>
100
 import { ref, reactive, computed, onMounted } from 'vue'
102
 import { ref, reactive, computed, onMounted } from 'vue'
101
-import { Search, Refresh, Download } from '@element-plus/icons-vue'
102
 import { ElMessage } from 'element-plus'
103
 import { ElMessage } from 'element-plus'
103
 import { listTemperature, listByInfo } from '@/api/monitoring/temperature'
104
 import { listTemperature, listByInfo } from '@/api/monitoring/temperature'
104
 import { listChannel, channelInfoList } from '@/api/monitoring/channel'
105
 import { listChannel, channelInfoList } from '@/api/monitoring/channel'
173
   return totalCount.value > 0
174
   return totalCount.value > 0
174
 })
175
 })
175
 
176
 
176
-// 计算表格最小宽度
177
-const tableMinWidth = computed(() => {
178
-  const baseWidth = 220 // 序号列(60) + 时间列(160)
179
-  const sensorWidth = sensorColumns.value.length * 100 // 每个传感器列100px
180
-  return Math.max(800, baseWidth + sensorWidth) // 最小800px
181
-})
182
-
183
 // 表格数据相关
177
 // 表格数据相关
184
 const tableData = ref([])
178
 const tableData = ref([])
185
 const sensorColumns = ref([])
179
 const sensorColumns = ref([])
193
     return
187
     return
194
   }
188
   }
195
 
189
 
196
-  // 获取所有唯一的传感器编号
197
-  const sensorNos = [...new Set(tableList.value.map(item => item.channel.info))]
190
+  // 获取所有唯一的传感器编号和对应的设备信息
191
+  const sensorMap = new Map()
192
+  tableList.value.forEach(item => {
193
+    if (!sensorMap.has(item.sensorNo)) {
194
+      sensorMap.set(item.sensorNo, {
195
+        sensorNo: item.sensorNo,
196
+        sensorName: item.channel?.info || `传感器${item.sensorNo}`
197
+      })
198
+    }
199
+  })
198
 
200
 
199
   // 生成传感器列配置
201
   // 生成传感器列配置
200
-  sensorColumns.value = sensorNos.map(sensorNo => ({
201
-    sensorNo: sensorNo,
202
-    sensorName: `${sensorNo}`
203
-  }))
202
+  sensorColumns.value = Array.from(sensorMap.values()).sort((a, b) => a.sensorNo - b.sensorNo)
204
 
203
 
205
   // 按时间分组数据
204
   // 按时间分组数据
206
   const timeGroups = {}
205
   const timeGroups = {}
208
     if (!timeGroups[item.datetime]) {
207
     if (!timeGroups[item.datetime]) {
209
       timeGroups[item.datetime] = {
208
       timeGroups[item.datetime] = {
210
         datetime: item.datetime,
209
         datetime: item.datetime,
211
-        ...sensorNos.reduce((acc, sensorNo) => {
212
-          acc[sensorNo] = null
210
+        ...sensorColumns.value.reduce((acc, sensor) => {
211
+          acc[sensor.sensorName] = null
213
           return acc
212
           return acc
214
         }, {})
213
         }, {})
215
       }
214
       }
216
     }
215
     }
217
-    timeGroups[item.datetime][item.channel.info] = item.data
216
+    const sensorName = item.channel?.info || `传感器${item.sensorNo}`
217
+    timeGroups[item.datetime][sensorName] = item.data
218
   })
218
   })
219
 
219
 
220
   // 转换为数组并排序
220
   // 转换为数组并排序
221
   tableData.value = Object.values(timeGroups).sort((a, b) =>
221
   tableData.value = Object.values(timeGroups).sort((a, b) =>
222
     new Date(b.datetime) - new Date(a.datetime)
222
     new Date(b.datetime) - new Date(a.datetime)
223
   )
223
   )
224
+  console.log('处理后的表格数据:', tableData.value)
224
 }
225
 }
225
 
226
 
226
 // 分页处理
227
 // 分页处理
244
       ElMessage.warning('请选择时间范围')
245
       ElMessage.warning('请选择时间范围')
245
       return
246
       return
246
     }
247
     }
247
-
248
+    if (!searchForm.Info || searchForm.Info.trim() === '') {
249
+      ElMessage.warning('请选择查询条件')
250
+      return
251
+    }
248
     const res = await listByInfo({
252
     const res = await listByInfo({
249
       startTime: searchForm.timeRange[0],
253
       startTime: searchForm.timeRange[0],
250
       endTime: searchForm.timeRange[1],
254
       endTime: searchForm.timeRange[1],

正在加载...
取消
保存