src/assets/css/map/map-panel-style.less | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/BaseNav/pipeline/AffiliatedFacilities.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/panel/RightSearchPanel.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/panel/topicSearch/SewersSearch.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/utils/dialogDrag.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/assets/css/map/map-panel-style.less
@@ -724,6 +724,13 @@ } } .btn00fff6{ background: none;color:#00fff6;border-color:#00fff6 } .btn00fff6:hover{ background: @background-color;color:@color-highlight;border-color:@color-highlight } /****************************废水弹框公共样式***/ .echarts-box { .tab-scroll { src/components/BaseNav/pipeline/AffiliatedFacilities.vue
@@ -7,7 +7,7 @@ :visible.sync="dialogVisible" :append-to-body="true" :modal="false" v-dialogDrag v-dialogDragBottom > <div class="search-panel "> <el-form ref="form" :model="form" label-width="90px" class="search-form"> src/components/panel/RightSearchPanel.vue
@@ -286,7 +286,7 @@ //top: 10px; height: 0; position: absolute; top: 0.42979rem; top: 0.73979rem; right: 0.14583rem; z-index: 501; display: -webkit-box; @@ -618,12 +618,14 @@ background: #0B3B6D; } } .environmental-risk-list.hover, .environmental-risk-list:hover { color: @color-highlight; background: @background-color; } .environmental-risk-list.hover h3, .environmental-risk-list h3:hover { color: @color-highlight; } input::-webkit-input-placeholder { color: #569ee1; src/components/panel/topicSearch/SewersSearch.vue
@@ -39,7 +39,7 @@ <h3 @click="handleLocation(item,index)">{{ item.properties.pipename }}</h3> <p>所属企业:<span>{{ item.properties.orgcode }}</span> <p>设施类型:<span>{{ item.properties.teetype }}</span> <!-- <el-button v-if="fuShuSheShiShow" class="rt" size="mini" style="margin-right: 0.04rem" @click="btnAffiliatedFacilities(item)" >附属设施</el-button> --> <el-button v-if="fuShuSheShiShow" class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="btnAffiliatedFacilities(item,index)" >附属设施</el-button> </p> </div> </div> @@ -111,6 +111,7 @@ isRouteHover: false, facilitiesParameter: null, fuShuSheShiShow: true, fuShuSheShiPanelShow: true, activeNum: -1 } }, @@ -154,8 +155,12 @@ }, handleLocation (val, index) { this.activeNum = index this.facilitiesParameter = val // layer && layer.openPopup() window.layerFactory.flyByFeature(val, this.form.dataType.code) }, btnAffiliatedFacilities (val, index) { this.activeNum = index this.facilitiesParameter = val // 判断选择是否是管线,如果是则显示《附属设施》弹框 if (this.form.pipelineType === '管线') { this.fuShuSheShiShow = true src/utils/dialogDrag.js
@@ -82,3 +82,86 @@ } } }) // v-dialogDrag: 弹窗拖拽属性 Vue.directive('dialogDragBottom', { bind (el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') // dialogHeaderEl.style.cursor = 'move'; dialogHeaderEl.style.cssText += ';cursor:move;' //console.log(dragDom.style.cssText) //dragDom.style.cssText += ';top:0px;' dragDom.style.cssText = 'bottom:15px;' // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = (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 screenWidth = document.body.clientWidth // body当前宽度 const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度,可某些环境下无法获取) const dragDomWidth = dragDom.offsetWidth // 对话框宽度 const dragDomheight = dragDom.offsetHeight // 对话框高度 const minDragDomLeft = dragDom.offsetLeft const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth const minDragDomTop = dragDom.offsetTop const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight // 获取到的值带px 正则匹配替换 let styL = sty(dragDom, 'left') let styT = sty(dragDom, 'top') // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px 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;` dragDom.style.cssText = `;left:${left + styL}px;top:${top + styT}px;` //console.log(left , styL,top , styT) } document.onmouseup = function (e) { document.onmousemove = null document.onmouseup = null } } } })