wangchengming/YouKeChuanMei_VUE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整媒体地图

Browse Source
This commit is contained in:
wangchengming 2025-09-24 21:01:04 +08:00
parent ed62b825cf
commit 3a56ef92d2
2 changed files with 216 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

313
src/views/mediaMap/index.vue
View File

@ -4,6 +4,10 @@
<div class="more-search-pane">
<div class="search-where-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchPanelForm">
<el-form-item label="媒体名称/编号:">
<el-input v-model="queryParams.keyword" placeholder="请输入媒体名称/编号" clearable
style="min-width: 30px" />
</el-form-item>
<el-form-item label="媒体类型:">
<el-select v-model="queryParams.mediaType" placeholder="请选择" @change="getMediaTypeTwo"
clearable style="min-width: 30px">
@ -27,8 +31,43 @@
</el-form-item>
</el-form>
</div>
<div class="search-more-button">
<el-button v-if="!unfoldFlag" text class="foladText" @click="handleFlod">展开
<svg-icon icon-class="unfold" class="ml10" />
</el-button>
<el-button v-else text class="foladText" @click="handleFlod">收起
<svg-icon icon-class="packUp" class="ml10" />
</el-button>
</div>
</div>
</div>
<div class="searchSmallPanel" v-show="unfoldFlag">
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchSmallPanelForm">
<el-form-item label="城市:">
<el-select v-model="queryParams.provinceCode" placeholder="请选择" @change="getCityList" clearable
style="min-width: 30px">
<el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="">
<el-select v-model="queryParams.cityCode" placeholder="请选择" @change="getCountyList" clearable
style="min-width: 30px">
<el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="">
<el-select v-model="queryParams.areaCode" placeholder="请选择" @change="getTownList" clearable
style="min-width: 30px">
<el-option v-for="item in county" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="">
<el-select v-model="queryParams.townCode" placeholder="请选择" clearable style="min-width: 30px">
<el-option v-for="item in town" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form>
</div>
<div class="choseResultPanel">
<el-form :inline="true" class="searchSmallPanelForm">
<el-form-item label="已选媒体:">
@ -44,20 +83,24 @@
</div>
<el-card class="mediaCard">
<el-row :gutter="10" class="my_row" style="padding: 0 20px;">
<el-col :span="12">
<el-col :span="8">
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchInputForm">
<el-form-item label="" prop="templateName">
<el-select class="filterSelect" v-model="centerPointName" filterable remote reserve-keyword
:remote-method="getLocaleListList" :loading="selectLoading" @change="currentSelect"
placeholder="请输入媒体名称/媒体编号/关键字" remote-show-suffix clearable style="width: 400px">
<el-option v-for="item in localeList" :key="item.mediaId" :label="item.mediaName"
:value="item.mediaId" class="one-text">
placeholder="请输入内容以设置热区" remote-show-suffix clearable style="width: 400px">
<el-option v-for="item in localeList" :key="item.id" :label="item.name" :value="item"
class="one-text">
<div style="height: 24px; line-height: 24px;font-size: 16px;">{{ item.name }}</div>
<div style="color: #8492a6; font-size: 12px;height: 18px; line-height: 18px;">{{
item.address
}}</div>
</el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-col :span="16" style="text-align: right;">
<el-dropdown placement="bottom-start">
<el-button type="primary" class="mediaMapBtn">距离：{{ distanceLable }}</el-button>
<template #dropdown>
@ -70,8 +113,7 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<div class="clearBtn" @click="resetQuery">清除条件</div>
<el-dropdown placement="bottom-start" style="margin: 0 12px;">
<el-dropdown placement="bottom-start" style="margin-left: 12px;">
<el-button type="primary" class="mediaMapExportBtn">
导出PPT
</el-button>
@ -86,10 +128,14 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<el-button type="primary" class="searchMapBtn" @click="handleQuery">查询</el-button>
<div class="clearBtn" @click="resetQuery">清除条件</div>
</el-col>
</el-row>
<div id="mapContainer" class="mediaMapContainer">
<div id="mapContainer" :class="unfoldFlag ? 'mediaMapContainerSmall' : 'mediaMapContainerLarge'">
</div>
<div v-if="contextMenuVisible" class="custom-context-menu" :style="menuPosition" @click="handleChoseMedia">
选择媒体
@ -225,6 +271,7 @@ import {
} from '@element-plus/icons-vue'
import AMapLoader from "@amap/amap-jsapi-loader"; // 引入地图服务
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
import { useBackgroundStore } from '@/store/modules/background'
import otherbg from '@/assets/images/otherbg.png'
import dragTool from '@/assets/images/dragTool.png'
@ -238,6 +285,11 @@ const bgStore = useBackgroundStore()
const { proxy } = getCurrentInstance()
const { apiKey, secretKey } = window._CONFIG
// 省、市、县、镇数据
const province = ref([])
const city = ref([])
const county = ref([])
const town = ref([])
// ppt模板数据
const templateList = ref([])
const exportPPTDialogRef = ref(null)
@ -248,7 +300,8 @@ const mediaTypeTwo = ref([])
const mediaTypeThree = ref([])
// 媒体多选数据
const multipleChoseArr = ref([])
// 是否折叠
const unfoldFlag = ref(false)
const open = ref(false)
const detailForm = ref({})
const fileList = ref([])
@ -290,6 +343,12 @@ const distanceLableArray = ref([
])
const points = ref([])
// 初始化变量用于存储极值
let minLng = Infinity; // 经度的最小值（最西边）
let minLat = Infinity; // 纬度的最小值（最南边）
let maxLng = -Infinity; // 经度的最大值（最东边）
let maxLat = -Infinity; // 纬度的最大值（最北边）
// 悬浮菜单
const contextMenuVisible = ref(false);
const menuPosition = ref({
@ -301,12 +360,13 @@ const curMediaInfo = ref(null)
const data = reactive({
queryParams: {
keyword: undefined, // 媒体名称关键字
x: undefined, //中心点经度
y: undefined, //中心点纬度
distance: undefined,
mediaType: undefined,
mediaCategory: undefined,
displayForm: undefined
displayForm: undefined,
provinceCode: undefined,
cityCode: undefined,
areaCode: undefined,
townCode: undefined,
}
})
const { queryParams } = toRefs(data)
@ -314,13 +374,14 @@ const { queryParams } = toRefs(data)
/** 清除条件操作 */
const resetQuery = () => {
queryParams.value = {
keyword: undefined, // 媒体名称关键字
x: undefined, //中心点经度
y: undefined, //中心点纬度
distance: undefined,
keyword: undefined, // 媒体名称关键字
mediaType: undefined,
mediaCategory: undefined,
displayForm: undefined
displayForm: undefined,
provinceCode: undefined,
cityCode: undefined,
areaCode: undefined,
townCode: undefined,
}
// 距离显示文本
distanceLable.value = '请选择'
@ -343,8 +404,13 @@ const resetQuery = () => {
circleHandle.value = null;
}
// 重新渲染数据点
renderMassMarks()
// 重新查询
handleQuery()
}
// 查询
const handleQuery = () => {
getMediaList()
}
// 获取媒体详情
@ -366,69 +432,56 @@ const handleViewMedia = (_mediaId) => {
const getLocaleListList = (searchValue) => {
selectLoading.value = true
if (searchValue !== "") {
queryParams.value.keyword = searchValue
mediaByMap(queryParams.value).then(res => {
if (res.code == 200) {
localeList.value = res.data.length > 0 ? res.data : []
selectLoading.value = false
placeSearch.value.search(searchValue, function (status, result) {
// 查询成功时，result即对应匹配的POI信息
if (result.poiList.pois?.length) {
localeList.value = result.poiList?.pois
}
})
// placeSearch.value.search(searchValue, function (status, result) {
// // 查询成功时，result即对应匹配的POI信息
// if (result.poiList.pois?.length) {
// localeList.value = result.poiList?.pois
// }
// selectLoading.value = false
// });
selectLoading.value = false
});
}
}
// 中心点选择
const currentSelect = (val) => {
const chosedMedia = localeList.value.filter(item => item.mediaId == val)[0]
if (chosedMedia) {
centerPointName.value = chosedMedia.mediaName
centerPointName.value = val.name
// 距离显示文本
distanceLable.value = circleRadius.value == 1000 ? '1000米' : circleRadius.value + '米'
// 选择的距离值
activeLableIndex.value = circleRadius.value == 1000 ? 1000 : circleRadius.value
// 距离显示文本
distanceLable.value = circleRadius.value == 1000 ? '1000米' : circleRadius.value + '米'
// 选择的距离值
activeLableIndex.value = circleRadius.value == 1000 ? 1000 : circleRadius.value
// 清除现有的圆形和标记
if (circle.value) {
mapInstance.value.remove(circle.value);
circle.value = null;
}
if (circleHandle.value) {
mapInstance.value.remove(circleHandle.value);
circleHandle.value = null;
}
// addCenterMark(chosedMedia)
createCircle(chosedMedia)
// 清除现有的圆形和标记
if (circle.value) {
mapInstance.value.remove(circle.value);
circle.value = null;
}
if (circleHandle.value) {
mapInstance.value.remove(circleHandle.value);
circleHandle.value = null;
}
addCenterMark(val)
createCircle(val)
}
// 创建中心点标记
const addCenterMark = (val) => {
if (centerMarker.value) mapInstance.value.remove(centerMarker.value);
centerMarker.value = new AMap.Marker({
position: [val.location.lng, val.location.lat],
title: val.name,
zIndex: 100,
draggable: false, // 是否可以拖拽
cursor: 'move'
});
// 将点添加到地图
mapInstance.value.add(centerMarker.value);
mapInstance.value.setFitView(centerMarker.value);
}
// // 创建中心点标记
// const addCenterMark = (val) => {
// if (centerMarker.value) mapInstance.value.remove(centerMarker.value);
// centerMarker.value = new AMap.Marker({
// position: [val.x, val.y],
// title: val.mediaName,
// zIndex: 100,
// draggable: false, // 是否可以拖拽
// cursor: 'move'
// });
// // 将点添加到地图
// mapInstance.value.add(centerMarker.value);
// mapInstance.value.setFitView(centerMarker.value);
// }
// 创建圆形热区
const createCircle = (val) => {
// 创建圆形覆盖物
circle.value = new AMap.Circle({
center: [val.x, val.y],
center: [val.location.lng, val.location.lat],
radius: circleRadius.value,
strokeColor: '#4e54c8',
strokeOpacity: 0.8,
@ -528,7 +581,6 @@ const calculateDistance = (point1, point2) => {
// 选择距离
const handleChangeDistance = (itemDistance) => {
queryParams.value.distance = itemDistance.value
activeLableIndex.value = itemDistance.value
distanceLable.value = itemDistance.value + '米'
// 更新热区
@ -587,7 +639,8 @@ const loadMap = () => {
hideContextMenu()
});
// 在地图完全加载后执行点数据处理
renderMassMarks();
// renderMassMarks();
getMediaList()
resolve();
@ -896,31 +949,8 @@ const renderMassMarks = () => {
size: new AMap.Size(18, 18)
},
];
// 初始化变量用于存储极值
let minLng = Infinity; // 经度的最小值（最西边）
let minLat = Infinity; // 纬度的最小值（最南边）
let maxLng = -Infinity; // 经度的最大值（最东边）
let maxLat = -Infinity; // 纬度的最大值（最北边）
// 调用接口，获取数据点
points.value = []
mediaByMap(queryParams.value).then(res => {
if (res.code == 200) {
res.data.forEach(itemPoint => {
if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, 'mediaName': itemPoint.mediaName, "style": 0 })
else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, 'mediaName': itemPoint.mediaName, "style": 1 })
// 同时更新极值
const lng = itemPoint.x;
const lat = itemPoint.y;
if (lng < minLng) minLng = lng;
if (lat < minLat) minLat = lat;
if (lng > maxLng) maxLng = lng;
if (lat > maxLat) maxLat = lat;
});
}
}).then(res => {
// 如果有点存在，则创建 MassMarks 实例
if (points.value.length > 0 && mapInstance.value) {
// 创建MassMarks对象
massMarks.value = new AMap.MassMarks(points.value, {
opacity: 1,
@ -954,7 +984,7 @@ const renderMassMarks = () => {
// 设置地图显示范围，会自动适配最佳视图
mapInstance.value.setBounds(bounds);
})
}
}
const showContextMenu = (pixel) => {
// 更新菜单位置跟随鼠标光标
@ -1019,6 +1049,36 @@ const getMediaTypeThree = (value) => {
mediaTypeThree.value = res.data
})
}
// 获取省/直辖市数据
const getProvinceList = () => {
sysRegionListByPid({ parentId: '0' }).then(res => {
province.value = res.data
})
}
// 获取地级市/区数据
const getCityList = (value) => {
sysRegionListByPid({ parentId: value }).then(res => {
queryParams.value.cityId = undefined
queryParams.value.countyId = undefined
queryParams.value.townId = undefined
city.value = res.data
})
}
// 获取区/县数据
const getCountyList = (value) => {
sysRegionListByPid({ parentId: value }).then(res => {
queryParams.value.countyId = undefined
queryParams.value.townId = undefined
county.value = res.data
})
}
// 获取镇数据
const getTownList = (value) => {
sysRegionListByPid({ parentId: value }).then(res => {
queryParams.value.townId = undefined
town.value = res.data
})
}
// 选择媒体事件
const handleChoseMedia = () => {
hideContextMenu()
@ -1027,11 +1087,42 @@ const handleChoseMedia = () => {
if (rowIndex == -1) multipleChoseArr.value.push({ id: curMediaInfo.value.mediaId, mediaName: curMediaInfo.value.mediaName })
}
}
// 折叠展开
const handleFlod = () => {
unfoldFlag.value = !unfoldFlag.value
// 重新加载地图
loadMap()
}
// 移除媒体选择项
const handleCloseTag = (tag) => {
const rowIndex = multipleChoseArr.value.findIndex(item => item.id == tag.id)
multipleChoseArr.value.splice(rowIndex, 1)
}
// 获取媒体数据
const getMediaList = () => {
points.value = []
mediaByMap(queryParams.value).then(res => {
if (res.code == 200) {
res.data.forEach(itemPoint => {
if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, 'mediaName': itemPoint.mediaName, "style": 0 })
else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, 'mediaName': itemPoint.mediaName, "style": 1 })
// 同时更新极值
const lng = itemPoint.x;
const lat = itemPoint.y;
if (lng < minLng) minLng = lng;
if (lat < minLat) minLat = lat;
if (lng > maxLng) maxLng = lng;
if (lat > maxLat) maxLat = lat;
});
}
}).then(res => {
// 在地图完全加载后执行点数据处理
renderMassMarks();
})
}
onUnmounted(() => {
stopActiveTool()
if (mapInstance.value) {
@ -1042,6 +1133,7 @@ onUnmounted(() => {
onMounted(() => {
bgStore.setBgImage(otherbg)
getMediaTypeOne()
getProvinceList()
getpptTemplatePageList()
loadMap()
});
@ -1075,6 +1167,19 @@ onMounted(() => {
background: #1a75e6;
}
.searchMapBtn {
height: 34px;
border-radius: 4px;
background: #1a75e6;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
text-align: left;
color: #FFFFFF;
padding: 10px;
margin-left: 12px;
margin-top: -4px;
}
.mediaMapExportBtn {
// min-width: 122px;
@ -1163,12 +1268,19 @@ onMounted(() => {
background-repeat: no-repeat;
}
.mediaMapContainer {
.mediaMapContainerLarge {
width: 100%;
height: calc(100vh - 256px);
background: #3f8bff;
}
.mediaMapContainerSmall {
width: 100%;
height: calc(100vh - 290px);
background: #3f8bff;
}
.custom-map-controls {
position: absolute;
top: 5px;
@ -1317,6 +1429,11 @@ onMounted(() => {
height: 100% !important;
}
.one-text {
height: 50px;
padding-top: 4px;
}
// 分割线
.splineBar {
width: 100%;

2
src/views/outdoorMedia/index.vue
View File

@ -845,12 +845,12 @@ onUnmounted(() => {
// 初始化
onMounted(() => {
bgStore.setBgImage(otherbg)
loadMap()
// 获取模板id
getpptTemplatePageList()
getOutMediaPageList()
getMediaTypeOne()
getProvinceList()
loadMap()
});
</script>