From 442e8444e231267267eb76b95510b2a351fbaa37 Mon Sep 17 00:00:00 2001
From: xhf <1424913779@qq.com>
Date: Thu, 13 Feb 2025 17:39:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.local                                    |   2 +-
 src/api/car/index.ts                          |   5 +-
 src/api/device/index.ts                       |   5 +
 src/views/board/carBoard/index.vue            |   6 +-
 src/views/board/device/index.vue              |  30 +--
 .../realTimeMap/components/indexPage.vue      | 202 ++++++++++++++++--
 6 files changed, 199 insertions(+), 51 deletions(-)

diff --git a/.env.local b/.env.local
index a3752946..f0650411 100644
--- a/.env.local
+++ b/.env.local
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://192.168.0.74:48080'
+VITE_BASE_URL='http://192.168.0.66:48080'
 # VITE_BASE_URL='http://192.168.0.189:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
diff --git a/src/api/car/index.ts b/src/api/car/index.ts
index 34b7f398..872c4f94 100644
--- a/src/api/car/index.ts
+++ b/src/api/car/index.ts
@@ -53,4 +53,7 @@ export const robotPositionGetMapAll = async (params) => {
   return await request.get({ url: `/system/position-map/getAllMap`, params })
 }
 
-
+//获得车辆列表 新
+export const getRobotInformationList = async (params) => {
+  return await request.get({ url: `/system/robot/information/list`, params })
+}
diff --git a/src/api/device/index.ts b/src/api/device/index.ts
index 53717276..b8afebec 100644
--- a/src/api/device/index.ts
+++ b/src/api/device/index.ts
@@ -32,3 +32,8 @@ export const deleteDeviceInformation = async (id: number) => {
 export const deviceNumber = async (params) => {
   return await request.get({ url: `/system/device/information/deviceNumber`, params })
 }
+
+// 获取设备列表 新不分页
+export const deviceGetInformationList = async (params) => {
+  return await request.get({ url: `/system/device/information/getInformationList`, params })
+}
\ No newline at end of file
diff --git a/src/views/board/carBoard/index.vue b/src/views/board/carBoard/index.vue
index ea6cc756..0a269a88 100644
--- a/src/views/board/carBoard/index.vue
+++ b/src/views/board/carBoard/index.vue
@@ -172,8 +172,8 @@ const router = useRouter() // 路由对象
 const createEditDialogRef = ref(null)
 const list = ref([])
 const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 100,
+  // pageNo: 1,
+  // pageSize: 100,
   robotNo: undefined
 })
 const spaceBetween = ref(20)
@@ -206,7 +206,7 @@ const getCarList = async () => {
     getCarList()
     getRobotInformationStatistics()
   }, 5000)
-  let res = await CarApi.robotInformationPage(queryParams)
+  let res = await CarApi.getRobotInformationList(queryParams)
   // console.log(res.list)
   list.value = res.list
 }
diff --git a/src/views/board/device/index.vue b/src/views/board/device/index.vue
index 21c02d4c..39b31670 100644
--- a/src/views/board/device/index.vue
+++ b/src/views/board/device/index.vue
@@ -125,8 +125,8 @@ const router = useRouter() // 路由对象
 const createEditDialogRef = ref(null)
 const list = ref([])
 const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 100,
+  // pageNo: 1,
+  // pageSize: 100,
   deviceNo: undefined,
   deviceType: undefined
 })
@@ -174,27 +174,7 @@ const filterTypeFun = (type, list) => {
 		return type
 	}
 }
-// (1:充电桩,2:输送线,3:码垛机,4:自动门,5:提升机,6:信号灯,7:按钮盒,8:拆垛机)
-const formatterDeviceType = (deviceType) => {
-  switch (deviceType) {
-    case 1:
-      return '充电桩'
-    case 2:
-      return '输送线'
-    case 3:
-      return '码垛机'
-    case 4:
-      return '自动门'
-    case 5:
-      return '提升机'
-    case 6:
-      return '信号灯'
-    case 7:
-      return '按钮盒'
-    case 8:
-      return '拆垛机'
-  }
-}
+
 
 const timerRef = ref(null)
 //查询车辆列表
