<template>
|
<div id="popup" v-if="isShow" class="s-map-popup-panel">
|
<el-tabs v-model="tabsValue" type="card">
|
<el-tab-pane
|
:key="item.name"
|
v-for="(item) in tabs"
|
:label="item.title"
|
:name="item.name"
|
>
|
<el-row v-for="(v,k) in filter" :key="k">
|
<el-col :span="10"><B>{{k}}：</B></el-col>
|
<el-col :span="14">{{v}}</el-col>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
// import '@/assets/css/map/map-popup.scss'
|
import { props } from '../../conf/Constants'
|
|
export default {
|
name: 'Popup',
|
data () {
|
return {
|
tabsValue: '1',
|
tabs: [],
|
tabIndex: 2,
|
isShow: false,
|
properties: {},
|
props: props
|
}
|
},
|
computed: {
|
filter () {
|
var obj = {}
|
for (const key in this.properties) {
|
if (this.props[key]) {
|
obj[this.props[key]] = this.properties[key]
|
}
|
}
|
return obj
|
}
|
},
|
methods: {
|
handleTabsEdit (targetName, action) {
|
if (action === 'add') {
|
const newTabName = ++this.tabIndex + ''
|
this.editableTabs.push({
|
title: 'New Tab',
|
name: newTabName,
|
content: 'New Tab content'
|
})
|
this.editableTabsValue = newTabName
|
}
|
if (action === 'remove') {
|
const tabs = this.editableTabs
|
let activeName = this.editableTabsValue
|
if (activeName === targetName) {
|
tabs.forEach((tab, index) => {
|
if (tab.name === targetName) {
|
const nextTab = tabs[index + 1] || tabs[index - 1]
|
if (nextTab) {
|
activeName = nextTab.name
|
}
|
}
|
})
|
}
|
|
this.editableTabsValue = activeName
|
this.editableTabs = tabs.filter(tab => tab.name !== targetName)
|
}
|
},
|
setDatas (layer) {
|
this.tabs = [{
|
title: layer.feature.id,
|
name: '1'
|
}]
|
this.properties = layer.feature.properties
|
},
|
setShow () {
|
// this.style.display='auto'
|
this.data = 'adsfadfsadfsdafsdfsdfdsafsdafsdafa'
|
this.isShow = true
|
},
|
onClick () {
|
const param = 1111
|
this.$emit('callPopup', param)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" >
|
@import '../../assets/css/map/map-popup.less';
|
#popup{
|
.el-tabs__content{
|
max-height: 300px;
|
overflow: auto;
|
}
|
}
|
</style>
|
