Skip to content

Z
zhmes-agecal
Commit c33d06ef authored by wanghao's avatar wanghao
Browse files
Options

1 托盘绑定界面样式调整实现 扫码可以实时看到设备矩阵界面的数据。

parent 7549bb79
Show whitespace changes
Inline Side-by-side
Showing with 277 additions and 172 deletions
zhmes-agecal-web/src/views/screen/components/TrayBinding.vue
View file @ c33d06ef
<template>
<div class="tray-binding-container">
<div class="tray-binding-container" ref="container">
<!-- 头部区域 -->
<div class="header">
<div class="back-button" @click="goBack">
......@@ -7,7 +7,12 @@
</div>
</div>
<!-- 托盘ID绑定区域 -->
<!-- 托盘ID绑定区域 - 添加悬浮容器 -->
<div
class="tray-id-section-wrapper"
:class="{ 'floating': isFloating }"
:style="{ width: floatingWidth }"
>
<div class="tray-id-section">
<div class="tray-info">
<div class="tray-display">
......@@ -32,7 +37,7 @@
<div
class="scan-section"
style="align-items: center;"
v-if="trayStatus !== '1'"
v-show="trayStatus !== '1' && trayStatus !== '2'"
>
<input
type="text"
......@@ -50,8 +55,12 @@
</div>
</div>
</div>
</div>
<!-- 设备矩阵区域 -->
<!-- 设备矩阵容器 -->
<div class="devices-content-wrapper">
<!-- 设备矩阵区域 - 可滚动 -->
<div class="devices-content" ref="devicesContent">
<div class="devices-grid-container">
<div class="devices-grid">
<div
......@@ -65,6 +74,7 @@
'duplicate': device.isDuplicate
}"
@click="setActiveCell(index)"
:ref="`deviceCell_${index}`"
>
<div class="device-id">
{{ device.deviceCode || '+' }}
......@@ -79,8 +89,10 @@
</div>
</div>
</div>
</div>
<!-- 操作按钮区域 -->
<!-- 操作按钮区域 - 固定在设备矩阵容器底部 -->
<div class="binding-controls-wrapper">
<div class="binding-controls">
<button
v-if="trayStatus === '0'"
......@@ -107,18 +119,7 @@
<i class="fas fa-unlink"></i> 一键解绑
</button>
</div>
<!-- 使用说明区域 -->
<div class="instructions">
<h3><i class="fas fa-lightbulb"></i> 使用说明</h3>
<ul>
<li v-if="trayStatus === '0'"> 点击矩阵中的单元格或按顺序扫描<span class="highlight">设备条码</span>（扫描枪自动识别）</li>
<li v-if="trayStatus === '0'"> 设备条码会自动填充到当前激活的单元格中</li>
<li v-if="trayStatus === '3'"> 请扫描设备条码进行解绑</li>
<li v-if="trayStatus === '3'"> 每解绑一个异常设备，待处理数量将减少</li>
<li> 可以手动点击任何单元格进行修改或重新扫描</li>
<li><i class="fas fa-bolt scanner-icon"></i> 提示：使用扫描枪时，请确保输入框获得焦点</li>
</ul>
</div>
</div>
</div>
</template>
......@@ -163,12 +164,36 @@ export default {
this.addDevice();
}, 500); // 可根据需求调整延迟时间（如300ms-1000ms）
},
// 监听激活单元格变化，实现自动滚动
activeCell(newIndex) {
this.$nextTick(() => {
this.handleScroll(newIndex);
});
},
},
beforeDestroy() {
// 组件销毁时清除计时器，避免内存泄漏
if (this.inputTimer) {
clearTimeout(this.inputTimer);
}
// 移除滚动监听
if (this.$refs.devicesContent) {
this.$refs.devicesContent.removeEventListener('scroll', this.handleScrollEvent);
}
},
mounted() {
// 初始化时聚焦到输入框
this.$nextTick(() => {
this.$refs.deviceInput.focus();
// 获取容器宽度
if (this.$refs.container) {
this.floatingWidth = `${this.$refs.container.clientWidth - 60}px`; // 减去内边距
}
// 添加滚动监听
if (this.$refs.devicesContent) {
this.$refs.devicesContent.addEventListener('scroll', this.handleScrollEvent);
}
});
},
data() {
return {
......@@ -184,6 +209,10 @@ export default {
abnormalCount: 0,
initialAbnormalCount: 0,
// 悬浮状态
isFloating: false,
floatingWidth: 'auto',
// 设备矩阵数据 (8x9 = 72个设备)
devices: Array(72).fill().map((_, i) => {
const row = Math.floor(i / 9) + 1; // 1-8行
......@@ -275,6 +304,42 @@ export default {
}
},
methods: {
// 处理滚动
handleScroll(cellIndex) {
if (!this.$refs.devicesContent) return;
// 计算当前行（每行9个设备）
const currentRow = Math.floor(cellIndex / 9);
// 从第二排开始滚动（索引8是第一排最后一个，索引9是第二排第一个）
if (currentRow >= 1) {
// 滚动距离：每行90px
const scrollTop = currentRow * 90;
// 平滑滚动到指定位置
this.$refs.devicesContent.scrollTo({
top: scrollTop,
behavior: 'smooth'
});
// 激活悬浮模式
if (scrollTop > 50) {
this.isFloating = true;
}
} else {
// 回到第一排时，关闭悬浮
this.isFloating = false;
}
},
// 处理滚动事件
handleScrollEvent() {
if (this.$refs.devicesContent) {
const scrollTop = this.$refs.devicesContent.scrollTop;
this.isFloating = scrollTop > 50;
}
},
// 在 methods 中添加一个专门判断设备是否异常的方法
isDeviceError(device) {
if (!device.deviceCode) return false;
......@@ -629,16 +694,99 @@ export default {
});
}
},
mounted() {
// 初始化时聚焦到托盘输入框
this.$nextTick(() => {
this.$refs.deviceInput.focus();
});
},
};
</script>
<style scoped>
/* 添加托盘信息容器样式 */
/* 修改容器结构 */
.tray-binding-container {
width: 100%;
height: 100%;
max-width: 1400px;
background: rgba(10, 20, 40, 0.85);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
overflow: hidden;
border: 1px solid rgba(100, 180, 255, 0.3);
padding: 10px;
position: relative;
display: flex;
flex-direction: column;
}
/* 添加悬浮包装器样式 */
.tray-id-section-wrapper {
transition: all 0.3s ease;
z-index: 10;
position: sticky; /* 使用sticky定位 */
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
max-width: 1340px; /* 容器宽度减去padding */
flex-shrink: 0; /* 防止收缩 */
}
.tray-id-section-wrapper.floating {
z-index: 1000;
background: rgba(10, 20, 40, 0.95);
border-radius: 0 0 15px 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(64, 158, 255, 0.4);
border-top: none;
padding: 15px;
}
/* 设备矩阵包装器 - 包含设备矩阵和操作按钮 */
.devices-content-wrapper {
flex: 1;
display: flex;
flex-direction: column;
margin-top: 15px;
position: relative;
overflow: hidden; /* 隐藏超出部分 */
}
/* 设备内容区域 - 可滚动 */
.devices-content {
overflow-y: auto;
overflow-x: hidden;
position: relative;
flex: 1; /* 占据剩余空间 */
border-radius: 15px;
background: rgba(0, 40, 80, 0.3);
border: 1px solid rgba(64, 158, 255, 0.4);
margin-bottom: 95px; /* 为操作按钮区域留出空间 */
}
/* 操作按钮包装器 */
.binding-controls-wrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
background: linear-gradient(to bottom, transparent, rgba(10, 20, 40, 0.9) 30%);
padding: 5px 0;
pointer-events: none; /* 让点击穿透到下面的内容 */
}
/* 操作按钮区域 */
.binding-controls {
display: flex;
justify-content: center;
gap: 30px;
pointer-events: auto; /* 恢复按钮的点击事件 */
padding: 5px 5px;
background: rgba(0, 40, 80, 0.8);
border-radius: 15px;
border: 1px solid rgba(64, 158, 255, 0.4);
margin: 0 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* 调整托盘信息区域间距 */
.tray-info {
display: flex;
flex-direction: column;
......@@ -666,32 +814,10 @@ export default {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #0a1929, #0c2a46);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #fff;
}
.tray-binding-container {
width: 100%;
max-width: 1400px;
background: rgba(10, 20, 40, 0.85);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
overflow: hidden;
border: 1px solid rgba(100, 180, 255, 0.3);
padding: 30px;
position: relative;
}
.header {
text-align: right;
margin-bottom: 30px;
position: relative;
flex-shrink: 0; /* 防止收缩 */
}
.back-button {
......@@ -718,14 +844,14 @@ body {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 30px;
background: rgba(0, 40, 80, 0.3);
border-radius: 15px;
padding: 25px;
padding: 10px;
border: 1px solid rgba(64, 158, 255, 0.4);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.tray-display {
......@@ -795,12 +921,7 @@ body {
}
.devices-grid-container {
margin-bottom: 40px;
background: rgba(0, 40, 80, 0.3);
border-radius: 15px;
padding: 25px;
border: 1px solid rgba(64, 158, 255, 0.4);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.grid-title {
......@@ -881,13 +1002,6 @@ body {
color: rgba(255, 255, 255, 0.6);
}
.binding-controls {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 40px;
}
.bind-btn {
background: linear-gradient(to right, #11998e, #38ef7d);
color: white;
......@@ -937,30 +1051,6 @@ body {
box-shadow: 0 8px 20px rgba(255, 65, 108, 0.5);
}
.instructions {
background: rgba(0, 30, 60, 0.4);
border-radius: 15px;
padding: 25px;
margin-top: 40px;
border: 1px solid rgba(100, 200, 255, 0.3);
}
.instructions h3 {
color: #64ffda;
margin-bottom: 15px;
font-size: 1.5rem;
}
.instructions ul {
padding-left: 25px;
}
.instructions li {
margin-bottom: 10px;
line-height: 1.6;
color: #a0d2ff;
}
.scanner-icon {
color: #64ffda;
animation: pulse 2s infinite;
......@@ -998,6 +1088,19 @@ body {
.tray-display, .scan-section {
min-width: 100%;
}
.binding-controls {
flex-direction: column;
align-items: center;
gap: 15px;
}
.bind-btn, .reset-btn, .unbind-btn {
padding: 15px 30px;
font-size: 1.2rem;
width: 80%;
justify-content: center;
}
}
@media (max-width: 600px) {
......@@ -1010,9 +1113,10 @@ body {
text-align: center;
}
.bind-btn, .reset-btn {
padding: 15px 30px;
font-size: 1.2rem;
.bind-btn, .reset-btn, .unbind-btn {
padding: 12px 25px;
font-size: 1.1rem;
width: 90%;
}
}
......@@ -1133,6 +1237,7 @@ body {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(157, 78, 221, 0.5);
}
/* 托盘状态区域 */
.tray-status {
display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment