94 lines
2.4 KiB
Vue
94 lines
2.4 KiB
Vue
<template>
|
|
<view :style="{height:'100vh',overflow:'hidden'}">
|
|
<u-status-bar></u-status-bar>
|
|
<u-navbar title="水库预警" :autoBack="true" :titleStyle="{fontSize:'18px'}" :height="44" :safeAreaInsetTop="true" leftIconSize="20" leftIconColor="rgb(153, 153, 153)"></u-navbar>
|
|
<view :style="{marginTop:'44px'}">
|
|
<u-tabs class="tabsClass" :list="tabs" :scrollable="true" :activeStyle="{color: 'rgb(37, 157, 255)',fontSize: '16px'}" :inactiveStyle="{color: '#606266',fontSize: '16px'}" lineColor="transparent" itemStyle="height: 44px" @click="onTab"></u-tabs>
|
|
<div class="tableHead">
|
|
<div class="td t1">站名</div>
|
|
<div class="td t2">水位(m)</div>
|
|
</div>
|
|
<div class="tableBody">
|
|
<div class="tableRow" v-for="(item, index) in currentList" :key="index">
|
|
<div class="td t1">{{ item.stnm || '-' }}</div>
|
|
<div class="td t2">{{ item.rzWarn || '-' }}</div>
|
|
</div>
|
|
<div :style="{height:'80px'}"></div>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabs: [
|
|
{ name: '超保证水位', key: 'overPromise' },
|
|
{ name: '超警戒水位', key: 'overWarn' }
|
|
],
|
|
cur: 0,
|
|
map: {},
|
|
}
|
|
},
|
|
computed: {
|
|
currentList() {
|
|
if (!this.tabs || !this.tabs.length || !this.tabs[this.cur]) return []
|
|
const k = this.tabs[this.cur].key
|
|
const arr = this.map[k]
|
|
return Array.isArray(arr) ? arr : []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
const { map } = options || {}
|
|
this.map = map ? JSON.parse(decodeURIComponent(map)) : {}
|
|
},
|
|
methods: {
|
|
onTab(item, index) {
|
|
this.cur = item.index
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tabsClass{
|
|
margin-top: 0;
|
|
height: 44px;
|
|
padding: 0 40px;
|
|
border-top: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.tabsClass /deep/ .u-tabs__wrapper__nav__item__text{ white-space: nowrap; }
|
|
.tableHead{
|
|
width: 97%;
|
|
margin: 5px auto 0;
|
|
height: 50px;
|
|
background-color: #e4f2fe;
|
|
display: flex;
|
|
color: #208FEE;
|
|
}
|
|
.tableBody{
|
|
width: 97%;
|
|
height: calc(100vh - 180px);
|
|
background-color: #f7f7f7;
|
|
overflow-y: auto;
|
|
}
|
|
.tableRow{
|
|
width: 100%;
|
|
height: 46px;
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
background-color: #ffffff;
|
|
}
|
|
.td{
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
}
|
|
.t1{width: 60%}
|
|
.t2{width: 40%}
|
|
</style>
|