| | |
| | | <template> |
| | | <div class="Pipeline"> |
| | | <el-table class="tableBox" :data="tableData" border> |
| | | <el-table class="tableBox" :data="tableData" :cell-style="rowClass" border> |
| | | <el-table-column width="30px" label=""> |
| | | <template> |
| | | <i class="el-icon-caret-right"></i> |
| | | <span style="margin-left: 10px"></span> |
| | | <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="企业名称"></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="WasteWaters" label="应急预案数量(个)"></el-table-column> |
| | | <el-table-column prop="AddOutPut" label="应急预案备案号"></el-table-column> |
| | | <el-table-column prop="MonthOutPut" label="应急物资存放点"></el-table-column> |
| | |
| | | import mapApi from '@/api/mapApi' |
| | | export default { |
| | | name: 'CorporateEmergency', |
| | | props: { |
| | | searchNameToPosition: { |
| | | type: Function |
| | | } |
| | | }, |
| | | data () { |
| | | return { |
| | | tableData: null |
| | | tableData: null, |
| | | isActive: '', |
| | | isShowIcon: false |
| | | } |
| | | }, |
| | | async mounted () { |
| | | this.tableData = await mapApi.getCorporateEmergencyStatistics() |
| | | }, |
| | | 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> |
| | | |
| | | <style scoped lang="less"> |
| | | .Pipeline{ |
| | | .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> |