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-19 22:57:31 +08:00
parent 6dac8011f0
commit d1e131f2df
1 changed files with 183 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -422,73 +422,50 @@
:gutter="10"
v-for="item in controlList"
:key="item.id"
@click="setControl(item)"
class="controller-item"
>
<nut-col :span="5" :style="{ height: '70px' }">
<nut-row :gutter="5">
<nut-col :span="24" class="tc">
<view class="table-container">
<view class="single-line" :style="{ marginBottom: '1px' }">
<!-- 控制器标题行 -->
<nut-col :span="24">
<view class="controller-header">
<view class="controller-name">
{{ item.deviceName }}
<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 class="tagErr single-line" v-if="item.errorMessage">{{
item.errorMessage
}}</view>
</view>
</nut-col>
</nut-row>
</nut-col>
<nut-col :span="18" :style="{ height: '70px' }">
<nut-row :gutter="5">
<nut-col :span="6" class="tc">
<!-- 开关列表 -->
<nut-col :span="24">
<view
><img
:src="switchRes(item.listSwitch, 1, 'img')"
class="img_size_def"
/></view>
<view class="tc truncate">{{
switchRes(item.listSwitch, 1, "switchName")
}}</view>
</nut-col>
<nut-col :span="6" class="tc">
<view
><img
:src="switchRes(item.listSwitch, 2, 'img')"
class="img_size_def"
/></view>
<view class="tc truncate">{{
switchRes(item.listSwitch, 2, "switchName")
}}</view>
</nut-col>
<nut-col :span="6" class="tc">
<view
><img
:src="switchRes(item.listSwitch, 3, 'img')"
class="img_size_def"
/></view>
<view class="tc truncate">{{
switchRes(item.listSwitch, 3, "switchName")
}}</view>
</nut-col>
<nut-col :span="6" class="tc">
<view
><img
:src="switchRes(item.listSwitch, 4, 'img')"
class="img_size_def"
/></view>
<view class="tc truncate">{{
switchRes(item.listSwitch, 4, "switchName")
}}</view>
</nut-col>
</nut-row>
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">
<nut-switch
:model-value="switchItem.isOpen === 1"
active-color="#04D98A"
@change="(value, event) => setSwitchOpen({ value, event }, switchItem)"
/>
<view @click.stop="setSwitch(switchItem.id, switchItem.switchName)" class="switch-setting-link">设置</view>
</view>
</view>
</nut-col>
<nut-col :span="24">
<nut-divider
:style="{
color: '#eee',
borderColor: '#eee',
padding: '0 0 0 0px',
margin: '0',
padding: '0',
margin: '10px 0',
}"
/>
</nut-col>
@@ -1746,6 +1723,61 @@ function switchRes(list, index, type) {
return "开关" + index;
}
}
// 获取单个开关图标
function getSwitchIcon(switchItem: any) {
const isLinkedCtrl = switchItem.isLinkedCtrl || 0;
const isTimingCtrl = switchItem.isTimingCtrl || 0;
const isOpen = switchItem.isOpen || 0;
const hasErrorCode = switchItem.hasErrorCode || 0;
// 同时开启定时和联动
if (isTimingCtrl && isLinkedCtrl) {
if (!isOpen) {
return c4_n;
} else {
if (hasErrorCode) {
return c4_d;
} else {
return c4;
}
}
}
// 只开启联动
if (isLinkedCtrl) {
if (!isOpen) {
return c2_n;
} else {
if (hasErrorCode) {
return c2_d;
} else {
return c2;
}
}
}
// 只开启定时
if (isTimingCtrl) {
if (!isOpen) {
return c1_n;
} else {
if (hasErrorCode) {
return c1_d;
} else {
return c1;
}
}
}
// 普通开关
if (!isOpen) {
return c3_n;
} else {
if (hasErrorCode) {
return c3_d;
} else {
return c3;
}
}
}
// 控制器弹出层
function setControl(item) {
visControl.value = true;
@@ -2194,4 +2226,96 @@ defineExpose({
}
}
}
// 控制器区域样式
.controller-item {
margin-bottom: 10px;
.controller-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
.controller-name {
font-size: 30px;
font-weight: 600;
color: #222;
display: flex;
align-items: center;
gap: 10px;
.error-tag {
font-size: 24px;
font-weight: 400;
color: #bf290e;
background: rgba(191, 41, 14, 0.1);
padding: 4px 12px;
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-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.switch-left {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
.switch-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
}
.switch-name {
font-size: 28px;
color: #333;
font-weight: 500;
}
}
.switch-right {
display: flex;
align-items: center;
gap: 20px;
.switch-setting-link {
font-size: 28px;
color: #1589E9;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.2s ease;
&:active {
opacity: 0.7;
}
}
}
}
}
</style>