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

src/assets/styles/ruoyi.scss

@@ -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;

src/views/mediaMap/index.vue

@@ -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
+                            <el-select class="filterSelect" v-model="centerPointName" filterable remote reserve-keyword
-                                reserve-keyword :remote-method="getLocaleListList" :loading="selectLoading"
+                                :remote-method="getLocaleListList" :loading="selectLoading" @change="currentSelect"
-                                @change="currentSelect" placeholder="请输入内容以设置中心点" remote-show-suffix clearable
+                                placeholder="请输入内容以设置中心点" remote-show-suffix clearable style="width: 400px">
-                                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 == 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], "name": itemPoint.mediaId, "style": 1 })
+                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>