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

XingChuan

2021-05-31 4df0471b7dff0494625ff09969b1a13b5359a26e

 src/components/table/components/WasteSolid.vue

@@ -1,5 +1,5 @@
<template>
  <div class="waste-water">
  <div class="waste-solid">
    <el-table
        class="tableBox"
        :data="tableData"
@@ -20,8 +20,7 @@
              :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>
@@ -29,32 +28,29 @@
      <el-table-column label="序号" width="45px" type="index">
      </el-table-column>
      <el-table-column prop="UserName" label="企业名称" width="120px">
        <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 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="COD  (t)">
        <el-table-column prop="AddOutPut" label="累计产生量" width="70px"></el-table-column>
        <el-table-column prop="MonthOutPut" label="当月生产量" width="70px"></el-table-column>
      <el-table-column prop="WasteWaters" width="100px">
        <div slot="header">
          <span>外排废水量</span>
          <div>（m³）</div>
        </div>
      </el-table-column>
      <el-table-column label="氨氮  (t)">
        <el-table-column prop="NH4NPut" label="累计产生量"></el-table-column>
        <el-table-column prop="NH4NMonth" label="当月生产量"></el-table-column>
      <el-table-column label="COD  (产生量/t)">
        <el-table-column prop="AddOutPut" label="累计" width="70px"></el-table-column>
        <el-table-column prop="MonthOutPut" label="当月" width="70px"></el-table-column>
      </el-table-column>
      <el-table-column label="氨氮  (产生量/t)">
        <el-table-column prop="NH4NPut" label="累计"></el-table-column>
        <el-table-column prop="NH4NMonth" label="当月"></el-table-column>
      </el-table-column>
      <el-table-column label="排放口检测统计状态">
        <el-table-column prop="normal" label="正常" width="60px">
          <template slot-scope="{row,$index}">
            <u v-if="$index!=2">{{ row.normal }}</u>
            <el-popover v-else
                        placement="bottom-end"
                        width="200"
                        trigger="click"
                        popper-class="popovers"
                        title="监测点明细表"
            >
            <el-popover v-else placement="bottom-end" trigger="click" popper-class="popovers" title="监测点明细表">
              <refinery></refinery>
              <u slot="reference" style="color: #00ffff">{{ row.normal }}</u>
              <!--                       <i class="el-icon-caret-bottom" v-else-if="isShowIcon&&scope.row.index===1"></i>-->
@@ -69,13 +65,7 @@
        <el-table-column prop="deficiency" label="缺失" width="60px">
          <template slot-scope="{row,$index}">
            <u v-if="$index!=1">{{ row.deficiency }}</u>
            <el-popover v-else
                        placement="bottom-end"
                        width="200"
                        trigger="click"
                        title="天津石化监测点缺失报警明细"
                        popper-class="popovers"
            >
            <el-popover v-else placement="bottom-end" trigger="click" title="天津石化监测点缺失报警明细" popper-class="popovers">
              <MissingAlarm></MissingAlarm>
              <u slot="reference" style="color: #00ffff">{{ row.deficiency }}</u>
            </el-popover>
@@ -100,6 +90,11 @@
    MissingAlarm,
    Refinery,
    ChemicalWastewater
  },
  props: {
    searchNameToPosition: {
      type: Function
    }
  },
  data () {
    return {
@@ -167,7 +162,7 @@
    },
    // 表头样式设置
    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) {
@@ -185,6 +180,19 @@
        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')
      }
    }
  }
}
@@ -204,5 +212,20 @@
  /*color: red;*/
  transform: rotate(90deg);
}

.waste-solid{
  .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>