Merge branch 'xhf' of http://git.znkjfw.com/ak/zn-admin-vue3-wcs into xhf

src/views/mapPage/realTimeMap/components/indexPage.vue

@@ -3,7 +3,7 @@
     class="affix-container"
     id="indexpage-container"
     :style="{
-      height: heightVal * radio + 'px',
+      height: heightVal + 'px',
       cursor: isDrag ? 'pointer' : 'default',
       scale: isSizeRaio,
       transformOrigin: '0 0'
@@ -42,7 +42,7 @@
                       :x2="Number(item.endPointX) * radio"
                       :y2="Number(item.endPointY) * radio"
                       :stroke="item.isSelect ? '#f48924' : '#00329F'"
-                      :stroke-width="5 * radio"
+                      :stroke-width="(5  / nowObject.showYamlJson.resolution / 100 * radio)>1.5?(5  / nowObject.showYamlJson.resolution / 100 * radio):1.5"
                       :marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''"
                       marker-end="url(#single-arrow)"
                       @click="handleChooseRoute(item, index)"
@@ -51,7 +51,7 @@
                       :d="getLineMidArrowPath(item)"
                       stroke="none"
                       fill="black"
-                      stroke-width="4"
+                      :stroke-width="(5  / nowObject.showYamlJson.resolution / 100 * radio)>1.5?(5  / nowObject.showYamlJson.resolution / 100 * radio):1.5"
                       :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
                       :marker-end="
                         item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
@@ -62,7 +62,7 @@
                     <path
                       :d="getCurvePath(item)"
                       :stroke="item.isSelect ? '#f48924' : '#00329F'"
-                      :stroke-width="5 * radio"
+                      :stroke-width="(5  / nowObject.showYamlJson.resolution / 100 * radio)>1.5?(5  / nowObject.showYamlJson.resolution / 100 * radio):1.5"
                       fill="none"
                       :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
                       :marker-end="
@@ -84,8 +84,11 @@
             :style="{
               left: item.realX * radio + 'px',
               top: item.realY  * radio + 'px',
-              width: legendObj.carShow ? 40 * radio + 'px' : '0',
+              width: legendObj.carShow ? carWidth / nowObject.showYamlJson.resolution / 100 * radio + 'px' : '0',
-              height: legendObj.carShow ? 22 * radio + 'px' : '0'
+              height: legendObj.carShow ? carHeight / nowObject.showYamlJson.resolution / 100 * radio + 'px' : '0',
+              transform: 'rotate(' + radianToDegree(item.data.pose2d.yaw) + 'deg)',
+              transition: 'all 0.4s linear 0s',
+              zIndex: 9999
             }"
           >
             <img
@@ -238,8 +241,8 @@
               class="indexpage-container-box-point-item-inner"
               v-if="item.type == 5"
               :style="{
-                width: 150 * radio + 'px',
+                width: item.locationWide / nowObject.showYamlJson.resolution / 100 * radio + 'px',
-                height: 150 * radio + 'px'
+                height: item.locationDeep / nowObject.showYamlJson.resolution / 100  * radio + 'px'
               }"
             >
               <div>
@@ -259,8 +262,8 @@
               class="indexpage-container-box-point-item-inner"
               v-if="item.type == 6"
               :style="{
-                width: 150 * radio + 'px',
+                width: item.locationWide / nowObject.showYamlJson.resolution / 100  * radio + 'px',
-                height: 150 * radio + 'px'
+                height: item.locationDeep / nowObject.showYamlJson.resolution / 100  * radio + 'px'
               }"
             >
               <div>
@@ -279,14 +282,14 @@
             <el-tooltip
               class="box-item"
               effect="dark"
-              :content="item.sortNum"
+              :content="item.sortNum + ''"
               placement="top"
               v-if="item.type == 1"
             >
               <div
                 :style="{
-                  width: 10 * radio + 'px',
+                  width: item.locationWide / nowObject.showYamlJson.resolution / 100  * radio + 'px',
-                  height: 10 * radio + 'px',
+                  height: item.locationDeep  / nowObject.showYamlJson.resolution / 100 * radio + 'px',
                   background: '#000',
                   borderRadius: '50%'
                 }"
