| | |
| | | <template> |
| | | <div class="public-bounced" v-draw v-if="flag"> |
| | | <div class="public-bounced-title"> |
| | | <div class="public-bounced map-background" v-drag v-show="flag"> |
| | | <div class="public-bounced-title panel-title" ref="publicBounced"> |
| | | <span>{{ displayContentTitle }}</span> |
| | | <i class="el-icon-circle-close" @click="closePopup"></i> |
| | | </div> |
| | |
| | | <div class="public-bounced-content-left-bottom"> |
| | | <public-table v-if="value === 'gufei'" |
| | | :displayContentTable="displayContentTable"></public-table> |
| | | <public-chart v-else :getWasteGasDetails="getWasteGasDetails" :getWasteWaterMonitoring="getWasteWaterMonitoring" ></public-chart> |
| | | <public-chart v-else :getWasteGasDetails="getWasteGasDetails" |
| | | :value="value" |
| | | :getQueryOnlineMonData="getQueryOnlineMonData" |
| | | :getWasteWaterMonitoringDetails='getWasteWaterMonitoringDetails' |
| | | :ManualData="ManualData" |
| | | ref="PublicChart" |
| | | > |
| | | </public-chart> |
| | | </div> |
| | | </div> |
| | | <div class="public-bounced-content-right"> |
| | |
| | | |
| | | <script> |
| | | |
| | | import '@/components/BaseNav/SolidWaste/directive/dir' |
| | | import '@/utils/dragBoxes' |
| | | import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs' |
| | | import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable' |
| | | import PublicVideo from '@components/BaseNav/PublicBounced/GasComponents/PublicVideo' |
| | |
| | | value: '', |
| | | getWasteGasDetails: [], |
| | | getWasteWaterMonitoringDetails: [], |
| | | getWasteWaterMonitoring: [] |
| | | getQueryOnlineMonData: [], |
| | | ManualData: [] |
| | | // getGasQueryOnlineMonData: [] |
| | | } |
| | | }, |
| | | mounted () { |
| | | // this.$nextTick(() => { |
| | | // console.log(this.$refs.publicBounced) |
| | | // console.log(this.$refs.PublicChart) |
| | | // }) |
| | | }, |
| | | methods: { |
| | | closePopup () { |
| | | this.flag = false |
| | | }, |
| | | setData (dataBasic, dataDetailed, value) { |
| | | this.flag = true |
| | | this.value = value |
| | |
| | | this.flag = true |
| | | this.value = value |
| | | }, |
| | | setGasData (data, dataDetails, value) { |
| | | setGasData (data, dataDetails, GasHourData, ManualData, value) { |
| | | this.setWasteGasdata = data |
| | | this.getWasteGasDetails = dataDetails |
| | | // console.log(dataDetails) |
| | | this.getQueryOnlineMonData = GasHourData |
| | | this.ManualData = ManualData |
| | | console.log(this.getQueryOnlineMonData) |
| | | this.displayContentTitle = data.Name |
| | | this.flag = true |
| | | this.value = value |
| | | }, |
| | | setWaterData (data, dataDetail, drawData, value) { |
| | | this.setWasteWaterdata = data |
| | | setWaterData (dataWater, dataDetail, hourData, dateData, value) { |
| | | this.setWasteWaterdata = dataWater |
| | | // console.log(data) |
| | | this.getWasteWaterMonitoring = drawData |
| | | console.log(drawData) |
| | | this.getQueryOnlineMonData = hourData |
| | | // console.log(drawData) |
| | | this.getWasteWaterMonitoringDetails = dataDetail |
| | | this.displayContentTitle = data.Name |
| | | this.displayContentTitle = dataWater.Name |
| | | this.flag = true |
| | | this.value = value |
| | | }, |
| | | closePopup () { |
| | | this.flag = false |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <style lang="less" scoped> |
| | | .public-bounced { |
| | | width: 75%; |
| | | z-index: 999; |
| | | z-index: 2000; |
| | | position: absolute; |
| | | bottom: 5%; |
| | | left: 15%; |
| | | background-color: #002432; |
| | | border: 1px #9fc5c8 solid; |
| | | top: 15%; |
| | | left: 20%; |
| | | |
| | | .public-bounced-title { |
| | | border: 1px #a4c0d8 solid; |
| | | cursor: move; |
| | | height: 0.1rem; |
| | | padding: 10px 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 5px 0; |
| | | |
| | | span { |
| | | color: #f4f7ff; |
| | |
| | | } |
| | | |
| | | i { |
| | | color: white; |
| | | color: #C0C4CC; |
| | | margin: 0 15px; |
| | | font-size: 22px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | i:hover { |
| | | color: #00fff6; |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | } |