1216 lines
41 KiB
Vue
1216 lines
41 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div class="searchPanel">
|
||
<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-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="请选择" @change="getbusinessAreaList"
|
||
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-item label="商圈:">
|
||
<el-select v-model="queryParams.businessDistrictId" placeholder="请选择" clearable
|
||
style="min-width: 30px;">
|
||
<el-option v-for="item in businessAreaList" :key="item.id" :label="item.name"
|
||
:value="item.id" />
|
||
</el-select>
|
||
</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.mediaType" placeholder="请选择" @change="getMediaTypeTwo" clearable
|
||
style="min-width: 30px">
|
||
<el-option v-for="item in mediaTypeOne" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="媒体大类:">
|
||
<el-select v-model="queryParams.mediaCategory" placeholder="请选择" @change="getMediaTypeThree"
|
||
clearable style="min-width: 30px">
|
||
<el-option v-for="item in mediaTypeTwo" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="展示形式:">
|
||
<el-select v-model="queryParams.displayForm" placeholder="请选择" clearable style="min-width: 30px">
|
||
<el-option v-for="item in mediaTypeThree" :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="已选媒体:">
|
||
<div v-if="multipleChoseArr.length == 0" class="noChoseLabel">未选择媒体</div>
|
||
<template v-else>
|
||
<el-tag v-for="tag in multipleChoseArr" :key="tag.id" class="choseResultTag"
|
||
@close="handleCloseTag(tag)" closable>
|
||
{{ tag.mediaName }}
|
||
</el-tag>
|
||
</template>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
<el-card class="mt10">
|
||
<el-row :gutter="10" class="my_row">
|
||
<el-col :span="8">
|
||
<el-form :model="queryParams" ref="queryRef" :inline="true" class="searchInputForm">
|
||
<el-form-item label="">
|
||
<el-input v-model="queryParams.keyword" @keydown.enter.prevent="handleQuery"
|
||
placeholder="请输入媒体名称/媒体编号" :prefix-icon="Search" style="width: 400px;" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-col>
|
||
<el-col :span="16" style="text-align: right;">
|
||
<el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:query']"
|
||
@click="handleQuery">查询</el-button>
|
||
<el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:reset']"
|
||
@click="resetQuery">重置</el-button>
|
||
<el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:exportPPTS']"
|
||
@click="handleExportMore">PPT批量导出</el-button>
|
||
<el-button type="primary" class="primaryBtn" v-hasPermi="['outdoorMedia:clear']"
|
||
@click="handleClearChoseMedia">清空所选媒体</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10" class="my_row" style="margin-bottom: 0;">
|
||
<el-col :span="12">
|
||
<el-table ref="tableRef" v-loading="loading" :data="outdoorMediaList"
|
||
@selection-change="handleSelectionChange"
|
||
:min-height="unfoldFlag ? 'calc(100vh - 372px)' : 'calc(100vh - 338px)'">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column label="实景图片" align="left" prop="mediaFileList" width="170">
|
||
<template #default="scope">
|
||
<img v-if="scope.row.mediaFileList.length > 0"
|
||
:src="baseUrl + scope.row.mediaFileList[0].fileName" fit="fill"
|
||
style="width: 138px;height: 78px; border-radius: 4px" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="媒体名称" align="left" prop="mediaName" width="150" />
|
||
<el-table-column label="商圈" align="left" prop="businessDistrictName" width="150" />
|
||
<el-table-column label="媒体大类" align="left" prop="mediaCategoryStr" width="150" />
|
||
<el-table-column label="展示形式" align="left" prop="displayFormStr" width="150" />
|
||
<el-table-column label="操作" width="58" align="center" fixed="right">
|
||
<template #default="scope">
|
||
<el-popover popper-class="my_popover" placement="left-start">
|
||
<div class="popBtns" @click="handleViewMedia(scope.row.id)"
|
||
v-hasPermi="['outdoorMedia:detail']">查看
|
||
</div>
|
||
<div class="popBtns" @click="handleDownPPT(scope.row)"
|
||
v-hasPermi="['outdoorMedia:exportPPT']">下载PPT</div>
|
||
<template #reference>
|
||
<img style="cursor: pointer;" :src="scope.row.currentImageSrc"
|
||
@mouseenter="scope.row.currentImageSrc = hoverImageSrc"
|
||
@mouseleave="scope.row.currentImageSrc = defaultImageSrc" />
|
||
</template>
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
||
@pagination="getOutMediaPageList" />
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div id="mapContainer" class="mapContainer"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
|
||
<detail ref="detailFormRef" />
|
||
</div>
|
||
</template>
|
||
<script setup name="Post">
|
||
import { onMounted, onUnmounted, nextTick, ref } from 'vue';
|
||
import { Search } from '@element-plus/icons-vue'
|
||
import { sysRegionListByPid } from "@/api/system/administrativeRegion"
|
||
import { sysMediaTypeListByPid } from "@/api/system/mediaType"
|
||
import { busTradingAreaPage } from "@/api/system/businessArea"
|
||
import { outMediaPageList } from "@/api/mediaLibrary"
|
||
import { pptTemplatePage } from "@/api/system/pptTemplate"
|
||
import { exportMediaPPT } from "@/api/mediaLibrary"
|
||
import AMapLoader from "@amap/amap-jsapi-loader"; // 引入地图服务
|
||
import optionIcon from '@/assets/images/optionIcon.png'
|
||
import optionIconHover from '@/assets/images/optionIconHover.png'
|
||
import { useBackgroundStore } from '@/store/modules/background'
|
||
import otherbg from '@/assets/images/otherbg.png'
|
||
|
||
import detail from './detail.vue';
|
||
|
||
const bgStore = useBackgroundStore()
|
||
const { proxy } = getCurrentInstance()
|
||
const baseUrl = import.meta.env.VITE_APP_BASE_API
|
||
const { apiKey, secretKey } = window._CONFIG
|
||
const detailFormRef = ref(null)
|
||
// 操作图标
|
||
const defaultImageSrc = ref(optionIcon);
|
||
const hoverImageSrc = ref(optionIconHover);
|
||
// 省、市、县、镇数据
|
||
const province = ref([])
|
||
const city = ref([])
|
||
const county = ref([])
|
||
const town = ref([])
|
||
// 商圈信息列表
|
||
const businessAreaList = ref([])
|
||
// 媒体类型数据
|
||
const mediaTypeOne = ref([])
|
||
const mediaTypeTwo = ref([])
|
||
const mediaTypeThree = ref([])
|
||
// 媒体多选数据
|
||
const multipleChoseArr = ref([])
|
||
// 户外媒体数据
|
||
const outdoorMediaList = ref([])
|
||
// 是否折叠
|
||
const unfoldFlag = ref(false)
|
||
const loading = ref(true)
|
||
const total = ref(0)
|
||
const data = reactive({
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
keyword: undefined,
|
||
mediaType: undefined,
|
||
mediaCategory: undefined,
|
||
displayForm: undefined,
|
||
provinceCode: undefined,
|
||
cityCode: undefined,
|
||
areaCode: undefined,
|
||
townCode: undefined,
|
||
businessDistrictId: undefined
|
||
}
|
||
})
|
||
const { queryParams } = toRefs(data)
|
||
// map实例
|
||
const mapInstance = ref(null)
|
||
const massMarks = ref(null)
|
||
// 当前激活的工具实例
|
||
const activeTool = ref(null)
|
||
// 当前地图模式（2D/3D）
|
||
const mapMode = ref('2D')
|
||
// 是否全屏状态
|
||
const isFullscreen = ref(false)
|
||
const geocoder = ref(null)
|
||
const geocoderMarker = ref(null)
|
||
const provinceName = ref(null)
|
||
const ciytName = ref(null)
|
||
const countyName = ref(null)
|
||
const townName = ref(null)
|
||
// 地图数据点
|
||
const points = ref([])
|
||
// 初始化变量用于存储极值
|
||
let minLng = Infinity; // 经度的最小值（最西边）
|
||
let minLat = Infinity; // 纬度的最小值（最南边）
|
||
let maxLng = -Infinity; // 经度的最大值（最东边）
|
||
let maxLat = -Infinity; // 纬度的最大值（最北边）
|
||
// 添加表格引用
|
||
const tableRef = ref(null)
|
||
// 添加一个标志位来区分是用户操作还是程序设置
|
||
const isSettingSelection = ref(false)
|
||
|
||
// 导出提交信息
|
||
const exportForm = ref({
|
||
mediaIds: undefined,
|
||
templateId: undefined,
|
||
exportFields: [
|
||
'mediaName',
|
||
'address',
|
||
'mediaSize',
|
||
'mediaOrientation',
|
||
'businessDistrictName',
|
||
'dailyAvgVehicleFlow',
|
||
'advantages'
|
||
]
|
||
})
|
||
|
||
// 获取PPT模板ID
|
||
const getpptTemplatePageList = () => {
|
||
pptTemplatePage(queryParams.value).then(res => {
|
||
const pptTemplate = res.data.list.filter(item => item.type == 3)
|
||
if (pptTemplate.length == 1) exportForm.value.templateId = pptTemplate[0].id
|
||
})
|
||
}
|
||
// 下载ppt
|
||
const handleDownPPT = (row) => {
|
||
exportForm.value.mediaIds = [row.id]
|
||
handleSubmitExportPPT()
|
||
}
|
||
// 批量下载PPT
|
||
const handleExportMore = () => {
|
||
if (multipleChoseArr.value.length == 0) {
|
||
proxy.$modal.msgWarning("请选择要导出的媒体!!!")
|
||
return false
|
||
}
|
||
exportForm.value.mediaIds = multipleChoseArr.value.map(item => item.id);
|
||
handleSubmitExportPPT()
|
||
}
|
||
// 导出ppt实现代码
|
||
const handleSubmitExportPPT = () => {
|
||
exportMediaPPT(exportForm.value).then(res => {
|
||
const downLoadName = '媒体信息_' + getCurrentTime() + '.pptx'
|
||
// 通过a标签打开新页面下载文件
|
||
const a = document.createElement('a')
|
||
a.href = URL.createObjectURL(res)
|
||
// a标签里有download属性可以自定义文件名
|
||
a.setAttribute('download', downLoadName)
|
||
document.body.appendChild(a)
|
||
a.click()
|
||
document.body.removeChild(a)
|
||
})
|
||
}
|
||
|
||
const getCurrentTime = () => {
|
||
//获取当前时间并打印
|
||
var getTime = new Date().getTime(); //获取到当前时间戳
|
||
var time = new Date(getTime); //创建一个日期对象
|
||
var year = time.getFullYear(); // 年
|
||
var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
|
||
var date = time.getDate().toString().padStart(2, '0'); // 日
|
||
var hour = time.getHours().toString().padStart(2, '0'); // 时
|
||
var minute = time.getMinutes().toString().padStart(2, '0'); // 分
|
||
var second = time.getSeconds().toString().padStart(2, '0'); // 秒
|
||
var gettime = year + month + date + hour + minute + second
|
||
return gettime
|
||
}
|
||
|
||
// 获取一级媒体类型
|
||
const getMediaTypeOne = () => {
|
||
sysMediaTypeListByPid({ parentId: 0 }).then(res => {
|
||
mediaTypeOne.value = res.data
|
||
})
|
||
}
|
||
// 获取二级媒体类型
|
||
const getMediaTypeTwo = (value) => {
|
||
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
||
queryParams.value.mediaTypeTwo = undefined
|
||
queryParams.value.mediaTypeThree = undefined
|
||
mediaTypeTwo.value = res.data
|
||
})
|
||
}
|
||
// 获取三级媒体类型
|
||
const getMediaTypeThree = (value) => {
|
||
sysMediaTypeListByPid({ parentId: value }).then(res => {
|
||
queryParams.value.mediaTypeThree = undefined
|
||
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
|
||
})
|
||
ciytName.value = undefined
|
||
countyName.value = undefined
|
||
townName.value = undefined
|
||
// 定位到省中心
|
||
var choseProvince = province.value.filter(item => item.id == value)[0]
|
||
if (choseProvince) {
|
||
provinceName.value = choseProvince.name
|
||
geocoderCityCenter()
|
||
}
|
||
getbusinessAreaList()
|
||
|
||
}
|
||
// 获取区/县数据
|
||
const getCountyList = (value) => {
|
||
sysRegionListByPid({ parentId: value }).then(res => {
|
||
queryParams.value.countyId = undefined
|
||
queryParams.value.townId = undefined
|
||
county.value = res.data
|
||
})
|
||
countyName.value = undefined
|
||
townName.value = undefined
|
||
var choseCity = city.value.filter(item => item.id == value)[0]
|
||
if (choseCity) {
|
||
ciytName.value = choseCity.name
|
||
geocoderCityCenter()
|
||
}
|
||
getbusinessAreaList()
|
||
}
|
||
// 获取镇数据
|
||
const getTownList = (value) => {
|
||
sysRegionListByPid({ parentId: value }).then(res => {
|
||
queryParams.value.townId = undefined
|
||
town.value = res.data
|
||
})
|
||
townName.value = undefined
|
||
var choseCounty = county.value.filter(item => item.id == value)[0]
|
||
if (choseCounty) {
|
||
countyName.value = choseCounty.name
|
||
geocoderCityCenter()
|
||
}
|
||
getbusinessAreaList()
|
||
}
|
||
// 依据省市县镇查询商圈
|
||
const getbusinessAreaList = (val) => {
|
||
const _params = {
|
||
pageIndex: 1,
|
||
pageSize: 200,
|
||
provinceId: queryParams.value.provinceCode,
|
||
cityId: queryParams.value.cityCode,
|
||
countyId: queryParams.value.areaCode,
|
||
townId: queryParams.value.townCode,
|
||
}
|
||
busTradingAreaPage(_params).then(res => {
|
||
if (res.code == 200) {
|
||
businessAreaList.value = res.data.list
|
||
}
|
||
})
|
||
|
||
var choseTown = town.value.filter(item => item.id == val)[0]
|
||
if (choseTown) {
|
||
townName.value = choseTown.name
|
||
geocoderCityCenter()
|
||
}
|
||
}
|
||
|
||
// 查找指定城市中心点，地图移动到中心点 放大视野
|
||
const geocoderCityCenter = () => {
|
||
// 构建查询地址
|
||
var address = provinceName.value;
|
||
if (ciytName.value) address += ciytName.value;
|
||
if (countyName.value) address += countyName.value;
|
||
if (townName.value) address += townName.value;
|
||
|
||
// 使用地理编码获取坐标
|
||
geocoder.value = new AMap.Geocoder({
|
||
city: ciytName.value || provinceName.value
|
||
});
|
||
|
||
geocoder.value.getLocation(address, function (status, result) {
|
||
if (status === 'complete' && result.geocodes.length > 0) {
|
||
var location = result.geocodes[0].location;
|
||
|
||
// 根据行政级别设置缩放级别
|
||
var zoomLevel = getZoomLevel(provinceName.value, ciytName.value, countyName.value, townName.value);
|
||
|
||
// 平滑移动到新位置
|
||
mapInstance.value.setZoomAndCenter(zoomLevel, [location.lng, location.lat], true);
|
||
|
||
// 添加标记
|
||
addMarker([location.lng, location.lat], address);
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
// 添加标记
|
||
const addMarker = (position, title) => {
|
||
// 清除现有标记
|
||
mapInstance.value.clearMap();
|
||
|
||
// 添加新标记
|
||
geocoderMarker.value = new AMap.Marker({
|
||
position: position,
|
||
title: title
|
||
});
|
||
|
||
mapInstance.value.add(geocoderMarker.value);
|
||
}
|
||
|
||
// 根据行政级别获取缩放级别
|
||
const getZoomLevel = (province, city, county, town) => {
|
||
if (town) return 15; // 乡镇级别
|
||
if (county) return 13; // 区县级别
|
||
if (city) return 11; // 城市级别
|
||
return 8; // 省份级别
|
||
}
|
||
|
||
// 折叠展开
|
||
const handleFlod = () => {
|
||
unfoldFlag.value = !unfoldFlag.value
|
||
}
|
||
// 获取户外媒介列表数据
|
||
const getOutMediaPageList = () => {
|
||
loading.value = true
|
||
outMediaPageList(queryParams.value).then(res => {
|
||
points.value = []
|
||
res.data.rows.forEach(itemPoint => {
|
||
itemPoint.currentImageSrc = defaultImageSrc.value;
|
||
if (itemPoint.mapX && itemPoint.mapX !== '' && itemPoint.mapY && itemPoint.mapY !== '') {
|
||
if (itemPoint.dataScopeDeptId == 220) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 0 })
|
||
else if (itemPoint.dataScopeDeptId == 219) points.value.push({ "lnglat": [itemPoint.mapX, itemPoint.mapY], "name": itemPoint.mediaName, "mediaId": itemPoint.id, "style": 1 })
|
||
// 同时更新极值
|
||
const lng = itemPoint.mapX;
|
||
const lat = itemPoint.mapY;
|
||
if (lng < minLng) minLng = lng;
|
||
if (lat < minLat) minLat = lat;
|
||
if (lng > maxLng) maxLng = lng;
|
||
if (lat > maxLat) maxLat = lat;
|
||
}
|
||
});
|
||
outdoorMediaList.value = res.data.rows
|
||
total.value = res.data.total
|
||
loading.value = false
|
||
|
||
// 数据加载完成后，设置选中状态
|
||
nextTick(() => {
|
||
setTableSelection()
|
||
// 在地图完全加载后执行点数据处理
|
||
renderMassMarks();
|
||
})
|
||
})
|
||
}
|
||
/** 搜索按钮操作 */
|
||
const handleQuery = () => {
|
||
queryParams.value.pageNum = 1
|
||
getOutMediaPageList()
|
||
}
|
||
/** 重置按钮操作 */
|
||
const resetQuery = () => {
|
||
queryParams.value = {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
keyword: undefined,
|
||
mediaType: undefined,
|
||
mediaCategory: undefined,
|
||
displayForm: undefined,
|
||
provinceCode: undefined,
|
||
cityCode: undefined,
|
||
areaCode: undefined,
|
||
townCode: undefined,
|
||
businessDistrictId: undefined
|
||
}
|
||
if (geocoderMarker.value) {
|
||
mapInstance.value.remove(geocoderMarker.value);
|
||
geocoderMarker.value = null
|
||
}
|
||
handleQuery()
|
||
}
|
||
// 选择媒体事件
|
||
const handleSelectionChange = (selection) => {
|
||
// 如果是程序设置的选中状态，不更新 multipleChoseArr
|
||
if (isSettingSelection.value) {
|
||
return
|
||
}
|
||
|
||
// 获取当前页所有行的ID
|
||
const currentPageIds = outdoorMediaList.value.map(item => item.id)
|
||
|
||
// 如果当前页没有选中的数据，说明是页面切换导致的清空，不处理
|
||
if (selection.length === 0 && currentPageIds.length > 0) {
|
||
// 检查当前页是否有应该选中的数据
|
||
const shouldHaveSelections = currentPageIds.some(id =>
|
||
multipleChoseArr.value.some(item => item.id === id)
|
||
)
|
||
|
||
// 如果当前页有应该选中的数据但selection为空，说明是页面切换，不处理
|
||
if (shouldHaveSelections) {
|
||
return
|
||
}
|
||
}
|
||
|
||
// 移除当前页中已取消选中的项目
|
||
const currentSelectedIds = selection.map(item => item.id)
|
||
multipleChoseArr.value = multipleChoseArr.value.filter(item =>
|
||
!currentPageIds.includes(item.id) || currentSelectedIds.includes(item.id)
|
||
)
|
||
|
||
// 添加新选中的项目（去重）
|
||
selection.forEach(newItem => {
|
||
if (!multipleChoseArr.value.some(item => item.id === newItem.id)) {
|
||
multipleChoseArr.value.push(newItem)
|
||
}
|
||
})
|
||
}
|
||
// 设置表格选中状态 - 完善版本
|
||
const setTableSelection = () => {
|
||
if (tableRef.value && outdoorMediaList.value.length > 0) {
|
||
// 设置标志位，避免触发 handleSelectionChange
|
||
isSettingSelection.value = true
|
||
|
||
// 使用 nextTick 确保DOM已更新
|
||
nextTick(() => {
|
||
// 先清除所有选中状态
|
||
tableRef.value.clearSelection()
|
||
|
||
// 延迟设置选中状态，确保清除操作完成
|
||
setTimeout(() => {
|
||
outdoorMediaList.value.forEach(row => {
|
||
const isSelected = multipleChoseArr.value.some(item => item.id === row.id)
|
||
if (isSelected) {
|
||
tableRef.value.toggleRowSelection(row, true)
|
||
}
|
||
})
|
||
|
||
// 恢复标志位
|
||
setTimeout(() => {
|
||
isSettingSelection.value = false
|
||
}, 100)
|
||
}, 50)
|
||
})
|
||
}
|
||
}
|
||
// 移除选择项
|
||
const handleCloseTag = (tag) => {
|
||
const rowIndex = multipleChoseArr.value.findIndex(item => item.id == tag.id)
|
||
multipleChoseArr.value.splice(rowIndex, 1)
|
||
|
||
// 清除对应行的复选框选中状态
|
||
if (tableRef.value) {
|
||
// 设置标志位，避免触发 handleSelectionChange
|
||
isSettingSelection.value = true
|
||
|
||
// 找到对应的行数据
|
||
const row = outdoorMediaList.value.find(item => item.id === tag.id)
|
||
if (row) {
|
||
tableRef.value.toggleRowSelection(row, false)
|
||
}
|
||
|
||
// 恢复标志位
|
||
setTimeout(() => {
|
||
isSettingSelection.value = false
|
||
}, 100)
|
||
}
|
||
}
|
||
// 清空已选媒体
|
||
const handleClearChoseMedia = () => {
|
||
multipleChoseArr.value = []
|
||
if (tableRef.value) {
|
||
// 设置标志位，避免触发 handleSelectionChange
|
||
isSettingSelection.value = true
|
||
tableRef.value.clearSelection()
|
||
// 恢复标志位
|
||
setTimeout(() => {
|
||
isSettingSelection.value = false
|
||
}, 100)
|
||
}
|
||
}
|
||
// 查看媒体详情
|
||
const handleViewMedia = (_mediaId) => {
|
||
detailFormRef.value.initMediaDetail(_mediaId)
|
||
}
|
||
|
||
|
||
|
||
// 初始化地图
|
||
const loadMap = () => {
|
||
return new Promise((resolve, reject) => {
|
||
// 设置安全密钥
|
||
window._AMapSecurityConfig = {
|
||
securityJsCode: secretKey
|
||
};
|
||
|
||
AMapLoader.load({
|
||
key: apiKey,
|
||
plugins: ["AMap.Geocoder", "AMap.MouseTool"],
|
||
version: '2.0', // 指定API版本
|
||
AMapUI: {
|
||
plugins: []
|
||
}
|
||
}).then(AMap => {
|
||
// 根据当前模式设置初始参数
|
||
const initialPitch = mapMode.value === '3D' ? 65 : 0;
|
||
const initialRotation = mapMode.value === '3D' ? -15 : 0;
|
||
|
||
mapInstance.value = new AMap.Map("mapContainer", {
|
||
resizeEnable: true,
|
||
pitch: initialPitch, // 倾斜角度决定2D/3D模式
|
||
rotation: initialRotation, // 旋转角度
|
||
zoom: 16,
|
||
zooms: [3, 16],
|
||
viewMode: mapMode.value // 启用3D视图
|
||
});
|
||
|
||
// // 先添加基本控件
|
||
mapInstance.value.setZoom(16);
|
||
|
||
// 添加自定义控件容器
|
||
addCustomControls(AMap);
|
||
|
||
// 地图加载完成后隐藏Logo
|
||
setTimeout(() => {
|
||
hideAmapLogo();
|
||
}, 1000);
|
||
|
||
// 监听地图渲染完成事件
|
||
mapInstance.value.on('render', hideAmapLogo);
|
||
|
||
// 添加缩放变化监听
|
||
mapInstance.value.on('zoomchange', handleZoomChange);
|
||
|
||
//// 在地图完全加载后执行点数据处理
|
||
//renderMassMarks();
|
||
|
||
resolve();
|
||
}).catch(e => {
|
||
console.log(e, "高德地图加载失败");
|
||
reject(e);
|
||
});
|
||
});
|
||
}
|
||
// 处理地图缩放事件
|
||
const handleZoomChange = () => {
|
||
const currentZoomLevel = mapInstance.value.getZoom();
|
||
// 如果缩放级别超过16，自动调整回16
|
||
if (currentZoomLevel > 16) {
|
||
mapInstance.value.setZoom(16);
|
||
return;
|
||
}
|
||
}
|
||
// 辅助函数：结束当前正在使用的鼠标工具
|
||
const stopActiveTool = () => {
|
||
if (activeTool.value !== null) {
|
||
clearAll()
|
||
activeTool.value = null; // 释放引用以便垃圾回收
|
||
}
|
||
};
|
||
// 添加自定义控件
|
||
const addCustomControls = (AMap) => {
|
||
// 创建控件容器
|
||
const controlContainer = document.createElement('div');
|
||
controlContainer.className = 'custom-map-controls';
|
||
|
||
// 2D/3D切换按钮
|
||
const toggle2D3DBtn = document.createElement('div');
|
||
toggle2D3DBtn.className = mapMode.value === '2D' ? 'map-control-btn map-control-3dbtn' : 'map-control-btn map-control-2dbtn';
|
||
toggle2D3DBtn.onclick = toggle2D3DMode;
|
||
|
||
// 全屏按钮
|
||
const fullscreenBtn = document.createElement('div');
|
||
fullscreenBtn.className = isFullscreen.value === true ? 'map-control-btn map-full-screen' : 'map-control-btn map-nofull-screen';
|
||
fullscreenBtn.onclick = toggleFullscreen;
|
||
|
||
// 工具箱测距按钮
|
||
const toolRangingBtn = document.createElement('div');
|
||
toolRangingBtn.className = 'map-control-btn map-ranging';
|
||
toolRangingBtn.setAttribute('title', '测距');
|
||
toolRangingBtn.onclick = startRuler;
|
||
|
||
// 工具箱测面积按钮
|
||
const toolMeasureAreaBtn = document.createElement('div');
|
||
toolMeasureAreaBtn.className = 'map-control-btn map-measureAreaBtn';
|
||
toolMeasureAreaBtn.setAttribute('title', '测面积');
|
||
toolMeasureAreaBtn.onclick = startMeasureArea;
|
||
|
||
// 工具箱添加点按钮
|
||
const toolPointBtn = document.createElement('div');
|
||
toolPointBtn.className = 'map-control-btn map-addPointBtn';
|
||
toolPointBtn.setAttribute('title', '绘制点');
|
||
toolPointBtn.onclick = startDrawMarker;
|
||
|
||
// 工具箱添加折线按钮
|
||
const toolLineBtn = document.createElement('div');
|
||
toolLineBtn.className = 'map-control-btn map-addLineBtn';
|
||
toolLineBtn.setAttribute('title', '绘制折线');
|
||
toolLineBtn.onclick = startDrawPolyline;
|
||
|
||
// 工具箱添加圆按钮
|
||
const toolCircleBtn = document.createElement('div');
|
||
toolCircleBtn.className = 'map-control-btn map-addCircleBtn';
|
||
toolCircleBtn.setAttribute('title', '绘制圆');
|
||
toolCircleBtn.onclick = startDrawCircle;
|
||
|
||
// 工具箱添加矩形按钮
|
||
const toolRactBtn = document.createElement('div');
|
||
toolRactBtn.className = 'map-control-btn map-addRactBtn';
|
||
toolRactBtn.setAttribute('title', '绘制矩形');
|
||
toolRactBtn.onclick = startDrawRectangle;
|
||
|
||
// 工具箱清除按钮
|
||
const toolClearAllBtn = document.createElement('div');
|
||
toolClearAllBtn.className = 'map-control-btn map-clearAllBtn';
|
||
toolClearAllBtn.setAttribute('title', '清除');
|
||
toolClearAllBtn.onclick = clearAll;
|
||
|
||
controlContainer.appendChild(toggle2D3DBtn);
|
||
controlContainer.appendChild(fullscreenBtn);
|
||
controlContainer.appendChild(toolRangingBtn);
|
||
controlContainer.appendChild(toolMeasureAreaBtn);
|
||
controlContainer.appendChild(toolPointBtn);
|
||
controlContainer.appendChild(toolLineBtn);
|
||
controlContainer.appendChild(toolCircleBtn);
|
||
controlContainer.appendChild(toolRactBtn);
|
||
controlContainer.appendChild(toolClearAllBtn);
|
||
|
||
// 添加到地图容器
|
||
document.getElementById('mapContainer').appendChild(controlContainer);
|
||
}
|
||
// 切换2D/3D模式
|
||
const toggle2D3DMode = () => {
|
||
if (!mapInstance.value) return;
|
||
|
||
const currentPitch = mapInstance.value.getPitch();
|
||
|
||
if (currentPitch === 0) {
|
||
// 切换到3D模式
|
||
mapInstance.value.setPitch(65);
|
||
mapInstance.value.setRotation(-15);
|
||
mapMode.value = '3D';
|
||
loadMap()
|
||
} else {
|
||
// 切换到2D模式
|
||
mapInstance.value.setPitch(0);
|
||
mapInstance.value.setRotation(0);
|
||
mapMode.value = '2D';
|
||
loadMap()
|
||
}
|
||
|
||
}
|
||
// 切换全屏模式
|
||
const toggleFullscreen = () => {
|
||
const mapContainer = document.getElementById('mapContainer');
|
||
|
||
if (!document.fullscreenElement) {
|
||
// 进入全屏
|
||
if (mapContainer.requestFullscreen) {
|
||
mapContainer.requestFullscreen().then(() => {
|
||
isFullscreen.value = true;
|
||
const buttons = document.querySelectorAll('.map-control-btn');
|
||
buttons[1].className = 'map-control-btn map-full-screen';
|
||
}).catch(err => {
|
||
console.error('全屏模式错误:', err);
|
||
});
|
||
}
|
||
} else {
|
||
// 退出全屏
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen().then(() => {
|
||
isFullscreen.value = false;
|
||
const buttons = document.querySelectorAll('.map-control-btn');
|
||
buttons[1].className = 'map-control-btn map-nofull-screen';
|
||
});
|
||
}
|
||
}
|
||
}
|
||
// 测距方法
|
||
const startRuler = () => {
|
||
if (!mapInstance.value) return;
|
||
stopActiveTool();
|
||
activeTool.value = new AMap.MouseTool(mapInstance.value);
|
||
activeTool.value.rule({
|
||
startMarkerOptions: {//可缺省
|
||
icon: new AMap.Icon({
|
||
size: new AMap.Size(19, 31),//图标大小
|
||
imageSize: new AMap.Size(19, 31),
|
||
image: "//webapi.amap.com/theme/v1.3/markers/b/start.png"
|
||
}),
|
||
offset: new AMap.Pixel(-9, -31)
|
||
},
|
||
endMarkerOptions: {//可缺省
|
||
icon: new AMap.Icon({
|
||
size: new AMap.Size(19, 31),//图标大小
|
||
imageSize: new AMap.Size(19, 31),
|
||
image: "//webapi.amap.com/theme/v1.3/markers/b/end.png"
|
||
}),
|
||
offset: new AMap.Pixel(-9, -31)
|
||
},
|
||
midMarkerOptions: {//可缺省
|
||
icon: new AMap.Icon({
|
||
size: new AMap.Size(19, 31),//图标大小
|
||
imageSize: new AMap.Size(19, 31),
|
||
image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png"
|
||
}),
|
||
offset: new AMap.Pixel(-9, -31)
|
||
},
|
||
lineOptions: {//可缺省
|
||
strokeStyle: "solid",
|
||
strokeColor: "#FF33FF",
|
||
strokeOpacity: 1,
|
||
strokeWeight: 2
|
||
}
|
||
});
|
||
}
|
||
// 测面积方法
|
||
const startMeasureArea = () => {
|
||
if (!mapInstance.value) return;
|
||
stopActiveTool();
|
||
activeTool.value = new AMap.MouseTool(mapInstance.value);
|
||
activeTool.value.measureArea({
|
||
strokeColor: '#80d8ff',
|
||
fillColor: '#80d8ff',
|
||
fillOpacity: 0.3
|
||
//同 Polygon 的 Option 设置
|
||
});
|
||
}
|
||
// 添加点
|
||
const startDrawMarker = () => {
|
||
if (!mapInstance.value) return;
|
||
stopActiveTool();
|
||
activeTool.value = new AMap.MouseTool(mapInstance.value);
|
||
activeTool.value.marker({
|
||
//同Marker的Option设置
|
||
});
|
||
}
|
||
// 添加线
|
||
const startDrawPolyline = () => {
|
||
if (!mapInstance.value) return;
|
||
stopActiveTool();
|
||
activeTool.value = new AMap.MouseTool(mapInstance.value);
|
||
activeTool.value.polyline({
|
||
strokeColor: '#80d8ff'
|
||
//同Polyline的Option设置
|
||
});
|
||
}
|
||
// 添加圆
|
||
const startDrawCircle = () => {
|
||
if (!mapInstance.value) return;
|
||
stopActiveTool();
|
||
activeTool.value = new AMap.MouseTool(mapInstance.value);
|
||
activeTool.value.circle({
|
||
fillColor: '#00b0ff',
|
||
strokeColor: '#80d8ff'
|
||
//同Circle的Option设置
|
||
});
|
||
}
|
||
// 画矩形
|
||
const startDrawRectangle = () => {
|
||
if (!mapInstance.value) return;
|
||
stopActiveTool();
|
||
activeTool.value = new AMap.MouseTool(mapInstance.value);
|
||
activeTool.value.rectangle({
|
||
fillColor: '#00b0ff',
|
||
strokeColor: '#80d8ff'
|
||
//同Polygon的Option设置
|
||
});
|
||
}
|
||
// 清除
|
||
const clearAll = () => {
|
||
activeTool.value.close(true)//关闭，并清除覆盖物
|
||
}
|
||
// 监听全屏变化事件
|
||
document.addEventListener('fullscreenchange', () => {
|
||
if (!document.fullscreenElement) {
|
||
isFullscreen.value = false;
|
||
}
|
||
});
|
||
// 创建自定义点样式
|
||
const createPointStyle = (color, size, styleType) => {
|
||
const canvas = document.createElement('canvas');
|
||
canvas.width = size * 2;
|
||
canvas.height = size * 2;
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
// 根据样式类型绘制不同的图形
|
||
switch (styleType) {
|
||
case 'circle':
|
||
ctx.beginPath();
|
||
ctx.arc(size, size, size, 0, Math.PI * 2);
|
||
ctx.fillStyle = color;
|
||
ctx.fill();
|
||
break;
|
||
case 'ring':
|
||
ctx.beginPath();
|
||
ctx.arc(size, size, size, 0, Math.PI * 2);
|
||
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
|
||
ctx.fill();
|
||
|
||
ctx.beginPath();
|
||
ctx.arc(size, size, size * 0.7, 0, Math.PI * 2);
|
||
ctx.fillStyle = color;
|
||
ctx.fill();
|
||
break;
|
||
case 'square':
|
||
ctx.fillStyle = color;
|
||
ctx.fillRect(0, 0, size * 2, size * 2);
|
||
break;
|
||
case 'star':
|
||
ctx.fillStyle = color;
|
||
ctx.beginPath();
|
||
for (let i = 0; i < 5; i++) {
|
||
const angle = (i * 2 * Math.PI / 5) - Math.PI / 2;
|
||
const x = size + size * Math.cos(angle);
|
||
const y = size + size * Math.sin(angle);
|
||
if (i === 0) {
|
||
ctx.moveTo(x, y);
|
||
} else {
|
||
ctx.lineTo(x, y);
|
||
}
|
||
|
||
const innerAngle = angle + Math.PI / 5;
|
||
const innerX = size + size * 0.4 * Math.cos(innerAngle);
|
||
const innerY = size + size * 0.4 * Math.sin(innerAngle);
|
||
ctx.lineTo(innerX, innerY);
|
||
}
|
||
ctx.closePath();
|
||
ctx.fill();
|
||
break;
|
||
}
|
||
|
||
return canvas;
|
||
}
|
||
// 渲染海量点
|
||
const renderMassMarks = () => {
|
||
// 清除现有的海量点
|
||
if (massMarks.value) {
|
||
massMarks.value.clear();
|
||
}
|
||
|
||
// 创建三种不同大小的样式
|
||
const styles = [
|
||
// 优势媒体颜色-红色
|
||
{
|
||
url: createPointStyle('#EC1B60', 18, 'circle').toDataURL(),
|
||
anchor: new AMap.Pixel(18, 18),
|
||
size: new AMap.Size(18, 18)
|
||
},
|
||
// 网络媒体颜色-蓝色
|
||
{
|
||
url: createPointStyle('#058DED', 18, 'circle').toDataURL(),
|
||
anchor: new AMap.Pixel(18, 18),
|
||
size: new AMap.Size(18, 18)
|
||
},
|
||
];
|
||
|
||
// 如果有点存在，则创建 MassMarks 实例
|
||
if (points.value.length > 0 && mapInstance.value) {
|
||
// 创建MassMarks对象
|
||
massMarks.value = new AMap.MassMarks(points.value, {
|
||
opacity: 1,
|
||
zIndex: 111,
|
||
cursor: 'pointer',
|
||
style: styles
|
||
});
|
||
|
||
// 将海量点添加到地图
|
||
massMarks.value.setMap(mapInstance.value);
|
||
|
||
// 添加点击事件
|
||
massMarks.value.on('click', function (e) {
|
||
handleViewMedia(e.data.mediaId)
|
||
});
|
||
|
||
// ==================================================
|
||
// 新增：计算边界并设置地图视野
|
||
// ==================================================
|
||
const southWest = new AMap.LngLat(minLng, minLat); // 西南角
|
||
const northEast = new AMap.LngLat(maxLng, maxLat); // 东北角
|
||
const bounds = new AMap.Bounds(southWest, northEast);
|
||
|
||
// 设置地图显示范围，会自动适配最佳视图
|
||
mapInstance.value.setBounds(bounds);
|
||
}
|
||
|
||
}
|
||
// 隐藏Logo的函数
|
||
const hideAmapLogo = () => {
|
||
const logos = document.querySelectorAll('.amap-logo, .amap-copyright');
|
||
logos.forEach(logo => {
|
||
logo.style.display = 'none';
|
||
logo.style.visibility = 'hidden';
|
||
logo.style.opacity = '0';
|
||
});
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
stopActiveTool()
|
||
if (mapInstance.value) {
|
||
mapInstance.value.destroy();
|
||
}
|
||
})
|
||
// 初始化
|
||
onMounted(() => {
|
||
bgStore.setBgImage(otherbg)
|
||
loadMap()
|
||
// 获取模板id
|
||
getpptTemplatePageList()
|
||
getOutMediaPageList()
|
||
getMediaTypeOne()
|
||
getProvinceList()
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.noChoseLabel {
|
||
height: 24px;
|
||
line-height: 24px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #ffffff90;
|
||
}
|
||
|
||
.mapContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #3f8bff;
|
||
}
|
||
|
||
.custom-map-controls {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 5px;
|
||
z-index: 1000;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0px;
|
||
}
|
||
|
||
.map-control-btn {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.map-control-2dbtn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/icon-2D-btn.png');
|
||
}
|
||
|
||
.map-control-2dbtn:hover {
|
||
background: url('../../assets/images/icon-2D-active-btn.png');
|
||
}
|
||
|
||
.map-control-3dbtn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/icon-3D-btn.png');
|
||
}
|
||
|
||
.map-control-3dbtn:hover {
|
||
background: url('../../assets/images/icon-3D-active-btn.png');
|
||
}
|
||
|
||
.map-nofull-screen {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/icon-full-screen.png');
|
||
}
|
||
|
||
.map-nofull-screen:hover {
|
||
background: url('../../assets/images/icon-full-screen-active.png');
|
||
}
|
||
|
||
|
||
.map-full-screen {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/icon-map-nofull-screen.png');
|
||
}
|
||
|
||
.map-full-screen:hover {
|
||
background: url('../../assets/images/icon-map-nofull-screen-active.png');
|
||
}
|
||
|
||
.map-ranging {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/mapRanging.png');
|
||
}
|
||
|
||
.map-ranging:hover {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/mapRanginghover.png');
|
||
}
|
||
|
||
.map-measureAreaBtn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/mapArea.png');
|
||
}
|
||
|
||
.map-measureAreaBtn:hover {
|
||
background: url('../../assets/images/mapAreaHover.png');
|
||
}
|
||
|
||
.map-addPointBtn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/mapPoint.png');
|
||
}
|
||
|
||
.map-addPointBtn:hover {
|
||
background: url('../../assets/images/mapPointHover.png');
|
||
}
|
||
|
||
.map-addLineBtn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/mapLine.png');
|
||
}
|
||
|
||
.map-addLineBtn:hover {
|
||
background: url('../../assets/images/mapLineHover.png');
|
||
}
|
||
|
||
.map-addCircleBtn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/mapCircle.png');
|
||
}
|
||
|
||
.map-addCircleBtn:hover {
|
||
background: url('../../assets/images/mapCircleHover.png');
|
||
}
|
||
|
||
.map-addRactBtn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/mapRect.png');
|
||
}
|
||
|
||
.map-addRactBtn:hover {
|
||
background: url('../../assets/images/mapRectHover.png');
|
||
}
|
||
|
||
.map-clearAllBtn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: url('../../assets/images/mapClearAll.png');
|
||
}
|
||
|
||
.map-clearAllBtn:hover {
|
||
background: url('../../assets/images/mapClearAllHover.png');
|
||
}
|
||
|
||
/* 全屏样式 */
|
||
.mapContainer:-webkit-full-screen {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
.mapContainer:-moz-full-screen {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
.mapContainer:-ms-fullscreen {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
.mapContainer:fullscreen {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
</style> |