派生自 wuyushui/SewerAndRainNetwork

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<template>
  <div class="waste-risk">
    <el-table class="tableBox" :data="tableData" :header-cell-style="tableHeaderColor" :cell-style="rowClass" border>
      <el-table-column width="30px" label="">
        <template slot-scope="{row,$index}">
          <el-popover placement="bottom" trigger="click" :disabled="!isShowIcon" popper-class="popovers">
            <i class="el-icon-caret-right showBottomTableBtn" @click="showBottomTable" :class="{active: isActive === $index}" slot="reference"></i>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="序号" width="60px" type="index"></el-table-column>
      <el-table-column prop="UserName" label="企业名称">
        <template slot-scope="{row}">
          <u @click="searchNameToPosition" style="cursor: pointer">{{row.UserName}}</u>
        </template>
      </el-table-column>
      <el-table-column prop="ProductionFacilities" label="一级风险源(个)"></el-table-column>
      <el-table-column prop="GovernanceFacilities" label="二级风险源(个)"></el-table-column>
      <el-table-column prop="GovernanceFacilities" label="三级风险源(个)"></el-table-column>
      <el-table-column prop="GovernanceFacilities" label="应急物资存放点"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import mapApi from '@/api/mapApi'
export default {
  name: 'EnvironmentalRisk',
  props: {
    searchNameToPosition: {
      type: Function
    }
  },
  data () {
    return {
      tableData: null,
      isActive: '',
      isShowIcon: false
    }
  },
  async mounted () {
    this.tableData = await mapApi.getEnvironmentalRiskStatistics()
  },
  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'
    },
    // 表头样式设置
    rowClass  () {
      return 'height:.3rem'
    },
    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 lang="less">
.waste-risk{
.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>