统计表弹框UI优化；增加点击企业名称缩放至企业；二级表展示功能优化。

XingChuan

2021-05-31 4df0471b7dff0494625ff09969b1a13b5359a26e

 src/components/table/components/IndexStatistics.vue

@@ -1,262 +1,91 @@
<template>
  <div>
    <el-tabs v-model="activeName">
        <el-tab-pane label="指标统计" name="first"><el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="序号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="单位名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="工业取水量(m3)"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="外排废水量(m3)"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="工业废气排放量(m3)"
                    width="150">
            </el-table-column>
            <el-table-column label="COD(t)">
                    <el-table-column
                            prop="province"
                            label="累计产生量"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="当月产生量"
                            width="120">
                    </el-table-column>
            </el-table-column>
            <el-table-column label="氨氮(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量"
                        width="120">
                </el-table-column>
            </el-table-column>
            <el-table-column label="二氧化硫(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量"
                        width="120">
                </el-table-column>
            </el-table-column>
            <el-table-column label="氮氧化物(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量"
                        width="120">
                </el-table-column>
            </el-table-column>
            <el-table-column label="VOCs(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量"
                        width="120">
                </el-table-column>
            </el-table-column>
            <el-table-column label="固废(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量"
                        width="120">
                </el-table-column>
            </el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="企业排名" name="second"><el-table
                :data="tableData"
                style="width: 100%"
                max-height="250">
            <el-table-column
                    fixed
                    prop="date"
                    label="企业名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="废水达标率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="名次"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="废气达标率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="名次"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="传输率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="设备完好率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="排名"
                    width="120">
            </el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="排放点排名" name="third"><el-table
                :data="tableData"
                style="width: 100%"
                max-height="250">
            <el-table-column
                    fixed
                    prop="date"
                    label="排放点名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="排放类型"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="达标率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="名次"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="传输率"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="设备完好率"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次"
                    width="120">
            </el-table-column>
        </el-table></el-tab-pane>
      <el-tab-pane label="指标统计" name="first" :cell-style="rowClass">
        <el-table :data="tableData" :lock-scroll="true" class="scroll">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="date" label="单位名称"></el-table-column>
          <el-table-column prop="province" label="工业取水量(m3)"></el-table-column>
          <el-table-column prop="province" label="外排废水量(m3)"></el-table-column>
          <el-table-column prop="province" label="工业废气排放量(m3)"></el-table-column>
          <el-table-column label="COD(t)">
            <el-table-column prop="province" label="累计产生量"></el-table-column>
            <el-table-column prop="city" label="当月产生量"></el-table-column>
          </el-table-column>
          <el-table-column label="氨氮(t)">
            <el-table-column prop="province" label="累计产生量"></el-table-column>
            <el-table-column prop="city" label="当月产生量"></el-table-column>
          </el-table-column>
          <el-table-column label="二氧化硫(t)">
            <el-table-column prop="province" label="累计产生量"></el-table-column>
            <el-table-column prop="city" label="当月产生量"></el-table-column>
          </el-table-column>
          <el-table-column label="氮氧化物(t)">
            <el-table-column prop="province" label="累计产生量"></el-table-column>
            <el-table-column prop="city" label="当月产生量"></el-table-column>
          </el-table-column>
          <el-table-column label="VOCs(t)">
            <el-table-column prop="province" label="累计产生量"></el-table-column>
            <el-table-column prop="city" label="当月产生量"></el-table-column>
          </el-table-column>
          <el-table-column label="固废(t)">
            <el-table-column prop="province" label="累计产生量"></el-table-column>
            <el-table-column prop="city" label="当月产生量"></el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="企业排名" name="second">
        <el-table :data="tableData">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="date" label="企业名称"></el-table-column>
          <el-table-column prop="name" label="废水达标率"></el-table-column>
          <el-table-column prop="province" label="名次"></el-table-column>
          <el-table-column prop="city" label="废气达标率"></el-table-column>
          <el-table-column prop="address" label="名次"></el-table-column>
          <el-table-column prop="zip" label="传输率"></el-table-column>
          <el-table-column prop="zip" label="名次"></el-table-column>
          <el-table-column prop="zip" label="设备完好率"></el-table-column>
          <el-table-column prop="zip" label="排名"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="排放点排名" name="third">
        <el-table :data="tableData">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="date" label="排放点名称"></el-table-column>
          <el-table-column prop="name" label="排放类型"></el-table-column>
          <el-table-column prop="province" label="达标率"></el-table-column>
          <el-table-column prop="city" label="名次"></el-table-column>
          <el-table-column prop="address" label="传输率"></el-table-column>
          <el-table-column prop="zip" label="名次"></el-table-column>
          <el-table-column prop="zip" label="设备完好率"></el-table-column>
          <el-table-column prop="zip" label="名次"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import mapApi from '@/api/mapApi'
export default {
  name: 'IndexStatistics',
  data () {
    return {
      titleProp: '',
      activeName: 'first',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
      tableData: null
    }
  },
  async mounted () {
    this.tableData = await mapApi.getIndexStatistics()
  },
  methods: {
    refsDatatitle (item) {
      this.titleProp = item
    },
    // 表头样式设置
    rowClass  () {
      return 'height:.3rem'
    }
  }
}