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

XingChuan

2021-05-31 4df0471b7dff0494625ff09969b1a13b5359a26e

 src/components/table/components/WasteGas.vue

@@ -1,23 +1,21 @@
<template>
    <div class="Waste-water">
        <el-table class="tableBox" :data="WasteGastableDataList" :header-cell-style="tableHeaderColor" :cell-style="rowClass" @cell-click="handle">
        <el-table class="tableBox" :data="tableData" :header-cell-style="tableHeaderColor" :cell-style="rowClass" @cell-click="handle">
            <el-table-column width="30px" label="">
              <template slot-scope="{row,$index}">
                <!--                   <i class="el-icon-caret-right" v-if="$index ===1"></i>-->
                <el-popover placement="bottom" trigger="click" :disabled="!isShowIcon" popper-class="popovers">
                  <ChemicalWastewater v-show="$index ===1"></ChemicalWastewater>
                  <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference" @click="doIcon($index)"></i>
                  <i class="el-icon-caret-right showBottomTableBtn" @click="showBottomTable" slot="reference"></i>
                  <!--                   <i class="el-icon-caret-bottom"   slot="reference" v-else @click="doIcon($index)"></i>-->
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="序号" width="45px" type="index"></el-table-column>
            <el-table-column prop="UserName" label="企业名称">
                  <template slot-scope="scope">
                        <div v-if="scope.row.UserName==='集团名称'" style="color: #00ffff">{{scope.row.UserName}}</div>
                        <div v-else-if="scope.row.UserName==='天津石化'" style="color: #00ffff">{{scope.row.UserName}}</div>
                        <div v-else >{{scope.row.UserName}}</div>
                  </template>
              <template slot-scope="{row}">
                <u @click="searchNameToPosition" style="cursor: pointer">{{row.UserName}}</u>
              </template>
            </el-table-column>
            <el-table-column prop="WasteWaters" label="工业外排废水量（m³）" width="100px"></el-table-column>
            <el-table-column label="二氧化硫 (产生量/t)">
@@ -63,6 +61,7 @@
import ChemicalWastewater from '@components/table/components/componented/ChemicalWastewater'
import Refinery from '@components/table/components/componented/refinery'
import MissingAlarm from '@components/table/components/componented/MissingAlarm'
import mapApi from '@/api/mapApi'
export default {
  name: 'WasteGas',
  components: {
@@ -70,10 +69,16 @@
    Refinery,
    ChemicalWastewater
  },
  props: {
    searchNameToPosition: {
      type: Function
    }
  },
  data () {
    return {
      isActive: '',
      isShowIcon: false,
      tableData: null,
      tableHeader1: [
        { name: '排放点', width: '140', propS: 'value1' },
        { name: '单位部门', width: '80', propS: 'value2' },
@@ -88,14 +93,16 @@
      ]
    }
  },
  props: ['WasteGastableDataList'],
  async mounted () {
    this.tableData = await mapApi.getWasteGasStatistics()
  },
  methods: {
    tableHeaderColor ({ columnIndex }) {
      //   return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
    rowClass  () {
      // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
      return 'height:.3rem'
    },
    // 获取点击的表格
    handle (row, column, event, cell) {
@@ -113,14 +120,43 @@
        return
      }
      this.isActive = index
    },
    showBottomTable (e) {
      if (e.path[0].classList.contains('go') === true) {
        e.path[0].classList.remove('go')
        e.path[0].classList.add('aa')
      } else {
        const newList = document.querySelectorAll('i.showBottomTableBtn')
        for (let i = 0; i < newList.length; i++) {
          newList[i].classList.remove('go')
        }
        e.path[0].classList.remove('aa')
        e.path[0].classList.add('go')
      }
    }
  }
}
</script>

<style scoped>
<style scoped lang="less">
.active {
  /*color: red;*/
  transform:rotate(90deg);
}
.Waste-water{
.el-icon-caret-right{
  position: absolute;
  top: .11rem;
  left: .04rem;
  font-size: .14rem;
  cursor: pointer;
}
}
.aa{
  transition: all .2s;
}
.go{
  transform:rotate(90deg);
  transition: all .2s;
}
</style>