From 8bcd59732179e920733dee79fc917aa513f6a37c Mon Sep 17 00:00:00 2001
From: zhizhijie <zhizhijie@users.noreply.gitee.com>
Date: 星期四, 17 九月 2026 16:42:07 +0800
Subject: [PATCH] chore(git): 根目录临时文件归档至 _tmp/ 并加固 .gitignore（防真实数据误提交），工作日结补记

---
 traffic-audit-web/src/views/DataView.vue |  244 ++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 192 insertions(+), 52 deletions(-)

diff --git a/traffic-audit-web/src/views/DataView.vue b/traffic-audit-web/src/views/DataView.vue
index ace9b12..be4d1c9 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>
@@ -16,49 +16,36 @@
       </el-aside>
       <el-main>
         <h3>瀵煎叆鏁版嵁鏌ョ湅</h3>
-        <el-form :inline="true">
-          <el-form-item label="鏁版嵁绫诲瀷">
-            <el-radio-group v-model="type" @change="loadData">
-              <el-radio-button label="h2032">H203-2鏈堟姤</el-radio-button>
-              <el-radio-button label="transportAuth">杩愭斂杞﹁締</el-radio-button>
-              <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="鎶ヨ〃鏈�">
-            <el-date-picker v-model="period" type="month" placeholder="鍏ㄩ儴" value-format="yyyy-MM" clearable style="width:140px" @change="loadData"></el-date-picker>
-          </el-form-item>
-          <el-form-item label="鍏抽敭瀛�">
-            <el-input v-model="keyword" placeholder="浼佷笟/甯傚窞鍚嶇О" clearable style="width:200px" @keyup.enter.native="loadData"></el-input>
-          </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 class="toolbar">
+          <span class="toolbar-label">鎶ヨ〃鏈�</span>
+          <el-date-picker v-model="period" type="month" placeholder="鎶ヨ〃鏈燂紙鍏ㄩ儴锛�" value-format="yyyy-MM" clearable style="width:150px" @change="doQuery"></el-date-picker>
+          <span class="toolbar-sep"></span>
+          <span class="toolbar-label">鏁版嵁绫诲瀷</span>
+          <el-radio-group v-model="activeModule" size="small" @change="onModuleChange">
+            <el-radio-button v-for="g in modules" :key="g.key" :label="g.key">{{ g.name }}</el-radio-button>
+          </el-radio-group>
+          <el-select v-model="type" size="small" style="width:250px" placeholder="閫夋嫨鏁版嵁绫诲瀷" @change="onTypeSelect">
+            <el-option-group :label="activeTypes.name">
+              <el-option v-for="t in activeTypes.types" :key="t.value" :label="t.label" :value="t.value"></el-option>
+            </el-option-group>
+          </el-select>
+          <el-input v-model="keyword" placeholder="浼佷笟/甯傚窞鍚嶇О" clearable style="width:180px" @keyup.enter.native="doQuery"></el-input>
+          <el-button type="primary" size="small" @click="doQuery">鏌ヨ</el-button>
+          <el-button size="small" icon="el-icon-full-screen" @click="toggleFullscreen">鍏ㄥ睆鏌ョ湅</el-button>
         </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="load-hint">鍏� {{ total }} 鏉¤褰曪紝宸插姞杞� {{ records.length }} 鏉�</div>
+        <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 visibleColumns" :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>
         </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>
