声卡继电器完善
This commit is contained in:
1
parent
8eafdac1d7
commit
a5a795268c
@ -28,7 +28,7 @@
|
|||||||
<view class="relay-status">
|
<view class="relay-status">
|
||||||
<view class="status-title">继电器状态</view>
|
<view class="status-title">继电器状态</view>
|
||||||
<view class="relay-grid">
|
<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)">
|
<view class="relay-name" @click="checkOnline(editRelayName, index)">
|
||||||
{{item.remark}}
|
{{item.remark}}
|
||||||
@ -36,11 +36,17 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="relay-state" :class="{'active': item.status === 1}">
|
<view class="relay-state" :class="{'active': item.status === 1}">
|
||||||
|
<view class="status-indicator" :class="{'active': item.status === 1}"></view>
|
||||||
当前状态：{{item.status === 1 ? '吸合' : '断开'}}
|
当前状态：{{item.status === 1 ? '吸合' : '断开'}}
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<u-button type="primary" size="normal" @click="checkOnline(toggleRelay, index)"
|
<u-button
|
||||||
:disabled="device.status !== 3">
|
: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 ? '断开' : '吸合'}}
|
{{item.status === 1 ? '断开' : '吸合'}}
|
||||||
</u-button>
|
</u-button>
|
||||||
</view>
|
</view>
|
||||||
@ -149,20 +155,45 @@
|
|||||||
</u-form-item> -->
|
</u-form-item> -->
|
||||||
|
|
||||||
<u-form-item label="选择继电器">
|
<u-form-item label="选择继电器">
|
||||||
<u-checkbox-group v-model="scheduleForm.relayIndexes">
|
<view class="checkbox-group">
|
||||||
<u-checkbox v-for="(item, index) in relayList" :key="index" :name="index" shape="circle"
|
<view
|
||||||
:label="item.name" class="custom-checkbox">
|
v-for="(item, index) in relayList"
|
||||||
</u-checkbox>
|
:key="index"
|
||||||
</u-checkbox-group>
|
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>
|
||||||
|
|
||||||
<u-form-item label="重复日期">
|
<u-form-item label="重复日期">
|
||||||
<u-checkbox-group v-model="scheduleForm.weekdays" class="repeat-weekdays-group">
|
<view class="checkbox-group repeat-weekdays-group">
|
||||||
<u-checkbox v-for="(day, index) in weekdays" :key="index" :name="index" shape="circle"
|
<view
|
||||||
:label="day" class="custom-checkbox">
|
v-for="(day, index) in weekdays"
|
||||||
{{ day }}
|
:key="index"
|
||||||
</u-checkbox>
|
class="checkbox-item"
|
||||||
</u-checkbox-group>
|
@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-item>
|
||||||
</u--form>
|
</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() {
|
closeSchedulePopup() {
|
||||||
this.showPopup = false;
|
this.showPopup = false;
|
||||||
@ -1006,6 +1061,14 @@
|
|||||||
padding: 20rpx;
|
padding: 20rpx;
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
text-align: center;
|
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 {
|
.relay-name {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
@ -1016,10 +1079,32 @@
|
|||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-bottom: 10rpx;
|
margin-bottom: 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
|
||||||
&.active {
|
&.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;
|
margin-bottom: 30rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 重复日期复选框组 - 垂直排列 */
|
/* 原生checkbox样式 */
|
||||||
::v-deep .repeat-weekdays-group {
|
.checkbox-group {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: column;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: 15rpx;
|
gap: 15rpx;
|
||||||
padding: 10rpx 0;
|
padding: 10rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 继电器选择复选框组 - 垂直排列 */
|
.checkbox-item {
|
||||||
::v-deep .u-checkbox-group {
|
width: 100%;
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
gap: 15rpx;
|
|
||||||
padding: 10rpx 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 复选框通用样式 */
|
|
||||||
.custom-checkbox {
|
|
||||||
width: 100% !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 12rpx 8rpx;
|
padding: 12rpx 8rpx;
|
||||||
border-radius: 6rpx;
|
border-radius: 6rpx;
|
||||||
background-color: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #eee;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
min-height: 60rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
::v-deep text {
|
.checkbox-item:active {
|
||||||
font-size: 26rpx;
|
background-color: #e8f4ff;
|
||||||
white-space: nowrap;
|
border-color: #3c9cff;
|
||||||
overflow: hidden;
|
}
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
.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;
|
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>
|
</style>
|
||||||
@ -191,10 +191,10 @@
|
|||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item label="主持人" prop="per" borderBottom>
|
<u-form-item label="主持人" prop="per" borderBottom>
|
||||||
<u-radio-group v-model="newAudio.per">
|
<u-radio-group v-model="newAudio.per">
|
||||||
<u-radio label="小美" name="0"></u-radio>
|
<u-radio label="男声1" name="0"></u-radio>
|
||||||
<u-radio label="小宇" name="1"></u-radio>
|
<u-radio label="男声2" name="1"></u-radio>
|
||||||
<u-radio label="逍遥" name="3"></u-radio>
|
<u-radio label="女声1" name="3"></u-radio>
|
||||||
<u-radio label="丫丫" name="4"></u-radio>
|
<u-radio label="女声2" name="4"></u-radio>
|
||||||
</u-radio-group>
|
</u-radio-group>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item label="合成语速" prop="spd" borderBottom>
|
<u-form-item label="合成语速" prop="spd" borderBottom>
|
||||||
@ -216,7 +216,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item label="合成文本" prop="text" borderBottom>
|
<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>
|
height="100"></u-input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
</u-form>
|
</u-form>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user