From 95fdec54d006ddd9bedd632486b708ba03a78cb3 Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期二, 06 四月 2021 18:08:58 +0800 Subject: [PATCH] 明细表动态渲染 --- src/components/BaseNav/PublicBounced/PublicBounced.vue | 58 +++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue index 1e15ccf..501d120 100644 --- a/src/components/BaseNav/PublicBounced/PublicBounced.vue +++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue @@ -1,19 +1,20 @@ <template> <div class="public-bounced" v-draw v-if="flag"> <div class="public-bounced-title"> - <span>{{ displayContent.Name }}</span> + <span>{{ displayContentTitle }}</span> <i class="el-icon-circle-close" @click="closePopup"></i> </div> <div class="public-bounced-content"> <div class="public-bounced-content-left"> - <GasTab :displayContent="displayContent"></GasTab> + <PublicTabs :displayContentTab="displayContentTab" :value="value" + :setWasteGasdata="setWasteGasdata"></PublicTabs> <div class="public-bounced-content-left-bottom"> - <PublicTable v-if="value === 'gufei'" :requestSolidWasteData="displayContent.StoragePlaceId"></PublicTable> - <GasECharts v-else></GasECharts> + <PublicTable v-if="value === 'gufei'" :displayContentTable="displayContentTable"></PublicTable> + <PublicChart :getWasteGasDetails="getWasteGasDetails" v-else></PublicChart> </div> </div> <div class="public-bounced-content-right"> - <GasVideo></GasVideo> + <PublicVideo></PublicVideo> </div> </div> </div> @@ -22,39 +23,48 @@ <script> import '@/components/BaseNav/SolidWaste/directive/dir' -import GasTab from '@components/BaseNav/PublicBounced/GasComponents/GasTab' +import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs' import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable' -import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts' -import GasVideo from '@components/BaseNav/PublicBounced/GasComponents/GasVideo' +import PublicVideo from '@components/BaseNav/PublicBounced/GasComponents/PublicVideo' +import PublicChart from './GasComponents/PublicChart' export default { name: 'PublicBounced', components: { - GasTab, + PublicTabs, PublicTable, - GasECharts, - GasVideo + PublicChart, + PublicVideo }, data () { return { - displayContent: [], - flag: false + setWasteGasdata: '', + displayContentTitle: '', + displayContentTab: '', + displayContentTable: '', + flag: false, + value: '', + getWasteGasDetails: [] } }, methods: { - setData (data, value) { - console.log(data) - console.log(value) - this.displayContent = data + setData (dataBasic, dataDetailed, value) { + dataBasic.forEach(item => { + this.displayContentTitle = item.StoragePlaceName + }) + this.displayContentTab = dataBasic + this.displayContentTable = dataDetailed this.flag = true this.value = value - console.log(this.flag) }, - // setData (data) { - // this.displayContent = data - // this.flag = true - // // this.value = value - // }, + setGasData (data, dataDetails, value) { + this.setWasteGasdata = data + this.getWasteGasDetails = dataDetails + // console.log(dataDetails) + this.displayContentTitle = data.Name + this.flag = true + this.value = value + }, closePopup () { this.flag = false } @@ -95,6 +105,7 @@ .public-bounced-content { margin: 15px auto; display: flex; + //align-items: center; justify-content: space-around; padding: 10px; @@ -106,6 +117,7 @@ .public-bounced-content-right { flex: 2; + //width: 48%; height: 100%; } } -- Gitblit v1.8.0