From 3a56ef92d22738f79288d53b316d87bc85cec2c3 Mon Sep 17 00:00:00 2001 From: wangchengming <15110151257@163.com> Date: Wed, 24 Sep 2025 21:01:04 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=AA=92=E4=BD=93=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/mediaMap/index.vue | 313 +++++++++++++++++++++---------- src/views/outdoorMedia/index.vue | 2 +- 2 files changed, 216 insertions(+), 99 deletions(-) diff --git a/src/views/mediaMap/index.vue b/src/views/mediaMap/index.vue index 86ecc58..9ce7a22 100644 --- a/src/views/mediaMap/index.vue +++ b/src/views/mediaMap/index.vue @@ -4,6 +4,10 @@
+ + + @@ -27,8 +31,43 @@
+
+ 展开 + + + 收起 + + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
@@ -44,20 +83,24 @@
- + - + placeholder="请输入内容以设置热区" remote-show-suffix clearable style="width: 400px"> + +
{{ item.name }}
+
{{ + item.address + }}
 - + 距离：{{ distanceLable }} -
清除条件
- + 导出PPT @@ -86,10 +128,14 @@ + 查询 +
清除条件
+ + -
+
选择媒体 @@ -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%; diff --git a/src/views/outdoorMedia/index.vue b/src/views/outdoorMedia/index.vue index 1bdd617..b80fd07 100644 --- a/src/views/outdoorMedia/index.vue +++ b/src/views/outdoorMedia/index.vue @@ -845,12 +845,12 @@ onUnmounted(() => { // 初始化 onMounted(() => { bgStore.setBgImage(otherbg) + loadMap() // 获取模板id getpptTemplatePageList() getOutMediaPageList() getMediaTypeOne() getProvinceList() - loadMap() });