@@ -27,11 +27,27 @@
-
+
-
+
@@ -42,7 +58,7 @@
:x2="Number(item.endPointX) * radio"
:y2="Number(item.endPointY) * radio"
:stroke="item.isSelect ? '#f48924' : '#00329F'"
- :stroke-width="5 * radio"
+ :stroke-width="4 * radio"
:marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''"
marker-end="url(#single-arrow)"
@click="handleChooseRoute(item, index)"
@@ -51,7 +67,7 @@
:d="getLineMidArrowPath(item)"
stroke="none"
fill="black"
- stroke-width="4"
+ :stroke-width="4 * radio"
:marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
:marker-end="
item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
@@ -62,7 +78,7 @@
@@ -107,209 +122,93 @@
:key="index"
:style="{
left:
- (item.locationX - item.locationWide / 2 / nowObject.showYamlJson.resolution / 100) *
- radio +
- 'px',
+ (Number(item.locationX) - Number(item.locationWidePx) / 2) * Number(radio) + 'px',
top:
- (item.locationY - item.locationDeep / 2 / nowObject.showYamlJson.resolution / 100) *
- radio +
- 'px'
+ (Number(item.locationY) - Number(item.locationDeepPx) / 2) * Number(radio) + 'px',
+ width: Number(item.locationWidePx) * Number(radio) + 'px',
+ height: Number(item.locationDeepPx) * Number(radio) + 'px'
}"
>
-
-
-
-
-
-
-
-
- ![]()
-
-
-
-
-
-
-
-
-
- 库位名：
-
-
- {{ item.showData.locationNo || '' }}
-
-
-
-
- 所属线库：
-
-
- {{ item.showData.laneName || '' }}
-
-
-
-
- 所属区域：
-
-
- {{ item.showData.areaName || '' }}
-
-
- ![]()
-
-
-
-
-
- ![]()
-
-
-
-
-
- ![]()
-
-
-
-
-
- ![]()
-
-
-
-
-
- ![]()
-
-
+
+
+
+ 库位名：
+
+ {{ item.showData?.locationNo || '' }}
+
+
+
+ 所属线库：
+
+ {{ item.showData?.laneName || '' }}
+
+
+
+ 所属区域：
+
+ {{ item.showData?.areaName || '' }}
+
+ 
车辆
+ 
@@ -398,7 +291,6 @@
@@ -407,7 +299,6 @@
@@ -447,25 +338,32 @@ const nowObject = ref(null) // 地图当前对象 父组件传过来的
const testCarList = ref([]) //小车数组
const carWidth = ref(60)
const carHeight = ref(32)
+
+const nodeStyle = (item, index) => {
+ return {
+ verticalAlign: 'top',
+ objectFit: 'cover',
+ width: Number(item.locationWidePx) * Number(radio.value) + 'px',
+ height: Number(item.locationDeepPx) * Number(radio.value) + 'px'
+ }
+}
+
// 定义属性
const props = defineProps({
// 当前选中的链接
isAllBoard: propTypes.bool.def(false)
})
const convertActualToBrowser = (pointX, pointY) => {
- const y1 =
- Number(nowObject.value.showYamlJson.origin[1]) +
- Number(nowObject.value.showYamlJson.height) * Number(nowObject.value.showYamlJson.resolution)
- let x = Math.max(Number(pointX) - Number(nowObject.value.showYamlJson.origin[0]), 0)
+ let resolution = Number(nowObject.value.showYamlJson.resolution)
+ let origin = nowObject.value.showYamlJson.origin
+
+ const y1 = Number(origin[1]) + Number(nowObject.value.showYamlJson.height) * resolution
+ let x = Math.max(Number(pointX) - Number(origin[0]), 0)
let y = Math.max(y1 - Number(pointY), 0)
return {
- x:
- x / nowObject.value.showYamlJson.resolution -
- carWidth.value / nowObject.value.showYamlJson.resolution / 100 / 2,
- y:
- y / nowObject.value.showYamlJson.resolution -
- carHeight.value / nowObject.value.showYamlJson.resolution / 100 / 2
+ x: x / resolution - carWidth.value / resolution / 100 / 2,
+ y: y / resolution - carHeight.value / resolution / 100 / 2
}
}
//是否可以拖拽
@@ -515,12 +413,12 @@ const getCurvePath = (curve) => {
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 isSizeRadio = ref(1)
const changeSizeRaio = (type) => {
- if (type < 0 && isSizeRaio.value + type <= 0) {
+ if (type < 0 && isSizeRadio.value + type <= 0) {
return
}
- isSizeRaio.value += type
+ isSizeRadio.value += type
}
//图层状态
const legendObj = reactive({
@@ -626,33 +524,22 @@ const toggleFullScreen = () => {
//库位双击
const storeClick = async (item) => {
- // console.log(item)
let storeData = await MapApi.houseLocationGetByMapItemId({
mapId: item.positionMapId,
mapItemId: item.id
})
- // console.log(storeData)
storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData)))
}
const lineList = ref([])
const pointList = ref([])
const getPositionMapListFun = async (positionMapId) => {
- // console.log(positionMapId)
- let data = await MapApi.getPositionMapItemList({ positionMapId: positionMapId })
- // console.log(data)
- if (data && data.length > 0) {
- data.forEach((item) => {
- // console.log(JSON.parse(item.dataJson))
- item.formattedData = item.dataJson ? JSON.parse(item.dataJson) : ''
- item.showData = item.dataJson ? JSON.parse(item.dataJson)[0] : null
- item.imgUrl = formatteTypeImg(item.type)
- })
- }
- // console.log(data)
- pointList.value = data
+ pointList.value = await MapApi.getPositionMapItemList({ positionMapId: positionMapId })
+
+ pointList.value?.forEach((item) => {
+ item.formattedData = item.dataJson ? JSON.parse(item.dataJson) : ''
+ item.showData = item.dataJson ? JSON.parse(item.dataJson)[0] : null
+ item.imgUrl = formatTypeImg(item.type)
- // console.log('=======================', pointList.value)
- pointList.value.forEach((item) => {
if (item.type === 1) {
item.locationDeep = 40
item.locationWide = 40
@@ -672,10 +559,25 @@ const getPositionMapListFun = async (positionMapId) => {
item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
item.locationDeep = item.dataObj.locationDeep
item.locationWide = item.dataObj.locationWide
- } else if (item.type === 7) {
+ }
+ //要将实际的cm改成px
+ if (item.locationWide && item.locationDeep) {
+ let pxObj = cmConversionPx(item.locationWide, item.locationDeep)
+ item.locationWidePx = pxObj.pWidth
+ item.locationDeepPx = pxObj.pHeight
}
})
}
+//将节点实际宽高cm转换成px
+const cmConversionPx = (cWidth, cHeight) => {
+ let pWidth = Number(cWidth) / Number(nowObject.value.showYamlJson.resolution) / 100
+ let pHeight = Number(cHeight) / Number(nowObject.value.showYamlJson.resolution) / 100
+ return {
+ pWidth,
+ pHeight
+ }
+}
+
const draggableElement = ref(null)
const resetPosition = () => {
if (draggableElement.value) {
@@ -728,7 +630,7 @@ const calculateDistanceAndAngle = (point1, point2) => {
}
}
-const formatteTypeImg = (type) => {
+const formatTypeImg = (type) => {
switch (type) {
case 1:
return ''
@@ -786,7 +688,7 @@ const linkWebSocket = (url) => {
[
h(
'span',
- { style: 'color: rgba(255,255,255,0.88);font-size: 14px;' },
+ { style: 'color: rgba(255,255,255,0.88);font-size: .875rem;' },
`${JSON.parse(jsonMsg.content)}`
),
h(
@@ -794,7 +696,7 @@ const linkWebSocket = (url) => {
{
onClick: () => lookError(),
style:
- 'color: rgba(255,255,255,0.88);font-size: 14px;cursor: pointer;text-decoration-line: underline;margin-left: 32px;'
+ 'color: rgba(255,255,255,0.88);font-size: .875rem;cursor: pointer;text-decoration-line: underline;margin-left: 2rem;'
},
'详情'
)
@@ -833,9 +735,8 @@ const getMapData = async (item) => {
testCarList.value = []
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}`
- // console.log(websoketUrl)
- linkWebSocket(websoketUrl)
+ let websocketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}`
+ linkWebSocket(websocketUrl)
getPositionMapListFun(nowObject.value.id)
emit('transmitMapInfo', {
id: item.id,
@@ -866,17 +767,14 @@ const computedRatio = () => {
//这段代码之后会删掉 yaml会给原始宽高
getImageSize(imgUrl.value)
.then(({ width, height }) => {
- // console.log("原始地图的宽高",JSON.parse(nowObject.value.yamlJson))
if (testCarList.value.length) {
testCarList.value.forEach((item) => {
- console.log('dayin', item)
item.originWidth = width
item.originHeight = height
item.origin = JSON.parse(nowObject.value.yamlJson).origin
item.realX = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).x
item.realY = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).y
})
- // console.log('当前数据', testCarList.value)
}
})
.catch((error) => {
@@ -901,10 +799,8 @@ const computedRatio = () => {
}
})
getImageWidth(imgUrl.value, 'height').then((res) => {
- // console.log('高', res)
heightVal.value = res * radio.value
})
- // console.log(width)
}
})
}
@@ -912,7 +808,6 @@ const computedRatio = () => {
// 获取地图连线列表
const getMapLineList = () => {
MapApi.mapLineListGet({ positionMapId: nowObject.value.id }).then((res) => {
- // console.log(res)
lineList.value = res
})
}
@@ -1057,9 +952,9 @@ onUnmounted(() => {
}
.indexpage-container .affix-container-top {
width: 100%;
- height: 80px;
+ height: 5rem;
background-color: #fff;
- border-bottom: 1px solid #f5f5f5;
+ border-bottom: 0.0625rem solid #f5f5f5;
}
.indexpage-container-box-point {
width: 100%;
@@ -1070,11 +965,12 @@ onUnmounted(() => {
right: 0;
}
.indexpage-container-box-point-item {
+ box-sizing: border-box;
position: absolute;
cursor: pointer;
}
.scrollbar-flex-content {
- padding: 2px 6px;
+ padding: 0.125rem 0.375rem;
display: flex;
align-items: center;
flex-wrap: wrap;
@@ -1084,11 +980,11 @@ onUnmounted(() => {
display: flex;
align-items: center;
justify-content: center;
- width: 90px;
- height: 30px;
- margin: 10px 6px;
+ width: 5.625rem;
+ height: 1.875rem;
+ margin: 0.625rem 0.375rem;
text-align: center;
- border-radius: 4px;
+ border-radius: 0.25rem;
background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
position: relative;
@@ -1109,14 +1005,15 @@ onUnmounted(() => {
width: 100%;
height: auto;
}
-.indexpage-container-box-point-item-inner-popover-item {
+.indexpage-popover-item {
display: flex;
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
- font-size: 14px;
+ font-size: 0.875rem;
color: #0d162a;
+ margin-bottom: 0.5rem;
}
.line-box {
position: absolute;
@@ -1127,21 +1024,21 @@ onUnmounted(() => {
}
.affix-container-left {
position: fixed;
- bottom: 26px;
+ bottom: 1.625rem;
z-index: 999;
}
.affix-container-left-box {
- width: 144px;
+ width: 9rem;
}
.affix-container-left-box-item-box {
width: 100%;
- border-bottom: 1px solid #eeeeee;
+ border-bottom: 0.0625rem solid #eeeeee;
background: #ffffff;
}
.affix-container-left-box-item {
width: 100%;
- padding: 0 18px;
- height: 42px;
+ padding: 0 1.125rem;
+ height: 2.625rem;
display: flex;
align-items: center;
justify-content: space-between;
@@ -1151,18 +1048,18 @@ onUnmounted(() => {
PingFangSC,
PingFang SC;
font-weight: 400;
- font-size: 14px;
+ font-size: 0.875rem;
color: rgba(0, 0, 0, 0.88);
}
.affix-container-left-box-item-img {
cursor: pointer;
flex-shrink: 0;
- width: 20px;
- height: 12px;
+ width: 1.25rem;
+ height: 0.75rem;
}
.affix-container-left-box-item-bottom {
width: 100%;
- height: 36px;
+ height: 2.25rem;
display: flex;
align-items: center;
justify-content: center;
@@ -1172,8 +1069,8 @@ onUnmounted(() => {
.affix-container-left-box-item-bottom-img {
cursor: pointer;
flex-shrink: 0;
- width: 12px;
- height: 7px;
+ width: 0.75rem;
+ height: 0.4375rem;
}
.affix-container-left-box-item-bottom-left {
cursor: pointer;
@@ -1182,24 +1079,24 @@ onUnmounted(() => {
PingFangSC,
PingFang SC;
font-weight: 400;
- font-size: 16px;
+ font-size: 1rem;
color: #98a4bf;
- margin-right: 2px;
+ margin-right: 0.125rem;
}
.affix-container-right {
position: fixed;
z-index: 999;
- right: 40px;
- bottom: 20px;
+ right: 2.5rem;
+ bottom: 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
}
.affix-container-right-item {
- width: 28px;
- height: 28px;
+ width: 1.75rem;
+ height: 1.75rem;
cursor: pointer;
flex-shrink: 0;
- margin-left: 8px;
+ margin-left: 0.5rem;
}
diff --git a/src/views/mapPage/realTimeMap/editMap.vue b/src/views/mapPage/realTimeMap/editMap.vue
index a016aeca..00ed0cb9 100644
--- a/src/views/mapPage/realTimeMap/editMap.vue
+++ b/src/views/mapPage/realTimeMap/editMap.vue
@@ -333,7 +333,6 @@
>