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

XingChuan

2021-05-31 4df0471b7dff0494625ff09969b1a13b5359a26e

 src/components/table/components/tabHandover.vue

@@ -1,41 +1,97 @@
<template>
  <el-tabs  v-model="activeName" type="border-card">
    <el-tab-pane label="废水" name="first">
      <waste-water></waste-water>
    </el-tab-pane>
    <el-tab-pane label="废气" name="second">
      <waste-gas></waste-gas>
    </el-tab-pane>
    <el-tab-pane label="固废" name="third">
      <solid-waste></solid-waste>
    </el-tab-pane>
    <el-tab-pane label="空气质量" name="fourth">
      <AirQuality></AirQuality>
    </el-tab-pane>
  </el-tabs>
  <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" :searchNameToPosition="searchNameToPosition"></component>
    </div>
  </div>
</template>

<script>

import WasteWater from '@components/table/components/WasteWater'
import SoilGroundwater from '@components/table/components/SoilGroundwater'
import WasteGas from '@components/table/components/WasteGas'
import SolidWaste from '@components/table/components/SolidWaste'
import AirQuality from '@components/table/components/AirQuality'
import SolidWaste from '@components/table/components/WasteSolid'
import PollutionSource from '@components/table/components/PollutionSource'
import EnvironmentalRisk from '@components/table/components/EnvironmentalRisk'
import Pipeline from '@components/table/components/Pipeline'
import CorporateEmergency from '@components/table/components/CorporateEmergency'
import { topicList } from '../../../conf/Topic'
export default {
  name: 'tabHandover',
  components: {
    WasteWater,
    WasteGas,
    // WasteGas,
    // SoilGroundwater,
    SolidWaste,
    AirQuality
    PollutionSource,
    EnvironmentalRisk,
    Pipeline,
    CorporateEmergency
  },
  data () {
    return {
      activeName: 'first'
      titleProp: '',
      activeName: '污染源',
      topicList: topicList, // tab项
      gcComp: PollutionSource
    }
  },
  methods: {
    refsDatatitle (item) {
      this.titleProp = item
    },
    handleClick (tab, event) {
      switch (tab.label) {
        case '污染源':
          this.gcComp = PollutionSource
          break
        case '废水':
          this.gcComp = WasteWater
          break
        case '废气':
          this.gcComp = WasteGas
          break
        case '固废':
          this.gcComp = SolidWaste
          break
        case '环境风险':
          this.gcComp = EnvironmentalRisk
          break
        case '土壤及地下水':
          this.gcComp = SoilGroundwater
          break
        case '管线':
          this.gcComp = Pipeline
          break
        case '企业应急':
          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>