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

21 hours ago · 4fc2af2444
parent 8a2e5d9104
commit 4fc2af2444
5 changed files with 96 additions and 15 deletions
--- a/src/views/iot/device/components/DeviceAttributeList.vue
+++ b/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>
--- a/src/views/iot/deviceattributetype/index.vue
+++ b/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"
--- a/src/views/iot/historyData/index.vue
+++ b/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)
 })
--- a/src/views/iot/realTimeMonitoring/SingleDeviceMonitorDialog.vue
+++ b/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));
--- a/src/views/iot/realTimeMonitoring/index.vue
+++ b/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)
 })