<template>
<transition name="slide">
<div>
<div class="index-container">
<!--标题-->
<mt-header class="header" title="布防撤防" fixed>
<div slot="left">
<mt-button icon="back" @click="$router.back(-1)"></mt-button>
</div>
</mt-header>
<!--数据查询框-->
<div class="search-div">
<span class="search-select" @click="chooseBfzt">
<span class="select-text">{{bfzt}}</span>
<i slot="icon" class="iconfont icon-31xiala"/>
</span>
<span>
<mt-search
v-model.trim="listQuery.keywords"
placeholder="闸井编号/位置"
@keyup.enter.native="searchKeyWords"
/>
</span>
<div class="clear-float"></div>
</div>
<!--列表主体-->
<div class="listbody" ref="wrapper">
<Loading v-show="isLoading" ></Loading>
<mt-loadmore
:top-method="loadTop"
:topPullText="loadConf.loadTopConf.topPullText"
:topDropText="loadConf.loadTopConf.topDropText"
:topLoadingText="loadConf.loadTopConf.topLoadingText"
:bottom-method="loadBottom"
:bottomAllLoaded="loadConf.loadBottomConf.isFinish"
:bottomPullText="loadConf.loadBottomConf.bottomPullText"
:bottomDropText="loadConf.loadBottomConf.bottomDropText"
:bottomLoadingText="loadConf.loadBottomConf.bottomLoadingText"
ref="loadmore"
class="loadmore-content"
>
<ul class="list-ul">
<li class="list-li" v-for="(item,index) in list" @click="toWellDetail(item)">
<div class="well-card">
<div class="card-left">
<div>
<span class="card-wellcode">{{item.wellCode}}</span>
<span class="card-welltype">{{item.wellTypeName}}</span>
<span class="card-bfzt" :style="{color:item.bfzt=='0'?red:green}">{{item.bfztName}}</span>
</div>
<div class="card-position">
<span>{{item.position}}</span>
</div>
</div>
<div class="card-right">
<mt-button v-if="item.bfzt=='0'" size="small" class="bfbtn" @click.stop="bf(index,item.id)">布防</mt-button>
<mt-button v-if="item.bfzt=='1'" size="small" class="cfbtn" @click.stop="cf(index,item.id)">撤防</mt-button>
<mt-button type="default" size="small" @click.stop="goToMap(item)" plain>前往</mt-button>
</div>
<div class="clear-float"></div>
</div>
</li>
</ul>
<div class="no-content" v-show="loadConf.loadBottomConf.isFinish">已经到底了</div>
</mt-loadmore>
</div>
<!--闸井类型弹出框-->
<mt-popup
class="welltype-popup"
v-model="bfztShow"
popup-transition="popup-fade"
:modal="showPopupModel"
position="top">
<ul>
<li v-for="bfzt in bfztList" @click="search(bfzt)">
{{bfzt.name}}
</li>
</ul>
</mt-popup>
</div>
</div>
</transition>
</template>
<script>
import {MessageBox, Indicator, Toast} from 'mint-ui'
import { getWellList, dict, bfcf } from '@/api/well'
import { openMapWindow } from '@/utils/common'
import Loading from '@/components/Loading'
let isFromDetail = false
export default {
name: "WellBfcf",
components: {Loading},
data() {
return {
listQuery: {
keywords: '',
bfzt: '',
offset: 1,
limit: 10,
sort: 'id',
order: 'asc'
},
bfzt: '全部',
bfztList: [],
bfztShow: false,//是否显示选择闸井类型的popup
showPopupModel: false, //是否显示模态框
list: [],
total: 50,
isLoading: true,
loadConf: {
loadTopConf: {
isFinish: false, // 是否完成下拉
topPullText: '下拉刷新',
topDropText: '松开刷新',
topLoadingText: '刷新中'
},
loadBottomConf: {
isFinish: false, // 是否完成上拉
bottomPullText: '',
bottomDropText: '释放获取内容',
bottomLoadingText: '加载中',
count: 1, // 模拟次数
}
},
red:'#b8b8b8',
green:'#13ad00'
}
},
beforeRouteEnter(to, from, next) {
if(from.name) {
if (from.name.indexOf('wellDetail') == -1) {
isFromDetail = false
} else {
isFromDetail = true
}
}else{
isFromDetail = false
}
next()
},
mounted() {
if(this.$route.query && this.$route.query.bfzt){
this.listQuery.bfzt = this.$route.query.bfzt
this.bfzt = this.$route.query.bfztName
}
this.fetchBfzt()
this.loadTop()
},
activated(){
console.log('activated')
if (isFromDetail) { // 来自详情页面
this.$refs.wrapper.scrollTop = this.$store.getters.pageYOffset;
} else { // 滚动到最顶，数据初始化
if(this.$route.query){
if(this.listQuery.bfzt!=this.$route.query.bfzt){
this.listQuery.bfzt = this.$route.query.bfzt
this.bfzt = this.$route.query.bfztName
}
}
this.loadTop()
}
this.bfztShow = false
},
methods: {
loadTop() {
this.bfztShow = false
console.log('wellBfcfloadTop')
this.isLoading = true
this.$refs.loadmore.onTopLoaded()
this.listQuery.offset=1
this.loadConf.loadBottomConf.isFinish = false
getWellList(this.listQuery).then(response => {
this.listQuery.offset += 1
this.list = response.data.rows
this.total = parseInt(response.data.total)
this.isLoading = false
if (this.list.length >= this.total) {
this.loadConf.loadBottomConf.isFinish = true
this.$refs.loadmore.onBottomLoaded();
}
})
},
loadBottom() {
this.bfztShow = false
console.log('loadBottom')
if (this.list.length >= this.total ) {
this.loadConf.loadBottomConf.isFinish = true
this.$refs.loadmore.onBottomLoaded();
} else {
getWellList(this.listQuery).then(response => {
this.isLoading = false
this.listQuery.offset+=1
this.list = this.list.concat(response.data.rows)
this.total = parseInt(response.data.total)
this.$refs.loadmore.onBottomLoaded();
})
}
},
chooseBfzt() {
this.bfztShow = !this.bfztShow
},
search(bfzt) {
this.bfztShow = false
this.listQuery.bfzt = bfzt.value
this.bfzt = bfzt.name
this.loadTop()
},
searchKeyWords(){
this.bfztShow = false
document.activeElement.blur();
this.loadTop()
},
toWellDetail(wellInfo){
this.bfztShow = false
const id = wellInfo.id
this.$store.commit('SET_PAGE_OFFSET', this.$refs.wrapper.scrollTop);
this.$router.push({
path :`/wellDetail/${id}`
})
},
goToMap(wellInfo){
this.bfztShow = false
openMapWindow(wellInfo.lngGaode,wellInfo.latGaode,wellInfo.wellName)
},
bf(index, id){
this.bfztShow = false
MessageBox.confirm('确定将该井布防吗?').then(action => {
if(action=='confirm'){
bfcf(id,'1').then(response => {
if(response.code==200){
Toast({
message: '布防成功',
position: 'bottom',
})
this.list[index].bfzt = '1'
this.list[index].bfztName='布防'
}
})
}
});
},
cf(index, id){
this.bfztShow = false
MessageBox.confirm('确定将该井撤防吗?').then(action => {
if(action=='confirm'){
bfcf(id,'0').then(response => {
if(response.code==200){
Toast({
message: '撤防成功',
position: 'bottom',
})
this.list[index].bfzt = '0'
this.list[index].bfztName='撤防'
}
})
}
});
},
// 获取布防状态
fetchBfzt() {
dict("bfzt").then(response => {
this.bfztList = response.data
this.bfztList.unshift({name:'全部',value:''})
})
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.index-container {
.search-div {
position: fixed
z-index: 100
top: 40px
.search-select {
float left
width: 22vw
height: 50px
line-height: 50px
text-align center
background-color #d9d9d9
.select-text {
margin-left 5px
}
}
.mint-search {
float left
width 78vw
height 50px
.mint-searchbar {
padding 3px 5px
}
}
.mint-search .mint-searchbar {
padding: 3px 5px
}
.mint-searchbar-inner {
height fit-content
}
}
.listbody {
margin-top 95px
padding-bottom 10px
padding 10px 2vw
overflow: scroll;
height: calc( 100vh - 90px );
}
.list-li {
margin-top 1vw;
border 1px solid #f0f0f0
background-color #ffffff
min-height 90px
}
.well-card {
.card-left {
width 70%
float left
padding 10px 15px
.card-wellcode {
margin-top 5px
font-size: 1.2rem
font-weight 600
}
.card-welltype {
margin-left 10px
font-size: 0.8rem
}
.card-bfzt {
margin-left 10px
font-size 0.8rem
color #13ad00
}
.card-position {
margin-top 10px
font-size 0.8rem
line-height 1.1rem
color #646464
}
}
.card-right {
height: 100%
width 20%
/*padding-top: 23px*/
float: left
text-align: right;
.bfbtn {
color: #ffffff;
background-color: #13ad00;
border 1px solid #13ad00
}
.cfbtn {
color: #ffffff;
background-color: #ff6f70;
border 1px solid #ff6f70
}
.mint-button{
margin-top: 10px
margin-right:5px
}
.mint-button--default.is-plain{
border: 1px solid #d9d9d9;
}
}
}
.welltype-popup {
top: 90px
width 90px
left:50px
background-color rgba(0, 0, 0, 0.7)
border-radius 5px
color: #ffffff
ul{
li{
margin:0px 0px 0px 0px
padding:15px 0px 15px 15px
}
}
.mint-button {
margin: 0.8rem 0.5rem
font-size: 0.9rem
height: 1.8rem
}
}
.no-content {
text-align center
height 40px
line-height 40px
}
}
</style>
