From a5a795268cf8c74d233a66c9b33b3e3dc41c1bae Mon Sep 17 00:00:00 2001
From: 1 <13958863+jayjiajun@user.noreply.gitee.com>
Date: Tue, 8 Jul 2025 10:38:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A3=B0=E5=8D=A1=E7=BB=A7=E7=94=B5=E5=99=A8?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pagesA/home/device/status/relay.vue | 230 +++++++++++++++++++++++-----
 pagesA/home/device/status/voice.vue |  10 +-
 2 files changed, 198 insertions(+), 42 deletions(-)

diff --git a/pagesA/home/device/status/relay.vue b/pagesA/home/device/status/relay.vue
index 307d4ca..14dfc50 100644
--- a/pagesA/home/device/status/relay.vue
+++ b/pagesA/home/device/status/relay.vue
@@ -28,7 +28,7 @@
 		<view class="relay-status">
 			<view class="status-title">继电器状态</view>
 			<view class="relay-grid">
-				<view class="relay-item" v-for="(item, index) in relayList" :key="index">
+				<view class="relay-item" v-for="(item, index) in relayList" :key="index" :class="{'relay-active': item.status === 1}">
 					<!-- 可点击的继电器名称 -->
 					<view class="relay-name" @click="checkOnline(editRelayName, index)">
 						{{item.remark}}
@@ -36,11 +36,17 @@
 					</view>
 
 					<view class="relay-state" :class="{'active': item.status  === 1}">
+						<view class="status-indicator" :class="{'active': item.status === 1}"></view>
 						当前状态：{{item.status === 1 ? '吸合' : '断开'}}
 					</view>
 
-					<u-button type="primary" size="normal" @click="checkOnline(toggleRelay, index)"
-						:disabled="device.status  !== 3">
+					<u-button 
+						:type="item.status === 1 ? 'error' : 'primary'" 
+						size="normal" 
+						@click="checkOnline(toggleRelay, index)"
+						:disabled="device.status  !== 3"
+						:class="{'btn-active': item.status === 1}"
+					>
 						{{item.status === 1 ? '断开' : '吸合'}}
 					</u-button>
 				</view>
@@ -149,20 +155,45 @@
 					</u-form-item> -->
 
 					<u-form-item label="选择继电器">
-						<u-checkbox-group v-model="scheduleForm.relayIndexes">
-							<u-checkbox v-for="(item, index) in relayList" :key="index" :name="index" shape="circle"
-								:label="item.name" class="custom-checkbox">
-							</u-checkbox>
-						</u-checkbox-group>
+						<view class="checkbox-group">
+							<view 
+								v-for="(item, index) in relayList" 
+								:key="index" 
+								class="checkbox-item"
+								:class="{ 'selected': scheduleForm.relayIndexes.includes(index) }"
+								@click="toggleRelayCheckbox(index)"
+							>
+								<view class="checkbox-wrapper">
+									<view class="checkbox" :class="{ 'checked': scheduleForm.relayIndexes.includes(index) }">
+										<view v-if="scheduleForm.relayIndexes.includes(index)" class="checkbox-checkmark">✓</view>
+									</view>
+									<view class="relay-info">
+										<text class="checkbox-label">{{ item.remark || item.name }}</text>
+										<text class="relay-status-text" :class="{ 'active': scheduleForm.relayIndexes.includes(index) }">
+											{{ scheduleForm.relayIndexes.includes(index) ? '吸合' : '断开' }}
+										</text>
+									</view>
+								</view>
+							</view>
+						</view>
 					</u-form-item>
 
 					<u-form-item label="重复日期">
-						<u-checkbox-group v-model="scheduleForm.weekdays" class="repeat-weekdays-group">
-							<u-checkbox v-for="(day, index) in weekdays" :key="index" :name="index" shape="circle"
-								:label="day" class="custom-checkbox">
-								{{ day }}
-							</u-checkbox>
-						</u-checkbox-group>
+						<view class="checkbox-group repeat-weekdays-group">
+							<view 
+								v-for="(day, index) in weekdays" 
+								:key="index" 
+								class="checkbox-item"
+								@click="toggleWeekdayCheckbox(index)"
+							>
+								<view class="checkbox-wrapper">
+									<view class="checkbox" :class="{ 'checked': scheduleForm.weekdays.includes(index) }">
+										<view v-if="scheduleForm.weekdays.includes(index)" class="checkbox-checkmark">✓</view>
+									</view>
+									<text class="checkbox-label">{{ day }}</text>
+								</view>
+							</view>
+						</view>
 					</u-form-item>
 				</u--form>
 
@@ -790,6 +821,30 @@
 				}
 			},
 
