From 7a26ed20d0b95f781a60f9fc94ffae613c87fe6f Mon Sep 17 00:00:00 2001
From: zhizhijie <zhizhijie@users.noreply.gitee.com>
Date: 星期二, 22 九月 2026 10:06:56 +0800
Subject: [PATCH] feat(数据查看): 数据类型改分组单下拉框（支持搜索）+ 接入左侧冻结标识列（含此前未提交的冻结列实现）
---
traffic-audit-web/src/views/DataView.vue | 70 +++++++++++++++++++++++++++++------
1 files changed, 58 insertions(+), 12 deletions(-)
diff --git a/traffic-audit-web/src/views/DataView.vue b/traffic-audit-web/src/views/DataView.vue
index 3fafdd5..91ac846 100644
--- a/traffic-audit-web/src/views/DataView.vue
+++ b/traffic-audit-web/src/views/DataView.vue
@@ -17,17 +17,16 @@
<el-main>
<h3>瀵煎叆鏁版嵁鏌ョ湅</h3>
<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-select v-model="type" size="small" style="width:300px" placeholder="閫夋嫨鏁版嵁绫诲瀷" filterable
+ :title="currentTypeLabel" @change="onTypeSelect">
+ <el-option-group v-for="g in modules" :key="g.key" :label="g.name">
+ <el-option v-for="t in g.types" :key="t.value" :label="t.label" :value="t.value"></el-option>
</el-option-group>
</el-select>
- <span class="toolbar-sep"></span>
- <el-date-picker v-model="period" type="month" placeholder="鎶ヨ〃鏈燂紙鍏ㄩ儴锛�" value-format="yyyy-MM" clearable style="width:150px" @change="doQuery"></el-date-picker>
<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>
@@ -36,7 +35,7 @@
<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>
+ <el-table-column v-for="c in renderColumns" :key="c.prop" :prop="c.prop" :label="c.label" :min-width="c.width" :fixed="c.fixed ? 'left' : false" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ formatCell(scope.row[c.prop]) }}</span>
</template>
@@ -70,14 +69,30 @@
{
key: 'passenger', name: '鍏矾鏃呭', types: [
{ value: 'h2031', label: '鍏矾鏃呭杩愯緭鏈堝害鐢熶骇鎯呭喌' },
- { value: 'passengerAuth', label: '杩愭斂杞﹁締鏁�' }
+ { value: 'passengerAuth', label: '杩愭斂杞﹁締鏁�' },
+ { value: 'passengerIndividual', label: '涓綋瀹㈣繍閲�/鍛ㄨ浆閲�' }
]
},
{
key: 'city', name: '鍩庡競瀹㈣繍', types: [
{ value: 'cityBus', label: '鍩庡競鍏叡浜ら�氭湀搴﹁繍钀ユ儏鍐�' },
{ value: 'cityTaxi', label: '宸℃父鍑虹姹借溅杩愯惀鏈嶅姟鎯呭喌鏈堟姤' },
- { value: 'cityTaxiAuth', label: '鍑虹杞﹁繍鏀胯溅杈�' }
+ { value: 'cityTaxiAuth', label: '鍑虹杞﹁繍鏀胯溅杈�' },
+ { value: 'wycTotal', label: '缃戠害杞︽�绘暟' },
+ { value: 'wycOrder', label: '缃戠害杞﹁鍗曞強鍏ㄧ渷鎬婚噺' }
+ ]
+ },
+ {
+ key: 'invest', name: '鎶曡祫', types: [
+ { value: 'investmentProject', label: '鎶曡祫椤圭洰鍩虹琛�' },
+ { value: 'investmentMonthly', label: '甯傚窞鏈堟姤椤圭洰杩涘害' },
+ { value: 'investmentSystem', label: '鎶曡祫绯荤粺姣忔湀瀵煎叆椤圭洰琛�' }
+ ]
+ },
+ {
+ key: 'energy', name: '鑳借��', types: [
+ { value: 'energyVehicle', label: '杞﹁締鑳借�楀搴︽暟鎹�' },
+ { value: 'energyAuth', label: '鑳借�楄繍鏀胯溅杈嗘暟' }
]
}
],
@@ -95,6 +110,13 @@
}
},
computed: {
+ currentTypeLabel() {
+ for (const g of this.modules) {
+ const t = g.types.find(x => x.value === this.type)
+ if (t) return g.name + ' 路 ' + t.label
+ }
+ return this.type
+ },
activeTypes() {
const g = this.modules.find(x => x.key === this.activeModule) || this.modules[0]
return g
@@ -104,6 +126,26 @@
const hiddenLabels = ['浼佷笟浠ｇ爜', '缁熶竴绀句細淇＄敤浠ｇ爜', '濉姤鍗曚綅']
return (this.columns || []).filter(c =>
hiddenProps.indexOf(c.prop) < 0 && hiddenLabels.indexOf(c.label) < 0)
+ },
+ // 宸︿晶鍐荤粨"杩欐槸璋佺殑鏁版嵁"鎵�闇�鍒楋細妯悜婊氬姩鏃朵紒涓氬悕绉�/甯傚窞涓嶄細璺戝嚭瑙嗛噹銆�
+ // 鍙喕缁撲粠绗� 1 鍒楀紑濮嬬殑涓�娈佃繛缁垪锛岄伩鍏嶅喕缁撳垪涔嬮棿琚櫘閫氬垪鎵撴柇銆�
+ renderColumns() {
+ const stickyProps = ['reportPeriod', 'regionCode', 'city', 'regionName', 'periodType',
+ 'enterpriseName', 'projectName', 'plateNo']
+ const nameProps = ['enterpriseName', 'projectName', 'plateNo']
+ const cols = this.visibleColumns
+ let limit = -1
+ for (let i = 0; i < cols.length && i < 6; i++) {
+ if (nameProps.indexOf(cols[i].prop) >= 0) { limit = Math.min(i, 3); break }
+ }
+ if (limit < 0) {
+ // 琛ㄩ噷娌℃湁鍚嶇О鍒楋紙濡傝揣杩愰噺鍛ㄨ浆閲忥級鏃讹紝鍐荤粨寮�澶寸殑杩炵画鏍囪瘑鍒�
+ limit = 0
+ while (limit + 1 < cols.length && limit < 2 && stickyProps.indexOf(cols[limit + 1].prop) >= 0) {
+ limit++
+ }
+ }
+ return cols.map((c, i) => Object.assign({}, c, { fixed: i <= limit && stickyProps.indexOf(c.prop) >= 0 }))
}
},
methods: {
@@ -115,7 +157,11 @@
}
this.doQuery()
},
- onTypeSelect() { this.doQuery() },
+ onTypeSelect() {
+ const g = this.modules.find(x => x.types.some(t => t.value === this.type))
+ if (g) this.activeModule = g.key
+ this.doQuery()
+ },
doQuery() {
this.page = 1
this.records = []
--
Gitblit v1.9.1