From 4df0471b7dff0494625ff09969b1a13b5359a26e Mon Sep 17 00:00:00 2001 From: XingChuan <m17600301067@163.com> Date: 星期一, 31 五月 2021 22:41:47 +0800 Subject: [PATCH] 统计表弹框UI优化;增加点击企业名称缩放至企业;二级表展示功能优化。 --- src/components/table/components/tabHandover.vue | 98 ++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 77 insertions(+), 21 deletions(-) diff --git a/src/components/table/components/tabHandover.vue b/src/components/table/components/tabHandover.vue index ed43d60..bc7816c 100644 --- a/src/components/table/components/tabHandover.vue +++ b/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> -- Gitblit v1.8.0