wangchengming/YouKeChuanMei_VUE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

媒体地图可视化添加媒体查看

Browse Source
This commit is contained in:
wangchengming 2025-09-15 14:33:11 +08:00
parent 3977e17f7e
commit 2df70bd2d4
2 changed files with 214 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/assets/styles/ruoyi.scss
View File

@ -1047,6 +1047,12 @@ h6 {
}
// 弹窗样式覆盖
.media_dialog {
padding: 0 !important;
top: 148px;
margin-left: 40px;
}
.my_dialog {
padding: 0 !important;
}
@ -1061,14 +1067,60 @@ h6 {
line-height: 30px !important;
}
.media_dialog .el-dialog__header {
border-bottom: 0;
padding: 0 20px;
line-height: 50px;
height: 50px;
background: #bad5f7;
}
.media_dialog .custom-header {
height: 50px;
}
.media_dialog .mediaNameIcon {
display: inline-block;
width: 4px;
height: 14px;
border-radius: 1px;
background: #ffc63d;
margin: 0px 10px 18px 0px;
}
.media_dialog .mediaName {
display: inline-block;
width: 318px;
font-family: Microsoft YaHei;
font-weight: 600;
font-size: 18px;
color: #000000;
overflow: hidden;
/* 隐藏溢出的内容 */
text-overflow: ellipsis;
/* 以省略号代替超出部分 */
white-space: nowrap;
}
.my_dialog .el-dialog__headerbtn {
top: 6px;
}
.media_dialog .el-dialog__headerbtn .el-dialog__close {
color: #ffffff;
margin-top: 4px;
}
.my_dialog .el-dialog__headerbtn .el-dialog__close {
color: #000000;
}
.media_dialog .el-dialog__body {
padding: 0px;
overflow-y: auto;
height: calc(100vh - 220px);
}
.my_dialog .el-dialog__body {
padding: 30px;
max-height: 750px;
@ -1245,11 +1297,13 @@ h6 {
padding-bottom: 0px;
}
.myMediaDetailForm .el-form-item--default,
.mySmailDetailForm .el-form-item--default,
.myDetailForm .el-form-item--default {
margin-bottom: 0px;
}
.myMediaDetailForm .el-form--inline .el-form-item,
.mySmailDetailForm .el-form--inline .el-form-item,
.myDetailForm .el-form--inline .el-form-item {
display: inline-flex;
@ -1276,6 +1330,24 @@ h6 {
/* 限制宽度 */
}
.myMediaDetailForm .el-form-item__content {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #1E1E1E;
display: block;
line-height: 48px;
padding-left: 20px;
overflow: hidden;
/* 隐藏溢出的内容 */
text-overflow: ellipsis;
/* 以省略号代替超出部分 */
white-space: nowrap;
/* 强制在一行内显示，不允许自动换行 */
width: 100%;
/* 限制宽度 */
}
.mySmailDetailForm .el-form-item__content {
font-family: Microsoft YaHei;
font-weight: 600;
@ -1293,7 +1365,7 @@ h6 {
width: 100%;
/* 限制宽度 */
}
// 多行内容显示
.mySmailDetailForm .moreRowContent .el-form-item__label {
font-family: Microsoft YaHei;
@ -1320,6 +1392,29 @@ h6 {
min-height: 120px;
}
.myMediaDetailForm .moreRowContent .el-form-item__label {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #002866;
justify-content: end;
height: auto;
min-height: 120px;
padding-left: 17px;
background: #EDF2F960;
}
.myMediaDetailForm .moreRowContent .el-form-item__content {
font-family: Microsoft YaHei;
font-weight: 600;
font-size: 16px;
color: #1E1E1E;
display: block;
line-height: 20px;
padding: 34px 38px 14px;
white-space: normal;
min-height: 120px;
}
.mySmailDetailForm .el-form-item__label {
font-family: Microsoft YaHei;
@ -1333,6 +1428,18 @@ h6 {
background: #EDF2F960;
}
.myMediaDetailForm .el-form-item__label {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #002866;
justify-content: end;
min-height: 48px;
line-height: 48px;
padding-left: 17px;
background: rgba(237, 242, 249, 0.3764705882);
}
.myDetailForm .el-form-item__label {
font-family: Microsoft YaHei;
font-weight: 400;

121
src/views/mediaMap/index.vue
View File

@ -5,16 +5,15 @@
<el-col :span="12">
<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">
<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">
<el-option v-for="item in localeList" :key="item.id" :label="item.name" :value="item"
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>
}}</div>
</el-option>
</el-select>
</el-form-item>
@ -38,6 +37,81 @@
</el-row>
<div id="mapContainer" class="mediaMapContainer"></div>
<el-dialog v-model="open" width="400px" :modal="false" class="media_dialog" :destroy-on-close="true"
:close-on-click-modal="false">
<template #header>
<div class="custom-header">
<div class="mediaNameIcon" />
<div class="mediaName">{{ detailForm.mediaName }}</div>
</div>
</template>
<el-form ref="detailFormRef" :model="detailForm" label-width="130px" class="myMediaDetailForm"
v-loading="loading">
<el-form-item label="业务">
{{ detailForm.dataScopeDeptName }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="状态">
<span v-if="detailForm.state == 1">生效中</span>
<span v-if="detailForm.state == 2">已作废</span>
</el-form-item>
<div class="splineBar" />
<el-form-item label="媒体名称">
{{ detailForm.mediaName }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="媒体编号">
{{ detailForm.mediaCode }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="媒体类型">
{{ detailForm.mediaTypeStr }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="媒体大类">
{{ detailForm.mediaCategoryStr }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="展示形式">
{{ detailForm.displayFormStr }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="是否有照明">
{{ detailForm.hasLighting }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="播放时间">
{{ detailForm.playbackTime }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="日均车流量">
{{ detailForm.dailyAvgVehicleFlow }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="媒体尺寸">
{{ detailForm.mediaSize }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="商圈">
{{ detailForm.provinceName }}{{ detailForm.cityName }}{{ detailForm.areaName }}{{
detailForm.townName }}-{{ detailForm.businessDistrictName }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="地址">
{{ detailForm.address }}
</el-form-item>
<div class="splineBar" />
<el-form-item label="媒体图片" class="moreRowContent">
<el-row :gutter="30" class="my_form_row">
<el-col :span="12" v-for="itemFile in fileList">
<img :src="baseUrl + itemFile.fileName" fit="fill"
style="width: 80px; height: 80px; border-radius: 4px; background: #1a75e6; border: 1px solid #d2d2d2; margin-bottom: 20px;" />
</el-col>
</el-row>
</el-form-item>
</el-form>
</el-dialog>
</el-card>
</div>
@ -50,13 +124,15 @@ 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 { mediaByMap, mediaDetail } from "@/api/mediaLibrary"
const baseUrl = import.meta.env.VITE_APP_BASE_API
const bgStore = useBackgroundStore()
const { proxy } = getCurrentInstance()
const { apiKey, secretKey } = window._CONFIG
const open = ref(false)
const detailForm = ref({})
const fileList = ref([])
// 中心点名称
const centerPointName = ref(null)
// map实例
@ -135,6 +211,18 @@ const resetQuery = () => {
renderMassMarks()
}
// 获取媒体详情
const handleViewMedia = (_mediaId) => {
mediaDetail({ mediaId: _mediaId }).then(res => {
detailForm.value = res.data
if (detailForm.value.mediaFile && detailForm.value.mediaFile.length > 0) {
fileList.value = detailForm.value.mediaFile.filter(item => item.fileType == 6)
console.log('图片', fileList.value)
}
open.value = true
})
}
// 调用API获取地点
const getLocaleListList = (searchValue) => {
@ -192,7 +280,6 @@ const addCenterMark = (val) => {
mapInstance.value.add(centerMarker.value);
mapInstance.value.setFitView();
}
// 创建圆形热区
const createCircle = (val) => {
// 创建圆形覆盖物
@ -219,8 +306,6 @@ const createCircle = (val) => {
// 渲染数据点
renderMassMarks()
}
// 创建圆形边缘拖拽手柄
const createCircleHandle = () => {
// 计算手柄的初始位置（圆形右侧边缘）
@ -316,8 +401,6 @@ const handleChangeDistance = (itemDistance) => {
// 重新渲染数据点
renderMassMarks()
}
// 初始化地图
const loadMap = () => {
return new Promise((resolve, reject) => {
@ -548,8 +631,8 @@ const renderMassMarks = () => {
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 })
if (itemPoint.businessType == 1) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, "style": 0 })
if (itemPoint.businessType == 2) points.value.push({ "lnglat": [itemPoint.x, itemPoint.y], "mediaId": itemPoint.mediaId, "style": 1 })
});
}
}).then(res => {
@ -568,6 +651,7 @@ const renderMassMarks = () => {
// 添加点击事件
massMarks.value.on('click', function (e) {
console.log('点击了节点', e.data)
handleViewMedia(e.data.mediaId)
});
})
}
@ -771,4 +855,11 @@ onMounted(() => {
height: 50px;
padding-top: 4px;
}
// 分割线
.splineBar {
width: 100%;
height: 1px;
background: #E6EAF1;
}
</style>