<template>
|
<div class="popCount">
|
<div class="popTitle">
|
<div class="titleContent">
|
<!-- <div class="titleLabel">{{ setcellItem.name }}</div> -->
|
<div class="titleLabel" :class="{ title_active: itemInfoFlag }" v-if="setcellItem.attributes.XMMC">{{
|
setcellItem.attributes.XMMC }}</div>
|
<div class="titleLabel" :class="{ title_active: itemInfoFlag }" v-else-if="setcellItem.attributes.SWLYMC">{{
|
setcellItem.attributes.SWLYMC }}</div>
|
<div class="titleLabel" :class="{ title_active: itemInfoFlag }" v-else-if="setcellItem.attributes.MC">{{
|
setcellItem.attributes.MC }}</div>
|
<div class="titleLabel" :class="{ title_active: itemInfoFlag }" v-else-if="setcellItem.attributes.TDQLR">{{
|
setcellItem.attributes.TDQLR }}</div>
|
<div v-else></div>
|
<div v-show="itemInfoFlag" style="margin-left: 20px" class="popMenu">
|
<sourceType :parentData="setcellItem.attributes.DL"></sourceType>
|
</div>
|
</div>
|
|
<div class="popClose">
|
<!-- <img src="../assets/img/close.png" /> -->
|
</div>
|
</div>
|
<div v-show="!itemInfoFlag" class="popCont">
|
<div v-if="setcellItem.attributes.DL == '土地'">
|
宗地面积: <label>{{ setcellItem.attributes.ZDMJ }}</label>
|
</div>
|
<div v-else-if="setcellItem.attributes.DL == '房产'">
|
建筑面积: <label>{{ setcellItem.attributes.SWLYJZMJ }}</label>
|
</div>
|
<div v-else></div>
|
<div class="popMenu">
|
<sourceType :parentData="setcellItem.attributes.DL"></sourceType>
|
<div class="popInfo" @click="setShwoInfoMessage">
|
<p>详情</p>
|
</div>
|
</div>
|
</div>
|
<div v-show="itemInfoFlag" class="popBottom">
|
<div class="eslider"></div>
|
<ul>
|
<li v-for="(item, index) in content" :key="index">
|
<div>
|
{{ item.name }}
|
</div>
|
<div>
|
{{ item.value }}
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, computed, shallowRef, watch } from 'vue';
|
import { useStore } from 'vuex';
|
import mapMenu from '../assets/js/mapMenu';
|
import sourceType from './sourceType.vue';
|
import mapData from '../assets/js/mapData';
|
import mapLayer from '../assets/js/mapLayer';
|
import mapCellItem from '../assets/js/mapCellItem';
|
const anchors = [110, Math.round(0.4 * window.innerHeight), Math.round(0.7 * window.innerHeight)];
|
const height = ref(anchors[0]);
|
const store = useStore();
|
|
const setcellItem = ref({
|
attributes: {},
|
geometry: {}
|
});
|
const setCellObj = ref({});
|
const itemInfoFlag = ref(false);
|
const content = ref([]);
|
const setPopClose = () => {
|
store.state.setShowCellItem = false;
|
|
mapLayer.setRemovelocationEntity();
|
mapMenu.setMenuChange();
|
};
|
const setCellInfoStart = () => {
|
itemInfoFlag.value = false;
|
const obj = store.state.setCellItem;
|
console.log(obj);
|
setCellObj.value = obj;
|
setcellItem.value = {
|
attributes: obj.attributes,
|
geometry: obj.geometry
|
};
|
content.value = mapCellItem.getCellItemContent(obj);
|
};
|
|
const setShwoInfoMessage = () => {
|
itemInfoFlag.value = true;
|
const obj = setcellItem.value.geometry;
|
const judgeMentData = mapData.setJudgmentData(obj);
|
|
if (judgeMentData) {
|
mapData.setMqpJump({
|
x: obj.coordinates[0],
|
y: obj.coordinates[1]
|
});
|
// mapLayer.getlocationEntity(setcellItem.value);
|
}
|
};
|
onMounted(() => {
|
setCellInfoStart();
|
});
|
watch(
|
() => store.state.setCellItem,
|
(nVal, oVal) => {
|
if (nVal) {
|
setCellInfoStart();
|
}
|
}
|
);
|
</script>
|
|
<style scoped lang="less">
|
.popCount {
|
padding: 0px 15px;
|
margin-top: 15px;
|
|
.popTitle {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.titleLabel {
|
font-size: 18px;
|
color: rgba(0, 0, 0, 1);
|
font-weight: 700;
|
}
|
|
.popClose {
|
width: 24px;
|
height: 24px;
|
// background: rgba(222, 222, 222, 1);
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.popBottom {
|
width: 100%;
|
|
.eslider {
|
margin: 10px 0px;
|
height: 1px;
|
width: 100%;
|
background: rgba(227, 227, 227, 1);
|
}
|
|
li {
|
list-style: none;
|
display: flex;
|
justify-content: space-between;
|
margin: 10px 0px;
|
line-height: 30px;
|
|
:first-child {
|
font-size: 14px;
|
font-weight: 400px;
|
color: rgba(0, 0, 0, 1);
|
width: 45%;
|
text-align: left;
|
display: flex;
|
align-items: center;
|
}
|
|
:last-child {
|
/** 文本1 */
|
font-size: 14px;
|
font-weight: 500;
|
width: 50%;
|
text-align: right;
|
color: rgba(22, 119, 255, 1);
|
}
|
}
|
}
|
|
.popCont {
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 10px;
|
|
label {
|
font-size: 14px;
|
font-weight: 500;
|
color: rgba(22, 119, 255, 1);
|
}
|
}
|
|
.cellMore {
|
width: 21px;
|
height: 21px;
|
background: url('../assets/img/more.png');
|
}
|
|
.cellLeft {
|
display: flex;
|
align-items: center;
|
}
|
|
.titleContent {
|
display: flex;
|
|
.titleLabel {
|
// background: skyblue;
|
max-width: 43vh;
|
|
// position: relative;
|
}
|
|
.title_active {
|
max-width: 28vh;
|
}
|
}
|
|
.popMenu {
|
display: flex;
|
align-items: center;
|
|
.popInfo {
|
width: 84px;
|
height: 28px;
|
opacity: 1;
|
border-radius: 6px;
|
background: linear-gradient(180deg, rgba(77, 144, 250, 1) 0%, rgba(72, 136, 240, 1) 100%);
|
|
border: 1px solid rgba(150, 218, 255, 1);
|
color: white;
|
text-align: center;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-left: 10px;
|
}
|
}
|
}
|
</style>
|
