346 lines
7.9 KiB
Vue
346 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: 10%; color: #3399ef"
|
|
>{{ stm }}</text
|
|
>
|
|
</view>
|
|
<view class="end-time">
|
|
<text>结束时间</text>
|
|
<text
|
|
@click="showTime1 = true"
|
|
style="margin: 0 10%; 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">
|
|
<view class="real-sw">
|
|
<text class="sw-name">1h</text>
|
|
<text style="font-size: 22px; margin-right: 5px">{{
|
|
projectData
|
|
}}</text>
|
|
<text>mm</text>
|
|
</view>
|
|
<!-- <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 :tableData="totalTableData"></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: "",
|
|
stcd: "",
|
|
projectTime,
|
|
projectData: "",
|
|
projectBarData: {},
|
|
totalTableData: {},
|
|
};
|
|
},
|
|
methods: {
|
|
// 获取雨量信息
|
|
async getrainInfo() {
|
|
uni.showLoading({
|
|
title: "加载中...",
|
|
mask: true,
|
|
});
|
|
try {
|
|
const { data } = await uni.$http.post(
|
|
"/gunshiApp/tsg/attResBase/rainBasinDivision/queryStStbprpPerHour/StcdAndStartTimeAndEndTime",
|
|
{
|
|
stcd: this.stcd,
|
|
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) {
|
|
uni.hideLoading();
|
|
|
|
this.ylzData = data.data;
|
|
}
|
|
} catch (error) {
|
|
uni.$showMsg();
|
|
}
|
|
},
|
|
|
|
// 获取雨量图表信息
|
|
async getrainChartInfo() {
|
|
try {
|
|
const { data } = await uni.$http.post(
|
|
"/gunshiApp/tsg/attResBase/rainBasinDivision/queryStStbprpPerHourChart/StcdAndStartTimeAndEndTime",
|
|
{
|
|
stcd: this.stcd,
|
|
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();
|
|
}
|
|
},
|
|
|
|
async getTotalTableData() {
|
|
try {
|
|
const { data } = await uni.$http.get(
|
|
`/gunshiApp/tsg/attResBase/rainBasinDivision/queryStPptnDetails/stcd?stcd=${this.stcd}`
|
|
);
|
|
if (data.code == 200) {
|
|
this.totalTableData = { ...data.data };
|
|
}
|
|
} catch (e) {
|
|
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"),
|
|
}
|
|
);
|
|
if (data.code == 200) {
|
|
// this.projectBarData = {
|
|
// ...projectOptions(data.data)
|
|
// }
|
|
this.projectData = data.data.find(
|
|
(item) => item.stcd == this.stcd
|
|
).h2;
|
|
}
|
|
} catch (error) {
|
|
uni.$showMsg();
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
chartData1(n, o) {
|
|
this.chartData = {
|
|
...drpOptions(n),
|
|
};
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
this.stnm = options.stnm;
|
|
this.stcd = options.stcd;
|
|
},
|
|
mounted() {
|
|
this.getrainInfo();
|
|
this.getrainChartInfo();
|
|
this.getPreReportData();
|
|
this.getTotalTableData();
|
|
},
|
|
};
|
|
</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%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.real-sw {
|
|
width: 50%;
|
|
position: relative;
|
|
border: 1px solid #efefef;
|
|
height: 60px;
|
|
text-align: center;
|
|
line-height: 75px;
|
|
margin-right: 10px;
|
|
|
|
.sw-name {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
// padding: 0 5px;
|
|
color: #49a7f0;
|
|
background-color: #cbecfd;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
</style> |