From 0c71a89748fb4e4cd433e8e9883d460033a3b996 Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期五, 16 四月 2021 14:39:55 +0800 Subject: [PATCH] 固废废水废气弹框问题修改 --- src/components/BaseNav/WasteSolid/PublicTabs.vue | 26 +++-- /dev/null | 80 ---------------- src/components/BaseNav/PublicVideo.vue | 0 src/components/BaseNav/PublicSector.vue | 45 +++++++++ src/components/LayerController/logic/WasteSolid.js | 38 +++++-- src/components/BaseNav/PublicBounced/PublicBounced.vue | 62 ++++++----- src/components/BaseNav/WasteSolid/PublicTable.vue | 6 src/components/BaseNav/WasteSolid/WasteSolidIndex.vue | 42 ++++--- 8 files changed, 146 insertions(+), 153 deletions(-) diff --git a/src/components/BaseNav/PublicBounced/PublicBounced.vue b/src/components/BaseNav/PublicBounced/PublicBounced.vue index eb88010..0db423e 100644 --- a/src/components/BaseNav/PublicBounced/PublicBounced.vue +++ b/src/components/BaseNav/PublicBounced/PublicBounced.vue @@ -4,45 +4,49 @@ <span>{{ displayContentTitle }}</span> <i class="el-icon-circle-close" @click="closePopup"></i> </div> - <div class="public-bounced-content"> - <div class="public-bounced-content-left"> - <public-tabs :setSolidWaste="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' - :ManualData="ManualData" - ref="PublicChart" - > - </public-chart> - </div> - </div> - <div class="public-bounced-content-right" > - <public-video></public-video> - </div> - </div> +<!-- <div class="public-bounced-content">--> +<!-- <div class="public-bounced-content-left">--> +<!-- <public-tabs :setSolidWaste="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'--> +<!-- :ManualData="ManualData"--> +<!-- ref="PublicChart"--> +<!-- >--> +<!-- </public-chart>--> +<!-- </div>--> +<!-- </div>--> +<!-- <div class="public-bounced-content-right">--> +<!-- <public-video></public-video>--> +<!-- </div>--> +<!-- </div>--> + <PublicSector></PublicSector> </div> </template> <script> import '@/utils/dragBoxes' -import PublicTabs from '@components/BaseNav/PublicBounced/common/PublicTabs' -import PublicTable from '@components/BaseNav/PublicBounced/common/PublicTable' -import PublicVideo from '@components/BaseNav/PublicBounced/common/PublicVideo' -import PublicChart from './common/PublicChart' +// import PublicTabs from '@components/BaseNav/PublicBounced/common/PublicTabs' +// import PublicTable from '@components/BaseNav/PublicBounced/common/PublicTable' +// import PublicVideo from '@components/BaseNav/PublicBounced/common/PublicVideo' +// import PublicChart from './common/PublicChart' + +import PublicSector from '@components/BaseNav/PublicSector' export default { name: 'PublicBounced', components: { - PublicTabs, - PublicTable, - PublicChart, - PublicVideo + PublicSector + // PublicTabs, + // PublicTable, + // PublicChart, + // PublicVideo }, data () { return { diff --git a/src/components/BaseNav/PublicSector.vue b/src/components/BaseNav/PublicSector.vue new file mode 100644 index 0000000..8c848c6 --- /dev/null +++ b/src/components/BaseNav/PublicSector.vue @@ -0,0 +1,45 @@ +<template> + <div class="public-bounced-content"> + <WasteSolidIndex> + <template v-slot:WasteSolidTabs></template> + <template v-slot:WasteSolidTable></template> + <template v-slot:WasteSolidVideo></template> + </WasteSolidIndex> + </div> +</template> + +<script> + +import WasteSolidIndex from '@components/BaseNav/WasteSolid/WasteSolidIndex' + +export default { + name: 'PublicSector', + components: { + WasteSolidIndex + }, + data () { + return {} + } +} +</script> + +<style lang="less" scoped> +.public-bounced { + z-index: 2000; + position: absolute; + top: 35%; + left: 20%; + + .public-bounced-content { + padding: 0.1rem; + display: flex; + + .public-bounced-content-left { + } + + .public-bounced-content-right { + margin-left: 0.1rem; + } + } +} +</style> diff --git a/src/components/BaseNav/WasteGas/PublicVideo.vue b/src/components/BaseNav/PublicVideo.vue similarity index 100% rename from src/components/BaseNav/WasteGas/PublicVideo.vue rename to src/components/BaseNav/PublicVideo.vue diff --git a/src/components/BaseNav/WasteSolid/PublicTable.vue b/src/components/BaseNav/WasteSolid/PublicTable.vue index 1515187..f1c70fb 100644 --- a/src/components/BaseNav/WasteSolid/PublicTable.vue +++ b/src/components/BaseNav/WasteSolid/PublicTable.vue @@ -7,7 +7,7 @@ <!-- </el-table>--> <!-- </div>--> <!-- </div>--> - <div class="main"> + <div class="slotChildTable"> <span></span> <span></span> <span></span> @@ -117,13 +117,13 @@ background: none !important } -.main { +.slotChildTable { position: relative; background: rgba(33, 41, 69, 0.9); //border: 1px solid red; } -.main span:nth-child(1) { +.slotChildTable span:nth-child(1) { position: absolute; left: -1px; top: -1px; diff --git a/src/components/BaseNav/WasteSolid/PublicTabs.vue b/src/components/BaseNav/WasteSolid/PublicTabs.vue index a0df48a..a9908e2 100644 --- a/src/components/BaseNav/WasteSolid/PublicTabs.vue +++ b/src/components/BaseNav/WasteSolid/PublicTabs.vue @@ -7,14 +7,13 @@ <div class="main"> <div class="main-matter"> <div> - <ul> - <!-- <li>鍦烘墍鍚嶇О:{{ setSolidWaste.StoragePlaceName }}</li>--> - <!-- <li>璐瓨鑳藉姏:{{ setSolidWaste.StorageQty }}(鍚�)</li>--> - <!-- <li>鍓╀綑璐瓨鑳藉姏:{{ setSolidWaste.SurplusFloorArea }}(鍚�)</li>--> - <!-- <li>鍗犲湴闈㈢Н(銕�):{{ setSolidWaste.DesignFloorArea }}(銕�)</li>--> - <!-- <li>鏈�杩戣串瀛樻棩鏈�:{{ setSolidWaste.StorageDate }}</li>--> - <!-- <li class="lastli"></li>--> - <li v-for="(item,index) in tabList" :key="index"></li> + <ul v-for="(item,index) in setSolidWaste" :key="index"> + <li>鍦烘墍鍚嶇О:{{ item.StoragePlaceName }}</li> + <li>璐瓨鑳藉姏:{{ item.StoragePlaceName }}</li> + <li>鍓╀綑璐瓨鑳藉姏:{{ item.StorageQty }}</li> + <li>鍗犲湴闈㈢Н(銕�):{{ item.SurplusFloorArea }}</li> + <li>鏈�杩戣串瀛樻棩鏈�:{{ item.DesignFloorArea }}</li> + <li class="lastli"></li> </ul> </div> </div> @@ -25,10 +24,17 @@ <script> export default { name: 'GasTable', - props: ['setSolidWaste', 'value', 'setWasteGasdata', 'setWasteWaterdata'], data () { return { - tabList: [] + tabList: [], + setSolidWaste: [{ + StoragePlaceId: 0, + StoragePlaceName: '鍙栨按鍗曞厓骞叉偿鏆傚瓨搴�', + DesignFloorArea: 0.024, + StorageQty: 0.016, + SurplusFloorArea: 0.018, + StorageDate: '2021-01-17' + }] } }, methods: { diff --git a/src/components/BaseNav/WasteSolid/PublicVideo.vue b/src/components/BaseNav/WasteSolid/PublicVideo.vue deleted file mode 100644 index f87c2bb..0000000 --- a/src/components/BaseNav/WasteSolid/PublicVideo.vue +++ /dev/null @@ -1,80 +0,0 @@ -<template> - <div class="win"> - <!-- 鍥涗釜瑙掔殑杈规鏁堟灉 --> - <div class="border_corner border_corner_left_top"></div> - <div class="border_corner border_corner_right_top"></div> - <div class="border_corner border_corner_left_bottom"></div> - <div class="border_corner border_corner_right_bottom"></div> - <div class="main"> - <!-- <div class="main-video">--> - <video controls> - <source src="movie.mp4" type="video/mp4"> - <source src="movie.ogg" type="video/ogg"> - </video> - <!-- </div>--> - </div> - </div> -</template> - -<script> -export default { - name: 'GasVideo' -} -</script> - -<style scoped lang="less"> -.win { - position: relative; - background-color: rgba(33, 41, 69, 0.9); - //height: 2rem; - -} - -.main { - border: 1px solid #396d83; - width: 2.5rem; - height: 2.5rem; - video { - width: 100%; - height: 100%; - outline: none; - } -} - -.border_corner { - z-index: 999; - position: absolute; - width: 14px; - height: 14px; - background: rgba(0, 0, 0, 0); - border: 1px solid #47d5ea; -} - -.border_corner_left_top { - top: 0; - left: 0; - border-right: none; - border-bottom: none; -} - -.border_corner_right_top { - top: 0; - right: 0; - border-left: none; - border-bottom: none; -} - -.border_corner_left_bottom { - bottom: 0; - left: 0; - border-right: none; - border-top: none; -} - -.border_corner_right_bottom { - bottom: 0; - right: 0; - border-left: none; - border-top: none; -} -</style> diff --git a/src/components/BaseNav/WasteSolid/WasteSolidIndex.vue b/src/components/BaseNav/WasteSolid/WasteSolidIndex.vue index 51c40ef..09b2ace 100644 --- a/src/components/BaseNav/WasteSolid/WasteSolidIndex.vue +++ b/src/components/BaseNav/WasteSolid/WasteSolidIndex.vue @@ -1,29 +1,29 @@ <template> - <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 class="public-bounced-content"> + <div class="public-bounced-content-left"> + <slot name='WasteSolidTabs'> + <PublicTabs></PublicTabs> + </slot> + <div class="public-bounced-content-left-bottom"> + <slot name='WasteSolidTable'> + <PublicTable></PublicTable> + </slot> + </div> </div> - <div class="public-bounced-content"> - <div class="public-bounced-content-left"> - <public-tabs :setSolidWaste="displayContentTab"></public-tabs> - <div class="public-bounced-content-left-bottom"> - <public-table :displayContentTable="displayContentTable"></public-table> - </div> - </div> - <div class="public-bounced-content-right"> - <public-video></public-video> - </div> + <div class="public-bounced-content-right"> + <slot name='WasteSolidVideo'> + <PublicVideo></PublicVideo> + </slot> </div> </div> </template> <script> -import '@/utils/dragBoxes' +// import '@/utils/dragBoxes' import PublicTabs from '@components/BaseNav/WasteSolid/PublicTabs' import PublicTable from '@components/BaseNav/WasteSolid/PublicTable' -import PublicVideo from '@components/BaseNav/WasteSolid/PublicVideo' +import PublicVideo from '@components/BaseNav/PublicVideo' export default { name: 'WasteSolidIndex', @@ -34,8 +34,14 @@ }, data () { return { - displayContentTitle: '', - displayContentTab: '', + displayContentTabs: [{ + StoragePlaceId: 0, + StoragePlaceName: '鍙栨按鍗曞厓骞叉偿鏆傚瓨搴�', + DesignFloorArea: 0.024, + StorageQty: 0.016, + SurplusFloorArea: 0.018, + StorageDate: '2021-01-17' + }], displayContentTable: '', flag: false } diff --git a/src/components/BaseNav/WasteWater/PublicVideo.vue b/src/components/BaseNav/WasteWater/PublicVideo.vue deleted file mode 100644 index f87c2bb..0000000 --- a/src/components/BaseNav/WasteWater/PublicVideo.vue +++ /dev/null @@ -1,80 +0,0 @@ -<template> - <div class="win"> - <!-- 鍥涗釜瑙掔殑杈规鏁堟灉 --> - <div class="border_corner border_corner_left_top"></div> - <div class="border_corner border_corner_right_top"></div> - <div class="border_corner border_corner_left_bottom"></div> - <div class="border_corner border_corner_right_bottom"></div> - <div class="main"> - <!-- <div class="main-video">--> - <video controls> - <source src="movie.mp4" type="video/mp4"> - <source src="movie.ogg" type="video/ogg"> - </video> - <!-- </div>--> - </div> - </div> -</template> - -<script> -export default { - name: 'GasVideo' -} -</script> - -<style scoped lang="less"> -.win { - position: relative; - background-color: rgba(33, 41, 69, 0.9); - //height: 2rem; - -} - -.main { - border: 1px solid #396d83; - width: 2.5rem; - height: 2.5rem; - video { - width: 100%; - height: 100%; - outline: none; - } -} - -.border_corner { - z-index: 999; - position: absolute; - width: 14px; - height: 14px; - background: rgba(0, 0, 0, 0); - border: 1px solid #47d5ea; -} - -.border_corner_left_top { - top: 0; - left: 0; - border-right: none; - border-bottom: none; -} - -.border_corner_right_top { - top: 0; - right: 0; - border-left: none; - border-bottom: none; -} - -.border_corner_left_bottom { - bottom: 0; - left: 0; - border-right: none; - border-top: none; -} - -.border_corner_right_bottom { - bottom: 0; - right: 0; - border-left: none; - border-top: none; -} -</style> diff --git a/src/components/LayerController/logic/WasteSolid.js b/src/components/LayerController/logic/WasteSolid.js index cd3d48a..6ca9dea 100644 --- a/src/components/LayerController/logic/WasteSolid.js +++ b/src/components/LayerController/logic/WasteSolid.js @@ -11,7 +11,8 @@ // 浣跨敤灏佽鏂规硶 const AnimalService = require('../service/AnimalService').default -const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default +// const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default +const PublicVideo = require('../../BaseNav/PublicVideo').default module.exports = function () { /** @@ -72,26 +73,37 @@ // 鏍规嵁鐐瑰嚮涓嶅悓鏁版嵁 杩涜鎺ュ彛鐨勬暟鎹姹� this.requestSolidWasteData = async (e) => { // 鍩烘湰淇℃伅 鍜� 璇︾粏淇℃伅 灞曠ず鏁版嵁鎵�闇�鍙傛暟 - const dataValue = { - StoragePlaceId: e.layer.options.totransferData.StoragePlaceId - } + // const dataValue = { + // StoragePlaceId: e.layer.options.totransferData.StoragePlaceId + // } // console.log(e.layer.options.totransferData.Name) // 寮规鏍囬 const title = e.layer.options.totransferData.Name // 鍩烘湰淇℃伅 tabs - const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue) + // const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue) // 璇︾粏淇℃伅灞曠ず table - const resultDetailed = await mapApi.getSolidWasteDetail(dataValue) + // const resultDetailed = await mapApi.getSolidWasteDetail(dataValue) - // 缁戝畾寮规瀹炰緥 - const PublicBounced = window.Vue.extend(publicBounced) - const instance = new PublicBounced().$mount() - document.body.appendChild(instance.$el) - // document.body.removeChild(instance.$el) - // 閫氳繃鏂规硶 鍚戠粦瀹氬脊妗嗕紶閫掓暟鎹� - instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei') + // // 缁戝畾寮规瀹炰緥 + // const PublicBounced = window.Vue.extend(publicBounced) + // const instance = new PublicBounced().$mount() + // document.body.appendChild(instance.$el) + // // document.body.removeChild(instance.$el) + // // 閫氳繃鏂规硶 鍚戠粦瀹氬脊妗嗕紶閫掓暟鎹� + // instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei') /* flyTo()寮瑰嚭妗嗗钩绉讳簨浠� */ this.setPanTo(e.latlng, 300) + window.$layer.open({ + content: { + content: PublicVideo, // 缁勪欢 + parent: this, // 鐖剁粍浠� + data: { // 浼犻�掔殑鍙傛暟 + info: this.info, + storagePlaceId: e.layer.options.totransferData.StoragePlaceId + } + }, + title: title // 鏍囬 + }) } // flayTo() 寮规鐨勫彲婊戝姩浜嬩欢 -- Gitblit v1.8.0