更新前端

cmc-temperature-ui/.env.development

+###
+ # @Author: ysh
+ # @Date: 2025-08-19 16:55:09
+ # @LastEditors: 
+ # @LastEditTime: 2025-08-20 10:30:48
+### 
 # 开发环境配置
 VITE_APP_ENV = 'development'
 
 
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 国能青海黄河玛尔挡水电站水温监测系统
 
 # 开发环境前缀
 VITE_APP_BASE_API = '/dev-api'

cmc-temperature-ui/.env.production

 
 
 # 页面标题
-VITE_APP_TITLE = 若依管理系统
+VITE_APP_TITLE = 国能青海黄河玛尔挡水电站水温监测系统
 
 # 若依管理系统/生产环境
 VITE_APP_BASE_API = '/prod-api'

cmc-temperature-ui/index.html

   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link rel="icon" href="/favicon.ico">
-  <title>若依管理系统</title>
+  <link rel="icon" href="/src/assets/images/logo/logo.png">
+  <title>国能青海黄河玛尔挡水电站水温监测系统</title>
   <!-- [if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif] -->
   <style>
     html,
   <script type="module" src="/src/main.js"></script>
 </body>
 
-</html>
+</html>

cmc-temperature-ui/src/api/monitoring/channel.js

     params: query
   })
 }
+export function channelInfoList(){
+  return request({
+    url: '/monitoring/channel/channelInfoList',
+    method: 'get',
+  })
+
+}

cmc-temperature-ui/src/api/monitoring/temperature.js

 /*
  * @Author: wrh
  * @Date: 2025-08-20 16:54:03
- * @LastEditors: wrh
- * @LastEditTime: 2025-08-20 19:13:01
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-08-21 11:17:03
  */
 import request from '@/utils/request'
 
     params: query
   })
 }
+export function listByInfo(query) {
+  return request({
+    url: '/monitoring/temperature/listByInfo',
+    method: 'get',
+    params: query
+  })
+}

cmc-temperature-ui/src/router/index.js

     component: () => import('@/views/error/401'),
     hidden: true
   },
+  // {
+  //   path: '',
+  //   component: Layout,
+  //   redirect: '/index',
+  //   children: [
+  //     {
+  //       path: '/index',
+  //       component: () => import('@/views/index'),
+  //       name: 'Index',
+  //       meta: { title: '首页', icon: 'dashboard', affix: true }
+  //     }
+  //   ]
+  // },
+
   {
-    path: '',
-    component: Layout,
+    path: '/',
     redirect: '/index',
-    children: [
-      {
-        path: '/index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
+  },
+  {
+    path: '/index',
+    component: () => import('@/views/temperature/index'),
   },
   {
     path: '/user',

cmc-temperature-ui/src/utils/request.js

   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: import.meta.env.VITE_APP_BASE_API,
   // 超时
-  timeout: 10000
+  timeout: 100000
 })
 
 // request拦截器

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

 <template>
   <div class="login">
-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{ title }}</h3>
-      <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码" @keyup.enter="handleLogin">
-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item v-if="captchaEnabled" prop="code">
-        <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleLogin">
-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" class="login-code-img" @click="getCode">
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button type="primary" style="width:100%;" :loading="loading" size="large" @click.prevent="handleLogin">
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div v-if="register" class="register-link">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
+    <!-- 顶部标题区域 -->
+    <div class="login-header">
+      <h1 class="main-title">{{ title }}</h1>
+      <p class="sub-title">Water Temperature Monitoring System</p>
+    </div>
+    
+    <!-- 登录表单区域 -->
+    <div class="login-container">
+      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+        <h3 class="form-title">用户登录</h3>
+        <el-form-item prop="username">
+          <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="请输入用户名">
+            <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="请输入密码" @keyup.enter="handleLogin">
+            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item v-if="captchaEnabled" prop="code">
+          <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleLogin">
+            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+          </el-input>
+          <div class="login-code">
+            <img :src="codeUrl" class="login-code-img" @click="getCode">
+          </div>
+        </el-form-item>
+        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+        <el-form-item style="width:100%;">
+          <el-button type="primary" style="width:100%;" :loading="loading" size="large" @click.prevent="handleLogin">
+            <span v-if="!loading">进入监测系统</span>
+            <span v-else>登录中...</span>
+          </el-button>
+          <!-- <div v-if="register" class="register-link">
+            <router-link class="link-type" :to="'/register'">立即注册</router-link>
+          </div> -->
+        </el-form-item>
+      </el-form>
+    </div>
 
