241 lines
7.9 KiB
Vue
241 lines
7.9 KiB
Vue
<template>
|
||
<view :style="{height:'100vh',overflow:'auto',backgroundColor:'#fff'}">
|
||
<u-navbar :title="stnm" :autoBack="true" :titleStyle="{
|
||
fontSize:'18px'
|
||
}" :height='40' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
|
||
</u-navbar>
|
||
<view class="tab-bar" style="margin-top:70px">
|
||
<view class="jcsj" @click="activeOne = 0" :class="{'active':activeOne == 0}">
|
||
监测数据
|
||
</view>
|
||
<view class="tjsj" @click="activeOne = 1" :class="{'active':activeOne == 1}">
|
||
统计数据
|
||
</view>
|
||
</view>
|
||
<view style="padding:10px" v-if="activeOne == 0">
|
||
<view class="time-ranger">
|
||
<view class="start-time">
|
||
<text>开始时间</text>
|
||
<text @click="showTime=true" style="margin-left:15%;color:#3399ef">{{stm}}</text>
|
||
</view>
|
||
<view class="end-time">
|
||
<text>结束时间</text>
|
||
<text @click="showTime1=true" style="margin:0 15%;color:#3399ef">{{etm}}</text>
|
||
<view class="search-btn" @click="searchHandle">
|
||
搜索
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="ylz-chart-area">
|
||
<qiun-data-charts :chartData="chartData.chartData" :echartsApp="true" :eopts="chartData.eopts" />
|
||
</view>
|
||
<view class="ylz-table-area">
|
||
<YlzTable :tableData="ylzData"></YlzTable>
|
||
</view>
|
||
<view>
|
||
<view class="yl-dl-yb">
|
||
<text class="yl-bluetiao"></text>
|
||
<text>短临预报</text>
|
||
</view>
|
||
<view style="margin-top:5px;margin-left:10px">预报时间：{{projectTime}}</view>
|
||
<view class="ylzpro-chart-area" v-if="projectData.length != 0">
|
||
<qiun-data-charts :chartData="projectBarData.chartData" :echartsApp="true" :eopts="projectBarData.eopts" />
|
||
</view>
|
||
<view
|
||
style="height:250px;display: flex;align-items: center;justify-content: center;background-color: #fff;margin-top:10px"
|
||
v-else>
|
||
<image src="../../../static/empty.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view v-if="activeOne == 1" style="padding:10px">
|
||
<Table></Table>
|
||
</view>
|
||
|
||
<u-datetime-picker :show="showTime" v-model="startTime" mode="datetime" @confirm="handleStartTime"
|
||
@cancel="showTime=false"></u-datetime-picker>
|
||
<u-datetime-picker :show="showTime1" v-model="endTime" mode="datetime" @confirm="handleEndTime"
|
||
@cancel="showTime1=false"></u-datetime-picker>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import moment from 'moment';
|
||
import Table from "./tjsjTable.vue"
|
||
import YlzTable from "./jcTable.vue"
|
||
import drpOptions from './jcOptions'
|
||
import projectOptions from './barOptions'
|
||
const stm = moment().subtract(7, 'days').set({
|
||
minute: 0,
|
||
second: 0
|
||
}).format("YYYY-MM-DD HH:mm");
|
||
const etm = moment().set({
|
||
minute: 0,
|
||
second: 0
|
||
}).format("YYYY-MM-DD HH:mm");
|
||
const projectTime = moment().set({
|
||
minute: 0,
|
||
second: 0
|
||
}).format("YYYY-MM-DD HH:mm")
|
||
export default {
|
||
components: {
|
||
Table,
|
||
YlzTable
|
||
},
|
||
data() {
|
||
return {
|
||
startTime: stm,
|
||
endTime: etm,
|
||
stm,
|
||
etm,
|
||
showTime: false,
|
||
showTime1: false,
|
||
activeOne: 0,
|
||
ylzData: [],
|
||
chartData1: {},
|
||
chartData: {},
|
||
stnm:'',
|
||
projectTime,
|
||
projectData:[],
|
||
projectBarData:{}
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
// 获取雨量信息
|
||
async getrainInfo() {
|
||
try {
|
||
const {
|
||
data
|
||
} = await uni.$http.post(
|
||
"/gunshiApp/tsg/attResBase/rainBasinDivision/queryStStbprpPerHour/StcdAndStartTimeAndEndTime", {
|
||
stcd: "61610700",
|
||
startTime: moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
|
||
endTime: moment(this.etm).format("YYYY-MM-DD HH:mm:ss")
|
||
})
|
||
if (data.code == 200) {
|
||
this.ylzData = data.data;
|
||
}
|
||
} catch (error) {
|
||
uni.$showMsg();
|
||
}
|
||
},
|
||
|
||
// 获取雨量图表信息
|
||
async getrainChartInfo() {
|
||
try {
|
||
const {
|
||
data
|
||
} = await uni.$http.post(
|
||
"/gunshiApp/tsg/attResBase/rainBasinDivision/queryStStbprpPerHourChart/StcdAndStartTimeAndEndTime", {
|
||
stcd: "61610700",
|
||
startTime: moment(this.stm).format("YYYY-MM-DD HH:mm:ss"),
|
||
endTime: moment(this.etm).format("YYYY-MM-DD HH:mm:ss")
|
||
})
|
||
|
||
if (data.code == 200) {
|
||
this.chartData1 = {
|
||
...data.data
|
||
}
|
||
}
|
||
} catch (error) {
|
||
uni.$showMsg();
|
||
}
|
||
},
|
||
handleStartTime(e) {
|
||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||
this.stm = time
|
||
this.showTime = false
|
||
},
|
||
handleEndTime(e) {
|
||
let time = moment(e.value).format("YYYY-MM-DD HH:mm")
|
||
this.etm = time;
|
||
this.showTime1 = false
|
||
},
|
||
|
||
searchHandle() {
|
||
this.getrainInfo();
|
||
this.getrainChartInfo();
|
||
},
|
||
// 获取预报数据
|
||
async getPreReportData() {
|
||
try {
|
||
const {
|
||
data
|
||
} = await uni.$http.post(
|
||
"/gunshiApp/tsg/weather/short/fore", {
|
||
tm:moment(this.projectTime).format('YYYYMMDDHHmm')
|
||
})
|
||
this.projectBarData = {
|
||
...projectOptions(data.data)
|
||
}
|
||
if (data.code == 200) {
|
||
// this.projectBarData = {
|
||
// ...projectOptions(data.data)
|
||
// }
|
||
}
|
||
|
||
} catch (error) {
|
||
uni.$showMsg();
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
chartData1(n, o) {
|
||
this.chartData = {
|
||
...drpOptions(n)
|
||
}
|
||
},
|
||
},
|
||
onLoad(options){
|
||
this.stnm = options.stnm
|
||
},
|
||
mounted() {
|
||
this.getrainInfo();
|
||
this.getrainChartInfo();
|
||
this.getPreReportData();
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
.tab-bar {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 10px 40px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.active {
|
||
color: #39a6ff;
|
||
}
|
||
|
||
.ylz-chart-area {
|
||
width: 100%;
|
||
height: 230px;
|
||
background-color: #fff;
|
||
}
|
||
.ylz-table-area{
|
||
background-color: #fff;
|
||
}
|
||
.yl-dl-yb{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
}
|
||
.yl-bluetiao{
|
||
width: 5px;
|
||
height: 15px;
|
||
background-color: #02a7f0;
|
||
margin-right: 10px;
|
||
}
|
||
.ylzpro-chart-area{
|
||
width: 100%;
|
||
height: 250px;
|
||
background-color: #fff;
|
||
}
|
||
</style> |