feat: 历史记录页面的产线编码-名称改为下拉选择 & 单设备监控刷新按钮

src/views/iot/device/components/DeviceAttributeList.vue

@@ -82,7 +82,7 @@
 
   <ContentWrap>
     <el-table
-ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
+ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :max-height="planTableMaxHeight" row-key="id"
       @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" reserve-selection />
       <el-table-column
@@ -185,6 +185,7 @@ ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-to
       </el-table-column>
     </el-table>
     <Pagination
+ref="planPaginationRef"
 :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
   </ContentWrap>
@@ -207,6 +208,17 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
 const tableRef = ref()
+const planTableMaxHeight = ref(520)
+const planPaginationRef = ref<HTMLElement>()
+
+const updatePlanTableMaxHeight = async () => {
+  await nextTick()
+  const tableTop = tableRef.value?.$el?.getBoundingClientRect().top ?? 0
+  const paginationHeight = planPaginationRef.value?.getBoundingClientRect().height ?? 72
+  const pageBottomGap = 56
+  const availableHeight = window.innerHeight - tableTop - paginationHeight - pageBottomGap
+  planTableMaxHeight.value = Math.min(window.innerHeight, Math.max(240, Math.floor(availableHeight)))
+}
 
 const props = defineProps<{
   deviceId?: number // 设备id（主表的关联字段）
@@ -279,6 +291,7 @@ async function getList() {
     total.value = data.total
   } finally {
     loading.value = false
+    updatePlanTableMaxHeight()
   }
 }
 
@@ -380,5 +393,11 @@ onMounted(async () => {
   } catch {
     typeList.value = []
   }
+  updatePlanTableMaxHeight()
+  window.addEventListener('resize', updatePlanTableMaxHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updatePlanTableMaxHeight)
 })
 </script>

src/views/iot/deviceattributetype/index.vue

@@ -133,6 +133,7 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
+      ref="planPaginationRef"
       :total="total"
       v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"

src/views/iot/historyData/index.vue

@@ -27,20 +27,26 @@
         />
       </el-form-item>
        <el-form-item :label="t('DataCollection.HistoryData.searchLineCodeLabel')" prop="lineNode">
-        <el-input
+        <el-tree-select
           v-model="queryParams.lineNode"
-          :placeholder="t('DataCollection.HistoryData.searchLineCodePlaceholder')"
+          :data="lineTreeData"
+          :props="{ label: 'code', value: 'code', children: 'children' }"
+          check-strictly
+          placeholder="请选择产线编码"
           clearable
-          @keyup.enter="handleQuery"
+          filterable
           class="!w-240px"
         />
       </el-form-item>
       <el-form-item :label="t('DataCollection.HistoryData.searchLineNameLabel')" prop="lineName" v-show="showAllFilters">
-        <el-input
+        <el-tree-select
           v-model="queryParams.lineName"
-          :placeholder="t('DataCollection.HistoryData.searchLineNamePlaceholder')"
+          :data="lineTreeData"
+          :props="{ label: 'name', value: 'name', children: 'children' }"
+          check-strictly
+          placeholder="请选择产线名称"
           clearable
-          @keyup.enter="handleQuery"
+          filterable
           class="!w-240px"
         />
       </el-form-item>
@@ -130,6 +136,7 @@
       </el-table-column>
     </el-table>
     <Pagination
+      ref="planPaginationRef"
       :total="total"
       v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
@@ -170,6 +177,7 @@
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { DeviceApi, LineDeviceVO, LineDevicePageParams } from '@/api/iot/device'
+import { DeviceLineApi, DeviceLineTreeVO } from '@/api/mes/deviceline'
 import HistorySingleDeviceDialog from './HistorySingleDeviceDialog.vue'
 import {useRouter} from "vue-router";
 // 路由
@@ -213,6 +221,21 @@ const queryParams = reactive({
 })
 
 const queryFormRef = ref()
