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_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.153:48080'
# VITE_BASE_URL='http://192.168.0.45:48080' VITE_BASE_URL='http://192.168.0.45:48080'
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
VITE_UPLOAD_TYPE=server 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({ return await request.get({
url: `/system/position-change-point-binding/getItemBySortNum`, 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"> <div class="top-box" v-if="data">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="12"> <el-col :span="12">
<div class="grid-content ep-bg-purple"> <div>
<el-card style="max-width: 100%" shadow="never"> <el-card shadow="never">
<el-row :gutter="5" v-if="data.taskStatusVO"> <el-row :gutter="5" v-if="data.taskStatusVO">
<el-col :span="4"> <el-col :span="4">
<div class="top-item"> <div class="top-item">
@ -51,8 +51,8 @@
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="grid-content ep-bg-purple"> <div>
<el-card style="max-width: 100%" shadow="never"> <el-card shadow="never">
<el-row :gutter="5" v-if="data.statistics"> <el-row :gutter="5" v-if="data.statistics">
<el-col :span="4"> <el-col :span="4">
<div class="top-item"> <div class="top-item">
@ -103,45 +103,34 @@
<!-- 下部分 --> <!-- 下部分 -->
<div class="bottom-box"> <div class="bottom-box">
<el-row :gutter="10"> <el-row :gutter="10">
<!-- 左边 -->
<el-col :span="6"> <el-col :span="6">
<div class="bottom-box-item" v-if="data"> <div class="bottom-box-item-table">
<div class="bottom-box-item-table"> <div class="bottom-box-item-title">
<div class="bottom-box-item-title"> <div class="bottom-box-item-title-left"> 执行中 </div>
<div class="bottom-box-item-title-left"> 执行中 </div> <div class="bottom-box-item-title-right" @click="toManyTask('执行中')"> 查看更多 </div>
<div class="bottom-box-item-title-right" @click="toManyTask('执行中')"> </div>
查看更多 <div>
</div> <el-table :data="data.underway" style="width: 100%" :height="tableHeight">
</div> <el-table-column prop="taskNo" label="任务编号" />
<div> <el-table-column prop="skuNumber" label="车辆编号" />
<el-table :data="data.underway" style="width: 100%"> <el-table-column prop="address" label="任务阶段" />
<el-table-column prop="taskNo" label="任务编号" /> </el-table>
<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> </div>
<div class="bottom-box-item" style="margin-top: 8px" v-if="data">
<div class="bottom-box-item-table"> <div class="bottom-box-item-table mt-4">
<div class="bottom-box-item-title"> <div class="bottom-box-item-title">
<div class="bottom-box-item-title-left"> 待执行 </div> <div class="bottom-box-item-title-left"> 待执行 </div>
<div class="bottom-box-item-title-right" @click="toManyTask('未开始')"> <div class="bottom-box-item-title-right" @click="toManyTask('未开始')"> 查看更多 </div>
查看更多 </div>
</div> <div>
</div> <el-table :data="data.pendingExecution" style="width: 100%" :height="tableHeight">
<div> <el-table-column prop="taskNo" label="任务编号" />
<el-table :data="data.pendingExecution" style="width: 100%"> <el-table-column prop="createTime" label="生成时间" :formatter="dateFormatter" />
<el-table-column prop="taskNo" label="任务编号" /> </el-table>
<el-table-column prop="priorilty" label="优先级" />
<el-table-column prop="createTime" label="生成时间" :formatter="dateFormatter" />
</el-table>
</div>
</div> </div>
</div> </div>
</el-col> </el-col>
<!-- 实时地图 -->
<el-col :span="12"> <el-col :span="12">
<div style="margin-bottom: 10px"> <div style="margin-bottom: 10px">
<el-cascader <el-cascader
@ -151,157 +140,149 @@
style="width: 160px" style="width: 160px"
/> />
</div> </div>
<div style="width: 100%; padding-bottom: 120px" class="map-box-allBoard"> <div class="map-box-allBoard map-box-container">
<indexPage ref="indexPageRef" :isAllBoard="true" :isFullScreen="true" /> <indexPage
ref="indexPageRef"
:isAllBoard="true"
:isFullScreen="true"
:sortNumberShow="false"
/>
</div> </div>
<div <div
style="position: fixed; bottom: 20px" style="position: fixed; bottom: 16px"
:style="{ width: widthVal + 'px', left: leftVal + 'px' }" :style="{ width: widthVal + 'px' }"
v-if="data && data.deviceStatusInfoVOS" v-if="data && data.deviceStatusInfoVOS"
> >
<div <el-scrollbar>
ref="scrollContainer" <div class="scroll-container">
class="scroll-container"
@mousedown="startDrag"
@mousemove="onDrag"
@mouseup="endDrag"
@mouseleave="endDrag"
>
<div class="content">
<div <div
v-for="(n, i) in data.deviceStatusInfoVOS" v-for="(n, i) in data.deviceStatusInfoVOS"
:key="i" :key="i"
class="item" class="item"
:class="{ noBoarder: i === data.deviceStatusInfoVOS.length - 1 }" :class="{ noBoarder: i === data.deviceStatusInfoVOS.length - 1 }"
> >
<div class="scroll-container-item-left"> <div>
<div class="scroll-container-item-left-title">{{ <div class="item-left-title">{{ filterTypeFun(n.deviceType, typeList) }}</div>
filterTypeFun(n.deviceType, typeList) <div class="item-left-img">
}}</div>
<div class="scroll-container-item-left-img">
<img <img
:src="n.defaultImage" :src="n.defaultImage"
alt=""
object-fit="contain" object-fit="contain"
style="width: 100%; height: 100%" style="width: 100%; height: 100%"
/> />
</div> </div>
</div> </div>
<div class="scroll-container-item-right"> <div class="ml-4">
<div class="scroll-container-item-right-item"> <div class="right-item">
<div class="scroll-container-item-right-item-title"> 数量： </div> <div class="item-right-title"> 数量： </div>
<div class="scroll-container-item-right-item-num"> <div class="item-right-num">
{{ n.totalNum || 0 }} {{ n.totalNum || 0 }}
</div> </div>
</div> </div>
<div class="scroll-container-item-right-item" style="margin-top: 3px"> <div class="right-item" style="margin-top: 3px">
<div class="scroll-container-item-right-item-title"> 正常数量： </div> <div class="item-right-title"> 正常数量： </div>
<div class="scroll-container-item-right-item-num"> <div class="item-right-num">
{{ n.normalNum || 0 }} {{ n.normalNum || 0 }}
</div> </div>
</div> </div>
<div class="scroll-container-item-right-item" style="margin-top: 3px"> <div class="right-item" style="margin-top: 3px">
<div class="scroll-container-item-right-item-title"> 异常数量： </div> <div class="item-right-title"> 异常数量： </div>
<div class="scroll-container-item-right-item-num" style="color: #c60606"> <div class="item-right-num" style="color: #c60606">
{{ n.abnormalNum || 0 }} {{ n.abnormalNum || 0 }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-scrollbar>
</div> </div>
</el-col> </el-col>
<!-- 右边 -->
<el-col :span="6"> <el-col :span="6">
<div class="bottom-box-item" v-if="data"> <div class="bottom-box-item-table">
<div class="bottom-box-item-table"> <div class="bottom-box-item-title">
<div class="bottom-box-item-title"> <div class="bottom-box-item-title-left"> 异常信息 </div>
<div class="bottom-box-item-title-left"> 异常信息 </div> <div class="bottom-box-item-title-right" @click="toManyWarnMsg"> 查看更多 </div>
<div class="bottom-box-item-title-right" @click="toManyWarnMsg"> 查看更多 </div> </div>
</div> <div>
<div> <el-table :data="data.robotWarnMsgDOS" style="width: 100%" :height="tableHeight">
<el-table :data="data.robotWarnMsgDOS" style="width: 100%"> <el-table-column prop="robotNo" label="车辆编号" />
<el-table-column prop="robotNo" label="车辆编号" /> <el-table-column prop="warnMsg" label="异常信息">
<el-table-column prop="warnMsg" label="异常信息"> <template #default="scope">
<template #default="scope"> <div class="warn-msg">
<div class="warn-msg"> <div
<div class="warn-msg-color"
class="warn-msg-color" :style="{ backgroundColor: computedBackgroundColor(scope.row.warnLevel) }"
:style="{ backgroundColor: computedBackgroundColor(scope.row.warnLevel) }" >
>
</div>
<div class="warn-msg-text">
{{ scope.row.warnMsg || '' }}
</div>
</div> </div>
</template> <div class="warn-msg-text">
</el-table-column> {{ scope.row.warnMsg || '' }}
<el-table-column prop="createTime" label="发生时间" :formatter="dateFormatter" /> </div>
</el-table> </div>
</div> </template>
</el-table-column>
<el-table-column prop="createTime" label="发生时间" :formatter="dateFormatter" />
</el-table>
</div> </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-table mt-4">
<div class="bottom-box-item-title"> <div class="bottom-box-item-title">
<div class="bottom-box-item-title-left"> 车辆信息 </div> <div class="bottom-box-item-title-left"> 车辆信息 </div>
<div class="bottom-box-item-title-right" @click="goCarBord"> 查看更多 </div> <div class="bottom-box-item-title-right" @click="goCarBord"> 查看更多 </div>
</div> </div>
<div> <div>
<el-table :data="data.robotElectricityLevelVOS" style="width: 100%"> <el-table
<el-table-column prop="robotNo" label="车辆编号" /> :data="data.robotElectricityLevelVOS"
<el-table-column prop="doLock" label="车辆状态"> style="width: 100%"
<template #default="scope"> :height="tableHeight"
<span>{{ scope.row.doLock === 0 ? '正常' : '锁定' }}</span> >
</template> <el-table-column prop="robotNo" label="车辆编号" />
</el-table-column> <el-table-column prop="doLock" label="车辆状态">
<el-table-column prop="batSoc" label="电量百分比"> <template #default="scope">
<template #default="scope"> <span>{{ scope.row.doLock === 0 ? '正常' : '锁定' }}</span>
<div v-if="scope.row.batSoc === null">—</div> </template>
<div class="battery-box-all"> </el-table-column>
<div class="battery-box" v-if="scope.row.batSoc !== null"> <el-table-column prop="batSoc" label="电量百分比">
<img <template #default="scope">
src="@/assets/imgs/allBoard/dianlianggreen.png" <div v-if="scope.row.batSoc === null">—</div>
alt="" <div class="battery-box-all">
class="battery-box-img" <div class="battery-box" v-if="scope.row.batSoc !== null">
v-if="scope.row.batSoc >= 40" <img
/> src="@/assets/imgs/allBoard/dianlianggreen.png"
<img class="battery-box-img"
src="@/assets/imgs/allBoard/dianliangyellow.png" v-if="scope.row.batSoc >= 40"
alt="" />
class="battery-box-img" <img
v-if="scope.row.batSoc < 40 && scope.row.batSoc >= 20" src="@/assets/imgs/allBoard/dianliangyellow.png"
/> class="battery-box-img"
<img v-if="scope.row.batSoc < 40 && scope.row.batSoc >= 20"
src="@/assets/imgs/allBoard/dianliangred.png" />
alt="" <img
class="battery-box-img" src="@/assets/imgs/allBoard/dianliangred.png"
v-if="scope.row.batSoc < 20" class="battery-box-img"
/> v-if="scope.row.batSoc < 20"
<div class="battery-box-inner"> />
<div <div class="battery-box-inner">
class="battery-box-inner-inner" <div
:class=" class="battery-box-inner-inner"
scope.row.batSoc >= 40 :class="
? 'green-bg' scope.row.batSoc >= 40
: scope.row.batSoc < 40 && scope.row.batSoc >= 20 ? 'green-bg'
? 'yellow-bg' : scope.row.batSoc < 40 && scope.row.batSoc >= 20
: 'red-bg' ? 'yellow-bg'
" : 'red-bg'
:style="{ width: scope.row.batSoc + '%' }" "
> :style="{ width: scope.row.batSoc + '%' }"
</div> >
</div> </div>
</div> </div>
<span class="battery-box-text" v-if="scope.row.batSoc !== null"
>{{ scope.row.batSoc || 0 }}%</span
>
</div> </div>
</template> <span class="battery-box-text" v-if="scope.row.batSoc !== null"
</el-table-column> >{{ scope.row.batSoc || 0 }}%</span
</el-table> >
</div> </div>
</template>
</el-table-column>
</el-table>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -312,15 +293,20 @@
<script setup> <script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue' import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { dateFormatter } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import * as ChartsApi from '@/api/boardCharts'
import { DICT_TYPE, getIntDictOptions, getDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions, getDictOptions } from '@/utils/dict'
import { useAppStore } from '@/store/modules/app'
import indexPage from '../../mapPage/realTimeMap/components/indexPage.vue' import indexPage from '../../mapPage/realTimeMap/components/indexPage.vue'
import * as ChartsApi from '@/api/boardCharts'
import * as MapApi from '@/api/map/map' import * as MapApi from '@/api/map/map'
defineOptions({ name: 'BoardAllBoard' })
const appStore = useAppStore()
const collapse = computed(() => appStore.getCollapse) // 折叠菜单
const router = useRouter() // 路由对象 const router = useRouter() // 路由对象
const indexPageRef = ref(null) const indexPageRef = ref(null)
const typeList = ref([]) const typeList = ref([])
defineOptions({ name: 'BoardAllBoard' })
const data = ref({ const data = ref({
taskStatusVO: { taskStatusVO: {
//顶部左边统计 //顶部左边统计
@ -346,21 +332,11 @@ const data = ref({
deviceStatusInfoVOS: [], //设备信息 deviceStatusInfoVOS: [], //设备信息
robotElectricityLevelVOS: [] //车辆信息 robotElectricityLevelVOS: [] //车辆信息
}) })
//获取数据 //获取数据 页面所有数据都在里面
const getAllData = async () => { const getAllData = async () => {
let datas = await ChartsApi.bulletinBoardGet() data.value = 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
} }
//返回异常颜色 //返回异常颜色
const computedBackgroundColor = (warnLevel) => { const computedBackgroundColor = (warnLevel) => {
switch (warnLevel) { switch (warnLevel) {
@ -379,8 +355,6 @@ const computedBackgroundColor = (warnLevel) => {
//前往更多任务 //前往更多任务
const toManyTask = (type) => { const toManyTask = (type) => {
// console.log(getIntDictOptions(DICT_TYPE.ROBOT_TASK_STATUS))
// return
router.push({ router.push({
path: '/task-management/task-list', path: '/task-management/task-list',
query: { query: {
@ -395,12 +369,14 @@ const toManyWarnMsg = () => {
path: '/carError' path: '/carError'
}) })
} }
// 前往车辆看板 // 前往车辆看板
const goCarBord = () => { const goCarBord = () => {
router.push({ router.push({
path: '/board/carBoard' path: '/board/carBoard'
}) })
} }
const list = ref([]) // 地图区域列表 const list = ref([]) // 地图区域列表
const mapValue = ref([]) //选中的区域绑定的数组值 const mapValue = ref([]) //选中的区域绑定的数组值
const mapInfo = ref(null) //选中的区域 const mapInfo = ref(null) //选中的区域
@ -428,7 +404,6 @@ const getList = async () => {
} }
list.value = mapList list.value = mapList
console.log(list.value, data)
if (mapValue.value.length) { if (mapValue.value.length) {
handleChangeMap(mapValue.value) handleChangeMap(mapValue.value)
} else { } else {
@ -496,56 +471,40 @@ const findChildrenByValues = (tree, values) => {
} }
return null 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 getElementWidthByClass = (className) => {
const element = document.querySelector(`.${className}`) const element = document.querySelector(`.${className}`)
if (element) { if (element) {
// return window.getComputedStyle(element).width
const widthWithUnit = window.getComputedStyle(element).width const widthWithUnit = window.getComputedStyle(element).width
return widthWithUnit.slice(0, -2) return widthWithUnit.slice(0, -2)
} }
return null return null
} }
const getLeft = () => { const getElementHeightByClass = (className) => {
let indexpageContainer = document.getElementsByClassName('map-box-allBoard')[0] const element = document.querySelector(`.${className}`)
// console.log('距离左边的距离', indexpageContainer.getBoundingClientRect().left) if (element) {
leftVal.value = indexpageContainer.getBoundingClientRect().left const widthWithUnit = window.getComputedStyle(element).height
return widthWithUnit.slice(0, -2)
}
return null
} }
const getWidthPx = () => {
let width = getElementWidthByClass('map-box-allBoard') watch(
// console.log("pppppppppppppp",width) () => collapse.value,
widthVal.value = width () => {
} pageWidthChange()
const getLeftWidth = () => { }
)
const widthVal = ref(0)
const tableHeight = ref(200)
const pageWidthChange = () => {
nextTick(() => { nextTick(() => {
getWidthPx() widthVal.value = getElementWidthByClass('map-box-allBoard')
getLeft() tableHeight.value = (getElementHeightByClass('bottom-box') - 60) / 2
}) })
} }
//根据type和列表返回对应中文 //根据type和列表返回对应中文
const filterTypeFun = (type, list) => { const filterTypeFun = (type, list) => {
if (list.length) { if (list.length) {
@ -557,53 +516,60 @@ const filterTypeFun = (type, list) => {
return type return type
} }
} }
const getTypeList = () => {
typeList.value = getIntDictOptions(DICT_TYPE.DEVICE_TYPE)
}
onMounted(() => { onMounted(() => {
typeList.value = getDictOptions(DICT_TYPE.DEVICE_TYPE) getTypeList()
getAllData() getAllData()
getList() getList()
getLeftWidth() pageWidthChange()
window.addEventListener('resize', getLeftWidth) window.addEventListener('resize', pageWidthChange)
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
window.removeEventListener('resize', getLeftWidth) window.removeEventListener('resize', pageWidthChange)
}) })
</script> </script>
<style scoped> <style scoped lang="scss">
.top-box { .top-box {
width: 100%; 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 { .bottom-box {
width: 100%; width: 100%;
margin-top: 12px; margin-top: 12px;
height: calc(100vh - 220px);
} }
.bottom-box-item {
width: 100%;
}
.bottom-box-item-title { .bottom-box-item-title {
width: 100%; width: 100%;
display: flex; display: flex;
@ -696,93 +662,70 @@ onBeforeUnmount(() => {
color: #0d162a; color: #0d162a;
margin-top: -3px; margin-top: -3px;
} }
/* 容器样式 */
.scroll-container { .scroll-container {
width: 100%; width: 100%;
height: 104px; display: flex;
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;
align-items: center; align-items: center;
width: fit-content;
margin-top: 10px;
padding: 17px 30px; .item {
background: #fff; box-sizing: border-box;
transition: transform 0.2s; display: flex;
border-right: 2px solid #e9e9e9; 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 { .noBoarder {
border-right: none; border-right: none;
} }
.scroll-container-item-right-item {
display: flex; .map-box-container {
flex-shrink: 0; width: 100%;
} height: calc(100vh - 370px);
.scroll-container-item-right-item-title { overflow-x: hidden;
font-family: overflow-y: auto;
PingFangSC, scrollbar-width: thin; /* Firefox */
PingFang SC; scrollbar-color: #888 #f1f1f1;
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;
} }
</style> </style>

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

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

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

@ -147,6 +147,27 @@
</div> </div>
</div> --> </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> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
@ -279,7 +300,7 @@ const submit = async (formEl) => {
await formEl.validate((valid, fields) => { await formEl.validate((valid, fields) => {
if (!valid) return 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的类型 //不需要dataJson的类型
form.value.dataJson = '' form.value.dataJson = ''
} else if (form.value.type === 2) { } else if (form.value.type === 2) {
@ -328,6 +349,8 @@ const submit = async (formEl) => {
form.value.mapImageUrl = deviceInfo.value.mapImageUrl form.value.mapImageUrl = deviceInfo.value.mapImageUrl
//dataJson数据 //dataJson数据
form.value.dataJson = JSON.stringify(form.value.dataObj) form.value.dataJson = JSON.stringify(form.value.dataObj)
} else if (form.value.type === 5) {
form.value.dataJson = JSON.stringify(form.value.dataObj)
} else { } else {
//类型为路径点位 区域变更点 等待点 值为对象 //类型为路径点位 区域变更点 等待点 值为对象
form.value.dataObj.positionMapId = props.positionMapId form.value.dataObj.positionMapId = props.positionMapId
@ -354,18 +377,28 @@ const equipmentList = ref([]) //用过的设备列表
const open = (item, list) => { const open = (item, list) => {
form.value = item form.value = item
form.value.layersNumber = item.dataList?.length || '' form.value.layersNumber = item.dataList?.length || ''
form.value.deviceId = item?.deviceId || item?.dataObj?.id || ''
form.value.positionMapId = props.positionMapId 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) { if (item.type === 5 && item.dataObj?.sortNum && item.dataObj?.id) {
deviceInfo.value.deviceType = item.dataObj.deviceType || '' remoteMethod(item.dataObj.sortNum)
getDeviceList()
} else {
deviceInfo.value.deviceType = ''
} }
//设备相关
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 dialogFormVisible.value = true
} }
@ -474,6 +507,34 @@ const deviceTypeChange = () => {
getDeviceList() 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 方法，用于打开弹窗 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script> </script>

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

@ -163,14 +163,24 @@
</template> </template>
<div> <div>
<div <div
v-if="item.type === 1 && legendObj.sortNumberShow && item.sortNum" v-if="
item.type === 1 &&
legendObj.sortNumberShow &&
item.sortNum &&
sortNumberShow
"
class="sort-num" class="sort-num"
:style="getSortNumStyle(item, index)" :style="getSortNumStyle(item, index)"
> >
{{ item.sortNum }} {{ item.sortNum }}
</div> </div>
<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" class="sort-num-location"
:style="getSortNumLocationStyle(item, index)" :style="getSortNumLocationStyle(item, index)"
> >
@ -385,6 +395,10 @@ const props = defineProps({
isFullScreen: { isFullScreen: {
type: Boolean, type: Boolean,
default: () => false 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.resizable = false
item.rotatable = false item.rotatable = false
item.lockAspectRatio = true item.lockAspectRatio = true
} else if (item.type === 5 || item.type === 6) { } else if (item.type === 6) {
item.dataObj = {} item.dataObj = {}
item.dataList = [] item.dataList = []
item.locationDeep = 150 item.locationDeep = 150
@ -3072,6 +3072,15 @@ const getAllNodeList = async () => {
item.resizable = true item.resizable = true
item.rotatable = false item.rotatable = false
item.lockAspectRatio = true 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) { } else if (item.type === 7) {
item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson) item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
item.text = item.dataObj.text 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 == 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 == 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 == 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 == 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 == 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 == 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>
<el-text class="mx-1" v-if="scope.row.taskType == 8">移动到点位</el-text>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" label="车辆编号" prop="robotNo" /> <el-table-column align="center" label="车辆编号" prop="robotNo" />