|
|
|
@ -29,30 +29,46 @@ |
|
|
|
<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> |
|
|
|
<div class="menu-item" > |
|
|
|
<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-col :span="8" ><span @click="onElementClick('six-minute')" :class="{'active': currentElement === 'six-minute'}">6分钟</span></el-col> |
|
|
|
<el-col :span="8" ><span @click="onElementClick('half-hour')" :class="{'active': currentElement === 'half-hour'}">30分钟</span></el-col> |
|
|
|
<el-col :span="8" ><span @click="onElementClick('one-hour')" :class="{'active': currentElement === 'one-hour'}">1小时</span></el-col> |
|
|
|
<!-- <el-col :span="8" ><span @click="onElementClick('CAPE')" :class="{'active': currentElement === 'CAPE'}">CAPE</span></el-col>--> |
|
|
|
<!-- <el-col :span="8" ><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 class="toolbar"> |
|
|
|
|
|
|
|
|
|
|
|
<!--6分钟--> |
|
|
|
<div class="times" v-if="currentElement === 'six-minute'"> |
|
|
|
<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> |
|
|
|
<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'}"> |
|
|
|
|
|
|
|
<!--30分钟--> |
|
|
|
<div class="times halfHour" v-if="currentElement === 'half-hour'"> |
|
|
|
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}"> |
|
|
|
<span class="hour ">{{time.hour}}</span> |
|
|
|
<span class="time" @click="onTimeClick(time, index)">{{time.minute}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--1小时--> |
|
|
|
<div class="times oneHour" v-if="currentElement === 'one-hour'"> |
|
|
|
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}"> |
|
|
|
<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"> |
|
|
|
@ -187,10 +203,11 @@ |
|
|
|
let timer = null; |
|
|
|
|
|
|
|
let options = reactive({ |
|
|
|
selectionTime: 6, |
|
|
|
currentTab: 'MWR', |
|
|
|
currentRegion: 'jiangning', |
|
|
|
currentType: 'TEMP', |
|
|
|
currentElement: 'TEMP', |
|
|
|
currentElement: 'six-minute', |
|
|
|
currentCategory: 'CAPE', |
|
|
|
date: moment('2021-11-10').format('YYYY-MM-DD'), |
|
|
|
currentHour: '23', |
|
|
|
@ -214,30 +231,43 @@ |
|
|
|
fillingImgPreview: ['/images/picture.png'] |
|
|
|
}, |
|
|
|
urls: [] |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
initTimeLine() |
|
|
|
initHours(); |
|
|
|
initDays(); |
|
|
|
setTimeout(() => activeContrastImage(), 50); |
|
|
|
setTimeout(() => { |
|
|
|
changeColor() |
|
|
|
},0) |
|
|
|
}) |
|
|
|
|
|
|
|
// const onTabClick = (name) => { |
|
|
|
// options.currentTab = name; |
|
|
|
// options.currentElement = 'six-minute' |
|
|
|
// if (options.currentTab === 'MWR') { |
|
|
|
// |
|
|
|
// } |
|
|
|
// cancelActive(); |
|
|
|
// } |
|
|
|
|
|
|
|
const onTabClick = (name) => { |
|
|
|
options.currentTab = name; |
|
|
|
|
|
|
|
options.currentElement = 'six-minute' |
|
|
|
if (options.currentTab === 'MWR') { |
|
|
|
options.date = moment('2021-11-10').format('YYYY-MM-DD'); |
|
|
|
options.currentElement = 'TEMP'; |
|
|
|
// options.currentElement = 'TEMP'; |
|
|
|
options.index = options.days.length - 1; |
|
|
|
|
|
|
|
initDays(); |
|
|
|
// initDays(); |
|
|
|
setTimeout(() => activeContrastImage(), 50) |
|
|
|
} else { |
|
|
|
if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') |
|
|
|
options.currentElement = 'TEMP'; |
|
|
|
if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') { |
|
|
|
// options.currentElement = 'TEMP'; |
|
|
|
setTimeout(()=>changeColor(),100) ; |
|
|
|
} |
|
|
|
else if (options.currentTab === 'shixu') { |
|
|
|
options.date = moment('2021-12-04').format('YYYY-MM-DD'); |
|
|
|
options.currentElement = 'CAPE'; |
|
|
|
// options.currentElement = 'CAPE'; |
|
|
|
} |
|
|
|
|
|
|
|
options.date = moment('2021-12-05').format('YYYY-MM-DD'); |
|
|
|
@ -245,30 +275,26 @@ |
|
|
|
|
|
|
|
if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') { |
|
|
|
options.date = moment('2021-12-04').format('YYYY-MM-DD'); |
|
|
|
options.currentElement = 'TEMP'; |
|
|
|
// options.currentElement = 'TEMP'; |
|
|
|
options.currentHour = '23'; |
|
|
|
} else if (options.currentTab === 'shixu') { |
|
|
|
options.date = moment('2021-12-04').format('YYYY-MM-DD'); |
|
|
|
options.currentElement = 'CAPE'; |
|
|
|
// options.currentElement = 'CAPE'; |
|
|
|
options.currentHour = '23'; |
|
|
|
} else if (options.currentTab === 'T-logP') { |
|
|
|
options.date = moment('2021-12-05').format('YYYY-MM-DD'); |
|
|
|
options.currentElement = 'TEMP'; |
|
|
|
// options.currentElement = 'TEMP'; |
|
|
|
options.currentHour = '16'; |
|
|
|
} |
|
|
|
|
|
|
|
initTimeLine(); |
|
|
|
setTimeout(() => activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute()), 50) |
|
|
|
} |
|
|
|
|
|
|
|
cancelActive(); |
|
|
|
} |
|
|
|
|
|
|
|
const onRegionClick = (region) => { |
|
|
|
options.currentRegion = region; |
|
|
|
|
|
|
|
cancelActive(); |
|
|
|
|
|
|
|
if (options.currentTab === 'MWR') |
|
|
|
activeContrastImage(); |
|
|
|
else |
|
|
|
@ -277,13 +303,17 @@ |
|
|
|
|
|
|
|
const onElementClick = (element) => { |
|
|
|
options.currentElement = element; |
|
|
|
|
|
|
|
initTimeLine() |
|
|
|
cancelActive(); |
|
|
|
|
|
|
|
if (options.currentTab === 'MWR') |
|
|
|
activeContrastImage(); |
|
|
|
else |
|
|
|
activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); |
|
|
|
if (element === 'six-minute') { |
|
|
|
setTimeout(() => { |
|
|
|
changeColor() |
|
|
|
},0) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const activeContrastImage = () => { |
|
|
|
@ -312,10 +342,8 @@ |
|
|
|
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 => { |
|
|
|
@ -352,7 +380,6 @@ |
|
|
|
let type = options.currentTab === 'T-logP' ? options.currentTab : (options.currentTab + '_' + options.currentElement); |
|
|
|
urls.push(MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time)); |
|
|
|
} |
|
|
|
|
|
|
|
return urls; |
|
|
|
} |
|
|
|
|
|
|
|
@ -366,7 +393,6 @@ |
|
|
|
MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', time) |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
return urls; |
|
|
|
} |
|
|
|
|
|
|
|
@ -390,21 +416,25 @@ |
|
|
|
|
|
|
|
const initTimeLine = () => { |
|
|
|
options.times = []; |
|
|
|
options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentTab === 'T-logP' ? 0 : 30).format('YYYY-MM-DD HH:mm'); |
|
|
|
|
|
|
|
let now = moment(options.date).hour(parseInt(options.currentHour) - 2).minute(options.currentTab === 'T-logP' ? 0 : 30); |
|
|
|
|
|
|
|
options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'one-hour' ? 0 : 30).format('YYYY-MM-DD HH:mm'); |
|
|
|
let now = moment(options.date).hour(parseInt(options.currentHour) - 2).minute(36); |
|
|
|
let minute = now.minute(); |
|
|
|
const remainder = minute % 6; |
|
|
|
|
|
|
|
if (options. currentElement === 'six-minute') { |
|
|
|
options.selectionTime = 6 |
|
|
|
} |
|
|
|
else if (options. currentElement === 'half-hour') |
|
|
|
options.selectionTime = 30 |
|
|
|
else |
|
|
|
options.selectionTime = 60 |
|
|
|
const remainder = minute % options.selectionTime; |
|
|
|
if (remainder > 0){ |
|
|
|
now.minute(minute + (6 - remainder)); |
|
|
|
now.minute(minute + ( options.selectionTime - remainder)); |
|
|
|
} |
|
|
|
|
|
|
|
now.minute(now.minute() - 6); |
|
|
|
|
|
|
|
for (let i = 0; i < 21 ; i++) { |
|
|
|
now.minute(now.minute() - options.selectionTime); |
|
|
|
for (let i = 0; i < 22 ; i++) { |
|
|
|
options.times.push({ |
|
|
|
hour: now.add(6, 'minute').format('HH时'), |
|
|
|
hour: now.add( options.selectionTime, 'minute').format('HH时'), |
|
|
|
minute: now.format('mm'), |
|
|
|
date: now.format('YYYY-MM-DD HH:mm') |
|
|
|
}); |
|
|
|
@ -412,22 +442,22 @@ |
|
|
|
options.index = options.times.length - 1; |
|
|
|
} |
|
|
|
|
|
|
|
const initDays = () => { |
|
|
|
options.days = []; |
|
|
|
options.currentTime = moment(options.date).format('YYYY-MM-DD'); |
|
|
|
|
|
|
|
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.days.length - 1; |
|
|
|
} |
|
|
|
// const initDays = () => { |
|
|
|
// options.days = []; |
|
|
|
// options.currentTime = moment(options.date).format('YYYY-MM-DD'); |
|
|
|
// |
|
|
|
// 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.days.length - 1; |
|
|
|
// } |
|
|
|
|
|
|
|
const initHours = () => { |
|
|
|
for (let i = 0; i < 24; i++) { |
|
|
|
@ -445,12 +475,12 @@ |
|
|
|
activeImage(moment(time.date).hour(), moment(time.date).minute()); |
|
|
|
} |
|
|
|
|
|
|
|
const onDayClick = (time, index) => { |
|
|
|
options.currentTime = time.date; |
|
|
|
options.index = index; |
|
|
|
cancelActive(); |
|
|
|
activeContrastImage(); |
|
|
|
} |
|
|
|
// const onDayClick = (time, index) => { |
|
|
|
// options.currentTime = time.date; |
|
|
|
// options.index = index; |
|
|
|
// cancelActive(); |
|
|
|
// activeContrastImage(); |
|
|
|
// } |
|
|
|
|
|
|
|
const cancelActive = () => { |
|
|
|
clearTimer(); |
|
|
|
@ -501,7 +531,6 @@ |
|
|
|
options.date = moment('2021-11-10').format('YYYY-MM-DD'); |
|
|
|
options.currentTime = options.date; |
|
|
|
element.children[options.days.length - 1].classList.add('active'); |
|
|
|
|
|
|
|
activeContrastImage(); |
|
|
|
} else { |
|
|
|
options.currentHour = '23'; |
|
|
|
@ -533,7 +562,7 @@ |
|
|
|
options.index = 0; |
|
|
|
|
|
|
|
setCurrentPlayElement(element); |
|
|
|
}, 3000) |
|
|
|
}, 2000) |
|
|
|
} |
|
|
|
|
|
|
|
const clearTimer = () => { |
|
|
|
@ -563,7 +592,7 @@ |
|
|
|
|
|
|
|
const onChange = () => { |
|
|
|
if(options.currentTab === 'MWR') { |
|
|
|
initDays(); |
|
|
|
// initDays(); |
|
|
|
activeContrastImage(); |
|
|
|
} else { |
|
|
|
initTimeLine(); |
|
|
|
@ -599,13 +628,25 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const changeColor = () => { |
|
|
|
let timeLine = document.querySelectorAll('.time-item') |
|
|
|
timeLine.forEach((item :any, index) => { |
|
|
|
if( index >= 5 && index <= 14) { |
|
|
|
const spanTimeColor = item.querySelector('.time') |
|
|
|
spanTimeColor.style.backgroundColor = '#CDDAF6' |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
|
...toRefs(options), |
|
|
|
onTabClick, |
|
|
|
onRegionClick, |
|
|
|
onElementClick, |
|
|
|
onTimeClick, |
|
|
|
onDayClick, |
|
|
|
// onDayClick, |
|
|
|
onPrevDayClick, |
|
|
|
onNextDayClick, |
|
|
|
onPrevImgClick, |
|
|
|
@ -615,7 +656,8 @@ |
|
|
|
onChange, |
|
|
|
onImageLoad, |
|
|
|
onDownloadClick, |
|
|
|
onSaveClick |
|
|
|
onSaveClick, |
|
|
|
changeColor |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -626,10 +668,17 @@ |
|
|
|
.contrast-picture-container { |
|
|
|
width: calc(~"100% - 2.5rem"); |
|
|
|
margin: 0 auto; |
|
|
|
flex-direction: row; |
|
|
|
align-items: center; |
|
|
|
.picture { |
|
|
|
width: 100%; |
|
|
|
flex-direction: column; |
|
|
|
:deep(.el-image) { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
:deep(.el-image__inner) { |
|
|
|
width: 100%; |
|
|
|
transform: scaleX(4.5); |
|
|
|
} |
|
|
|
.title { |
|
|
|
padding-bottom: 0; |
|
|
|
font-size: 0.22rem; |
|
|
|
|
