|
|
|
@ -4,17 +4,17 @@ |
|
|
|
垂直廓线 |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'kuoxian'" /> |
|
|
|
</div> |
|
|
|
<div class="tab-item" @click="onTabClick('对流指数')" :class="{'active': currentTab === '对流指数'}"> |
|
|
|
<div class="tab-item" @click="onTabClick('shixu')" :class="{'active': currentTab === 'shixu'}"> |
|
|
|
对流指数 |
|
|
|
<img src="/images/line.png" v-if="currentTab === '对流指数'" /> |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'shixu'" /> |
|
|
|
</div> |
|
|
|
<div class="tab-item" @click="onTabClick('T-logP图')" :class="{'active': currentTab === 'T-logP图'}"> |
|
|
|
<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图'" /> |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'T-logP'" /> |
|
|
|
</div> |
|
|
|
<div class="tab-item" @click="onTabClick('BP反演产品')" :class="{'active': currentTab === 'BP反演产品'}"> |
|
|
|
<div class="tab-item" @click="onTabClick('BPFY')" :class="{'active': currentTab === 'BPFY'}"> |
|
|
|
BP反演产品 |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'BP反演产品'" /> |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'BPFY'" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main"> |
|
|
|
@ -29,18 +29,13 @@ |
|
|
|
<el-col :span="8"><span @click="onRegionClick('lishui')" :class="{'active': currentRegion === 'lishui'}">溧水</span></el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<div class="menu-item" v-if="currentTab === 'kuoxian'"> |
|
|
|
<div class="menu-item" v-if="currentTab === 'kuoxian' || currentTab === 'shixu'"> |
|
|
|
<h2 class="tip">要素选择</h2> |
|
|
|
<el-row :gutter="12"> |
|
|
|
<el-col :span="8"><span @click="onElementClick('TEMP')" :class="{'active': currentElement === 'TEMP'}">温度</span></el-col> |
|
|
|
<el-col :span="8"><span @click="onElementClick('RH')" :class="{'active': currentElement === 'RH'}">湿度</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-col :span="8" v-if="currentTab === 'kuoxian'"><span @click="onElementClick('TEMPERATURE', 'TEMP')" :class="{'active': currentElement === 'TEMPERATURE'}">温度</span></el-col> |
|
|
|
<el-col :span="8" v-if="currentTab === 'kuoxian'"><span @click="onElementClick('HUMIDITY', 'RH')" :class="{'active': currentElement === 'HUMIDITY'}">湿度</span></el-col> |
|
|
|
<el-col :span="8" v-if="currentTab === 'shixu'"><span @click="onElementClick('CAPE时序图', 'CAPE')" :class="{'active': currentElement === 'CAPE时序图'}">CAPE</span></el-col> |
|
|
|
<el-col :span="8" v-if="currentTab === 'shixu'"><span @click="onElementClick('CIN时序图', 'CIN')" :class="{'active': currentElement === 'CIN时序图'}">CIN</span></el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -49,16 +44,16 @@ |
|
|
|
<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> |
|
|
|
<span class="minute" @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="onDateChange"> |
|
|
|
<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="onHourChange"> |
|
|
|
<el-select v-model="currentHour" placeholder="" @change="onChange"> |
|
|
|
<el-option |
|
|
|
v-for="item in hours" |
|
|
|
:key="item.value" |
|
|
|
@ -68,11 +63,11 @@ |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<p class="unit">时</p> |
|
|
|
<div class="refresh-btn"> |
|
|
|
<div class="refresh-btn" @click="onRefreshClick"> |
|
|
|
<img src="/images/refresh.png" /> |
|
|
|
</div> |
|
|
|
<div class="btns-group"> |
|
|
|
<span>播放动画</span> |
|
|
|
<span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span> |
|
|
|
<span>下载动画</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -80,15 +75,23 @@ |
|
|
|
<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> |
|
|
|
<span class="save-btn"><img src="/images/save.png" /></span> |
|
|
|
<h2 class="title">{{title}}</h2> |
|
|
|
<div class="picture"> |
|
|
|
<el-image |
|
|
|
:src="imgUrl" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
<div class="picture-container"> |
|
|
|
<h2 class="title">{{title}}</h2> |
|
|
|
<div class="picture"> |
|
|
|
<el-image |
|
|
|
:src="imgUrl" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="0" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
<template #error> |
|
|
|
<div class="image-slot"> |
|
|
|
<img src="/images/null-picture.png" /> |
|
|
|
</div> |
|
|
|
<p class="image-tip">暂无图片</p> |
|
|
|
</template> |
|
|
|
</el-image> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -103,40 +106,70 @@ |
|
|
|
export default { |
|
|
|
name: 'MicrowaveRadiation', |
|
|
|
setup() { |
|
|
|
let timer = null; |
|
|
|
let options = reactive({ |
|
|
|
currentTab: 'kuoxian', |
|
|
|
currentRegion: 'jiangning', |
|
|
|
currentElement: 'TEMP', |
|
|
|
currentType: 'TEMP', |
|
|
|
currentElement: 'TEMPERATURE', |
|
|
|
currentCategory: 'CAPE', |
|
|
|
date: moment().format('YYYY-MM-DD'), |
|
|
|
date: moment('2020-07-01').format('YYYY-MM-DD'), |
|
|
|
currentHour: '10', |
|
|
|
hours: [], |
|
|
|
times: [], |
|
|
|
currentTime: null, |
|
|
|
imgUrl: null, |
|
|
|
srcList: ['/images/picture.png'], |
|
|
|
srcList: [], |
|
|
|
isPlay: false, |
|
|
|
title: null, |
|
|
|
test: [] |
|
|
|
index: 0 |
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
initHours(); |
|
|
|
initTimeLine(); |
|
|
|
activeImage(); |
|
|
|
setTitle(moment(options.date, 'YYYY-MM-DD').hour(parseInt(options.currentHour))) |
|
|
|
setTitle(moment(options.date, 'YYYY-MM-DD').hour(parseInt(options.currentHour))); |
|
|
|
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 === 'kuoxian') { |
|
|
|
options.currentType = 'TEMP'; |
|
|
|
options.currentElement = 'TEMPERATURE'; |
|
|
|
} else if (options.currentTab === 'shixu') { |
|
|
|
options.currentType = 'CAPE'; |
|
|
|
options.currentElement = 'CAPE时序图'; |
|
|
|
} else if (options.currentTab === 'T-logP') { |
|
|
|
options.currentType = 'T-logP'; |
|
|
|
options.currentElement = 'T-logP'; |
|
|
|
} else { |
|
|
|
options.currentType = 'BPFY'; |
|
|
|
options.currentElement = 'BPFY'; |
|
|
|
} |
|
|
|
|
|
|
|
cancelActive(); |
|
|
|
setTitle(moment(options.date).hour(parseInt(options.currentHour))); |
|
|
|
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); |
|
|
|
} |
|
|
|
|
|
|
|
const onRegionClick = (region) => { |
|
|
|
options.currentRegion = region; |
|
|
|
|
|
|
|
cancelActive(); |
|
|
|
setTitle(moment(options.date).hour(parseInt(options.currentHour))); |
|
|
|
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); |
|
|
|
} |
|
|
|
|
|
|
|
const onElementClick = (element) => { |
|
|
|
const onElementClick = (element, type) => { |
|
|
|
options.currentElement = element; |
|
|
|
options.currentType = type; |
|
|
|
|
|
|
|
cancelActive(); |
|
|
|
setTitle(moment(options.date).hour(parseInt(options.currentHour))); |
|
|
|
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); |
|
|
|
} |
|
|
|
|
|
|
|
const onCategoryClick = (category) => { |
|
|
|
@ -144,14 +177,14 @@ |
|
|
|
} |
|
|
|
|
|
|
|
const setTitle = (date) => { |
|
|
|
console.log(date) |
|
|
|
options.title = date.format('YYYY.MM.DD HH:mm') + ' ' + options.currentElement; |
|
|
|
} |
|
|
|
|
|
|
|
const activeImage = () => { |
|
|
|
console.log(MicrowaveRadiationConfig.getUrl("jingning", "kuoxian_TEMP", moment())); |
|
|
|
options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_' + options.currentElement, moment(options.date).hour(parseInt(options.currentHour)).minute(0)); |
|
|
|
console.log(options.imgUrl) |
|
|
|
const activeImage = (hour, minute) => { |
|
|
|
let time = moment(options.date).hour(hour).minute(minute); |
|
|
|
let type = (options.currentTab === 'T-logP' || options.currentTab === 'BPFY') ? options.currentTab : (options.currentTab + '_' + options.currentType); |
|
|
|
options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time); |
|
|
|
options.srcList = [options.imgUrl]; |
|
|
|
} |
|
|
|
|
|
|
|
const initTimeLine = () => { |
|
|
|
@ -176,6 +209,7 @@ |
|
|
|
name: 'hour' + now.format('HH') |
|
|
|
}); |
|
|
|
} |
|
|
|
options.index = options.times.length - 1; |
|
|
|
} |
|
|
|
|
|
|
|
const initHours = () => { |
|
|
|
@ -187,10 +221,17 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const onTimeClick = (time) => { |
|
|
|
const onTimeClick = (time, index) => { |
|
|
|
options.currentTime = time.date; |
|
|
|
options.index = index; |
|
|
|
cancelActive(); |
|
|
|
setTitle(moment(time.date, 'YYYY-MM-DD HH:mm')); |
|
|
|
activeImage(); |
|
|
|
activeImage(moment(time.date).hour(), moment(time.date).minute()); |
|
|
|
} |
|
|
|
|
|
|
|
const cancelActive = () => { |
|
|
|
clearTimer(); |
|
|
|
options.isPlay = false; |
|
|
|
} |
|
|
|
|
|
|
|
const onPrevDayClick = () => { |
|
|
|
@ -202,21 +243,78 @@ |
|
|
|
} |
|
|
|
|
|
|
|
const onPrevImgClick = () => { |
|
|
|
console.log(options.index); |
|
|
|
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 onHourChange = () => { |
|
|
|
initTimeLine(); |
|
|
|
setTitle(moment(options.date).hour(parseInt(options.currentHour))); |
|
|
|
const onRefreshClick = () => { |
|
|
|
cancelActive(); |
|
|
|
options.date = moment('2020-07-01').format('YYYY-MM-DD'); |
|
|
|
options.currentHour = '10'; |
|
|
|
} |
|
|
|
|
|
|
|
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); |
|
|
|
}, 2000) |
|
|
|
} |
|
|
|
|
|
|
|
const onDateChange = () => { |
|
|
|
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; |
|
|
|
setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD HH:mm')); |
|
|
|
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); |
|
|
|
} |
|
|
|
|
|
|
|
const onChange = () => { |
|
|
|
initTimeLine(); |
|
|
|
setTitle(moment(options.date).hour(parseInt(options.currentHour))); |
|
|
|
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); |
|
|
|
} |
|
|
|
|
|
|
|
return { |
|
|
|
@ -230,8 +328,9 @@ |
|
|
|
onNextDayClick, |
|
|
|
onPrevImgClick, |
|
|
|
onNextImgClick, |
|
|
|
onHourChange, |
|
|
|
onDateChange |
|
|
|
onRefreshClick, |
|
|
|
onPlayClick, |
|
|
|
onChange |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -239,4 +338,3 @@ |
|
|
|
<style lang="less" scoped> |
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
hehongxing
3 years ago
