调整媒体地图

src/views/mediaMap/index.vue

@@ -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">
+                                placeholder="请输入内容以设置热区" remote-show-suffix clearable style="width: 400px">
-                                <el-option v-for="item in localeList" :key="item.mediaId" :label="item.mediaName"
+                                <el-option v-for="item in localeList" :key="item.id" :label="item.name" :value="item"
-                                    :value="item.mediaId" class="one-text">
+                                    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-left: 12px;">
-                    <el-dropdown placement="bottom-start" style="margin: 0 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, // 媒体名称关键字
+        keyword: undefined, // 媒体名称关键字 
-        x: undefined, //中心点经度
-        y: undefined, //中心点纬度
-        distance: 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
+        placeSearch.value.search(searchValue, function (status, result) {
-        mediaByMap(queryParams.value).then(res => {
+            // 查询成功时，result即对应匹配的POI信息 
-            if (res.code == 200) {
+            if (result.poiList.pois?.length) {
-                localeList.value = res.data.length > 0 ? res.data : []
+                localeList.value = result.poiList?.pois
-                selectLoading.value = false
             }
-        })
+            selectLoading.value = false
-
+        });
-        // placeSearch.value.search(searchValue, function (status, result) {
-        //     // 查询成功时，result即对应匹配的POI信息 
-        //     if (result.poiList.pois?.length) {
-        //         localeList.value = result.poiList?.pois
-        //     }
-        //     selectLoading.value = false
-        // });
     }
 }
 // 中心点选择
 const currentSelect = (val) => {
-    const chosedMedia = localeList.value.filter(item => item.mediaId == val)[0]
+    centerPointName.value = val.name
-    if (chosedMedia) {
-        centerPointName.value = chosedMedia.mediaName
 
-        // 距离显示文本
+    // 距离显示文本
-        distanceLable.value = circleRadius.value == 1000 ? '1000米' : circleRadius.value + '米'
+    distanceLable.value = circleRadius.value == 1000 ? '1000米' : circleRadius.value + '米'
-        // 选择的距离值
+    // 选择的距离值
-        activeLableIndex.value = circleRadius.value == 1000 ? 1000 : circleRadius.value
+    activeLableIndex.value = circleRadius.value == 1000 ? 1000 : circleRadius.value
 
-        // 清除现有的圆形和标记
+    // 清除现有的圆形和标记
-        if (circle.value) {
+    if (circle.value) {
-            mapInstance.value.remove(circle.value);
+        mapInstance.value.remove(circle.value);
-            circle.value = null;
+        circle.value = null;
-        }
+    }
-        if (circleHandle.value) {
+    if (circleHandle.value) {
-            mapInstance.value.remove(circleHandle.value);
+        mapInstance.value.remove(circleHandle.value);
-            circleHandle.value = null;
+        circleHandle.value = null;
-        }
-
-        // addCenterMark(chosedMedia)
-        createCircle(chosedMedia)
     }
 
-
+    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)
         },
     ];
-
+    // 如果有点存在，则创建 MassMarks 实例
-    // 初始化变量用于存储极值
+    if (points.value.length > 0 && mapInstance.value) {
-    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对象
         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%;

src/views/outdoorMedia/index.vue

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