新增时刻温度图表，联动温度趋势图

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

@@ -63,8 +63,7 @@ public class CmcTemperatureController extends BaseController {
         int channelSize = cmcChannelService.listChannel(channel).size();
         page.setPageSize(page.getPageSize() * channelSize);
         QueryWrapper qw = getQW(cmcTemperature, Info);
-        Page<CmcTemperature> result = cmcTemperatureService.page(page, qw);
-        List<CmcTemperature> records = result.getRecords();
+        List<CmcTemperature> records = cmcTemperatureService.list(qw);
         List<CmcTemperature> temperatureList = new ArrayList<>();
         if (records.size() > 2) {
             long diffInMillis;
@@ -103,6 +102,10 @@ public class CmcTemperatureController extends BaseController {
                         }
                     }
                 }
+                if (page.getPageNumber() > 1)
+                    temperatureList.subList(0, (int) (page.getPageSize() * (page.getPageNumber() - 1))).clear();
+                else
+                    temperatureList.subList((int) page.getPageSize() * 1, temperatureList.size()).clear();
         }
         return getPageData(temperatureList).total(temperatureList.size() / channelSize);
     }

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

@@ -1,7 +1,10 @@
 <template>
   <div class="temperature-chart">
     <div class="chart-container">
-      <div ref="chartRef" class="chart" style="width: 100%; height: 500px;"></div>
+      <!-- 趋势图 -->
+      <div ref="trendChartRef" class="trend-chart" style="width: 60%; height: 600px;"></div>
+      <!-- 时刻温度对比图 -->
+      <div ref="momentChartRef" class="moment-chart" style="width: 40%; height: 600px;"></div>
     </div>
   </div>
 </template>
@@ -23,13 +26,21 @@ const props = defineProps({
 })
 
 // 响应式数据
