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

XingChuan

2021-05-31 4df0471b7dff0494625ff09969b1a13b5359a26e

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

 public/assets/corporateEmergency.json

@@ -1,6 +1,6 @@
[
  {
    "UserName": "集团名称",
    "UserName": "集团公司",
    "WasteWaters": "",
    "AddOutPut": "",
    "MonthOutPut": "",

 src/components/LayerController/logic/Company.js

@@ -8,6 +8,7 @@

const mapApi = require('../../../api/mapApi').default
const AnimalService = require('../service/AnimalService').default
const $store = require('../../../store/index').default

module.exports = function () {
  /**
@@ -22,6 +23,7 @@
    const res = await mapApi.getCompany()
    // console.log(res)
    const data = res.Result.DataInfo || {}
    $store.state.companyPoints = data
    for (let i = 0; i < data.length; i++) {
      // console.log(data[i])
      // 经纬度 位置

 src/components/table/components/CorporateEmergency.vue

@@ -1,14 +1,19 @@
<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>
@@ -23,17 +28,61 @@
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>

 src/components/table/components/EnvironmentalRisk.vue

@@ -1,14 +1,19 @@
<template>
  <div class="PollutionSource">
  <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>
          <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="ProductionFacilities" label="一级风险源（个）"></el-table-column>
      <el-table-column prop="GovernanceFacilities" label="二级风险源（个）"></el-table-column>
      <el-table-column prop="GovernanceFacilities" label="三级风险源（个）"></el-table-column>
@@ -20,10 +25,17 @@
<script>
import mapApi from '@/api/mapApi'
export default {
  name: 'AirQuality',
  name: 'EnvironmentalRisk',
  props: {
    searchNameToPosition: {
      type: Function
    }
  },
  data () {
    return {
      tableData: null
      tableData: null,
      isActive: '',
      isShowIcon: false
    }
  },
  async mounted () {
@@ -35,12 +47,40 @@
    },
    // 表头样式设置
    rowClass  () {
      // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
      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">
.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>

 src/components/table/components/IndexStatistics.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="指标统计" name="first">
      <el-tab-pane label="指标统计" name="first" :cell-style="rowClass">
        <el-table :data="tableData" :lock-scroll="true" class="scroll">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="date" label="单位名称"></el-table-column>
@@ -82,6 +82,10 @@
  methods: {
    refsDatatitle (item) {
      this.titleProp = item
    },
    // 表头样式设置
    rowClass  () {
      return 'height:.3rem'
    }
  }
}

 src/components/table/components/Pipeline.vue

@@ -1,14 +1,19 @@
<template>
  <div class="Pipeline">
    <el-table class="tableBox" :data="tableData" border>
    <el-table class="tableBox" :data="tableData" border :cell-style="rowClass">
      <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="date" label="企业名称"></el-table-column>
      <el-table-column prop="date" label="企业名称">
        <template slot-scope="{row}">
          <u @click="searchNameToPosition" style="cursor: pointer">{{row.date}}</u>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="管线总长度（km）"></el-table-column>
      <el-table-column prop="province" label="周边环境 "></el-table-column>
      <el-table-column prop="city" label="拦截设施"></el-table-column>
@@ -21,17 +26,58 @@
import mapApi from '@/api/mapApi'
export default {
  name: 'Pipeline',
  props: {
    searchNameToPosition: {
      type: Function
    }
  },
  data () {
    return {
      tableData: null
      tableData: null,
      isActive: '',
      isShowIcon: false
    }
  },
  async mounted () {
    this.tableData = await mapApi.getPipelineStatistics()
  },
  methods: {
    // 表头样式设置
    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>

 src/components/table/components/PollutionSource.vue

@@ -1,26 +1,51 @@
<template>
    <div class="PollutionSource">
        <el-table class="tableBox" :data="tableData" :header-cell-style="tableHeaderColor" :cell-style="rowClass" border>
        <el-table class="tableBox" v-loading :data="tableData" :header-cell-style="tableHeaderColor" :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">
                    <SecondaryTablePollutionSource v-show="$index ===1"></SecondaryTablePollutionSource>
                    <i class="el-icon-caret-right showBottomTableBtn" @click="showBottomTable" 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="ProductionFacilities" label="生产设施"></el-table-column>
            <el-table-column prop="GovernanceFacilities" 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="ProductionFacilities" label="生产装置（个）">
              <template slot-scope="{row}">
                <el-popover placement="bottom-end" trigger="click" title="天津石化监测点缺失报警明细" popper-class="popovers">
                  <u slot="reference" style="color: #00ffff">{{row.ProductionFacilities}}</u>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="GovernanceFacilities" label="治理设施（个）"></el-table-column>
        </el-table>
    </div>
</template>

<script>
import mapApi from '@/api/mapApi'

import SecondaryTablePollutionSource from './componented/SecondaryTablePollutionSource'

export default {
  name: 'AirQuality',
  name: 'PollutionSource',
  components: {
    SecondaryTablePollutionSource
  },
  props: {
    searchNameToPosition: {
      type: Function
    }
  },
  data () {
    return {
      isActive: '',
      isShowIcon: false,
      tableData: null
    }
  },
@@ -32,13 +57,41 @@
      // 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'
    rowClass (row, column) {
      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">
.PollutionSource{
  .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>

 src/components/table/components/SoilGroundwater.vue

@@ -126,7 +126,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) {

 src/components/table/components/WasteGas.vue

@@ -6,17 +6,15 @@
                <!--                   <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 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>
@@ -71,6 +69,11 @@
    Refinery,
    ChemicalWastewater
  },
  props: {
    searchNameToPosition: {
      type: Function
    }
  },
  data () {
    return {
      isActive: '',
@@ -99,7 +102,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) {
@@ -117,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>

 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,10 +28,8 @@
      <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" width="100px">
@@ -93,6 +90,11 @@
    MissingAlarm,
    Refinery,
    ChemicalWastewater
  },
  props: {
    searchNameToPosition: {
      type: Function
    }
  },
  data () {
    return {
@@ -160,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) {
@@ -178,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')
      }
    }
  }
}
@@ -197,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>

 src/components/table/components/WasteWater.vue

@@ -1,22 +1,20 @@
<template>
   <div class="waste-water">
           <el-table class="tableBox" :data="tableData" style="width: 100%" @cell-click="handle">
           <el-table class="tableBox" :data="tableData" style="width: 100%" :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>
                   <ChemicalWastewater v-show="$index ===2"></ChemicalWastewater>
                   <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 slot-scope="{row}">
                   <u @click="searchNameToPosition" style="cursor: pointer">{{row.UserName}}</u>
                 </template>
               </el-table-column>
               <el-table-column prop="WasteWaters" width="80">
@@ -85,6 +83,11 @@
      tableData: null
    }
  },
  props: {
    searchNameToPosition: {
      type: Function
    }
  },
  async mounted () {
    this.tableData = await mapApi.getWasteWaterStatistics()
  },
@@ -94,29 +97,48 @@
    },
    // 表头样式设置
    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) {
      console.log(row.UserName)
    },
    doIcon (index) {
      if (index !== 1) {
        this.isShowIcon = false
        this.isActive = ''
        return
    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')
      }
      this.isShowIcon = !this.isShowIcon
      if (index === this.isActive) {
        this.isActive = ''
        return
        e.path[0].classList.remove('aa')
        e.path[0].classList.add('go')
      }
      this.isActive = index
    }
  }
}
</script>

<style>

<style scoped lang="less">
/deep/ .el-tabs__item:focus.is-active.is-focus:not(:active) {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.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>

 src/components/table/components/componented/SecondaryTablePollutionSource.vue

New file
@@ -0,0 +1,61 @@
<template>
  <div class="Chemical-Waste-water" id="Chemical-Waste-water">
    <!-- <el-row type="flex" class="head-area" align="middle">
        <el-col>
            <span>监测点排放明细</span>
        </el-col>
    </el-row> -->
    <div class="panel-title">监测点排放明细</div>
    <el-table class="tableBox" :data="tableData">
      <el-table-column label="序号" width="60px" type="index"></el-table-column>
      <el-table-column prop="UserName" label="企业名称" width="120"></el-table-column>
      <el-table-column prop="WasteWaters" width="100">
        <div slot="header">
          <span>工业外排废水量</span>
          <div>（m³）</div>
        </div>
      </el-table-column>
      <el-table-column label="产生量 （吨）">
        <el-table-column prop="AddOutPut" label="一般固废" width="65"></el-table-column>
        <el-table-column prop="MonthOutPut" label="危险废物" width="65"></el-table-column>
      </el-table-column>
      <el-table-column label="贮存状态（个）">
        <el-table-column prop="normal" label="正常" width="60"></el-table-column>
        <el-table-column prop="warning" label="预警" width="60"></el-table-column>
      </el-table-column>
      <el-table-column label="贮存状态（个）">
        <el-table-column prop="normal" label="正常" width="60"></el-table-column>
        <el-table-column prop="warning" label="预警" width="60"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'ChemicalWastewater',
  data: function () {
    return {
      tableData: [{
        UserName: '#火炬排放口',
        WasteWaters: '1',
        AddOutPut: '',
        MonthOutPut: '',
        normal: '',
        warning: ''
      }]
    }
  },
  methods: {
    // closeBtns () {
    //   this.$emit('isShow')
    // }
  }
}
</script>
<style lang="less">
.Chemical-Waste-water {
  text-align: center;background:@background-color;
  color: #fff;
}
</style>

 src/components/table/components/tabHandover.vue

@@ -1,10 +1,10 @@
<template>
  <div>
  <div class="tabHandover">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in topicList" :key="index" :label="item.name" :name="item.name"></el-tab-pane>
    </el-tabs>
    <div>
      <component :is="gcComp"></component>
      <component :is="gcComp" :searchNameToPosition="searchNameToPosition"></component>
    </div>
  </div>
</template>
@@ -71,11 +71,27 @@
          this.gcComp = CorporateEmergency
          break
      }
    },
    searchNameToPosition (e) {
      if (e.target.innerHTML === '集团公司') {
        return window.map.setView({ lat: 34.828558921813965, lng: 117.41676807403564 }, 5)
      }
      if (this.$store.state.companyPoints.filter(obj => obj.name === e.target.innerHTML).length > 0) {
        const newList = this.$store.state.companyPoints.filter(obj => obj.name === e.target.innerHTML)[0]
        window.map.setView({ lat: newList.Latitude, lng: newList.Longitude }, 15)
      } else {
        this.$message({
          message: '没有查询到该企业！',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style scoped>

<style>
.tabHandover .el-tabs__item{
  font-size: .1rem;
}
</style>

 src/components/table/summarySheets.vue

@@ -131,7 +131,13 @@
        /*width: 850px;*/
        /*height: 265px;*/
        z-index: 500;

        .el-dialog__header {
          padding: 10px 20px 10px !important;
          .el-dialog__headerbtn{
            top: 16px;
            right: 16px;
          }
        }
        .subtopic {
            display: inline-flex;

@@ -173,7 +179,7 @@
        }

        .el-dialog.el-dialog--center {
            left: 0.5rem;
            left: 0.45rem;
            top: 0.73979rem;
        }


 src/store/index.js

@@ -7,6 +7,7 @@

export default new Vuex.Store({
  state: {
    companyPoints: [] // 企业点
  },
  mutations: {
  },