-    <!-- 底部 -->
+    <!-- 底部信息 -->
     <div class="el-login-footer">
-      <span>Copyright © 2023-2025 ruoyi All Rights Reserved.</span>
+      <span>Copyright © 2025 四川中水成勘院测绘工程有限责任公司 All Rights Reserved.</span>
     </div>
   </div>
 </template>
       }
       // 调用action的登录方法
       userStore.login(loginForm.value).then(() => {
-        router.push({ path: redirect.value || '/' })
+        router.push({ path: redirect.value || '/index' })
       }).catch(() => {
         loading.value = false
         // 重新获取验证码
 <style lang='scss' scoped>
 .login {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url('@/assets/images/login-background.jpg');
+  background-image: url('@/assets/images/loginBg.jpeg');
   background-size: cover;
+  background-position: center;
+  position: relative;
 }
-.title {
-  margin: 0px auto 30px auto;
+
+.login-header {
   text-align: center;
-  color: #707070;
+  margin-bottom: 40px;
+  position: relative;
+  z-index: 2;
+  
+  .main-title {
+    font-size: 42px;
+    font-weight: 700;
+    color: #ffffff;
+    margin-bottom: 10px;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+    letter-spacing: 2px;
+  }
+  
+  .sub-title {
+    font-size: 18px;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 300;
+    letter-spacing: 1px;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  }
 }
 
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  .el-input {
-    height: 40px;
-    input {
-      height: 40px;
+.login-container {
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-radius: 16px;
+  padding: 40px;
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+  width: 450px;
+  position: relative;
+  z-index: 2;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  transition: all 0.3s ease;
+  
+  .login-form {
+    .form-title {
+      text-align: center;
+      margin-bottom: 30px;
+      font-size: 26px;
+      font-weight: 600;
+      color: #2c3e50;
+      position: relative;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -10px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 50px;
+        height: 3px;
+        background: linear-gradient(135deg, #409eff, #36a3f7);
+        border-radius: 2px;
+      }
+    }
+    
+    .el-input {
+      height: 48px;
+      margin-bottom: 8px;
+      
+      input {
+        height: 48px;
+        border-radius: 8px;
+        border: 2px solid #e8eaec;
+        transition: all 0.3s ease;
+        font-size: 14px;
+        
+        &:focus {
+          border-color: #409eff;
+          box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
+        }
+        
+        &::placeholder {
+          color: #a0a0a0;
+        }
+      }
+    }
+    
+    .input-icon {
+      height: 46px;
+      width: 18px;
+      margin-left: 0px;
+      color: #409eff;
+    }
+    
+    .el-button {
+      border-radius: 8px;
+      height: 48px;
+      font-size: 16px;
+      font-weight: 600;
+      background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
+      border: none;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 20px rgba(64, 158, 255, 0.3);
+      }
+      
+      &:active {
+        transform: translateY(0);
+      }
+    }
+    
+    .el-checkbox {
+      .el-checkbox__label {
+        color: #606266;
+        font-size: 14px;
+      }
+      
+      .el-checkbox__input.is-checked .el-checkbox__inner {
+        background-color: #409eff;
+        border-color: #409eff;
+      }
     }
   }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 0px;
+  
+  .login-tip {
+    font-size: 13px;
+    text-align: center;
+    color: #bfbfbf;
   }
-}
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
-.login-code {
-  width: 33%;
-  height: 40px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
+  
+  .login-code {
+    width: 33%;
+    height: 48px;
+    float: right;
+    
+    img {
+      cursor: pointer;
+      vertical-align: middle;
+      border-radius: 6px;
+      border: 2px solid #e8eaec;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        border-color: #409eff;
+        transform: scale(1.02);
+      }
+    }
+  }
+  
+  .register-link {
+    margin-left: auto;
+    margin-bottom: -10px;
+    margin-top: 20px;
+    text-align: center;
+    
+    .link-type {
+      color: #409eff;
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 500;
+      transition: all 0.3s ease;
+      
+      &:hover {
+        color: #36a3f7;
+        text-decoration: underline;
+      }
+    }
   }
 }
-.register-link {
-  margin-left: auto;
-  margin-bottom: -10px;
-  margin-top: 10px;
-}
+
 .el-login-footer {
   height: 40px;
   line-height: 40px;
   bottom: 0;
   width: 100%;
   text-align: center;
-  color: #fff;
+  color: rgba(255, 255, 255, 0.9);
   font-family: Arial;
   font-size: 12px;
   letter-spacing: 1px;
+  z-index: 2;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
+
 .login-code-img {
-  height: 40px;
-  padding-left: 12px;
+  height: 48px;
+  margin-left: 12px;
 }
 </style>

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

+<!--
+ * @Author: ysh
+ * @Date: 2025-08-20 10:14:22
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-08-21 09:52:13
+-->
+<template>
+  <div class="temperature-page">
+    <!-- 顶部导航栏 -->
+    <div class="top-header">
+      <div class="header-left">
+        <h2 class="page-title">{{ title }}</h2>
+      </div>
+      <div class="header-right">
+        <el-dropdown @command="handleCommand" trigger="click">
+          <div class="user-info">
+            <span class="username">{{ userInfo.username }}</span>
+            <el-avatar :size="32" :src="userInfo.avatar" class="user-avatar">
+              <svg-icon icon-class="user" />
+            </el-avatar>
+            <span class="dropdown-text">▼</span>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item divided command="logout">
+                <svg-icon icon-class="logout" />
+                退出登录
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <tem-monitor></tem-monitor>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import useUserStore from '@/store/modules/user'
+import { title } from '@/store/modules/settings'
+import temMonitor from './temMonitor.vue'
+
+const router = useRouter()
+const userStore = useUserStore()
+const { proxy } = getCurrentInstance()
+
+// 用户信息
+const userInfo = ref({
+  username: 'admin',
+  avatar: ''
+})
+
+// 获取用户信息
+const getUserInfo = () => {
+  const user = userStore.user
+  if (user) {
+    userInfo.value.username = user.userName || 'admin'
+    userInfo.value.avatar = user.avatar || ''
+  }
+}
+
+// 处理下拉菜单命令
+const handleCommand = (command) => {
+  switch (command) {
+    case 'profile':
+      // 跳转到个人中心
+      router.push('/system/user/profile')
+      break
+    case 'settings':
+      // 跳转到系统设置
+      router.push('/system/config')
+      break
+    case 'logout':
+      handleLogout()
+      break
+  }
+}
+
+// 退出登录
+const handleLogout = () => {
+  proxy.$modal.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    userStore.logOut().then(() => {
+      location.href = import.meta.env.VITE_APP_CONTEXT_PATH + 'index'
+    })
+  }).catch(() => { })
+}
+
+onMounted(() => {
+  getUserInfo()
+})
+</script>
+
+<style lang="scss" scoped>
+.temperature-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f7fa;
+}
+
+.top-header {
+  height: 60px;
+  background: #ffffff;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+
+  .header-left {
+    .page-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #303133;
+      margin: 0;
+    }
+  }
+
+  .header-right {
+    .user-info {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      cursor: pointer;
+      padding: 8px 12px;
+      border-radius: 6px;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: #f5f7fa;
+      }
+
+      .username {
+        font-size: 14px;
+        color: #606266;
+        font-weight: 500;
+      }
+
+      .user-avatar {
+        border: 2px solid #e4e7ed;
+        transition: all 0.3s ease;
+
+        &:hover {
+          border-color: #409eff;
+        }
+      }
+
+      .dropdown-text {
+        font-size: 12px;
+        font-weight: bold;
+        color: #909399;
+        transition: all 0.3s ease;
+      }
+
+      &:hover .dropdown-text {
+        color: #409eff;
+      }
+    }
+  }
+}
+
+.main-content {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+// 下拉菜单样式
+:deep(.el-dropdown-menu) {
+  .el-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+
+    .svg-icon {
+      font-size: 16px;
+    }
+  }
+}
+
+// 头像样式
+:deep(.el-avatar) {
+  .svg-icon {
+    font-size: 18px;
+    color: #909399;
+  }
+}
+</style>

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

