From 0d6b8c81d7916c4a84d61bd44115ca48b8b5770f Mon Sep 17 00:00:00 2001
From: betaqi <3188864257@qq.com>
Date: Thu, 11 Sep 2025 13:59:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=8A=98=E7=BA=BF=E5=9B=BE=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stationData/components/deviceDrawer.vue   | 188 +++++++++++++-----
 .../stationData/components/newDataChart.vue   |  20 +-
 src/views/stationData/transferData.vue        |   5 -
 3 files changed, 144 insertions(+), 69 deletions(-)

diff --git a/src/views/stationData/components/deviceDrawer.vue b/src/views/stationData/components/deviceDrawer.vue
index da7f421..f8dada4 100644
--- a/src/views/stationData/components/deviceDrawer.vue
+++ b/src/views/stationData/components/deviceDrawer.vue
@@ -1,19 +1,36 @@
 <template>
   <div class="fault-rule-drawer">
-
-    <el-drawer v-model="isShowDrawer" :title="title" direction="rtl" size="90%" modal-class="model-dev-opn"
-      :before-close="handleBeforeClose" @opened="onDrawerOpened">
+    <el-drawer v-model="isShowDrawer" :title="title" direction="rtl" size="90%"
+               modal-class="model-dev-opn"
+               :before-close="handleBeforeClose" @opened="onDrawerOpened">
       <main class="wh-full flex">
         <EdfsWrap title="点位组" class="p-r-4 h-full border-r-1 border-solid border-r-#e4e7ed">
           <PointGroupTree v-if="isShowDrawer" :data="pointGroup" @device-select="onGroupChange"
-            :groupChangeLoading="groupChangeLoading" @onchangePoints="onchangePoints" :devicePoints="pointList"
-            :loadingPoints="loadingPoints" :isTransfer="props.isTransfer" :siteInfo="props.siteInfo"
-            ref="pointGroupTreeRef" />
+                          :groupChangeLoading="groupChangeLoading" @onchangePoints="onchangePoints"
+                          :devicePoints="pointList"
+                          :loadingPoints="loadingPoints" :isTransfer="props.isTransfer"
+                          :siteInfo="props.siteInfo"
+                          ref="pointGroupTreeRef"/>
         </EdfsWrap>
-        <div class="flex-1 p-4 h-full overflow-hidden" v-loading="loadingChart" element-loading-text="点位数据加载中...">
+        <div class="flex-1 p-4 h-full overflow-hidden relative"
+        >
+          <div class="absolute w-full h-full bg-[#ffffffe5] z-99" v-if="loadingChart">
+            <div class="w-full h-full flex flex-col justify-center items-center">
+              <el-progress
+                style="width: 70%"
+                :text-inside="true"
+                :stroke-width="18"
+                :percentage="progress"
+                status="success"
+              />
+              <div class="text-xl">
+                <div>当前加载数据量较大请稍等。。。</div>
+              </div>
+            </div>
+          </div>
           <el-button class="mb-4" type="primary" @click="loadChardData">查询数据</el-button>
           <NewDataChart v-if="isShowChart" :chart-datas="chartDatas" :legends="legends"
-            :axis-data="Array.from(axisData)" ref="chartRef" />
+                        :axis-data="Array.from(axisData)" ref="chartRef"/>
         </div>
       </main>
     </el-drawer>
@@ -23,12 +40,7 @@
 <script setup lang="ts">
 import NewDataChart from './newDataChart.vue'
 import PointGroupTree from './PointGroupTree.vue'