+			// 切换继电器checkbox
+			toggleRelayCheckbox(index) {
+				const currentIndex = this.scheduleForm.relayIndexes.indexOf(index);
+				if (currentIndex > -1) {
+					// 如果已选中，则移除
+					this.scheduleForm.relayIndexes.splice(currentIndex, 1);
+				} else {
+					// 如果未选中，则添加
+					this.scheduleForm.relayIndexes.push(index);
+				}
+			},
+
+			// 切换星期checkbox
+			toggleWeekdayCheckbox(index) {
+				const currentIndex = this.scheduleForm.weekdays.indexOf(index);
+				if (currentIndex > -1) {
+					// 如果已选中，则移除
+					this.scheduleForm.weekdays.splice(currentIndex, 1);
+				} else {
+					// 如果未选中，则添加
+					this.scheduleForm.weekdays.push(index);
+				}
+			},
+
 			// 关闭时间方案弹窗
 			closeSchedulePopup() {
 				this.showPopup = false;
@@ -1006,6 +1061,14 @@
     padding: 20rpx;
     border-radius: 8rpx;
     text-align: center;
+    transition: all 0.3s ease;
+    border: 2rpx solid transparent;
+
+    &.relay-active {
+      background-color: #e6f9ea;
+      border-color: #52c41a;
+      box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.15);
+    }
 
     .relay-name {
       font-size: 28rpx;
@@ -1016,10 +1079,32 @@
       font-size: 24rpx;
       color: #666;
       margin-bottom: 10rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8rpx;
 
       &.active {
-        color: #2979ff;
+        color: #52c41a;
       }
+
+      .status-indicator {
+        width: 12rpx;
+        height: 12rpx;
+        border-radius: 50%;
+        background-color: #ccc;
+        transition: all 0.3s ease;
+
+        &.active {
+          background-color: #52c41a;
+          box-shadow: 0 0 8rpx rgba(82, 196, 26, 0.4);
+        }
+      }
+    }
+
+    .btn-active {
+      background-color: #52c41a !important;
+      border-color: #52c41a !important;
     }
   }
 
@@ -1039,40 +1124,94 @@
       margin-bottom: 30rpx;
     }
 
-    /* 重复日期复选框组 - 垂直排列 */
-    ::v-deep .repeat-weekdays-group {
-      display: flex;
-      flex-direction: column;
+    /* 原生checkbox样式 */
+    .checkbox-group {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
       gap: 15rpx;
       padding: 10rpx 0;
     }
 
-    /* 继电器选择复选框组 - 垂直排列 */
-    ::v-deep .u-checkbox-group {
-      display: flex !important;
-      flex-direction: column !important;
-      gap: 15rpx;
-      padding: 10rpx 0;
-    }
-
-    /* 复选框通用样式 */
-    .custom-checkbox {
-      width: 100% !important;
-      margin: 0 !important;
+    .checkbox-item {
+      width: 100%;
       padding: 12rpx 8rpx;
       border-radius: 6rpx;
       background-color: #f8f8f8;
       border: 1px solid #eee;
       box-sizing: border-box;
+      transition: all 0.3s ease;
+      min-height: 60rpx;
       display: flex;
       align-items: center;
+    }
 
-      ::v-deep text {
-        font-size: 26rpx;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+    .checkbox-item:active {
+      background-color: #e8f4ff;
+      border-color: #3c9cff;
+    }
+
+    .checkbox-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+      width: 100%;
+    }
+
+    .checkbox {
+      width: 36rpx;
+      height: 36rpx;
+      border: 2rpx solid #ddd;
+      border-radius: 6rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #fff;
+      transition: all 0.3s ease;
+      flex-shrink: 0;
+    }
+
+    .checkbox.checked {
+      background-color: #3c9cff;
+      border-color: #3c9cff;
+    }
+
+    .checkbox-checkmark {
+      color: #fff;
+      font-size: 24rpx;
+      font-weight: bold;
+      line-height: 1;
+    }
+
+    .checkbox-label {
+      font-size: 26rpx;
+      color: #333;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .relay-info {
+      display: flex;
+      flex-direction: column;
+      gap: 4rpx;
+      flex: 1;
+    }
+
+    .relay-status-text {
+      font-size: 22rpx;
+      color: #999;
+      transition: all 0.3s ease;
+    }
+
+    .relay-status-text.active {
+      color: #52c41a;
+      font-weight: bold;
+    }
+
+    .checkbox-item.selected {
+      background-color: #e6f9ea;
+      border-color: #52c41a;
     }
 
     /* 表单输入框样式 */
@@ -1119,4 +1258,21 @@
     margin-top: 0;
   }
 }
+
+/* 小屏幕适配 */
+@media (max-width: 375px) {
+  .checkbox-group {
+    grid-template-columns: 1fr;
+    gap: 12rpx;
+  }
+  
+  .checkbox-item {
+    min-height: 56rpx;
+    padding: 10rpx 6rpx;
+  }
+  
+  .checkbox-label {
+    font-size: 24rpx;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/pagesA/home/device/status/voice.vue b/pagesA/home/device/status/voice.vue
index d04fb2b..630a982 100644
--- a/pagesA/home/device/status/voice.vue
+++ b/pagesA/home/device/status/voice.vue
@@ -191,10 +191,10 @@
 						</u-form-item>
 						<u-form-item label="主持人" prop="per" borderBottom>
 							<u-radio-group v-model="newAudio.per">
-								<u-radio label="小美" name="0"></u-radio>
-								<u-radio label="小宇" name="1"></u-radio>
-								<u-radio label="逍遥" name="3"></u-radio>
-								<u-radio label="丫丫" name="4"></u-radio>
+								<u-radio label="男声1" name="0"></u-radio>
+								<u-radio label="男声2" name="1"></u-radio>
+								<u-radio label="女声1" name="3"></u-radio>
+								<u-radio label="女声2" name="4"></u-radio>
 							</u-radio-group>
 						</u-form-item>
 						<u-form-item label="合成语速" prop="spd" borderBottom>
@@ -216,7 +216,7 @@
 							</view>
 						</u-form-item>
 						<u-form-item label="合成文本" prop="text" borderBottom>
-							<u-input v-model="newAudio.text" type="textarea" placeholder="请输入合成文本"
+							<u-input v-model="newAudio.text" type="textarea" placeholder="最多输入30个字"
 								height="100"></u-input>
 						</u-form-item>
 					</u-form>