对流指数
- 
+
-
+
+
-
+
-
+
-
@@ -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 @@
-
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 15fbe96..070d7aa 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -5,18 +5,18 @@
T-logP图
-
+
-
+
+
BP反演产品
-
+
+
@@ -29,18 +29,13 @@
溧水
-
@@ -49,16 +44,16 @@
{{time.hour}}
- {{time.minute}}
+ {{time.minute}}
时
-
+
@@ -80,15 +75,23 @@
- 播放动画
+ {{isPlay ? '暂停动画' : '播放动画'}}
下载动画
- {{title}}
-
-
-
+
+
{{title}}
+
+
+
+
+
+ 
+
+
+ 暂无图片
+ +