|
|
|
|
@ -5,20 +5,10 @@
|
|
|
|
|
<div class="mapareaone">
|
|
|
|
|
<!-- 展开/隐藏控制按钮（放在盒子右侧外部） -->
|
|
|
|
|
<div class="collapse-control" @click="toggleCollapse">
|
|
|
|
|
<img
|
|
|
|
|
v-show="!isCollapsed"
|
|
|
|
|
src="@/assets/images/icon-sq@2x.png"
|
|
|
|
|
alt="隐藏"
|
|
|
|
|
class="control-icon"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
v-show="isCollapsed"
|
|
|
|
|
src="@/assets/images/icon-zk@2x.png"
|
|
|
|
|
alt="展开"
|
|
|
|
|
class="control-icon"
|
|
|
|
|
>
|
|
|
|
|
<img v-show="!isCollapsed" src="@/assets/images/icon-sq@2x.png" alt="隐藏" class="control-icon">
|
|
|
|
|
<img v-show="isCollapsed" src="@/assets/images/icon-zk@2x.png" alt="展开" class="control-icon">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 左侧项目列表区域 -->
|
|
|
|
|
<div class="leftdiv" v-show="!isCollapsed">
|
|
|
|
|
<!-- 项目列表内容 -->
|
|
|
|
|
@ -26,38 +16,204 @@
|
|
|
|
|
<ProjectList />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 蓝色图标区域 -->
|
|
|
|
|
<div class="blueicon"></div>
|
|
|
|
|
<div class="rightdiv">
|
|
|
|
|
<el-input v-model="searchBox" placeholder="请输入地点名称" class="search-input" @input="handleSearchInput" clearable>
|
|
|
|
|
<el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
|
|
|
|
|
</el-input>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 搜索结果列表 -->
|
|
|
|
|
<div class="search-results" v-if="searchList && searchList.length > 0">
|
|
|
|
|
<div class="search-item" v-for="(item, index) in searchList" :key="index" @click="centerMap(item)">
|
|
|
|
|
<div class="item-name">{{ item.name }}</div>
|
|
|
|
|
<div class="item-address">{{ item.address }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 右侧地图区域 -->
|
|
|
|
|
<div class="blueicon">
|
|
|
|
|
<div class="icondiv" v-if="showLocationIcon">
|
|
|
|
|
<img src="@/assets/images/detailsicon/icon-定位@2x.png" alt="定位" :style="iconPosition"
|
|
|
|
|
@click.stop="showDialog">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 悬浮窗 -->
|
|
|
|
|
<div class="app-container" v-show="dialogVisible" v-click-outside="closeDialog">
|
|
|
|
|
<div class="close-btn" @click="closeDialog">
|
|
|
|
|
<i class="el-icon-close"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dialog-content">
|
|
|
|
|
<div class="dialog-title">{{ selectedProject.name }}</div>
|
|
|
|
|
<div class="dialog-info">
|
|
|
|
|
<p><span class="label">状态:</span>
|
|
|
|
|
<span class="value" :style="{ color: xzflColors[xzflMap[selectedProject.xzfl]] }">
|
|
|
|
|
{{ xzflMap[selectedProject.xzfl] }}
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p><span class="label">项目单位:</span> <span class="value">{{ selectedProject.xmfrdwxz }}</span></p>
|
|
|
|
|
<p><span class="label">总投资额:</span> <span class="value">{{ selectedProject.ztze }}</span></p>
|
|
|
|
|
<p><span class="label">联系人:</span> <span class="value">{{ selectedProject.projectLeader }}</span></p>
|
|
|
|
|
<p><span class="label">联系电话:</span><span class="value"> {{ selectedProject.phone }}</span></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="leftarea"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import ProjectList from '@/views/components/analysis/projectList.vue'
|
|
|
|
|
import { getBasicInformationPage } from "@/api/ManageApi/index";
|
|
|
|
|
import { debounce } from 'lodash';
|
|
|
|
|
|
|
|
|
|
// 自定义指令，点击外部关闭弹窗
|
|
|
|
|
const clickOutside = {
|
|
|
|
|
bind(el, binding, vnode) {
|
|
|
|
|
el.clickOutsideEvent = function (event) {
|
|
|
|
|
if (!(el === event.target || el.contains(event.target))) {
|
|
|
|
|
vnode.context[binding.expression](event);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
document.body.addEventListener('click', el.clickOutsideEvent);
|
|
|
|
|
},
|
|
|
|
|
unbind(el) {
|
|
|
|
|
document.body.removeEventListener('click', el.clickOutsideEvent);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
ProjectList,
|
|
|
|
|
},
|
|
|
|
|
directives: {
|
|
|
|
|
'click-outside': clickOutside
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isCollapsed: false, // 控制是否折叠的状态
|
|
|
|
|
}
|
|
|
|
|
isCollapsed: false,
|
|
|
|
|
searchBox: '',
|
|
|
|
|
searchList: [],
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
selectedProject: {
|
|
|
|
|
name: '',
|
|
|
|
|
xzfl: '',
|
|
|
|
|
projectLeader: '',
|
|
|
|
|
phone: '',
|
|
|
|
|
ztze: '',
|
|
|
|
|
xmfrdwxz:''
|
|
|
|
|
},
|
|
|
|
|
showLocationIcon: false,
|
|
|
|
|
iconPosition: {
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
top: '0px',
|
|
|
|
|
left: '0px'
|
|
|
|
|
},
|
|
|
|
|
hasSearched: false,
|
|
|
|
|
// 状态颜色映射
|
|
|
|
|
xzflColors: {
|
|
|
|
|
'在建': '#6EDABE',
|
|
|
|
|
'拟建': '#FFBF6B',
|
|
|
|
|
'已建': '#2B62F1'
|
|
|
|
|
},
|
|
|
|
|
xzflMap: {
|
|
|
|
|
1: '已建',
|
|
|
|
|
2: '在建',
|
|
|
|
|
3: '拟建'
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.debouncedSearch = debounce(this.toSearch, 300);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
toggleCollapse() {
|
|
|
|
|
this.isCollapsed = !this.isCollapsed;
|
|
|
|
|
},
|
|
|
|
|
handleSearchInput() {
|
|
|
|
|
if (this.searchBox.trim() === '') {
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
this.hasSearched = false;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.debouncedSearch();
|
|
|
|
|
},
|
|
|
|
|
toSearch() {
|
|
|
|
|
if (!this.searchBox.trim()) {
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
this.hasSearched = true;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
|
name: this.searchBox,
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 10
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
getBasicInformationPage(params)
|
|
|
|
|
.then(response => {
|
|
|
|
|
this.hasSearched = true;
|
|
|
|
|
if (response && response.code === 200 && response.data) {
|
|
|
|
|
this.searchList = response.data.records;
|
|
|
|
|
} else {
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error('搜索失败:', error);
|
|
|
|
|
this.hasSearched = true;
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
centerMap(item) {
|
|
|
|
|
this.searchBox = item.name;
|
|
|
|
|
this.searchList = [];
|
|
|
|
|
this.selectedProject = {
|
|
|
|
|
name: item.name,
|
|
|
|
|
projectLeader: item.projectLeader || '暂无',
|
|
|
|
|
phone: item.phone || '暂无',
|
|
|
|
|
ztze: item.ztze || '暂无',
|
|
|
|
|
xmfrdwxz: item.xmfrdwxz || '暂无',
|
|
|
|
|
xzfl: item.xzfl || '暂无'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.showLocationIcon = true;
|
|
|
|
|
this.setRandomIconPosition();
|
|
|
|
|
},
|
|
|
|
|
showDialog() {
|
|
|
|
|
if (this.selectedProject.name) {
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warning('请选择一个项目');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
closeDialog() {
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
},
|
|
|
|
|
setRandomIconPosition() {
|
|
|
|
|
// icondiv宽9rem(约135px)，高9rem(约135px)
|
|
|
|
|
// 图标宽1.7rem(约25.5px)，高2rem(约30px)
|
|
|
|
|
// 计算最大可随机范围
|
|
|
|
|
const maxTop = 105; // 135 - 30
|
|
|
|
|
const maxLeft = 110; // 135 - 25
|
|
|
|
|
|
|
|
|
|
const randomTop = Math.floor(Math.random() * maxTop);
|
|
|
|
|
const randomLeft = Math.floor(Math.random() * maxLeft);
|
|
|
|
|
|
|
|
|
|
this.iconPosition = {
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
top: `${randomTop}px`,
|
|
|
|
|
left: `${randomLeft}px`,
|
|
|
|
|
cursor: 'pointer'
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
/* 原有样式保持不变 */
|
|
|
|
|
.container {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
@ -76,7 +232,7 @@ export default {
|
|
|
|
|
/* 控制按钮样式 */
|
|
|
|
|
.collapse-control {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left:-1.5rem;
|
|
|
|
|
left: -1.5rem;
|
|
|
|
|
top: 12.5rem;
|
|
|
|
|
width: auto;
|
|
|
|
|
height: 2rem;
|
|
|
|
|
@ -120,5 +276,129 @@ export default {
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
top: 4.5rem;
|
|
|
|
|
right: 7.4rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icondiv {
|
|
|
|
|
width: 8rem;
|
|
|
|
|
height: 8rem;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icondiv img {
|
|
|
|
|
width: 1.7rem;
|
|
|
|
|
height: 2rem;
|
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icondiv img:hover {
|
|
|
|
|
transform: scale(1.1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rightdiv {
|
|
|
|
|
width: 30%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 1rem;
|
|
|
|
|
top: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-results {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 1rem;
|
|
|
|
|
top: 3.5rem;
|
|
|
|
|
width: 30%;
|
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
|
border: 1px solid #E5E5E5;
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
z-index: 15;
|
|
|
|
|
max-height: 15rem;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-item {
|
|
|
|
|
padding: 0.5rem;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: background-color 0.3s ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-item:hover {
|
|
|
|
|
background-color: #F2F4F7;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-name {
|
|
|
|
|
/* font-weight: bold; */
|
|
|
|
|
margin-bottom: 0.3rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-address {
|
|
|
|
|
font-size: 0.88rem;
|
|
|
|
|
color: #606266;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 悬浮div样式 */
|
|
|
|
|
.app-container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 19%;
|
|
|
|
|
left: 39%;
|
|
|
|
|
height: 17rem;
|
|
|
|
|
width: 18rem;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
z-index: 2000;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.close-btn {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 5px;
|
|
|
|
|
right: 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #909399;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.close-btn:hover {
|
|
|
|
|
color: #409EFF;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dialog-content {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dialog-title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
/* font-weight: bold; */
|
|
|
|
|
font-family: aliregular;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
border-bottom: 1px solid #EBEEF5;
|
|
|
|
|
/* background-color:#F5F7FA; */
|
|
|
|
|
color: #2B62F1;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dialog-info {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #606266;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dialog-info p {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.label {
|
|
|
|
|
color: #9E9E9E;
|
|
|
|
|
font-family: aliregular;
|
|
|
|
|
width: 3rem;
|
|
|
|
|
}
|
|
|
|
|
.value{
|
|
|
|
|
color: #3D424C;
|
|
|
|
|
font-family: aliregular;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
