|
|
|
@ -3,6 +3,7 @@
|
|
|
|
|
<div class="containertwo">
|
|
|
|
|
<!-- 地图区域 -->
|
|
|
|
|
<div class="mapareaone">
|
|
|
|
|
|
|
|
|
|
<!-- 展开/隐藏控制按钮(放在盒子右侧外部) -->
|
|
|
|
|
<div class="collapse-control" @click="toggleCollapse">
|
|
|
|
|
<img v-show="!isCollapsed" src="@/assets/images/icon-sq@2x.png" alt="隐藏" class="control-icon">
|
|
|
|
@ -16,6 +17,7 @@
|
|
|
|
|
<ProjectList />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 右侧搜索 -->
|
|
|
|
|
<div class="rightdiv">
|
|
|
|
|
<el-input v-model="searchBox" placeholder="请输入项目名称" class="search-input" @input="handleSearchInput"
|
|
|
|
@ -23,6 +25,7 @@
|
|
|
|
|
<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)">
|
|
|
|
@ -33,7 +36,6 @@
|
|
|
|
|
<!-- 右侧地图区域 -->
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
<div id="mars2dContainerSSS" class="mars2d-container"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -44,6 +46,7 @@
|
|
|
|
|
<i class="el-icon-close"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dialog-content">
|
|
|
|
|
<!-- @click="goToDetail ↓" -->
|
|
|
|
|
<div class="dialog-title">{{ selectedProject.name }}</div>
|
|
|
|
|
<div class="dialog-info">
|
|
|
|
|
<p><span class="label">状态:</span>
|
|
|
|
@ -67,10 +70,8 @@ import * as mars2d from 'mars2d';
|
|
|
|
|
import ProjectList from '@/views/components/analysis/projectList.vue'
|
|
|
|
|
import { getBasicInformationPage } from "@/api/ManageApi/index";
|
|
|
|
|
import { debounce } from 'lodash';
|
|
|
|
|
|
|
|
|
|
import suzhouData from '@/assets/json/suzhou.json'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 自定义指令
|
|
|
|
|
// 点击外部关闭弹窗
|
|
|
|
|
const clickOutside = {
|
|
|
|
@ -167,19 +168,27 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
/** 详情按钮操作 */
|
|
|
|
|
goToDetail() {
|
|
|
|
|
const id = this.selectedProject.id;
|
|
|
|
|
this.$store.commit("SET_CRUMBS", "项目详情");
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: `/manage-add/${id}`,
|
|
|
|
|
query: { action: 'detail' }
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 初始化地图
|
|
|
|
|
initMap() {
|
|
|
|
|
this.map = new mars2d.Map('mars2dContainerSSS', this.mapOptions);
|
|
|
|
|
this.map.on('load', this.onMapLoad);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onMapLoad() {
|
|
|
|
|
this.addSuzhouIndustrialParkLayer();
|
|
|
|
|
},
|
|
|
|
|
// 园区
|
|
|
|
|
async addSuzhouIndustrialParkLayer() {
|
|
|
|
|
try {
|
|
|
|
|
const geoJsonData = suzhouData; // 直接使用导入的数据
|
|
|
|
|
const geoJsonData = suzhouData;
|
|
|
|
|
const graphicLayer = new mars2d.layer.GraphicLayer({
|
|
|
|
|
name: "苏州园区高亮区域",
|
|
|
|
|
zIndex: 10
|
|
|
|
@ -463,6 +472,7 @@ export default {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dialog-info {
|
|
|
|
@ -505,7 +515,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
.map-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 25rem;
|
|
|
|
|
height: 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|