diff --git a/src/assets/images/item-icon.png b/src/assets/images/item-icon.png new file mode 100644 index 0000000..4d3f718 Binary files /dev/null and b/src/assets/images/item-icon.png differ diff --git a/src/pages/XghyScreen.vue b/src/pages/XghyScreen.vue index 553ddc3..ba106cc 100644 --- a/src/pages/XghyScreen.vue +++ b/src/pages/XghyScreen.vue @@ -6,16 +6,16 @@
-
设备实时状态
+
焊材库存占比
-
110台
+
110
-
设备总数
+
总数
@@ -26,6 +26,7 @@
{{e.qty}} 台 + {{e.bfb}}
@@ -34,69 +35,31 @@
设备管理
-
-
-
弯头工段
-
-

OEE：

-

45.8%

+
+
+
+
123
+
+
合格
-
-

MIBF：

-

173h

+
+
123
+
+
合格
-
-

MTTR：

-

6h

-
-
-

报警：

-

4次

-
-
-
-
综合工段
-
-

OEE：

-

45.8%

-
-
-

MIBF：

-

173h

-
-
-

MTTR：

-

6h

-
-
-

报警：

-

4次

-
-
-
-
成品工段
-
-

OEE：

-

45.8%

-
-
-

MIBF：

-

173h

-
-
-

MTTR：

-

6h

-
-
-

报警：

-

4次

+
+
123
+
+
合格
+
焊条1保质期剩余2天！
+
焊丝2保质期剩余1天！
-
设备产能利用
+
库位总览
@@ -110,15 +73,56 @@
AGV监控
-
-
+
+
+ +
+ +
+ + +
+ +
+ + + {{ device.name }} + {{ device.status }} + +
+ + +
+
+ 当前任务: + {{ device.currentTask }} +
+
+ 剩余电量: + {{ device.battery }}% +
+
+ + +
+
+ 已完成任务: + {{ device.completedTasks }} +
+
+ 剩余任务数: + {{ device.remainingTasks }} +
+
+
+
温湿度监控
-
+
@@ -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 */ +}