| | |
| | | <template> |
| | | <div v-if="isShow" class="s-map-popup-panel" > |
| | | |
| | | <div> |
| | | {{ data }} |
| | | </div> |
| | | <div> |
| | | {{ data }} |
| | | </div> |
| | | <br> |
| | | <br> |
| | | <div> |
| | | {{ data }} |
| | | </div> |
| | | <br> |
| | | <br> |
| | | |
| | | <div> |
| | | {{ data }} |
| | | </div> |
| | | <el-button type="primary" @click="onClick">主要按钮</el-button> |
| | | <div id="popup" class="s-map-popup-panel" style="min-width: 280px;max-width: 280px;padding: 0 10px"> |
| | | <el-tabs type="card" v-model="tabIndex" @tab-click="handleClick"> |
| | | <el-tab-pane |
| | | :key="index" |
| | | v-for="(item,index) in datas" |
| | | :label="item.title" |
| | | :name="index.toString()" |
| | | > |
| | | <el-row v-for="(item,key) in item.content" :key="key"> |
| | | <el-col :span="12"><B>{{key}}:</B></el-col> |
| | | <el-col :span="12">{{item}}</el-col> |
| | | </el-row> |
| | | <el-table v-if="item.tableList" |
| | | :data="item.tableList" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="pipesegcode" |
| | | label="管段编码"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="startpointdepth" |
| | | label="起点埋深(m)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="startpointz" |
| | | label="起点高程(m)"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | // import '@/assets/css/map/map-popup.scss' |
| | | |
| | | import { highlight } from '../../components/helpers/LocateHelper' |
| | | |
| | | export default { |
| | | name: 'Popup', |
| | | props: ['datas'], |
| | | data () { |
| | | return { |
| | | |
| | | tabsValue: '', |
| | | tabIndex: 0, |
| | | isShow: false, |
| | | data: '' |
| | | properties: {} |
| | | } |
| | | }, |
| | | |
| | | computed: { |
| | | }, |
| | | methods: { |
| | | filter (content) { |
| | | var obj = {} |
| | | for (const key in content) { |
| | | if (this.props[key]) { |
| | | obj[this.props[key]] = content[key] |
| | | } |
| | | } |
| | | // console.log(obj) |
| | | return obj |
| | | }, |
| | | setShow () { |
| | | // this.style.display='auto' |
| | | this.data = 'adsfadfsadfsdafsdfsdfdsafsdafsdafa' |
| | | this.isShow = true |
| | | }, |
| | | onClick () { |
| | | const param = 1111 |
| | | this.$emit('callPopup', param) |
| | | handleClick (tab, event) { |
| | | const data = this.datas[this.tabIndex] |
| | | const feature = data.feature |
| | | highlight(feature) |
| | | } |
| | | }, |
| | | watch: { |
| | | datas (newVal) { |
| | | if (newVal != null) { |
| | | this.tabsValue = newVal[0].name |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <style lang="less" > |
| | | @import '../../assets/css/map/map-popup.less'; |
| | | #popup{ |
| | | .el-tabs__content{ |
| | | max-height: 240px; |
| | | overflow-y: scroll; |
| | | } |
| | | } |
| | | </style> |