131 lines
4.4 KiB
Vue
131 lines
4.4 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 === null ? '-':tableData.h1}}</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 === null ? '-':tableData.h3}}</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 === null ? '-':tableData.h6}}</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 === null ? '-':tableData.h12}}</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 === null ? '-':tableData.h24}}</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 === null ? '-':tableData.h48}}</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 === null ? '-':tableData.today}}</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 === null ? '-':tableData.yesterdayDrp}}</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 === null ? '-':tableData.monthDrp}}</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 === null ? '-':tableData.yearDrp}}</view>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<view class="first-row">本年降雨天数</view>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<view class="second-row">{{tableData.yearDrpDay === null ? '-':tableData.yearDrpDay}}/{{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 === null ? '-':tableData.maxDrp}}</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>
|