<template>
|
<view class="container">
|
<!-- <view style="height: 88rpx;"></view> -->
|
<view class="customizeBar">
|
<u-navbar placeholder title="大坝安全监测" autoBack bgColor="#5887f9" titleStyle="color:#ffffff"
|
leftIconColor="#ffffff" safeAreaInsetTop>
|
</u-navbar>
|
</view>
|
|
<view class="tab">
|
<u-tabs :itemStyle="{width: '160rpx' ,height: '88rpx' }" :activeStyle="{color: '#99bada' }" lineWidth="60"
|
:current="currentIndex" :list="tabList" @click="tabClick">
|
</u-tabs>
|
<Search placeholder='请输入水库名称' style="width: 100%;" v-model="searchVal" @search="search">
|
<template slot="prefix">
|
<view class="prefix_wrap">
|
<view class="text">
|
<regionSelect :isTown="false" @regionChange="regionChange"></regionSelect>
|
</view>
|
<view class="icon">
|
<u-icon name="arrow-down-fill" size="12"></u-icon>
|
</view>
|
</view>
|
</template>
|
<template slot='suffix'>
|
<view class="prefix_wrap" style="margin-right: 20rpx;">
|
<view class="text">
|
<BasinSelect :code='code' @basinChange="basinChange"></BasinSelect>
|
</view>
|
<view class="icon">
|
<u-icon name="arrow-down-fill" size="12"></u-icon>
|
</view>
|
</view>
|
</template>
|
</Search>
|
</view>
|
|
|
<view style="height: 180rpx;"></view>
|
|
<view class="main">
|
<Sy :res_nm="searchVal" :region='region' ref="Sy" v-if="currentIndex==0"></Sy>
|
<Wy :res_nm="searchVal" :region='region' ref="Wy" v-if="currentIndex==1"></Wy>
|
<Sl :res_nm="searchVal" :region='region' ref="Sl" v-if="currentIndex==2"></Sl>
|
</view>
|
<my-select v-if="visible" :show="visible" type="radio" v-model="value" popupTitle="请选择" :dataLists="selectList"
|
@cancel="visible=false" @submit="selectSubmit">
|
</my-select>
|
</view>
|
</template>
|
|
<script>
|
import Sy from "@/subPackage/dbSafety/components/sy.vue"
|
import Wy from "@/subPackage/dbSafety/components/wy.vue"
|
import Sl from "@/subPackage/dbSafety/components/sl.vue"
|
import mySelect from "@/components/my-components/my-select.vue"
|
import Search from "@/components/my-components/search.vue"
|
import regionSelect from "@/components/my-components/regionSelect.vue"
|
import BasinSelect from '@/components/my-components/basinSelect.vue'
|
export default {
|
components: {
|
Sy,
|
Wy,
|
Search,
|
mySelect,
|
Sl,
|
regionSelect,
|
BasinSelect
|
},
|
data() {
|
return {
|
currentIndex: 0,
|
visible: false,
|
searchVal: "",
|
code:"",
|
tabList: [{
|
name: "渗压监测"
|
},
|
{
|
name: "变形监测"
|
},
|
{
|
name: "渗流监测"
|
},
|
],
|
pages: {
|
pageSize: 25,
|
pageNo: 1
|
},
|
region: {},
|
value: "0",
|
title: "渗压",
|
selectList: [{
|
name: "渗压",
|
value: "0"
|
},
|
{
|
name: "位移",
|
value: "1"
|
},
|
],
|
}
|
},
|
onPullDownRefresh() {
|
if (this.currentIndex == 0) {
|
this.$nextTick(() => {
|
this.$refs.Sy.getSyListData(this.pages.pageSize, this.pages.pageNo)
|
})
|
} else if (this.currentIndex == 1) {
|
this.$nextTick(() => {
|
this.$refs.Wy.getWyListData(this.pages.pageSize, this.pages.pageNo)
|
})
|
} else if (this.currentIndex == 2) {
|
this.$nextTick(() => {
|
this.$refs.Sl.getSlListData(this.pages.pageSize, this.pages.pageNo)
|
})
|
}
|
},
|
methods: {
|
tabClick(item) {
|
this.currentIndex = item.index
|
},
|
search(e) {
|
this.bindTable()
|
},
|
bindTable() {
|
if (this.currentIndex == 0) {
|
this.$refs.Sy.pages.pageNo = 1
|
this.$refs.Sy.region = this.region
|
} else if (this.currentIndex == 1) {
|
this.$refs.Wy.pages.pageNo = 1
|
this.$refs.Wy.region = this.region
|
} else if (this.currentIndex == 2) {
|
this.$refs.Sl.region = this.region
|
this.$refs.Sl.pages.pageNo = 1
|
}
|
this.$refs.Sy && this.$refs.Sy.getSyListData()
|
this.$refs.Wy && this.$refs.Wy.getWyListData()
|
this.$refs.Sl && this.$refs.Sl.getSlListData()
|
},
|
selectSubmit(e) {
|
this.title = e.name
|
this.currentIndex = e.value
|
this.visible = false
|
},
|
regionChange(region) {
|
//数据处理
|
const eumn = {
|
1: "province_cd",
|
2: "city_cd",
|
3: "county_cd",
|
}
|
this.region['label'] = eumn[region.adGrad]
|
this.region['value'] = region.adCode
|
this.code = region.adCode
|
this.bindTable()
|
},
|
basinChange(basin) {
|
this.basin = basin
|
this.region.name = basin.name
|
this.bindTable()
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
// min-height: 100vh;
|
overflow: hidden;
|
|
// .customizeBar {
|
// height: 160rpx;
|
// }
|
|
.tab {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
width: 100%;
|
position: fixed;
|
background-color: #ffffff;
|
z-index: 2;
|
align-items: center;
|
padding-bottom: 20rpx;
|
// padding: 20rpx 0;
|
|
.prefix_wrap {
|
display: flex;
|
align-items: center;
|
min-width: 120rpx;
|
justify-content: center;
|
flex-shrink: 0;
|
// padding: 0 20rpx;
|
|
.text {
|
margin-left: 20rpx;
|
color: #333333;
|
font-family: PingFang-SC-Medium;
|
font-size: 30rpx;
|
}
|
|
.img-icon {
|
display: flex;
|
width: 22rpx;
|
height: 18rpx;
|
}
|
}
|
}
|
}
|
</style>
|
