<template>
|
<div style="z-index: 100000000">
|
<div class="Poplayer">
|
<div
|
class="close"
|
@click.stop="closehandle"
|
></div>
|
<!-- <div class="title">点位详情</div> -->
|
<div class="content">
|
<div class="ssdw">{{ state.list[KEY["所属单位"]] }}</div>
|
<div class="lxr">联系人：{{ state.list[KEY["联系人"]] }}</div>
|
<div class="dz">地址：{{ state.list[KEY["地址"]] }}</div>
|
<!-- <div class="con-item" v-for="(item, index) in KEY" :key="index">
|
<span class="name">{{ index }}：</span>
|
<span class="value">{{ state.list[item] }}</span>
|
</div> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import store from "@/utils/store";
|
import keys from "@/utils/poiKeys";
|
export default {
|
name: "Main",
|
components: {},
|
props: {
|
keys: {
|
type: Object,
|
},
|
list: {
|
type: Object,
|
},
|
},
|
data() {
|
return {
|
state: store.Poplayer,
|
KEY: {},
|
};
|
},
|
computed: {},
|
mounted() {
|
if (this.list) {
|
this.state.list = this.list;
|
}
|
this.KEY = keys[this.state.list.POITYPE];
|
},
|
watch: {
|
"state.list": function (val) {
|
this.KEY = keys[val.POITYPE];
|
},
|
},
|
methods: {
|
closehandle() {
|
if (window.pickFeature && window.pickFeature.primitive) {
|
window.pickFeature.primitive.image = window.imgUrl;
|
window.pickFeature.primitive.scale = window.scale;
|
window.pickFeature = null;
|
}
|
store.setlocalLayerListAction({});
|
divPoint3 && divPoint3.deleteObject();
|
store.setlocalLayerShowAction(false);
|
if (window.tdglLine) {
|
sgworld.Creator.DeleteObject(window.tdglLine);
|
window.tdglLine = null;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.Poplayer {
|
min-width: 380px;
|
max-width: 580px;
|
/* width: 380px; */
|
/* min-height: 183px; */
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url("./img/bg.png");
|
z-index: 999;
|
color: #fff;
|
font-family: SourceHanSansSC-R;
|
/* padding: 20px; */
|
padding: 10px 5px 10px 5px;
|
box-sizing: border-box;
|
font-size: 16px;
|
pointer-events: all;
|
}
|
|
.title {
|
text-align: center;
|
font-size: 20px;
|
font-weight: 700;
|
letter-spacing: 4px;
|
padding-left: 26px;
|
}
|
|
/* .title {
|
display: none;
|
width: 100%;
|
height: 30px;
|
line-height: 30px;
|
padding-left: 20px;
|
margin-top: 10px;
|
} */
|
|
.close {
|
pointer-events: all;
|
width: 28px;
|
height: 28px;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-image: url("./img/close.png");
|
float: right;
|
margin-top: 8px;
|
margin-right: 15px;
|
cursor: pointer;
|
}
|
|
.content {
|
width: 100%;
|
margin: auto;
|
}
|
|
.con-item {
|
width: 90%;
|
overflow: hidden;
|
margin-bottom: 7px;
|
margin-left: 25px;
|
margin-right: 20px;
|
word-break: break-all;
|
}
|
|
.name {
|
/* min-width: 100px; */
|
float: left;
|
}
|
|
.value {
|
max-width: 400px;
|
float: left;
|
color: aqua;
|
}
|
.ssdw {
|
width: 94%;
|
margin: 20px auto 0;
|
text-align: center;
|
color: #f2be10;
|
font: bold 18px sans-serif;
|
}
|
.lxr {
|
margin: 13px auto 0;
|
max-width: 80%;
|
text-align: center;
|
color: #fff;
|
font: bold 15px sans-serif;
|
}
|
.dz {
|
margin: 13px auto 20px;
|
max-width: 80%;
|
text-align: center;
|
color: #fff;
|
font: bold 15px sans-serif;
|
}
|
</style>
|
