suzhou-jichuang-lanhai
/
Gyyq-Upstairs
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

地图

Browse Source
xuhongjie
严飞永 1 week ago
parent 631fc9dad2
commit 168b982ca8
7 changed files with 148 additions and 109 deletions
Show Stats Download Patch File Download Diff File

2
.env.production
Unescape View File

@ -5,4 +5,4 @@ VUE_APP_TITLE = 苏州工业园区工业上楼管理系统
ENV = 'production' ENV = 'production'
# 苏州工业园区工业上楼管理系统/生产环境 # 苏州工业园区工业上楼管理系统/生产环境
# VUE_APP_BASE_API = 'http://39.101.188.84:7071' VUE_APP_BASE_API = 'http://39.101.188.84:7071'

17
src/views/components/ProjectDetails/Basic.vue
Unescape View File

@ -13,7 +13,7 @@
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;"> style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑 编辑
</el-button> </el-button>
<el-button type="primary" size="medium" plain v-if="checkRole(['admin', 'common'])" <el-button type="primary" size="medium" plain v-if="checkRole(['admin', 'common'])"
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleExport"> style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleExport">
<img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" <img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;"> style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
@ -52,7 +52,7 @@
<el-form-item label="建设地点" prop="jsdd"> <el-form-item label="建设地点" prop="jsdd">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="20"> <el-col :span="20">
<el-input v-model="form.jsdd" maxlength="50"></el-input> <el-input v-model="form.jsdd" maxlength="50" readonly></el-input>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<span @click="showMap" style="color: #2B62F1;cursor: pointer;">落图</span> <span @click="showMap" style="color: #2B62F1;cursor: pointer;">落图</span>
@ -209,9 +209,8 @@
</span> </span>
</el-dialog> </el-dialog>
<!-- 地图弹窗 --> <!-- 地图弹窗 -->
<el-dialog :title="mapDialogTitle" :visible.sync="mapDialogVisible" width="1000px" height="1000px" <el-dialog :title="mapDialogTitle" :visible.sync="mapDialogVisible" width="1000px" append-to-body>
style="height: 1000;" append-to-body> <luotu v-if="mapDialogVisible" @confirm-selection="handleMapConfirm" />
<luotu v-if="mapDialogVisible" />
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -277,6 +276,7 @@ export default {
introduction: '', introduction: '',
fj: '', fj: '',
jsjd: '', jsjd: '',
}, },
rules: { rules: {
name: [ name: [
@ -363,6 +363,13 @@ export default {
methods: { methods: {
checkPermi, checkPermi,
checkRole, checkRole,
// 添加处理地图选择的方法
handleMapConfirm(location) {
this.form.jsdd = location.address; // 设置建设地点
this.form.lng = location.lng; // 设置经度
this.form.lat = location.lat; // 设置纬度
this.mapDialogVisible = false; // 关闭地图弹窗
},
/** 导出按钮操作 */ /** 导出按钮操作 */
handleExport() { handleExport() {
this.download('/gysl/basicInformation/export', { this.download('/gysl/basicInformation/export', {

28
src/views/components/ProjectDetails/Projectpicturetwo.vue
Unescape View File

@ -2,27 +2,13 @@
<div class="container"> <div class="container">
<!-- 搜索框 --> <!-- 搜索框 -->
<div class="search-container"> <div class="search-container">
<el-input <el-input v-model="keyword" placeholder="请输入地点名称" class="search-input" @keyup.enter.native="toSearch"
v-model="keyword" @input="handleInput">
placeholder="请输入地点名称" <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
class="search-input"
@keyup.enter.native="toSearch"
@input="handleInput"
>
<el-button
slot="append"
icon="el-icon-search"
@click="toSearch"
></el-button>
</el-input> </el-input>
<!-- 搜索结果列表 --> <!-- 搜索结果列表 -->
<div class="search-results" v-if="searchBox && searchList.length > 0"> <div class="search-results" v-if="searchBox && searchList.length > 0">
<div <div class="search-item" v-for="(item, index) in searchList" :key="index" @click="centerMap(item)">
class="search-item"
v-for="(item, index) in searchList"
:key="index"
@click="centerMap(item)"
>
<div class="item-name">{{ item.name }}</div> <div class="item-name">{{ item.name }}</div>
<div class="item-address">{{ item.address }}</div> <div class="item-address">{{ item.address }}</div>
</div> </div>
@ -54,6 +40,7 @@ export default {
basemaps: [ basemaps: [
{ {
id: 2021, id: 2021,
chinaCRS: "GCJ02",
pid: 10, pid: 10,
name: "高德电子", name: "高德电子",
icon: "img/basemaps/gaode_vec.png", icon: "img/basemaps/gaode_vec.png",
@ -62,6 +49,9 @@ export default {
show: true show: true
} }
], ],
center: { lat: 31.2304, lng: 120.6184 },
zoom: 10,
chinaCRS: 'GCJ02',
center: { lat: 31.3256, lng: 120.7457 }, center: { lat: 31.3256, lng: 120.7457 },
zoom: 16, zoom: 16,
minZoom: 15, minZoom: 15,
@ -139,7 +129,7 @@ export default {
// 定位到搜索结果 // 定位到搜索结果
centerMap(item) { centerMap(item) {
const [lng, lat] = item.location.split(',').map(Number); const [lng, lat] = item.location.split(',').map(Number);
// 更新输入框的值 // 更新输入框的值
this.keyword = item.name; this.keyword = item.name;

74
src/views/components/ProjectDetails/luotu.vue
Unescape View File

@ -41,6 +41,7 @@ import axios from 'axios';
const attributionHtml = `©2024 高德软件- <span>审图号：GS(2021)6375号</span> const attributionHtml = `©2024 高德软件- <span>审图号：GS(2021)6375号</span>
- 甲测资字11111093 - <a href="https://map.amap.com/doc/serviceitem.html" target="_blank" trace="tos">服务条款</a> ` - 甲测资字11111093 - <a href="https://map.amap.com/doc/serviceitem.html" target="_blank" trace="tos">服务条款</a> `
export default { export default {
data() { data() {
const basePathUrl = window.basePathUrl || ""; const basePathUrl = window.basePathUrl || "";
@ -48,53 +49,21 @@ export default {
configUrl: basePathUrl + "config/config.json", configUrl: basePathUrl + "config/config.json",
mapOptions: { mapOptions: {
copyright: false, copyright: false,
// basemaps: [
// {
// id: 2021,
// pid: 10,
// name: "高德电子",
// icon: "img/basemaps/gaode_vec.png",
// type: "gaode",
// layer: "vec",
// show: true
// }
// ],
basemaps: [ basemaps: [
{ {
name: "高德地图", id: 2021,
chinaCRS: "GCJ02",
pid: 10,
name: "高德电子",
icon: "img/basemaps/gaode_vec.png",
type: "gaode", type: "gaode",
layer: "vec", layer: "vec",
show: true, show: true
// maxZoom: 21,
// maxNativeZoom: 18,
attribution: attributionHtml
},
{
name: "高德卫星",
type: "group",
layers: [
{
type: "gaode",
layer: "img_d"
},
{
type: "gaode",
layer: "img_z"
}
],
attribution: attributionHtml
},
{
name: "高德大字体地图",
type: "gaode",
layer: "vec",
bigfont: true,
attribution: attributionHtml
} }
], ],
center: { lat: 31.2304, lng: 120.6184 }, center: { lat: 31.2304, lng: 120.6184 },
zoom: 10, zoom: 10,
CRS: "BAIDU" chinaCRS: 'GCJ02'
}, },
map: null, map: null,
floatingPanelVisible: false, floatingPanelVisible: false,
@ -149,15 +118,21 @@ export default {
}, },
confirmPoint() { confirmPoint() {
if (this.pointForm.name) { if (!this.pointForm.address) {
this.selectedPlaceName = this.pointForm.name; this.$message.warning('请先落点选择地址');
} else if (this.pointForm.address) { return;
this.selectedPlaceName = this.pointForm.address;
} }
// 通知父组件关闭弹窗并传递地址信息
this.$emit('confirm-selection', {
address: this.pointForm.address,
lng: this.pointForm.lng,
lat: this.pointForm.lat
});
this.hideFloatingPanel(); this.hideFloatingPanel();
this.$message.success('地点选择成功'); this.$message.success('地点选择成功');
}, },
// 逆地理编码 - 根据经纬度获取地址 // 逆地理编码 - 根据经纬度获取地址
reverseGeocode() { reverseGeocode() {
if (!this.pointForm.lat || !this.pointForm.lng) return; if (!this.pointForm.lat || !this.pointForm.lng) return;
@ -187,7 +162,10 @@ export default {
} else { } else {
this.$message.warning('未能获取详细地址信息'); this.$message.warning('未能获取详细地址信息');
} }
}).catch().finally(() => { }).catch(error => {
console.error('逆地理编码失败:', error);
this.$message.error('获取地址信息失败');
}).finally(() => {
this.loadingAddress = false; this.loadingAddress = false;
}); });
}, },
@ -202,12 +180,6 @@ export default {
}, },
toSearch() { toSearch() {
if (!this.keyword.trim()) {
this.$message({
});
return;
}
let params = { let params = {
key: this.gaodeKey, key: this.gaodeKey,
keywords: this.keyword, keywords: this.keyword,

89
src/views/components/analysis/map.vue
Unescape View File

@ -1,28 +1,59 @@
<template> <template>
<div class="container"> <div class="container">
<div class="containertwo"> <div class="containertwo">
<!-- 地图 --> <!-- 地图区域 -->
<div class="mapareaone"> <div class="mapareaone">
<div class="leftdiv"> <!-- 展开/隐藏控制按钮（放在盒子右侧外部） -->
<!-- 项目列表 --> <div class="collapse-control" @click="toggleCollapse">
<div class="mainarea"> <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">
<!-- 项目列表内容 -->
<div class="mainarea" style="background-color: #FFFFFF;">
<ProjectList /> <ProjectList />
</div> </div>
</div> </div>
<!-- 蓝色图标区域 -->
<div class="blueicon"></div> <div class="blueicon"></div>
</div> </div>
<div class="leftarea">
</div> <div class="leftarea"></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ProjectList from '@/views/components/analysis/projectList.vue' import ProjectList from '@/views/components/analysis/projectList.vue'
export default { export default {
components: { components: {
ProjectList, ProjectList,
}, },
data() {
return {
isCollapsed: false, // 控制是否折叠的状态
}
},
methods: {
toggleCollapse() {
this.isCollapsed = !this.isCollapsed;
}
}
} }
</script> </script>
@ -31,12 +62,8 @@ export default {
position: relative; position: relative;
} }
.leftdiv { .containertwo {
width: 35%; position: relative;
height: 24rem;
/* background-color: #fff; */
padding: 1rem;
position: absolute;
} }
.mapareaone { .mapareaone {
@ -46,6 +73,44 @@ export default {
position: relative; position: relative;
} }
/* 控制按钮样式 */
.collapse-control {
position: absolute;
left:-1.5rem;
top: 12.5rem;
width: auto;
height: 2rem;
border-radius: 0 4px 4px 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
transition: all 0.3s ease;
}
.control-icon {
width: 3.5rem;
height: 3.5rem;
}
.leftdiv {
width: 36%;
height: 27rem;
position: absolute;
left: 0rem;
top: 0rem;
background: #FFFFFF;
border-radius: 0.5rem;
transition: all 0.3s ease;
z-index: 10;
}
.mainarea {
height: 100%;
overflow: auto;
}
.blueicon { .blueicon {
width: 20rem; width: 20rem;
height: 20rem; height: 20rem;

43
src/views/components/analysis/projectList.vue
Unescape View File

@ -12,37 +12,38 @@
<!-- 第一行内容 --> <!-- 第一行内容 -->
<div class="card-row"> <div class="card-row">
<div class="card-item"> <div class="card-item">
<span class="label">状态：</span> <span class="label">状态</span>
<span class="value" :style="{ color: xzflColors[xzflMap[item.xzfl]] }"> <span class="value" :style="{ color: xzflColors[xzflMap[item.xzfl]] }">
{{ xzflMap[item.xzfl] }} {{ xzflMap[item.xzfl] }}
</span> </span>
</div> </div>
<div class="card-item"> <div class="card-item">
<span class="label">总投资额：</span> <span class="label">总投资额</span>
<span class="value">{{ item.ztze }} 万元</span> <span class="value">{{ item.ztze || 0 }} 万元</span>
</div> </div>
<div class="card-item"> <div class="card-item">
<span class="label">总用地面积：</span> <span class="label">建筑面积</span>
<span class="value">{{ item.zydmj }} 平方米</span> <span class="value">{{ item.zydmj || 0 }} 平方米</span>
</div> </div>
</div> </div>
<!-- 第二行内容 --> <!-- 第二行内容 -->
<div class="card-row"> <div class="card-row">
<div class="card-item"> <div class="card-item">
<span class="label">所在区域：</span> <span class="label">所在区域</span>
<span class="value">{{ ssgnqMap[item.ssgnq] }}</span> <span class="value">{{ ssgnqMap[item.ssgnq] }}</span>
</div> </div>
<div class="card-item"> <div class="card-item">
<span class="label">联系人：</span> <span class="label">联系人</span>
<span class="value">{{ item.projectLeader }}</span> <span class="value">{{ item.projectLeader }}</span>
</div> </div>
<div class="card-item"> <div class="card-item">
<span class="label">联系方式：</span> <span class="label">联系方式</span>
<span class="value">{{ item.phone }}</span> <span class="value">{{ item.phone }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="project-name" style="width: 100%;text-align: right;" @click="getInfotwo()"><span>查看更多</span></div>
</div> </div>
</div> </div>
</template> </template>
@ -96,7 +97,7 @@ export default {
xzfl: '', xzfl: '',
name: '', name: '',
xmfrdwxz: '', xmfrdwxz: '',
dateRange: '', // 日期范围 dateRange: '',
status: '' status: ''
}, },
}; };
@ -142,28 +143,28 @@ export default {
const id = row.id || this.ids[0]; const id = row.id || this.ids[0];
this.$router.push({ path: `/manage-add/${id}`, query: { action: type } }); this.$router.push({ path: `/manage-add/${id}`, query: { action: type } });
}, },
getInfotwo() {
this.$router.push({ path: `/manage` });
},
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.card-container {
padding: 0.5rem;
}
.card-wrapper { .card-wrapper {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1rem; gap: 1rem;
background-color: #fff; /* background-color: #fff; */
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1rem; height: 26rem;
padding: .5rem;
} }
.project-card { .project-card {
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1rem; padding: 1rem 1rem 0 1rem;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
transition: all 0.3s; transition: all 0.3s;
} }
@ -182,7 +183,7 @@ export default {
color: #2B62F1; color: #2B62F1;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
font-size: 1.1rem; font-size: 0.8rem;
} }
.project-name:hover { .project-name:hover {
@ -198,15 +199,19 @@ export default {
.card-item { .card-item {
flex: 1; flex: 1;
padding: 0 0.5rem; padding: 0 0.5rem;
display: flex;
flex-direction: column;
gap: .3rem;
margin-bottom: 0.5rem;
} }
.label { .label {
color: #909399; color: #909399;
font-size: 0.9rem; font-size: 0.8rem;
} }
.value { .value {
color: #606266; color: #606266;
font-size: 0.95rem; font-size: 0.8rem;
} }
</style> </style>

4
vue.config.js
Unescape View File

@ -37,8 +37,8 @@ module.exports = {
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
target: `http://192.168.0.107:7071/`, // target: `http://192.168.0.107:7071/`,
// target: `http://39.101.188.84:7071/`, target: `http://39.101.188.84:7071/`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ['^' + process.env.VUE_APP_BASE_API]: ''

Write Preview
Loading…
Cancel
Save