-import {
-  getPubInitData,
-  type ManualAction,
-  type PubMsgData,
-  type TimeoutMsg,
-} from '@/utils/zmq'
+import { type ManualAction, } from '@/utils/zmq'
 import ZMQWorker from '@/composables/useZMQJsonWorker'
 import type { IMyPoint, IOfflineDevice, IOnlineDevice } from '../type'
 import {
@@ -42,8 +54,9 @@ import {
   type ISite,
 } from '@/api/module/transfer'
 import { useMessage } from '@/composables/useMessage'
-import { getTransferTopic, postTransferTopic } from '../utils'
 import dayjs from 'dayjs'
+import { nextTick } from "vue";
+
 const env = import.meta.env
 
 
@@ -67,6 +80,7 @@ const pubIdWithDevice = new Map<
 const pointList = ref<IMyPoint[]>([])
 
 const curDevice = ref<IOfflineDevice | IOnlineDevice>()
+
 async function open(device: IOfflineDevice | IOnlineDevice) {
   curDevice.value = device
   await loadPointGroup()
@@ -86,6 +100,7 @@ async function open(device: IOfflineDevice | IOnlineDevice) {
 
 const loadingPoints = ref(false)
 const columsParams = computed(() => ['ts', ...checkPointList.value.map(i => i.addr)])
+
 async function loadPoints() {
   if (!curGroup.value) {
     message.error('请先选择点位组')
@@ -141,23 +156,36 @@ async function loadDeviceDetails() {
   groupChangeLoading.value = false
   fullscreenLoading.value?.close()
 }
+
 const chartDatas = reactive(new Map<string, any[]>())
 const axisData = new Set<string>()
 const legends = ref<{ addr: string; label: string, unit: string }[]>([])
 
 const loadingChart = ref(false)
+const chartAllTotal = ref(0)
+const chartLimit = ref(1000)
+const chartOffset = ref(0)
+const progress = ref(0)
 
 async function loadChardData() {
   if (!columsParams.value.filter(i => i !== 'ts').length) {
     message.error('请选择点位')
     return
   }
-
-  const params: IGetDeviceDataParams = {
+  clearData()
+  const limit = chartLimit.value
+  const offset = chartOffset.value
+  const options = {
     columns: columsParams.value,
     isLocal: props.isTransfer ? false : true,
     host: props.isTransfer ? (curDevice.value as IOnlineDevice).clientIp : '',
-    name: curGroupName.value as string
+    name: curGroupName.value as string,
+  }
+
+  const params: IGetDeviceDataParams = {
+    ...options,
+    limit,
+    offset
   }
 
   if (env.VITE_APP_ENV !== 'local' || !props.isTransfer) {
@@ -166,46 +194,81 @@ async function loadChardData() {
   }
   loadingChart.value = true
   isShowChart.value = false
+
   const res = await getDeviceDetails(params)
 
-  if (res.code === 0) {
-    pointData.value = Array.isArray(res.data.results) ? res.data.results : []
-    chartDatas.clear()
-    axisData.clear()
-    legends.value = []
-    for (const addr of columsParams.value.filter(i => i !== 'ts')) {
-      const label = pointList.value.find(i => i.addr === addr)?.label || addr
-      const find = legends.value.find(i => i.addr === addr)
-      const unit = pointList.value.find(i => i.addr === addr)?.unit || ''
-      if (!find) {
-        legends.value.push({ addr, label, unit })
-      }
+  if (res.code !== 0) {
+    resetChartStatus()
+    message.error('获取设备数据失败')
+    return
+  }
+
+  chartAllTotal.value = res?.data?.total ?? 0
+  if (chartAllTotal.value === 0) {
+    resetChartStatus()
+    message.info('暂无数据')
+    return
+  }
+
+  const pointData = Array.isArray(res.data.results) ? res.data.results : []
+  setChartData(pointData)
+  const pageCount = Math.ceil(chartAllTotal.value / Number(limit))
+  if (pageCount <= 1) {
+    progress.value = 100
+    setTimeout(()=>{resetChartStatus()})
+    return
+  }
+
+  for (let i = 1; i < pageCount; i++) {
+    const params: IGetDeviceDataParams = {
+      ...options,
+      limit,
+      offset: i * Number(limit)
     }
-    pointData.value.forEach((data: any[]) => {
-      const [ts, val, addr] = data
-      if (checkPointList.value.some(i => i.addr === addr)) {
-        const time = dayjs(Number(ts)).format('YYYY-MM-DD HH:mm:ss')
-        if (addr) {
-          const colData = chartDatas.get(addr)
-          if (colData) {
-            colData.push([time, val])
-          } else {
-            chartDatas.set(addr, [[time, val]])
-          }
-        }
+    const res = await getDeviceDetails(params)
+    if (res.code !== 0) {
+      clearData()
+      resetChartStatus()
+      message.error('获取设备数据失败')
+      return
+    }
+    const pointData = Array.isArray(res.data.results) ? res.data.results : []
+    setChartData(pointData)
+    progress.value = Math.min(100, Math.floor(((i + 1) / pageCount) * 100))
+  }
+
+  resetChartStatus()
+}
+
 
-        if (ts) {
-          axisData.add(time)
+function setChartData(pointData: any[]) {
+  for (const addr of columsParams.value.filter(i => i !== 'ts')) {
+    const label = pointList.value.find(i => i.addr === addr)?.label || addr
+    const find = legends.value.find(i => i.addr === addr)
+    const unit = pointList.value.find(i => i.addr === addr)?.unit || ''
+    if (!find) {
+      legends.value.push({ addr, label, unit })
+    }
+  }
+  pointData.forEach((data: any[]) => {
+    const [ts, val, addr] = data
+    if (checkPointList.value.some(i => i.addr === addr)) {
+      const time = dayjs(Number(ts)).format('YYYY-MM-DD HH:mm:ss')
+      if (addr) {
+        const colData = chartDatas.get(addr)
+        if (colData) {
+          colData.push([time, val])
+        } else {
+          chartDatas.set(addr, [[time, val]])
         }
       }
-    })
-  } else {
-    message.error('获取设备数据失败')
-  }
-  loadingChart.value = false
-  nextTick(() => {
-    isShowChart.value = true
+
+      if (ts) {
+        axisData.add(time)
+      }
+    }
   })
+
 }
 
 // function zmqImport(device: IOfflineDevice) {
@@ -249,15 +312,31 @@ async function loadChardData() {
 
 function handleBeforeClose(done: () => void) {
   isShowDrawer.value = false
-  pointList.value = []
-  chartDatas.clear()
-  axisData.clear()
+  clearData()
   fullscreenLoading.value = null
   done()
 }
 
+function clearData() {
+  chartLimit.value = 1000
+  chartOffset.value = 0
+  chartAllTotal.value = 0
+  progress.value = 0
+  legends.value = []
+  chartDatas.clear()
+  axisData.clear()
+}
+
+function resetChartStatus() {
+  loadingChart.value = false
+  nextTick(() => {
+    isShowChart.value = true
+  })
+}
+
 const chartRef = ref<InstanceType<typeof NewDataChart>>()
 const isShowChart = ref(false)
+
 function onDrawerOpened() {
   nextTick(() => {
     isShowChart.value = true
@@ -302,6 +381,7 @@ async function loadPointGroup() {
 }
 
 const groupChangeLoading = ref<boolean>(false)
+
 function onGroupChange(item: IPointGroupOV) {
   if (!item?.type) {
     return
diff --git a/src/views/stationData/components/newDataChart.vue b/src/views/stationData/components/newDataChart.vue
index 2eb9aa8..1d16226 100644
--- a/src/views/stationData/components/newDataChart.vue
+++ b/src/views/stationData/components/newDataChart.vue
@@ -103,16 +103,16 @@ const chartOption = computed<EChartsOption>(() => {
       trigger: 'axis',
       confine: true,
       appendToBody: true,
-      formatter: function (params: any) {
-        var relVal = params[0].name
-
-        for (var i = 0, l = params.length; i < l; i++) {
-          relVal += `<div style="display: flex; justify-content: space-between; gap: 30px;">
-          <div>${params[i].marker}${params[i].seriesName}:</div> <div">${params[i].value[1]}${props.legends.find(item => item.addr === params[i].seriesId)?.unit || ''}</div>
-          </div>`
-        }
-        return relVal
-      }
+      // formatter: function (params: any) {
+      //   var relVal = params[0].name
+      //
+      //   for (var i = 0, l = params.length; i < l; i++) {
+      //     relVal += `<div style="display: flex; justify-content: space-between; gap: 30px;">
+      //     <div>${params[i].marker}${params[i].seriesName}:</div> <div">${params[i].value[1]}${props.legends.find(item => item.addr === params[i].seriesId)?.unit || ''}</div>
+      //     </div>`
+      //   }
+      //   return relVal
+      // }
     },
     legend: {
       type: 'scroll',
diff --git a/src/views/stationData/transferData.vue b/src/views/stationData/transferData.vue
index cde726e..0d30cea 100644
--- a/src/views/stationData/transferData.vue
+++ b/src/views/stationData/transferData.vue
@@ -420,11 +420,6 @@ function onOffDeviceTransfer() {
   :deep(.el-checkbox__inner) {
     width: 18px;
     height: 18px;
-
-    &::after {
-      left: 6px;
-      top: 3px;
-    }
   }
 
   :deep(.el-checkbox__label) {