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-27 17:27:25 +08:00
parent e04977d893
commit 378fdecb89
2 changed files with 120 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/board/device/createEditDialog.vue
View File

@ -26,7 +26,7 @@
/> />
<el-option <el-option
:label="'手动充电'" :label="'手动充电'"
:value="2" :value="0"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>

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

@ -22,63 +22,55 @@
<div class="indexpage-container-box-point"> <div class="indexpage-container-box-point">
<!-- 连线 --> <!-- 连线 -->
<div v-if="legendObj.driveLineShow"> <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"> <svg id="svg" :width="widthVal" :height="heightVal">
<!-- 定义箭头 --> <template v-for="(item, index) in lineList" :key="index">
<defs> <!-- 定义箭头 -->
<marker <defs>
id="forward-arrow" <marker id="forward-arrow" viewBox="0 0 10 10" refX="10" refY="5" orient="auto">
viewBox="0 0 10 10" <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
refX="10" </marker>
refY="5" <!-- 反向箭头 -->
orient="auto" <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" />
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" /> </marker>
</marker> </defs>
<!-- 反向箭头 --> <template v-if="item.method == 0">
<marker <line
id="backward-arrow" :x1="Number(item.startPointX) * radio"
viewBox="0 0 10 10" :y1="Number(item.startPointY) * radio"
refX="0" :x2="Number(item.endPointX) * radio"
refY="5" :y2="Number(item.endPointY) * radio"
orient="auto" :stroke="item.isSelect ? '#f48924' : '#00329F'"
> :stroke-width="5 * radio"
<path d="M 10 0 L 0 5 L 10 10 z" fill="black" /> :marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''"
</marker> marker-end="url(#single-arrow)"
</defs> @click="handleChooseRoute(item, index)"
<template v-if="item.method == 0"> />
<line <path
:x1="(Number(item.startPointX) + Number(item.beginWidth) / 2) * radio" :d="getLineMidArrowPath(item)"
:y1="(Number(item.startPointY) + Number(item.beginHigh) / 2) * radio" stroke="none"
:x2="(Number(item.endPointX) + Number(item.endWidth) / 2) * radio" fill="black"
:y2="(Number(item.endPointY) + Number(item.endHigh) / 2) * radio" stroke-width="4"
stroke="#00329F" :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
:stroke-width="5 * radio" :marker-end="
:marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''" item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
marker-end="url(#single-arrow)" "
/> />
<path </template>
:d="getLineMidArrowPath(item)" <template v-else>
stroke="none" <path
fill="black" :d="getCurvePath(item)"
stroke-width="4" :stroke="item.isSelect ? '#f48924' : '#00329F'"
:marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''" :stroke-width="5 * radio"
:marker-end=" fill="none"
item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)' :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
" :marker-end="
/> item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
</template> "
<template v-else> @click="handleChooseRoute(item, index)"
<path />
:d="getCurvePath(item)" </template>
: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> </template>
</svg> </svg>
</div> </div>
@ -106,7 +98,16 @@
class="indexpage-container-box-point-item" class="indexpage-container-box-point-item"
v-for="(item, index) in pointList" v-for="(item, index) in pointList"
:key="index" :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 <div
@ -237,8 +238,8 @@
class="indexpage-container-box-point-item-inner" class="indexpage-container-box-point-item-inner"
v-if="item.type == 5" v-if="item.type == 5"
:style="{ :style="{
width: 40 * radio + 'px', width: 150 * radio + 'px',
height: 40 * radio + 'px' height: 150 * radio + 'px'
}" }"
> >
<div> <div>
@ -258,8 +259,8 @@
class="indexpage-container-box-point-item-inner" class="indexpage-container-box-point-item-inner"
v-if="item.type == 6" v-if="item.type == 6"
:style="{ :style="{
width: 40 * radio + 'px', width: 150 * radio + 'px',
height: 40 * radio + 'px' height: 150 * radio + 'px'
}" }"
> >
<div> <div>
@ -282,10 +283,15 @@
placement="top" placement="top"
v-if="item.type == 1" v-if="item.type == 1"
> >
<div
<div :style="{ width: 10 * radio + 'px', height: 10 * radio + 'px', background: '#000',borderRadius:'50%'}"> :style="{
</div> width: 10 * radio + 'px',
height: 10 * radio + 'px',
background: '#000',
borderRadius: '50%'
}"
>
</div>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
@ -411,6 +417,7 @@ import { color } from 'echarts'
import { resetDragPosition } from '@/utils/drag' import { resetDragPosition } from '@/utils/drag'
import carDialog from './carDialog.vue' import carDialog from './carDialog.vue'
import { is } from 'bpmn-js/lib/util/ModelUtil' import { is } from 'bpmn-js/lib/util/ModelUtil'
import JSONBigInt from 'json-bigint'
const imgUrl = ref('') const imgUrl = ref('')
const carDialogRef = ref(null) const carDialogRef = ref(null)
const socketClient = 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) => { const getCurvePath = (curve) => {
let startPointX = (Number(curve.startPointX) + Number(curve.beginWidth) / 2) * radio.value let startPointX = Number(curve.startPointX) * radio.value
let startPointY = (Number(curve.startPointY) + Number(curve.beginHigh) / 2) * radio.value let startPointY = Number(curve.startPointY) * radio.value
let endPointX = (Number(curve.endPointX) + Number(curve.endWidth) / 2) * radio.value let endPointX = Number(curve.endPointX) * radio.value
let endPointY = (Number(curve.endPointY) + Number(curve.endHigh) / 2) * 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}` 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) // console.log(data)
pointList.value = 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( // let lineStyle = calculateDistanceAndAngle(
// { // {
// left: pointList.value[0].locationX, // left: pointList.value[0].locationX,
@ -656,11 +700,11 @@ const resetPosition = () => {
} }
// 计算直线中间箭头的路径 // 计算直线中间箭头的路径
const getLineMidArrowPath = (item) => { const getLineMidArrowPath = (item) => {
const midX = (Number(item.startPointX) + Number(item.endPointX)) / 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 const midY = ((Number(item.startPointY) + Number(item.endPointY)) / 2) * radio.value
let dx = item.endPointX* radio.value - item.startPointX* radio.value let dx = item.endPointX * radio.value - item.startPointX * radio.value
let dy = item.endPointY* radio.value - item.startPointY* radio.value let dy = item.endPointY * radio.value - item.startPointY * radio.value
let length = Math.sqrt(dx * dx + dy * dy) let length = Math.sqrt(dx * dx + dy * dy)
if (length === 0) { if (length === 0) {
@ -754,7 +798,7 @@ const disconnect = () => {
} }
//获取扫描图 //获取扫描图
const getMapData = async (item) => { 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 = JSON.parse(JSON.stringify(item))
nowObject.value.showYamlJson = JSON.parse(item.yamlJson) 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}` let websoketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}`