From 30ddfcd5409a9342ef79039eb139c07d80b5719d Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期四, 15 四月 2021 15:16:57 +0800 Subject: [PATCH] 弹框修改 --- /dev/null | 22 --- src/components/BaseNav/WasteSolid/PublicTabs.vue | 134 +++++++++++++++++++ src/components/table/summarySheets.vue | 4 src/components/BaseNav/WasteSolid/PublicVideo.vue | 80 +++++++++++ src/components/BaseNav/WasteSolid/PublicTable.vue | 166 +++++++++++++++++++++++ src/components/BaseNav/WasteGas/flueGas.js | 0 src/components/BaseNav/WasteSolid/SolidWaste.js | 0 7 files changed, 383 insertions(+), 23 deletions(-) diff --git a/src/components/BaseNav/SolidWaste/directive/dir.js b/src/components/BaseNav/SolidWaste/directive/dir.js deleted file mode 100644 index 063f6c3..0000000 --- a/src/components/BaseNav/SolidWaste/directive/dir.js +++ /dev/null @@ -1,38 +0,0 @@ -import Vue from 'vue' - -const drag = Vue.directive('drag', { - bind (el, binding, vnode, oldVnode) { - const dialogHeaderEl = el.querySelector('.public-bounced-title') - dialogHeaderEl.onmousedown = function (e) { - var distX = e.pageX - el.offsetLeft - var distY = e.pageY - el.offsetTop - if (e.preventDefault) { - e.preventDefault() - } else { - e.returnValue = false - } - document.onmousemove = function (e) { - let left = e.clientX - distX - let top = e.clientY - distY - - if (left <= 0) { - left = 5 - } else if (left > document.documentElement.clientWidth - dialogHeaderEl.clientWidth) { - left = document.documentElement.clientWidth - dialogHeaderEl.clientWidth - 5 - } - if (top <= 0) { - top = 5 - } else if (top > document.documentElement.clientHeight - dialogHeaderEl.clientHeight) { - top = document.documentElement.clientHeight - dialogHeaderEl.clientHeight - 5 - } - - el.style.left = left + 'px' - el.style.top = top + 'px' - } - document.onmouseup = function () { - document.onmousemove = document.onmouseup = null - } - } - } -}) -export default drag diff --git a/src/components/BaseNav/SolidWaste/directive/directive.js b/src/components/BaseNav/SolidWaste/directive/directive.js deleted file mode 100644 index a656af4..0000000 --- a/src/components/BaseNav/SolidWaste/directive/directive.js +++ /dev/null @@ -1,77 +0,0 @@ -export default { - bind (el, binding, vnode) { - const dialogHeaderEl = el.querySelector('.el-dialog__header') - const dragDom = el.querySelector('.el-dialog') - dialogHeaderEl.style.cssText += ';cursor:move;' - dragDom.style.cssText += ';top:0px;' - - // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null); - const getStyle = (function () { - if (window.document.currentStyle) { - return (dom, attr) => dom.currentStyle[attr] - } else { - return (dom, attr) => getComputedStyle(dom, false)[attr] - } - })() - - dialogHeaderEl.onmousedown = (e) => { - // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂� - const disX = e.clientX - dialogHeaderEl.offsetLeft - const disY = e.clientY - dialogHeaderEl.offsetTop - - const dragDomWidth = dragDom.offsetWidth - const dragDomHeight = dragDom.offsetHeight - - const screenWidth = document.body.clientWidth - const screenHeight = document.body.clientHeight - - const minDragDomLeft = dragDom.offsetLeft - const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth - - const minDragDomTop = dragDom.offsetTop - const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight - - // 鑾峰彇鍒扮殑鍊煎甫px 姝e垯鍖归厤鏇挎崲 - let styL = getStyle(dragDom, 'left') - let styT = getStyle(dragDom, 'top') - - if (styL.includes('%')) { - styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100) - styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100) - } else { - styL = +styL.replace(/\px/g, '') - styT = +styT.replace(/\px/g, '') - } - - document.onmousemove = function (e) { - // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈 - let left = e.clientX - disX - let top = e.clientY - disY - - // 杈圭晫澶勭悊 - if (-(left) > minDragDomLeft) { - left = -minDragDomLeft - } else if (left > maxDragDomLeft) { - left = maxDragDomLeft - } - - if (-(top) > minDragDomTop) { - top = -minDragDomTop - } else if (top > maxDragDomTop) { - top = maxDragDomTop - } - - // 绉诲姩褰撳墠鍏冪礌 - dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;` - - // emit onDrag event - vnode.child.$emit('dragDialog') - } - - document.onmouseup = function (e) { - document.onmousemove = null - document.onmouseup = null - } - } - } -} diff --git a/src/components/BaseNav/SolidWaste/directive/index.js b/src/components/BaseNav/SolidWaste/directive/index.js deleted file mode 100644 index d8a3108..0000000 --- a/src/components/BaseNav/SolidWaste/directive/index.js +++ /dev/null @@ -1,14 +0,0 @@ -// import drag from './drag' -import drag from './directive' - -const install = function (Vue) { - Vue.directive('el-drag-dialog', drag) -} - -if (window.Vue) { - window['el-drag-dialog'] = drag - Vue.use(install) // eslint-disable-line -} - -drag.install = install -export default drag diff --git a/src/components/BaseNav/flueGas/flueGas.js b/src/components/BaseNav/WasteGas/flueGas.js similarity index 100% rename from src/components/BaseNav/flueGas/flueGas.js rename to src/components/BaseNav/WasteGas/flueGas.js diff --git a/src/components/BaseNav/WasteSolid/PublicTable.vue b/src/components/BaseNav/WasteSolid/PublicTable.vue new file mode 100644 index 0000000..1515187 --- /dev/null +++ b/src/components/BaseNav/WasteSolid/PublicTable.vue @@ -0,0 +1,166 @@ +<template> + <!-- <div class="react">--> + <!-- <div class="main-table">--> + <!-- <el-table :data="listData" style="width: 100%" height="255px" :row-class-name="tableRowClassName">--> + <!-- <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"--> + <!-- :label="item.label" :show-overflow-tooltip="true"></el-table-column>--> + <!-- </el-table>--> + <!-- </div>--> + <!-- </div>--> + <div class="main"> + <span></span> + <span></span> + <span></span> + <span></span> + <div class="main-table"> + <el-table :data="listData" style="width: 100%" height="325px" :row-class-name="tableRowClassName"> + <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" + :label="item.label" :show-overflow-tooltip="true"></el-table-column> + </el-table> + </div> + </div> +</template> + +<script> +export default { + name: 'PublicTable', + props: ['displayContentTable'], + data () { + return { + listData: [], + listLabel: [ + { + label: '搴忓彿', + prop: 'StoragePlaceId' + }, + { + label: '绫诲埆', + prop: 'StoragePlaceTypeName' + }, + { + label: '鍥哄簾鍚嶇О', + prop: 'StoragePlaceName' + }, + { + label: '浠g爜', + prop: 'StorageZDMJ' + }, + { + label: '浜х敓閲�(t)', + prop: 'StorageZCL' + }, + { + label: '璐瓨閲�(t)', + prop: 'StorageZCNL' + }, + { + label: '浜х敓瑁呯疆', + prop: 'StorageType' + } + ] + } + }, + mounted () { + this.$nextTick(() => { + this.listData.push(this.displayContentTable[0], {}, {}, {}, {}, {}, {}) + }) + }, + methods: { + // 闅旇棰滆壊璁剧疆 + tableRowClassName ({ + row, + rowIndex + }) { + if (rowIndex % 2 === 0) { + return 'warning-row' + } else if (rowIndex % 2 === 1) { + return 'success-row' + } + return '' + } + } +} +</script> + +<style lang="less" scoped> +//.react { +// position: relative; +// background: rgba(33, 41, 69, 0.9); +// background: linear-gradient(to left, #02a6b5, #02a6b5) left top no-repeat, +// linear-gradient(to bottom, #02a6b5, #02a6b5) left top no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) right top no-repeat, +// linear-gradient(to bottom, #02a6b5, #02a6b5) right top no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) left bottom no-repeat, +// linear-gradient(to bottom, #02a6b5, #02a6b5) left bottom no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat, +// linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat; +// background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px; +// +// .main-table { +// //border: 1px red solid; +// } +//} +/deep/ .el-table td { + border-bottom: none !important; +} + +/deep/ .el-table th.is-leaf { + border-bottom: none !important; +} + +/deep/ .el-table td { + height: 45px !important; + line-height: 45px !important; +} + +/deep/ .el-table tbody tr:hover > td { + background: none !important +} + +.main { + position: relative; + background: rgba(33, 41, 69, 0.9); + //border: 1px solid red; +} + +.main span:nth-child(1) { + position: absolute; + left: -1px; + top: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 1px 0 0 1px; +} + +.main span:nth-child(2) { + position: absolute; + right: -1px; + top: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 1px 1px 0 0; +} + +.main span:nth-child(3) { + position: absolute; + right: -1px; + bottom: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 0 1px 1px 0; +} + +.main span:nth-child(4) { + position: absolute; + left: -1px; + bottom: -1px; + padding: 10px; + border-style: solid; + border-color: #02a6b5; + border-width: 0 0 1px 1px; +} + +</style> diff --git a/src/components/BaseNav/WasteSolid/PublicTabs.vue b/src/components/BaseNav/WasteSolid/PublicTabs.vue new file mode 100644 index 0000000..ba844dd --- /dev/null +++ b/src/components/BaseNav/WasteSolid/PublicTabs.vue @@ -0,0 +1,134 @@ +<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-matter"> + <div v-if="value === 'feiqi'"> + <ul> + <li>鐩戞祴鐐瑰悕绉�:{{ setWasteGasdata.Name }}</li> + <li>鐢熶骇鍗曚綅:{{ setWasteGasdata.porltName }}</li> + <li>鎺掓斁绫诲瀷鍚嶇О:{{ setWasteGasdata.MonTypeName }}</li> + <li>鎺掓斁鍘诲悜:{{ setWasteGasdata.EmissDirecti }}</li> + <li>鎺у埗绾у埆鍚嶇О:{{ setWasteGasdata.ContrLevelShowName }}</li> + <li>鍐�/澶栨帓鍙�:{{ setWasteGasdata.OrOutPortName }}</li> + </ul> + </div> + <div v-if="value === 'gufei'"> + <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> + </ul> + </div> + <div v-else-if="value === 'feishui'"> + <ul> + <li>鐩戞祴鐐瑰悕绉�:{{ setWasteWaterdata.Name }}</li> + <li>鐢熶骇鍗曚綅:{{ setWasteWaterdata.porltName }}</li> + <li>鎺掓斁绫诲瀷鍚嶇О:{{ setWasteWaterdata.MonTypeName }}</li> + <li>鎺掓斁鍘诲悜:{{ setWasteWaterdata.EmissDirecti }}</li> + <li>鎺у埗绾у埆鍚嶇О:{{ setWasteWaterdata.ContrLevelShowName }}</li> + <li>鍐�/澶栨帓鍙�:{{ setWasteWaterdata.OrOutPortName }}</li> + </ul> + </div> + </div> + </div> + </div> +</template> + +<script> +export default { + name: 'GasTable', + props: ['setSolidWaste', 'value', 'setWasteGasdata', 'setWasteWaterdata'] +} +</script> + +<style scoped lang="less"> + +.win { + position: relative; + margin-bottom: 0.04rem; + background-color: @background-color; + //width: 6rem; + //height: 0.5rem; +} + +.main { + //width: 100%; + //height: 100%; + + .main-matter { + font-size: 0.06rem; + font-weight: normal; + padding: 0.04rem 0; + border: 1px solid #396d83; + ul { + //width: 100%; + //height: 100%; + display: flex; + align-items: center; + justify-content: space-around; + flex-wrap: wrap; + margin-bottom: -0.04rem; + li { + margin-bottom: 0.04rem; + text-align: center; + min-width: 31%; + background-color: #243a55; + color: #00d0f9; + border-radius: 0.02rem; + font-size: 0.08rem; + line-height: 0.09rem; + padding: 0.03rem .5%; + } + .lastli { + visibility: hidden + } + } + } +} + +.border_corner { + z-index: 999; + position: absolute; + width: 10px; + height: 10px; + 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/PublicVideo.vue b/src/components/BaseNav/WasteSolid/PublicVideo.vue new file mode 100644 index 0000000..f87c2bb --- /dev/null +++ b/src/components/BaseNav/WasteSolid/PublicVideo.vue @@ -0,0 +1,80 @@ +<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/SolidWaste/SolidWaste.js b/src/components/BaseNav/WasteSolid/SolidWaste.js similarity index 100% rename from src/components/BaseNav/SolidWaste/SolidWaste.js rename to src/components/BaseNav/WasteSolid/SolidWaste.js diff --git a/src/components/BaseNav/WireSurface/index.js b/src/components/BaseNav/WireSurface/index.js deleted file mode 100644 index 3021c37..0000000 --- a/src/components/BaseNav/WireSurface/index.js +++ /dev/null @@ -1,22 +0,0 @@ -// // 寮曞叆鐢ㄤ簬澶勭悊鎺ュ彛鏁版嵁鑾峰彇鐨勬柟娉� -// import {} from '@src/api/request' -// -// class initWireSurface { -// constructor (options) { -// this.map = options.map -// this.L = window.L -// this.initWireSurfaceMap = new Map() -// this.initWireSurfacePopup = this.L.layerGroup().addTo(this.map) -// } -// -// // 鑾峰彇椤甸潰绾�/闈㈡暟鎹� -// getDataInitWireSurface () { -// ().then(res => { -// console.log(res) -// }).catch(error => { -// console.log(error) -// }) -// } -// } -// -// export default initWireSurface diff --git a/src/components/table/summarySheets.vue b/src/components/table/summarySheets.vue index fab563b..f617428 100644 --- a/src/components/table/summarySheets.vue +++ b/src/components/table/summarySheets.vue @@ -46,7 +46,9 @@ import Warn from './components/Warn' import IndexStatistics from './components/IndexStatistics' -import '@/components/BaseNav/SolidWaste/directive/dir' +// import '@/components/BaseNav/SolidWaste/directive/dir' +// import '@/components/plugin/DialogDrag' + import bus from '@/eventBus' export default { name: 'summary-sheet.vue', -- Gitblit v1.8.0