ak/zn-admin-vue3-wcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改实时地图

Browse Source
This commit is contained in:
xhf 2025-02-21 11:02:24 +08:00
parent 2e229b1743
commit 1047964d8e
1 changed files with 268 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

434
src/views/mapPage/realTimeMap/components/indexPage.vue
View File

@ -2,9 +2,13 @@
<div <div
class="affix-container" class="affix-container"
id="indexpage-container" id="indexpage-container"
:style="{ height: heightVal * radio + 'px',cursor:isDrag ? 'pointer' : 'default',scale:isSizeRaio,transformOrigin: 'center center' }" :style="{
height: heightVal * radio + 'px',
cursor: isDrag ? 'pointer' : 'default',
scale: isSizeRaio,
transformOrigin: 'center center'
}"
> >
<div <div
class="indexpage-container" class="indexpage-container"
v-if="imgUrl" v-if="imgUrl"
@ -17,21 +21,35 @@
<div class="indexpage-container-box-point"> <div class="indexpage-container-box-point">
<!-- 连线 --> <!-- 连线 -->
<!-- <div <div
class="line-box" class="line-box"
v-for="(item, index) in lineList" v-for="(item, index) in lineList"
:key="index" :key="index"
:style="{
left: item.left * radio + 'px',
top: item.top * radio + 'px',
width: item.distance * radio + 'px',
height: item.height * radio + 'px',
transform: 'rotate(' + item.angle + 'deg)',
backgroundColor: item.color,
transformOrigin: 'left top'
}"
> >
</div> --> <svg id="svg" :width="widthVal" :height="heightVal">
<template v-if="item.method == 0">
<line
:x1="(Number(item.startPointX) + Number(item.beginWidth) / 2)* radio"
:y1="(Number(item.startPointY) + Number(item.beginHigh) / 2)* radio"
:x2="(Number(item.endPointX) + Number(item.endWidth) / 2)* radio"
:y2="(Number(item.endPointY) + Number(item.endHigh) / 2)* radio"
stroke="#00329F"
stroke-width="5"
/>
</template>
<template v-else>
<path
:d="getCurvePath(item)"
:stroke="'#00329F'"
stroke-width="5"
fill="none"
/>
</template>
</svg>
</div>
<!-- 小车 --> <!-- 小车 -->
<div <div
class="indexpage-car-item" class="indexpage-car-item"
@ -41,8 +59,8 @@
:style="{ :style="{
left: item.realX * radio + 'px', left: item.realX * radio + 'px',
top: item.realY * radio + 'px', top: item.realY * radio + 'px',
width: 40 * radio + 'px', width: legendObj.carShow ? 40 * radio + 'px' : '0',
height: 22 * radio + 'px' height: legendObj.carShow ? 22 * radio + 'px' : '0'
}" }"
> >
<img <img
@ -57,6 +75,7 @@
:key="index" :key="index"
:style="{ left: item.locationX * radio + 'px', top: item.locationY * radio + 'px' }" :style="{ left: item.locationX * radio + 'px', top: item.locationY * radio + 'px' }"
> >
<!-- 库位点 -->
<div <div
class="indexpage-container-box-point-item-inner" class="indexpage-container-box-point-item-inner"
v-if="item.showData" v-if="item.showData"
@ -65,6 +84,7 @@
height: item.showData.locationDeep * radio + 'px' height: item.showData.locationDeep * radio + 'px'
}" }"
> >
<!-- 库位 2-->
<div v-if="item.type == 2" style="width: 100%; height: 100%"> <div v-if="item.type == 2" style="width: 100%; height: 100%">
<el-popover placement="top-start" trigger="hover" width="auto"> <el-popover placement="top-start" trigger="hover" width="auto">
<template #reference> <template #reference>
@ -112,72 +132,129 @@
</div> </div>
</el-popover> </el-popover>
</div> </div>
<div v-else style="width: 100%; height: 100%"> <!-- 设备点 -->
<img :src="item.imgUrl" alt="" style="width: 100%; height: 100%" /> <div v-if="item.type == 3">
</div> <img :src="item.formattedData.mapImageUrl" alt="" style="width: 100%;height: 100%;"/>
</div>
</div> </div>
<div v-else style="width: 10px; height: 10px; border-radius: 50%; background: #1890ff"> <!-- 设备点 -->
<div
class="indexpage-container-box-point-item-inner"
v-if="item.type == 3"
:style="{
width: item.formattedData.locationWide * radio + 'px',
height: item.formattedData.locationDeep * radio + 'px'
}"
>
<div >
<img :src="item.formattedData.mapImageUrl" alt="" style="width: 100%;height: 100%;"/>
</div>
</div>
<div v-if="item.type == 1" style="width: 10px; height: 10px; border-radius: 50%; background: #1890ff">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 左下角图例 --> <!-- 左下角图例 -->
<div class="affix-container-left" :style="{ left: boxLeft + 'px' }"> <div class="affix-container-left" :style="{ left: boxLeft + 'px' }">
<div class="affix-container-left-box"> <div class="affix-container-left-box">
<div class="affix-container-left-box-item-box" :style="{ height: legendObj.legendShow ? '84px' : '0', overflow: 'hidden',transition: 'all 0.3s ease-in-out'}"> <div
<div class="affix-container-left-box-item"> class="affix-container-left-box-item-box"
<div class="affix-container-left-box-item-left"> 行驶路线 </div> :style="{
<img height: legendObj.legendShow ? '84px' : '0',
src="@/assets/imgs/indexPage/yanjing_xianshi_o.png" overflow: 'hidden',
alt="" transition: 'all 0.3s ease-in-out'
class="affix-container-left-box-item-img" }"
v-if="legendObj.driveLineShow" >
@click="changDriveLineShow" <div class="affix-container-left-box-item">
/> <div class="affix-container-left-box-item-left"> 行驶路线 </div>
<img src="@/assets/imgs/indexPage/yanjing_yincang_o.png" alt="" class="affix-container-left-box-item-img" v-if="!legendObj.driveLineShow" @click="changDriveLineShow"/> <img
</div> src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
<div class="affix-container-left-box-item"> alt=""
<div class="affix-container-left-box-item-left"> 车辆 </div> class="affix-container-left-box-item-img"
<img v-if="legendObj.driveLineShow"
src="@/assets/imgs/indexPage/yanjing_xianshi_o.png" @click="changDriveLineShow"
alt="" />
class="affix-container-left-box-item-img" <img
v-if="legendObj.carShow" src="@/assets/imgs/indexPage/yanjing_yincang_o.png"
@click="changCarShow" alt=""
/> class="affix-container-left-box-item-img"
<img src="@/assets/imgs/indexPage/yanjing_yincang_o.png" alt="" class="affix-container-left-box-item-img" v-if="!legendObj.carShow" @click="changCarShow"/> v-if="!legendObj.driveLineShow"
</div> @click="changDriveLineShow"
/>
</div> </div>
<div class="affix-container-left-box-item-bottom" @click="legendObj.legendShow = !legendObj.legendShow"> <div class="affix-container-left-box-item">
<div class="affix-container-left-box-item-bottom-left"> <div class="affix-container-left-box-item-left"> 车辆 </div>
图例 <img
</div> src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
<img src="@/assets/imgs/indexPage/zhankai@2x.png" alt="" class="affix-container-left-box-item-bottom-img" :style="{transform: legendObj.legendShow ? 'rotate(180deg)' : 'rotate(0deg)',transition: 'all 0.3s ease-in-out'}"/> alt=""
</div> class="affix-container-left-box-item-img"
v-if="legendObj.carShow"
@click="changCarShow"
/>
<img
src="@/assets/imgs/indexPage/yanjing_yincang_o.png"
alt=""
class="affix-container-left-box-item-img"
v-if="!legendObj.carShow"
@click="changCarShow"
/>
</div>
</div>
<div
class="affix-container-left-box-item-bottom"
@click="legendObj.legendShow = !legendObj.legendShow"
>
<div class="affix-container-left-box-item-bottom-left"> 图例 </div>
<img
src="@/assets/imgs/indexPage/zhankai@2x.png"
alt=""
class="affix-container-left-box-item-bottom-img"
:style="{
transform: legendObj.legendShow ? 'rotate(180deg)' : 'rotate(0deg)',
transition: 'all 0.3s ease-in-out'
}"
/>
</div> </div>
</div> </div>
</div>
<!-- 右下角的功能 --> <!-- 右下角的功能 -->
<div class="affix-container-right"> <div class="affix-container-right">
<!-- 拖拽 --> <!-- 拖拽 -->
<div class="affix-container-right-item" @click="changeIsDrag"> <div class="affix-container-right-item" @click="changeIsDrag">
<img src="@/assets/imgs/indexPage/编组 12.png" alt="" style="width: 100%;height: 100%;" /> <img src="@/assets/imgs/indexPage/编组 12.png" alt="" style="width: 100%; height: 100%" />
</div> </div>
<!-- 放大 --> <!-- 放大 -->
<div class="affix-container-right-item"> <div class="affix-container-right-item">
<img src="@/assets/imgs/indexPage/编组 14.png" alt="" style="width: 100%;height: 100%;" @click="changeSizeRaio(0.2)"/> <img
</div> src="@/assets/imgs/indexPage/编组 14.png"
<!-- 缩小 --> alt=""
<div class="affix-container-right-item"> style="width: 100%; height: 100%"
<img src="@/assets/imgs/indexPage/编组 15.png" alt="" style="width: 100%;height: 100%;" @click="changeSizeRaio(-0.2)"/> @click="changeSizeRaio(0.2)"
</div> />
<!-- 全屏 --> </div>
<div class="affix-container-right-item"> <!-- 缩小 -->
<img src="@/assets/imgs/indexPage/编组 22.png" alt="" style="width: 100%;height: 100%;" @click="toggleFullScreen" /> <div class="affix-container-right-item">
</div> <img
</div> src="@/assets/imgs/indexPage/编组 15.png"
alt=""
style="width: 100%; height: 100%"
@click="changeSizeRaio(-0.2)"
/>
</div>
<!-- 全屏 -->
<div class="affix-container-right-item">
<img
src="@/assets/imgs/indexPage/编组 22.png"
alt=""
style="width: 100%; height: 100%"
@click="toggleFullScreen"
/>
</div>
</div>
<storeDialog ref="storeDialogRef" @success="getList" /> <storeDialog ref="storeDialogRef" @success="getList" />
<carDialog ref="carDialogRef" /> <carDialog ref="carDialogRef" />
</template> </template>
@ -190,7 +267,7 @@ import {
nextTick, nextTick,
onMounted, onMounted,
onBeforeUnmount, onBeforeUnmount,
onUnmounted, onUnmounted
} from 'vue' } from 'vue'
import * as MapApi from '@/api/map/map' import * as MapApi from '@/api/map/map'
import WebSocketClient from '../webSocket.js' import WebSocketClient from '../webSocket.js'
@ -233,29 +310,36 @@ const carPointListFun = () => {
const isDrag = ref(false) const isDrag = ref(false)
const changeIsDrag = () => { const changeIsDrag = () => {
nextTick(() => { nextTick(() => {
isDrag.value = !isDrag.value isDrag.value = !isDrag.value
console.log(isDrag.value) console.log(isDrag.value)
if(!isDrag.value){ if (!isDrag.value) {
//还原位置 //还原位置
resetPosition() 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 isSizeRaio = ref(1)
const changeSizeRaio = (type) => { const changeSizeRaio = (type) => {
if(type<0 && (isSizeRaio.value + type) <= 0){ if (type < 0 && isSizeRaio.value + type <= 0) {
return return
} }
isSizeRaio.value += type isSizeRaio.value += type
} }
//图例状态 //图例状态
const legendObj = reactive({ const legendObj = reactive({
driveLineShow:false, driveLineShow: false,
carShow:false, carShow: false,
legendShow:true legendShow: true
}) })
// 车辆是否显示 // 车辆是否显示
const changCarShow = () => { const changCarShow = () => {
@ -266,29 +350,39 @@ const changDriveLineShow = () => {
legendObj.driveLineShow = !legendObj.driveLineShow legendObj.driveLineShow = !legendObj.driveLineShow
} }
const toggleFullScreen = () => { const toggleFullScreen = () => {
var elem = document.getElementById("indexpage-container"); // 获取元素 var elem = document.getElementById('indexpage-container') // 获取元素
if (!document.fullscreenElement) { // 检查是否已经是全屏模式 if (!document.fullscreenElement) {
if (elem.requestFullscreen) { // 支持requestFullscreen API的标准方式 // 检查是否已经是全屏模式
elem.requestFullscreen().catch(err => { if (elem.requestFullscreen) {
alert(`无法进入全屏模式: ${err.message}`); // 处理错误情况 // 支持requestFullscreen API的标准方式
}); elem.requestFullscreen().catch((err) => {
} else if (elem.mozRequestFullScreen) { // 旧版Firefox的API名称（已废弃） alert(`无法进入全屏模式: ${err.message}`) // 处理错误情况
elem.mozRequestFullScreen(); })
} else if (elem.webkitRequestFullscreen) { // WebKit/Safari/Chrome的API名称（已废弃） } else if (elem.mozRequestFullScreen) {
elem.webkitRequestFullscreen(); // 旧版Firefox的API名称（已废弃）
} else if (elem.msRequestFullscreen) { // IE/Edge的API名称（已废弃） elem.mozRequestFullScreen()
elem.msRequestFullscreen(); } else if (elem.webkitRequestFullscreen) {
// WebKit/Safari/Chrome的API名称（已废弃）
elem.webkitRequestFullscreen()
} else if (elem.msRequestFullscreen) {
// IE/Edge的API名称（已废弃）
elem.msRequestFullscreen()
} }
isDrag.value = true isDrag.value = true
} else { // 退出全屏模式 } else {
if (document.exitFullscreen) { // 标准API退出全屏模式 // 退出全屏模式
document.exitFullscreen(); if (document.exitFullscreen) {
} else if (document.mozCancelFullScreen) { // 旧版Firefox的API名称（已废弃） // 标准API退出全屏模式
document.mozCancelFullScreen(); document.exitFullscreen()
} else if (document.webkitExitFullscreen) { // WebKit/Safari/Chrome的API名称（已废弃） } else if (document.mozCancelFullScreen) {
document.webkitExitFullscreen(); // 旧版Firefox的API名称（已废弃）
} else if (document.msExitFullscreen) { // IE/Edge的API名称（已废弃） document.mozCancelFullScreen()
document.msExitFullscreen(); } else if (document.webkitExitFullscreen) {
// WebKit/Safari/Chrome的API名称（已废弃）
document.webkitExitFullscreen()
} else if (document.msExitFullscreen) {
// IE/Edge的API名称（已废弃）
document.msExitFullscreen()
} }
console.log('退出全屏') console.log('退出全屏')
isDrag.value = false isDrag.value = false
@ -296,51 +390,51 @@ const toggleFullScreen = () => {
} }
// 监听全屏状态变化事件 // 监听全屏状态变化事件
document.addEventListener('fullscreenchange', function () { document.addEventListener('fullscreenchange', function () {
if (!document.fullscreenElement) { if (!document.fullscreenElement) {
console.log('已退出全屏模式'); console.log('已退出全屏模式')
// 在这里可以添加退出全屏后的逻辑 // 在这里可以添加退出全屏后的逻辑
isDrag.value = false isDrag.value = false
resetPosition() resetPosition()
} else { } else {
console.log('已进入全屏模式'); console.log('已进入全屏模式')
// 在这里可以添加进入全屏后的逻辑 // 在这里可以添加进入全屏后的逻辑
isDrag.value = true isDrag.value = true
} }
}); })
// 监听旧版浏览器的全屏状态变化事件 // 监听旧版浏览器的全屏状态变化事件
document.addEventListener('mozfullscreenchange', function () { document.addEventListener('mozfullscreenchange', function () {
if (!document.mozFullScreenElement) { if (!document.mozFullScreenElement) {
console.log('已退出全屏模式 (Firefox旧版)'); console.log('已退出全屏模式 (Firefox旧版)')
isDrag.value = false isDrag.value = false
resetPosition() resetPosition()
} else { } else {
console.log('已进入全屏模式 (Firefox旧版)'); console.log('已进入全屏模式 (Firefox旧版)')
isDrag.value = true isDrag.value = true
} }
}); })
document.addEventListener('webkitfullscreenchange', function () { document.addEventListener('webkitfullscreenchange', function () {
if (!document.webkitFullscreenElement) { if (!document.webkitFullscreenElement) {
console.log('已退出全屏模式 (WebKit旧版)'); console.log('已退出全屏模式 (WebKit旧版)')
isDrag.value = false isDrag.value = false
resetPosition() resetPosition()
} else { } else {
console.log('已进入全屏模式 (WebKit旧版)'); console.log('已进入全屏模式 (WebKit旧版)')
isDrag.value = true isDrag.value = true
} }
}); })
document.addEventListener('msfullscreenchange', function () { document.addEventListener('msfullscreenchange', function () {
if (!document.msFullscreenElement) { if (!document.msFullscreenElement) {
console.log('已退出全屏模式 (IE/Edge旧版)'); console.log('已退出全屏模式 (IE/Edge旧版)')
isDrag.value = false isDrag.value = false
resetPosition() resetPosition()
} else { } else {
console.log('已进入全屏模式 (IE/Edge旧版)'); console.log('已进入全屏模式 (IE/Edge旧版)')
isDrag.value = true isDrag.value = true
} }
}); })
} }
//获取地图区域 //获取地图区域
const getList = async () => { const getList = async () => {
@ -399,25 +493,25 @@ const getPositionMapListFun = async (positionMapId) => {
console.log(data) console.log(data)
pointList.value = data pointList.value = data
console.log(pointList.value) // console.log(pointList.value)
let lineStyle = calculateDistanceAndAngle( // let lineStyle = calculateDistanceAndAngle(
{ // {
left: pointList.value[0].locationX, // left: pointList.value[0].locationX,
top: pointList.value[0].locationY // top: pointList.value[0].locationY
}, // },
{ // {
left: pointList.value[1].locationX, // left: pointList.value[1].locationX,
top: pointList.value[1].locationY // top: pointList.value[1].locationY
} // }
) // )
console.log(lineStyle) // console.log(lineStyle)
lineList.value = [ // lineList.value = [
{ // {
...lineStyle, // ...lineStyle,
color: '#1677ff', // color: '#1677ff',
height: 2 // height: 2
} // }
] // ]
} }
const draggableElement = ref(null) const draggableElement = ref(null)
const resetPosition = () => { const resetPosition = () => {
@ -505,6 +599,7 @@ const getMapData = async (item) => {
}) })
imgUrl.value = data imgUrl.value = data
computedRatio() computedRatio()
getMapLineList()
} }
const heightVal = ref(0) const heightVal = ref(0)
const widthVal = 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) => { const getImageSize = (url) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const img = new Image() const img = new Image()
@ -827,7 +929,7 @@ onUnmounted(() => {
color: #98a4bf; color: #98a4bf;
margin-right: 2px; margin-right: 2px;
} }
.affix-container-right{ .affix-container-right {
position: fixed; position: fixed;
z-index: 999; z-index: 999;
right: 40px; right: 40px;
@ -836,7 +938,7 @@ onUnmounted(() => {
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
.affix-container-right-item{ .affix-container-right-item {
width: 28px; width: 28px;
height: 28px; height: 28px;
cursor: pointer; cursor: pointer;