修改监测数据，新增前端分页

cmc-temperature-back/cmc-monitoring/src/main/java/com/ruoyi/monitoring/controller/CmcTemperatureController.java

@@ -65,7 +65,8 @@ public class CmcTemperatureController extends BaseController {
         QueryWrapper qw = getQW(cmcTemperature, Info);
         List<CmcTemperature> records = cmcTemperatureService.list(qw);
         List<CmcTemperature> temperatureList = new ArrayList<>();
-        if (records.size() > 2) {
+        int total = 0;
+        if (records.size() > 0) {
             long diffInMillis;
             // 第30条与第31条数据时间差 毫秒
             if (channelSize > 30) {
@@ -102,14 +103,17 @@ public class CmcTemperatureController extends BaseController {
                     }
                 }
             }
+            total = temperatureList.size() / channelSize;
             if (temperatureList.size() >= page.getPageSize()) {
-                if (page.getPageNumber() > 1)
+                if (page.getPageNumber() > 1) {
+                    temperatureList.subList((int) (page.getPageSize() * (page.getPageNumber())), temperatureList.size()).clear();
                     temperatureList.subList(0, (int) (page.getPageSize() * (page.getPageNumber() - 1))).clear();
+                }
                 else
                     temperatureList.subList((int) page.getPageSize(), temperatureList.size()).clear();
             }
         }
-        return getPageData(temperatureList).total(temperatureList.size() / channelSize);
+        return getPageData(temperatureList).total(total);
     }
 
     /**

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

@@ -84,12 +84,18 @@
                     </el-table-column>
                   </el-table>
                 </div>
+                <!-- 分页 -->
+                <div class="pagination-container">
+                  <el-pagination background v-model:current-page="queryParams.pageNumber"
+                    v-model:page-size="queryParams.pageSize" :total="totalCount" layout="total, prev, pager, next"
+                    @current-change="handleCurrentChange" />
+                </div>
               </el-tab-pane>
 
               <!-- 分析图表标签页 -->
               <el-tab-pane label="分析图表" name="chart">
                 <div class="chart-container">
-                  <TemperatureChart ref="chartRef" :chart-data="tableData" :sensor-columns="sensorColumns" />
+                  <TemperatureChart ref="chartRef" :chart-data="chartData" :sensor-columns="chartSensorColumns" />
                 </div>
               </el-tab-pane>
             </el-tabs>
@@ -97,11 +103,6 @@
         </div>
       </el-card>
     </div>
-    <!-- 分页 -->
-    <div class="pagination-container">
-      <el-pagination v-model:current-page="queryParams.pageNumber" v-model:page-size="queryParams.pageSize"
-        :total="totalCount" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange" />
-    </div>
   </div>
 </template>
 
@@ -109,7 +110,7 @@
 import { ref, reactive, computed, onMounted, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Search, Refresh, Download } from '@element-plus/icons-vue'
-import { listTemperature, listByInfo } from '@/api/monitoring/temperature'
+import { listTemperature, listByInfo, listAllByInfo } from '@/api/monitoring/temperature'
 import { listChannel, channelInfoList } from '@/api/monitoring/channel'
 import TemperatureChart from './TemperatureChart.vue'
 
@@ -144,7 +145,11 @@ const hasData = computed(() => {
 // 表格数据相关
 const tableData = ref([])
 const sensorColumns = ref([])
-const tableList = ref([])
+
+// 图表数据相关
+const chartData = ref([])
+const chartSensorColumns = ref([])
+const allDataList = ref([])
 
 const getDeviceList = () => {
   channelInfoList().then(res => {
@@ -156,9 +161,51 @@ const getDeviceList = () => {
 }
 getDeviceList()
 
-// 处理表格数据，按sensorNo分组
+// 处理图表数据，使用全部数据
+const processChartData = (dataList) => {
+  if (!dataList || dataList.length === 0) {
+    chartData.value = []
+    chartSensorColumns.value = []
+    return
+  }
+
+  // 获取所有唯一的传感器编号和对应的设备信息
+  const sensorMap = new Map()
+  dataList.forEach(item => {
+    if (!sensorMap.has(item.sensorNo)) {
+      sensorMap.set(item.sensorNo, {
+        sensorNo: item.sensorNo,
+        sensorName: item.channel?.info || `传感器${item.sensorNo}`
+      })
+    }
+  })
+
+  // 生成传感器列配置
+  chartSensorColumns.value = Array.from(sensorMap.values()).sort((a, b) => a.sensorNo - b.sensorNo)
+
+  // 按时间分组数据
+  const timeGroups = {}
+  dataList.forEach(item => {
+    if (!timeGroups[item.datetime]) {
+      timeGroups[item.datetime] = {
+        datetime: item.datetime,
+        ...chartSensorColumns.value.reduce((acc, sensor) => {
+          acc[sensor.sensorName] = null
+          return acc
+        }, {})
+      }
+    }
+    const sensorName = item.channel?.info || `传感器${item.sensorNo}`
+    timeGroups[item.datetime][sensorName] = item.data
+  })
+
+  // 转换为数组并排序
+  chartData.value = Object.values(timeGroups)
+}
+
+// 处理表格数据，使用全部数据并进行前端分页
 const processTableData = () => {
-  if (!tableList.value || tableList.value.length === 0) {
+  if (!allDataList.value || allDataList.value.length === 0) {
     tableData.value = []
     sensorColumns.value = []
     return
@@ -166,7 +213,7 @@ const processTableData = () => {
 
   // 获取所有唯一的传感器编号和对应的设备信息
   const sensorMap = new Map()
-  tableList.value.forEach(item => {
+  allDataList.value.forEach(item => {
     if (!sensorMap.has(item.sensorNo)) {
       sensorMap.set(item.sensorNo, {
         sensorNo: item.sensorNo,
@@ -180,7 +227,7 @@ const processTableData = () => {
 
   // 按时间分组数据
   const timeGroups = {}
-  tableList.value.forEach(item => {
+  allDataList.value.forEach(item => {
     if (!timeGroups[item.datetime]) {
       timeGroups[item.datetime] = {
         datetime: item.datetime,
@@ -193,42 +240,82 @@ const processTableData = () => {
     const sensorName = item.channel?.info || `传感器${item.sensorNo}`
     timeGroups[item.datetime][sensorName] = item.data
   })
-
+  
   // 转换为数组并排序
-  tableData.value = Object.values(timeGroups)
+  const allTableData = Object.values(timeGroups)
+
+  // 前端分页处理
+  const startIndex = (queryParams.value.pageNumber - 1) * queryParams.value.pageSize
+  const endIndex = startIndex + queryParams.value.pageSize
+  tableData.value = allTableData.slice(startIndex, endIndex)
 }
 
 const handleCurrentChange = (page) => {
   queryParams.value.pageNumber = page
-  console.log(queryParams.value)
-  // handleSearch()
+  // 前端分页，直接重新处理表格数据
+  processTableData()
 }
 
 // 查询监控数据
 const handleSearch = async () => {
-  loading.value = true
-  try {
-    // 验证表单
-    if (!searchForm.timeRange || searchForm.timeRange.length === 0) {
-      ElMessage.warning('请选择时间范围')
-      return
-    }
-    if (!searchForm.Info || searchForm.Info.trim() === '') {
-      ElMessage.warning('请选择查询条件')
+  // 验证表单
+  if (!searchForm.timeRange || searchForm.timeRange.length === 0) {
+    ElMessage.warning('请选择时间范围')
+    return
+  }
+  if (!searchForm.Info || searchForm.Info.trim() === '') {
+    ElMessage.warning('请选择查询条件')
+    return
+  }
+
+  // 检查时间范围是否超过31天
+  const startDate = new Date(searchForm.timeRange[0])
+  const endDate = new Date(searchForm.timeRange[1])
+  const daysDiff = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1
+
+  if (daysDiff > 31) {
+    // 使用 Element Plus 的确认对话框
+    const { ElMessageBox } = await import('element-plus')
+    try {
+      await ElMessageBox.confirm(
+        '查询超过1个月，数据量过大，可能会导致卡顿或崩溃，是否继续？',
+        '查询确认',
+        {
+          confirmButtonText: '继续查询',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }
+      )
+    } catch (error) {
+      // 用户点击取消
       return
     }
+  }
+
+  loading.value = true
+  queryParams.value.pageNumber = 1
+  try {
     let startTime = searchForm.timeRange[0] + ' 00:00:00'
     let endTime = searchForm.timeRange[1] + ' 23:59:59'
-    const res = await listByInfo({
+
+    // 使用 listAllByInfo 获取全部数据
+    const allDataRes = await listAllByInfo({
       startTime: startTime,
       endTime: endTime,
-      Info: searchForm.Info,
-      ...queryParams.value
+      Info: searchForm.Info
     })
-    totalCount.value = res.total
-    tableList.value = res.list
 
-    // 处理数据，生成表格数据
+    // 为图表和表格准备全部数据
+    const allData = allDataRes.list || allDataRes
+    totalCount.value = Number(allDataRes.total)
+
+    // 存储全部数据
+    allDataList.value = allData
+
+    // 处理全部数据，生成图表数据
+    processChartData(allData)
+
+    // 处理全部数据，生成表格数据（前端分页）
     processTableData()
 
     ElMessage.success('查询成功')
@@ -245,9 +332,13 @@ const handleReset = () => {
   searchForm.timeRange = []
   searchForm.Info = ''
   totalCount.value = 0
-  tableList.value = []
   tableData.value = []
   sensorColumns.value = []
+  chartData.value = []
+  chartSensorColumns.value = []
+  allDataList.value = []
+  // 重置分页参数
+  queryParams.value.pageNumber = 1
   ElMessage.info('已重置搜索条件')
 }