@@ -207,9 +187,9 @@ const getCarList = async () => {
   //   getCarList()
   //   getRobotInformationStatistics()
   // }, 5000)
-  let res = await DeviceApi.deviceInformationPage(queryParams)
+  let res = await DeviceApi.deviceGetInformationList(queryParams)
   // console.log(res.list)
-  list.value = res.list
+  list.value = res
 }
 const carStatistics = ref({
   standby: 0,
diff --git a/src/views/mapPage/realTimeMap/components/indexPage.vue b/src/views/mapPage/realTimeMap/components/indexPage.vue
index 2bab2184..4fa0a2e8 100644
--- a/src/views/mapPage/realTimeMap/components/indexPage.vue
+++ b/src/views/mapPage/realTimeMap/components/indexPage.vue
@@ -31,22 +31,89 @@
     <div class="indexpage-container" v-if="imgUrl">
       <div class="indexpage-container-box">
         <img :src="imgUrl" alt="" class="indexpage-container-box-img" />
+        <div class="indexpage-container-box-point">
+          <div
+            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' }"
+          >
+            <div
+              class="indexpage-container-box-point-item-inner"
+              v-if="item.showData"
+              :style="{
+                width: item.showData.locationWide * radio + 'px',
+                height: item.showData.locationDeep * radio + 'px'
+              }"
+            >
+              <div v-if="item.type == 2" style="width: 100%; height: 100%">
+                <el-popover
+                  placement="top-start"
+                  trigger="hover"
+                  width="auto" 
+                >
+                  <template #reference>
+                    <img :src="item.imgUrl" alt="" style="width: 100%; height: 100%"  @dblclick="storeClick(item)"/>
+                  </template>
+                  <div class="indexpage-container-box-point-item-inner-popover">
+                    <div class="indexpage-container-box-point-item-inner-popover-item" style="margin-bottom: 8px;">
+                      <div class="indexpage-container-box-point-item-inner-popover-name">
+                       库位名：
+                    </div>
+                    <div class="indexpage-container-box-point-item-inner-popover-value">
+                      {{ item.showData.locationNo || '' }}
+                    </div>
+                    </div>
+                    <div class="indexpage-container-box-point-item-inner-popover-item" style="margin-bottom: 8px;">
+                      <div class="indexpage-container-box-point-item-inner-popover-name">
+                       所属线库：
+                    </div>
+                    <div class="indexpage-container-box-point-item-inner-popover-value">
+                      {{ item.showData.laneName || '' }}
+                    </div>
+                    </div>
+                    <div class="indexpage-container-box-point-item-inner-popover-item" style="margin-bottom: 8px;">
+                      <div class="indexpage-container-box-point-item-inner-popover-name">
+                       所属区域：
+                    </div>
+                    <div class="indexpage-container-box-point-item-inner-popover-value">
+                      {{ item.showData.areaName || '' }}
+                    </div>
+                    </div>
+                    <!-- <div class="indexpage-container-box-point-item-inner-popover-item" style="margin-bottom: 8px;">
+                      <div class="indexpage-container-box-point-item-inner-popover-name">
+                       状态：
+                    </div>
+                    <div class="indexpage-container-box-point-item-inner-popover-value">
+                       {{ item.showData.locationUseStatus == 0 ? '空闲' : '占用' }}
+                    </div>
+                    </div> -->
+                  </div>
+                </el-popover>
+              </div>
+              <div v-else style="width: 100%; height: 100%">
+                <img :src="item.imgUrl" alt="" style="width: 100%; height: 100%" />
+              </div>
+            </div>
+            <div v-else style="width: 10px; height: 10px; border-radius: 50%; background: red">
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
+import { ref, defineComponent, reactive, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import * as MapApi from '@/api/map/map'
-import WebSocketClient from '../webSocket.js';
+import WebSocketClient from '../webSocket.js'
 const imgUrl = ref('')
 
 const socketClient = ref(null)
 
 const emit = defineEmits(['transmitMapId'])
 
-
 const list = ref([])
 const nowObject = ref(null)
 //获取地图区域
@@ -60,39 +127,70 @@ const getList = async () => {
     })
   }
   list.value = mapList
