359 lines
9.8 KiB
Vue
359 lines
9.8 KiB
Vue
<template>
|
||
<div class="eqInspection">
|
||
<!-- navbar -->
|
||
<van-sticky :offset-top="0">
|
||
<van-nav-bar
|
||
title="PDA设备巡检记录"
|
||
left-arrow
|
||
sticky
|
||
class="eq-header"
|
||
@click-left="onClickLeft"
|
||
/>
|
||
<!-- @click-right="onClickRight" -->
|
||
</van-sticky>
|
||
<van-pull-refresh class="eq-main" v-model="isLoading" @refresh="onRefresh" ref="listMain">
|
||
<!-- 信息列表主体 -->
|
||
<!-- 搜索区域 -->
|
||
<div class="eq-search">
|
||
<div class="eq-search-back" />
|
||
<div class="eq-search-main">
|
||
<van-row class="eq-search-item">
|
||
<van-col :span="7" class="eq-search-item-lable">设备名称</van-col>
|
||
<van-col :span="15" :offset="1" class="eq-search-item-input">
|
||
<van-field
|
||
v-model="eqName"
|
||
right-icon="arrow-down"
|
||
disabled
|
||
placeholder="请选择设备"
|
||
@click="handleEqSelect"
|
||
/>
|
||
</van-col>
|
||
</van-row>
|
||
<van-row class="eq-search-item">
|
||
<van-col :span="7" class="eq-search-item-lable">时间段</van-col>
|
||
<van-col :span="15" :offset="1" class="eq-search-item-input">
|
||
<van-field
|
||
v-model="timeStr"
|
||
right-icon="rili"
|
||
icon-prefix="iconfont"
|
||
disabled
|
||
placeholder="请选择时间段"
|
||
@click="handleTimeSelect"
|
||
/>
|
||
</van-col>
|
||
</van-row>
|
||
<van-row class="eq-search-btn">
|
||
<van-col :span="9" :offset="1">
|
||
<van-button class="eq-search-btn-item eq-search-btn-left" round @click="toAdd">扫描新增</van-button>
|
||
</van-col>
|
||
<van-col :span="12" :offset="1">
|
||
<van-button class="eq-search-btn-item eq-search-btn-right" round @click="handleSearch">查 询</van-button>
|
||
</van-col>
|
||
</van-row>
|
||
</div>
|
||
</div>
|
||
<div class="eq-list">
|
||
<eq-item v-for="item in dataList" :inject-data="item" :key="item.id" />
|
||
</div>
|
||
<water-fall @click.native="getMore" :isOver="isOver"></water-fall>
|
||
</van-pull-refresh>
|
||
<time-popup ref="timePopup" :default-date="timeSlot" @changeDate="changeDate" />
|
||
<eq-popup ref="eqPopup" :eq-list="eqList" @changeEq="changeEq" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { list, eqList } from '@/api/eqInspection'
|
||
import timePopup from './components/timePopup.vue'
|
||
import eqPopup from './components/eqPopup.vue'
|
||
import eqItem from './components/eqItem.vue'
|
||
import moment from 'moment'
|
||
|
||
export default {
|
||
name: 'eqInspection',
|
||
components: { timePopup, eqPopup, eqItem },
|
||
data () {
|
||
return {
|
||
queryList: {
|
||
current: 1,
|
||
endTime: '',
|
||
equipmentId: '',
|
||
size: 10,
|
||
startTime: ''
|
||
},
|
||
isLoading: false,
|
||
isOver: true,
|
||
dataList: [],
|
||
eqList: [],
|
||
dataOption: {},
|
||
eqName: null,
|
||
timeSlot: [],
|
||
timeStr: null,
|
||
isFirstScroll: true
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getDataList()
|
||
this.getEqList()
|
||
document.querySelector('.eq-main').addEventListener('scroll', this.handleScroll, true)
|
||
// 给浏览器加入一个空的历史纪录
|
||
window.history.pushState(null, null, document.URL)
|
||
// 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
|
||
window.addEventListener('popstate', this.onBrowserBack, false)
|
||
},
|
||
destroyed () {
|
||
window.removeEventListener('popstate', this.onBrowserBack, false)
|
||
document.querySelector('.eq-main').removeEventListener('scroll', this.handleScroll, false)
|
||
},
|
||
methods: {
|
||
// 浏览器返回按钮监听
|
||
onBrowserBack () {
|
||
if (this.eqVisable || this.timeVisable) {
|
||
this.eqVisable = false
|
||
this.timeVisable = false
|
||
window.history.pushState(null, null, document.URL)
|
||
} else {
|
||
this.$router.push({
|
||
name: 'index'
|
||
})
|
||
}
|
||
},
|
||
// 滚动事件监听
|
||
handleScroll () {
|
||
let clientHeight = document.documentElement.clientHeight // 客户区大小
|
||
let scrollHeight = document.querySelector('.eq-main').scrollHeight // 没用滚动条的情况下，元素内容的总高度
|
||
let scrollTop = document.querySelector('.eq-main').scrollTop // 被隐藏在内容区域上方的像素数
|
||
let headerHeight = document.querySelector('.eq-header').offsetHeight// header高度
|
||
let listHeight = clientHeight - headerHeight // list高度
|
||
if (scrollTop - (scrollHeight - listHeight) >= -80 && this.isFirstScroll) {
|
||
this.isFirstScroll = false
|
||
this.queryList.current += 1
|
||
if (this.isOver) {
|
||
this.isOver = !this.isOver
|
||
this.$nextTick(() => {
|
||
this.getDataList()
|
||
setTimeout(() => {
|
||
this.isFirstScroll = true
|
||
}, 2000)
|
||
})
|
||
}
|
||
}
|
||
},
|
||
// 瀑布流点击
|
||
getMore () {
|
||
if (this.isOver) {
|
||
this.queryList.current += 1
|
||
this.getDataList()
|
||
}
|
||
},
|
||
// 获取信息列表
|
||
async getDataList () {
|
||
const result = await list(this.queryList)
|
||
if (result.success) {
|
||
this.dataList = this.dataList.concat(result.data.records)
|
||
this.dataOption = result.data
|
||
if (this.dataOption.total / 10 <= this.queryList.current) {
|
||
this.isOver = false
|
||
} else {
|
||
this.isOver = true
|
||
}
|
||
this.show = false
|
||
} else {
|
||
this.isOver = true
|
||
}
|
||
},
|
||
// 获取设备列表
|
||
async getEqList () {
|
||
const result = await eqList({
|
||
current: 1,
|
||
size: 999
|
||
})
|
||
if (result.success) {
|
||
this.eqList = result.data
|
||
}
|
||
},
|
||
// 点击查询
|
||
handleSearch () {
|
||
this.dataList = []
|
||
this.$nextTick(() => {
|
||
this.getDataList()
|
||
})
|
||
},
|
||
// 返回上一页
|
||
onClickLeft () {
|
||
this.$router.push({
|
||
name: 'index'
|
||
})
|
||
},
|
||
// 扫描新增
|
||
toAdd () {
|
||
this.$router.push({
|
||
name: 'eqInspectionAdd'
|
||
})
|
||
},
|
||
// 重置筛选项
|
||
resetQuery () {
|
||
this.queryList = {
|
||
current: 1,
|
||
endTime: '',
|
||
equipmentId: '',
|
||
size: 10,
|
||
startTime: ''
|
||
}
|
||
this.eqName = null
|
||
this.timeStr = null
|
||
this.timeSlot = []
|
||
this.dataList = []
|
||
},
|
||
// 下拉刷新
|
||
async onRefresh () {
|
||
this.resetQuery()
|
||
await this.getDataList()
|
||
this.$toast.success('刷新成功')
|
||
this.isLoading = false
|
||
},
|
||
// 弹出设备选择器
|
||
handleEqSelect () {
|
||
this.$nextTick(() => {
|
||
this.$refs.eqPopup.init()
|
||
})
|
||
},
|
||
// 弹出日历
|
||
handleTimeSelect () {
|
||
this.$nextTick(() => {
|
||
this.$refs.timePopup.init()
|
||
})
|
||
},
|
||
// 日期修改
|
||
changeDate (date) {
|
||
if (date && date.length) {
|
||
this.timeStr = `${moment(date[0]).format('YYYY/MM/DD')}-${moment(date[1]).format('YYYY/MM/DD')}`
|
||
this.queryList.startTime = date[0]
|
||
this.queryList.endTime = date[1]
|
||
this.timeSlot = [new Date(date[0]), new Date(date[1])]
|
||
}
|
||
},
|
||
// 设备修改
|
||
changeEq (index) {
|
||
this.eqName = this.eqList[index].name
|
||
this.queryList.equipmentId = this.eqList[index].id
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.eqInspection {
|
||
width: 100%;
|
||
background: #F6F6F6;
|
||
.eq-main {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 1.5rem;
|
||
bottom: 0;
|
||
overflow: scroll;
|
||
}
|
||
|
||
.eq-header {
|
||
background: #4271FF;
|
||
.van-icon {
|
||
color: #fff;
|
||
font-size: .4375rem;
|
||
}
|
||
.van-nav-bar__content {
|
||
height: 1.5rem;
|
||
line-height: 1.5rem;
|
||
.van-nav-bar__title {
|
||
color: #fff;
|
||
font-size: .4375rem;
|
||
}
|
||
}
|
||
}
|
||
.van-hairline--bottom::after {
|
||
border-bottom-width: 0;
|
||
}
|
||
.eq-search {
|
||
width: 100%;
|
||
height: 3.625rem;
|
||
position: relative;
|
||
.iconfont {
|
||
font-size: .5rem;
|
||
position: relative;
|
||
top: .05rem;
|
||
left: .09rem;
|
||
color: #0B58FF;
|
||
}
|
||
.eq-search-back {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 1rem;
|
||
background: #4271FF;
|
||
}
|
||
.eq-search-main {
|
||
position: relative;
|
||
padding-top: .125rem;
|
||
width: 94%;
|
||
margin-left: 3%;
|
||
height: 3.5rem;
|
||
border-radius: .25rem;
|
||
background: #fff;
|
||
box-shadow: .02rem .02rem .1rem rgba($color: #000000, $alpha: .2);
|
||
input::-webkit-input-placeholder {
|
||
font-size: .375rem;
|
||
}
|
||
input:-moz-placeholder {
|
||
font-size: .375rem;
|
||
}
|
||
input::-moz-placeholder {
|
||
font-size: .375rem;
|
||
}
|
||
input:-ms-input-placeholder {
|
||
font-size: .375rem;
|
||
}
|
||
}
|
||
.eq-search-item {
|
||
padding-top: .25rem;
|
||
line-height: .875rem;
|
||
.eq-search-item-lable {
|
||
text-align: right;
|
||
font-size: .375rem;
|
||
}
|
||
.van-cell {
|
||
padding: 0 .25rem;
|
||
height: .875rem;
|
||
background: #F6F6F6;
|
||
border-radius: .1875rem;
|
||
.van-field__body {
|
||
height: .875rem;
|
||
.van-field__control {
|
||
height: .875rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.eq-search-btn {
|
||
margin-top: .25rem;
|
||
.eq-search-btn-item {
|
||
width: 100%;
|
||
font-size: .375rem;
|
||
}
|
||
.eq-search-btn-left {
|
||
color: #42D1A5;
|
||
border: 0.02rem solid #42D1A5;
|
||
}
|
||
.eq-search-btn-right {
|
||
color: #fff;
|
||
background: #4271FF;
|
||
border: 0.02rem solid #4271FF;
|
||
}
|
||
}
|
||
}
|
||
.eq-list {
|
||
width: 94%;
|
||
padding: 0 3%;
|
||
}
|
||
}
|
||
</style>
|