trafficAudit.git

			@@ -21,12 +21,10 @@
			<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
			popper-class="data-type-select" :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>
			<el-input v-model="keyword" placeholder="企业/市州名称" clearable style="width:180px" @keyup.enter.native="doQuery"></el-input>
			@@ -37,9 +35,9 @@
			<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>
			<span>{{ formatCell(scope.row[c.prop], c.prop) }}</span>
			</template>
			</el-table-column>
			</el-table>
			@@ -112,18 +110,41 @@
			}
			},
			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
			},
			visibleColumns() {
			const hiddenProps = ['enterpriseCode', 'unifiedCreditCode', 'reportUnit']
			const hiddenLabels = ['企业代码', '统一社会信用代码', '填报单位']
			return (this.columns \|\| []).filter(c =>
			hiddenProps.indexOf(c.prop) < 0 && hiddenLabels.indexOf(c.label) < 0)
			return (this.columns \|\| []).filter(c => this.keepColumn(c))
			},
			// 左侧冻结"这是谁的数据"的列：市州/地区 + 企业(项目)名称/车牌号，最多 3 列。
			// 报表期与所属地区不参与冻结（报表期是筛选条件，所属地区是区划代码，已由市州列替代）。
			renderColumns() {
			const stickyProps = ['city', 'regionName', 'region', 'periodType', 'enterpriseName', 'projectName', 'plateNo']
			const cols = this.visibleColumns
			let count = 0
			while (count < cols.length && count < 3 && stickyProps.indexOf(cols[count].prop) >= 0) {
			count++
			}
			return cols.map((c, i) => Object.assign({}, c, { fixed: i < count }))
			}
			},
			methods: {
			// 数据查看统一列过滤：内部标识列不展示；报表期（由筛选条件体现）与所属地区（区划代码，已被市州列替代）不展示
			keepColumn(c) {
			if (!c) return false
			const hiddenProps = ['enterpriseCode', 'unifiedCreditCode', 'reportUnit', 'projectId', 'regionCode', 'reportPeriod']
			const hiddenLabels = ['企业代码', '统一社会信用代码', '填报单位', '项目ID', '所属地区', '报表期']
			if (hiddenProps.indexOf(c.prop) >= 0 \|\| hiddenLabels.indexOf(c.label) >= 0) return false
			return true
			},
			onModuleChange(key) {
			const g = this.modules.find(x => x.key === key)
			if (!g \|\| !g.types.length) return
			@@ -132,7 +153,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 = []
			@@ -238,9 +263,21 @@
			document.exitFullscreen()
			}
			},
			formatCell(v) {
			// 显示格式化（不改动底层数据，导出仍为全精度）：
			// - 比率类列（环比/同比/增速/占比）库内是小数（0.045 = 4.5%），显示为百分比；
			// - 排名类列显示整数；
			// - 其余数值千分位、保留两位小数；整数原样。
			formatCell(v, prop) {
			if (v === null \|\| v === undefined \|\| v === '') return '-'
			return v
			const s = typeof v === 'string' ? v.trim() : v
			if (typeof v !== 'number' && !/^-?\d+(\.\d+)?$/.test(String(s))) return v
			const n = Number(s)
			if (!isFinite(n)) return v
			const key = String(prop \|\| '').toLowerCase()
			if (/rank/.test(key)) return Math.round(n).toLocaleString('zh-CN')
			if (/(rate\|yoy\|mom\|growth\|ratio\|percent\|share)/.test(key)) return (n * 100).toFixed(2) + '%'
			if (Number.isInteger(n)) return n.toLocaleString('zh-CN')
			return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
			}
			},
			mounted() {
			@@ -281,4 +318,20 @@
			#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>
			</style>
			<style>
			/* 数据类型下拉：Element UI 默认把分组标题做成 12px 灰色小字，看起来"比选项更小更淡"。
			这里把它改成明确的组标题样式（加深、加粗、略大、带底色），与选项形成有意的层级。 */
			.data-type-select .el-select-group__title {
			font-size: 13px;
			font-weight: 700;
			color: #303133;
			line-height: 28px;
			background: #F5F7FA;
			padding-left: 12px;
			letter-spacing: .5px;
			}
			.data-type-select .el-select-group__title::after { display: none; }
			.data-type-select .el-select-group { padding-bottom: 6px; }
			.data-type-select .el-select-group .el-select-dropdown__item { padding-left: 20px; }
			</style>