-  console.log(list.value,data)
+  console.log(list.value, data)
   //默认取第一个
   if (data[1][0]) {
     getMapData(data[1][0])
   }
 }
-
+const storeClick = (item) => {
+  console.log(item)
+}
+const pointList = ref([])
 const getPositionMapListFun = async (positionMapId) => {
-  console.log(positionMapId)
-  let data = await MapApi.getPositionMapItemList({positionMapId: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 = 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
+}
+
+const formatteTypeImg = (type) => {
+  switch (type) {
+    case 1:
+      return ''
+    case 2:
+      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png'
+    case 3:
+      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
+    case 4:
+      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png'
+    case 5:
+      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png'
+    case 6:
+      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png'
+    default:
+      return ''
+  }
 }
 const replaceHttpWithWs = (str) => {
-    return str.replace(/^http/, 'ws');
+  return str.replace(/^http/, 'ws')
 }
 const linkWebSocket = (url) => {
-  socketClient.value = new WebSocketClient(url);
-  if(socketClient.value){
-      // 监听消息
-socketClient.value.onMessage((message) => {
-    console.log('收到消息:', message);
-});
+  socketClient.value = new WebSocketClient(url)
+  if (socketClient.value) {
+    // 监听消息
+    socketClient.value.onMessage((message) => {
+      console.log('收到消息:', message)
+    })
   }
 }
 
-
 const sendMessage = () => {
-    socketClient.value.send('Hello, WebSocket!');
-};
+  socketClient.value.send('Hello, WebSocket!')
+}
 
 const disconnect = () => {
-    socketClient.value.disconnect();
-};
+  socketClient.value.disconnect()
+}
 //获取扫描图
 const getMapData = async (item) => {
   nowObject.value = JSON.parse(JSON.stringify(item))
@@ -110,14 +208,57 @@ const getMapData = async (item) => {
     area: item.area
   })
   imgUrl.value = data
+  computedRatio()
+}
+const radio = ref(1)
+const computedRatio = () => {
+  nextTick(() => {
+    if (imgUrl.value) {
+      let width = getElementWidthByClass('indexpage-container')
+      getImageWidth(imgUrl.value).then((res) => {
+        // console.log(res)
+        let ratioVal = width / res
+        radio.value = ratioVal
+        if (pointList.value.length) {
+          pointList.value.forEach((item) => {
+            item.radio = radio.value
+          })
+        }
+      })
+      // console.log(width)
+    }
+  })
+}
 
-  
+const getImageWidth = (imageUrl) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = function () {
+      resolve(img.width)
+    }
+    img.onerror = function () {
+      reject(new Error('图片加载失败'))
+    }
+    img.src = imageUrl
+  })
+}
 
+const getElementWidthByClass = (className) => {
+  const element = document.querySelector(`.${className}`)
+  if (element) {
+    // return window.getComputedStyle(element).width
+    const widthWithUnit = window.getComputedStyle(element).width
+    return widthWithUnit.slice(0, -2)
+  }
+  return null
 }
 
 onMounted(() => {
   getList()
-  
+  window.addEventListener('resize', computedRatio)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', computedRatio)
 })
 </script>
 
@@ -135,6 +276,18 @@ onMounted(() => {
   background-color: #fff;
   border-bottom: 1px solid #f5f5f5;
 }
+.indexpage-container-box-point {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.indexpage-container-box-point-item {
+  position: absolute;
+  cursor: pointer;
+}
 .scrollbar-flex-content {
   padding: 2px 6px;
   display: flex;
@@ -171,4 +324,11 @@ onMounted(() => {
   width: 100%;
   height: auto;
 }
+.indexpage-container-box-point-item-inner-popover-item{
+  display: flex;
+  font-family: PingFangSC, PingFang SC;
+font-weight: 400;
+font-size: 14px;
+color: #0D162A;
+}
 </style>