8 changed files with 355 additions and 74 deletions
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 91 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 686 B |
@ -0,0 +1,184 @@ |
|||
<template> |
|||
<div class="tabs"> |
|||
<div class="tab-item" @click="onTabClick('垂直廓线')" :class="{'active': currentTab === '垂直廓线'}"> |
|||
垂直廓线 |
|||
<img src="/images/line.png" v-if="currentTab === '垂直廓线'" /> |
|||
</div> |
|||
<div class="tab-item" @click="onTabClick('对流指数')" :class="{'active': currentTab === '对流指数'}"> |
|||
对流指数 |
|||
<img src="/images/line.png" v-if="currentTab === '对流指数'" /> |
|||
</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('BP反演产品')" :class="{'active': currentTab === 'BP反演产品'}"> |
|||
BP反演产品 |
|||
<img src="/images/line.png" v-if="currentTab === 'BP反演产品'" /> |
|||
</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('江宁')" :class="{'active': currentRegion === '江宁'}">江宁</span></el-col> |
|||
<el-col :span="8"><span @click="onRegionClick('六合')" :class="{'active': currentRegion === '六合'}">六合</span></el-col> |
|||
<el-col :span="8"><span @click="onRegionClick('浦口')" :class="{'active': currentRegion === '浦口'}">浦口</span></el-col> |
|||
<el-col :span="8"><span @click="onRegionClick('高淳')" :class="{'active': currentRegion === '高淳'}">高淳</span></el-col> |
|||
<el-col :span="8"><span @click="onRegionClick('溧水')" :class="{'active': currentRegion === '溧水'}">溧水</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="onElementClick('温度')" :class="{'active': currentElement === '温度'}">温度</span></el-col> |
|||
<el-col :span="8"><span @click="onElementClick('湿度')" :class="{'active': currentElement === '湿度'}">湿度</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-row> |
|||
</div> |
|||
</div> |
|||
<div class="container panel"> |
|||
<div class="toolbar"> |
|||
<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> |
|||
</div> |
|||
</div> |
|||
<el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker"> |
|||
</el-date-picker> |
|||
<div class="control-btn"> |
|||
<span><img src="/images/prev.png" /></span> |
|||
<span><img src="/images/next.png" /></span> |
|||
</div> |
|||
<el-select v-model="currentHour" placeholder=""> |
|||
<el-option |
|||
v-for="item in hours" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<p class="unit">时</p> |
|||
<div class="refresh-btn"> |
|||
<img src="/images/refresh.png" /> |
|||
</div> |
|||
<div class="btns-group"> |
|||
<span>播放动画</span> |
|||
<span>下载动画</span> |
|||
</div> |
|||
</div> |
|||
<div class="picture-view"> |
|||
<span class="arrow arrow-prev"><img src="/images/prev-btn.png" /></span> |
|||
<span class="arrow arrow-next"><img src="/images/next-btn.png" /></span> |
|||
<span class="save-btn"><img src="/images/save.png" /></span> |
|||
<h2 class="title">2021.11.21 10:42 Temperature</h2> |
|||
<div class="picture"> |
|||
<el-image |
|||
src="/images/picture.png" |
|||
:preview-src-list="srcList" |
|||
:initial-index="1" |
|||
fit="contain" |
|||
> |
|||
</el-image> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { onMounted, reactive, toRefs } from 'vue'; |
|||
import moment from "moment"; |
|||
|
|||
export default { |
|||
name: 'RamanLidar', |
|||
setup() { |
|||
let options = reactive({ |
|||
currentTab: '垂直廓线', |
|||
currentRegion: '江宁', |
|||
currentElement: '温度', |
|||
currentCategory: 'CAPE', |
|||
date: new Date(), |
|||
currentHour: '10', |
|||
hours: [{ |
|||
value: '10', |
|||
label: '10' |
|||
}, { |
|||
value: '11', |
|||
label: '11' |
|||
}], |
|||
times: [], |
|||
currentTime: null, |
|||
srcList: ['/images/picture.png'] |
|||
}) |
|||
|
|||
onMounted(() => { |
|||
initTimes(); |
|||
}) |
|||
|
|||
const onTabClick = (name) => { |
|||
options.currentTab = name; |
|||
} |
|||
|
|||
const onRegionClick = (region) => { |
|||
options.currentRegion = region; |
|||
} |
|||
|
|||
const onElementClick = (element) => { |
|||
options.currentElement = element; |
|||
} |
|||
|
|||
const onCategoryClick = (category) => { |
|||
options.currentCategory = category; |
|||
} |
|||
|
|||
const initTimes = () => { |
|||
let now = moment(); |
|||
let minute = now.minute(); |
|||
const remainder = minute % 6; |
|||
if (remainder > 0){ |
|||
now.minute(minute + (6 - remainder)); |
|||
} |
|||
|
|||
options.currentTime = now.format('YYYY-MM-DD HH:mm'); |
|||
now.minute(now.minute() - 6); |
|||
|
|||
for (let i = 0; i < 20 ; 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') |
|||
}); |
|||
} |
|||
} |
|||
|
|||
const onTimeClick = (time) => { |
|||
console.log(time.date) |
|||
options.currentTime = time.date; |
|||
console.log(options.currentTime) |
|||
} |
|||
|
|||
return { |
|||
...toRefs(options), |
|||
onTabClick, |
|||
onRegionClick, |
|||
onElementClick, |
|||
onCategoryClick, |
|||
onTimeClick |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue