修改实时地图

This commit is contained in:
xhf 2025-02-21 11:02:24 +08:00
parent 2e229b1743
commit 1047964d8e

View File

@ -2,9 +2,13 @@
<div
class="affix-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
class="indexpage-container"
v-if="imgUrl"
@ -17,21 +21,35 @@
<div class="indexpage-container-box-point">
<!-- 连线 -->
<!-- <div
<div
class="line-box"
v-for="(item, index) in lineList"
: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
class="indexpage-car-item"
@ -41,8 +59,8 @@
:style="{
left: item.realX * radio + 'px',
top: item.realY * radio + 'px',
width: 40 * radio + 'px',
height: 22 * radio + 'px'
width: legendObj.carShow ? 40 * radio + 'px' : '0',
height: legendObj.carShow ? 22 * radio + 'px' : '0'
}"
>
<img
@ -57,6 +75,7 @@
:key="index"
:style="{ left: item.locationX * radio + 'px', top: item.locationY * radio + 'px' }"
>
<!-- 库位点 -->
<div
class="indexpage-container-box-point-item-inner"
v-if="item.showData"
@ -65,6 +84,7 @@
height: item.showData.locationDeep * radio + 'px'
}"
>
<!-- 库位 2-->
<div v-if="item.type == 2" style="width: 100%; height: 100%">
<el-popover placement="top-start" trigger="hover" width="auto">
<template #reference>
@ -112,72 +132,129 @@
</div>
</el-popover>
</div>
<div v-else style="width: 100%; height: 100%">
<img :src="item.imgUrl" alt="" style="width: 100%; height: 100%" />
</div>
<!-- 设备点 -->
<div v-if="item.type == 3">
<img :src="item.formattedData.mapImageUrl" alt="" style="width: 100%;height: 100%;"/>
</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 class="affix-container-left" :style="{ left: boxLeft + 'px' }">
<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 class="affix-container-left-box-item">
<div class="affix-container-left-box-item-left"> 行驶路线 </div>
<img
src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
alt=""
class="affix-container-left-box-item-img"
v-if="legendObj.driveLineShow"
@click="changDriveLineShow"
/>
<img src="@/assets/imgs/indexPage/yanjing_yincang_o.png" alt="" class="affix-container-left-box-item-img" v-if="!legendObj.driveLineShow" @click="changDriveLineShow"/>
</div>
<div class="affix-container-left-box-item">
<div class="affix-container-left-box-item-left"> 车辆 </div>
<img
src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
alt=""
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 class="affix-container-left" :style="{ left: boxLeft + 'px' }">
<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 class="affix-container-left-box-item">
<div class="affix-container-left-box-item-left"> 行驶路线 </div>
<img
src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
alt=""
class="affix-container-left-box-item-img"
v-if="legendObj.driveLineShow"
@click="changDriveLineShow"
/>
<img
src="@/assets/imgs/indexPage/yanjing_yincang_o.png"
alt=""
class="affix-container-left-box-item-img"
v-if="!legendObj.driveLineShow"
@click="changDriveLineShow"
/>
</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 class="affix-container-left-box-item">
<div class="affix-container-left-box-item-left"> 车辆 </div>
<img
src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
alt=""
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 class="affix-container-right">
<!-- 拖拽 -->
<div class="affix-container-right-item" @click="changeIsDrag">
<img src="@/assets/imgs/indexPage/编组 12.png" alt="" style="width: 100%;height: 100%;" />
</div>
<!-- 放大 -->
<div class="affix-container-right-item">
<img src="@/assets/imgs/indexPage/编组 14.png" alt="" style="width: 100%;height: 100%;" @click="changeSizeRaio(0.2)"/>
</div>
<!-- 缩小 -->
<div class="affix-container-right-item">
<img 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>
<!-- 右下角的功能 -->
<div class="affix-container-right">
<!-- 拖拽 -->
<div class="affix-container-right-item" @click="changeIsDrag">
<img src="@/assets/imgs/indexPage/编组 12.png" alt="" style="width: 100%; height: 100%" />
</div>
<!-- 放大 -->
<div class="affix-container-right-item">
<img
src="@/assets/imgs/indexPage/编组 14.png"
alt=""
style="width: 100%; height: 100%"
@click="changeSizeRaio(0.2)"
/>
</div>
<!-- 缩小 -->
<div class="affix-container-right-item">
<img
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" />
<carDialog ref="carDialogRef" />
</template>
@ -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) { // FirefoxAPI
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { // WebKit/Safari/ChromeAPI
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { // IE/EdgeAPI
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) {
// FirefoxAPI
elem.mozRequestFullScreen()
} else if (elem.webkitRequestFullscreen) {
// WebKit/Safari/ChromeAPI
elem.webkitRequestFullscreen()
} else if (elem.msRequestFullscreen) {
// IE/EdgeAPI
elem.msRequestFullscreen()
}
isDrag.value = true
} else { // 退
if (document.exitFullscreen) { // API退
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // FirefoxAPI
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // WebKit/Safari/ChromeAPI
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/EdgeAPI
document.msExitFullscreen();
} else {
// 退
if (document.exitFullscreen) {
// API退
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
// FirefoxAPI
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
// WebKit/Safari/ChromeAPI
document.webkitExitFullscreen()
} else if (document.msExitFullscreen) {
// IE/EdgeAPI
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;