feat(数据查看): 按市州汇总(任意起止月/自动上年同期/时点列不参与/排名可选) + 导出 Excel，新增 CityRollupService...

zhizhijie

9 天以前 e9f1ee7341bcf55904f6c0d31aa91ff52aa441dc

 traffic-audit-web/src/views/DataView.vue

@@ -17,8 +17,10 @@
      <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>
          <template v-if="!isRollup">
            <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>
          </template>
          <span class="toolbar-sep"></span>
          <span class="toolbar-label">数据类型</span>
          <el-select v-model="type" size="small" style="width:300px" placeholder="选择数据类型" filterable
@@ -27,6 +29,26 @@
              <el-option v-for="t in g.types" :key="t.value" :label="t.label" :value="t.value"></el-option>
            </el-option-group>
          </el-select>
          <template v-if="canRollup">
            <span class="toolbar-label">视图</span>
            <el-radio-group v-model="viewMode" size="small" @change="onViewChange">
              <el-radio-button label="detail">明细</el-radio-button>
              <el-radio-button label="rollup">按市州汇总</el-radio-button>
            </el-radio-group>
          </template>
          <template v-if="isRollup">
            <span class="toolbar-label">起止月</span>
            <el-date-picker v-model="from" type="month" placeholder="起始月" value-format="yyyy-MM" style="width:130px"></el-date-picker>
            <span>~</span>
            <el-date-picker v-model="to" type="month" placeholder="结束月" value-format="yyyy-MM" style="width:130px"></el-date-picker>
            <span class="toolbar-label">排名</span>
            <el-select v-model="rankMode" size="small" style="width:150px">
              <el-option label="留空" value="blank"></el-option>
              <el-option label="按累计值重排" value="recompute"></el-option>
            </el-select>
            <el-button type="primary" size="small" @click="loadSummary">汇总</el-button>
            <el-button type="success" size="small" icon="el-icon-download" @click="exportSummary">导出 Excel</el-button>
          </template>
          <template v-if="hasPeriodType">
            <span class="toolbar-label">口径</span>
            <el-select v-model="periodType" size="small" style="width:110px" @change="doQuery">
@@ -35,11 +57,13 @@
              <el-option label="累计" value="CUMULATIVE"></el-option>
            </el-select>
          </template>
          <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>
          <template v-if="!isRollup">
            <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>
          </template>
          <el-button size="small" icon="el-icon-full-screen" @click="toggleFullscreen">全屏查看</el-button>
        </div>
        <div class="load-hint">共 {{ total }} 条记录，已加载 {{ records.length }} 条</div>
        <div class="load-hint">共 {{ total }} 条记录，已加载 {{ records.length }} 条<span v-if="isRollup && summaryHint" class="rollup-hint">　|　{{ summaryHint }}</span></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%">
@@ -108,6 +132,12 @@
      type: 'h2032',
      period: '',
      periodType: '',
      viewMode: 'detail',
      rollupTypes: [],
      from: '',
      to: '',
      rankMode: 'blank',
      summaryHint: '',
      keyword: '',
      page: 1,
      size: 50,
@@ -119,6 +149,12 @@
    }
  },
  computed: {
    canRollup() {
      return (this.rollupTypes || []).some(t => t.type === this.type)
    },
    isRollup() {
      return this.viewMode === 'rollup' && this.canRollup
    },
    // 规上规下拆分等表有"口径"列（当月/累计），把它做成上方筛选而不是表格列
    hasPeriodType() {
      return (this.columns || []).some(c => c.prop === 'periodType')
@@ -168,10 +204,67 @@
      }
      this.doQuery()
    },
    loadRollupTypes() {
      api.get('/data/rollupTypes').then(res => {
        // 拦截器已返回响应体，故 res.data 即类型数组
        this.rollupTypes = (res && res.data) || []
      }).catch(() => { this.rollupTypes = [] })
    },
    onViewChange() {
      this.records = []
      this.total = 0
      if (this.isRollup) {
        if (!this.to) this.to = this.period || this.defaultMonth()
        if (!this.from) this.from = this.to.substring(0, 4) + '-01'
        this.loadSummary()
      } else {
        this.summaryHint = ''
        this.doQuery()
      }
    },
    defaultMonth() {
      const now = new Date()
      return now.getFullYear() + '-' + ('0' + (now.getMonth() + 1)).slice(-2)
    },
    loadSummary() {
      if (!this.from || !this.to) { this.$message.warning('请先选择起止月'); return }
      this.loading = true
      api.get('/data/summary', { params: { type: this.type, from: this.from, to: this.to, rankMode: this.rankMode }, timeout: 120000 })
        .then(res => {
          const d = res.data || {}
          this.columns = d.columns || []
          this.records = d.records || []
          this.total = this.records.length
          this.summaryHint = (d.label || '') + '　' + d.from + ' ~ ' + d.to + ' 累计；同比基数 ' + d.lastFrom + ' ~ ' + d.lastTo
            + '；排名口径：' + (d.rankMode === 'recompute' ? '按累计值重排' : '留空')
        })
        .catch(e => { if (!e || !e._toast) this.$message.error('汇总查询失败') })
        .finally(() => { this.loading = false })
    },
    exportSummary() {
      if (!this.from || !this.to) { this.$message.warning('请先选择起止月'); return }
      api.get('/data/export', {
        params: { type: this.type, from: this.from, to: this.to, rankMode: this.rankMode },
        responseType: 'blob', timeout: 180000
      }).then(res => {
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = '按市州汇总_' + this.type + '_' + this.from + '_' + this.to + '.xlsx'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url)
        this.$message.success('汇总表已导出')
      }).catch(() => this.$message.error('导出失败'))
    },
    onTypeSelect() {
      const g = this.modules.find(x => x.types.some(t => t.value === this.type))
      if (g) this.activeModule = g.key
      this.periodType = ''
      this.viewMode = 'detail'
      this.summaryHint = ''
      this.doQuery()
    },
    doQuery() {
@@ -303,6 +396,7 @@
    if (q.type) this.type = q.type
    if (q.period) this.period = q.period
    if (q.keyword) this.keyword = q.keyword
    this.loadRollupTypes()
    this.loadData()
    window.addEventListener('scroll', this.onScroll, { passive: true })
    if (this.$refs.tableWrap) {
@@ -330,6 +424,7 @@
#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 .rollup-hint { color:#409EFF; }
#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%; }