xytSk-App/pages/ylzList/detail/index.vue

<template>
    <view :style="{height:'100vh',overflow:'auto'}">
        <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 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'
    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");
    export default {
        components: {
            Table,
            YlzTable
        },
        data() {
            return {
                startTime: stm,
                endTime: etm,
                stm,
                etm,
                showTime: false,
                showTime1: false,
                activeOne: 0,
                ylzData: [],
                chartData1: {},
                chartData: {},
                stnm:'',
            }
        },
        methods: {

            // 获取雨量信息
            async getrainInfo() {
                try {
                    const {
                        data
                    } = await uni.$http.post(
                        "/gunshiApp/xyt/attResBase/rainBasinDivision/queryStStbprpPerHour/StcdAndStartTimeAndEndTime", {
                            stcd: "716164061",
                            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/xyt/attResBase/rainBasinDivision/queryStStbprpPerHourChart/StcdAndStartTimeAndEndTime", {
                            stcd: "716164061",
                            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();
            }
        },
        watch: {
            chartData1(n, o) {
                this.chartData = {
                    ...drpOptions(n)
                }
            }
        },
        onLoad(options){
            this.stnm = options.stnm
        },
        mounted() {
            this.getrainInfo();
            this.getrainChartInfo();
        }
    }
</script>

<style lang="scss" scoped>
    .time-ranger {
        margin-bottom: 10px;

        .start-time,
        .end-time {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #dfdfdf;
        }
    }

    .tab-bar {
        display: flex;
        justify-content: space-around;
        padding: 10px 40px;
        border-bottom: 1px solid #dfdfdf;
    }

    .active {
        color: #39a6ff;
    }

    .ylz-chart-area {
        width: 100%;
        height: 230px;
    }
</style>