572 lines
16 KiB
Vue
572 lines
16 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<z-paging ref="index" refresher-only bg-color="radial-gradient(circle at top left, #E8F4F8 40%, #F8FCFE 100%)"
|
||
:show-empty="false" :show-footer="false" @onRefresh="refresh">
|
||
<template #refresher="{refresherStatus}">
|
||
<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
|
||
<custom-refresher :status="refresherStatus" />
|
||
</template>
|
||
<uni-row class="demo-uni-row" >
|
||
<uni-col :span="7">
|
||
<uni-data-select align="left" :clear="false" v-model="value" @change="change" :localdata="range" ></uni-data-select>
|
||
</uni-col>
|
||
<uni-col :span="17">
|
||
<!-- confirm:confirm; input:change; cancel:点击取消；
|
||
clear：点击清除；focus:获取焦点；blur：失去焦点 -->
|
||
<uni-search-bar :focus="true"
|
||
bgColor="#fbfdfe"
|
||
v-model="searchValue"
|
||
cancelButton="always"
|
||
@input="input"
|
||
clearButton="always"
|
||
@cancel="cancel"
|
||
@clear="cancel"
|
||
placeholder="请输入搜索内容">
|
||
<template v-slot:searchIcon>
|
||
<yt-scanCode @getScanCode="getScanCode"></yt-scanCode>
|
||
</template>
|
||
</uni-search-bar>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-section class="mb-10" title="温室列表" style="background:transparent;" type="line">
|
||
<scroll-view
|
||
scroll-y
|
||
class="list-scroll"
|
||
@scrolltolower="loadMore"
|
||
lower-threshold="50"
|
||
scroll-with-animation
|
||
>
|
||
<view
|
||
v-for="(item, index) in listData"
|
||
:key="index"
|
||
:class="['list-item', { 'list-item-disabled': item.online === '离线' }]"
|
||
@tap="item.online !== '离线' && onItemTap(item)"
|
||
>
|
||
<view class="item-title">
|
||
<view class="title-text">{{ item.agriName }}</view>
|
||
<text :class="['tag','tag-status',{'tag-manual':item.workModeDesc==='手动模式'}]" v-if="item.workModeDesc">{{ item.workModeDesc }}</text>
|
||
<text :class="['tag','tag-online',{'tag-offline':item.online==='离线'}]" v-if="item.online">{{ item.online }}</text>
|
||
</view>
|
||
|
||
<view class="item-subtitle">
|
||
设备编号：{{ item.imei }}
|
||
</view>
|
||
|
||
<view class="item-tags">
|
||
<text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
|
||
<text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
|
||
<text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
|
||
<text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="isLoading" class="loading-more">
|
||
<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
|
||
<text>加载中...</text>
|
||
</view>
|
||
<view v-else-if="noMore" class="no-more">没有更多数据了</view>
|
||
<!-- v-if="store.getters.name !== 'admin'"-->
|
||
<view class="add-agri" @tap="handleAddAgri" >
|
||
<image :src="imageSrc" :style="'width:'+80+'rpx;height:'+80+'rpx'"></image>
|
||
<text class="text">点击添加大棚</text>
|
||
</view>
|
||
</scroll-view>
|
||
</uni-section>
|
||
<!-- <uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"-->
|
||
<!-- :direction="direction" @trigger="trigger" @fabClick="fabClick" />-->
|
||
<add-agri ref="addAgri"/>
|
||
</z-paging>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import ZPaging from "../uni_modules/z-paging/components/z-paging/z-paging.vue";
|
||
import CustomRefresher from "../components/custom-refresher/custom-refresher.vue";
|
||
import {getAgriInfo} from "../api/system/assets/agri";
|
||
import store from "../store";
|
||
import TimeUtil from "../utils/TimeUtil";
|
||
import {getNewSpecialData} from "../api/data/specialData";
|
||
import AddAgri from "./home/addAgri.vue";
|
||
|
||
export default {
|
||
computed: {
|
||
store() {
|
||
return store
|
||
}
|
||
},
|
||
components: {AddAgri, CustomRefresher, ZPaging},
|
||
data() {
|
||
return {
|
||
listData: [],
|
||
datas: [],
|
||
pageSize: 6,
|
||
isLoading: false,
|
||
noMore: false,
|
||
total: 20, // 模拟总条数
|
||
value: 0,
|
||
range: [{
|
||
"value": 0,
|
||
"text": "大棚名称",
|
||
}, {
|
||
"value": 1,
|
||
"text": "设备编号",
|
||
}],
|
||
imageSrc:'/static/agri.png',
|
||
scrollHeight: 0,
|
||
// horizontal: 'right',
|
||
// vertical: 'bottom',
|
||
// direction: 'horizontal',
|
||
searchValue: null,
|
||
/* pattern: {
|
||
color: '#7A7E83',
|
||
backgroundColor: '#fff',
|
||
selectedColor: '#007AFF',
|
||
buttonColor: '#007AFF',
|
||
iconColor: '#fff'
|
||
},
|
||
content: [{
|
||
iconPath: '/static/image.png',
|
||
selectedIconPath: '/static/image-active.png',
|
||
text: '添加大棚',
|
||
active: false
|
||
},
|
||
{
|
||
iconPath: '/static/home.png',
|
||
selectedIconPath: '/static/home-active.png',
|
||
text: '',
|
||
active: false
|
||
},
|
||
{
|
||
iconPath: '/static/star.png',
|
||
selectedIconPath: '/static/star-active.png',
|
||
text: '收藏',
|
||
active: false
|
||
}
|
||
]*/
|
||
}
|
||
|
||
},
|
||
onBackPress() {
|
||
/* if (this.$refs.fab.isShow) {
|
||
this.$refs.fab.close()
|
||
return true
|
||
}
|
||
return false*/
|
||
},
|
||
onShow() {
|
||
this.refresh();
|
||
},
|
||
|
||
onReady() {
|
||
|
||
},
|
||
methods: {
|
||
getScanCode(res){
|
||
this.searchValue = res;
|
||
this.value = 1;
|
||
this.input(this.searchValue)
|
||
},
|
||
handleAddAgri() {
|
||
this.$refs.addAgri.open();
|
||
// 这里可以添加跳转到添加大棚页面的逻辑
|
||
// uni.navigateTo({ url: '/pages/add-agri/add-agri' })
|
||
},
|
||
change(e) {
|
||
this.input(this.searchValue)
|
||
},
|
||
input(res) {
|
||
if (!res) {
|
||
this.cancel(res)
|
||
return;
|
||
}
|
||
this.listData = this.datas.filter(item =>
|
||
item[this.value === 0 ? 'agriName' : 'imei'].includes(res));
|
||
},
|
||
cancel(res) {
|
||
this.listData = [...this.datas]
|
||
},
|
||
/*trigger(e) {
|
||
console.log(e)
|
||
this.content[e.index].active = !e.item.active
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定')
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
fabClick() {
|
||
uni.showToast({
|
||
title: '点击了悬浮按钮',
|
||
icon: 'none'
|
||
})
|
||
},*/
|
||
|
||
// 模拟获取列表数据
|
||
getListData() {
|
||
this.noMore = false;
|
||
this.listData = [];
|
||
if (this.isLoading || this.noMore) return;
|
||
this.isLoading = true;
|
||
|
||
getAgriInfo().then(response => {
|
||
if (response.code === 200) {
|
||
// 1. 用 map 处理数据，返回新数组，避免 forEach 返回 undefined
|
||
// 2. 区分刷新/加载更多，更新 listData
|
||
this.listData = response.data.map(item => {
|
||
// 返回完整的列表项结构（和模板中需要的字段对应）
|
||
return {
|
||
...item,
|
||
deviceStatus: TimeUtil.isLessThanSpecifiedSeconds(item.time, 90) ? '在线' : '离线',
|
||
online: TimeUtil.isLessThanSpecifiedSeconds(item.time, 90) ? '在线' : '离线', // 兼容模板中的 online 字段
|
||
agriName: item.agriName || '未知大棚',
|
||
imei: `${item.imei || '未知'}`,
|
||
workModeDesc: item.workMode === 0? '手动模式':'自动模式',
|
||
workMode: item.workMode,
|
||
temp1: item.temp1,
|
||
temp2: item.temp2,
|
||
temp3: item.temp3,
|
||
temp4: item.temp4
|
||
};
|
||
});
|
||
}
|
||
}).catch(err => {
|
||
console.error("获取大棚信息失败:", err);
|
||
}).finally(() => {
|
||
// 4. 无论成功失败，都结束加载状态
|
||
this.isLoading = false;
|
||
// 5. 判断是否还有更多数据
|
||
this.noMore = this.listData.length >= this.total;
|
||
if (store.getters && store.getters.name === 'admin') {
|
||
this.getNewSpecialData();
|
||
}
|
||
this.datas = [...this.listData]
|
||
this.$refs.index.complete();
|
||
});
|
||
},
|
||
// 加载更多（防抖：避免快速上拉重复触发）
|
||
loadMore() {
|
||
if (!this.isLoading && !this.noMore) {
|
||
|
||
}
|
||
},
|
||
refresh() {
|
||
this.getListData();
|
||
},
|
||
// 点击列表项
|
||
onItemTap(item) {
|
||
var agri = JSON.stringify(item);
|
||
this.$tab.navigateTo('/pages/control/index?agriInfo='+encodeURIComponent(agri))
|
||
},
|
||
getNewSpecialData() {
|
||
getNewSpecialData().then(response => {
|
||
if (response.code === 200 && response.data) {
|
||
this.makeSpecialData(response.data);
|
||
}
|
||
this.datas = [...this.listData]
|
||
})
|
||
},
|
||
|
||
makeSpecialData: function (msgData){
|
||
const online = TimeUtil.isLessThanSpecifiedSeconds(msgData.ts,90)?'在线':'离线';
|
||
this.listData.push(
|
||
{
|
||
agriName: "八方南棚",
|
||
imei: "A",
|
||
temp1: msgData.temp1,
|
||
temp2: msgData.temp2,
|
||
temp3: msgData.temp3,
|
||
temp4: msgData.temp4,
|
||
online:online
|
||
},
|
||
{
|
||
agriName: "九方春棚",
|
||
imei: "B",
|
||
temp1: msgData.temp5,
|
||
temp2: msgData.temp6,
|
||
temp3: msgData.temp7,
|
||
temp4: msgData.temp8,
|
||
online:online
|
||
},
|
||
{
|
||
agriName: "十二方棚",
|
||
imei: "C",
|
||
temp1: msgData.temp9,
|
||
temp2: msgData.temp10,
|
||
temp3: msgData.temp11,
|
||
temp4: msgData.temp12,
|
||
online:online
|
||
},
|
||
)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 适配小程序/H5的盒模型，避免padding导致宽度溢出 */
|
||
page {
|
||
box-sizing: border-box;
|
||
}
|
||
.page-container {
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.list-scroll {
|
||
/* 把背景色改为透明，才能透出背景渐变 */
|
||
background-color: transparent;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
margin-top: 10rpx;
|
||
/* 新增：H5端避免滚动条样式不一致 */
|
||
scrollbar-width: thin;
|
||
height: 1220rpx;
|
||
}
|
||
/* H5端滚动条样式优化（可选） */
|
||
.list-scroll::-webkit-scrollbar {
|
||
width: 4rpx;
|
||
}
|
||
.list-scroll::-webkit-scrollbar-thumb {
|
||
background-color: #e0e0e0;
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
.list-item {
|
||
padding: 14rpx 30rpx;
|
||
/* 移除border-bottom，改为margin-top，并且把列表项背景设为半透明白色 */
|
||
margin-bottom: 20rpx;
|
||
background-color: rgba(255, 255, 255, 0.85);
|
||
border-radius: 12rpx;
|
||
/* 新增：点击态样式，双端统一 */
|
||
transition: all 0.2s ease;
|
||
box-shadow: 8rpx 5rpx 10rpx #999;
|
||
pointer-events: auto !important;
|
||
}
|
||
.list-item:active {
|
||
background-color: #F5F5F5;
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 28rpx;
|
||
line-height: 52rpx;
|
||
font-weight: bolder;
|
||
color: #333;
|
||
/* 核心：flex布局，让文字和标签在同一行 */
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
.title-text {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
/* 在线标签样式 */
|
||
.tag-online {
|
||
font-size: 20rpx;
|
||
border-radius: 4rpx;
|
||
background-color: #f0f9eb;
|
||
color: #67c23a;
|
||
white-space: nowrap;
|
||
line-height: 30rpx;
|
||
/* 兜底：如果flex失效，用margin-left:auto强制居右 */
|
||
margin-left: auto;
|
||
display: inline-block; /* 确保样式生效 */
|
||
}
|
||
.tag-status.tag-manual {
|
||
background-color: #dde3f6;
|
||
color: #7491ef;
|
||
}
|
||
/* 离线：深灰色系 */
|
||
.tag-offline {
|
||
background-color: #f2f2f2;
|
||
color: #c5c3c3;
|
||
}
|
||
.item-subtitle {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 52rpx;
|
||
display: block;
|
||
}
|
||
|
||
.item-tags {
|
||
display: flex;
|
||
gap: 10rpx;
|
||
flex-wrap: wrap; /* 新增：标签过多时换行，避免溢出 */
|
||
margin: 14rpx 0;
|
||
}
|
||
|
||
.tag {
|
||
font-size: 23rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 4rpx;
|
||
display: inline-block; /* 修复H5端padding不生效问题 */
|
||
}
|
||
.tag-status {
|
||
background-color: #f8f1f1;
|
||
color: #e66060;
|
||
margin-left: 20rpx;
|
||
font-weight: lighter;
|
||
line-height: 30rpx;
|
||
padding: 4rpx 6rpx;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.tag-temp1 {
|
||
background-color: #e8f4ff;
|
||
color: #409eff;
|
||
}
|
||
|
||
.tag-temp2 {
|
||
background-color: #fdf4e4;
|
||
color: #f5961d;
|
||
}
|
||
|
||
.tag-temp3 {
|
||
background-color: #f4f4f5;
|
||
color: #909399;
|
||
}
|
||
|
||
.tag-temp4 {
|
||
background-color: #e7faf4;
|
||
color: #1bd1a7;
|
||
}
|
||
|
||
.loading-more {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 30rpx;
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
gap: 10rpx;
|
||
margin-top: 20rpx;
|
||
background-color: rgba(255, 255, 255, 0.85);
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.no-more {
|
||
/* 核心：flex布局实现居中 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* 占满滚动容器剩余高度，保证垂直居中 */
|
||
min-height: 200rpx; /* 最小高度，避免内容太少时不居中 */
|
||
/* 文字样式保留 */
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
/* 可选：增加上下内边距，视觉更舒适 */
|
||
padding: 30rpx 0;
|
||
margin-top: 20rpx;
|
||
background-color: rgba(255, 255, 255, 0.85);
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
/* 新增：禁用状态样式 */
|
||
.list-item-disabled {
|
||
/* 文字置灰 */
|
||
color: #999;
|
||
/* 禁用光标 */
|
||
cursor: not-allowed;
|
||
/* 背景色变浅，视觉区分 */
|
||
background-color: #fafafa;
|
||
/* 可选：添加透明度 */
|
||
opacity: 0.7;
|
||
pointer-events: none !important; /* 禁止所有交互 */
|
||
}
|
||
|
||
/* 禁用状态下的子元素也置灰 */
|
||
.list-item-disabled .tag {
|
||
color: #ccc;
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
/deep/ .uni-searchbar {
|
||
padding: 20rpx 0;
|
||
}
|
||
/deep/ .uni-searchbar__box, /deep/ .uni-select {
|
||
box-shadow: 8rpx 5rpx 10rpx #999;
|
||
background: #fbfdfe;
|
||
border-radius: 0 !important;
|
||
}
|
||
/deep/ .uni-searchbar__box {
|
||
border-radius: 0 10rpx 10rpx 0 !important;
|
||
}
|
||
.uni-stat__select {
|
||
padding: 20rpx 0;
|
||
}
|
||
/deep/ .uni-select {
|
||
border: 0;
|
||
height: 70rpx !important;
|
||
// #ifdef MP-WEIXIN
|
||
margin-top: 20rpx !important;
|
||
// #endif
|
||
border-radius: 10rpx 0 0 10rpx !important;
|
||
}
|
||
/deep/ .uni-section {
|
||
background: transparent !important;
|
||
}
|
||
/* 强制隐藏搜索图标容器 */
|
||
/*/deep/ .uni-searchbar__box-icon-search {
|
||
display: none !important;
|
||
}*/
|
||
/deep/ .uni-section .uni-section-header {
|
||
padding: 12rpx 10rpx;
|
||
}
|
||
|
||
/* 添加大棚容器样式 */
|
||
.add-agri {
|
||
/* 核心：flex布局实现一行显示 + 垂直居中 */
|
||
display: flex;
|
||
align-items: center;
|
||
/* 水平居中（可选，根据需求调整） */
|
||
justify-content: center;
|
||
/* 内边距，增加点击区域和视觉间距 */
|
||
padding: 30rpx 0;
|
||
/* 可选：添加背景和圆角，和列表项风格统一 */
|
||
background-color: rgba(255, 255, 255, 0.85);
|
||
border-radius: 12rpx;
|
||
margin-top: 20rpx;
|
||
/* 点击态效果，和列表项保持一致 */
|
||
transition: all 0.2s ease;
|
||
}
|
||
.add-agri:active {
|
||
background-color: rgba(255, 255, 255, 0.95);
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
/* 图片和文字的间距 */
|
||
.add-agri image {
|
||
margin-right: 20rpx;
|
||
/* 可选：图片垂直对齐，兜底兼容 */
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* 文字样式优化 */
|
||
.add-agri .text {
|
||
/* 文字大小，和标签风格统一 */
|
||
font-size: 26rpx;
|
||
/* 文字颜色（保留原有绿色） */
|
||
color: #1AAD19;
|
||
/* 可选：加粗，突出按钮感 */
|
||
font-weight: 500;
|
||
/* 兜底：垂直对齐 */
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/deep/ .z-paging-content-fixed {
|
||
padding: 20rpx !important;
|
||
/* 可选：防止margin塌陷，加overflow */
|
||
overflow: hidden;
|
||
}
|
||
|
||
</style> |