From 284de71a0ff93704b5473c48fcb48dc9646541c7 Mon Sep 17 00:00:00 2001
From: wangchengming <15110151257@163.com>
Date: Thu, 11 Sep 2025 22:54:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/mediaLibrary.js | 12 ++-
src/layout/components/Navbar.vue | 3 +-
src/views/mediaLibrary/mediaLogs.vue | 6 +-
src/views/mediaMap/index.vue | 120 ++++++++++-----------------
4 files changed, 61 insertions(+), 80 deletions(-)
diff --git a/src/api/mediaLibrary.js b/src/api/mediaLibrary.js
index 2acdb92..b324787 100644
--- a/src/api/mediaLibrary.js
+++ b/src/api/mediaLibrary.js
@@ -104,7 +104,8 @@ export function exportMediaPPT(query) {
url: '/media/export/dynamic/ppt',
method: 'post',
data: query,
- responseType: 'blob'
+ responseType: 'blob',
+ timeout: 300000, // 300秒 = 5分钟，根据文件大小调整
})
}
@@ -124,4 +125,13 @@ export function mediaFiles(query) {
method: 'get',
params: query
})
+}
+
+// 地图获取媒体
+export function mediaByMap(query) {
+ return request({
+ url: '/media/getMap',
+ method: 'get',
+ params: query
+ })
}
\ No newline at end of file
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index d36b075..286596b 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -166,8 +166,7 @@ const submitForm = () => {
}
.topmenu-container {
- flex: 1; // 占据剩余空间
- padding-left: 284px; // 替代原来的padding-left
+ flex: 0 1 auto; // 占据剩余空间 并居中
}
.right-menu {
diff --git a/src/views/mediaLibrary/mediaLogs.vue b/src/views/mediaLibrary/mediaLogs.vue
index 591d452..7f6ff86 100644
--- a/src/views/mediaLibrary/mediaLogs.vue
+++ b/src/views/mediaLibrary/mediaLogs.vue
@@ -48,7 +48,7 @@
-
+
@@ -72,7 +72,7 @@
- {{ scope.row.changeAfter }}
+ {{ scope.row.changeAfterDifferDesc }}
@@ -116,7 +116,7 @@
- {{ activity.changeAfter }}
+ {{ activity.changeAfterDifferDesc }}
diff --git a/src/views/mediaMap/index.vue b/src/views/mediaMap/index.vue
index 21adc18..5d00c85 100644
--- a/src/views/mediaMap/index.vue
+++ b/src/views/mediaMap/index.vue
@@ -23,7 +23,7 @@
- 清除条件
+ 清除条件
@@ -40,6 +40,9 @@ import AMapLoader from "@amap/amap-jsapi-loader"; // 引入地图服务
import { useBackgroundStore } from '@/store/modules/background'
import otherbg from '@/assets/images/otherbg.png'
+import { mediaByMap } from "@/api/mediaLibrary"
+import { rAF } from 'element-plus/es/utils/raf.mjs';
+
const bgStore = useBackgroundStore()
const { proxy } = getCurrentInstance()
@@ -47,27 +50,35 @@ const { apiKey, secretKey } = window._CONFIG
// 距离显示文本
const distanceLable = ref('请选择')
-const distanceLableArray = ref([
- { label: '1公里内', value: 1 },
- { label: '2公里内', value: 2 },
- { label: '3公里内', value: 3 },
- { label: '5公里内', value: 5 }
-])
+// 选择的距离值
const activeLableIndex = ref(null)
+const distanceLableArray = ref([
+ { label: '1公里内', value: 1000 },
+ { label: '2公里内', value: 2000 },
+ { label: '3公里内', value: 3000 },
+ { label: '5公里内', value: 5000 }
+])
+const points = ref([])
const data = reactive({
queryParams: {
keyword: undefined,
+ x: undefined, //中心点经度
+ y: undefined, //中心点纬度
distance: undefined,
}
})
const { queryParams } = toRefs(data)
-
/** 清除条件操作 */
const resetQuery = () => {
- proxy.resetForm("queryRef")
+ queryParams.value = {
+ keyword: undefined,
+ x: undefined, //中心点经度
+ y: undefined, //中心点纬度
+ distance: undefined,
+ }
handleQuery()
}
@@ -78,8 +89,6 @@ const handleChangeDistance = (itemDistance) => {
distanceLable.value = itemDistance.label
}
-
-
// map实例
const mapInstance = ref(null)
const massMarks = ref(null)
@@ -109,7 +118,7 @@ const loadMap = () => {
mapInstance.value = new AMap.Map("mapContainer", {
resizeEnable: true,
zoom: 14,
- center: [116.397428, 39.90923],
+ center: [116.397428, 39.90923], // 默认中心点
pitch: initialPitch, // 倾斜角度决定2D/3D模式
rotation: initialRotation, // 旋转角度
buildingAnimation: true,
@@ -165,7 +174,6 @@ const addCustomControls = (AMap) => {
// 添加到地图容器
document.getElementById('mapContainer').appendChild(controlContainer);
}
-
// 切换2D/3D模式
const toggle2D3DMode = () => {
if (!mapInstance.value) return;
@@ -186,7 +194,6 @@ const toggle2D3DMode = () => {
loadMap()
}
}
-
// 切换全屏模式
const toggleFullscreen = () => {
const mapContainer = document.getElementById('mapContainer');
@@ -213,14 +220,12 @@ const toggleFullscreen = () => {
}
}
}
-
// 监听全屏变化事件
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
isFullscreen.value = false;
}
});
-
// 创建自定义点样式
const createPointStyle = (color, size, styleType) => {
const canvas = document.createElement('canvas');
@@ -297,68 +302,35 @@ const renderMassMarks = () => {
anchor: new AMap.Pixel(18, 18),
size: new AMap.Size(18, 18)
},
- // {
- // url: createPointStyle('#FFA200', 18, 'circle').toDataURL(),
- // anchor: new AMap.Pixel(18, 18),
- // size: new AMap.Size(18, 18)
- // },
- // {
- // url: createPointStyle('#00C272', 18, 'circle').toDataURL(),
- // anchor: new AMap.Pixel(18, 18),
- // size: new AMap.Size(18, 18)
- // }
];
+ // 调用接口，获取数据点
+ points.value = []
+ mediaByMap(queryParams.value).then(res => {
+ if (res.code == 200) {
+ res.data.forEach(itemPoint => {
+ if (itemPoint.businessType == 1) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "name": itemPoint.mediaId, "style": 0 })
+ if (itemPoint.businessType == 2) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "name": itemPoint.mediaId, "style": 1 })
+ });
+ }
+ }).then(res => {
+ console.log('points', points.value)
+ // 创建MassMarks对象
+ massMarks.value = new AMap.MassMarks(points.value, {
+ opacity: 1,
+ zIndex: 111,
+ cursor: 'pointer',
+ style: styles
+ });
- // 测试数据
- const points = [
- { "lnglat": [116.258446, 37.686622], "name": "景县", "style": 1 },
- { "lnglat": [113.559954, 22.124049], "name": "圣方济各堂区", "style": 1 },
- { "lnglat": [116.366794, 39.915309], "name": "西城区", "style": 1 },
- { "lnglat": [116.486409, 39.921489], "name": "朝阳区", "style": 1 },
- { "lnglat": [116.286968, 39.863642], "name": "丰台区", "style": 1 },
- { "lnglat": [116.195445, 39.914601], "name": "石景山区", "style": 1 },
- { "lnglat": [116.310316, 39.956074], "name": "海淀区", "style": 1 },
- { "lnglat": [116.105381, 39.937183], "name": "门头沟区", "style": 0 },
- { "lnglat": [116.139157, 39.735535], "name": "房山区", "style": 0 },
- { "lnglat": [116.658603, 39.902486], "name": "通州区", "style": 0 },
- { "lnglat": [116.653525, 40.128936], "name": "顺义区", "style": 0 },
- { "lnglat": [116.235906, 40.218085], "name": "昌平区", "style": 0 },
- { "lnglat": [116.338033, 39.728908], "name": "大兴区", "style": 0 },
- { "lnglat": [116.637122, 40.324272], "name": "怀柔区", "style": 0 },
- { "lnglat": [117.112335, 40.144783], "name": "平谷区", "style": 0 },
- { "lnglat": [116.843352, 40.377362], "name": "密云区", "style": 0 },
- { "lnglat": [115.985006, 40.465325], "name": "延庆区", "style": 1 },
- { "lnglat": [113.56925, 22.136546], "name": "路凼填海区", "style": 1 },
- { "lnglat": [117.195907, 39.118327], "name": "和平区", "style": 1 },
- { "lnglat": [117.226568, 39.122125], "name": "河东区", "style": 1 },
- { "lnglat": [117.217536, 39.101897], "name": "河西区", "style": 1 },
- { "lnglat": [117.164143, 39.120474], "name": "南开区", "style": 1 },
- { "lnglat": [117.201569, 39.156632], "name": "河北区", "style": 0 },
- { "lnglat": [117.163301, 39.175066], "name": "红桥区", "style": 1 },
- { "lnglat": [117.313967, 39.087764], "name": "东丽区", "style": 0 },
- { "lnglat": [117.012247, 39.139446], "name": "西青区", "style": 0 },
- { "lnglat": [117.382549, 38.989577], "name": "津南区", "style": 0 },
- { "lnglat": [117.13482, 39.225555], "name": "北辰区", "style": 0 },
- { "lnglat": [117.057959, 39.376925], "name": "武清区", "style": 0 },
- { "lnglat": [116.405285, 39.904989], "name": "北京市", "style": 0 }
- ]
- // 创建MassMarks对象
- massMarks.value = new AMap.MassMarks(points, {
- opacity: 1,
- zIndex: 111,
- cursor: 'pointer',
- style: styles
- });
+ // 将海量点添加到地图
+ massMarks.value.setMap(mapInstance.value);
- // 将海量点添加到地图
- massMarks.value.setMap(mapInstance.value);
-
- // 添加点击事件
- massMarks.value.on('click', function (e) {
- console.log('点击了节点', e.data)
- });
+ // 添加点击事件
+ massMarks.value.on('click', function (e) {
+ console.log('点击了节点', e.data)
+ });
+ })
}
-
// 隐藏Logo的函数
const hideAmapLogo = () => {
const logos = document.querySelectorAll('.amap-logo, .amap-copyright');