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

fix:控制器开关界面优化。

Browse Source
This commit is contained in:
tianyongbao
2026-01-20 00:02:58 +08:00
parent ea95dab832
commit 1816d21e40
1 changed files with 108 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/components/other/index.vue
View File

@@ -439,36 +439,48 @@
<nut-col :span="24">
<view class="controller-header">
<view class="controller-name">
{{ item.deviceName }}
<text class="controller-title">{{ item.deviceName }}</text>
<view class="error-tag" v-if="item.errorMessage">{{ item.errorMessage }}</view>
</view>
<!-- <view class="controller-actions">
<view @click.stop="setParamsCtr(item.id)" class="param-setting-link">参数设置</view>
</view> -->
</view>
</nut-col>
<!-- 开关列表 -->
<nut-col :span="24">
<view
class="switch-item"
v-for="switchItem in item.listSwitch"
:key="switchItem.id"
>
<view class="switch-left">
<img :src="getSwitchIcon(switchItem)" class="switch-icon" />
<text class="switch-name">{{ switchItem.switchName }}</text>
</view>
<view class="switch-right">
<view @click.stop="setSwitchNameDialog(switchItem.id, switchItem.switchName)" class="switch-setting-link">重命名</view>
<view @click.stop="toTiming(switchItem.id)" class="switch-setting-link">定时</view>
<view @click.stop="setSwitch(switchItem.id, switchItem.switchName)" class="switch-setting-link">设置</view>
<nut-switch
:model-value="switchItem.isOpen === 1"
active-color="#04D98A"
@change="(value, event) => setSwitchOpen({ value, event }, switchItem)"
/>
<view class="switch-list">
<view
class="switch-item"
v-for="switchItem in item.listSwitch"
:key="switchItem.id"
>
<view class="switch-left">
<view class="switch-icon-wrapper">
<img :src="getSwitchIcon(switchItem)" class="switch-icon" />
</view>
<view class="switch-info">
<text class="switch-name">{{ switchItem.switchName }}</text>
<text class="switch-status" v-if="switchItem.isOpen === 1">运行中</text>
<text class="switch-status off" v-else>已关闭</text>
</view>
</view>
<view class="switch-right">
<view class="switch-actions">
<view @click.stop="setSwitchNameDialog(switchItem.id, switchItem.switchName)" class="action-btn">
<text>重命名</text>
</view>
<view @click.stop="toTiming(switchItem.id)" class="action-btn">
<text>定时</text>
</view>
<view @click.stop="setSwitch(switchItem.id, switchItem.switchName)" class="action-btn">
<text>设置</text>
</view>
</view>
<nut-switch
:model-value="switchItem.isOpen === 1"
active-color="#04D98A"
@change="(value, event) => setSwitchOpen({ value, event }, switchItem)"
/>
</view>
</view>
</view>
</nut-col>
@@ -2416,51 +2428,49 @@ defineExpose({
// 控制器区域样式
.controller-item {
margin-bottom: 10px;
margin-bottom: 12px;
.controller-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
padding: 12px 0 10px 0;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 10px;
.controller-name {
font-size: 30px;
font-weight: 600;
color: #222;
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
.controller-title {
font-size: 30px;
font-weight: 600;
color: #222;
}
.error-tag {
font-size: 24px;
font-size: 22px;
font-weight: 400;
color: #bf290e;
background: rgba(191, 41, 14, 0.1);
padding: 4px 12px;
padding: 4px 10px;
border-radius: 4px;
}
}
.controller-actions {
.param-setting-link {
font-size: 28px;
color: #1589E9;
cursor: pointer;
transition: opacity 0.2s ease;
&:active {
opacity: 0.7;
}
}
}
}
.switch-list {
display: flex;
flex-direction: column;
gap: 0;
}
.switch-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;
padding: 12px 0;
border-bottom: 1px solid #f5f5f5;
&:last-child {
@@ -2472,34 +2482,72 @@ defineExpose({
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
.switch-icon {
.switch-icon-wrapper {
flex-shrink: 0;
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
.switch-icon {
width: 40px;
height: 40px;
}
}
.switch-name {
font-size: 28px;
color: #333;
font-weight: 500;
.switch-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
.switch-name {
font-size: 28px;
color: #333;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.switch-status {
font-size: 22px;
color: #09b8c2;
&.off {
color: #999;
}
}
}
}
.switch-right {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 20px;
gap: 12px;
.switch-setting-link {
font-size: 28px;
color: #1589E9;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.2s ease;
.switch-actions {
display: flex;
gap: 8px;
&:active {
opacity: 0.7;
.action-btn {
padding: 6px 12px;
border-radius: 4px;
font-size: 24px;
background: #fff;
border: 1px solid #e5e5e5;
color: #666;
transition: all 0.2s ease;
white-space: nowrap;
&:active {
background: #f5f5f5;
}
}
}
}