NanJingLamanRadarProject/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue

<template>
    <div class="tabs">
        <div class="tab-item" @click="onTabClick('垂直廓线')" :class="{'active': currentTab === '垂直廓线'}">
            垂直廓线
            <img src="/images/line.png" v-if="currentTab === '垂直廓线'" />
        </div>
        <div class="tab-item" @click="onTabClick('对流指数')" :class="{'active': currentTab === '对流指数'}">
            对流指数
            <img src="/images/line.png" v-if="currentTab === '对流指数'" />
        </div>
        <div class="tab-item" @click="onTabClick('T-logP图')" :class="{'active': currentTab === 'T-logP图'}">
            T-logP图
            <img src="/images/line.png" v-if="currentTab === 'T-logP图'" />
        </div>
        <div class="tab-item" @click="onTabClick('BP反演产品')" :class="{'active': currentTab === 'BP反演产品'}">
            BP反演产品
            <img src="/images/line.png" v-if="currentTab === 'BP反演产品'" />
        </div>
    </div>
    <div class="main">
        <div class="menu panel">
            <div class="menu-item">
                <h2 class="tip">区域选择</h2>
                <el-row :gutter="12">
                    <el-col :span="8"><span @click="onRegionClick('江宁')" :class="{'active': currentRegion === '江宁'}">江宁</span></el-col>
                    <el-col :span="8"><span @click="onRegionClick('六合')" :class="{'active': currentRegion === '六合'}">六合</span></el-col>
                    <el-col :span="8"><span @click="onRegionClick('浦口')" :class="{'active': currentRegion === '浦口'}">浦口</span></el-col>
                    <el-col :span="8"><span @click="onRegionClick('高淳')" :class="{'active': currentRegion === '高淳'}">高淳</span></el-col>
                    <el-col :span="8"><span @click="onRegionClick('溧水')" :class="{'active': currentRegion === '溧水'}">溧水</span></el-col>
                </el-row>
            </div>
            <div class="menu-item" v-if="currentTab === '垂直廓线'">
                <h2 class="tip">要素选择</h2>
                <el-row :gutter="12">
                    <el-col :span="8"><span @click="onElementClick('温度')" :class="{'active': currentElement === '温度'}">温度</span></el-col>
                    <el-col :span="8"><span @click="onElementClick('湿度')" :class="{'active': currentElement === '湿度'}">湿度</span></el-col>
                </el-row>
            </div>
            <div class="menu-item" v-if="currentTab === '对流指数'">
                <h2 class="tip">要素选择</h2>
                <el-row :gutter="12">
                    <el-col :span="8"><span @click="onCategoryClick('CAPE')" :class="{'active': currentCategory === 'CAPE'}">CAPE</span></el-col>
                    <el-col :span="8"><span @click="onCategoryClick('CIN')" :class="{'active': currentCategory === 'CIN'}">CIN</span></el-col>
                </el-row>
            </div>
        </div>
        <div class="container panel">
            <div class="toolbar">
                <div class="times">
                    <div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
                        <span class="hour">{{time.hour}}</span>
                        <span class="minute" @click="onTimeClick(time)">{{time.minute}}</span>
                    </div>
                </div>
                <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker">
                </el-date-picker>
                <div class="control-btn">
                    <span><img src="/images/prev.png" /></span>
                    <span><img src="/images/next.png" /></span>
                </div>
                <el-select v-model="currentHour" placeholder="">
                    <el-option
                    v-for="item in hours"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
                <p class="unit">时</p>
                <div class="refresh-btn">
                    <img src="/images/refresh.png" />
                </div>
                <div class="btns-group">
                    <span>播放动画</span>
                    <span>下载动画</span>
                </div>
            </div>
            <div class="picture-view">
                <span class="arrow arrow-prev"><img src="/images/prev-btn.png" /></span>
                <span class="arrow arrow-next"><img src="/images/next-btn.png" /></span>
                <span class="save-btn"><img src="/images/save.png" /></span>
                <h2 class="title">2021.11.21 10:42 Temperature</h2>
                <div class="picture">
                    <el-image
                    src="/images/picture.png"
                    :preview-src-list="srcList"
                    :initial-index="1"
                    fit="contain"
                    >
                    </el-image>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { onMounted, reactive, toRefs } from 'vue';
    import moment from "moment";
    
    export default {
        name: 'MicrowaveRadiation',
        setup() {
            let options = reactive({
                currentTab: '垂直廓线',
                currentRegion: '江宁',
                currentElement: '温度',
                currentCategory: 'CAPE',
                date: new Date(),
                currentHour: '10',
                hours: [{
                    value: '10',
                    label: '10'
                }, {
                    value: '11',
                    label: '11'
                }],
                times: [],
                currentTime: null,
                srcList: ['/images/picture.png']
            })

            onMounted(() => {
                initTimes();
            })
            
            const onTabClick = (name) => {
                options.currentTab = name;
            }

            const onRegionClick = (region) => {
                options.currentRegion = region;
            }

            const onElementClick = (element) => {
                options.currentElement = element;
            }

            const onCategoryClick = (category) => {
                options.currentCategory = category;
            }

            const initTimes = () => {
                let now = moment();
                let minute = now.minute();
                const remainder = minute % 6;
                if (remainder > 0){
                    now.minute(minute + (6 - remainder));
                }

                options.currentTime = now.format('YYYY-MM-DD HH:mm');
                now.minute(now.minute() - 6);

                for (let i = 0; i < 20 ; i++) {
                    options.times.push({
                        hour: now.add(6, 'minute').format('HH时'),
                        minute: now.format('mm'),
                        date: now.format('YYYY-MM-DD HH:mm'),
                        name: 'hour' + now.format('HH')
                    });
                }
            }

            const onTimeClick = (time) => {
                console.log(time.date)
                options.currentTime = time.date;
                console.log(options.currentTime)
            }

            return {
                ...toRefs(options),
                onTabClick,
                onRegionClick,
                onElementClick,
                onCategoryClick,
                onTimeClick
            }
        }
    }
</script>
<style lang="less" scoped>
    
</style>