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

修改车辆看班

Browse Source
This commit is contained in:
xhf 2025-02-22 17:06:16 +08:00
parent c9b0b4c02e
commit 0d9006b96a
6 changed files with 287 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/charts/index.ts Normal file
View File

@ -0,0 +1,8 @@
import request from '@/config/axios'
//获取整体看板信息
export const bulletinBoardGet = async (params) => {
return await request.get({ url: `/system/bulletinBoard/get`, params })
}

189
src/views/board/allBoard/index.vue Normal file
View File

@ -0,0 +1,189 @@
<template>
<!-- 顶部统计 -->
<div class="top-box">
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content ep-bg-purple">
<el-card style="max-width: 100%">
<el-row :gutter="5">
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 任务总数 </div>
<div class="top-item-num"> 323 </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>
</el-col>
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 待执行 </div>
<div class="top-item-num"> 323 </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>
</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>
</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>
</el-col>
</el-row>
</el-card>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content ep-bg-purple">
<el-card style="max-width: 100%">
<el-row :gutter="5">
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 车辆总数 </div>
<div class="top-item-num"> 132 </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>
</el-col>
<el-col :span="4">
<div class="top-item">
<div class="top-item-title"> 锁定 </div>
<div class="top-item-num"> 323 </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>
</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>
</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>
</el-col>
</el-row>
</el-card>
</div>
</el-col>
</el-row>
</div>
<!-- 底部列表和地图 -->
<div class="bottom-box">
<el-row :gutter="10">
<el-col :span="6">
<div class="bottom-box-item">
<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="[]" style="width: 100%">
<el-table-column prop="date" label="任务编号" />
<el-table-column prop="name" label="车辆编号" />
<el-table-column prop="address" label="开始时间" />
<el-table-column prop="address" label="任务阶段" />
</el-table>
</div>
</div>
</div>
</el-col>
<el-col :span="12"> 2 </el-col>
<el-col :span="6"> 3 </el-col>
</el-row>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import ChartsApi from '@/api/charts'
defineOptions({ name: 'BoardAllBoard' })
</script>
<style scoped>
.top-box {
width: 100%;
}
.top-item {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border-right: 1px solid #e7eaec;
}
.top-item-title {
font-family:
PingFangSC,
PingFang SC;
font-weight: 500;
font-size: 18px;
color: #0d162a;
margin-bottom: 8px;
}
.top-item-num {
font-family:
PingFangSC,
PingFang SC;
font-weight: 500;
font-size: 24px;
color: #00329f;
}
.bottom-box {
width: 100%;
margin-top: 12px;
}
.bottom-box-item {
width: 100%;
}
.bottom-box-item-title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.bottom-box-item-title-left {
font-family:
PingFangSC,
PingFang SC;
font-weight: 500;
font-size: 14px;
color: #0d162a;
}
.bottom-box-item-title-right {
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
font-size: 14px;
color: #1677ff;
cursor: pointer;
}
.bottom-box-item-table{
width: 100%;
}
</style>

4
src/views/board/carBoard/createEditDialog.vue
View File

@ -14,10 +14,10 @@
<el-form-item required label="车辆编号" prop="robotNo">
<el-input v-model="formData.robotNo" :disabled="false" placeholder="请输入车辆编号"/>
</el-form-item>
<el-form-item required label="任务模式" v-if="formData.id">
<el-form-item required label="车辆状态" v-if="formData.id">
<el-select v-model="formData.robotTaskModel" placeholder="请选择车辆类型" required>
<el-option
:label="'拒收任务'"
:label="'锁定'"
:value="0"
/>
<el-option

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

@ -133,7 +133,7 @@
<el-dropdown-menu>
<el-dropdown-item @click="openForm('update', item.id)">编辑</el-dropdown-item>
<el-dropdown-item @click="clockCar(item)">{{
item.status == 0 ? '解锁' : '锁定'
item.robotTaskModel == 0 ? '解锁' : '锁定'
}}</el-dropdown-item>
<el-dropdown-item @click="deleteCar(item.id)">删除</el-dropdown-item>
</el-dropdown-menu>

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

