<template>
|
<view>
|
<view class="main">
|
<view class="itme-box">
|
<view class="h-table">
|
<view class="h-tr h-tr-7 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">水位</view>
|
<view class="h-td column-5">汛限(m)</view>
|
<view class="h-td column-6">比汛限(m)</view>
|
<!-- <view class="h-td" @click="showCity">行政区 <u-icon name="arrow-down" color="#2979ff" size="8">
|
</u-icon>
|
</view> -->
|
</view>
|
<scroll-view scroll-y style="height: 67vh;width: 100%;" @scrolltolower="scrolltolower">
|
<view class="h-tr h-tr-7" v-for="(item,index) in tableList" :key="index">
|
<view class="h_box h-tr h-tr-7">
|
<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.tm}}</view>
|
<view class="h-td column-4">{{item.rz }}</view>
|
<view class="h-td column-5">{{item.flse_lim_stag}}</view>
|
<view class="h-td column-6" :class="item.over_z>0?'differ':''">{{item.over_z}}</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 {
|
dateFormat
|
} from "@/utils/date"
|
import {
|
realTimeWaterCondition
|
} from "@/api/dataCenter/rainWaterCondition/rainWaterCondition"
|
export default {
|
props: {
|
res_nm: {
|
type: String,
|
default: "",
|
},
|
region: {
|
type: Object,
|
default: () => {}
|
},
|
dropDownCondition: {
|
type: Object,
|
default: () => {}
|
},
|
basin: {
|
type: Object,
|
default: () => {},
|
}
|
},
|
data() {
|
return {
|
noticeText: "总测站数95个，超堰顶测站95个",
|
searchForm: {},
|
tableList: [],
|
isShow: false,
|
pages: {
|
pageNo: 1,
|
pageSize: 25
|
},
|
showLoading: false,
|
pageLoading: false,
|
|
query: {},
|
}
|
},
|
created() {
|
let isAd = this.getAdParams(this.region)
|
if (isAd) {
|
this.getTableList(this.pages.pageSize, this.pages.pageNo)
|
}
|
},
|
options: {
|
styleIsolation: 'shared'
|
},
|
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("-")
|
})
|
}
|
},
|
watch: {
|
dropDownCondition: {
|
handler(val) {
|
if (val) {
|
this.query = {}
|
this.pages.pageNo = 1
|
Object.assign(this.query, val.query)
|
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_cd: `${val.code}`
|
}
|
this.getTableList(this.pages.pageSize, this.pages.pageNo, this.query)
|
}
|
}
|
}
|
},
|
|
methods: {
|
showCity() {
|
this.isShow = !this.isShow
|
},
|
|
//获取表格数据
|
getTableList(pageSize, pageNo, params = {}) {
|
this.pageLoading = true
|
params.res_nm = this.res_nm
|
realTimeWaterCondition(pageSize, pageNo, Object.assign(params, this.query)).then(res => {
|
this.tableList = res.data.data
|
this.tableList.forEach(e => {
|
let tm = new Date(e.tm)
|
let formatter = dateFormat(tm, 'MM-dd hh:mm')
|
e.tm = formatter
|
})
|
this.pages.pageNo = pageNo
|
this.pageLoading = false
|
uni.stopPullDownRefresh()
|
})
|
},
|
//上拉加载
|
scrolltolower() {
|
this.pages.pageNo += 1
|
this.showLoading = true
|
let params = {}
|
params.res_nm = this.res_nm
|
realTimeWaterCondition(this.pages.pageSize, this.pages.pageNo, Object.assign(params, this.query)).then(
|
res => {
|
let data = res.data.data
|
data.forEach(e => {
|
let tm = new Date(e.tm)
|
let formatter = dateFormat(tm, 'MM-dd hh:mm')
|
e.tm = formatter
|
})
|
this.showLoading = false
|
this.tableList = this.tableList.concat(data)
|
})
|
},
|
|
//跳转到水库详情页
|
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";
|
|
::v-deep .u-notice__content__text[data-v-4661e472] {
|
animation-play-state: paused !important;
|
// animation: null !important;
|
padding: 0 !important;
|
}
|
|
::v-deep .h-table .h-tr {
|
flex-wrap: wrap;
|
}
|
|
.head {
|
position: fixed;
|
z-index: 5;
|
background-color: #ffffff;
|
margin-top: 15rpx;
|
width: 100%;
|
box-sizing: border-box;
|
|
.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: 120rpx;
|
height: 24rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #666666;
|
line-height: 28rpx;
|
}
|
|
.value {
|
::v-deep .u-input {
|
width: 578rpx;
|
height: 58rpx;
|
background: #FFFFFF;
|
border: 2rpx solid #BBBBBB;
|
border-radius: 10rpx;
|
}
|
}
|
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
|
.notice-bar {
|
display: flex;
|
align-items: center;
|
background-color: #f9f9f9;
|
height: 60rpx;
|
padding-left: 26rpx;
|
|
.img-icon {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
|
.text {
|
width: 344rpx;
|
height: 26rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #4593F2;
|
line-height: 28rpx;
|
flex: 1;
|
margin-left: 20rpx;
|
}
|
}
|
}
|
|
.place {
|
height: 100rpx;
|
}
|
|
|
.h-table {
|
.h-thead {
|
color: #51A4FA;
|
background-color: #E1F3FF;
|
}
|
|
.h-td {
|
border-right-width: 0;
|
font-size: 25rpx;
|
}
|
|
.show_city {
|
width: 100% !important;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
padding: 0 26rpx;
|
background: #f5f5f5;
|
transition: width 150ms ease-in;
|
}
|
|
// .hide_city {
|
// width: 0% !important;
|
// background: #f5f5f5;
|
// transition: width 150ms ease-in;
|
// }
|
|
.h_box {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
// padding: 0 20rpx;
|
}
|
|
.h-tr {
|
border-width: 0;
|
text-align: center;
|
|
.column-0 {
|
width: 10%;
|
}
|
|
|
.column-1 {
|
width: 18%;
|
}
|
|
.column-2 {
|
width: 15%;
|
}
|
|
.column-3 {
|
width: 20%;
|
}
|
|
.column-4 {
|
width: 12%;
|
}
|
|
.column-5 {
|
width: 12%;
|
}
|
|
.column-6 {
|
width: 13%;
|
}
|
|
// .column-1 {
|
// width: 18%;
|
// }
|
|
// .column-2 {
|
// width: 18%;
|
// }
|
|
// .column-3 {
|
// width: 20%;
|
// }
|
|
// .column-4 {
|
// width: 12%;
|
// }
|
|
// .column-5 {
|
// width: 14%;
|
// }
|
|
// .column-6 {
|
// width: 18%;
|
// }
|
}
|
|
.name {
|
color: #3c9cff;
|
}
|
|
.differ {
|
color: #ff0000
|
}
|
|
|
}
|
</style>
|