+<template>
+  <div class="temperature-monitor">
+    <!-- 搜索区域 -->
+    <div class="search-section">
+      <el-card class="search-card">
+        <template #header>
+          <div class="card-header">
+            <span>温度监控查询</span>
+          </div>
+        </template>
+
+        <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-form-item>
+
+          <!-- 设备选择 -->
+          <el-form-item label="查询条件">
+            <el-select v-model="searchForm.Info" placeholder="请选择查询条件" clearable filterable class="device-select"
+              @change="handleChange">
+              <el-option v-for="device in deviceOptions" :key="device.value" :label="device.label"
+                :value="device.value" />
+            </el-select>
+          </el-form-item>
+
+          <!-- 操作按钮 -->
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch" :loading="loading">
+              <el-icon>
+                <Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button @click="handleReset">
+              <el-icon>
+                <Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button type="success" @click="handleExport">
+              <el-icon>
+                <Download />
+              </el-icon>
+              导出
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+
+    <!-- 结果展示区域 -->
+    <div class="result-section">
+      <el-card>
+        <template #header>
+          <div class="card-header">
+            <span>查询结果</span>
+            <span class="result-count">共 {{ totalCount }} 条记录</span>
+          </div>
+        </template>
+
+        <!-- 这里可以添加表格或其他结果展示组件 -->
+        <div class="result-content">
+          <el-empty v-if="!hasData" description="暂无数据" />
+          <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-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>
+              </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>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<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'
+
+// 响应式数据
+const loading = ref(false)
+const totalCount = ref(0)
+
+// 搜索表单数据
+const searchForm = reactive({
+  timeRange: [],
+  queryType: '',
+  deviceId: '',
+  minTemp: null,
+  maxTemp: null
+})
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 5760
+})
+// 时间快捷选项
+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([])
+
+// 计算属性
+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([])
+const tableList = ref([])
+
+// 处理表格数据，按sensorNo分组
+const processTableData = () => {
+  if (!tableList.value || tableList.value.length === 0) {
+    tableData.value = []
+    sensorColumns.value = []
+    return
+  }
+
+  // 获取所有唯一的传感器编号
+  const sensorNos = [...new Set(tableList.value.map(item => item.channel.info))]
+
+  // 生成传感器列配置
+  sensorColumns.value = sensorNos.map(sensorNo => ({
+    sensorNo: sensorNo,
+    sensorName: `${sensorNo}`
+  }))
+
+  // 按时间分组数据
+  const timeGroups = {}
+  tableList.value.forEach(item => {
+    if (!timeGroups[item.datetime]) {
+      timeGroups[item.datetime] = {
+        datetime: item.datetime,
+        ...sensorNos.reduce((acc, sensorNo) => {
+          acc[sensorNo] = null
+          return acc
+        }, {})
+      }
+    }
+    timeGroups[item.datetime][item.channel.info] = item.data
+  })
+
+  // 转换为数组并排序
+  tableData.value = Object.values(timeGroups).sort((a, b) =>
+    new Date(b.datetime) - new Date(a.datetime)
+  )
+}
+
+// 分页处理
+const handleSizeChange = (size) => {
+  queryParams.value.pageSize = size
+  queryParams.value.pageNum = 1
+  handleSearch()
+}
+
+const handleCurrentChange = (page) => {
+  queryParams.value.pageNum = page
+  handleSearch()
+}
+
+// 查询监控数据
+const handleSearch = async () => {
+  loading.value = true
+  try {
+    // 验证表单
+    if (!searchForm.timeRange || searchForm.timeRange.length === 0) {
+      ElMessage.warning('请选择时间范围')
+      return
+    }
+
+    const res = await listByInfo({
+      startTime: searchForm.timeRange[0],
+      endTime: searchForm.timeRange[1],
+      Info: searchForm.Info,
+      ...queryParams.value
+    })
+
+    console.log('查询结果:', res)
+    totalCount.value = res.total
+    tableList.value = res.list
+
+    // 处理数据，生成表格数据
+    processTableData()
+
+    ElMessage.success('查询成功')
+
+  } catch (error) {
+    ElMessage.error('查询失败')
+    console.error('查询错误:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleReset = () => {
+  searchForm.timeRange = []
+  searchForm.Info = ''
+  totalCount.value = 0
+  tableList.value = []
+  tableData.value = []
+  sensorColumns.value = []
+  ElMessage.info('已重置搜索条件')
+}
+
+const handleExport = () => {
+  if (totalCount.value === 0) {
+    ElMessage.warning('暂无数据可导出')
+    return
+  }
+
+  ElMessage.success('导出功能开发中...')
+  // 这里可以添加导出逻辑
+}
+const sensorNoList = ref([]);
+const handleChange = (value) => {
+  listChannel({ Info: value }).then(res => {
+    console.log(res)
+    sensorNoList.value = res;
+  })
+}
+
+onMounted(() => {
+  channelInfoList().then(res => {
+    console.log('设备选项:', res)
+    deviceOptions.value = res.map(item => ({
+      label: item,
+      value: item
+    }))
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.temperature-monitor {
+  padding: 20px;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+
+  .search-section {
+    margin-bottom: 20px;
+
+    .search-card {
+      .card-header {
+        font-weight: bold;
+        color: #303133;
+      }
+
+      .search-form {
+        .time-picker {
+          width: 400px;
+        }
+
+        .query-select,
+        .device-select {
+          width: 200px;
+        }
+
+        .temp-input {
+          width: 120px;
+        }
+
+        .temp-separator {
+          margin: 0 10px;
+          color: #909399;
+        }
+      }
+    }
+  }
+
+  .result-section {
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-weight: bold;
+      color: #303133;
+
+      .result-count {
+        font-size: 14px;
+        color: #909399;
+        font-weight: normal;
+      }
+    }
+
+    .result-content {
+      min-height: 200px;
+
+      .pagination-container {
+        margin-top: 20px;
+        text-align: center;
+      }
+
+      // 表格容器样式
+      .table-container {
+        overflow-x: auto;
+        width: 100%;
+
+        // 自定义滚动条样式
+        &::-webkit-scrollbar {
+          height: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: #f1f1f1;
+          border-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: #c1c1c1;
+          border-radius: 4px;
+
+          &:hover {
+            background: #a8a8a8;
+          }
+        }
+
+        .el-table {
+          .el-table__body-wrapper {
+            overflow-x: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .temperature-monitor {
+    padding: 10px;
+
+    .search-section {
+      .search-card {
+        .search-form {
+          .time-picker {
+            width: 100%;
+          }
+
+          .query-select,
+          .device-select {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>