@ -22,35 +22,23 @@
<div class="indexpage-container-box-point">
<!-- 连线 -->
<div v-if="legendObj.driveLineShow">
<div
class="line-box"
v-for="(item, index) in lineList"
:key="index"
>
<svg id="svg" :width="widthVal" :height="heightVal">
<template v-if="item.method == 0">
<line
:x1="(Number(item.startPointX) + Number(item.beginWidth) / 2)* radio"
:y1="(Number(item.startPointY) + Number(item.beginHigh) / 2)* radio"
:x2="(Number(item.endPointX) + Number(item.endWidth) / 2)* radio"
:y2="(Number(item.endPointY) + Number(item.endHigh) / 2)* radio"
stroke="#00329F"
stroke-width="5"
/>
</template>
<template v-else>
<path
:d="getCurvePath(item)"
:stroke="'#00329F'"
stroke-width="5"
fill="none"
/>
</template>
</svg>
</div>
<div class="line-box" v-for="(item, index) in lineList" :key="index">
<svg id="svg" :width="widthVal" :height="heightVal">
<template v-if="item.method == 0">
<line
:x1="(Number(item.startPointX) + Number(item.beginWidth) / 2) * radio"
:y1="(Number(item.startPointY) + Number(item.beginHigh) / 2) * radio"
:x2="(Number(item.endPointX) + Number(item.endWidth) / 2) * radio"
:y2="(Number(item.endPointY) + Number(item.endHigh) / 2) * radio"
stroke="#00329F"
stroke-width="5"
/>
</template>
<template v-else>
<path :d="getCurvePath(item)" :stroke="'#00329F'" stroke-width="5" fill="none" />
</template>
</svg>
</div>
</div>
<!-- 小车 -->
<div
@ -135,9 +123,13 @@
</el-popover>
</div>
<!-- 设备点 -->
<div v-if="item.type == 3">
<img :src="item.formattedData.mapImageUrl" alt="" style="width: 100%;height: 100%;"/>
</div>
<div v-if="item.type == 3">
<img
:src="item.formattedData.mapImageUrl"
alt=""
style="width: 100%; height: 100%"
/>
</div>
</div>
<!-- 设备点 -->
<div
@ -148,9 +140,17 @@
height: item.formattedData.locationDeep * radio + 'px'
}"
>
<div >
<img :src="item.formattedData.mapImageUrl?item.formattedData.mapImageUrl:'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'" alt="" style="width: 100%;height: 100%;"/>
</div>
<div>
<img
:src="
item.formattedData.mapImageUrl
? item.formattedData.mapImageUrl
: 'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
"
alt=""
style="width: 100%; height: 100%"
/>
</div>
</div>
<!-- 停车点 -->
<div
@ -161,9 +161,17 @@
height: item.formattedData.locationDeep * radio + 'px'
}"
>
<div >
<img :src="item.formattedData.mapImageUrl?item.formattedData.mapImageUrl:'https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png'" alt="" style="width: 100%;height: 100%;"/>
</div>
<div>
<img
:src="
item.formattedData.mapImageUrl
? item.formattedData.mapImageUrl
: 'https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png'
"
alt=""
style="width: 100%; height: 100%"
/>
</div>
</div>
<!-- 路径点 -->
<div
@ -174,9 +182,17 @@
height: 40 * radio + 'px'
}"
>
<div >
<img :src="item.formattedData.mapImageUrl?item.formattedData.mapImageUrl:'https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png'" alt="" style="width: 100%;height: 100%;"/>
</div>
<div>
<img
:src="
item.formattedData.mapImageUrl
? item.formattedData.mapImageUrl
: 'https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png'
"
alt=""
style="width: 100%; height: 100%"
/>
</div>
</div>
<!-- 等待点 -->
<div
@ -187,11 +203,22 @@
height: 40 * radio + 'px'
}"
>
<div >
<img :src="item.formattedData.mapImageUrl?item.formattedData.mapImageUrl:'https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png'" alt="" style="width: 100%;height: 100%;"/>
</div>
<div>
<img
:src="
item.formattedData.mapImageUrl
? item.formattedData.mapImageUrl
: 'https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png'
"
alt=""
style="width: 100%; height: 100%"
/>
</div>
</div>
<div v-if="item.type == 1" style="width: 10px; height: 10px; border-radius: 50%; background: #1890ff">
<div
v-if="item.type == 1"
style="width: 10px; height: 10px; border-radius: 50%; background: #1890ff"
>
</div>
</div>
</div>
@ -366,7 +393,7 @@ const getCurvePath = (curve) => {
let endPointX = (Number(curve.endPointX) + Number(curve.endWidth) / 2) * radio.value
let endPointY = (Number(curve.endPointY) + Number(curve.endHigh) / 2) * radio.value
return `M ${startPointX} ${startPointY} C ${curve.beginControlX* radio.value} ${curve.beginControlY* radio.value}, ${curve.endControlX* radio.value} ${curve.endControlY* radio.value}, ${endPointX} ${endPointY}`
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)
@ -610,6 +637,19 @@ const linkWebSocket = (url) => {
// 监听消息
socketClient.value.onMessage((message) => {
console.log('收到消息:', message)
if (message.type == 'map_push') {
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
}
})
}
}

2
src/views/statisticalView/index.vue
View File

@ -49,7 +49,7 @@
<script setup>
import { ref, onMounted, onUnmounted, nextTick, reactive } from 'vue'
import * as echarts from 'echarts'
import { lte } from 'lodash-es'
// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null)