提交代码

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分钟，根据文件大小调整
   })
 }
 
@@ -125,3 +126,12 @@ export function mediaFiles(query) {
     params: query
   })
 }
+
+// 地图获取媒体
+export function mediaByMap(query) {
+  return request({
+    url: '/media/getMap',
+    method: 'get',
+    params: query
+  })
+}

src/layout/components/Navbar.vue

@@ -166,8 +166,7 @@ const submitForm = () => {
   }
 
   .topmenu-container {
-    flex: 1; // 占据剩余空间
+    flex: 0 1 auto; // 占据剩余空间 并居中 
-    padding-left: 284px; // 替代原来的padding-left 
   }
 
   .right-menu {

src/views/mediaLibrary/mediaLogs.vue

@@ -48,7 +48,7 @@
             </el-table-column>
             <el-table-column label="操作人" align="center" prop="createBy" width="160" :show-overflow-tooltip="true" />
             <el-table-column label="操作时间" align="center" prop="createTime" width="210" :show-overflow-tooltip="true" />
-            <el-table-column label="变更字段" align="left" prop="changeAfter" min-width="210">
+            <el-table-column label="变更字段" align="left" prop="changeAfterDifferDesc" min-width="210">
                 <template #default="scope">
                     <el-popover popper-class="myUpdate_popover" placement="bottom-start">
                         <el-table :data="JSON.parse(scope.row.changeAfterDiffer)" height="230px">
@@ -72,7 +72,7 @@
                             </el-table-column>
                         </el-table>
                         <template #reference>
-                            <span class="updatefiter">{{ scope.row.changeAfter }}</span>
+                            <span class="updatefiter">{{ scope.row.changeAfterDifferDesc }}</span>
                         </template>
                     </el-popover>
                 </template>
@@ -116,7 +116,7 @@
                                         </el-table-column>
                                     </el-table>
                                     <template #reference>
-                                        <span class="updatefiter">{{ activity.changeAfter }}</span>
+                                        <span class="updatefiter">{{ activity.changeAfterDifferDesc }}</span>
                                     </template>
                                 </el-popover>
 

src/views/mediaMap/index.vue

@@ -23,7 +23,7 @@
                             </el-dropdown-menu>
                         </template>
                     </el-dropdown>
-                    <div class="clearBtn">清除条件</div>
+                    <div class="clearBtn" @click="resetQuery">清除条件</div>
                 </el-col>
             </el-row>
 
@@ -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 = [
+        massMarks.value.setMap(mapInstance.value);
-        { "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.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');