tsg-app/pages/ylzList/detail/index.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>