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

禅道bug修改:整体看板固定满屏幕,任务表格高度固定,信息栏固定。车辆看板搜索栏提示完整的可搜索内容,同时增加一键清除功能

Browse Source
This commit is contained in:
yyy 2025-04-29 17:25:07 +08:00
parent ce6f01b0e4
commit bbdfe12392
8 changed files with 374 additions and 368 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.local
View File

@ -4,9 +4,9 @@ NODE_ENV=development
VITE_DEV=true
# 请求路径
VITE_BASE_URL='http://192.168.0.74:48080'
# VITE_BASE_URL='http://192.168.0.74:48080'
# VITE_BASE_URL='http://192.168.0.153:48080'
# VITE_BASE_URL='http://192.168.0.45:48080'
VITE_BASE_URL='http://192.168.0.45:48080'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
VITE_UPLOAD_TYPE=server

4
src/api/map/map.ts
View File

@ -227,10 +227,10 @@ export const updatePositionChangePoint = async (data) => {
}
//根据排序查询点位信息
export const getPositionChangePointBySortNum = async (data) => {
export const getPositionChangePointBySortNum = async (params) => {
return await request.get({
url: `/system/position-change-point-binding/getItemBySortNum`,
data
params
})
}

575
src/views/board/allBoard/index.vue
View File

@ -3,8 +3,8 @@
<div class="top-box" v-if="data">
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content ep-bg-purple">
<el-card style="max-width: 100%" shadow="never">
<div>
<el-card shadow="never">
<el-row :gutter="5" v-if="data.taskStatusVO">
<el-col :span="4">
<div class="top-item">
@ -51,8 +51,8 @@
</div>
</el-col>
<el-col :span="12">
<div class="grid-content ep-bg-purple">
<el-card style="max-width: 100%" shadow="never">
<div>
<el-card shadow="never">
<el-row :gutter="5" v-if="data.statistics">
<el-col :span="4">
<div class="top-item">
@ -103,45 +103,34 @@
<!-- 下部分 -->
<div class="bottom-box">
<el-row :gutter="10">
<!-- 左边 -->
<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" @click="toManyTask('执行中')">
查看更多
</div>
</div>
<div>
<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 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.underway" style="width: 100%" :height="tableHeight">
<el-table-column prop="taskNo" label="任务编号" />
<el-table-column prop="skuNumber" label="车辆编号" />
<el-table-column prop="address" label="任务阶段" />
</el-table>
</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 class="bottom-box-item-table mt-4">
<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%" :height="tableHeight">
<el-table-column prop="taskNo" label="任务编号" />
<el-table-column prop="createTime" label="生成时间" :formatter="dateFormatter" />
</el-table>
</div>
</div>
</el-col>
<!-- 实时地图 -->
<el-col :span="12">
<div style="margin-bottom: 10px">
<el-cascader
@ -151,157 +140,149 @@
style="width: 160px"
/>
</div>
<div style="width: 100%; padding-bottom: 120px" class="map-box-allBoard">
<indexPage ref="indexPageRef" :isAllBoard="true" :isFullScreen="true" />
<div class="map-box-allBoard map-box-container">
<indexPage
ref="indexPageRef"
:isAllBoard="true"
:isFullScreen="true"
:sortNumberShow="false"
/>
</div>
<div
style="position: fixed; bottom: 20px"
:style="{ width: widthVal + 'px', left: leftVal + 'px' }"
style="position: fixed; bottom: 16px"
:style="{ width: widthVal + 'px' }"
v-if="data && data.deviceStatusInfoVOS"
>
<div
ref="scrollContainer"
class="scroll-container"
@mousedown="startDrag"
@mousemove="onDrag"
@mouseup="endDrag"
@mouseleave="endDrag"
>
<div class="content">
<el-scrollbar>
<div class="scroll-container">
<div
v-for="(n, i) in data.deviceStatusInfoVOS"
:key="i"
class="item"
:class="{ noBoarder: i === data.deviceStatusInfoVOS.length - 1 }"
>
<div class="scroll-container-item-left">
<div class="scroll-container-item-left-title">{{
filterTypeFun(n.deviceType, typeList)
}}</div>
<div class="scroll-container-item-left-img">
<div>
<div class="item-left-title">{{ filterTypeFun(n.deviceType, typeList) }}</div>
<div class="item-left-img">
<img
:src="n.defaultImage"
alt=""
object-fit="contain"
style="width: 100%; height: 100%"
/>
</div>
</div>
<div class="scroll-container-item-right">
<div class="scroll-container-item-right-item">
<div class="scroll-container-item-right-item-title"> 数量： </div>
<div class="scroll-container-item-right-item-num">
<div class="ml-4">
<div class="right-item">
<div class="item-right-title"> 数量： </div>
<div class="item-right-num">
{{ n.totalNum || 0 }}
</div>
</div>
<div class="scroll-container-item-right-item" style="margin-top: 3px">
<div class="scroll-container-item-right-item-title"> 正常数量： </div>
<div class="scroll-container-item-right-item-num">
<div class="right-item" style="margin-top: 3px">
<div class="item-right-title"> 正常数量： </div>
<div class="item-right-num">
{{ n.normalNum || 0 }}
</div>
</div>
<div class="scroll-container-item-right-item" style="margin-top: 3px">
<div class="scroll-container-item-right-item-title"> 异常数量： </div>
<div class="scroll-container-item-right-item-num" style="color: #c60606">
<div class="right-item" style="margin-top: 3px">
<div class="item-right-title"> 异常数量： </div>
<div class="item-right-num" style="color: #c60606">
{{ n.abnormalNum || 0 }}
</div>
</div>
</div>
</div>
</div>
</div>
</el-scrollbar>
</div>
</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" @click="toManyWarnMsg"> 查看更多 </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 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="toManyWarnMsg"> 查看更多 </div>
</div>
<div>
<el-table :data="data.robotWarnMsgDOS" style="width: 100%" :height="tableHeight">
<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>
</template>
</el-table-column>
<el-table-column prop="createTime" label="发生时间" :formatter="dateFormatter" />
</el-table>
</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 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="goCarBord"> 查看更多 </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 class="bottom-box-item-table mt-4">
<div class="bottom-box-item-title">
<div class="bottom-box-item-title-left"> 车辆信息 </div>
<div class="bottom-box-item-title-right" @click="goCarBord"> 查看更多 </div>
</div>
<div>
<el-table
:data="data.robotElectricityLevelVOS"
style="width: 100%"
:height="tableHeight"
>
<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"
class="battery-box-img"
v-if="scope.row.batSoc >= 40"
/>
<img
src="@/assets/imgs/allBoard/dianliangyellow.png"
class="battery-box-img"
v-if="scope.row.batSoc < 40 && scope.row.batSoc >= 20"
/>
<img
src="@/assets/imgs/allBoard/dianliangred.png"
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>
<span class="battery-box-text" v-if="scope.row.batSoc !== null"
>{{ scope.row.batSoc || 0 }}%</span
>
</div>
</template>
</el-table-column>
</el-table>
</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>
</el-col>
@ -312,15 +293,20 @@
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { dateFormatter } from '@/utils/formatTime'
import * as ChartsApi from '@/api/boardCharts'
import { DICT_TYPE, getIntDictOptions, getDictOptions } from '@/utils/dict'
import { useAppStore } from '@/store/modules/app'
import indexPage from '../../mapPage/realTimeMap/components/indexPage.vue'
import * as ChartsApi from '@/api/boardCharts'
import * as MapApi from '@/api/map/map'
defineOptions({ name: 'BoardAllBoard' })
const appStore = useAppStore()
const collapse = computed(() => appStore.getCollapse) // 折叠菜单
const router = useRouter() // 路由对象
const indexPageRef = ref(null)
const typeList = ref([])
defineOptions({ name: 'BoardAllBoard' })
const data = ref({
taskStatusVO: {
//顶部左边统计
@ -346,21 +332,11 @@ const data = ref({
deviceStatusInfoVOS: [], //设备信息
robotElectricityLevelVOS: [] //车辆信息
})
//获取数据
//获取数据 页面所有数据都在里面
const getAllData = async () => {
let datas = await ChartsApi.bulletinBoardGet()
console.log(datas)
data.value = datas
}
const widthVal = ref(0)
const leftVal = ref(0)
const getWidth = (val) => {
widthVal.value = val
console.log(widthVal.value)
}
const getLeftPx = (val) => {
leftVal.value = val
data.value = await ChartsApi.bulletinBoardGet()
}
//返回异常颜色
const computedBackgroundColor = (warnLevel) => {
switch (warnLevel) {
@ -379,8 +355,6 @@ const computedBackgroundColor = (warnLevel) => {
//前往更多任务
const toManyTask = (type) => {
// console.log(getIntDictOptions(DICT_TYPE.ROBOT_TASK_STATUS))
// return
router.push({
path: '/task-management/task-list',
query: {
@ -395,12 +369,14 @@ const toManyWarnMsg = () => {
path: '/carError'
})
}
// 前往车辆看板
const goCarBord = () => {
router.push({
path: '/board/carBoard'
})
}
const list = ref([]) // 地图区域列表
const mapValue = ref([]) //选中的区域绑定的数组值
const mapInfo = ref(null) //选中的区域
@ -428,7 +404,6 @@ const getList = async () => {
}
list.value = mapList
console.log(list.value, data)
if (mapValue.value.length) {
handleChangeMap(mapValue.value)
} else {
@ -496,56 +471,40 @@ const findChildrenByValues = (tree, values) => {
}
return null
}
const scrollContainer = ref(null)
let isDragging = false
let startX = 0
let scrollLeft = 0
const startDrag = (e) => {
isDragging = true
const rect = scrollContainer.value.getBoundingClientRect()
startX = e.clientX - rect.left
scrollLeft = scrollContainer.value.scrollLeft
scrollContainer.value.style.cursor = 'grabbing'
}
const onDrag = (e) => {
if (!isDragging) return
const rect = scrollContainer.value.getBoundingClientRect()
const mouseX = e.clientX - rect.left
const dragDistance = (mouseX - startX) * 2.5 // 速度系数
scrollContainer.value.scrollLeft = scrollLeft - dragDistance
}
const endDrag = () => {
isDragging = false
scrollContainer.value.style.cursor = 'grab'
}
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
}
const getLeft = () => {
let indexpageContainer = document.getElementsByClassName('map-box-allBoard')[0]
// console.log('距离左边的距离', indexpageContainer.getBoundingClientRect().left)
leftVal.value = indexpageContainer.getBoundingClientRect().left
const getElementHeightByClass = (className) => {
const element = document.querySelector(`.${className}`)
if (element) {
const widthWithUnit = window.getComputedStyle(element).height
return widthWithUnit.slice(0, -2)
}
return null
}
const getWidthPx = () => {
let width = getElementWidthByClass('map-box-allBoard')
// console.log("pppppppppppppp",width)
widthVal.value = width
}
const getLeftWidth = () => {
watch(
() => collapse.value,
() => {
pageWidthChange()
}
)
const widthVal = ref(0)
const tableHeight = ref(200)
const pageWidthChange = () => {
nextTick(() => {
getWidthPx()
getLeft()
widthVal.value = getElementWidthByClass('map-box-allBoard')
tableHeight.value = (getElementHeightByClass('bottom-box') - 60) / 2
})
}
//根据type和列表返回对应中文
const filterTypeFun = (type, list) => {
if (list.length) {
@ -557,53 +516,60 @@ const filterTypeFun = (type, list) => {
return type
}
}
const getTypeList = () => {
typeList.value = getIntDictOptions(DICT_TYPE.DEVICE_TYPE)
}
onMounted(() => {
typeList.value = getDictOptions(DICT_TYPE.DEVICE_TYPE)
getTypeList()
getAllData()
getList()
getLeftWidth()
window.addEventListener('resize', getLeftWidth)
pageWidthChange()
window.addEventListener('resize', pageWidthChange)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', getLeftWidth)
window.removeEventListener('resize', pageWidthChange)
})
</script>
<style scoped>
<style scoped lang="scss">
.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;
}
}
.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;
height: calc(100vh - 220px);
}
.bottom-box-item {
width: 100%;
}
.bottom-box-item-title {
width: 100%;
display: flex;
@ -696,93 +662,70 @@ onBeforeUnmount(() => {
color: #0d162a;
margin-top: -3px;
}
/* 容器样式 */
.scroll-container {
width: 100%;
height: 104px;
overflow: hidden;
position: relative;
cursor: grab;
user-select: none;
background: #fff;
margin-top: 10px;
}
/* 隐藏滚动条 */
.scroll-container::-webkit-scrollbar {
display: none;
}
/* 内容布局 */
.content {
display: inline-flex;
height: 100%;
padding: 20px 0;
white-space: nowrap;
}
/* 单个项目样式 */
.item {
display: inline-flex;
display: flex;
align-items: center;
width: fit-content;
margin-top: 10px;
padding: 17px 30px;
background: #fff;
transition: transform 0.2s;
border-right: 2px solid #e9e9e9;
.item {
box-sizing: border-box;
display: flex;
align-items: flex-end;
padding: 16px 24px;
background: #fff;
transition: transform 0.2s;
border-right: 1px solid #e9e9e9;
flex-shrink: 0;
.item-left-title {
font-weight: 500;
font-size: 14px;
color: #0d162a;
margin-bottom: 14px;
flex-shrink: 0;
}
.item-left-img {
width: 40px;
height: 40px;
vertical-align: top;
flex-shrink: 0;
object-fit: cover;
}
.right-item {
display: flex;
flex-shrink: 0;
}
.item-right-title {
font-weight: 400;
font-size: 12px;
color: #0d162a;
flex-shrink: 0;
}
.item-right-num {
font-weight: 400;
font-size: 12px;
color: #0d162a;
flex-shrink: 0;
}
}
}
/* .item:hover {
transform: translateY(-3px);
} */
/* 拖拽时状态 */
.scroll-container:active {
cursor: grabbing;
}
.scroll-container-item-left-title {
font-family:
PingFangSC,
PingFang SC;
font-weight: 500;
font-size: 14px;
color: #0d162a;
margin-bottom: 14px;
flex-shrink: 0;
}
.scroll-container-item-left-img {
width: 40px;
height: 40px;
vertical-align: top;
flex-shrink: 0;
}
.scroll-container-item-right {
flex-shrink: 0;
margin-left: 16px;
}
.noBoarder {
border-right: none;
}
.scroll-container-item-right-item {
display: flex;
flex-shrink: 0;
}
.scroll-container-item-right-item-title {
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
font-size: 12px;
color: #0d162a;
flex-shrink: 0;
}
.scroll-container-item-right-item-num {
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
font-size: 12px;
color: #0d162a;
flex-shrink: 0;
.map-box-container {
width: 100%;
height: calc(100vh - 370px);
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin; /* Firefox */
scrollbar-color: #888 #f1f1f1;
}
</style>

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

@ -80,29 +80,25 @@
</div>
<div class="new-top-box-right">
<div class="new-top-box-right-input-box">
<input
<el-input
clearable
type="text"
v-model="queryParams.robotNo"
placeholder="请输入关键字"
placeholder="请输入车辆编号"
class="new-top-box-right-input"
placeholder-class="new-top-box-right-input-placeholder"
/>
<Icon
icon="ep:search"
size="20px"
color="#A4AFCA"
style="cursor: pointer"
@click="getCarList"
class="new-top-box-right-input-icon"
/>
@clear="getCarList"
>
<template #append>
<el-button icon="Search" @click="getCarList" />
</template>
</el-input>
</div>
<div
<el-button
class="new-top-box-right-button"
@click="openForm('create')"
v-hasPermi="['carBoard:index:add']"
>新增车辆</el-button
>
新增车辆
</div>
</div>
</div>
</div>
@ -750,20 +746,12 @@ onBeforeRouteLeave((to, from, next) => {
display: flex;
}
.new-top-box-right-input-box {
display: flex;
align-items: center;
flex-shrink: 0;
border-radius: 4px;
padding: 0 12px;
border: 1px solid #e2e7f5;
margin-right: 16px;
height: 36px;
}
.new-top-box-right-input {
width: 225px;
height: 15px;
border: none;
font-size: 13px;
height: 36px;
}
/* 兼容不同浏览器的写法 */
@ -774,17 +762,7 @@ input::-webkit-input-placeholder {
.new-top-box-right-button {
width: 104px;
height: 36px;
border: 1px solid #e2e7f5;
display: flex;
align-items: center;
justify-content: center;
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
font-size: 13px;
color: #536387;
cursor: pointer;
}
.new-list-box {
margin-top: 20px;

81
src/views/mapPage/realTimeMap/components-tool/editNodeProperties.vue
View File

@ -147,6 +147,27 @@
</div>
</div> -->
</div>
<el-form-item label="区域变更点绑定" label-width="130" v-if="form.type === 5 && form.id">
<el-select
v-model="form.dataObj.id"
filterable
remote
reserve-keyword
placeholder="请输入要绑定变更点"
:remote-method="remoteMethod"
:loading="loading"
style="width: 100%"
@change="bindingPositionChange"
>
<el-option
v-for="item in bindingPointList"
:key="item.id"
:label="item.sortNum"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
@ -279,7 +300,7 @@ const submit = async (formEl) => {
await formEl.validate((valid, fields) => {
if (!valid) return
//在这边把数据处理好
if (form.value.type === 1 || form.value.type === 5 || form.value.type === 6) {
if (form.value.type === 1 || form.value.type === 6) {
//不需要dataJson的类型
form.value.dataJson = ''
} else if (form.value.type === 2) {
@ -328,6 +349,8 @@ const submit = async (formEl) => {
form.value.mapImageUrl = deviceInfo.value.mapImageUrl
//dataJson数据
form.value.dataJson = JSON.stringify(form.value.dataObj)
} else if (form.value.type === 5) {
form.value.dataJson = JSON.stringify(form.value.dataObj)
} else {
//类型为路径点位 区域变更点 等待点 值为对象
form.value.dataObj.positionMapId = props.positionMapId
@ -354,18 +377,28 @@ const equipmentList = ref([]) //用过的设备列表
const open = (item, list) => {
form.value = item
form.value.layersNumber = item.dataList?.length || ''
form.value.deviceId = item?.deviceId || item?.dataObj?.id || ''
form.value.positionMapId = props.positionMapId
deviceInfo.value.deviceNo = item?.deviceNo || item?.dataObj?.deviceNo || ''
deviceInfo.value.mapImageUrl = item?.mapImageUrl || item?.dataObj?.mapImageUrl || ''
equipmentList.value = list
if (item?.dataObj?.deviceType) {
deviceInfo.value.deviceType = item.dataObj.deviceType || ''
getDeviceList()
} else {
deviceInfo.value.deviceType = ''
//绑定区域变更点相关
if (item.type === 5 && item.dataObj?.sortNum && item.dataObj?.id) {
remoteMethod(item.dataObj.sortNum)
}
//设备相关
if (item.type === 3) {
form.value.deviceId = item?.deviceId || item?.dataObj?.id || ''
deviceInfo.value.deviceNo = item?.deviceNo || item?.dataObj?.deviceNo || ''
deviceInfo.value.mapImageUrl = item?.mapImageUrl || item?.dataObj?.mapImageUrl || ''
equipmentList.value = list
if (item?.dataObj?.deviceType) {
deviceInfo.value.deviceType = item.dataObj.deviceType || ''
getDeviceList()
} else {
deviceInfo.value.deviceType = ''
}
}
dialogFormVisible.value = true
}
@ -474,6 +507,34 @@ const deviceTypeChange = () => {
getDeviceList()
}
//区域变更点
const loading = ref(false)
const bindingPointList = ref([]) //点位列表
const remoteMethod = async (query) => {
if (query) {
if (/^\d+$/.test(query)) {
loading.value = true
bindingPointList.value = await getLocationList(query)
loading.value = false
} else {
message.warning('请输入数字')
}
} else {
bindingPointList.value = []
}
}
//获取区域变更点的列表
const getLocationList = async (sortNum) => {
return await MapApi.getPositionChangePointBySortNum({
sortNum: sortNum
})
}
//切换
const bindingPositionChange = (e) => {
let item = bindingPointList.value.find((item) => item.id === e)
form.value.dataObj.sortNum = item.sortNum
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

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

@ -163,14 +163,24 @@
</template>
<div>
<div
v-if="item.type === 1 && legendObj.sortNumberShow && item.sortNum"
v-if="
item.type === 1 &&
legendObj.sortNumberShow &&
item.sortNum &&
sortNumberShow
"
class="sort-num"
:style="getSortNumStyle(item, index)"
>
{{ item.sortNum }}
</div>
<div
v-if="item.type !== 1 && legendObj.sortNumberShow && item.sortNum"
v-if="
item.type !== 1 &&
legendObj.sortNumberShow &&
item.sortNum &&
sortNumberShow
"
class="sort-num-location"
:style="getSortNumLocationStyle(item, index)"
>
@ -385,6 +395,10 @@ const props = defineProps({
isFullScreen: {
type: Boolean,
default: () => false
},
sortNumberShow: {
type: Boolean,
default: () => true
}
})

11
src/views/mapPage/realTimeMap/editMap.vue
View File

@ -3029,7 +3029,7 @@ const getAllNodeList = async () => {
item.resizable = false
item.rotatable = false
item.lockAspectRatio = true
} else if (item.type === 5 || item.type === 6) {
} else if (item.type === 6) {
item.dataObj = {}
item.dataList = []
item.locationDeep = 150
@ -3072,6 +3072,15 @@ const getAllNodeList = async () => {
item.resizable = true
item.rotatable = false
item.lockAspectRatio = true
} else if (item.type === 5) {
item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
item.dataList = []
item.locationDeep = 150
item.locationWide = 150
item.draggable = true
item.resizable = false
item.rotatable = false
item.lockAspectRatio = true
} else if (item.type === 7) {
item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
item.text = item.dataObj.text

3
src/views/mapPage/taskManagement/taskList.vue
View File

@ -93,11 +93,12 @@
<el-text class="mx-1" v-if="scope.row.taskType == 1">取放货</el-text>
<el-text class="mx-1" v-if="scope.row.taskType == 2">停车</el-text>
<el-text class="mx-1" v-if="scope.row.taskType == 3">充电</el-text>
<el-text class="mx-1" v-if="scope.row.taskType == 4">充电</el-text>
<el-text class="mx-1" v-if="scope.row.taskType == 4">移动</el-text>
<el-text class="mx-1" v-if="scope.row.taskType == 5">仅取货</el-text>
<el-text class="mx-1" v-if="scope.row.taskType == 6">仅放货</el-text>
<el-text class="mx-1" v-if="scope.row.taskType == 7">扫描码</el-text>
<el-text class="mx-1" v-if="scope.row.taskType == 8">检测托盘类型</el-text>
<el-text class="mx-1" v-if="scope.row.taskType == 8">移动到点位</el-text>
</template>
</el-table-column>
<el-table-column align="center" label="车辆编号" prop="robotNo" />