From a06efb450b0ef4ea7ae6c2e1cdf74682fc73e983 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期一, 12 四月 2021 11:30:21 +0800 Subject: [PATCH] echarts实时数据 --- src/components/BaseNav/PublicBounced/PublicBounced.vue | 99 ++++++++++++++++++++++++++++++++----------------- 1 files changed, 65 insertions(+), 34 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue index acee023..32b73d1 100644 --- a/src/components/BaseNav/PublicBounced/PublicBounced.vue +++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue @@ -1,25 +1,34 @@ <template> - <div class="public-bounced" v-draw v-if="flag"> - <div class="public-bounced-title"> - <span>{{ displayContentTitle }}</span> - <i class="el-icon-circle-close" @click="closePopup"></i> - </div> - <div class="public-bounced-content"> - <div class="public-bounced-content-left"> - <PublicTabs :displayContentTab="displayContentTab" :value="value"></PublicTabs> - <div class="public-bounced-content-left-bottom"> - <PublicTable v-if="value === 'gufei'"></PublicTable> - <PublicChart v-else></PublicChart> + <div class="public-bounced" v-drag v-if="flag"> +<!-- <Echarts></Echarts>--> + <div class="public-bounced-title"> + <span>{{ displayContentTitle }}</span> + <i class="el-icon-circle-close" @click="closePopup"></i> </div> - </div> - <div class="public-bounced-content-right"> - <PublicVideo></PublicVideo> - </div> - </div> + <div class="public-bounced-content"> + <div class="public-bounced-content-left"> + <public-tabs :displayContentTab="displayContentTab" :value="value" + :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs> + <div class="public-bounced-content-left-bottom"> + <public-table v-if="value === 'gufei'" + :displayContentTable="displayContentTable"></public-table> + <public-chart v-else :getWasteGasDetails="getWasteGasDetails" + :value="value" + :getQueryOnlineMonData="getQueryOnlineMonData" + :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails"> + </public-chart> + </div> + </div> + <div class="public-bounced-content-right"> + <public-video></public-video> + </div> + </div> </div> </template> <script> + +// import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts' import '@/components/BaseNav/SolidWaste/directive/dir' import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs' @@ -30,6 +39,7 @@ export default { name: 'PublicBounced', components: { + // Echarts PublicTabs, PublicTable, PublicChart, @@ -37,14 +47,26 @@ }, data () { return { + setWasteGasdata: '', + setWasteWaterdata: '', displayContentTitle: '', displayContentTab: '', displayContentTable: '', - flag: false + flag: false, + value: '', + getWasteGasDetails: [], + getWasteWaterMonitoringDetails: [], + getQueryOnlineMonHourData: [], + getQueryOnlineMonDateData: [] } }, methods: { + closePopup () { + this.flag = false + }, setData (dataBasic, dataDetailed, value) { + this.flag = true + this.value = value dataBasic.forEach(item => { this.displayContentTitle = item.StoragePlaceName }) @@ -53,14 +75,26 @@ this.flag = true this.value = value }, - setGasData (data, value) { + setGasData (data, dataDetails, value) { + this.setWasteGasdata = data + this.getWasteGasDetails = dataDetails + // console.log(dataDetails) this.displayContentTitle = data.Name - this.displayContentTab = data this.flag = true this.value = value }, - closePopup () { - this.flag = false + setWaterData (dataWater, dataDetail, hourData, dateData, value) { + this.setWasteWaterdata = dataWater + // console.log(data) + this.getWasteWaterMonitoringDetails = dataDetail // 鏄庣粏琛ㄦ暟鎹� + // console.log(dataDetail) + this.getQueryOnlineMonHourData = hourData // 灏忔椂鏁版嵁 + // console.log(drawData) + this.getQueryOnlineMonDateData = dateData // 鏃ユ暟鎹� + // console.log(dateData) + this.displayContentTitle = dataWater.Name + this.flag = true + this.value = value } } } @@ -68,20 +102,20 @@ <style lang="less" scoped> .public-bounced { - width: 75%; z-index: 999; position: absolute; - bottom: 5%; - left: 15%; + top: 15%; + left: 20%; background-color: #002432; border: 1px #9fc5c8 solid; .public-bounced-title { + height: 0.1rem; border: 1px #a4c0d8 solid; + padding: 10px 0; display: flex; align-items: center; justify-content: space-between; - padding: 5px 0; span { color: #f4f7ff; @@ -93,26 +127,23 @@ color: white; margin: 0 15px; font-size: 22px; + cursor: pointer; } } .public-bounced-content { - margin: 15px auto; + padding: 0.1rem; display: flex; //align-items: center; - justify-content: space-around; - padding: 10px; + //justify-content: space-around; .public-bounced-content-left { - flex: 3; - height: 100%; - margin-right: 10px; + //width: 4.8rem; } .public-bounced-content-right { - flex: 2; - //width: 48%; - height: 100%; + //width: 3rem; + margin-left: 0.1rem; } } } -- Gitblit v1.8.0