feat: 汇总大表日期格式/小数位复核+VBA列宽宏+DataView滚动加载+RULE_004双向与P005阈值联动

zhizhijie

2026-09-08 2b1bfd1f5fa86378f2a86541d16d7e46963a0631

 traffic-audit-web/src/views/DataView.vue

@@ -81,12 +81,14 @@
      total: 0,
      records: [],
      columns: [],
      loading: false
      loading: false,
      loadingMore: false
    }
  },
  methods: {
    loadData() {
      this.loading = true
      this.loadingMore = false
      api.get('/data/list', {
        params: {
          type: this.type,
@@ -111,6 +113,57 @@
        this.loading = false
      })
    },
    // 滚动到底部自动追加下一页（保留手动分页跳页能力）
    loadMore() {
      if (this.loading || this.loadingMore) return
      if (this.records.length >= this.total || this.total <= 0) return
      const nextPage = this.page + 1
      this.loadingMore = true
      api.get('/data/list', {
        params: {
          type: this.type,
          period: this.period || undefined,
          keyword: this.keyword || undefined,
          page: nextPage,
          size: this.size
        }
      }).then(res => {
        const d = res.data || {}
        const addRows = d.records || []
        if (!addRows.length) {
          this.page = nextPage - 1
          return
        }
        this.records = this.records.concat(addRows)
        this.page = nextPage
        if (d.total != null) this.total = d.total
        if (d.columns && d.columns.length) this.columns = d.columns
      }).catch(e => {
        if (e && e._toast) return
        this.$message.error('加载更多失败')
      }).finally(() => {
        this.loadingMore = false
      })
    },
    onScroll(e) {
      // 普通/全屏下真正的滚动容器都是 el-table 内部 body-wrapper（捕获阶段可收到）；
      // 页面整体滚动时以 window/document 为准。
      const t = e && e.target
      let scrollTop, clientHeight, scrollHeight
      if (t && t.nodeType === 1 && t !== document && typeof t.scrollTop === 'number' && t.scrollHeight > t.clientHeight) {
        scrollTop = t.scrollTop
        clientHeight = t.clientHeight
        scrollHeight = t.scrollHeight
      } else {
        const se = document.scrollingElement || document.documentElement
        scrollTop = se.scrollTop
        clientHeight = window.innerHeight
        scrollHeight = se.scrollHeight
      }
      if (scrollHeight > 0 && scrollTop + clientHeight >= scrollHeight - 80) {
        this.loadMore()
      }
    },
    toggleFullscreen() {
      const el = this.$refs.tableWrap
      if (!document.fullscreenElement) {
@@ -131,6 +184,17 @@
    if (q.period) this.period = q.period
    if (q.keyword) this.keyword = q.keyword
    this.loadData()
    window.addEventListener('scroll', this.onScroll, { passive: true })
    if (this.$refs.tableWrap) {
      // capture=true：el-table 内部 body-wrapper 的滚动在捕获阶段也能收到
      this.$refs.tableWrap.addEventListener('scroll', this.onScroll, { passive: true, capture: true })
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll)
    if (this.$refs.tableWrap) {
      this.$refs.tableWrap.removeEventListener('scroll', this.onScroll, { capture: true })
    }
  }
}
</script>