-const chartRef = ref(null)
-let chartInstance = null
+const trendChartRef = ref(null)
+const momentChartRef = ref(null)
+let trendChartInstance = null
+let momentChartInstance = null
+
+// 当前选中的时刻数据
+const selectedMoment = ref(null)
 
 // 暴露方法给父组件调用
 const resizeChart = () => {
-  if (chartInstance) {
-    chartInstance.resize()
+  if (trendChartInstance) {
+    trendChartInstance.resize()
+  }
+  if (momentChartInstance) {
+    momentChartInstance.resize()
   }
 }
 
@@ -40,59 +51,58 @@ defineExpose({
 
 // 初始化图表
 const initChart = () => {
-  if (chartRef.value) {
-    chartInstance = echarts.init(chartRef.value)
-    updateChart()
+  if (trendChartRef.value && momentChartRef.value) {
+    trendChartInstance = echarts.init(trendChartRef.value)
+    momentChartInstance = echarts.init(momentChartRef.value)
+    updateCharts()
   }
 }
 
-  // 更新图表数据
-  const updateChart = () => {
-    if (!chartInstance || !props.chartData || props.chartData.length === 0) {
-      return
-    }
+// 更新图表数据
+const updateCharts = () => {
+  if (!trendChartInstance || !momentChartInstance || !props.chartData || props.chartData.length === 0) {
+    return
+  }
 
-    // 准备图表数据 - 按时间排序
-    const sortedData = [...props.chartData].sort((a, b) => new Date(a.datetime) - new Date(b.datetime))
-    const series = []
-
-    // 为每个传感器创建数据系列
-    props.sensorColumns.forEach(sensor => {
-      // 过滤出有效的数据点
-      const validDataPoints = sortedData
-        .map(item => {
-          const value = item[sensor.sensorName]
-          return {
-            datetime: item.datetime,
-            value: value !== null && value !== undefined && !isNaN(value) ? parseFloat(value) : null
-          }
-        })
-        .filter(point => point.value !== null)
-
-      // 只有当传感器有有效数据时才添加到系列中
-      if (validDataPoints.length > 0) {
-        series.push({
-          name: sensor.sensorName,
-          type: 'line',
-          data: validDataPoints.map(point => [point.datetime, point.value]),
-          showSymbol: false,
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 6,
-          lineStyle: {
-            width: 1
-          },
-          itemStyle: {
-            borderWidth: 1
-          }
-        })
-      }
-    })
+  // 准备图表数据 - 按时间排序
+  const sortedData = [...props.chartData].sort((a, b) => new Date(a.datetime) - new Date(b.datetime))
+  const series = []
 
+  // 为每个传感器创建数据系列
+  props.sensorColumns.forEach(sensor => {
+    // 过滤出有效的数据点
+    const validDataPoints = sortedData
+      .map(item => {
+        const value = item[sensor.sensorName]
+        return {
+          datetime: item.datetime,
+          value: value !== null && value !== undefined && !isNaN(value) ? parseFloat(value) : null
+        }
+      })
+      .filter(point => point.value !== null)
 
+    // 只有当传感器有有效数据时才添加到系列中
+    if (validDataPoints.length > 0) {
+      series.push({
+        name: sensor.sensorName,
+        type: 'line',
+        data: validDataPoints.map(point => [point.datetime, point.value]),
+        showSymbol: false,
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: {
+          width: 1
+        },
+        itemStyle: {
+          borderWidth: 1
+        }
+      })
+    }
+  })
 
-  // 图表配置
-  const option = {
+  // 趋势图配置
+  const trendOption = {
     title: {
       text: '温度监控趋势图',
       left: 'center',
@@ -203,6 +213,33 @@ const initChart = () => {
           type: 'dashed'
         }
       },
+      // 根据实际数据范围设置坐标轴，最小温度刻度比实际最小温度小2度，最大温度刻度比实际最大温度高2度
+      min: function(value) {
+        const allTemps = []
+        series.forEach(s => {
+          s.data.forEach(point => {
+            if (Array.isArray(point) && point[1] !== null && point[1] !== undefined) {
+              allTemps.push(point[1])
+            }
+          })
+        })
+        if (allTemps.length === 0) return 0
+        const minTemp = Math.min(...allTemps)
+        return parseInt(minTemp - 2)
+      },
+      max: function(value) {
+        const allTemps = []
+        series.forEach(s => {
+          s.data.forEach(point => {
+            if (Array.isArray(point) && point[1] !== null && point[1] !== undefined) {
+              allTemps.push(point[1])
+            }
+          })
+        })
+        if (allTemps.length === 0) return 100
+        const maxTemp = Math.max(...allTemps)
+        return parseInt(maxTemp + 2)
+      }
     },
     series: series,
     dataZoom: [
@@ -226,7 +263,227 @@ const initChart = () => {
     ]
   }
 
-  chartInstance.setOption(option, true)
+  // 设置趋势图点击事件
+  trendChartInstance.off('click')
+  trendChartInstance.on('click', (params) => {
+    // 处理点击事件，获取点击的时间点
+    let clickedTime = null
+    
+    if (params.componentType === 'series') {
+      // 点击在数据系列上
+      clickedTime = params.value[0]
+    } else if (params.componentType === 'xAxis') {
+      // 点击在X轴上
+      clickedTime = params.value
+    } else if (params.componentType === 'grid') {
+      // 点击在图表网格上，需要根据鼠标位置计算时间
+      const pointInPixel = [params.event.offsetX, params.event.offsetY]
+      const pointInGrid = trendChartInstance.convertFromPixel({seriesIndex: 0}, pointInPixel)
+      if (pointInGrid && pointInGrid.length > 0) {
+        clickedTime = pointInGrid[0]
+      }
+    }
+    
+    if (clickedTime) {
+      // 找到最接近的时间点
+      const closestDataPoint = sortedData.reduce((closest, current) => {
+        const currentDiff = Math.abs(new Date(current.datetime) - new Date(clickedTime))
+        const closestDiff = Math.abs(new Date(closest.datetime) - new Date(clickedTime))
+        return currentDiff < closestDiff ? current : closest
+      })
+      
+      updateMomentChart(closestDataPoint.datetime)
+    }
+  })
+
+  trendChartInstance.setOption(trendOption, true)
+
+  // 初始化时刻图表，默认显示第一个时刻的数据
+  if (sortedData.length > 0) {
+    const firstTime = sortedData[0].datetime
+    updateMomentChart(firstTime)
+  }
+}
+
+// 更新时刻温度对比图
+const updateMomentChart = (selectedTime) => {
+  if (!momentChartInstance || !props.chartData || props.chartData.length === 0) {
+    return
+  }
+
+  // 找到对应时刻的数据
+  const momentData = props.chartData.find(item => item.datetime === selectedTime)
+  if (!momentData) {
+    return
+  }
+
+  selectedMoment.value = selectedTime
+
+  // 准备时刻数据
+  const momentSeries = []
+  const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4']
+
+  props.sensorColumns.forEach((sensor, index) => {
+    const value = momentData[sensor.sensorName]
+    if (value !== null && value !== undefined && !isNaN(value)) {
+      momentSeries.push({
+        name: sensor.sensorName,
+        value: parseFloat(value),
+        itemStyle: {
+          color: colors[index % colors.length]
+        }
+      })
+    }
+  })
+
+  // 格式化时间显示
+  const formatTime = (timeStr) => {
+    const date = new Date(timeStr)
+    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
+  }
+
+  // 如果没有有效数据，显示空状态
+  if (momentSeries.length === 0) {
+    const emptyOption = {
+      title: {
+        text: `时刻温度对比 - ${formatTime(selectedTime)}`,
+        left: 'center',
+        textStyle: {
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: '#303133'
+        }
+      },
+      graphic: {
+        type: 'text',
+        left: 'center',
+        top: 'middle',
+        style: {
+          text: '该时刻暂无温度数据',
+          fontSize: 16,
+          fill: '#909399'
+        }
+      }
+    }
+    momentChartInstance.setOption(emptyOption, true)
+    return
+  }
+
+  // 时刻图表配置 - 折线图，y轴为legend，x轴为温度
+  const momentOption = {
+    title: {
+      text: `时刻温度对比 - ${formatTime(selectedTime)}`,
+      left: 'center',
+      textStyle: {
+        fontSize: 14,
+        fontWeight: 'bold',
+        color: '#303133'
+      }
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#e4e7ed',
+      borderWidth: 1,
+      textStyle: {
+        color: '#303133'
+      },
+      formatter: function (params) {
+        return `<div style="font-weight: bold; margin-bottom: 8px; color: #303133;">${params[0].name}</div>
+                <div style="margin: 5px 0; display: flex; align-items: center;">
+                  <span style="display: inline-block; width: 12px; height: 12px; background: ${params[0].color}; margin-right: 8px; border-radius: 2px;"></span>
+                  <span style="color: #606266;">温度: </span>
+                  <span style="font-weight: bold; color: #303133; margin-left: 4px;">${params[0].value.toFixed(2)}°C</span>
+                </div>`
+      }
+    },
+    grid: {
+      left: '15%',
+      right: '15%',
+      bottom: '5%',
+      top: '8%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'value',
+      name: '温度 (°C)',
+      nameLocation: 'middle',
+      nameGap: 30,
+      nameTextStyle: {
+        color: '#606266'
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#e4e7ed'
+        }
+      },
+      axisLabel: {
+        color: '#606266',
+        formatter: '{value} °C'
+      },
+      axisTick: {
+        lineStyle: {
+          color: '#e4e7ed'
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: '#f0f0f0',
+          type: 'dashed'
+        }
+      },
+             // 根据实际数据范围设置坐标轴，最小温度刻度比实际最小温度小2度，最大温度刻度比实际最大温度高2度
+       min: function(value) {
+         const minTemp = Math.min(...momentSeries.map(s => s.value))
+         return parseInt(minTemp - 2)
+       },
+       max: function(value) {
+         const maxTemp = Math.max(...momentSeries.map(s => s.value))
+         return parseInt(maxTemp + 2)
+       }
+    },
+    yAxis: {
+      type: 'category',
+      data: momentSeries.map(s => s.name),
+      axisLine: {
+        lineStyle: {
+          color: '#e4e7ed'
+        }
+      },
+      axisLabel: {
+        color: '#606266',
+        show: true
+      },
+      axisTick: {
+        lineStyle: {
+          color: '#e4e7ed'
+        }
+      }
+    },
+    series: [
+      {
+        name: '温度',
+        type: 'line',
+        data: momentSeries.map(s => s.value),
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: {
+          width: 3
+        },
+        itemStyle: {
+          color: '#409eff'
+        },
+        label: {
+          show: true,
+          position: 'right',
+          formatter: '{c}°C',
+          color: '#606266'
+        }
+      }
+    ]
+  }
+
+  momentChartInstance.setOption(momentOption, true)
 }
 
 // 监听数据变化
@@ -234,11 +491,14 @@ watch(
   () => [props.chartData, props.sensorColumns],
   () => {
     nextTick(() => {
-      updateChart()
+      updateCharts()
       // 延迟重新调整大小，确保DOM已更新
       setTimeout(() => {
-        if (chartInstance) {
-          chartInstance.resize()
+        if (trendChartInstance) {
+          trendChartInstance.resize()
+        }
+        if (momentChartInstance) {
+          momentChartInstance.resize()
         }
       }, 100)
     })
@@ -248,8 +508,11 @@ watch(
 
 // 监听窗口大小变化
 const handleResize = () => {
-  if (chartInstance) {
-    chartInstance.resize()
+  if (trendChartInstance) {
+    trendChartInstance.resize()
+  }
+  if (momentChartInstance) {
+    momentChartInstance.resize()
   }
 }
 
@@ -260,9 +523,13 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  if (chartInstance) {
-    chartInstance.dispose()
-    chartInstance = null
+  if (trendChartInstance) {
+    trendChartInstance.dispose()
+    trendChartInstance = null
+  }
+  if (momentChartInstance) {
+    momentChartInstance.dispose()
+    momentChartInstance = null
   }
   window.removeEventListener('resize', handleResize)
 })
@@ -278,15 +545,26 @@ onUnmounted(() => {
   .chart-container {
     width: 100%;
     height: 100%;
-    min-height: 500px;
+    min-height: 600px;
     flex: 1;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    gap: 20px;
+
+    .trend-chart {
+      width: 60% !important;
+      height: 600px !important;
+      border: 1px solid #e4e7ed;
+      border-radius: 8px;
+      background: #ffffff;
+    }
 
-    .chart {
-      width: 100% !important;
-      height: 100% !important;
-      flex: 1;
+    .moment-chart {
+      width: 40% !important;
+      height: 600px !important;
+      border: 1px solid #e4e7ed;
+      border-radius: 8px;
+      background: #ffffff;
     }
   }
 }

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

@@ -12,16 +12,13 @@
         <el-form :model="searchForm" :inline="true" class="search-form">
           <!-- 时间范围选择 -->
           <el-form-item label="时间范围">
-            <el-date-picker v-model="searchForm.timeRange" type="datetimerange" range-separator="至"
-              start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss"
-              value-format="YYYY-MM-DD HH:mm:ss" :shortcuts="timeShortcuts" :default-time="defaultTime"
-              class="time-picker" />
+            <el-date-picker v-model="searchForm.timeRange" type="daterange" range-separator="至" start-placeholder="开始时间"
+              end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="time-picker" />
           </el-form-item>
 
           <!-- 设备选择 -->
           <el-form-item label="查询条件">
-            <el-select v-model="searchForm.Info" placeholder="请选择查询条件" clearable filterable class="device-select"
-              @change="handleChange">
+            <el-select v-model="searchForm.Info" placeholder="请选择查询条件" clearable filterable class="device-select">
               <el-option v-for="device in deviceOptions" :key="device.value" :label="device.label"
                 :value="device.value" />
             </el-select>
@@ -60,6 +57,7 @@
             <span>查询结果</span>
             <span class="result-count">共 {{ totalCount }} 条记录</span>
           </div>
+
         </template>
 
         <!-- 使用el-tab分别展示数据表格和分析图表 -->
@@ -86,23 +84,12 @@
                     </el-table-column>
                   </el-table>
                 </div>
-
-                <!-- 分页 -->
-                <div class="pagination-container" v-if="hasData">
-                  <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
-                    :page-sizes="[10, 20, 50, 100]" :total="totalCount" layout="total, sizes, prev, pager, next, jumper"
-                    @size-change="handleSizeChange" @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="tableData" :sensor-columns="sensorColumns" />
                 </div>
               </el-tab-pane>
             </el-tabs>
@@ -110,6 +97,11 @@
         </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>
 
@@ -137,54 +129,9 @@ const searchForm = reactive({
   maxTemp: null
 })
 const queryParams = ref({
-  pageNum: 1,
-  pageSize: 5760
+  pageNumber: 1,
+  pageSize: 48
 })
-// 时间快捷选项
-const timeShortcuts = [
-  {
-    text: '最近1小时',
-    value: () => {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000)
-      return [start, end]
-    }
-  },
-  {
-    text: '最近24小时',
-    value: () => {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24)
-      return [start, end]
-    }
-  },
-  {
-    text: '最近7天',
-    value: () => {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-      return [start, end]
-    }
-  },
-  {
-    text: '最近30天',
-    value: () => {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-      return [start, end]
-    }
-  }
-]
-
-// 默认时间
-const defaultTime = [
-  new Date(2000, 1, 1, 0, 0, 0),
-  new Date(2000, 1, 1, 23, 59, 59)
-]
 
 // 设备选项
 const deviceOptions = ref([])
@@ -199,6 +146,16 @@ const tableData = ref([])
 const sensorColumns = ref([])
 const tableList = ref([])
 
+const getDeviceList = () => {
+  channelInfoList().then(res => {
+    deviceOptions.value = res.map(item => ({
+      label: item,
+      value: item
+    }))
+  })
+}
+getDeviceList()
+
 // 处理表格数据，按sensorNo分组
 const processTableData = () => {
   if (!tableList.value || tableList.value.length === 0) {
@@ -238,22 +195,13 @@ const processTableData = () => {
   })
 
   // 转换为数组并排序
-  tableData.value = Object.values(timeGroups).sort((a, b) =>
-    new Date(b.datetime) - new Date(a.datetime)
-  )
-  console.log('处理后的表格数据:', tableData.value)
-}
-
-// 分页处理
-const handleSizeChange = (size) => {
-  queryParams.value.pageSize = size
-  queryParams.value.pageNum = 1
-  handleSearch()
+  tableData.value = Object.values(timeGroups)
 }
 
 const handleCurrentChange = (page) => {
-  queryParams.value.pageNum = page
-  handleSearch()
+  queryParams.value.pageNumber = page
+  console.log(queryParams.value)
+  // handleSearch()
 }
 
 // 查询监控数据
@@ -269,14 +217,14 @@ const handleSearch = async () => {
       ElMessage.warning('请选择查询条件')
       return
     }
+    let startTime = searchForm.timeRange[0] + ' 00:00:00'
+    let endTime = searchForm.timeRange[1] + ' 23:59:59'
     const res = await listByInfo({
-      startTime: searchForm.timeRange[0],
-      endTime: searchForm.timeRange[1],
+      startTime: startTime,
+      endTime: endTime,
       Info: searchForm.Info,
       ...queryParams.value
     })
-
-    console.log('查询结果:', res)
     totalCount.value = res.total
     tableList.value = res.list
 
@@ -312,13 +260,8 @@ const handleExport = () => {
   ElMessage.success('导出功能开发中...')
   // 这里可以添加导出逻辑
 }
-const sensorNoList = ref([]);
-const handleChange = (value) => {
-  listChannel({ Info: value }).then(res => {
-    console.log(res)
-    sensorNoList.value = res;
-  })
-}
+
+
 
 // 监听标签页切换
 const handleTabChange = (tabName) => {
@@ -335,15 +278,6 @@ const handleTabChange = (tabName) => {
   }
 }
 
-onMounted(() => {
-  channelInfoList().then(res => {
-    console.log('设备选项:', res)
-    deviceOptions.value = res.map(item => ({
-      label: item,
-      value: item
-    }))
-  })
-})
 </script>
 
 <style lang="scss" scoped>
@@ -447,10 +381,10 @@ onMounted(() => {
       // 图表容器样式
       .chart-container {
         width: 100%;
-        height: 600px;
-        min-height: 500px;
+        height: 650px;
+        min-height: 600px;
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
       }
     }
   }