hehongxing
3 years ago
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