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

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

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