ak/zn-admin-vue3-wcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
yyy 2025-02-14 09:46:23 +08:00
commit 130bc36460
5 changed files with 198 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/car/index.ts
View File

@ -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 })
}

5
src/api/device/index.ts
View File

@ -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 })
}

6
src/views/board/carBoard/index.vue
View File

@ -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
}

30
src/views/board/device/index.vue
View File

@ -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,

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

@ -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>