<template>
|
<view>
|
<view class="main">
|
<view class="itme-box">
|
<view class="h-table">
|
<view class="h-tr h-tr-6 h-thead ">
|
<view class="h-td column-0">序号</view>
|
<view class="h-td column-1">水库名称</view>
|
<view class="h-td column-2">行政区划</view>
|
<view class="h-td column-3">时间</view>
|
<view class="h-td column-4">时段雨量(mm)</view>
|
<view class="h-td column-5">今日降雨(mm)</view>
|
</view>
|
<scroll-view scroll-y style="height: 67vh;width: 100%;" @scrolltolower="scrolltolower">
|
<view class="h-tr h-tr-6" v-for="(item,index) in tableList" @click.stop="fold(item)"
|
:key="index">
|
<view class="h_box h-tr h-tr-6">
|
<view class="h-td column-0">{{index+1}}</view>
|
<view class="h-td column-1 name ">
|
<view @click.stop="goReservoirDetail(item)">{{item.res_nm}}</view>
|
</view>
|
<view class="h-td column-2">{{isNull(item)}}</view>
|
<view class="h-td column-3">{{item.dt}}</view>
|
<view class="h-td column-4">{{isNullDrp(item.drp)}}</view>
|
<view class="h-td column-5">{{isNullDrp(item.cur_drp)}}</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
<u-loading-icon text="加载中" textSize="18" :show="showLoading"></u-loading-icon>
|
</view>
|
<u-loading-page :loading="pageLoading"></u-loading-page>
|
</view>
|
</template>
|
|
<script>
|
import {
|
convertTimestampToDate,
|
} from "@/utils/date"
|
import mySelect from "@/components/my-components/my-select.vue"
|
import {
|
realTimeRainfallCondition
|
} from "@/api/dataCenter/rainWaterCondition/rainWaterCondition"
|
export default {
|
components: {
|
mySelect
|
},
|
props: {
|
res_nm: {
|
type: String,
|
default: "",
|
},
|
region: {
|
type: Object,
|
default: () => {}
|
},
|
dropDownCondition: {
|
type: Object,
|
default: () => {}
|
},
|
basin: {
|
type: Object,
|
default: () => {},
|
}
|
},
|
data() {
|
return {
|
//表格数据
|
tableList: [],
|
//分页
|
pages: {
|
pageNo: 1,
|
pageSize: 25
|
},
|
showLoading: false,
|
pageLoading: false,
|
order: {
|
orderCondition: "drp_1"
|
},
|
query: {},
|
timeValue: "1",
|
}
|
},
|
computed: {
|
isNull() {
|
return (item => {
|
let region = []
|
if (item.county_nm) {
|
region.push(item.county_nm)
|
} else {
|
region.push(item.city_nm)
|
}
|
if (item.town_nm) {
|
region.push(item.town_nm)
|
}
|
return region.join("-")
|
})
|
},
|
isNullDrp() {
|
return (item => {
|
if (item == null) {
|
return "--"
|
} else {
|
return item
|
}
|
})
|
}
|
},
|
created() {
|
let isAd = this.getAdParams(this.region)
|
if (isAd) {
|
this.getTableList(this.pages.pageSize, this.pages.pageNo)
|
}
|
},
|
watch: {
|
dropDownCondition: {
|
handler(val) {
|
if (val) {
|
this.pages.pageNo = 1
|
|
if (val.order.orderCondition == "drp") {
|
this.order.orderCondition = "drp_" + val.query.drp
|
} else {
|
this.order.orderCondition = val.order.orderCondition
|
}
|
this.timeValue = val.query.drp
|
this.getTableList(this.pages.pageSize, this.pages.pageNo)
|
}
|
|
}
|
},
|
region: {
|
handler(val) {
|
if (val) {
|
this.getAdParams(val)
|
this.pages.pageNo = 1
|
this.getTableList(this.pages.pageSize, this.pages.pageNo)
|
}
|
}
|
},
|
basin: {
|
handler(val) {
|
if (val) {
|
this.query = {
|
...this.query,
|
bas_guid: `${val.name}`
|
}
|
this.getTableList(this.pages.pageSize, this.pages.pageNo, this.query)
|
}
|
}
|
}
|
},
|
options: {
|
styleIsolation: 'shared'
|
},
|
methods: {
|
/**
|
* 获取表格数据
|
* @param {Number} pageSize 每页数量
|
* @param {Number} pageNo 当前页
|
* @param {Object} params 查询参数
|
*/
|
getTableList(pageSize, pageNo, params = {}) {
|
this.pageLoading = true
|
params.res_nm = this.res_nm
|
realTimeRainfallCondition(pageSize, pageNo, Object.assign(params, this.query, this.order)).then(res => {
|
const drpString = this.drpStringBack()
|
this.tableList = res.data.data
|
this.tableList.forEach(e => {
|
e.drp = e[drpString]
|
if (e.drp == "") e.drp = 0
|
if (e.cur_drp == "") e.cur_drp = 0
|
e.dt = convertTimestampToDate(e.dt, 'MM-dd')
|
})
|
this.pages.pageNo = pageNo
|
this.pageLoading = false
|
uni.stopPullDownRefresh()
|
|
})
|
},
|
|
/**
|
* 前端过滤时段
|
*/
|
drpStringBack() {
|
return 'drp_' + this.timeValue
|
},
|
/**
|
* 上拉加载数据
|
*/
|
scrolltolower() {
|
this.showLoading = true
|
this.pages.pageNo += 1
|
let params = {}
|
params.res_nm = this.res_nm
|
realTimeRainfallCondition(this.pages.pageSize, this.pages.pageNo, Object.assign(params, this.query, this
|
.order)).then(res => {
|
const drpString = this.drpStringBack()
|
res.data.data.forEach(e => {
|
e.drp = e[drpString]
|
if (e.drp == "") e.drp = 0
|
if (e.cur_drp == "") e.cur_drp = 0
|
e.dt = convertTimestampToDate(e.dt, 'MM-dd')
|
})
|
this.showLoading = false
|
this.tableList = this.tableList.concat(res.data.data)
|
})
|
},
|
/**
|
* 跳转到水库详情页
|
* @param {Object} item 当前行数据
|
*/
|
goReservoirDetail(item) {
|
let data = {
|
id: item.res_cd,
|
name: item.res_nm
|
}
|
let dataStr = JSON.stringify(data)
|
let url = "/subPackage/realtimeMonitor/reservoir/detail?item=" + dataStr
|
this.$u.func.globalNavigator(url, "navTo")
|
},
|
|
// 根据行政区划返回对应行政区参数
|
getAdParams(regionData) {
|
let region = {}
|
if (JSON.stringify(regionData) != '{}') {
|
region = regionData
|
} else {
|
region = uni.getStorageSync("adCodeBase")
|
}
|
if (!region) {
|
return false
|
}
|
|
if (region.adGrad == 1) {
|
this.query.city_cd = ""
|
this.query.county_cd = ""
|
this.query.town_cd = ""
|
} else if (region.adGrad == 2) {
|
this.query.city_cd = region.adCode
|
this.query.county_cd = ""
|
this.query.town_cd = ""
|
} else if (region.adGrad == 3) {
|
this.query.county_cd = region.adCode
|
|
this.query.city_cd = ""
|
this.query.town_cd = ""
|
} else if (region.adGrad == 4) {
|
this.query.town_cd = region.adCode
|
|
this.query.city_cd = ""
|
this.query.county_cd = ""
|
}
|
return true
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
/* 引入表格样式表 */
|
@import "@/subPackage/rainWaterCondition/static/style/helang-table.scss";
|
|
.top {
|
position: fixed;
|
z-index: 5;
|
background-color: #ffffff;
|
margin-top: 15rpx;
|
// padding: 20rpx;
|
width: 100%;
|
|
.query {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.query-form {
|
::v-deep .u-input__content__field-wrapper__field {
|
width: 214rpx;
|
height: 18rpx;
|
font-size: 24rpx !important;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
}
|
|
.item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10rpx;
|
|
.label {
|
width: 148rpx;
|
height: 22rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #666666;
|
line-height: 28rpx;
|
}
|
|
.time-input {
|
::v-deep .u-input {
|
width: 238rpx;
|
height: 54rpx;
|
background: #FFFFFF;
|
border: 2rpx solid #BBBBBB;
|
border-radius: 10rpx;
|
|
}
|
}
|
|
.value {
|
::v-deep .u-input {
|
width: 526rpx;
|
height: 29px;
|
background: #FFFFFF;
|
border: 1px solid #BBBBBB;
|
border-radius: 5px;
|
}
|
}
|
|
}
|
}
|
|
.query-button {
|
margin: 10rpx;
|
width: 524rpx;
|
height: 60rpx;
|
background: linear-gradient(90deg, #51A4FA 0%, #5B70F7 100%);
|
border-radius: 10rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
|
.text {
|
width: 49rpx;
|
font-size: 23rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
}
|
|
}
|
|
.place {
|
height: 100rpx;
|
}
|
|
.h-table {
|
.h-thead {
|
color: #51A4FA;
|
background-color: #E1F3FF;
|
}
|
|
.h-td {
|
border-right-width: 0;
|
font-size: 25rpx;
|
}
|
|
.h_box {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
// padding: 0 20rpx;
|
}
|
|
.h-tr {
|
border-width: 0;
|
text-align: center;
|
width: 100%;
|
flex-wrap: wrap;
|
|
.column-0 {
|
width: 10%;
|
}
|
|
.column-1 {
|
width: 18%;
|
}
|
|
.column-2 {
|
width: 24%;
|
}
|
|
.column-3 {
|
width: 16%;
|
}
|
|
.column-4 {
|
width: 16%;
|
}
|
|
.column-5 {
|
width: 16%;
|
}
|
|
// .column-1 {
|
// width: 20%;
|
// }
|
|
// .column-2 {
|
// width: 25%;
|
// }
|
|
// .column-3 {
|
// width: 15%;
|
// }
|
|
// .column-4 {
|
// width: 18%;
|
// }
|
|
// .column-5 {
|
// width: 22%;
|
// }
|
}
|
|
.name {
|
color: #3c9cff;
|
}
|
|
.differ {
|
color: #ff0000
|
}
|
}
|
</style>
|
