From 2df70bd2d461bce10a069f085ca1d5a71ef98360 Mon Sep 17 00:00:00 2001 From: wangchengming <15110151257@163.com> Date: Mon, 15 Sep 2025 14:33:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=9C=B0=E5=9B=BE=E5=8F=AF?= =?UTF-8?q?=E8=A7=86=E5=8C=96=E6=B7=BB=E5=8A=A0=E5=AA=92=E4=BD=93=E6=9F=A5?= =?UTF-8?q?=E7=9C=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/ruoyi.scss | 109 ++++++++++++++++++++++++++++++- src/views/mediaMap/index.vue | 121 ++++++++++++++++++++++++++++++----- 2 files changed, 214 insertions(+), 16 deletions(-) diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss index bf11065..8ebaf0f 100644 --- a/src/assets/styles/ruoyi.scss +++ b/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; diff --git a/src/views/mediaMap/index.vue b/src/views/mediaMap/index.vue index 043c9b0..3bc7d63 100644 --- a/src/views/mediaMap/index.vue +++ b/src/views/mediaMap/index.vue @@ -5,16 +5,15 @@ - +
{{ item.name }}
{{ item.address - }}
+ }} @@ -38,6 +37,81 @@
+ + + + + + {{ detailForm.dataScopeDeptName }} + +
+ + 生效中 + 已作废 + +
+ + {{ detailForm.mediaName }} + +
+ + {{ detailForm.mediaCode }} + +
+ + {{ detailForm.mediaTypeStr }} + +
+ + {{ detailForm.mediaCategoryStr }} + +
+ + {{ detailForm.displayFormStr }} + +
+ + {{ detailForm.hasLighting }} + +
+ + {{ detailForm.playbackTime }} + +
+ + {{ detailForm.dailyAvgVehicleFlow }} + +
+ + {{ detailForm.mediaSize }} + +
+ + {{ detailForm.provinceName }}{{ detailForm.cityName }}{{ detailForm.areaName }}{{ + detailForm.townName }}-{{ detailForm.businessDistrictName }} + +
+ + {{ detailForm.address }} + +
+ + + + + + + + +
@@ -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; +} \ No newline at end of file