Administrator
/
FenXiNspUniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式更新

This commit is contained in:
978184212@qq.com 2025-11-25 10:52:23 +08:00
parent 8c3a0237f0
commit b92fce8071
1 changed files with 237 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

382
packDetail/pages/sjdyj/index.vue
View File

@ -12,8 +12,69 @@
</scroll-view>
</view>
<!-- 监测站告警 -->
<block v-if="isActive == 0">
<scroll-view
class="liebiaos"
scroll-y="true"
:refresher-enabled="true"
:refresher-triggered="isRefresher"
@refresherrefresh="refresherrefreshFun"
@scrolltolower="lower"
v-if="List.length != 0">
<view class="itembox" v-for="(item,index) in List" :key="index">
<view class="itembox_top" v-if="item.stationName">
<view class="itembox_lef">
<image src="../../static/fz.png" mode=""></image>
<view class="title">
{{item.stationName}}
</view>
</view>
<view class="itembox_right">
{{item.alertTime}}
</view>
</view>
<view class="itembox_bot">
<block v-if="item.alertContent.length != 0">
<view class="scrolltop">
<view class="tabitem" v-for="(it,i) in tabList" :key="i">
{{it}}
</view>
</view>
<view class="lists_item" v-for="(Item,Index) in item.alertContent" :key="Index">
<view class="jczbs" v-if="Item.name">
{{Item.name}}
</view>
<view class="zbz" v-if="Item.val">
{{Item.val}}
</view>
<view class="sbsj" v-if="Item.valHeight" style="color: #FF4242;">
{{Item.valLow}}~{{Item.valHeight}}
</view>
<view class="szqss" v-if="Item.unit">
{{Item.unit}}
</view>
</view>
</block>
</view>
</view>
<!-- 加载更多组件 -->
<view class="load" v-if="List.length > 0">
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</scroll-view>
<view class="zwsj" v-else>
<view class="inzwsj">
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
<view class="zwsjtext">
暂无数据
</view>
</view>
</view>
</block>
<!-- 异常趋势图 -->
<block v-if="isActive == 1">
<block v-else-if="isActive == 1">
<view class="liebiaos" v-if="resolt.length>0">
<view class="searchbox">
<view class="uni-px-8 uni-pb-8">
@ -42,66 +103,6 @@
</view>
</view>
</block>
<!-- 监测站告警 -->
<block v-else-if="isActive == 0">
<view class="liebiaos" v-if="List.length != 0">
<view class="itembox" v-for="(item,index) in List" :key="index">
<view class="itembox_top" v-if="item.stationName">
<view class="itembox_lef">
<image src="../../static/fz.png" mode=""></image>
<view class="title">
{{item.stationName}}
</view>
</view>
<view class="itembox_right">
{{item.alertTime}}
</view>
</view>
<view class="itembox_bot">
<block v-if="item.alertContent.length != 0">
<view class="scrolltop">
<view class="tabitem" v-for="(it,i) in tabList" :key="i">
{{it}}
</view>
</view>
<view class="lists_item" v-for="(Item,Index) in item.alertContent" :key="Index">
<view class="jczbs" v-if="Item.name">
{{Item.name}}
</view>
<view class="zbz" v-if="Item.val">
{{Item.val}}
</view>
<view class="sbsj" v-if="Item.valHeight" style="color: #FF4242;">
{{Item.valHeight}}
<image class="zximg" src="../../../static/home_shuju_shang.png" mode="">
</image>
</view>
<view class="sbsj" v-if="Item.valLow" style="color: #19D58A;">
{{Item.valLow}}
<image class="zximg" src="../../../static/home_shuju_xia.png" mode="">
</image>
</view>
<view class="szqss" v-if="Item.unit">
{{Item.unit}}
</view>
</view>
</block>
</view>
</view>
<view class="load">
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</view>
<view class="zwsj" v-else>
<view class="inzwsj">
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
<view class="zwsjtext">
暂无数据
</view>
</view>
</view>
</block>
</view>
</template>
@ -116,13 +117,13 @@
return {
List: [],
baseUrl: configService.apiUrl,
tabList: ['监测指标名称', '监测指标值', '高/低阈值', '计量单位'],
tabList: ['监测指标名称', '监测指标值', '阈值范围', '单位'],
array: [],
index: '',
sampTime: '',
deviceNo: '',
allNum: '',
isLastpage: '',
isLastpage: false,
intervalId: null,
loadStatus: 'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
isLoadMore: false, //是否加载中
@ -130,7 +131,7 @@
show1: false,
top: 0,
pageNo: 1,
pageSize: 4,
pageSize: 8,
deleteUrl: '/applet/survMulchRecord/delete',
stationName: '',
stationCode: '',
@ -216,12 +217,18 @@
this.getList()
},
onReachBottom() {
// 页面触底加载更多
this.lower();
// 页面触底加载更多 - 备用方案
if (this.isActive === 0) {
this.lower();
}
},
onPullDownRefresh() {
// 页面下拉刷新
this.refresherrefreshFun();
// 页面下拉刷新 - 备用方案
if (this.isActive === 0) {
this.refresherrefreshFun();
} else {
uni.stopPullDownRefresh();
}
},
watch: {
rangetime(newval) {
@ -248,119 +255,167 @@
},
// 下拉刷新被触发
refresherrefreshFun() {
this.pageNo = 1
this.deviceNo = ''
console.log('下拉刷新触发');
this.isRefresher = true;
this.pageNo = 1;
this.deviceNo = '';
this.isLastpage = false;
this.loadStatus = 'more';
this.getList().then(() => {
// 停止下拉刷新
setTimeout(() => {
this.isRefresher = false;
uni.stopPullDownRefresh();
}, 500);
}).catch(() => {
this.isRefresher = false;
uni.stopPullDownRefresh();
});
},
// 切换类型
chooseClick(item, index) {
this.isActive = index;
this.pageNo = 1
this.deviceNo = ''
this.getList()
this.pageNo = 1;
this.deviceNo = '';
this.isLastpage = false;
this.loadStatus = 'more';
this.getList();
if (index == 1) {
this.sbeiList()
this.sbeiList();
}
},
getList() {
return new Promise((resolve, reject) => {
var params = {}
params.pageNo = this.pageNo
params.pageSize = this.pageSize
var params = {
pageNo: this.pageNo,
pageSize: this.pageSize
};
uni.showLoading({
title: '加载中'
});
this.List = []
// 根据当前激活的tab设置URL
let url = '';
if (this.isActive == 0) {
var url = '/applet/wxclient/alertRecord'
url = '/applet/wxclient/alertRecord';
} else if (this.isActive == 1) {
var url = '/applet/survPestlightAlert/list'
url = '/applet/survPestlightAlert/list';
if (this.deviceNo) {
params.deviceNo = this.deviceNo
params.deviceNo = this.deviceNo;
}
}
this.$http.get(url, {
params: params
}).then(res => {
uni.hideLoading();
if (res.data.code == 0) {
var data = res.data.data.records
this.List = this.List.concat(data)
if (res.data.data.total != 0) {
this.allNum = Number(res.data.data.total) / Number(this.pageSize) + '';
if (this.allNum.indexOf('.') == -1) {
this.allNum = this.allNum;
} else {
this.allNum = parseInt(Number(this.allNum) + 1);
}
if (this.pageNo == this.allNum) {
var data = res.data.data.records || [];
// 如果是第一页，清空列表；否则追加
if (this.pageNo === 1) {
this.List = data;
} else {
this.List = this.List.concat(data);
}
// 更新分页状态
const total = res.data.data.total || 0;
if (total > 0) {
const totalPages = Math.ceil(total / this.pageSize);
if (this.pageNo >= totalPages || data.length < this.pageSize) {
this.isLastpage = true;
this.loadStatus = 'nomore'
this.loadStatus = 'nomore';
} else {
this.isLastpage = false;
this.loadStatus = 'more'
this.loadStatus = 'more';
}
} else {
this.isLastpage = true;
this.loadStatus = 'nomore'
this.loadStatus = 'nomore';
}
} else {
// 接口返回错误
this.isLastpage = true;
this.loadStatus = 'nomore';
}
uni.hideLoading();
this.isRefresher = false
resolve()
this.isRefresher = false;
resolve();
}).catch(err => {
uni.hideLoading();
reject(err)
})
})
console.error('获取列表失败:', err);
this.isLastpage = true;
this.loadStatus = 'nomore';
this.isRefresher = false;
reject(err);
});
});
},
// 上拉加载更多
lower() {
// 最后一页了，取消下拉功能
if (this.isLastpage) {
return
console.log('上拉加载更多触发');
// 如果是最后一页或正在加载中，直接返回
if (this.isLastpage || this.loadStatus === 'loading') {
return;
}
clearInterval(this.intervalId);
var num = 1;
this.intervalId = setInterval(() => {
num = num + 1;
}, 1000)
this.loadStatus = 'loading';
this.pageNo = this.pageNo + 1;
var params = {}
params.pageNo = this.pageNo
params.pageSize = this.pageSize
var params = {
pageNo: this.pageNo,
pageSize: this.pageSize
};
// 根据当前激活的tab设置URL
let url = '';
if (this.isActive == 0) {
var url = '/applet/survPestlightAlert/list'
if (this.deviceNo) {
params.deviceNo = this.deviceNo
}
url = '/applet/wxclient/alertRecord';
} else if (this.isActive == 1) {
var url = '/applet/wxclient/alertRecord'
url = '/applet/survPestlightAlert/list';
if (this.deviceNo) {
params.deviceNo = this.deviceNo;
}
}
this.$http.get(url, {
params: params
}).then(res => {
if (res.data.code == 0) {
var data = res.data.data.records
this.List = this.List.concat(data)
if (res.data.data.total != 0) {
if (this.pageNo == this.allNum) {
var data = res.data.data.records || [];
this.List = this.List.concat(data);
// 更新分页状态
const total = res.data.data.total || 0;
if (total > 0) {
const totalPages = Math.ceil(total / this.pageSize);
if (this.pageNo >= totalPages || data.length < this.pageSize) {
this.isLastpage = true;
this.loadStatus = 'nomore'
this.loadStatus = 'nomore';
} else {
this.isLastpage = false;
this.loadStatus = 'more'
this.loadStatus = 'more';
}
} else {
this.isLastpage = true;
this.loadStatus = 'nomore'
this.loadStatus = 'nomore';
}
} else {
this.isLastpage = true;
this.loadStatus = 'nomore';
this.pageNo = this.pageNo - 1; // 加载失败时回退页码
}
})
}).catch(err => {
console.error('加载更多失败:', err);
this.loadStatus = 'more';
this.pageNo = this.pageNo - 1; // 加载失败时回退页码
});
},
changenr() {
this.pageNo = 1
this.getList()
this.pageNo = 1;
this.getList();
},
// 趋势图接口
async qushiList() {
@ -369,21 +424,21 @@
deployId: this.deployId,
startTime: this.startTime,
endTime: this.endTime,
}
const res = await this.$http.post('/applet/survAlertRecord/alertSummary', data)
};
const res = await this.$http.post('/applet/survAlertRecord/alertSummary', data);
if (res.data.code === 0) {
let ovelit = res.data.data
let ovelit = res.data.data;
this.resolt = ovelit.itemList.map(item => {
return {
...item,
data: ovelit.dataMap[item.entity] || []
}
})
this.timeList = ovelit.timeList || []
};
});
this.timeList = ovelit.timeList || [];
this.getServerData(this.resolt);
}
} catch (error) {
console.error("获取趋势图数据失败", error)
console.error("获取趋势图数据失败", error);
}
},
// 设备列表
@ -393,37 +448,37 @@
title: '加载中'
});
const res = await this.$http.get('/applet/survDeviceDeploy/deviceList?stationCode=')
const res = await this.$http.get('/applet/survDeviceDeploy/deviceList?stationCode=');
if (res.data.code === 0) {
this.rangeList = res.data.data.map((lit, index) => {
return {
"value": index,
"text": lit.deployDes,
"id": lit.id,
}
})
};
});
if (this.rangeList.length > 0) {
this.deployId = this.rangeList[this.value].id
this.deployId = this.rangeList[this.value].id;
await this.qushiList();
}
}
uni.hideLoading();
} catch (error) {
console.error("获取设备列表失败", error)
console.error("获取设备列表失败", error);
uni.hideLoading();
}
},
// 选择deployid
change(e) {
this.deployId = this.rangeList[this.value].id
this.sbeiList()
this.deployId = this.rangeList[this.value].id;
this.sbeiList();
},
// 选择日期范围
maskClick(e) {
this.startTime = e[0]
this.endTime = e[1]
this.startTime = e[0];
this.endTime = e[1];
},
// 处理图表数据（带高亮超出部分）
getServerData(val) {
@ -504,6 +559,8 @@
}
</script>
<style lang="scss">
page {
height: 100%;
@ -686,6 +743,7 @@
font-size: 24rpx;
font-family: DIN Next LT Pro;
font-weight: 400;
text-align: center;
}
.sbsj {
@ -694,8 +752,7 @@
font-weight: 400;
color: #667482;
width: 23%;
display: flex;
align-items: center;
text-align: center;
}
.zximg {
@ -709,6 +766,7 @@
font-size: 24rpx;
font-family: Source Han Sans SC;
font-weight: 400;
text-align: center;
}
.scrolltop {
@ -734,14 +792,17 @@
.tabitem:nth-child(2) {
width: 27%;
text-align: center;
}
.tabitem:nth-child(3) {
width: 23%;
text-align: center;
}
.tabitem:nth-child(4) {
flex: 1
flex: 1;
text-align: center;
}
.itembox_right {
@ -770,4 +831,35 @@
margin-bottom: 10rpx;
}
}
/* 确保列表容器有固定高度才能滚动 */
.liebiaos {
height: calc(100vh - 100rpx); /* 根据你的实际布局调整 */
}
.load {
padding: 20rpx 0;
text-align: center;
}
.zwsj {
height: calc(100vh - 100rpx);
display: flex;
align-items: center;
justify-content: center;
}
.inzwsj {
text-align: center;
}
.zwsjimg {
width: 200rpx;
height: 200rpx;
}
.zwsjtext {
font-size: 28rpx;
color: #999;
margin-top: 20rpx;
}
</style>