172 lines
4.5 KiB
Vue
172 lines
4.5 KiB
Vue
<template>
|
|
<view :loading="loading" class="report" style="padding-top: 10px">
|
|
<view class="navReport">
|
|
<view class="tabsBox">
|
|
<uni-segmented-control
|
|
:current="curTabs"
|
|
:values="items"
|
|
style-type="text"
|
|
active-color="#376cf3"
|
|
@clickItem="onClickItem"
|
|
/>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 稳态报表 -->
|
|
<SteadyState
|
|
v-if="curTabs == 0"
|
|
:indexList="indexList"
|
|
:total="total"
|
|
:status="status"
|
|
:navHeight="navHeight"
|
|
@scrolltolower="scrolltolower"
|
|
/>
|
|
<!-- 暂态报表 -->
|
|
<Transient
|
|
v-if="curTabs == 1"
|
|
:indexList="indexList"
|
|
:total="total"
|
|
:status="status"
|
|
:navHeight="navHeight"
|
|
@scrolltolower="scrolltolower"
|
|
/>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import SteadyState from './comp/steadyState.vue'
|
|
import Transient from './comp/transient.vue'
|
|
export default {
|
|
components: {
|
|
SteadyState,
|
|
Transient,
|
|
},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
curTabs: 0,
|
|
|
|
total: 6,
|
|
loading: false,
|
|
items: ['稳态报表', '暂降报告'],
|
|
status: 'more', //more加载前 loading加载中 noMore加载后
|
|
|
|
navHeight: 0,
|
|
|
|
indexList: [
|
|
{
|
|
name: '测试监测点',
|
|
item: '2022-01-01至2022-01-01',
|
|
type: '1',
|
|
status: '1',
|
|
},
|
|
{
|
|
name: '测试监测点',
|
|
item: '2022-01-01至2022-01-01',
|
|
type: '2',
|
|
status: '1',
|
|
},
|
|
{
|
|
name: '测试监测点',
|
|
item: '2022-01-01至2022-01-01',
|
|
type: '1',
|
|
status: '1',
|
|
},
|
|
{
|
|
name: '测试监测点',
|
|
item: '2022-01-01至2022-01-01',
|
|
type: '1',
|
|
status: '0',
|
|
},
|
|
{
|
|
name: '测试监测点',
|
|
item: '2022-01-01至2022-01-01',
|
|
type: '1',
|
|
status: '0',
|
|
},
|
|
{
|
|
name: '测试监测点',
|
|
item: '2022-01-01至2022-01-01',
|
|
type: '1',
|
|
status: '0',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
uni.createSelectorQuery()
|
|
.select('.navReport')
|
|
.boundingClientRect((rect) => {
|
|
//
|
|
// #ifdef H5
|
|
this.navHeight = rect.height + 65
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
this.navHeight = rect.height + 10
|
|
// #endif
|
|
})
|
|
.exec()
|
|
},
|
|
|
|
methods: {
|
|
onClickItem(e) {
|
|
if (this.curTabs !== e.currentIndex) {
|
|
this.curTabs = e.currentIndex
|
|
}
|
|
},
|
|
|
|
|
|
scrolltolower() {
|
|
if (this.total != this.indexList.length) {
|
|
this.status = 'loading'
|
|
this.info()
|
|
} else {
|
|
this.status = 'noMore'
|
|
}
|
|
},
|
|
info() {
|
|
setTimeout(() => {
|
|
this.status = 'more'
|
|
}, 1000)
|
|
},
|
|
},
|
|
|
|
computed: {},
|
|
|
|
watch: {},
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.report {
|
|
overflow: hidden;
|
|
/deep/ .u-tabs__wrapper__nav {
|
|
background: #fff;
|
|
}
|
|
/deep/ .u-tabs__wrapper__nav__item {
|
|
flex: 1;
|
|
}
|
|
/deep/ .u-tabs__wrapper__nav__line {
|
|
left: 80rpx;
|
|
}
|
|
|
|
/deep/ .u-u-subsection {
|
|
width: 80% !important;
|
|
}
|
|
/deep/.tabsBox {
|
|
border-bottom: 1px solid #cccccc70;
|
|
.segmented-control {
|
|
height: 49px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.segmented-control__text {
|
|
font-size: 30rpx !important;
|
|
color: rgb(96, 98, 102);
|
|
}
|
|
.segmented-control__item--text {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
</style>
|