@@ -71,20 +58,86 @@
   name: 'DataView',
   data() {
     return {
+      modules: [
+        {
+          key: 'freight', name: '閬撹矾璐ц繍', types: [
+            { value: 'h2032', label: '閬撹矾璐х墿杩愯緭鏈堝害鐢熶骇鎯呭喌' },
+            { value: 'transportAuth', label: '杩愭斂杞﹁締' },
+            { value: 'trackMileage', label: '杞ㄨ抗閲岀▼' },
+            { value: 'scaleSplit', label: '瑙勪笂瑙勪笅鎷嗗垎' },
+            { value: 'freightTurnover', label: '璐ц繍閲忓懆杞噺' }
+          ]
+        },
+        {
+          key: 'passenger', name: '鍏矾鏃呭', types: [
+            { value: 'h2031', label: '鍏矾鏃呭杩愯緭鏈堝害鐢熶骇鎯呭喌' },
+            { value: 'passengerAuth', label: '杩愭斂杞﹁締鏁�' }
+          ]
+        },
+        {
+          key: 'city', name: '鍩庡競瀹㈣繍', types: [
+            { value: 'cityBus', label: '鍩庡競鍏叡浜ら�氭湀搴﹁繍钀ユ儏鍐�' },
+            { value: 'cityTaxi', label: '宸℃父鍑虹姹借溅杩愯惀鏈嶅姟鎯呭喌鏈堟姤' },
+            { value: 'cityTaxiAuth', label: '鍑虹杞﹁繍鏀胯溅杈�' }
+          ]
+        },
+        {
+          key: 'invest', name: '鎶曡祫', types: [
+            { value: 'investmentProject', label: '鎶曡祫椤圭洰鍩虹琛�' },
+            { value: 'investmentMonthly', label: '甯傚窞鏈堟姤椤圭洰杩涘害' },
+            { value: 'investmentSystem', label: '鎶曡祫绯荤粺姣忔湀瀵煎叆椤圭洰琛�' }
+          ]
+        },
+        {
+          key: 'energy', name: '鑳借��', types: [
+            { value: 'energyVehicle', label: '杞﹁締鑳借�楀搴︽暟鎹�' },
+            { value: 'energyAuth', label: '鑳借�楄繍鏀胯溅杈嗘暟' }
+          ]
+        }
+      ],
+      activeModule: 'freight',
       type: 'h2032',
       period: '',
       keyword: '',
       page: 1,
-      size: 20,
+      size: 50,
       total: 0,
       records: [],
       columns: [],
-      loading: false
+      loading: false,
+      loadingMore: false
+    }
+  },
+  computed: {
+    activeTypes() {
+      const g = this.modules.find(x => x.key === this.activeModule) || this.modules[0]
+      return g
+    },
+    visibleColumns() {
+      const hiddenProps = ['enterpriseCode', 'unifiedCreditCode', 'reportUnit']
+      const hiddenLabels = ['浼佷笟浠ｇ爜', '缁熶竴绀句細淇＄敤浠ｇ爜', '濉姤鍗曚綅']
+      return (this.columns || []).filter(c =>
+        hiddenProps.indexOf(c.prop) < 0 && hiddenLabels.indexOf(c.label) < 0)
     }
   },
   methods: {
+    onModuleChange(key) {
+      const g = this.modules.find(x => x.key === key)
+      if (!g || !g.types.length) return
+      if (!g.types.some(t => t.value === this.type)) {
+        this.type = g.types[0].value
+      }
+      this.doQuery()
+    },
+    onTypeSelect() { this.doQuery() },
+    doQuery() {
+      this.page = 1
+      this.records = []
+      this.loadData()
+    },
     loadData() {
       this.loading = true
+      this.loadingMore = false
       api.get('/data/list', {
         params: {
           type: this.type,
@@ -96,20 +149,85 @@
       }).then(res => {
         const d = res.data || {}
         this.records = d.records || []
-        this.columns = d.columns || []
+        this.columns = (d.columns || []).filter(c => ['enterpriseCode', 'unifiedCreditCode', 'reportUnit'].indexOf(c.prop) < 0 && ['浼佷笟浠ｇ爜', '缁熶竴绀句細淇＄敤浠ｇ爜', '濉姤鍗曚綅'].indexOf(c.label) < 0)
         this.total = d.total || 0
         if (this.page > 1 && this.records.length === 0) {
           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.filter(c => ['enterpriseCode', 'unifiedCreditCode', 'reportUnit'].indexOf(c.prop) < 0 && ['浼佷笟浠ｇ爜', '缁熶竴绀句細淇＄敤浠ｇ爜', '濉姤鍗曚綅'].indexOf(c.label) < 0)
+      }).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.tableArea
+      const el = this.$refs.tableWrap
       if (!document.fullscreenElement) {
         if (el && el.requestFullscreen) el.requestFullscreen()
         else this.$message.warning("娴忚鍣ㄤ笉鏀寔鍏ㄥ睆")
@@ -128,14 +246,36 @@
     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-area:fullscreen {
-  padding: 20px;
-  background: #fff;
-  overflow: auto;
-}
+.type-row { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.type-label { color: #606266; font-weight: 600; }
+.filter-row { margin-bottom: 4px; }
+#app .toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; background:#FAFAFA; border:1px solid #EBEEF5; border-radius:8px; margin-bottom:8px; }
+#app .toolbar-label { color:#606266; font-weight:600; white-space:nowrap; }
+#app .toolbar-sep { width:1px; height:22px; background:#DCDFE6; margin:0 2px; }
+#app .load-hint { color:#909399; font-size:12px; margin-bottom:6px; }
+#app .table-wrap { display:flex; flex-direction:column; height:calc(100vh - 250px); 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-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; }
 </style>
\ No newline at end of file

--
Gitblit v1.9.1