From 603853a1290e7d71297c9ce5b64181a090adab87 Mon Sep 17 00:00:00 2001
From: zhizhijie <zhizhijie@users.noreply.gitee.com>
Date: 星期二, 08 九月 2026 17:44:50 +0800
Subject: [PATCH] docs: 09-08 工作日结补记下班前状态（最新代码已重启就绪，明日待办8月填值/9月整链/临时文件清理）
---
traffic-audit-web/src/views/DataView.vue | 176 +++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 159 insertions(+), 17 deletions(-)
diff --git a/traffic-audit-web/src/views/DataView.vue b/traffic-audit-web/src/views/DataView.vue
index 23882f3..3dce26a 100644
--- a/traffic-audit-web/src/views/DataView.vue
+++ b/traffic-audit-web/src/views/DataView.vue
@@ -3,7 +3,7 @@
<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,7 @@
<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>
+</el-menu>
</el-aside>
<el-main>
<h3>瀵煎叆鏁版嵁鏌ョ湅</h3>
@@ -24,6 +24,11 @@
<el-radio-button label="trackMileage">杞ㄨ抗閲岀▼</el-radio-button>
<el-radio-button label="scaleSplit">瑙勪笂瑙勪笅鎷嗗垎</el-radio-button>
<el-radio-button label="freightTurnover">璐ц繍閲忓懆杞噺</el-radio-button>
+ <el-radio-button label="h2031">H203-1鏃呭鏈堟姤</el-radio-button>
+ <el-radio-button label="passengerAuth">鏃呭杩愭斂杞﹁締</el-radio-button>
+ <el-radio-button label="cityBus">鍩庡競鍏氦鏈堟姤</el-radio-button>
+ <el-radio-button label="cityTaxi">宸℃父鍑虹鏈堟姤</el-radio-button>
+ <el-radio-button label="cityTaxiAuth">鍑虹杞﹁繍鏀胯溅杈�</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="鎶ヨ〃鏈�">
@@ -34,25 +39,28 @@
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadData">鏌ヨ</el-button>
+ <el-button type="success" icon="el-icon-full-screen" @click="toggleFullscreen">鍏ㄥ睆鏌ョ湅</el-button>
</el-form-item>
</el-form>
<div style="color:#909399;font-size:12px;margin-bottom:6px">
鍏� {{ total }} 鏉¤褰曪紝褰撳墠绗� {{ page }} 椤�
</div>
- <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 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>
@@ -73,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,
@@ -96,11 +106,85 @@
this.page = 1
this.loadData()
}
- }).catch(() => {
+ }).catch(e => {
+ if (e && e._toast) return
this.$message.error('鏁版嵁鏌ヨ澶辫触')
}).finally(() => {
this.loading = false
+ this.$nextTick(() => this.attachBodyScroll())
})
+ },
+ // el-table 鍥哄畾楂樺害鍚庯紝鐪熸鐨勭珫鍚戞粴鍔ㄥ鍣ㄦ槸鍐呴儴鐨� body-wrapper锛堥〉闈㈡湰韬笉婊氬姩锛�
+ attachBodyScroll() {
+ const wrap = this.$refs.tableWrap
+ if (!wrap) return
+ const bw = wrap.querySelector('.el-table__body-wrapper')
+ if (bw && bw._vwScrollHandler !== this.onScroll) {
+ if (bw._vwScrollHandler) bw.removeEventListener('scroll', bw._vwScrollHandler)
+ bw.addEventListener('scroll', this.onScroll, { passive: true })
+ bw._vwScrollHandler = this.onScroll
+ }
+ },
+ // 婊氬姩鍒板簳閮ㄨ嚜鍔ㄨ拷鍔犱笅涓�椤碉紙淇濈暀鎵嬪姩鍒嗛〉璺抽〉鑳藉姏锛�
+ 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
+ this.$nextTick(() => this.attachBodyScroll())
+ })
+ },
+ 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) {
+ if (el && el.requestFullscreen) el.requestFullscreen()
+ else this.$message.warning("娴忚鍣ㄤ笉鏀寔鍏ㄥ睆")
+ } else if (document.exitFullscreen) {
+ document.exitFullscreen()
+ }
},
formatCell(v) {
if (v === null || v === undefined || v === '') return '-'
@@ -108,9 +192,67 @@
}
},
mounted() {
+ const q = this.$route.query
+ if (q.type) this.type = q.type
+ 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 })
+ }
+ this.$nextTick(() => this.attachBodyScroll())
+ },
+ beforeDestroy() {
+ window.removeEventListener('scroll', this.onScroll)
+ if (this.$refs.tableWrap) {
+ this.$refs.tableWrap.removeEventListener('scroll', this.onScroll, { capture: true })
+ const bw = this.$refs.tableWrap.querySelector('.el-table__body-wrapper')
+ if (bw && bw._vwScrollHandler) bw.removeEventListener('scroll', bw._vwScrollHandler)
+ }
}
}
</script>
<style scoped>
+.el-header { background: #409EFF; color: white; line-height: 60px; font-size: 18px; }
+#app .table-wrap {
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - 330px);
+ min-height: 300px;
+}
+#app .table-area {
+ flex: 1 1 auto;
+ min-height: 0;
+ overflow: hidden;
+}
+#app .table-area .el-table {
+ width: 100%;
+ height: 100%;
+}
+#app .table-wrap .el-pagination {
+ flex: none;
+ margin-top: 8px;
+}
+#app .table-area:fullscreen {
+ padding: 20px;
+ background: #fff;
+ overflow: auto;
+}
+#app .table-wrap:fullscreen {
+ padding: 20px;
+ background: #fff;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+#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