@@ -396,7 +399,7 @@
       />
     </div>
   </div>
-  <storeDialog ref="storeDialogRef" @success="getList" />
+  <storeDialog ref="storeDialogRef" @success="emitParent" />
   <carDialog ref="carDialogRef" />
 </template>
 
@@ -423,32 +426,23 @@ const carDialogRef = ref(null)
 const socketClient = ref(null)
 const router = useRouter() // 路由对象
 const emit = defineEmits(['transmitMapId'])
-const storeDialogRef = ref(null)
+const storeDialogRef = ref(null) // 仓库信息弹窗
 const list = ref([])
-const nowObject = ref(null)
+const nowObject = ref(null) // 地图当前对象 父组件传过来的
-const testCarList = ref([])
+const testCarList = ref([]) //小车数组
-const carPointListFun = () => {
+const carWidth = ref(60)
-  let testJson = {
+const carHeight = ref(32)
-    type: 'map_push',
-    content:
-      '{"d0:65:78:c4:af:cc":"{\\"id\\":1,\\"macAddress\\":\\"d0:65:78:c4:af:cc\\",\\"robotModelNumber\\":\\"A-1\\",\\"pose2d\\":{\\"y\\":\\"1\\",\\"x\\":\\"2\\",\\"yaw\\":\\"30\\",\\"floor\\":\\"1\\",\\"area\\":\\"A区\\",\\"bat_soc\\":\\"40\\"}}"}'
-  }
-  let data = JSON.parse(testJson.content)
-  // console.log("============",data)
-  let dataList = []
-  for (let key in data) {
-    dataList.push({
-      macAddress: key,
-      data: JSON.parse(data[key])
-    })
-  }
-  // console.log('=====', dataList)
-  testCarList.value = dataList
 
-  // let data2 = JSON.parse(data['d0:65:78:c4:af:cc'])
+const convertActualToBrowser = (pointX, pointY) => {
-  // console.log(data2)
+  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 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)
+  }
+}
 //是否可以拖拽
 const isDrag = ref(false)
 const changeIsDrag = () => {
@@ -462,6 +456,7 @@ const changeIsDrag = () => {
   })
 }
 
+//点击选中线  如果选中就变成非选中 否则相反
 const handleChooseRoute = (val, i) => {
   // console.log('============================', val)
   if (lineList.value.length) {
@@ -603,36 +598,7 @@ const toggleFullScreen = () => {
     }
   })
 }
-//获取地图区域
-const getList = async () => {
-  let data = await MapApi.getPositionMapGetMap()
-  let mapList = []
-  for (let key in data) {
-    mapList.push({
-      floor: key,
-      label: key + '层',
-      value: key,
-      children: data[key]
-    })
-  }
-  if (mapList.length) {
-    mapList.forEach((item) => {
-      if (item.children.length) {
-        item.children.forEach((child) => {
-          child.label = child.area
-          child.value = child.id
-        })
-      }
-    })
-  }
 
-  list.value = mapList
-  // console.log(list.value, data)
-  //默认取第一个
-  if (data[1][0]) {
-    getMapData(data[1][0])
-  }
-}
 //库位双击
 const storeClick = async (item) => {
   // console.log(item)
@@ -660,7 +626,7 @@ 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
@@ -684,24 +650,7 @@ const getPositionMapListFun = async (positionMapId) => {
     } else if (item.type === 7) {
     }
   })