+const lineTreeData = ref<DeviceLineTreeVO[]>([])
+const lineTreeLoading = ref(false)
+
+/** 获取产线树数据 */
+const fetchLineTree = async () => {
+  lineTreeLoading.value = true
+  try {
+    const res = await DeviceLineApi.getDeviceLineTree()
+    lineTreeData.value = Array.isArray(res) ? res : (res?.data || res?.list || [])
+  } catch (e) {
+    console.error('获取产线树失败', e)
+  } finally {
+    lineTreeLoading.value = false
+  }
+}
 
 const selectedIds = ref<(string | number)[]>([])
 const handleSelectionChange = (rows: LineDeviceVO[]) => {
@@ -269,6 +292,8 @@ const handleQuery = () => {
 
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
+  queryParams.lineNode = undefined
+  queryParams.lineName = undefined
   handleQuery()
 }
 
@@ -313,6 +338,7 @@ const handleSingleAnalyseView = (row: LineDeviceVO) => {
 
 onMounted(() => {
   getList()
+  fetchLineTree()
   updatePlanTableMaxHeight()
   window.addEventListener('resize', updatePlanTableMaxHeight)
 })

src/views/iot/realTimeMonitoring/SingleDeviceMonitorDialog.vue

@@ -3,7 +3,10 @@
     <div class="single-device-dialog">
       <div class="single-device-dialog__header">
         <div>{{ t('DataCollection.RealTimeMonitoring.dialogDeviceNameLabel') }}{{ deviceName || '-' }}</div>
-        <div>{{ t('DataCollection.RealTimeMonitoring.dialogCollectionTimeLabel') }}{{ displayTime }}</div>
+        <div class="single-device-dialog__header-right">
+          <el-button :icon="Refresh" :loading="loading" size="small" @click="fetchList">刷新</el-button>
+          <span>{{ t('DataCollection.RealTimeMonitoring.dialogCollectionTimeLabel') }}{{ displayTime }}</span>
+        </div>
       </div>
       <ContentWrap v-loading="loading">
         <div v-if="sections.length" class="single-device-dialog__table-grid">
@@ -53,6 +56,7 @@ v-for="col in section.columns" :key="col.prop" :prop="col.prop" :label="col.labe
 
 <script setup lang="ts">
 import { formatDate } from '@/utils/formatTime'
+import { Refresh } from '@element-plus/icons-vue'
 import { DeviceApi } from '@/api/iot/device'
 
 type SectionColumn = {
@@ -270,6 +274,12 @@ watch(
   color: var(--el-text-color-primary);
 }
 
+.single-device-dialog__header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .single-device-dialog__table-grid {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));

src/views/iot/realTimeMonitoring/index.vue

@@ -26,20 +26,26 @@
         />
       </el-form-item>
        <el-form-item :label="t('DataCollection.RealTimeMonitoring.searchLineCodeLabel')" prop="lineNode">
-        <el-input
+        <el-tree-select
           v-model="queryParams.lineNode"
-          :placeholder="t('DataCollection.RealTimeMonitoring.searchLineCodePlaceholder')"
+          :data="lineTreeData"
+          :props="{ label: 'code', value: 'code', children: 'children' }"
+          check-strictly
+          placeholder="请选择产线编码"
           clearable
-          @keyup.enter="handleQuery"
+          filterable
           class="!w-240px"
         />
       </el-form-item>
       <el-form-item :label="t('DataCollection.RealTimeMonitoring.searchLineNameLabel')" prop="lineName" v-show="showAllFilters">
-        <el-input
+        <el-tree-select
           v-model="queryParams.lineName"
-          :placeholder="t('DataCollection.RealTimeMonitoring.searchLineNamePlaceholder')"
+          :data="lineTreeData"
+          :props="{ label: 'name', value: 'name', children: 'children' }"
+          check-strictly
+          placeholder="请选择产线名称"
           clearable
-          @keyup.enter="handleQuery"
+          filterable
           class="!w-240px"
         />
       </el-form-item>
@@ -153,6 +159,7 @@ import { DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { DeviceApi, LineDeviceVO } from '@/api/iot/device'
+import { DeviceLineApi, DeviceLineTreeVO } from '@/api/mes/deviceline'
 import SingleDeviceMonitorDialog from './SingleDeviceMonitorDialog.vue'
 
 defineOptions({ name: 'RealTimeMonitoring' })
@@ -195,6 +202,21 @@ const queryParams = reactive({
   collectionTime: undefined
 })
 const queryFormRef = ref()
+const lineTreeData = ref<DeviceLineTreeVO[]>([])
+const lineTreeLoading = ref(false)
+
+/** 获取产线树数据 */
+const fetchLineTree = async () => {
+  lineTreeLoading.value = true
+  try {
+    const res = await DeviceLineApi.getDeviceLineTree()
+    lineTreeData.value = Array.isArray(res) ? res : (res?.data || res?.list || [])
+  } catch (e) {
+    console.error('获取产线树失败', e)
+  } finally {
+    lineTreeLoading.value = false
+  }
+}
 
 const selectedIds = ref<(string | number)[]>([])
 const handleSelectionChange = (rows: LineDeviceVO[]) => {
@@ -243,7 +265,9 @@ const handleQuery = () => {
 }
 
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
+  queryParams.lineNode = undefined
+  queryParams.lineName = undefined
   handleQuery()
 }
 
@@ -277,6 +301,7 @@ const handleExport = async () => {
 
 onMounted(() => {
   getList()
+  fetchLineTree()
   updatePlanTableMaxHeight()
   window.addEventListener('resize', updatePlanTableMaxHeight)
 })