JayJiaJun/Xazn-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

声卡继电器完善

Browse Source
This commit is contained in:
1 2025-07-08 10:38:19 +08:00
parent 8eafdac1d7
commit a5a795268c
2 changed files with 198 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
pagesA/home/device/status/relay.vue
View File

@ -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 {
.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>

10
pagesA/home/device/status/voice.vue
View File

@ -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>