From 1047964d8ee58fa70df49071dc6dd7ba23c6d0f3 Mon Sep 17 00:00:00 2001 From: xhf <1424913779@qq.com> Date: Fri, 21 Feb 2025 11:02:24 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=9E=E6=97=B6=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../realTimeMap/components/indexPage.vue | 434 +++++++++++------- 1 file changed, 268 insertions(+), 166 deletions(-) diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue index 515674a2..83c84799 100644 --- a/src/views/mapPage/realTimeMap/components/indexPage.vue +++ b/src/views/mapPage/realTimeMap/components/indexPage.vue @@ -2,9 +2,13 @@
-
- + + + + +
+
+
+
@@ -190,7 +267,7 @@ import { nextTick, onMounted, onBeforeUnmount, - onUnmounted, + onUnmounted } from 'vue' import * as MapApi from '@/api/map/map' import WebSocketClient from '../webSocket.js' @@ -233,29 +310,36 @@ const carPointListFun = () => { const isDrag = ref(false) const changeIsDrag = () => { nextTick(() => { - isDrag.value = !isDrag.value - console.log(isDrag.value) - if(!isDrag.value){ - //还原位置 - resetPosition() - } + isDrag.value = !isDrag.value + console.log(isDrag.value) + if (!isDrag.value) { + //还原位置 + resetPosition() + } }) - } +// 获取曲线的路径 +const getCurvePath = (curve) => { + let startPointX = (Number(curve.startPointX) + Number(curve.beginWidth) / 2) * radio.value + let startPointY = (Number(curve.startPointY) + Number(curve.beginHigh) / 2) * radio.value + let endPointX = (Number(curve.endPointX) + Number(curve.endWidth) / 2) * radio.value + let endPointY = (Number(curve.endPointY) + Number(curve.endHigh) / 2) * radio.value + return `M ${startPointX} ${startPointY} C ${curve.beginControlX* radio.value} ${curve.beginControlY* radio.value}, ${curve.endControlX* radio.value} ${curve.endControlY* radio.value}, ${endPointX} ${endPointY}` +} //放大缩小 const isSizeRaio = ref(1) const changeSizeRaio = (type) => { - if(type<0 && (isSizeRaio.value + type) <= 0){ + if (type < 0 && isSizeRaio.value + type <= 0) { return } isSizeRaio.value += type } //图例状态 const legendObj = reactive({ - driveLineShow:false, - carShow:false, - legendShow:true + driveLineShow: false, + carShow: false, + legendShow: true }) // 车辆是否显示 const changCarShow = () => { @@ -266,29 +350,39 @@ const changDriveLineShow = () => { legendObj.driveLineShow = !legendObj.driveLineShow } const toggleFullScreen = () => { - var elem = document.getElementById("indexpage-container"); // 获取元素 - if (!document.fullscreenElement) { // 检查是否已经是全屏模式 - if (elem.requestFullscreen) { // 支持requestFullscreen API的标准方式 - elem.requestFullscreen().catch(err => { - alert(`无法进入全屏模式: ${err.message}`); // 处理错误情况 - }); - } else if (elem.mozRequestFullScreen) { // 旧版Firefox的API名称（已废弃） - elem.mozRequestFullScreen(); - } else if (elem.webkitRequestFullscreen) { // WebKit/Safari/Chrome的API名称（已废弃） - elem.webkitRequestFullscreen(); - } else if (elem.msRequestFullscreen) { // IE/Edge的API名称（已废弃） - elem.msRequestFullscreen(); + var elem = document.getElementById('indexpage-container') // 获取元素 + if (!document.fullscreenElement) { + // 检查是否已经是全屏模式 + if (elem.requestFullscreen) { + // 支持requestFullscreen API的标准方式 + elem.requestFullscreen().catch((err) => { + alert(`无法进入全屏模式: ${err.message}`) // 处理错误情况 + }) + } else if (elem.mozRequestFullScreen) { + // 旧版Firefox的API名称（已废弃） + elem.mozRequestFullScreen() + } else if (elem.webkitRequestFullscreen) { + // WebKit/Safari/Chrome的API名称（已废弃） + elem.webkitRequestFullscreen() + } else if (elem.msRequestFullscreen) { + // IE/Edge的API名称（已废弃） + elem.msRequestFullscreen() } isDrag.value = true - } else { // 退出全屏模式 - if (document.exitFullscreen) { // 标准API退出全屏模式 - document.exitFullscreen(); - } else if (document.mozCancelFullScreen) { // 旧版Firefox的API名称（已废弃） - document.mozCancelFullScreen(); - } else if (document.webkitExitFullscreen) { // WebKit/Safari/Chrome的API名称（已废弃） - document.webkitExitFullscreen(); - } else if (document.msExitFullscreen) { // IE/Edge的API名称（已废弃） - document.msExitFullscreen(); + } else { + // 退出全屏模式 + if (document.exitFullscreen) { + // 标准API退出全屏模式 + document.exitFullscreen() + } else if (document.mozCancelFullScreen) { + // 旧版Firefox的API名称（已废弃） + document.mozCancelFullScreen() + } else if (document.webkitExitFullscreen) { + // WebKit/Safari/Chrome的API名称（已废弃） + document.webkitExitFullscreen() + } else if (document.msExitFullscreen) { + // IE/Edge的API名称（已废弃） + document.msExitFullscreen() } console.log('退出全屏') isDrag.value = false @@ -296,51 +390,51 @@ const toggleFullScreen = () => { } // 监听全屏状态变化事件 document.addEventListener('fullscreenchange', function () { - if (!document.fullscreenElement) { - console.log('已退出全屏模式'); - // 在这里可以添加退出全屏后的逻辑 - isDrag.value = false - resetPosition() - } else { - console.log('已进入全屏模式'); - // 在这里可以添加进入全屏后的逻辑 - isDrag.value = true - } - }); + if (!document.fullscreenElement) { + console.log('已退出全屏模式') + // 在这里可以添加退出全屏后的逻辑 + isDrag.value = false + resetPosition() + } else { + console.log('已进入全屏模式') + // 在这里可以添加进入全屏后的逻辑 + isDrag.value = true + } + }) - // 监听旧版浏览器的全屏状态变化事件 - document.addEventListener('mozfullscreenchange', function () { - if (!document.mozFullScreenElement) { - console.log('已退出全屏模式 (Firefox旧版)'); - isDrag.value = false - resetPosition() - } else { - console.log('已进入全屏模式 (Firefox旧版)'); - isDrag.value = true - } - }); + // 监听旧版浏览器的全屏状态变化事件 + document.addEventListener('mozfullscreenchange', function () { + if (!document.mozFullScreenElement) { + console.log('已退出全屏模式 (Firefox旧版)') + isDrag.value = false + resetPosition() + } else { + console.log('已进入全屏模式 (Firefox旧版)') + isDrag.value = true + } + }) - document.addEventListener('webkitfullscreenchange', function () { - if (!document.webkitFullscreenElement) { - console.log('已退出全屏模式 (WebKit旧版)'); - isDrag.value = false - resetPosition() - } else { - console.log('已进入全屏模式 (WebKit旧版)'); - isDrag.value = true - } - }); + document.addEventListener('webkitfullscreenchange', function () { + if (!document.webkitFullscreenElement) { + console.log('已退出全屏模式 (WebKit旧版)') + isDrag.value = false + resetPosition() + } else { + console.log('已进入全屏模式 (WebKit旧版)') + isDrag.value = true + } + }) - document.addEventListener('msfullscreenchange', function () { - if (!document.msFullscreenElement) { - console.log('已退出全屏模式 (IE/Edge旧版)'); - isDrag.value = false - resetPosition() - } else { - console.log('已进入全屏模式 (IE/Edge旧版)'); - isDrag.value = true - } - }); + document.addEventListener('msfullscreenchange', function () { + if (!document.msFullscreenElement) { + console.log('已退出全屏模式 (IE/Edge旧版)') + isDrag.value = false + resetPosition() + } else { + console.log('已进入全屏模式 (IE/Edge旧版)') + isDrag.value = true + } + }) } //获取地图区域 const getList = async () => { @@ -399,25 +493,25 @@ const getPositionMapListFun = async (positionMapId) => { console.log(data) pointList.value = data - console.log(pointList.value) - let lineStyle = calculateDistanceAndAngle( - { - left: pointList.value[0].locationX, - top: pointList.value[0].locationY - }, - { - left: pointList.value[1].locationX, - top: pointList.value[1].locationY - } - ) - console.log(lineStyle) - lineList.value = [ - { - ...lineStyle, - color: '#1677ff', - height: 2 - } - ] + // console.log(pointList.value) + // let lineStyle = calculateDistanceAndAngle( + // { + // left: pointList.value[0].locationX, + // top: pointList.value[0].locationY + // }, + // { + // left: pointList.value[1].locationX, + // top: pointList.value[1].locationY + // } + // ) + // console.log(lineStyle) + // lineList.value = [ + // { + // ...lineStyle, + // color: '#1677ff', + // height: 2 + // } + // ] } const draggableElement = ref(null) const resetPosition = () => { @@ -505,6 +599,7 @@ const getMapData = async (item) => { }) imgUrl.value = data computedRatio() + getMapLineList() } const heightVal = ref(0) const widthVal = ref(0) @@ -563,6 +658,13 @@ const computedRatio = () => { }) } +const getMapLineList = () => { + MapApi.mapLineListGet({ positionMapId: nowObject.value.id }).then((res) => { + console.log(res) + lineList.value = res + }) +} + const getImageSize = (url) => { return new Promise((resolve, reject) => { const img = new Image() @@ -827,7 +929,7 @@ onUnmounted(() => { color: #98a4bf; margin-right: 2px; } -.affix-container-right{ +.affix-container-right { position: fixed; z-index: 999; right: 40px; @@ -836,7 +938,7 @@ onUnmounted(() => { align-items: center; justify-content: flex-end; } -.affix-container-right-item{ +.affix-container-right-item { width: 28px; height: 28px; cursor: pointer;