tsg-app/pages/ylzList/detail/tjsjTable.vue

131 lines
4.1 KiB
Vue

<template>
<view class="tjsj-box">
<uni-row class="tjsj-row" :width="700">
<uni-col :span="12">
<view class="first-row">近1h雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.h1||0}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row">近3h雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.h3||0}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row">近6h雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.h6||0}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row">近12h雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.h12||0}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row">近24h雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.h24||0}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row">近48h雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.h48||0}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row">今日雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.today||0}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row">昨日雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.yesterdayDrp||0}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row">本月雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.monthDrp||0}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row">本年雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.yearDrp||0}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row">本年降雨天数</view>
</uni-col>
<uni-col :span="12">
<view class="second-row">{{tableData.yearDrpDay||0}}/{{days}}</view>
</uni-col>
<uni-col :span="12">
<view class="first-row" style="border-bottom: 1px solid #dfdfdf;">本年最大日雨量(mm)</view>
</uni-col>
<uni-col :span="12">
<view class="second-row" style="display: flex; justify-content: center;border-bottom: 1px solid #dfdfdf;">
<text>{{tableData.maxDrp||0}}</text>
<text style="color: #E69224;">({{maxDrpTime}})</text>
</view>
</uni-col>
</uni-row>
<view style="height:150px"></view>
</view>
</template>
<script>
import moment from "moment"
export default {
props: {
tableData: {
type: Object,
default: {}
}
},
data() {
return {
stcd:'',
days:moment().diff(moment().startOf('year'),'days')+1
}
},
computed:{
maxDrpTime(){
if(this.tableData.maxDrpTime){
return moment(this.tableData.maxDrpTime).format("YYYY-MM-DD")
}
}
},
}
</script>
<style lang="scss" scoped>
.tjsj-box{
max-height: 100vh;
.tjsj-row{
.first-row{
line-height: 40px;
text-align: center;
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
}
.second-row{
line-height: 40px;
text-align: center;
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
}
}
}
</style>