This commit is contained in:
yyy 2025-02-24 17:48:27 +08:00
commit 9cc9c1f7d1
6 changed files with 269 additions and 48 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 B

View File

@ -1,6 +1,6 @@
<template>
<!-- 顶部统计 -->
<div class="top-box">
<div class="top-box" v-if="data">
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content ep-bg-purple">
@ -9,37 +9,37 @@
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 任务总数 </div>
<div class="top-item-num"> 323 </div>
<div class="top-item-num"> {{ data.tasksNumber || 0 }} </div>
</div>
</el-col>
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 执行中 </div>
<div class="top-item-num"> 323 </div>
<div class="top-item-num"> {{ data.underwayNum || 0 }} </div>
</div>
</el-col>
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 待执行 </div>
<div class="top-item-num"> 323 </div>
<div class="top-item-num"> {{ data.pendingExecutionNum || 0 }} </div>
</div>
</el-col>
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 已完成 </div>
<div class="top-item-num"> 323 </div>
<div class="top-item-num"> {{ data.completedNum || 0 }} </div>
</div>
</el-col>
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 已取消 </div>
<div class="top-item-num" style="color: #a6a6a6"> 323 </div>
<div class="top-item-num" style="color: #a6a6a6"> {{ data.cancelledNum || 0 }} </div>
</div>
</el-col>
<el-col :span="4">
<div class="top-item" style="border: none; color: #c60606">
<div class="top-item-title"> 异常 </div>
<div class="top-item-num"> 323 </div>
<div class="top-item-num"> {{ data.abnormalNum || 0 }} </div>
</div>
</el-col>
</el-row>
@ -53,37 +53,37 @@
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 车辆总数 </div>
<div class="top-item-num"> 132 </div>
<div class="top-item-num"> {{ data.statistics.total || 0 }} </div>
</div>
</el-col>
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 任务中 </div>
<div class="top-item-num"> 323 </div>
<div class="top-item-num"> {{ data.statistics.inTask || 0 }} </div>
</div>
</el-col>
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 锁定 </div>
<div class="top-item-num"> 323 </div>
<div class="top-item-num"> {{ data.statistics.doLock || 0 }} </div>
</div>
</el-col>
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 充电中 </div>
<div class="top-item-num"> 323 </div>
<div class="top-item-num"> {{ data.statistics.charge || 0 }} </div>
</div>
</el-col>
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 离线 </div>
<div class="top-item-num" style="color: #a6a6a6"> 323 </div>
<div class="top-item-num" style="color: #a6a6a6"> {{ data.statistics.offline || 0 }} </div>
</div>
</el-col>
<el-col :span="4">
<div class="top-item" style="border: none; color: #c60606">
<div class="top-item-title"> 故障 </div>
<div class="top-item-num"> 323 </div>
<div class="top-item-num"> {{ data.statistics.fault || 0 }} </div>
</div>
</el-col>
</el-row>
@ -93,36 +93,156 @@
</el-row>
</div>
<!-- 底部列表和地图 -->
<div class="bottom-box">
<div class="bottom-box" >
<el-row :gutter="10">
<el-col :span="6">
<div class="bottom-box-item">
<div class="bottom-box-item" v-if="data">
<div class="bottom-box-item-table">
<div class="bottom-box-item-title">
<div class="bottom-box-item-title-left"> 执行中 </div>
<div class="bottom-box-item-title-right"> 查看更多 </div>
<div class="bottom-box-item-title-right" @click="toManyTask('执行中')"> 查看更多 </div>
</div>
<div>
<el-table :data="[]" style="width: 100%">
<el-table-column prop="date" label="任务编号" />
<el-table-column prop="name" label="车辆编号" />
<el-table-column prop="address" label="开始时间" />
<el-table :data="data.underway" style="width: 100%">
<el-table-column prop="taskNo" label="任务编号" />
<el-table-column prop="skuNumber" label="车辆编号" />
<el-table-column prop="startTime" label="开始时间" :formatter="dateFormatter" />
<el-table-column prop="address" label="任务阶段" />
</el-table>
</div>
</div>
</div>
<div class="bottom-box-item" style="margin-top: 8px" v-if="data">
<div class="bottom-box-item-table">
<div class="bottom-box-item-title">
<div class="bottom-box-item-title-left"> 待执行 </div>
<div class="bottom-box-item-title-right" @click="toManyTask('未开始')"> 查看更多 </div>
</div>
<div>
<el-table :data="data.pendingExecution" style="width: 100%">
<el-table-column prop="taskNo" label="任务编号" />
<el-table-column prop="priorilty" label="优先级" />
<el-table-column prop="createTime" label="生成时间" :formatter="dateFormatter" />
</el-table>
</div>
</div>
</div>
</el-col>
<el-col :span="12"> 2 </el-col>
<el-col :span="6"> 3 </el-col>
<el-col :span="6">
<div class="bottom-box-item" v-if="data">
<div class="bottom-box-item-table">
<div class="bottom-box-item-title">
<div class="bottom-box-item-title-left"> 异常信息 </div>
<div class="bottom-box-item-title-right"> 查看更多 </div>
</div>
<div>
<el-table :data="data.robotWarnMsgDOS" style="width: 100%">
<el-table-column prop="robotNo" label="车辆编号" />
<el-table-column prop="warnMsg" label="异常信息" >
<template #default="scope">
<div class="warn-msg">
<div class="warn-msg-color" :style="{ backgroundColor: computedBackgroundColor(scope.row.warnLevel) }">
</div>
<div class="warn-msg-text">
{{ scope.row.warnMsg || '' }}
</div>
</div>
</template>
</el-table-column>
<el-table-column prop="createTime" label="发生时间" :formatter="dateFormatter"/>
</el-table>
</div>
</div>
</div>
<div class="bottom-box-item" style="margin-top: 8px" v-if="data">
<div class="bottom-box-item-table">
<div class="bottom-box-item-title">
<div class="bottom-box-item-title-left"> 车辆信息 </div>
<div class="bottom-box-item-title-right"> 查看更多 </div>
</div>
<div>
<el-table :data="data.robotElectricityLevelVOS" style="width: 100%">
<el-table-column prop="robotNo" label="车辆编号" />
<el-table-column prop="doLock" label="车辆状态" >
<template #default="scope">
<span>{{ scope.row.doLock === 0 ? '正常' : '锁定' }}</span>
</template>
</el-table-column>
<el-table-column prop="batSoc" label="电量百分比" >
<template #default="scope">
<div v-if="scope.row.batSoc === null"></div>
<div class="battery-box-all" >
<div class="battery-box" v-if="scope.row.batSoc !== null">
<img src="@/assets/imgs/allBoard/dianlianggreen.png" alt="" class="battery-box-img" v-if="scope.row.batSoc >=40"/>
<img src="@/assets/imgs/allBoard/dianliangyellow.png" alt="" class="battery-box-img" v-if="(scope.row.batSoc < 40) && (scope.row.batSoc >=20)"/>
<img src="@/assets/imgs/allBoard/dianliangred.png" alt="" class="battery-box-img" v-if="scope.row.batSoc < 20"/>
<div class="battery-box-inner">
<div class="battery-box-inner-inner " :class="scope.row.batSoc >=40 ? 'green-bg' : scope.row.batSoc < 40 && scope.row.batSoc >=20 ? 'yellow-bg' : 'red-bg'" :style="{width: scope.row.batSoc+'%'}">
</div>
</div>
</div>
<span class="battery-box-text" v-if="scope.row.batSoc !== null">{{scope.row.batSoc || 0}}%</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { dateFormatter } from '@/utils/formatTime'
import * as ChartsApi from '@/api/boardCharts'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
const router = useRouter() //
defineOptions({ name: 'BoardAllBoard' })
const data = ref(null)
//
const getAllData = async () => {
let datas = await ChartsApi.bulletinBoardGet()
console.log(datas)
data.value = datas
}
//
const computedBackgroundColor = (warnLevel) => {
switch (warnLevel) {
case 1:
return '#1677FF'
case 2:
return '#F1CD0B'
case 3:
return '#E07300'
case 4:
return '#C60606'
default:
return ''
}
}
const toManyTask = (type) => {
// console.log(getIntDictOptions(DICT_TYPE.ROBOT_TASK_STATUS))
// return
router.push({
path: '/task-management/task-list',
query: {
type: type
}
})
}
onMounted(() => {
getAllData()
})
</script>
<style scoped>
@ -165,6 +285,7 @@ defineOptions({ name: 'BoardAllBoard' })
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.bottom-box-item-title-left {
font-family:
@ -185,6 +306,70 @@ defineOptions({ name: 'BoardAllBoard' })
}
.bottom-box-item-table{
width: 100%;
}
.battery-box{
width: 22px;
height: 11px;
position: relative;
}
.battery-box-img{
width: 100%;
height: 100%;
vertical-align: top;
}
.battery-box-inner{
width: 17px;
height: 8px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.battery-box-inner-inner{
height: 100%;
}
.green-bg{
background: #52C41A;
}
.yellow-bg{
background: #F1CD0B;
}
.red-bg{
background: #C60606;
}
.battery-box-text{
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #0D162A;
margin-left: 3px;
}
.battery-box-all{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.warn-msg{
display: flex;
}
.warn-msg-color{
width: 8px;
height: 8px;
flex-shrink: 0;
border-radius: 50%;
margin-right: 4px;
margin-top: 4px;
}
.warn-msg-text{
flex: 1;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #0D162A;
margin-top: -3px;
}
</style>
@/api/boardCharts/index

View File

@ -6,7 +6,7 @@
height: heightVal * radio + 'px',
cursor: isDrag ? 'pointer' : 'default',
scale: isSizeRaio,
transformOrigin: 'center center'
transformOrigin: '0 0'
}"
>
<div
@ -70,8 +70,12 @@
class="indexpage-container-box-point-item-inner"
v-if="item.showData"
:style="{
width: item.showData.locationWide * radio + 'px',
height: item.showData.locationDeep * radio + 'px'
width:
(item.showData.locationWide / nowObject.showYamlJson.resolution / 100) * radio +
'px',
height:
(item.showData.locationDeep / nowObject.showYamlJson.resolution / 100) * radio +
'px'
}"
>
<!-- 库位 2-->
@ -136,8 +140,14 @@
class="indexpage-container-box-point-item-inner"
v-if="item.type == 3"
:style="{
width: item.formattedData.locationWide * radio + 'px',
height: item.formattedData.locationDeep * radio + 'px'
width:
(item.formattedData.locationWide / nowObject.showYamlJson.resolution / 100) *
radio +
'px',
height:
(item.formattedData.locationDeep / nowObject.showYamlJson.resolution / 100) *
radio +
'px'
}"
>
<div>
@ -157,8 +167,14 @@
class="indexpage-container-box-point-item-inner"
v-if="item.type == 4"
:style="{
width: item.formattedData.locationWide * radio + 'px',
height: item.formattedData.locationDeep * radio + 'px'
width:
(item.formattedData.locationWide / nowObject.showYamlJson.resolution / 100) *
radio +
'px',
height:
(item.formattedData.locationDeep / nowObject.showYamlJson.resolution / 100) *
radio +
'px'
}"
>
<div>
@ -215,11 +231,17 @@
/>
</div>
</div>
<div
<!-- 普通点 -->
<el-tooltip
class="box-item"
effect="dark"
:content="item.sortNum"
placement="top"
v-if="item.type == 1"
style="width: 10px; height: 10px; border-radius: 50%; background: #1890ff"
>
</div>
<div style="width: 10px; height: 10px; border-radius: 50%; background: #1890ff">
</div>
</el-tooltip>
</div>
</div>
</div>
@ -368,7 +390,7 @@ const carPointListFun = () => {
data: JSON.parse(data[key])
})
}
console.log('=====', dataList)
// console.log('=====', dataList)
testCarList.value = dataList
// let data2 = JSON.parse(data['d0:65:78:c4:af:cc'])
@ -379,7 +401,7 @@ const isDrag = ref(false)
const changeIsDrag = () => {
nextTick(() => {
isDrag.value = !isDrag.value
console.log(isDrag.value)
// console.log(isDrag.value)
if (!isDrag.value) {
//
resetPosition()
@ -528,7 +550,7 @@ const getList = async () => {
}
list.value = mapList
console.log(list.value, data)
// console.log(list.value, data)
//
if (data[1][0]) {
getMapData(data[1][0])
@ -536,12 +558,12 @@ const getList = async () => {
}
//
const storeClick = async (item) => {
console.log(item)
// console.log(item)
let storeData = await MapApi.houseLocationGetByMapItemId({
mapId: item.positionMapId,
mapItemId: item.id
})
console.log(storeData)
// console.log(storeData)
storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData)))
}
const lineList = ref([])
@ -558,7 +580,7 @@ const getPositionMapListFun = async (positionMapId) => {
item.imgUrl = formatteTypeImg(item.type)
})
}
console.log(data)
// console.log(data)
pointList.value = data
// console.log(pointList.value)
@ -647,7 +669,7 @@ const linkWebSocket = (url) => {
data: JSON.parse(data[key])
})
}
console.log('=====', dataList)
// console.log('=====', dataList)
testCarList.value = dataList
}
})
@ -663,10 +685,11 @@ const disconnect = () => {
}
//
const getMapData = async (item) => {
// console.log("============",item)
console.log('============', JSON.parse(item.yamlJson))
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)
// console.log(websoketUrl)
linkWebSocket(websoketUrl)
getPositionMapListFun(nowObject.value.id)
emit('transmitMapInfo', {
@ -706,7 +729,7 @@ const computedRatio = () => {
item.data.pose2d.y
]).top
})
console.log('当前数据', testCarList.value)
// console.log('', testCarList.value)
}
})
.catch((error) => {
@ -731,7 +754,7 @@ const computedRatio = () => {
}
})
getImageWidth(imgUrl.value, 'height').then((res) => {
console.log('高', res)
// console.log('', res)
heightVal.value = res
})
// console.log(width)
@ -741,7 +764,7 @@ const computedRatio = () => {
const getMapLineList = () => {
MapApi.mapLineListGet({ positionMapId: nowObject.value.id }).then((res) => {
console.log(res)
// console.log(res)
lineList.value = res
})
}
@ -808,14 +831,14 @@ const getElementWidthByClass = (className) => {
}
//
const carDbClick = (item, index) => {
console.log(item)
// console.log(item)
carDialogRef.value.open(JSON.parse(JSON.stringify(item)))
}
const boxLeft = ref(0)
//
const getLeftPx = () => {
let indexpageContainer = document.getElementById('indexpage-container')
console.log('距离左边的距离', indexpageContainer.getBoundingClientRect().left)
// console.log('', indexpageContainer.getBoundingClientRect().left)
boxLeft.value = indexpageContainer.getBoundingClientRect().left + 6
}
//

View File

@ -216,7 +216,7 @@ const message = useMessage() // 消息弹窗
const { t } = useI18n() //
const { push } = useRouter()
const route = useRoute();
const loading = ref(true) //
const total = ref(0) //
const list = ref([]) //
@ -337,9 +337,22 @@ const robotList = ref([])
const getCanUseRobotList = async () => {
robotList.value = await MapTaskAPi.getCanUseRobot()
}
//
const findPropertyValue = (arr, targetValue, compareProp, returnProp) =>{
for (let i = 0; i < arr.length; i++) {
if (arr[i][compareProp] === targetValue) {
return arr[i][returnProp];
}
}
return undefined;
}
/** 初始化 **/
onMounted(() => {
if(route.query.type){
let data = getIntDictOptions(DICT_TYPE.ROBOT_TASK_STATUS)
queryParams.taskStatus = findPropertyValue(data, route.query.type, 'label', 'value')
}
getList()
getCanUseRobotList()
})