|
|
@ -12,30 +12,27 @@ |
|
|
|
T-logP图 |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'T-logP'" /> |
|
|
|
</div> |
|
|
|
<div class="tab-item" @click="onTabClick('BPFY')" :class="{'active': currentTab === 'BPFY'}"> |
|
|
|
<div class="tab-item" @click="onTabClick('shixu_BPFY')" :class="{'active': currentTab === 'shixu_BPFY'}"> |
|
|
|
BP反演产品 |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'BPFY'" /> |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'shixu_BPFY'" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div><!-- kuoxian_TEMP_202112051836 --> |
|
|
|
<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-col :span="8"><span @click="onRegionClick('liuhe')" :class="{'active': currentRegion === 'liuhe'}">六合</span></el-col> |
|
|
|
<el-col :span="8"><span @click="onRegionClick('pukou')" :class="{'active': currentRegion === 'pukou'}">浦口</span></el-col> |
|
|
|
<el-col :span="8"><span @click="onRegionClick('gaochun')" :class="{'active': currentRegion === 'gaochun'}">高淳</span></el-col> |
|
|
|
<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' || currentTab === 'shixu'"> |
|
|
|
<div class="menu-item" v-if="currentTab === 'kuoxian' || currentTab === 'shixu' || currentTab === 'shixu_BPFY'"> |
|
|
|
<h2 class="tip">要素选择</h2> |
|
|
|
<el-row :gutter="12"> |
|
|
|
<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-col :span="8" v-if="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> |
|
|
@ -77,7 +74,7 @@ |
|
|
|
<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"> |
|
|
|
<h2 class="title">{{title}}</h2> |
|
|
|
<!-- <h2 class="title">{{title}}</h2> --> |
|
|
|
<div class="picture"> |
|
|
|
<el-image |
|
|
|
:src="imgUrl" |
|
|
@ -117,10 +114,10 @@ import { post } from '../uilts/axios'; |
|
|
|
currentTab: 'kuoxian', |
|
|
|
currentRegion: 'jiangning', |
|
|
|
currentType: 'TEMP', |
|
|
|
currentElement: 'TEMPERATURE', |
|
|
|
currentElement: 'TEMP', |
|
|
|
currentCategory: 'CAPE', |
|
|
|
date: moment('2021-11-01').format('YYYY-MM-DD'), |
|
|
|
currentHour: '10', |
|
|
|
date: moment('2021-12-05').format('YYYY-MM-DD'), |
|
|
|
currentHour: '23', |
|
|
|
hours: [], |
|
|
|
times: [], |
|
|
|
currentTime: null, |
|
|
@ -136,30 +133,16 @@ import { post } from '../uilts/axios'; |
|
|
|
onMounted(() => { |
|
|
|
initHours(); |
|
|
|
initTimeLine(); |
|
|
|
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'; |
|
|
|
} |
|
|
|
if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') |
|
|
|
options.currentElement = 'TEMP'; |
|
|
|
else if (options.currentTab === 'shixu') |
|
|
|
options.currentElement = 'CAPE'; |
|
|
|
|
|
|
|
cancelActive(); |
|
|
|
setTitle(moment(options.date).hour(parseInt(options.currentHour))); |
|
|
|
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); |
|
|
|
} |
|
|
|
|
|
|
@ -167,16 +150,13 @@ import { post } from '../uilts/axios'; |
|
|
|
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, type) => { |
|
|
|
const onElementClick = (element) => { |
|
|
|
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()); |
|
|
|
} |
|
|
|
|
|
|
@ -184,13 +164,9 @@ import { post } from '../uilts/axios'; |
|
|
|
options.currentCategory = category; |
|
|
|
} |
|
|
|
|
|
|
|
const setTitle = (date) => { |
|
|
|
options.title = date.format('YYYY.MM.DD HH:mm') + ' ' + options.currentElement; |
|
|
|
} |
|
|
|
|
|
|
|
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); |
|
|
|
let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement); |
|
|
|
options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time); |
|
|
|
options.srcList = [options.imgUrl]; |
|
|
|
} |
|
|
@ -241,7 +217,7 @@ import { post } from '../uilts/axios'; |
|
|
|
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 === 'BPFY') ? options.currentTab : (options.currentTab + '_' + options.currentType); |
|
|
|
let type = options.currentTab + '_' + options.currentType; |
|
|
|
urls.push(MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time)); |
|
|
|
} |
|
|
|
|
|
|
@ -268,9 +244,9 @@ import { post } from '../uilts/axios'; |
|
|
|
|
|
|
|
const initTimeLine = () => { |
|
|
|
options.times = []; |
|
|
|
options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm'); |
|
|
|
|
|
|
|
let now = moment(options.date).hour(parseInt(options.currentHour) - 2); |
|
|
|
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; |
|
|
@ -292,7 +268,7 @@ import { post } from '../uilts/axios'; |
|
|
|
} |
|
|
|
|
|
|
|
const initHours = () => { |
|
|
|
for (let i = 0; i < 23; i++) { |
|
|
|
for (let i = 0; i < 24; i++) { |
|
|
|
options.hours.push({ |
|
|
|
value: i, |
|
|
|
label: i < 10 ? '0' + i : i, |
|
|
@ -304,7 +280,6 @@ import { post } from '../uilts/axios'; |
|
|
|
options.currentTime = time.date; |
|
|
|
options.index = index; |
|
|
|
cancelActive(); |
|
|
|
setTitle(moment(time.date, 'YYYY-MM-DD HH:mm')); |
|
|
|
activeImage(moment(time.date).hour(), moment(time.date).minute()); |
|
|
|
} |
|
|
|
|
|
|
@ -314,11 +289,17 @@ import { post } from '../uilts/axios'; |
|
|
|
} |
|
|
|
|
|
|
|
const onPrevDayClick = () => { |
|
|
|
options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD') |
|
|
|
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') |
|
|
|
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 = () => { |
|
|
@ -345,11 +326,10 @@ import { post } from '../uilts/axios'; |
|
|
|
cancelActive(); |
|
|
|
let element = getCurrentElement();; |
|
|
|
|
|
|
|
options.currentHour = '10'; |
|
|
|
options.date = moment('2021-11-01').format('YYYY-MM-DD'); |
|
|
|
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'); |
|
|
|
|
|
|
|
setTitle(moment(options.currentTime, 'YYYY-MM-DD HH:mm')); |
|
|
|
activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute()); |
|
|
|
element.children[options.times.length - 1].classList.add('active'); |
|
|
|
} |
|
|
@ -392,13 +372,11 @@ import { post } from '../uilts/axios'; |
|
|
|
|
|
|
|
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()); |
|
|
|
} |
|
|
|
|
|
|
|