mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

大屏

Browse Source
This commit is contained in:
‘937886381’
2025-11-18 09:31:39 +08:00
parent 0e1e813dc2
commit c0a38c568f
60 changed files with 4703 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/views/productionVisualization/equipmentBoard/components/threeDimensionalChart.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<div style="flex: 1">
<div class="threeDimensionalChart">
<div class="bg" style="width: 1433px;height: 487px">
<div class="statusItem">
<!-- 动态生成FK10101到FK10103 -->
<!-- 框绞1号线设备1空盘缓存区巷道1 -->
<div v-for="i in 3" :key="i" :ref="`FK1010${i}`" class="location" :style="{
top: `${84 + (i - 1) * 13}px`, // 初始top84px，每一项加2px
left: '783px' // 保持相同left值
}">
<div :ref="`FK1010${i}L`" style="background-color: blue;width: 11px;height: 11px;">
</div>
<div :ref="`FK1010${i}R`" style="background-color: red;width: 11px;height: 11px;">
</div>
</div>
<!-- 框绞1号线设备1空盘缓存区巷道2 -->
<div v-for="i in 3" :key="i" :ref="`FK1020${i}`" class="location" :style="{
top: `${84 + (i - 1) * 13}px`, // 初始top84px，每一项加2px
left: '810px' // 保持相同left值
}">
<div :ref="`FK1020${i}L`" style="background-color: blue;width: 11px;height: 11px;">
</div>
<div :ref="`FK1020${i}R`" style="background-color: red;width: 11px;height: 11px;">
</div>
</div>
<!-- 框绞1号线设备1满盘缓存区巷道1 -->
<div v-for="i in 3" :key="i" :ref="`FM1010${i}`" class="location" :style="{
top: `${83 + (i - 1) * 13}px`, // 初始top84px，每一项加2px
left: '700px' // 保持相同left值
}">
<div :ref="`FM1010${i}L`" style="background-color: blue;width: 11px;height: 11px;">
</div>
<div :ref="`FM1010${i}R`" style="background-color: red;width: 11px;height: 11px;">
</div>
</div>
<!-- 框绞1号线设备1满盘缓存区巷道2 -->
<div v-for="i in 3" :key="i" :ref="`FM1020${i}`" class="location" :style="{
top: `${83 + (i - 1) * 13}px`, // 初始top84px，每一项加2px
left: '740px' // 保持相同left值
}">
<div :ref="`FM1020${i}L`" style="background-color: blue;width: 11px;height: 11px;">
</div>
<div :ref="`FM1020${i}R`" style="background-color: red;width: 11px;height: 11px;">
</div>
</div>
<!-- 循环渲染状态项 -->
<div class="item" v-for="(status, index) in statusList" :key="index">
<div class="icon" :class="status.iconClass"></div>
<span class="text">{{ status.text }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AGVStatus',
components: {},
props: {
energyObj: {
type: Object,
default: () => ({
electricComu: 0,
steamComu: 0
})
}
},
data() {
return {
statusList: [
{ text: '满盘', iconClass: 'full-pallet' },
{ text: '空盘', iconClass: 'empty-pallet' },
{ text: '异常', iconClass: 'abnormal' },
{ text: '预占', iconClass: 'reserved' },
{ text: '锁定', iconClass: 'locked' },
{ text: '占用', iconClass: 'occupied' },
{ text: '空闲', iconClass: 'idle' },
{ text: '在途', iconClass: 'in-transit' },
{ text: '禁用', iconClass: 'disabled' }
]
}
}
}
</script>
<style lang='scss' scoped>
.threeDimensionalChart {
width: 1493px;
height: 512px;
background: #FFFFFF;
border-radius: 8px;
padding: 14px 38px 11px 22px;
position: relative;
.bg {
background: url('../../../../assets/img/threeDimensionalChartBg.png') no-repeat;
background-size: 100% 100%;
.location{
position: absolute;
width: 23px;
height: 11px;
display: flex;
gap: 1px;
// background-color: blue;
}
.FK10101{
top: 84px;
left: 783px;
}
.statusItem {
/* 关键修改：使用 flex-wrap 实现换行 */
margin-left: 1149px;
padding-top: 17px;
display: flex;
flex-wrap: wrap;
/* 允许换行 */
gap: 13px 10px;
align-items: center;
/* 限制最大宽度，避免内容过宽 */
// max-width: 250px;
/* 可选：设置最大行数，超出隐藏（按需添加） */
/* max-height: 100px;
overflow: hidden; */
}
.item {
display: flex;
align-items: center;
gap: 5px;
/* 确保每个项作为整体换行 */
white-space: nowrap;
.icon {
width: 14px;
height: 14px;
background-size: cover;
background-repeat: no-repeat;
flex-shrink: 0;
}
.text {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #121212;
line-height: 14px;
text-align: left;
font-style: normal;
}
// 图标背景图保持不变
.full-pallet {
background-image: url('../../../../assets/img/FP.png');
}
.empty-pallet {
background-image: url('../../../../assets/img/EP.png');
}
.abnormal {
background-image: url('../../../../assets/img/ABN.png');
}
.reserved {
background-image: url('../../../../assets/img/RES.png');
}
.locked {
background-image: url('../../../../assets/img/LCK.png');
}
.occupied {
background-image: url('../../../../assets/img/OCC.png');
}
.idle {
background-image: url('../../../../assets/img/IDL.png');
}
.in-transit {
background-image: url('../../../../assets/img/IT.png');
}
.disabled {
background-image: url('../../../../assets/img/DIS.png');
}
}
}
}
</style>