From cb85033879c74f34925a303402c1ad3e4a8646f2 Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期一, 10 五月 2021 17:03:54 +0800 Subject: [PATCH] 搜索更换为geoserver wfs,图层顺序,弹窗定位等 --- src/components/layer/src/layer.vue | 144 ++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 114 insertions(+), 30 deletions(-) diff --git a/src/components/layer/src/layer.vue b/src/components/layer/src/layer.vue index 1ef2000..3221a11 100644 --- a/src/components/layer/src/layer.vue +++ b/src/components/layer/src/layer.vue @@ -1,46 +1,130 @@ -<template lang="html"> - <component :options="this.$data" :is="getActiveName"></component> +<template> + <div class="public-bounced map-background" v-drag :style="style"> + <div class="public-bounced-title panel-title" ref="publicBounced"> + <span>{{ title }}</span> + <i class="el-icon-circle-close" @click="close"></i> + </div> + <div class="public-bounced-content" :id="id"></div> + </div> </template> <script> -import pzpage from './page.vue' -import pziframe from './iframe.vue' +import helper from './helper/helper.js' export default { data () { return { - id: '', - type: 0, // 0锛坅lert榛樿锛�1锛堥〉闈㈠眰锛�2锛坕frame灞傦級3锛坙oading锛�4锛坱ips灞傦級,5(msg),6(prompt) - title: '淇℃伅', - content: '', - area: 'auto', - offset: 'auto', - icon: -1, - btn: '纭畾', - time: 0, - shade: true, - yes: '', - cancel: '' + style: {}, + id: 'sewer_layeropen_' + new Date().getTime() } }, - computed: { - getActiveName () { - const comps = [ - 'pzpage', - 'pziframe' - ] - return comps[this.$data.type] + props: { + options: { + type: Object, + default: function () { + return {} + } } }, - mounted () {}, - methods: {}, - watch: {}, - components: { - pzpage, - pziframe + computed: {}, + mounted () { + let left = this.left + let top = this.top + if (left > 0) { + left = left + 'px' + } + if (top > 0) { + top = top + 'px' + } + this.style = { + left: left || '25%', + top: top || '35%' + } + }, + methods: { + close () { + this.layer.close(this.id) + }, + init () { + const propsData = helper.deepClone(this.content.data) || {} + propsData.layerid = this.id + propsData.lydata = this.content.data + propsData.lyoption = this.options + const instance = new this.content.content({ + // parent: this.content.parent, + propsData: propsData + }) + instance.vm = instance.$mount() + document.getElementById(this.id).appendChild(instance.vm.$el) + }, + max () { + // 鏈�澶у寲绐楀彛 + let height = document.documentElement.clientHeight + if (height % 2 === 1) { + height += 1 + } + this.style = { + overflow: 'hidden', + left: '50%', + width: '100%', + height: height + 'px', + minHeight: '42px' + } + this.maxMiniState = 2 + }, + maxmini () { // 杩樺師 + document.getElementById(this.options.id).removeAttribute('style') + this.maxMiniState = 0 + } } } </script> -<style lang="less"> +<style lang="less" scoped> +.public-bounced { + z-index: 2000; + position: absolute; + + .public-bounced-title { + cursor: move; + height: 0.1rem; + padding: 10px 0; + display: flex; + align-items: center; + justify-content: space-between; + + span { + color: #f4f7ff; + margin: 0 15px; + font-size: 14px; + } + + i { + color: #C0C4CC; + margin: 0 15px; + font-size: 22px; + cursor: pointer; + } + + i:hover { + color: #00fff6; + } + } + + .public-bounced-content { + //padding: 0.1rem; + display: flex; + //align-items: center; + //justify-content: space-around; + + .public-bounced-content-left { + //width: 4.8rem; + } + + .public-bounced-content-right { + //width: 3rem; + margin-left: 0.1rem; + } + } +} </style> -- Gitblit v1.8.0