xiangxy/screen-xghy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

布局

Browse Source
This commit is contained in:
xiangxy
2026-03-19 10:32:22 +08:00
parent d242ff1f88
commit 2788c8a335
2 changed files with 383 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/item-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

587
src/pages/XghyScreen.vue
View File

@@ -6,16 +6,16 @@
<div class="left_wrap">
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备实时状态</div>
<div class="item_tip_left">焊材库存占比</div>
</div>
<div class="item_5_l">
<div class="item_content_0">
<div id="echart_d01" style="width: 100%; height: 100%"></div>
</div>
<div class="total">
<div>110<span>台</span></div>
<div>110<span></span></div>
</div>
<div class="total-desc">设备总数</div>
<div class="total-desc">总数</div>
</div>
<div class="item_5_r">
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR01" :key="i">
@@ -26,6 +26,7 @@
<div class="right_1_down_inner_3_r">
<span>{{e.qty}}</span>
<span>台</span>
<span>{{e.bfb}}</span>
</div>
</div>
</div>
@@ -34,69 +35,31 @@
<div class="item_tip">
<div class="item_tip_left">设备管理</div>
</div>
<div class="item_content_1">
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">弯头工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">45.8%</p>
<div class="item_content_aa">
<div class="congroup">
<div class="acon">
<div class="acon-num">123</div>
<div class="acon-icon"></div>
<div class="acon-label">合格</div>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">173h</p>
<div class="acon">
<div class="acon-num">123</div>
<div class="acon-icon"></div>
<div class="acon-label">合格</div>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">6h</p>
</div>
<div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">4次</p>
</div>
</div>
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">综合工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">45.8%</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">173h</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">6h</p>
</div>
<div class="item_content_1_inner_2 cred">
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">4次</p>
</div>
</div>
<div class="item_content_1_inner">
<div class="item_content_1_inner_1">成品工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">45.8%</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">173h</p>
</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
<p class="item_content_1_inner_2_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">6h</p>
</div>
<div class="item_content_1_inner_2 cred">
<p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">4次</p>
<div class="acon">
<div class="acon-num">123</div>
<div class="acon-icon"></div>
<div class="acon-label">合格</div>
</div>
</div>
<div class="tips-ht">焊条1保质期剩余2天！</div>
<div class="tips-ht">焊丝2保质期剩余1天！</div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备产能利用</div>
<div class="item_tip_left">库位总览</div>
</div>
<div class="item_content_1">
<div id="echart_d02" style="width: 100%; height: 100%"></div>
@@ -110,15 +73,56 @@
<div class="item_tip item_tip_01">
<div class="item_tip_left">AGV监控</div>
</div>
<div class="item_content_1">
<div id="echart_d03" style="width: 100%; height: 100%"></div>
<div class="item_content_ss">
<div class="device-card" v-for="device in devices" :key="device.name">
<!-- 左侧网络图标 -->
<div class="device-icon">
<i class="fas fa-network-wired"></i>
</div>
<!-- 右侧详细信息：三行布局，标签宽度95px -->
<div class="device-details">
<!-- 第一行: 设备名称 + 状态 -->
<div class="detail-row">
<span class="label-placeholder"></span>
<span class="device-name-status">
<span class="device-name">{{ device.name }}</span>
<span class="status-badge">{{ device.status }}</span>
</span>
</div>
<!-- 第二行: 当前任务 + 剩余电量 (同行) -->
<div class="split-row">
<div class="info-item">
<span class="item-label">当前任务:</span>
<span class="item-value" :title="device.currentTask">{{ device.currentTask }}</span>
</div>
<div class="info-item">
<span class="item-label">剩余电量:</span>
<span class="item-value battery-text">{{ device.battery }}%</span>
</div>
</div>
<!-- 第三行: 已完成任务 + 剩余任务数 (强制同行) -->
<div class="split-row">
<div class="info-item">
<span class="item-label">已完成任务:</span>
<span class="item-value">{{ device.completedTasks }}</span>
</div>
<div class="info-item">
<span class="item-label">剩余任务数:</span>
<span class="item-value">{{ device.remainingTasks }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item_wrap_1 inlblock">
<div class="item_tip item_tip_01">
<div class="item_tip_left">温湿度监控</div>
</div>
<div class="item_content_1">
<div class="item_content_04">
<div id="echart_d04" style="width: 100%; height: 100%"></div>
</div>
</div>
@@ -189,29 +193,57 @@ export default {
data () {
return {
ddddcolor: '#f00',
devices: [
{
name: 'CTU01',
status: '正常',
currentTask: 'L1-01-02 → c201',
battery: 80,
completedTasks: 12,
remainingTasks: 6
},
{
name: 'AGV01',
status: '正常',
currentTask: 'L1-01-02 → c201',
battery: 40,
completedTasks: 12,
remainingTasks: 6
}
],
arrR01: [
{
color: '#2D7CEB',
name: '正常运行',
qty: '10'
name: '物料1',
qty: '10',
bfb: '10%'
},
{
color: '#07E083',
name: '暂未生产',
qty: '20'
name: '物料2',
qty: '20',
bfb: '20%'
},
{
color: '#00D5FF',
name: '空闲设备',
qty: '30'
name: '物料3',
qty: '30',
bfb: '30%'
},
{
color: '#CC6060',
name: '故障设备',
qty: '40'
name: '物料4',
qty: '20',
bfb: '20%'
},
{
color: '#ffcc00',
name: '物料5',
qty: '20',
bfb: '20%'
}
],
data01: [{value: 500, name: '正常运行'}, {value: 300, name: '暂未生产'}, {value: 200, name: '空闲设备'}, {value: 100, name: '故障设备'}],
data01: [{value: 10, name: '物料1'}, {value: 20, name: '物料2'}, {value: 30, name: '物料3'}, {value: 20, name: '物料4'}, {value: 20, name: '物料5'}],
chartData1: [
{
total_quantity: '31',
@@ -335,7 +367,7 @@ export default {
// this.setEchart10() // 右3
this.setEchart01() // 左1
this.setEchart02() // 左3
this.setEchart03()
// this.setEchart03()
this.setEchart04()
this.setEchart05()
},
@@ -346,6 +378,12 @@ export default {
let fontSize = clientWidth * res / 1920
return fontSize
},
// 根据电量百分比返回进度条颜色
getBatteryColor(level) {
if (level <= 20) return '#e74c3c' // 低电量红色
if (level <= 50) return '#f39c12' // 中等电量橙色
return '#2ecc71' // 高电量绿色
},
setEchart08 () {
// var myColor = ['#81E7ED'] // 内柱状图颜色
var dataLine = [5, 66, 33, 25, 10]
@@ -526,7 +564,7 @@ export default {
// fontSize: '16'
// }
// },
color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060'],
color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060', '#ffcc00'],
series: [
{
type: 'pie',
@@ -1068,151 +1106,85 @@ export default {
})
},
setEchart02 () {
// 左3
let total = []
let names = []
let max = 0
this.chartData1.map(el => {
total.push(el.total_quantity)
names.push(el.material_name)
max = Math.max(max, Number(el.total_quantity))
})
let option = {
grid: {
top: 30,
left: 0,
right: 0,
bottom: 0,
borderColor: '#ffffff',
containLabel: true
const data = [
{ value: 100, name: '空料箱' },
{ value: 32, name: '锁定' },
{ value: 180, name: '满料箱' }
]
const total = data.reduce((sum, item) => sum + item.value, 0)
const option = {
// backgroundColor: '#1a1a1a',
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)',
backgroundColor: 'rgba(0,0,0,0.7)',
borderColor: '#333',
textStyle: { color: '#fff' }
},
// legend: {
// top: 0,
// right: 0,
// textStyle: {
// color: '#ffffff',
// fontSize: 12,
// lineHeight: 20
// },
// itemGap: 20,
// itemHeight: 8,
// data: ['总库存']
// },
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#8FABBF ',
fontSize: 14,
lineHeight: 14
}
},
axisLabel: {
color: '#8FABBF ',
rotate: 50
},
// data: names
data: names.length >= 7 ? names.slice(0, 7) : names
},
yAxis: {
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#909399'
}
},
// axisLabel: {
// color: '#909399'
// },
axisLabel: {
formatter: '{value} %',
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
splitLine: {
show: false,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF',
opacity: 0.2
}
},
max: max
legend: {
show: false,
orient: 'horizontal',
left: 'center',
top: 0,
data: ['空料箱', '锁定', '满料箱'],
textStyle: { color: '#fff' },
itemWidth: 20,
itemHeight: 14
},
series: [
{
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
show: true,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#0E90FD'
},
{
offset: 1,
color: '#607080'
}
]),
borderWidth: 0
}
},
// data: [100, 51, 90, 41, 91, 61, 51]
// data: total,
data: total.length >= 7 ? total.slice(0, 7) : total,
name: '料箱',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '50%'],
data: data,
label: {
show: true,
position: 'top',
// distance: 5,
// fontSize: 12,
textStyle: {
color: '#8FABBF',
fontSize: 14
position: 'outside',
color: '#fff',
formatter: function (params) {
return params.name + ': ' + params.value + '\n(' + params.percent.toFixed(0) + '%)'
},
formatter: function (data) {
return data.value + '%'
lineHeight: 20
},
labelLine: {
length: 15,
length2: 15,
smooth: true,
lineStyle: { color: '#fff' }
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(255,255,255,0.5)'
}
}
},
avoidLabelOverlap: true
}
],
graphic: [
{
type: 'text',
left: 'center',
top: 'middle',
style: {
text: total + '\n总数', // 两行显示：数字在上，文字在下
fill: '#fff',
fontSize: 16,
fontWeight: 'bold',
textAlign: 'center', // 水平居中
textVerticalAlign: 'middle', // 垂直居中（整个文本块中心与定位点重合）
lineHeight: 28 // 控制行间距，使两行紧凑且整体居中
},
z: 100
}
]
}
let echart = document.getElementById('echart_d02')
this.myCharts02 = this.$echarts.init(echart)
this.myCharts02.setOption(option)
if (names.length > 7) {
let t = 1
let stotal = total.slice(0, 7)
let snames = names.slice(0, 7)
this.timer2 = setInterval(() => {
stotal.shift()
stotal.push(total[t + 6])
snames.shift()
snames.push(names[t + 6])
this.myCharts02.setOption({
xAxis: {
data: snames
},
series: [
{data: stotal}
]
})
if (t + 7 < names.length) {
t++
} else {
t = -6
}
}, 2000)
}
},
setEchart10 () {
// 右3
@@ -1402,11 +1374,53 @@ export default {
letter-spacing .02rem
text-shadow 0 0 .09rem #159AFF
padding-left .38rem
.item_content_ss
// _wh(100%, calc(100% - .32rem))
// _fj(space-around)
padding-top .17rem
.item_content_0
width 2.2rem
height 2.2rem
// _fj(space-around)
// padding .17rem 0 .24rem
.item_content_aa
_wh(100%, calc(100% - .32rem))
// _fj(space-around)
padding-top .17rem
background-color #000219
.congroup
display flex
// flex 1
text-align center
// width 33.3%
margin-bottom .2rem
.acon
width calc(100% / 3)
.acon-num
font-size .24rem
height 50px
line-height 50px
.acon-icon
// width 120px
width 100%
height 80px
background center center / 100% 100% url(../assets/images/item-icon.png) no-repeat
.acon-label
font-size .26rem
height 50px
line-height 50px
.tips-ht
color #f00
width 50%
height .36rem
line-height .36rem
// display inline-block
padding .1rem 0 0 .3rem
float left
.item_content_04
_wh(100%, calc(100% - .32rem))
_fj(space-around)
padding-top .17rem
.item_content_1
_wh(100%, calc(100% - .32rem))
_fj(space-around)
@@ -1448,8 +1462,9 @@ export default {
margin-bottom .26rem
background center bottom / 100% 100% url(../assets/images/screen1/xghy-bg.jpg) no-repeat
.inlblock
display inline-block
// display inline-block
margin-right 0.08rem
float: left;
.item_content_2
_wh(100%, calc(100% - .32rem))
margin-top .06rem
@@ -1673,4 +1688,168 @@ export default {
text-align center
.cred
color #CC6060
/* 监控模块容器 — 两张卡片并排 */
.monitor-module {
width: 100%;
max-width: 1060px; /* 适应两张500px卡片+间隙 */
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
/* 设备卡片 — 宽度500px，保证所有内容完整显示且不换行 */
.device-card {
flex: 0 1 500px; /* 基础500px，可收缩但有限 */
min-width: 480px; /* 最小480px，确保内部不换行 */
background: rgba(18, 28, 40, 0.8);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(64, 128, 255, 0.25);
border-radius: 24px;
padding: 11px 12px 11px 10px;
display: flex;
gap: 22px;
box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(78, 159, 255, 0.15) inset;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
// .device-card:hover {
// border-color: rgba(78, 159, 255, 0.5);
// box-shadow: 0 18px 40px -12px rgba(0, 160, 255, 0.4);
// }
/* 顶部光晕线条 */
.device-card::after {
content: '';
position: absolute;
top: 0;
left: 10%;
width: 80%;
height: 2px;
background: linear-gradient(90deg, transparent, #3f9eff, #6ec8ff, transparent);
border-radius: 100%;
opacity: 0.4;
}
/* 左侧网络图标 — 90x90，与三行明细高度协调 */
.device-icon {
width: 90px;
height: 90px;
background: rgba(0, 45, 85, 0.8);
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0, 200, 255, 0.4);
box-shadow: 0 0 20px rgba(0, 180, 255, 0.3);
color: #8cd4ff;
font-size: 48px;
flex-shrink: 0;
align-self: center;
}
/* 右侧详细信息容器 */
.device-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
}
/* 占位列（用于第一行缩进）— 宽度改为95px，与标签一致 */
.label-placeholder {
width: 95px; /* 从80px改为95px */
flex-shrink: 0;
opacity: 0;
pointer-events: none;
}
/* 第一行：设备名 + 状态 */
.device-name-status {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.device-name {
font-size: 22px;
font-weight: 700;
color: white;
letter-spacing: 1px;
text-shadow: 0 0 8px rgba(0, 160, 255, 0.6);
}
.status-badge {
display: inline-block;
background: rgba(46, 204, 113, 0.2);
border: 1px solid rgba(46, 204, 113, 0.6);
color: #c0ffe0;
font-size: 14px;
font-weight: 600;
padding: 4px 14px;
border-radius: 30px;
backdrop-filter: blur(2px);
box-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
}
/* 分割行：左右两部分 — 强制不换行 */
.split-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: nowrap; /* 强制一行，永不换行 */
}
/* 每个信息项 */
.info-item {
display: flex;
align-items: center;
// flex: 1;
min-width: 0; /* 允许收缩，但内容强制不换行 */
}
/* 标签统一宽度95px */
.info-item .item-label {
width: 80px; /* 从80px改为95px */
color: #9bb5d9;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.3px;
flex-shrink: 0;
}
/* 值区域 — 强制不换行，溢出可见（卡片宽度已保证完整显示） */
.info-item .item-value {
// flex: 1;
color: #f0f6ff;
font-weight: 500;
font-size: 14px;
white-space: nowrap;
overflow: visible;
}
/* 剩余电量值微暖色 */
.battery-text {
font-weight: 600;
color: #ffecb3;
}
/* 极小屏适配，但仍保持一行 */
@media (max-width: 800px) {
.device-card {
flex: 0 1 100%;
min-width: 360px;
}
.device-details {
gap: 12px;
}
/* 仍保持 .split-row 的 nowrap */
}
</style>