派生自 wuyushui/SewerAndRainNetwork

徐旺旺
2021-05-30 1f0e9a20cd76e21538b4ca77a3ed7ce2a979de90
src/components/table/components/WasteWater.vue
@@ -1,89 +1,43 @@
<template>
   <div class="waste-water">
           <el-table
                   class="tableBox"
                   :data="tableData"
                   style="width: 100%"
                   :header-cell-style="tableHeaderColor"
                   :cell-style="rowClass"
                   @cell-click="handle"
           >
               <el-table-column
                       width="30px"
                        label=""
               >
           <el-table class="tableBox" :data="tableData" style="width: 100%" @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"
                        >
                 <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-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="企业名称"
                       width="120px">
               <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>
               </el-table-column>
               <el-table-column
                       prop="WasteWaters"
                       label="外排废水量(m³)"
                       width="100px">
               <el-table-column prop="WasteWaters" width="80">
                   <div slot="header">
                      <span>外排废水量</span>
                       <div>(m³)</div>
                   </div>
               </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 label="COD  (产生量/t)">
                   <el-table-column prop="AddOutPut" label="累计" width="70"></el-table-column>
                   <el-table-column prop="MonthOutPut" label="当月" width="70"></el-table-column>
               </el-table-column>
               <el-table-column label="氨氮  (t)">
                   <el-table-column
                           prop="NH4NPut"
                           label="累计产生量"
                           width="70px">
                   </el-table-column>
                   <el-table-column
                           prop="NH4NMonth"
                           label="当月生产量"
                           width="70px">
                   </el-table-column>
               <el-table-column label="氨氮  (产生量/t)">
                   <el-table-column prop="NH4NPut" label="累计" width="70"></el-table-column>
                   <el-table-column prop="NH4NMonth" label="当月" width="70"></el-table-column>
               </el-table-column>
               <el-table-column label="排放口检测统计状态">
                   <el-table-column
                           prop="normal"
                           label="正常"
                           width="60px">
               <el-table-column label="排放口检测统计状态 (个)">
                   <el-table-column prop="normal" label="正常" width="60">
                     <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="XXX1明细表"
                       >
                       <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>-->
@@ -92,34 +46,13 @@
                       </el-popover>
                     </template>
                   </el-table-column>
                   <el-table-column
                           prop="overProof"
                           label="超标"
                           width="60px">
                   </el-table-column>
                   <el-table-column
                           prop="Abnormal"
                           label="异常"
                           width="60px">
                   </el-table-column>
                   <el-table-column
                           prop="StopProduction"
                           label="停产"
                           width="60px">
                   </el-table-column>
                   <el-table-column
                           prop="deficiency"
                           label="缺失"
                           width="60px">
                   <el-table-column prop="overProof" label="超标" width="60"></el-table-column>
                   <el-table-column prop="Abnormal" label="异常" width="60"></el-table-column>
                   <el-table-column prop="StopProduction" label="停产" width="60"></el-table-column>
                   <el-table-column prop="deficiency" label="缺失" width="60">
                     <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>
@@ -201,11 +134,11 @@
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
      return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    //  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 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    },
    // 获取点击的表格
    handle (row, column, event, cell) {
@@ -228,17 +161,6 @@
}
</script>
<style scoped>
.popovers{
  width: auto !important;
  background-color: gray !important;
}
.popovers.el-popover{
padding:0;
}
.active {
  /*color: red;*/
  transform:rotate(90deg);
}
<style>
</style>