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 17:23:01 +08:00
parent 1907da5b43
commit 3740e7fe52
2 changed files with 130 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,19 +13,7 @@
<template #icon>
<IconFont :name="setting" size="16" />
</template>
<text class="font_28">编辑</text>
</nut-button>
<nut-button
type="primary"
class="btn font_28"
size="mini"
:style="{ marginRight: '5px' }"
open-type="contact"
>
<template #icon>
<IconFont :name="phone" size="16" />
</template>
<text class="font_28">联系工程师</text>
<text class="font_28">编辑塘口</text>
</nut-button>
<nut-button
type="primary"
@@ -45,28 +33,23 @@
</nut-col>
</nut-row>
<nut-row v-if="doList.length > 0" class="pondInfo_home">
<nut-tabs
v-model="doDev"
title-scroll
title-gutter="20"
background="#ffffff"
align="left"
:ellipsis="false"
auto-height
>
<template #titles>
<view
v-for="item in doList"
:key="item.id"
class="custom-tab-item font_32"
@click="changeDev(item)"
>
<view class="custom-title" :class="{ active: doDev === item.id }"
>{{ item.deviceName }}
<view class="device-tabs-wrapper">
<scroll-view scroll-x="true" :show-scrollbar="false" :scroll-with-animation="true">
<view class="device-tabs">
<view
v-for="item in doList"
:key="item.id"
class="custom-tab-item font_32"
:class="{ 'tab-active': doDev === item.id }"
@click="changeDev(item)"
>
<view class="custom-title" :class="{ active: doDev === item.id }"
>{{ item.deviceName }}
</view>
</view>
</view>
</template>
</nut-tabs>
</scroll-view>
</view>
<nut-row v-for="item in doList" :key="item.id">
<nut-col :span="24" v-if="doDev == item.id">
<view class="view_f_between">
@@ -1890,25 +1873,48 @@ defineExpose({
border-radius: 4px;
color: #bf290e;
}
.device-tabs-wrapper {
width: 100%;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.device-tabs {
display: flex;
flex-wrap: nowrap;
padding: 20rpx 0;
}
.custom-tab-item {
padding: 0 0px 0 0;
margin: 0 30px 0 0;
.custom-line {
width: 100%;
height: 2px;
background: #eeeeee;
border-radius: 10px;
margin: 0 auto;
padding: 10rpx 20rpx;
margin-right: 10rpx;
background-color: #f5f6f7;
border-radius: 8rpx;
transition: all 0.3s ease;
white-space: nowrap;
&:last-child {
margin-right: 0;
}
&.tab-active {
background-color: #ffffff;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.custom-title {
color: black;
color: #333;
display: inline-block;
}
.custom-title.active {
border-bottom: 4px solid #09b8c2;
font-size: 28rpx;
&.active {
color: #09b8c2;
font-weight: bold;
}
}
}
.nut-tab-pane {

112
src/pages/main/home.vue
View File

@@ -6,15 +6,32 @@
<nut-config-provider :theme-vars="themeVars">
<nut-row class="body" :catch-move="false">
<view :style="{ height: '120rpx' }">
<!-- 头部 -->
<!-- 头部操作按钮区 -->
<nut-col
:span="24"
class="view_f_between"
:style="{ padding: '20rpx 20rpx 0 20rpx' }"
>
<view class="view_f">
<!-- <IconFont :name="location" />
<view class="font_28" v-if="store.getUnLogin != 1">{{ city }}</view> -->
<view>
<nut-button type="primary" class="btn" size="small" @click="changeMode">
<template #icon>
<IconFont :name="change" size="18" />
</template>
<text class="font_32 c_fff">切换模式</text>
</nut-button>
</view>
<view>
<nut-button
type="primary"
class="btn font_28"
size="small"
open-type="contact"
>
<template #icon>
<IconFont :name="phone" size="18" />
</template>
<text class="font_32">联系工程师</text>
</nut-button>
</view>
<view>
<nut-button
@@ -29,6 +46,8 @@
<text class="font_32">系统公告</text>
</nut-button>
</view>
</nut-col>
<!-- 消息通知 -->
<nut-col
@@ -37,7 +56,6 @@
:style="{ padding: '0 20rpx' }"
@click="toPay"
>
<!-- deadList.length>0 && -->
<view :style="{ width: '100%' }">
<nut-noticebar
background="rgba(255, 255, 255, 0.7)"
@@ -48,19 +66,18 @@
<template #left-icon>
<img :src="noticeImg" style="width: 32rpx; height: 32rpx" />
</template>
<!-- <text class="content">{{ `${notice}` }}</text> -->
<text class="content">{{ `${deadList.length}个设备即将到期` }}</text>
</nut-noticebar>
</view>
</nut-col>
<!-- 标题 -->
<!-- 塘口列表标题 -->
<nut-col
:span="24"
class="pond m_t_15 view_f_between"
:style="{ padding: '0 20rpx' }"
>
<view class="font_34 f_weight">塘口列表</view>
<view id="addPondBtn">
<view id="addPondBtn" class="view_f" :style="{ gap: '10rpx' }">
<nut-button
type="primary"
class="btn font_28"
@@ -74,14 +91,7 @@
</template>
<text class="font_32">新建塘口</text>
</nut-button>
</view>
<view>
<nut-button type="primary" class="btn" size="small" @click="changeMode">
<template #icon>
<IconFont :name="change" size="18" />
</template>
<text class="font_32 c_fff">切换模式</text>
</nut-button>
</view>
</nut-col>
</view>
@@ -280,11 +290,11 @@
<nut-row v-if="pondList.length > 0">
<!-- 切换选择塘口 -->
<nut-col :span="24">
<scroll-view :scroll-x="true" style="width: 100%; height: 60rpx">
<view :style="{ width: '100%' }">
<nut-radio-group
v-model="selPond"
direction="horizontal"
:style="{ whiteSpace: 'nowrap' }"
:style="{ flexWrap: 'wrap', gap: '10rpx' }"
>
<nut-radio
:label="item.id"
@@ -294,7 +304,7 @@
>{{ item.pondName }}</nut-radio
>
</nut-radio-group>
</scroll-view>
</view>
</nut-col>
<nut-col
:span="24"
@@ -306,7 +316,7 @@
@getPondInfo="getPondInfo"
@addDevice="addDevice"
ref="pondChildInfo"
type="1"
:type="1"
/>
</nut-col>
</nut-row>
@@ -541,7 +551,7 @@
v-model="selPond_2"
@addDevice="addDevice"
ref="pondChildInfo"
type="2"
:type="2"
/>
</nut-col>
</nut-row>
@@ -590,6 +600,8 @@ const c3_n = `${imgUrl}c3_n.png`;
const c_def = `${imgUrl}c_def.png`;
const location = `${imgUrl}location.png`;
const change = `${imgUrl}change.png`;
const phone = `${imgUrl}tel.png`;
const setting = `${imgUrl}setting.png`;
const noticeImg = `${imgUrl}noticeImg.png`;
const pond404 = `${imgUrl}zanwurenwu.png`;
// const notice = ref("有设备服务快到期，请尽快续费");
@@ -632,9 +644,9 @@ let qqmapsdk = new QQMapWX({
key: "75RBZ-WQSYB-6KEUB-NCZME-D62T7-YIF4G",
});
// 选中的塘口id
const selPond = ref<number | undefined>(undefined);
const selPond = ref<number | string | undefined>(undefined);
// 多糖选中塘口id
const selPond_2 = ref<number | undefined>(undefined);
const selPond_2 = ref<number | string | undefined>(undefined);
const selPondName_2 = ref<string | undefined>("塘口详情");
const visControl = ref(false);
// 展示塘口详情
@@ -940,19 +952,22 @@ function pond1() {
});
pondList.value = rows;
// 立即设置默认选中的塘口，并强制触发响应式更新
if (rows.length > 0) {
const firstPondId = rows[0]["id"]; // 保持原始类型
if (!selPond.value || !pondIds.includes(selPond.value)) {
// 延迟一帧确保 DOM 已渲染
setTimeout(() => {
selPond.value = firstPondId;
console.log('已选中塘口:', selPond.value, '类型:', typeof selPond.value, '所有塘口:', rows.map(r => ({id: r.id, name: r.pondName})));
}, 50);
}
} else {
selPond.value = undefined;
}
setTimeout(() => {
showTour.value = rows.length == 0 ? true : false;
}, 500);
selPond.value = selPond.value
? selPond.value
: rows.length > 0
? Number(rows[0]["id"])
: undefined;
if (selPond.value) {
if (!pondIds.includes(selPond.value)) {
selPond.value = rows.length > 0 ? Number(rows[0]["id"]) : undefined;
}
}
}
});
}
@@ -968,6 +983,18 @@ function addPond() {
url: "/home/addPond",
});
}
// 编辑塘口
function updatePond() {
const pondId = mode.value == 1 ? selPond.value : selPond_2.value;
if (pondId) {
Taro.navigateTo({
url: `/home/updatePond?id=${pondId}`,
});
} else {
state.show = true;
state.msg = "请先选择塘口";
}
}
// 绑定设备页面
function addDevice() {
@@ -1277,17 +1304,32 @@ function toPay() {
// 模式2塘口管理
.pond_mode2 {
.nut-radio__button--active {
background-color: #09b8c2;
background: linear-gradient(135deg, #09b8c2 0%, #06a0a9 100%) !important;
border-radius: 10px;
color: #fff !important;
font-weight: bold;
font-size: 30rpx !important;
box-shadow: 0 6rpx 16rpx rgba(9, 184, 194, 0.6);
transform: scale(1.08);
transition: all 0.3s ease;
border: 2px solid #09b8c2;
}
.nut-radio__button--normal {
border-radius: 10px;
background-color: #f5f6f7;
color: #999;
font-size: 28rpx;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
border: 1px solid transparent;
}
.nut-radio--button {
background-color: #fff;
background-color: #f5f6f7;
border-radius: 10px;
margin-bottom: 10rpx;
margin-right: 10rpx;
}
.nut-tab-pane {