145 lines
4.5 KiB
Vue
145 lines
4.5 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>
|
|
</template>
|
|
|
|
<script>
|
|
import moment from "moment"
|
|
export default {
|
|
props:{
|
|
stcd:String,
|
|
default:''
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
tableData:{},
|
|
days:moment().diff(moment().startOf('year'),'days')+1
|
|
}
|
|
},
|
|
computed:{
|
|
maxDrpTime(){
|
|
if(this.tableData.maxDrpTime){
|
|
return moment(this.tableData.maxDrpTime).format("YYYY-MM-DD")
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
async getTableData(){
|
|
console.log(this.stcd);
|
|
try{
|
|
const {data} = await uni.$http.get(
|
|
`/gunshiApp/xfflood/attResBase/rainBasinDivision/queryStPptnDetails/stcd?stcd=${this.stcd}`
|
|
)
|
|
if(data.code == 200){
|
|
this.tableData = {...data.data};
|
|
}
|
|
}catch(e){
|
|
uni.$showMsg()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getTableData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tjsj-box{
|
|
.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>
|