<template>
|
<view>
|
<!-- <view class="place"></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">上下游方向(mm)</view>
|
<view class="h-td column-5">左右岸方向(mm)</view>
|
<view class="h-td column-6">垂直位移(mm)</view>
|
</view>
|
<scroll-view scroll-y style="height: 74vh;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">{{item.cd}}</view>
|
<view class="h-td column-3">{{item.tm}}</view>
|
<view class="h-td column-4">{{item.de}}</view>
|
<view class="h-td column-5">{{item.dn}}</view>
|
<view class="h-td column-6">{{item.du}}</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 {
|
getWyList
|
} from "@/api/dataCenter/dbSafety/dbSafety"
|
export default {
|
props: {
|
res_nm: {
|
type: String,
|
default: "",
|
},
|
},
|
data() {
|
return {
|
noticeText: "总测站数95个，超堰顶测站95个",
|
searchForm: {},
|
tableList: [],
|
isShow: false,
|
region: {},
|
pages: {
|
pageNo: 1,
|
pageSize: 25
|
},
|
showLoading: false,
|
pageLoading: false,
|
}
|
},
|
mounted() {
|
this.getWyListData()
|
},
|
options: {
|
styleIsolation: 'shared'
|
},
|
methods: {
|
showCity() {
|
this.isShow = !this.isShow
|
},
|
getWyListData() {
|
let regionData = uni.getStorageSync("adCodeBase")
|
if (!regionData) return
|
let params = {
|
pageSize: this.pages.pageSize,
|
pageNo: this.pages.pageNo,
|
res_nm: this.res_nm
|
}
|
if (!this.region.label && !this.region.value) {
|
if (regionData.adGrad == 1) {
|
params.province_cd = regionData.adCode
|
} else if (regionData.adGrad == 2) {
|
params.city_cd = regionData.adCode
|
} else if (regionData.adGrad == 3) {
|
params.county_cd = regionData.adCode
|
}
|
params.bas_guid = this.region.name
|
} else {
|
params[this.region.label] = this.region.value
|
//husq 写的
|
params.bas_guid = this.region.name
|
|
}
|
this.getWyList(params)
|
|
|
},
|
|
// 位移列表
|
getWyList(params) {
|
this.pageLoading = true
|
getWyList(params).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.pageLoading = false
|
uni.stopPullDownRefresh()
|
})
|
},
|
//上拉加载
|
scrolltolower() {
|
this.showLoading = true
|
this.pages.pageNo += 1
|
let params = {
|
pageSize: this.pages.pageSize,
|
pageNo: this.pages.pageNo,
|
res_nm: this.res_nm
|
}
|
params[this.region.label] = this.region.value
|
getWyList(params).then(res => {
|
let data = res.resultList
|
data.forEach(e => {
|
let tm = new Date(e.tm)
|
let formatter = dateFormat(tm, 'MM-dd hh:mm')
|
e.tm = formatter
|
})
|
this.tableList = this.tableList.concat(data)
|
this.showLoading = false
|
})
|
},
|
|
// 搜索
|
search() {
|
this.pages.pageNo = 1
|
this.getWyListData()
|
},
|
|
/**
|
* 跳转到水库详情页
|
* @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")
|
},
|
}
|
}
|
</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;
|
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: 200rpx;
|
}
|
|
|
.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;
|
}
|
|
.h_box {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
width: 100%;
|
}
|
|
.h-tr {
|
border-width: 0;
|
text-align: center;
|
|
.column-0 {
|
width: 9%;
|
}
|
|
.column-1 {
|
width: 18%;
|
}
|
|
.column-2 {
|
width: 9%;
|
}
|
|
.column-3 {
|
width: 20%;
|
}
|
|
.column-4 {
|
width: 15%;
|
}
|
|
.column-5 {
|
width: 15%;
|
}
|
|
.column-6 {
|
width: 14%;
|
}
|
}
|
|
.name {
|
color: #3c9cff;
|
}
|
|
.differ {
|
color: #ff0000;
|
}
|
|
|
}
|
</style>
|
