布局
This commit is contained in:
BIN
src/assets/images/item-icon.png
Normal file
BIN
src/assets/images/item-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -6,16 +6,16 @@
|
|||||||
<div class="left_wrap">
|
<div class="left_wrap">
|
||||||
<div class="item_wrap">
|
<div class="item_wrap">
|
||||||
<div class="item_tip">
|
<div class="item_tip">
|
||||||
<div class="item_tip_left">设备实时状态</div>
|
<div class="item_tip_left">焊材库存占比</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_5_l">
|
<div class="item_5_l">
|
||||||
<div class="item_content_0">
|
<div class="item_content_0">
|
||||||
<div id="echart_d01" style="width: 100%; height: 100%"></div>
|
<div id="echart_d01" style="width: 100%; height: 100%"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="total">
|
<div class="total">
|
||||||
<div>110<span>台</span></div>
|
<div>110<span></span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="total-desc">设备总数</div>
|
<div class="total-desc">总数</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_5_r">
|
<div class="item_5_r">
|
||||||
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR01" :key="i">
|
<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">
|
<div class="right_1_down_inner_3_r">
|
||||||
<span>{{e.qty}}</span>
|
<span>{{e.qty}}</span>
|
||||||
<span>台</span>
|
<span>台</span>
|
||||||
|
<span>{{e.bfb}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -34,69 +35,31 @@
|
|||||||
<div class="item_tip">
|
<div class="item_tip">
|
||||||
<div class="item_tip_left">设备管理</div>
|
<div class="item_tip_left">设备管理</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_content_1">
|
<div class="item_content_aa">
|
||||||
<div class="item_content_1_inner">
|
<div class="congroup">
|
||||||
<div class="item_content_1_inner_1">弯头工段</div>
|
<div class="acon">
|
||||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
<div class="acon-num">123</div>
|
||||||
<p class="item_content_1_inner_2_p1">OEE：</p>
|
<div class="acon-icon"></div>
|
||||||
<p class="item_content_1_inner_2_p2">45.8%</p>
|
<div class="acon-label">合格</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
<div class="acon">
|
||||||
<p class="item_content_1_inner_2_p1">MIBF：</p>
|
<div class="acon-num">123</div>
|
||||||
<p class="item_content_1_inner_2_p2">173h</p>
|
<div class="acon-icon"></div>
|
||||||
|
<div class="acon-label">合格</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
<div class="acon">
|
||||||
<p class="item_content_1_inner_2_p1">MTTR：</p>
|
<div class="acon-num">123</div>
|
||||||
<p class="item_content_1_inner_2_p2">6h</p>
|
<div class="acon-icon"></div>
|
||||||
</div>
|
<div class="acon-label">合格</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tips-ht">焊条1保质期剩余2天！</div>
|
||||||
|
<div class="tips-ht">焊丝2保质期剩余1天！</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_wrap">
|
<div class="item_wrap">
|
||||||
<div class="item_tip">
|
<div class="item_tip">
|
||||||
<div class="item_tip_left">设备产能利用</div>
|
<div class="item_tip_left">库位总览</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_content_1">
|
<div class="item_content_1">
|
||||||
<div id="echart_d02" style="width: 100%; height: 100%"></div>
|
<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 item_tip_01">
|
||||||
<div class="item_tip_left">AGV监控</div>
|
<div class="item_tip_left">AGV监控</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_content_1">
|
<div class="item_content_ss">
|
||||||
<div id="echart_d03" style="width: 100%; height: 100%"></div>
|
<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>
|
</div>
|
||||||
<div class="item_wrap_1 inlblock">
|
<div class="item_wrap_1 inlblock">
|
||||||
<div class="item_tip item_tip_01">
|
<div class="item_tip item_tip_01">
|
||||||
<div class="item_tip_left">温湿度监控</div>
|
<div class="item_tip_left">温湿度监控</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item_content_1">
|
<div class="item_content_04">
|
||||||
<div id="echart_d04" style="width: 100%; height: 100%"></div>
|
<div id="echart_d04" style="width: 100%; height: 100%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -189,29 +193,57 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
ddddcolor: '#f00',
|
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: [
|
arrR01: [
|
||||||
{
|
{
|
||||||
color: '#2D7CEB',
|
color: '#2D7CEB',
|
||||||
name: '正常运行',
|
name: '物料1',
|
||||||
qty: '10'
|
qty: '10',
|
||||||
|
bfb: '10%'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
color: '#07E083',
|
color: '#07E083',
|
||||||
name: '暂未生产',
|
name: '物料2',
|
||||||
qty: '20'
|
qty: '20',
|
||||||
|
bfb: '20%'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
color: '#00D5FF',
|
color: '#00D5FF',
|
||||||
name: '空闲设备',
|
name: '物料3',
|
||||||
qty: '30'
|
qty: '30',
|
||||||
|
bfb: '30%'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
color: '#CC6060',
|
color: '#CC6060',
|
||||||
name: '故障设备',
|
name: '物料4',
|
||||||
qty: '40'
|
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: [
|
chartData1: [
|
||||||
{
|
{
|
||||||
total_quantity: '31',
|
total_quantity: '31',
|
||||||
@@ -335,7 +367,7 @@ export default {
|
|||||||
// this.setEchart10() // 右3
|
// this.setEchart10() // 右3
|
||||||
this.setEchart01() // 左1
|
this.setEchart01() // 左1
|
||||||
this.setEchart02() // 左3
|
this.setEchart02() // 左3
|
||||||
this.setEchart03()
|
// this.setEchart03()
|
||||||
this.setEchart04()
|
this.setEchart04()
|
||||||
this.setEchart05()
|
this.setEchart05()
|
||||||
},
|
},
|
||||||
@@ -346,6 +378,12 @@ export default {
|
|||||||
let fontSize = clientWidth * res / 1920
|
let fontSize = clientWidth * res / 1920
|
||||||
return fontSize
|
return fontSize
|
||||||
},
|
},
|
||||||
|
// 根据电量百分比返回进度条颜色
|
||||||
|
getBatteryColor(level) {
|
||||||
|
if (level <= 20) return '#e74c3c' // 低电量红色
|
||||||
|
if (level <= 50) return '#f39c12' // 中等电量橙色
|
||||||
|
return '#2ecc71' // 高电量绿色
|
||||||
|
},
|
||||||
setEchart08 () {
|
setEchart08 () {
|
||||||
// var myColor = ['#81E7ED'] // 内柱状图颜色
|
// var myColor = ['#81E7ED'] // 内柱状图颜色
|
||||||
var dataLine = [5, 66, 33, 25, 10]
|
var dataLine = [5, 66, 33, 25, 10]
|
||||||
@@ -526,7 +564,7 @@ export default {
|
|||||||
// fontSize: '16'
|
// fontSize: '16'
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060'],
|
color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060', '#ffcc00'],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
@@ -1068,151 +1106,85 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
setEchart02 () {
|
setEchart02 () {
|
||||||
// 左3
|
const data = [
|
||||||
let total = []
|
{ value: 100, name: '空料箱' },
|
||||||
let names = []
|
{ value: 32, name: '锁定' },
|
||||||
let max = 0
|
{ value: 180, name: '满料箱' }
|
||||||
this.chartData1.map(el => {
|
]
|
||||||
total.push(el.total_quantity)
|
const total = data.reduce((sum, item) => sum + item.value, 0)
|
||||||
names.push(el.material_name)
|
|
||||||
max = Math.max(max, Number(el.total_quantity))
|
const option = {
|
||||||
})
|
// backgroundColor: '#1a1a1a',
|
||||||
let option = {
|
tooltip: {
|
||||||
grid: {
|
trigger: 'item',
|
||||||
top: 30,
|
formatter: '{b}: {c} ({d}%)',
|
||||||
left: 0,
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||||
right: 0,
|
borderColor: '#333',
|
||||||
bottom: 0,
|
textStyle: { color: '#fff' }
|
||||||
borderColor: '#ffffff',
|
|
||||||
containLabel: true
|
|
||||||
},
|
},
|
||||||
// legend: {
|
legend: {
|
||||||
// top: 0,
|
show: false,
|
||||||
// right: 0,
|
orient: 'horizontal',
|
||||||
// textStyle: {
|
left: 'center',
|
||||||
// color: '#ffffff',
|
top: 0,
|
||||||
// fontSize: 12,
|
data: ['空料箱', '锁定', '满料箱'],
|
||||||
// lineHeight: 20
|
textStyle: { color: '#fff' },
|
||||||
// },
|
itemWidth: 20,
|
||||||
// itemGap: 20,
|
itemHeight: 14
|
||||||
// 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
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'bar',
|
name: '料箱',
|
||||||
barWidth: 8,
|
type: 'pie',
|
||||||
itemStyle: {
|
radius: ['40%', '70%'],
|
||||||
normal: {
|
center: ['50%', '50%'],
|
||||||
show: true,
|
data: data,
|
||||||
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,
|
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'top',
|
position: 'outside',
|
||||||
// distance: 5,
|
color: '#fff',
|
||||||
// fontSize: 12,
|
formatter: function (params) {
|
||||||
textStyle: {
|
return params.name + ': ' + params.value + '\n(' + params.percent.toFixed(0) + '%)'
|
||||||
color: '#8FABBF',
|
|
||||||
fontSize: 14
|
|
||||||
},
|
},
|
||||||
formatter: function (data) {
|
lineHeight: 20
|
||||||
return data.value + '%'
|
},
|
||||||
|
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')
|
let echart = document.getElementById('echart_d02')
|
||||||
this.myCharts02 = this.$echarts.init(echart)
|
this.myCharts02 = this.$echarts.init(echart)
|
||||||
this.myCharts02.setOption(option)
|
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 () {
|
setEchart10 () {
|
||||||
// 右3
|
// 右3
|
||||||
@@ -1402,11 +1374,53 @@ export default {
|
|||||||
letter-spacing .02rem
|
letter-spacing .02rem
|
||||||
text-shadow 0 0 .09rem #159AFF
|
text-shadow 0 0 .09rem #159AFF
|
||||||
padding-left .38rem
|
padding-left .38rem
|
||||||
|
.item_content_ss
|
||||||
|
// _wh(100%, calc(100% - .32rem))
|
||||||
|
// _fj(space-around)
|
||||||
|
padding-top .17rem
|
||||||
.item_content_0
|
.item_content_0
|
||||||
width 2.2rem
|
width 2.2rem
|
||||||
height 2.2rem
|
height 2.2rem
|
||||||
// _fj(space-around)
|
// _fj(space-around)
|
||||||
// padding .17rem 0 .24rem
|
// 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
|
.item_content_1
|
||||||
_wh(100%, calc(100% - .32rem))
|
_wh(100%, calc(100% - .32rem))
|
||||||
_fj(space-around)
|
_fj(space-around)
|
||||||
@@ -1448,8 +1462,9 @@ export default {
|
|||||||
margin-bottom .26rem
|
margin-bottom .26rem
|
||||||
background center bottom / 100% 100% url(../assets/images/screen1/xghy-bg.jpg) no-repeat
|
background center bottom / 100% 100% url(../assets/images/screen1/xghy-bg.jpg) no-repeat
|
||||||
.inlblock
|
.inlblock
|
||||||
display inline-block
|
// display inline-block
|
||||||
margin-right 0.08rem
|
margin-right 0.08rem
|
||||||
|
float: left;
|
||||||
.item_content_2
|
.item_content_2
|
||||||
_wh(100%, calc(100% - .32rem))
|
_wh(100%, calc(100% - .32rem))
|
||||||
margin-top .06rem
|
margin-top .06rem
|
||||||
@@ -1673,4 +1688,168 @@ export default {
|
|||||||
text-align center
|
text-align center
|
||||||
.cred
|
.cred
|
||||||
color #CC6060
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user