-  // 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 = () => {
@@ -789,7 +738,7 @@ const linkWebSocket = (url) => {
       // 车辆信息
       if (jsonMsg.type == 'map_push') {
         let data = JSON.parse(jsonMsg.content)
-        console.log("======车位点======",data)
+        console.log('======车位点======', data)
         let dataList = []
         for (let key in data) {
           dataList.push({
@@ -799,6 +748,7 @@ const linkWebSocket = (url) => {
         }
         // console.log('=====', dataList)
         testCarList.value = dataList
+        computedRatio()
       }
       //告警信息
       if (jsonMsg.type == 'agv_warn') {
@@ -807,18 +757,29 @@ const linkWebSocket = (url) => {
             h(
               'div',
               {
-                  style:'background-color: #C60606;',
+                style: 'background-color: #C60606;'
               },
               [
-                 h('span', { style: 'color: rgba(255,255,255,0.88);font-size: 14px;' }, `${JSON.parse(jsonMsg.content)}`),   
+                h(
-                 h('span', {onClick: () => lookError(), style: 'color: rgba(255,255,255,0.88);font-size: 14px;cursor: pointer;text-decoration-line: underline;margin-left: 32px;' }, '详情'),
+                  'span',
+                  { style: 'color: rgba(255,255,255,0.88);font-size: 14px;' },
+                  `${JSON.parse(jsonMsg.content)}`
+                ),
+                h(
+                  'span',
+                  {
+                    onClick: () => lookError(),
+                    style:
+                      'color: rgba(255,255,255,0.88);font-size: 14px;cursor: pointer;text-decoration-line: underline;margin-left: 32px;'
+                  },
+                  '详情'
+                )
               ]
-              
             ),
           showClose: false,
           duration: 3000, // 让消息持续显示，直到用户关闭
           type: 'info',
-          customClass: 'indexpage-custom-message-style',
+          customClass: 'indexpage-custom-message-style'
         })
       }
     })
@@ -839,9 +800,13 @@ const sendMessage = () => {
 const disconnect = () => {
   socketClient.value.disconnect()
 }
+const emitParent = () => {
+  getMapData(nowObject.value)
+}
 //获取扫描图
 const getMapData = async (item) => {
   // console.log('============', JSON.parse(item.yamlJson))
+  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}`
@@ -861,6 +826,13 @@ const getMapData = async (item) => {
   computedRatio()
   getMapLineList()
 }
+//偏航率斜率算旋转 
+const radianToDegree = (radian) =>{
+    // 将弧度转换为角度
+    const degree = radian * (180 / Math.PI);
+    // 返回带有单位 'deg' 的 CSS 角度值
+    return `${degree}`;
+}
 const heightVal = ref(0)
 const widthVal = ref(0)
 const radio = ref(1)
@@ -873,17 +845,12 @@ const computedRatio = () => {
           // 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 = convertToFrontendCoordinates(item.origin, width, height, [
+              item.realX = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).x
-                item.data.pose2d.x,
+              item.realY = convertActualToBrowser(item.data.pose2d.x, item.data.pose2d.y).y
-                item.data.pose2d.y
-              ]).left
-              item.realY = convertToFrontendCoordinates(item.origin, width, height, [
-                item.data.pose2d.x,
-                item.data.pose2d.y
-              ]).top
             })
             // console.log('当前数据', testCarList.value)
           }
@@ -918,6 +885,7 @@ const computedRatio = () => {
   })
 }
 
+// 获取地图连线列表
 const getMapLineList = () => {
   MapApi.mapLineListGet({ positionMapId: nowObject.value.id }).then((res) => {
     // console.log(res)
@@ -925,6 +893,7 @@ const getMapLineList = () => {
   })
 }
 
+// 获取图片尺寸
 const getImageSize = (url) => {
   return new Promise((resolve, reject) => {
     const img = new Image()
@@ -1022,7 +991,6 @@ const observeWidthChange = (id, callback) => {
 let stopObserving
 defineExpose({ getMapData }) // 提供 open 方法，用于打开弹窗
 onMounted(() => {
-  // carPointListFun()
   // getList()
   window.addEventListener('resize', computedRatio)
   stopObserving = observeWidthChange('indexpage-container', (newWidth) => {
@@ -1137,11 +1105,9 @@ onUnmounted(() => {
   position: fixed;
   bottom: 26px;
   z-index: 999;
-  
 }
 .affix-container-left-box {
   width: 144px;
-
 }
 .affix-container-left-box-item-box {
   width: 100%;
@@ -1212,6 +1178,4 @@ onUnmounted(() => {
   flex-shrink: 0;
   margin-left: 8px;
 }
-
-
 </style>