| | |
| | | <template> |
| | | <div id="popup" v-if="isShow" class="s-map-popup-panel"> |
| | | <el-tabs v-model="tabsValue" type="card"> |
| | | <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="item.name" |
| | | v-for="(item) in tabs" |
| | | :key="index" |
| | | v-for="(item,index) in datas" |
| | | :label="item.title" |
| | | :name="item.name" |
| | | :name="index.toString()" |
| | | > |
| | | <el-row v-for="(v,k) in filter(item.content)" :key="k"> |
| | | <el-col :span="12"><B>{{k}}:</B></el-col> |
| | | <el-col :span="12">{{v}}</el-col> |
| | | <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> |
| | |
| | | |
| | | <script> |
| | | // import '@/assets/css/map/map-popup.scss' |
| | | import { props } from '../../conf/Constants' |
| | | |
| | | import { highlight } from '../../components/helpers/LocateHelper' |
| | | |
| | | export default { |
| | | name: 'Popup', |
| | | props: ['datas'], |
| | | data () { |
| | | return { |
| | | tabsValue: '', |
| | | tabs: [], |
| | | tabIndex: 2, |
| | | tabIndex: 0, |
| | | isShow: false, |
| | | properties: {}, |
| | | props: props |
| | | properties: {} |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | obj[this.props[key]] = content[key] |
| | | } |
| | | } |
| | | console.log(obj) |
| | | // console.log(obj) |
| | | return obj |
| | | }, |
| | | setDatas (layer) { |
| | | this.tabs = layer |
| | | this.tabsValue = layer[0].name |
| | | }, |
| | | 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 |
| | | } |
| | | } |
| | | } |
| | | } |