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

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

@ -12,8 +12,69 @@
</scroll-view> </scroll-view>
</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="liebiaos" v-if="resolt.length>0">
<view class="searchbox"> <view class="searchbox">
<view class="uni-px-8 uni-pb-8"> <view class="uni-px-8 uni-pb-8">
@ -42,66 +103,6 @@
</view> </view>
</view> </view>
</block> </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> </view>
</template> </template>
@ -116,13 +117,13 @@
return { return {
List: [], List: [],
baseUrl: configService.apiUrl, baseUrl: configService.apiUrl,
tabList: ['监测指标名称', '监测指标值', '高/低阈值', '计量单位'], tabList: ['监测指标名称', '监测指标值', '阈值范围', '单位'],
array: [], array: [],
index: '', index: '',
sampTime: '', sampTime: '',
deviceNo: '', deviceNo: '',
allNum: '', allNum: '',
isLastpage: '', isLastpage: false,
intervalId: null, intervalId: null,
loadStatus: 'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式 loadStatus: 'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
isLoadMore: false, //是否加载中 isLoadMore: false, //是否加载中
@ -130,7 +131,7 @@
show1: false, show1: false,
top: 0, top: 0,
pageNo: 1, pageNo: 1,
pageSize: 4, pageSize: 8,
deleteUrl: '/applet/survMulchRecord/delete', deleteUrl: '/applet/survMulchRecord/delete',
stationName: '', stationName: '',
stationCode: '', stationCode: '',
@ -216,12 +217,18 @@
this.getList() this.getList()
}, },
onReachBottom() { onReachBottom() {
// 页面触底加载更多 // 页面触底加载更多 - 备用方案
if (this.isActive === 0) {
this.lower(); this.lower();
}
}, },
onPullDownRefresh() { onPullDownRefresh() {
// 页面下拉刷新 // 页面下拉刷新 - 备用方案
if (this.isActive === 0) {
this.refresherrefreshFun(); this.refresherrefreshFun();
} else {
uni.stopPullDownRefresh();
}
}, },
watch: { watch: {
rangetime(newval) { rangetime(newval) {
@ -248,119 +255,167 @@
}, },
// 下拉刷新被触发 // 下拉刷新被触发
refresherrefreshFun() { refresherrefreshFun() {
this.pageNo = 1 console.log('下拉刷新触发');
this.deviceNo = '' this.isRefresher = true;
this.pageNo = 1;
this.deviceNo = '';
this.isLastpage = false;
this.loadStatus = 'more';
this.getList().then(() => { this.getList().then(() => {
// 停止下拉刷新
setTimeout(() => {
this.isRefresher = false;
uni.stopPullDownRefresh();
}, 500);
}).catch(() => {
this.isRefresher = false;
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}); });
}, },
// 切换类型 // 切换类型
chooseClick(item, index) { chooseClick(item, index) {
this.isActive = index; this.isActive = index;
this.pageNo = 1 this.pageNo = 1;
this.deviceNo = '' this.deviceNo = '';
this.getList() this.isLastpage = false;
this.loadStatus = 'more';
this.getList();
if (index == 1) { if (index == 1) {
this.sbeiList() this.sbeiList();
} }
}, },
getList() { getList() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
var params = {} var params = {
params.pageNo = this.pageNo pageNo: this.pageNo,
params.pageSize = this.pageSize pageSize: this.pageSize
};
uni.showLoading({ uni.showLoading({
title: '加载中' title: '加载中'
}); });
this.List = []
// 根据当前激活的tab设置URL
let url = '';
if (this.isActive == 0) { if (this.isActive == 0) {
var url = '/applet/wxclient/alertRecord' url = '/applet/wxclient/alertRecord';
} else if (this.isActive == 1) { } else if (this.isActive == 1) {
var url = '/applet/survPestlightAlert/list' url = '/applet/survPestlightAlert/list';
if (this.deviceNo) { if (this.deviceNo) {
params.deviceNo = this.deviceNo params.deviceNo = this.deviceNo;
} }
} }
this.$http.get(url, { this.$http.get(url, {
params: params params: params
}).then(res => { }).then(res => {
uni.hideLoading();
if (res.data.code == 0) { if (res.data.code == 0) {
var data = res.data.data.records 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.pageNo === 1) {
if (this.allNum.indexOf('.') == -1) { this.List = data;
this.allNum = this.allNum;
} else { } else {
this.allNum = parseInt(Number(this.allNum) + 1); this.List = this.List.concat(data);
} }
if (this.pageNo == this.allNum) {
// 更新分页状态
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.isLastpage = true;
this.loadStatus = 'nomore' this.loadStatus = 'nomore';
} else { } else {
this.isLastpage = false; this.isLastpage = false;
this.loadStatus = 'more' this.loadStatus = 'more';
} }
} else { } else {
this.isLastpage = true; this.isLastpage = true;
this.loadStatus = 'nomore' this.loadStatus = 'nomore';
} }
} else {
// 接口返回错误
this.isLastpage = true;
this.loadStatus = 'nomore';
} }
uni.hideLoading(); this.isRefresher = false;
this.isRefresher = false resolve();
resolve()
}).catch(err => { }).catch(err => {
uni.hideLoading(); uni.hideLoading();
reject(err) console.error('获取列表失败:', err);
}) this.isLastpage = true;
}) this.loadStatus = 'nomore';
this.isRefresher = false;
reject(err);
});
});
}, },
// 上拉加载更多
lower() { lower() {
// 最后一页了，取消下拉功能 console.log('上拉加载更多触发');
if (this.isLastpage) { // 如果是最后一页或正在加载中，直接返回
return if (this.isLastpage || this.loadStatus === 'loading') {
return;
} }
clearInterval(this.intervalId);
var num = 1; this.loadStatus = 'loading';
this.intervalId = setInterval(() => {
num = num + 1;
}, 1000)
this.pageNo = this.pageNo + 1; this.pageNo = this.pageNo + 1;
var params = {}
params.pageNo = this.pageNo var params = {
params.pageSize = this.pageSize pageNo: this.pageNo,
pageSize: this.pageSize
};
// 根据当前激活的tab设置URL
let url = '';
if (this.isActive == 0) { if (this.isActive == 0) {
var url = '/applet/survPestlightAlert/list' url = '/applet/wxclient/alertRecord';
if (this.deviceNo) {
params.deviceNo = this.deviceNo
}
} else if (this.isActive == 1) { } 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, { this.$http.get(url, {
params: params params: params
}).then(res => { }).then(res => {
if (res.data.code == 0) { if (res.data.code == 0) {
var data = res.data.data.records var data = res.data.data.records || [];
this.List = this.List.concat(data) this.List = this.List.concat(data);
if (res.data.data.total != 0) {
if (this.pageNo == this.allNum) { // 更新分页状态
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.isLastpage = true;
this.loadStatus = 'nomore' this.loadStatus = 'nomore';
} else { } else {
this.isLastpage = false; this.isLastpage = false;
this.loadStatus = 'more' this.loadStatus = 'more';
} }
} else { } else {
this.isLastpage = true; 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() { changenr() {
this.pageNo = 1 this.pageNo = 1;
this.getList() this.getList();
}, },
// 趋势图接口 // 趋势图接口
async qushiList() { async qushiList() {
@ -369,21 +424,21 @@
deployId: this.deployId, deployId: this.deployId,
startTime: this.startTime, startTime: this.startTime,
endTime: this.endTime, 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) { if (res.data.code === 0) {
let ovelit = res.data.data let ovelit = res.data.data;
this.resolt = ovelit.itemList.map(item => { this.resolt = ovelit.itemList.map(item => {
return { return {
...item, ...item,
data: ovelit.dataMap[item.entity] || [] data: ovelit.dataMap[item.entity] || []
} };
}) });
this.timeList = ovelit.timeList || [] this.timeList = ovelit.timeList || [];
this.getServerData(this.resolt); this.getServerData(this.resolt);
} }
} catch (error) { } catch (error) {
console.error("获取趋势图数据失败", error) console.error("获取趋势图数据失败", error);
} }
}, },
// 设备列表 // 设备列表
@ -393,37 +448,37 @@
title: '加载中' 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) { if (res.data.code === 0) {
this.rangeList = res.data.data.map((lit, index) => { this.rangeList = res.data.data.map((lit, index) => {
return { return {
"value": index, "value": index,
"text": lit.deployDes, "text": lit.deployDes,
"id": lit.id, "id": lit.id,
} };
}) });
if (this.rangeList.length > 0) { if (this.rangeList.length > 0) {
this.deployId = this.rangeList[this.value].id this.deployId = this.rangeList[this.value].id;
await this.qushiList(); await this.qushiList();
} }
} }
uni.hideLoading(); uni.hideLoading();
} catch (error) { } catch (error) {
console.error("获取设备列表失败", error) console.error("获取设备列表失败", error);
uni.hideLoading(); uni.hideLoading();
} }
}, },
// 选择deployid // 选择deployid
change(e) { change(e) {
this.deployId = this.rangeList[this.value].id this.deployId = this.rangeList[this.value].id;
this.sbeiList() this.sbeiList();
}, },
// 选择日期范围 // 选择日期范围
maskClick(e) { maskClick(e) {
this.startTime = e[0] this.startTime = e[0];
this.endTime = e[1] this.endTime = e[1];
}, },
// 处理图表数据（带高亮超出部分） // 处理图表数据（带高亮超出部分）
getServerData(val) { getServerData(val) {
@ -504,6 +559,8 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss">
page { page {
height: 100%; height: 100%;
@ -686,6 +743,7 @@
font-size: 24rpx; font-size: 24rpx;
font-family: DIN Next LT Pro; font-family: DIN Next LT Pro;
font-weight: 400; font-weight: 400;
text-align: center;
} }
.sbsj { .sbsj {
@ -694,8 +752,7 @@
font-weight: 400; font-weight: 400;
color: #667482; color: #667482;
width: 23%; width: 23%;
display: flex; text-align: center;
align-items: center;
} }
.zximg { .zximg {
@ -709,6 +766,7 @@
font-size: 24rpx; font-size: 24rpx;
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
font-weight: 400; font-weight: 400;
text-align: center;
} }
.scrolltop { .scrolltop {
@ -734,14 +792,17 @@
.tabitem:nth-child(2) { .tabitem:nth-child(2) {
width: 27%; width: 27%;
text-align: center;
} }
.tabitem:nth-child(3) { .tabitem:nth-child(3) {
width: 23%; width: 23%;
text-align: center;
} }
.tabitem:nth-child(4) { .tabitem:nth-child(4) {
flex: 1 flex: 1;
text-align: center;
} }
.itembox_right { .itembox_right {
@ -770,4 +831,35 @@
margin-bottom: 10rpx; 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> </style>