From 2b1bfd1f5fa86378f2a86541d16d7e46963a0631 Mon Sep 17 00:00:00 2001
From: zhizhijie <zhizhijie@users.noreply.gitee.com>
Date: 星期二, 08 九月 2026 15:29:31 +0800
Subject: [PATCH] feat: 汇总大表日期格式/小数位复核+VBA列宽宏+DataView滚动加载+RULE_004双向与P005阈值联动
---
traffic-audit-web/src/views/DataView.vue | 122 ++++++++++++++++++++++++++++++++++------
1 files changed, 102 insertions(+), 20 deletions(-)
diff --git a/traffic-audit-web/src/views/DataView.vue b/traffic-audit-web/src/views/DataView.vue
index e4ca041..1ec3c5e 100644
--- a/traffic-audit-web/src/views/DataView.vue
+++ b/traffic-audit-web/src/views/DataView.vue
@@ -1,9 +1,9 @@
<template>
- <el-container>
- <el-header>浜ら�氱粺璁℃姤琛ㄥ鏍哥郴缁� - 鏁版嵁鏌ョ湅</el-header>
+ <el-container direction="vertical">
+ <app-header title="浜ら�氱粺璁℃姤琛ㄥ鏍哥郴缁� - 鏁版嵁鏌ョ湅"></app-header>
<el-container>
<el-aside width="200px">
- <el-menu router default-active="/data">
+ <el-menu ref="sideMenu" router :default-active="$route.path" @select="onMenuSelect">
<el-menu-item index="/dashboard">宸ヤ綔鍙�</el-menu-item>
<el-menu-item index="/import">鏁版嵁瀵煎叆</el-menu-item>
<el-menu-item index="/data">鏁版嵁鏌ョ湅</el-menu-item>
@@ -12,7 +12,6 @@
<el-menu-item index="/report">鎶ヨ〃鐢熸垚</el-menu-item>
<el-menu-item index="/rules">瑙勫垯绠＄悊</el-menu-item>
<el-menu-item index="/users">鐢ㄦ埛绠＄悊</el-menu-item>
- <el-menu-item index="/login" @click="logout">閫�鍑虹櫥褰�</el-menu-item>
</el-menu>
</el-aside>
<el-main>
@@ -46,27 +45,31 @@
<div style="color:#909399;font-size:12px;margin-bottom:6px">
鍏� {{ total }} 鏉¤褰曪紝褰撳墠绗� {{ page }} 椤�
</div>
- <div class="table-area" ref="tableArea">
- <el-table :data="records" border v-loading="loading" size="small" style="width:100%" height="100%">
- <el-table-column v-for="c in columns" :key="c.prop" :prop="c.prop" :label="c.label" :min-width="c.width" show-overflow-tooltip>
- <template slot-scope="scope">
- <span>{{ formatCell(scope.row[c.prop]) }}</span>
- </template>
- </el-table-column>
- </el-table>
+ <div class="table-wrap" ref="tableWrap">
+ <div class="table-area">
+ <el-table :data="records" border v-loading="loading" size="small" style="width:100%" height="100%">
+ <el-table-column v-for="c in columns" :key="c.prop" :prop="c.prop" :label="c.label" :min-width="c.width" show-overflow-tooltip>
+ <template slot-scope="scope">
+ <span>{{ formatCell(scope.row[c.prop]) }}</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ <el-pagination style="margin-top:15px;text-align:right"
+ background layout="total, prev, pager, next, sizes"
+ :total="total" :current-page.sync="page" :page-size.sync="size"
+ :page-sizes="[20, 50, 100]" @current-change="loadData" @size-change="loadData">
+ </el-pagination>
</div>
- <el-pagination style="margin-top:15px;text-align:right"
- background layout="total, prev, pager, next, sizes"
- :total="total" :current-page.sync="page" :page-size.sync="size"
- :page-sizes="[20, 50, 100]" @current-change="loadData" @size-change="loadData">
- </el-pagination>
</el-main>
</el-container>
</el-container>
</template>
<script>
+import AppHeader from '@/components/AppHeader.vue'
import api from '@/api'
export default {
+ components: { AppHeader },
name: 'DataView',
data() {
return {
@@ -78,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,
@@ -101,14 +106,66 @@
this.page = 1
this.loadData()
}
- }).catch(() => {
+ }).catch(e => {
+ if (e && e._toast) return
this.$message.error('鏁版嵁鏌ヨ澶辫触')
}).finally(() => {
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.tableArea
+ const el = this.$refs.tableWrap
if (!document.fullscreenElement) {
if (el && el.requestFullscreen) el.requestFullscreen()
else this.$message.warning("娴忚鍣ㄤ笉鏀寔鍏ㄥ睆")
@@ -127,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锛歟l-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>
@@ -137,4 +205,18 @@
background: #fff;
overflow: auto;
}
+#app .table-wrap:fullscreen {
+ padding: 20px;
+ background: #fff;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+}
+#app .table-wrap:fullscreen .table-area {
+ flex: 1 1 auto;
+ min-height: 0;
+}
+#app .table-wrap:fullscreen .el-pagination {
+ flex: none;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1