优化地图上的信息展示
This commit is contained in:
parent
e1e4233c1e
commit
896d64fd11
@ -53,13 +53,13 @@
|
|||||||
<BatteryIndicator :battery="item.battery" />
|
<BatteryIndicator :battery="item.battery" />
|
||||||
<div class="robot-status" :class="item.status.toLowerCase().replace(/\s+/g, '-')">{{ item.status }}</div>
|
<div class="robot-status" :class="item.status.toLowerCase().replace(/\s+/g, '-')">{{ item.status }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="item.tags=== 1" class="alarm-wrapper">
|
<div v-if="item.tags=== 2" class="alarm-wrapper">
|
||||||
<img src="../assets/img/tip.png" alt="告警" class="alarm-tip" />
|
<img src="../assets/img/tip.png" alt="告警" class="alarm-tip" />
|
||||||
<span class="alarm-text">告警</span>
|
<span class="alarm-text">告警</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="item.tags=== 2" class="alarm-wrapper">
|
<div v-if="item.tags=== 1" class="alarm-wrapper">
|
||||||
<img src="../assets/img/ossTip.png" alt="告警" class="alarm-tip" />
|
<img src="../assets/img/ossTip.png" alt="告警" class="alarm-tip" />
|
||||||
<span class="alarm-text">紧急</span>
|
<span class="alarm-text" style="color: #FFf!important;">紧急</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -136,7 +136,7 @@ const fetchRobotList = async (searchNumber = null) => {
|
|||||||
status: getStatusText(robot.onlineStatus, robot.status),
|
status: getStatusText(robot.onlineStatus, robot.status),
|
||||||
type: getGroupType(groupName),
|
type: getGroupType(groupName),
|
||||||
tag: robot.onlineStatus === '1' && robot.status === '3' ? '故障' : null,
|
tag: robot.onlineStatus === '1' && robot.status === '3' ? '故障' : null,
|
||||||
tags: robot.tags
|
tags: robot.robotInfo?.tag
|
||||||
}
|
}
|
||||||
|
|
||||||
allRobots.push(robotData)
|
allRobots.push(robotData)
|
||||||
@ -144,6 +144,13 @@ const fetchRobotList = async (searchNumber = null) => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
robotList.value = allRobots
|
robotList.value = allRobots
|
||||||
|
// 新增:筛选室外巡检机器人并emit
|
||||||
|
const outdoorRobotsArray = allRobots.filter(r => r.type === 'outdoor').map(r => ({
|
||||||
|
id: r.id,
|
||||||
|
battery: r.battery,
|
||||||
|
status: r.status
|
||||||
|
}))
|
||||||
|
emit('outdoor-robots-update', outdoorRobotsArray)
|
||||||
console.log('获取机器人列表成功:', robotList.value)
|
console.log('获取机器人列表成功:', robotList.value)
|
||||||
} else {
|
} else {
|
||||||
error.value = res.msg || '获取机器人列表失败'
|
error.value = res.msg || '获取机器人列表失败'
|
||||||
@ -275,6 +282,13 @@ const goToRobotDetail = (id) => {
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchRobotList()
|
fetchRobotList()
|
||||||
startScroll()
|
startScroll()
|
||||||
|
// 新增:首次挂载时emit一次
|
||||||
|
const outdoorRobotsArray = robotList.value.filter(r => r.type === 'outdoor').map(r => ({
|
||||||
|
id: r.id,
|
||||||
|
battery: r.battery,
|
||||||
|
status: r.status
|
||||||
|
}))
|
||||||
|
emit('outdoor-robots-update', outdoorRobotsArray)
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
@ -285,12 +299,26 @@ onUnmounted(() => {
|
|||||||
watch(selectedFilter, () => {
|
watch(selectedFilter, () => {
|
||||||
console.log('筛选条件变化:', selectedFilter.value)
|
console.log('筛选条件变化:', selectedFilter.value)
|
||||||
searchRobots() // 重新搜索,应用筛选条件
|
searchRobots() // 重新搜索,应用筛选条件
|
||||||
|
// 新增:筛选后emit最新室外巡检机器人
|
||||||
|
const outdoorRobotsArray = robotList.value.filter(r => r.type === 'outdoor').map(r => ({
|
||||||
|
id: r.id,
|
||||||
|
battery: r.battery,
|
||||||
|
status: r.status
|
||||||
|
}))
|
||||||
|
emit('outdoor-robots-update', outdoorRobotsArray)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 搜索机器人
|
// 搜索机器人
|
||||||
const searchRobots = () => {
|
const searchRobots = () => {
|
||||||
console.log('搜索机器人:', searchText.value)
|
console.log('搜索机器人:', searchText.value)
|
||||||
fetchRobotList(searchText.value)
|
fetchRobotList(searchText.value)
|
||||||
|
// 新增:搜索后emit最新室外巡检机器人
|
||||||
|
const outdoorRobotsArray = robotList.value.filter(r => r.type === 'outdoor').map(r => ({
|
||||||
|
id: r.id,
|
||||||
|
battery: r.battery,
|
||||||
|
status: r.status
|
||||||
|
}))
|
||||||
|
emit('outdoor-robots-update', outdoorRobotsArray)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -462,16 +490,17 @@ const searchRobots = () => {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 2.188vw; /* 42px at 1920px width */
|
width: 2.158vw; /* 42px at 1920px width */
|
||||||
height: 1.25vw; /* 24px at 1920px width */
|
height: 1.25vw; /* 24px at 1920px width */
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding:0 10px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alarm-tip {
|
.alarm-tip {
|
||||||
width: 2.188vw; /* 42px at 1920px width */
|
width: 2.588vw; /* 42px at 1920px width */
|
||||||
height: 1.25vw; /* 24px at 1920px width */
|
height: 1.4vw; /* 24px at 1920px width */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -480,11 +509,12 @@ const searchRobots = () => {
|
|||||||
.alarm-text {
|
.alarm-text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0.52vw; /* 10px at 1920px width */
|
left: 0.42vw; /* 10px at 1920px width */
|
||||||
font-size: var(--fsize4);
|
font-size: var(--fsize4);
|
||||||
color: #000;
|
color: #000;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
letter-spacing: 0.05vw;
|
||||||
line-height: 0.938vw; /* 18px at 1920px width */
|
line-height: 0.938vw; /* 18px at 1920px width */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user