添加 附属设施弹框。

chenyabin

2021-04-19 71f75cd55d11dda80118c0c3e278a8c531d98dc5

添加 附属设施弹框。

 src/assets/css/map/map-panel-style.less

@@ -14,7 +14,26 @@
  list-style: none;
}


.rt{
  float:right;
}
.lt{
  float:left;
}
.el-button--mini, .el-button--mini.is-round{
  padding: 0.02rem 0.04rem;
}
/*隐藏*/
.el-dialog__wrapper{
  height: 0;
}
.el-dialog{
  margin: 0 !important;
  position: fixed;
  z-index: 2000;
// left: 50%;
 //bottom:15px;
}
i {
  font-style: normal
}

 src/components/BaseNav/pipeline/AffiliatedFacilities.vue

New file
@@ -0,0 +1,59 @@
<template>
    <!-- 附属设施 -弹框 -->
    <div class="affiliatedFacilities">
        <el-dialog
                custom-class="affiliatedFacilities-dialog"
                title="提示"
                :visible.sync="dialogVisible"
                :append-to-body="true"
                :modal="false"
                 v-dialogDrag
                >
            <div>
                <h3>附属设施分类</h3>
                <ul>
                    <li>附属设施子类</li>
                    <li>附属设施子类</li>
                    <li>附属设施子类</li>
                    <li>附属设施子类</li>
                    <li>附属设施子类</li>
                </ul>
            </div>

        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'AffiliatedFacilities',
  data () {
    return {
      dialogVisible: true
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style  lang="less">
.affiliatedFacilities-dialog{
    width: calc(30% - 15px) !important; // calc(30% - 15px);
    left: 50%;
    .el-dialog__body{
        padding: 0.04rem;
        h3{color:#fff;}
        ul {display: flex;flex-wrap: wrap;
            li{margin-left:0.04rem;margin-bottom: 0.04rem;cursor: pointer;color:#00fff6}
        }
    }
}
</style >

 src/components/panel/topicSearch/SewersSearch.vue

@@ -40,7 +40,7 @@
            <div>
              <h3 @click="handleLocation(item)">{{ item.properties.pipename }}</h3>
              <p>所属企业：<span>{{ item.properties.orgcode }}</span>
              <p>设施类型：<span>{{ item.properties.teetype }}</span></p>
              <p>设施类型：<span>{{ item.properties.teetype }}</span> <el-button class="rt" size="mini" style="margin-right: 0.04rem" @click="btnAffiliatedFacilities(item)" >附属设施</el-button></p>
            </div>
          </div>
        </el-scrollbar>
@@ -64,6 +64,8 @@
        <SewersHistory></SewersHistory>
      </el-tab-pane>
    </el-tabs>
    <!-- 附属设施面板 -->
    <affiliated-facilities></affiliated-facilities>
  </div>
</template>

@@ -77,6 +79,8 @@
import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'

import AffiliatedFacilities from '@components/BaseNav/pipeline/AffiliatedFacilities'

// 引入组件内容
import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis'
import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory'
@@ -85,7 +89,8 @@
  name: 'SewersSearch',
  components: {
    SewersAnalysis,
    SewersHistory
    SewersHistory,
    AffiliatedFacilities
  },
  data () {
    return {
@@ -141,6 +146,9 @@
      window.map.flyToBounds(bound)
      window.layerFactory.flyByLayerId(this.form.dataType.code, val.id)
      // layer && layer.openPopup()
    },
    btnAffiliatedFacilities (item) {
      console.log(item)
    }
  }
}

 src/components/plugin/DialogDrag.js

@@ -5,8 +5,8 @@
  bind (el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    debugger
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

@@ -34,10 +34,10 @@

        // 移动当前元素
        dragDom.style.left = `${l + styL}px`
        dragDom.style.top = `${t + styT}px`

        //    dragDom.style.top = `${t + styT}px`
        dragDom.style.bottom = `${t - styT}px`
        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
        // binding.value({ x: e.pageX, y: e.pageY })
      }

      document.onmouseup = function (e) {

 src/conf/Topic.js

@@ -44,7 +44,7 @@
  id: 5,
  checked: false,
  isShow: true,
  icon: 'iconditu1',
  icon: 'iconditu',
  comp: ''
}, {
  name: '土壤及地下水',
@@ -60,7 +60,7 @@
  isShow: true,
  icon: 'iconguanxianxuncha',
  comp: ''
}/*, {
}, {
  name: '管道变更',
  id: 8,
  checked: false,
@@ -74,4 +74,4 @@
  isShow: true,
  icon: 'iconguanxianbiaozhu',
  comp: ''
} */]
}]

 src/utils/dialogDrag.js

@@ -8,7 +8,9 @@
    const dragDom = el.querySelector('.el-dialog')
    // dialogHeaderEl.style.cursor = 'move';
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'
    //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 () {
@@ -68,7 +70,9 @@
        }

        // 移动当前元素
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
        //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) {