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

<template>
    <div class="tabs">
        <div class="tab-item" @click="onTabClick('MWR')" :class="{'active': currentTab === 'MWR'}">
            质控对比
            <img src="/images/line.png" v-if="currentTab === 'MWR'" />
        </div>
        <div class="tab-item" @click="onTabClick('kuoxian')" :class="{'active': currentTab === 'kuoxian'}">
            垂直廓线
            <img src="/images/line.png" v-if="currentTab === 'kuoxian'" />
        </div>
        <div class="tab-item" @click="onTabClick('shixu')" :class="{'active': currentTab === 'shixu'}">
            对流指数
            <img src="/images/line.png" v-if="currentTab === 'shixu'" />
        </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('shixu_BPFY')" :class="{'active': currentTab === 'shixu_BPFY'}">
            BP反演产品
            <img src="/images/line.png" v-if="currentTab === 'shixu_BPFY'" />
        </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('jiangning')" :class="{'active': currentRegion === 'jiangning'}">江宁</span></el-col>
                </el-row>
            </div>
            <div class="menu-item" v-if="currentTab === 'MWR' || currentTab === 'kuoxian' || currentTab === 'shixu' || currentTab === 'shixu_BPFY'">
                <h2 class="tip">要素选择</h2>
                <el-row :gutter="12">
                    <el-col :span="8" v-if="currentTab === 'MWR' || currentTab === 'kuoxian' || currentTab === 'shixu_BPFY'"><span @click="onElementClick('TEMP')" :class="{'active': currentElement === 'TEMP'}">温度</span></el-col>
                    <el-col :span="8" v-if="currentTab === 'kuoxian' || currentTab === 'shixu_BPFY'"><span @click="onElementClick('RH')" :class="{'active': currentElement === 'RH'}">湿度</span></el-col>
                    <el-col :span="8" v-if="currentTab === 'kuoxian' || currentTab === 'shixu_BPFY'"><span @click="onElementClick('VD')" :class="{'active': currentElement === 'VD'}">水汽密度</span></el-col>
                    <el-col :span="8" v-if="currentTab === 'shixu'"><span @click="onElementClick('CAPE')" :class="{'active': currentElement === 'CAPE'}">CAPE</span></el-col>
                    <el-col :span="8" v-if="currentTab === 'shixu'"><span @click="onElementClick('CIN')" :class="{'active': currentElement === 'CIN'}">CIN</span></el-col>
                </el-row>
            </div>
        </div>
        <div class="container panel">
            <div class="toolbar" :class="{'day-toolbar': currentTab === 'MWR'}">
                <div class="times" v-if="currentTab === 'MWR'">
                    <div class="time-item" v-for="(time, index) in days" :key="index" :class="{'active': currentTime === time.date}">
                        <span class="time" @click="onDayClick(time, index)">{{time.day}}</span>
                    </div>
                </div>
                <div class="times" v-else>
                    <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="time" @click="onTimeClick(time, index)">{{time.minute}}</span>
                    </div>
                </div>
                <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker" @change="onChange">
                </el-date-picker>
                <div class="control-btn">
                    <span @click="onPrevDayClick"><img src="/images/prev.png" /></span>
                    <span @click="onNextDayClick"><img src="/images/next.png" /></span>
                </div>
                <el-select v-model="currentHour" placeholder="" @change="onChange" v-if="currentTab !== 'MWR'">
                    <el-option
                    v-for="item in hours"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
                <p class="unit" v-if="currentTab !== 'MWR'">时</p>
                <div class="refresh-btn" @click="onRefreshClick" v-if="currentTab !== 'MWR'">
                    <img src="/images/refresh.png" />
                </div>
                <div class="btns-group" v-if="currentTab !== 'MWR'">
                    <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
                    <a @click="onDownloadClick">下载动画</a>
                    <a id="weboDownload" download :href="downloadSrc" style="display: none;">下载隐藏层</a>
                </div>
            </div>
            <div class="picture-view">
                <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>
                <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>
                <a :href="downloadImgUrl" download class="save-btn"><img src="/images/save.png" /></a>
                <div class="picture-container contrast-picture-container" v-if="currentTab === 'MWR'">
                    <div class="picture">
                        <h2 class="title">原始数据</h2>
                        <el-image
                            :src="contrast.noQCImgUrl"
                            :preview-src-list="contrast.noQCImgPreview"
                            :initial-index="0"
                            fit="contain"
                            @load="onImageLoad"
                        >
                            <template #error>
                                <div class="image-slot">
                                    <img src="/images/null-picture.png" />
                                </div>
                                <p class="image-tip">暂无图片</p>
                            </template>
                            <template #placeholder>
                                <div class="image-placeholder">正在加载...</div>
                            </template>
                        </el-image>
                    </div>
                    <div class="picture">
                        <h2 class="title">异常值标记</h2>
                        <el-image
                            :src="contrast.fillingImgUrl"
                            :preview-src-list="contrast.fillingImgPreview"
                            :initial-index="0"
                            fit="contain"
                            @load="onImageLoad"
                        >
                            <template #error>
                                <div class="image-slot">
                                    <img src="/images/null-picture.png" />
                                </div>
                                <p class="image-tip">暂无图片</p>
                            </template>
                            <template #placeholder>
                                <div class="image-placeholder">正在加载...</div>
                            </template>
                        </el-image>
                    </div>
                    <div class="picture">
                        <h2 class="title">野点插补结果</h2>
                        <el-image
                            :src="contrast.fillingImgUrl"
                            :preview-src-list="contrast.fillingImgPreview"
                            :initial-index="0"
                            fit="contain"
                            @load="onImageLoad"
                        >
                            <template #error>
                                <div class="image-slot">
                                    <img src="/images/null-picture.png" />
                                </div>
                                <p class="image-tip">暂无图片</p>
                            </template>
                            <template #placeholder>
                                <div class="image-placeholder">正在加载...</div>
                            </template>
                        </el-image>
                    </div>
                </div>
                <div class="picture-container" v-if="currentTab !== 'MWR'">
                    <!-- <h2 class="title">{{title}}</h2> -->
                    <div class="picture">
                        <el-image
                            :src="imgUrl"
                            :preview-src-list="srcList"
                            :initial-index="0"
                            fit="contain"
                            @load="onImageLoad"
                        >
                            <template #error>
                                <div class="image-slot">
                                    <img src="/images/null-picture.png" />
                                </div>
                                <p class="image-tip">暂无图片</p>
                            </template>
                            <template #placeholder>
                                <div class="image-placeholder">正在加载...</div>
                            </template>
                        </el-image>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { onMounted, reactive, toRefs } from 'vue';
    import moment from "moment";
    import { MicrowaveRadiationConfig } from '../uilts/Config';
    import { post } from '../uilts/axios';
    
    export default {
        name: 'MicrowaveRadiation',
        setup() {
            let timer = null;
            let options = reactive({
                currentTab: 'MWR',
                currentRegion: 'jiangning',
                currentType: 'TEMP',
                currentElement: 'TEMP',
                currentCategory: 'CAPE',
                date: moment('2021-11-10').format('YYYY-MM-DD'),
                currentHour: '23',
                hours: [],
                times: [],
                days: [],
                currentTime: null,
                imgUrl: '/images/default-picture.png',
                downloadImgUrl: '/images/default-picture.png',
                srcList: [],
                isPlay: false,
                title: null,
                index: 0,
                downloadSrc: null,
                contrast: {
                    noQCImgUrl: '/images/picture.png',
                    noQCImgPreview: ['/images/picture.png'],
                    checkImgUrl: '/images/picture.png',
                    checkImgPreview: ['/images/picture.png'],
                    fillingImgUrl: '/images/picture.png',
                    fillingImgPreview: ['/images/picture.png']
                }
            })

            onMounted(() => {
                initHours();
                initDays();
                initTimeLine();
                setTimeout(() => {
                    activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute());
                }, 50);
            })
            
            const onTabClick = (name) => {
                options.currentTab = name;

                if (options.currentTab === 'MWR') {
                    options.currentElement = 'TEMP';
                    options.date = moment('2021-11-10').format('YYYY-MM-DD')
                }
                else {
                    options.date = moment('2021-12-05').format('YYYY-MM-DD');
                    if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY')
                        options.currentElement = 'TEMP';
                    else if (options.currentTab === 'shixu')
                        options.currentElement = 'CAPE';
                }

                

                cancelActive();
                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
            }

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

                cancelActive();
                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
            }

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

                cancelActive();
                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
            }

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

            const activeImage = (hour, minute) => {
                let time = moment(options.date).hour(hour).minute(minute);
                let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement);
                options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time);
                options.srcList = [options.imgUrl];
            }

            const onImageLoad = (event) => {
                if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
                    converToBase64(options.imgUrl);
                else
                    return
            }

            const onDownloadClick = () => {
                post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
                    if (response.error != 0){
                        console.log(response.message);
                        return;
                    }

                    fetch(response.data).then(res => {     
                        return res.blob();
                    }).then(blob => {
                        let reader = new FileReader(); 
                        reader.onloadend = function(){
                            options.downloadSrc = reader.result;
                            
                            setTimeout(() => {
                                document.getElementById("weboDownload").click();
                                options.downloadSrc = null;
                            }, 500);
                        };
                        reader.readAsDataURL(blob);
                    }).catch(console.error);
                })
            }

            const prepareParams = () => {
                return {
                    model: 'weibo',
                    station: options.currentRegion,
                    elementCode: options.currentType,
                    type: options.currentTab,
                    time: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"),
                    urls: prepareUrls()
                }
            }

            const prepareUrls = () => {
                let urls = [];
                for(let index = 0, len = options.times.length; index < len; index++){
                    let time = moment(options.times[index].date);
                    let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement);
                    urls.push(MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time));
                }

                return urls;
            }

            const converToBase64 = (path) => {
                let img = new Image();
                img.src = path;
                let canvas = document.createElement("canvas") as HTMLCanvasElement;
                canvas.width = img.width;
                canvas.height = img.height;

                let ctx = canvas.getContext("2d");
                let base64 = '';

                img.setAttribute("crossOrigin",'Anonymous')
                img.onload = function() {
                    ctx.drawImage(img, 0, 0);    
                    base64 = canvas.toDataURL("image/png");
                    options.downloadImgUrl = base64;
                };
            }

            const initTimeLine = () => {
                options.times = [];
                options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).minute(30).format('YYYY-MM-DD HH:mm');
                
                let now = moment(options.date).hour(parseInt(options.currentHour) - 2).minute(30);

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

                now.minute(now.minute() - 6);

                for (let i = 0; i < 21 ; 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')
                    });
                }
                options.index = options.times.length - 1;
            }

            const initDays = () => {
                options.days = [];
                options.currentTime = moment(options.date).format('YYYY-MM-DD');
                console.log(options.currentTime)

                let now = moment(options.date).add(1, 'day');

                for (let i = 0; i < 10 ; i++) {
                    options.days.push({
                        day: now.add(-1, 'day').format('DD'),
                        date: now.format('YYYY-MM-DD'),
                    })
                }

                options.days.reverse();
                options.index = options.times.length - 1;
            }

            const initHours = () => {
                for (let i = 0; i < 24; i++) {
                    options.hours.push({
                        value: i,
                        label: i < 10 ? '0' + i : i,
                    })
                }
            }

            const onTimeClick = (time, index) => {
                options.currentTime = time.date;
                options.index = index;
                cancelActive();
                activeImage(moment(time.date).hour(), moment(time.date).minute());
            }

            const onDayClick = (time, index) => {
                options.currentTime = time.date;
                options.index = index;
                cancelActive();
                activeImage(moment(time.date).hour(), moment(time.date).minute());
            }

            const cancelActive = () => {
                clearTimer();
                options.isPlay = false;
            }

            const onPrevDayClick = () => {
                options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');

                initTimeLine();
                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
            }

            const onNextDayClick = () => {
                options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');

                initTimeLine();
                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
            }

            const onPrevImgClick = () => {
                let element = getCurrentElement();

                options.index--;
                if (options.index < 0)
                    options.index = element.childElementCount - 1;

                setCurrentPlayElement(element);
            }
            
            const onNextImgClick = () => {
                let element = getCurrentElement();

                options.index++;
                if (options.index > element.childElementCount - 1)
                    options.index = 0;
                
                setCurrentPlayElement(element);
            }

            const onRefreshClick = () => {
                cancelActive();
                let element = getCurrentElement();;

                options.currentHour = '23';
                options.date = moment('2021-12-05').format('YYYY-MM-DD');
                options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm');

                activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute());
                element.children[options.times.length - 1].classList.add('active');
            }

            const onPlayClick = () => {
                options.isPlay = !options.isPlay;
                if (options.isPlay) {
                    timeExcute();
                } else {
                    clearTimer();
                }
            }

            const timeExcute = () => {
                clearTimer();

                let element = getCurrentElement();

                timer = setInterval( () => {
                    options.index++;
                    if (options.index > element.childElementCount - 1)
                        options.index = 0;

                    setCurrentPlayElement(element);
                }, 5000)
            }

            const clearTimer = () => {
                if (timer)
                    clearInterval(timer);
            }

            const getCurrentElement = () => {
                return document.querySelector('.times');
            }

            const setCurrentPlayElement = (element) => {
                for(let i = 0; i < element.childElementCount; i++)
                    element.children[i].classList.remove('active');

                element.children[options.index].classList.add('active');
                options.currentTime = options.times[options.index].date;
                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
            }

            const onChange = () => {
                initTimeLine();
                activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
            }

            return {
                ...toRefs(options),
                onTabClick,
                onRegionClick,
                onElementClick,
                onCategoryClick,
                onTimeClick,
                onDayClick,
                onPrevDayClick,
                onNextDayClick,
                onPrevImgClick,
                onNextImgClick,
                onRefreshClick,
                onPlayClick,
                onChange,
                onImageLoad,
                onDownloadClick
            }
        }
    }
</script>
<style lang="less" scoped>
    .main {
        .container {
            .contrast-picture-container {
                width: calc(~"100% - 2.5rem");
                margin: 0 auto;
                flex-direction: row;
                align-items: center;
                .picture {
                    flex-direction: column;
                    .title {
                        padding-bottom: 0;
                        font-size: 0.22rem;
                    }
                }
            }
        }
    }
</style>