374 lines
9.1 KiB
Vue
374 lines
9.1 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="liebiaos" v-if="List.length != 0">
|
||
<scroll-view :style="{height:scorllheight + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower" @refresherrefresh="refresherrefreshFun" @refresherpulling="refresherpullingFun" :refresher-triggered="isRefresher" refresher-enabled="true">
|
||
<view class="topnum">
|
||
监测站数量 <span class="number">{{cutMoneyFiter(List.length) || 0}}</span>个
|
||
</view>
|
||
<view class="list_item" v-for="(item,index) in List" :key="index" @click="todetail(item,index)">
|
||
<view class="list_item_top">
|
||
<view class="list_item_left">
|
||
<image v-if="item.stationType == 'livestock'" src="../../static/zhandian_icon_xuqin.png" mode=""></image>
|
||
<image v-else-if="item.stationType == 'watershed'" src="../../static/zhandian_icon_xuqin.png" mode=""></image>
|
||
<image v-else src="../../static/zd.png" mode=""></image>
|
||
<view class="item_right" v-if="item.stationName">
|
||
<view class="right_top">
|
||
{{item.stationName}}
|
||
</view>
|
||
<view class="right_bot" v-if="item.stationLocation">
|
||
<image src="../../static/wz.png" mode=""></image>
|
||
<view class="">{{item.stationLocation}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image src="../../../static/me_icon_in.png" mode="" class="jt"></image>
|
||
</view>
|
||
<view class="list_item_bot">
|
||
<view class="bot_box">
|
||
<view class="sbnum">
|
||
{{item.deviceCount || 0}}
|
||
</view>
|
||
<view class="sbtext">
|
||
设备数量
|
||
</view>
|
||
</view>
|
||
<view class="bot_box">
|
||
<view class="sbnum">
|
||
{{item.survObj.length || 0}}
|
||
</view>
|
||
<view class="sbtext">
|
||
监测指标
|
||
</view>
|
||
</view>
|
||
<view class="bot_box">
|
||
<view class="sbnum">
|
||
{{item.survDataCount || 0}}
|
||
</view>
|
||
<view class="sbtext">
|
||
上报数据
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="load">
|
||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||
</view>
|
||
</scroll-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>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import api from "@/api/api"
|
||
import configService from '@/common/service/config.service.js';
|
||
export default{
|
||
data(){
|
||
return{
|
||
baseUrl:configService.apiUrl,
|
||
height:0,
|
||
scorllheight:0,
|
||
allNum: '',
|
||
isLastpage: '',
|
||
intervalId: null,
|
||
loadStatus:'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
|
||
isLoadMore:false, //是否加载中
|
||
show:false,
|
||
show1:false,
|
||
top:0,
|
||
List:[],
|
||
pageNo:1,
|
||
pageSize:4,
|
||
isRefresher: false, //下拉刷新状态
|
||
isLoading: false, // 添加加载状态锁
|
||
}
|
||
},
|
||
onLoad() {
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
var pxToRpxScale = 750 / res.windowWidth
|
||
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
|
||
var navigationHeight = 44 * pxToRpxScale
|
||
this.height = res.windowHeight * pxToRpxScale//将px 转换rpx
|
||
this.scorllheight = this.height
|
||
}
|
||
});
|
||
this.getList()
|
||
},
|
||
methods:{
|
||
// 下拉刷新被触发
|
||
refresherrefreshFun() {
|
||
this.pageNo = 1
|
||
this.getList()
|
||
},
|
||
// 下拉刷新触发
|
||
refresherpullingFun() {
|
||
this.isRefresher= true
|
||
},
|
||
getList(isRefresh = false) {
|
||
// 防止重复请求
|
||
if (this.isLoading) return
|
||
this.isLoading = true
|
||
|
||
let params = {
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize
|
||
}
|
||
|
||
// 只有首次加载才显示全局loading
|
||
if (this.pageNo === 1 && !isRefresh) {
|
||
uni.showLoading({ title: '加载中' })
|
||
}
|
||
|
||
// 首次加载清空列表，下拉刷新时不清空
|
||
if (this.pageNo === 1 && !isRefresh) {
|
||
this.List = []
|
||
}
|
||
|
||
this.$http.get('/applet/survStationInfo/page', { params }).then(res => {
|
||
this.isLoading = false
|
||
uni.hideLoading()
|
||
this.isRefresher = false
|
||
|
||
if (res.data.code === 0) {
|
||
let data = res.data.data.records || []
|
||
if (this.pageNo === 1) {
|
||
this.List = data
|
||
} else {
|
||
this.List = this.List.concat(data)
|
||
}
|
||
|
||
// 格式化数据
|
||
this.formatData()
|
||
|
||
// 更新分页状态
|
||
this.updatePaginationStatus(res.data.data.total)
|
||
}
|
||
}).catch(err => {
|
||
this.isLoading = false
|
||
uni.hideLoading()
|
||
this.isRefresher = false
|
||
})
|
||
},
|
||
formatData() {
|
||
// 将数据格式化逻辑提取出来
|
||
this.List.forEach(item => {
|
||
item.deviceCount = this.formatNumber(item.deviceCount)
|
||
item.survObj.length = this.formatNumber(item.survObj.length)
|
||
item.survDataCount = this.formatNumber(item.survDataCount)
|
||
})
|
||
},
|
||
|
||
formatNumber(num) {
|
||
if (num >= 100000000) {
|
||
return (num / 100000000).toFixed(1) + '亿'
|
||
} else if (num >= 10000) {
|
||
return (num / 10000).toFixed(1) + '万'
|
||
}
|
||
return num || 0
|
||
},
|
||
lower() {
|
||
// 最后一页了，取消下拉功能
|
||
if (this.isLastpage) {
|
||
return
|
||
}
|
||
clearInterval(this.intervalId);
|
||
var num = 1;
|
||
this.intervalId = setInterval(() => {
|
||
num = num+1;
|
||
},1000)
|
||
this.pageNo = this.pageNo + 1;
|
||
let params = {}
|
||
params.pageNo = this.pageNo
|
||
params.pageSize = this.pageSize
|
||
this.$http.get('/applet/survStationInfo/page',{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) {
|
||
this.isLastpage = true;
|
||
this.loadStatus='nomore'
|
||
} else {
|
||
this.isLastpage = false;
|
||
// this.isLoadMore=true
|
||
this.loadStatus = 'more'
|
||
}
|
||
}else{
|
||
this.isLastpage = true;
|
||
this.loadStatus='nomore'
|
||
}
|
||
}
|
||
})
|
||
},
|
||
todetail(item,index){
|
||
uni.navigateTo({
|
||
url:'/packDetail/pages/Site/detail?item=' + encodeURIComponent(JSON.stringify(item))
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page{
|
||
height: 100%;
|
||
}
|
||
.container{
|
||
height: 100%;
|
||
// overflow-y: scroll;
|
||
// overflow-x: hidden;
|
||
}
|
||
.bgimg{
|
||
width: 100%;
|
||
height: 1365rpx;
|
||
}
|
||
.liebiaos{
|
||
padding: 0rpx 32rpx 0;
|
||
}
|
||
.topnum{
|
||
margin-bottom: 25rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
color: #B3C1D1;
|
||
margin-top: 14rpx;
|
||
}
|
||
.number{
|
||
font-size: 34rpx;
|
||
font-family: DIN Next LT Pro;
|
||
font-weight: 500;
|
||
color: #2AC166;
|
||
margin-left: 15rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
.list_item{
|
||
width: 100%;
|
||
padding: 37rpx 34rpx 28rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 34rpx;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
.list_item:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
.list_item_top{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
.list_item_left{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.list_item_left image{
|
||
width: 73rpx;
|
||
height: 73rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
.item_right{
|
||
height: 76rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.right_top{
|
||
font-size: 32rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 500;
|
||
color: #2F3841;
|
||
}
|
||
.right_bot{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
color: #9CA9BE;
|
||
}
|
||
.right_bot image{
|
||
height: 26rpx;
|
||
width: 24rpx;
|
||
margin-right: 11rpx;
|
||
}
|
||
.jt{
|
||
width: 40rpx;
|
||
height: 48rpx;
|
||
}
|
||
.list_item_bot{
|
||
width: 100%;
|
||
background: #F6F6F6;
|
||
border-radius: 16rpx;
|
||
padding: 28rpx 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.bot_box{
|
||
width: 30%;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
border-right: 2rpx solid #e6e9ef;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.bot_box:last-child{
|
||
border: none;
|
||
flex: 1;
|
||
}
|
||
.sbnum{
|
||
width: 100%;
|
||
font-size: 42rpx;
|
||
font-family: DIN Next LT Pro;
|
||
font-weight: 500;
|
||
color: #142E55;
|
||
margin-bottom: 15rpx;
|
||
text-align: center;
|
||
}
|
||
.sbtext{
|
||
width:100%;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
color: #9CA9BE;
|
||
}
|
||
.load{
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
color: #c6c6c6;
|
||
}
|
||
.zwsj{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
padding: 60% 170rpx 0;
|
||
}
|
||
.inzwsj{
|
||
width: 100%;
|
||
}
|
||
.zwsjimg{
|
||
width: 100%;
|
||
height: 224rpx;
|
||
margin-bottom: 37rpx;
|
||
}
|
||
.zwsjtext{
|
||
width: 100%;
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 31rpx;
|
||
text-align: center;
|
||
}
|
||
</style> |