修改实时地图的标记线和箭头
This commit is contained in:
xhf
parent
e04977d893
commit
378fdecb89
@ -26,7 +26,7 @@
|
||||
/>
|
||||
<el-option
|
||||
:label="'手动充电'"
|
||||
:value="2"
|
||||
:value="0"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
@ -22,63 +22,55 @@
|
||||
<div class="indexpage-container-box-point">
|
||||
<!-- 连线 -->
|
||||
<div v-if="legendObj.driveLineShow">
|
||||
<div class="line-box" v-for="(item, index) in lineList" :key="index">
|
||||
<div class="line-box">
|
||||
<svg id="svg" :width="widthVal" :height="heightVal">
|
||||
<!-- 定义箭头 -->
|
||||
<defs>
|
||||
<marker
|
||||
id="forward-arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="10"
|
||||
refY="5"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
|
||||
</marker>
|
||||
<!-- 反向箭头 -->
|
||||
<marker
|
||||
id="backward-arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="0"
|
||||
refY="5"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M 10 0 L 0 5 L 10 10 z" fill="black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<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 * radio"
|
||||
:marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''"
|
||||
marker-end="url(#single-arrow)"
|
||||
/>
|
||||
<path
|
||||
:d="getLineMidArrowPath(item)"
|
||||
stroke="none"
|
||||
fill="black"
|
||||
stroke-width="4"
|
||||
:marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
|
||||
:marker-end="
|
||||
item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<path
|
||||
:d="getCurvePath(item)"
|
||||
:stroke="'#00329F'"
|
||||
:stroke-width="5 * radio"
|
||||
fill="none"
|
||||
:marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
|
||||
:marker-end="
|
||||
item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
|
||||
"
|
||||
/>
|
||||
<template v-for="(item, index) in lineList" :key="index">
|
||||
<!-- 定义箭头 -->
|
||||
<defs>
|
||||
<marker id="forward-arrow" viewBox="0 0 10 10" refX="10" refY="5" orient="auto">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
|
||||
</marker>
|
||||
<!-- 反向箭头 -->
|
||||
<marker id="backward-arrow" viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
|
||||
<path d="M 10 0 L 0 5 L 10 10 z" fill="black" />
|
||||
</marker>
|
||||
</defs>
|
||||
<template v-if="item.method == 0">
|
||||
<line
|
||||
:x1="Number(item.startPointX) * radio"
|
||||
:y1="Number(item.startPointY) * radio"
|
||||
:x2="Number(item.endPointX) * radio"
|
||||
:y2="Number(item.endPointY) * radio"
|
||||
:stroke="item.isSelect ? '#f48924' : '#00329F'"
|
||||
:stroke-width="5 * radio"
|
||||
:marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''"
|
||||
marker-end="url(#single-arrow)"
|
||||
@click="handleChooseRoute(item, index)"
|
||||
/>
|
||||
<path
|
||||
:d="getLineMidArrowPath(item)"
|
||||
stroke="none"
|
||||
fill="black"
|
||||
stroke-width="4"
|
||||
:marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
|
||||
:marker-end="
|
||||
item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<path
|
||||
:d="getCurvePath(item)"
|
||||
:stroke="item.isSelect ? '#f48924' : '#00329F'"
|
||||
:stroke-width="5 * radio"
|
||||
fill="none"
|
||||
:marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
|
||||
:marker-end="
|
||||
item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
|
||||
"
|
||||
@click="handleChooseRoute(item, index)"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</svg>
|
||||
</div>
|
||||
@ -106,7 +98,16 @@
|
||||
class="indexpage-container-box-point-item"
|
||||
v-for="(item, index) in pointList"
|
||||
:key="index"
|
||||
:style="{ left: item.locationX * radio + 'px', top: item.locationY * radio + 'px' }"
|
||||
:style="{
|
||||
left:
|
||||
(item.locationX - item.locationWide / 2 / nowObject.showYamlJson.resolution / 100) *
|
||||
radio +
|
||||
'px',
|
||||
top:
|
||||
(item.locationY - item.locationDeep / 2 / nowObject.showYamlJson.resolution / 100) *
|
||||
radio +
|
||||
'px'
|
||||
}"
|
||||
>
|
||||
<!-- 库位点 -->
|
||||
<div
|
||||
@ -237,8 +238,8 @@
|
||||
class="indexpage-container-box-point-item-inner"
|
||||
v-if="item.type == 5"
|
||||
:style="{
|
||||
width: 40 * radio + 'px',
|
||||
height: 40 * radio + 'px'
|
||||
width: 150 * radio + 'px',
|
||||
height: 150 * radio + 'px'
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
@ -258,8 +259,8 @@
|
||||
class="indexpage-container-box-point-item-inner"
|
||||
v-if="item.type == 6"
|
||||
:style="{
|
||||
width: 40 * radio + 'px',
|
||||
height: 40 * radio + 'px'
|
||||
width: 150 * radio + 'px',
|
||||
height: 150 * radio + 'px'
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
@ -282,10 +283,15 @@
|
||||
placement="top"
|
||||
v-if="item.type == 1"
|
||||
>
|
||||
|
||||
<div :style="{ width: 10 * radio + 'px', height: 10 * radio + 'px', background: '#000',borderRadius:'50%'}">
|
||||
</div>
|
||||
|
||||
<div
|
||||
:style="{
|
||||
width: 10 * radio + 'px',
|
||||
height: 10 * radio + 'px',
|
||||
background: '#000',
|
||||
borderRadius: '50%'
|
||||
}"
|
||||
>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
@ -411,6 +417,7 @@ import { color } from 'echarts'
|
||||
import { resetDragPosition } from '@/utils/drag'
|
||||
import carDialog from './carDialog.vue'
|
||||
import { is } from 'bpmn-js/lib/util/ModelUtil'
|
||||
import JSONBigInt from 'json-bigint'
|
||||
const imgUrl = ref('')
|
||||
const carDialogRef = ref(null)
|
||||
const socketClient = ref(null)
|
||||
@ -453,12 +460,26 @@ const changeIsDrag = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleChooseRoute = (val, i) => {
|
||||
console.log('============================', val)
|
||||
if (lineList.value.length) {
|
||||
lineList.value.forEach((item, index) => {
|
||||
if (index == i) {
|
||||
item.isSelect = true
|
||||
} else {
|
||||
item.isSelect = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 获取曲线的路径
|
||||
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
|
||||
let startPointX = Number(curve.startPointX) * radio.value
|
||||
let startPointY = Number(curve.startPointY) * radio.value
|
||||
let endPointX = Number(curve.endPointX) * radio.value
|
||||
let endPointY = Number(curve.endPointY) * 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}`
|
||||
}
|
||||
@ -628,7 +649,30 @@ const getPositionMapListFun = async (positionMapId) => {
|
||||
// console.log(data)
|
||||
pointList.value = data
|
||||
|
||||
// console.log(pointList.value)
|
||||
console.log('=======================', pointList.value)
|
||||
pointList.value.forEach((item) => {
|
||||
if (item.type === 1) {
|
||||
item.locationDeep = 40
|
||||
item.locationWide = 40
|
||||
} else if (item.type === 5 || item.type === 6) {
|
||||
item.locationDeep = 150
|
||||
item.locationWide = 150
|
||||
} else if (item.type === 2) {
|
||||
//库位点
|
||||
item.dataList = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
|
||||
item.locationDeep = item.dataList[0].locationDeep
|
||||
item.locationWide = item.dataList[0].locationWide
|
||||
} else if (item.type === 3) {
|
||||
item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
|
||||
item.locationDeep = item.dataObj.locationDeep
|
||||
item.locationWide = item.dataObj.locationWide
|
||||
} else if (item.type === 4) {
|
||||
item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
|
||||
item.locationDeep = item.dataObj.locationDeep
|
||||
item.locationWide = item.dataObj.locationWide
|
||||
} else if (item.type === 7) {
|
||||
}
|
||||
})
|
||||
// let lineStyle = calculateDistanceAndAngle(
|
||||
// {
|
||||
// left: pointList.value[0].locationX,
|
||||
@ -656,11 +700,11 @@ const resetPosition = () => {
|
||||
}
|
||||
// 计算直线中间箭头的路径
|
||||
const getLineMidArrowPath = (item) => {
|
||||
const midX = (Number(item.startPointX) + Number(item.endPointX)) / 2 * radio.value
|
||||
const midY = (Number(item.startPointY) + Number(item.endPointY)) / 2 * radio.value
|
||||
const midX = ((Number(item.startPointX) + Number(item.endPointX)) / 2) * radio.value
|
||||
const midY = ((Number(item.startPointY) + Number(item.endPointY)) / 2) * radio.value
|
||||
|
||||
let dx = item.endPointX* radio.value - item.startPointX* radio.value
|
||||
let dy = item.endPointY* radio.value - item.startPointY* radio.value
|
||||
let dx = item.endPointX * radio.value - item.startPointX * radio.value
|
||||
let dy = item.endPointY * radio.value - item.startPointY * radio.value
|
||||
let length = Math.sqrt(dx * dx + dy * dy)
|
||||
|
||||
if (length === 0) {
|
||||
@ -754,7 +798,7 @@ const disconnect = () => {
|
||||
}
|
||||
//获取扫描图
|
||||
const getMapData = async (item) => {
|
||||
console.log('============', JSON.parse(item.yamlJson))
|
||||
// console.log('============', JSON.parse(item.yamlJson))
|
||||
nowObject.value = JSON.parse(JSON.stringify(item))
|
||||
nowObject.value.showYamlJson = JSON.parse(item.yamlJson)
|
||||
let websoketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user