diff --git a/04.系统编码/Frontend/public/images/next-btn.png b/04.系统编码/Frontend/public/images/next-btn.png new file mode 100644 index 0000000..c56b69b Binary files /dev/null and b/04.系统编码/Frontend/public/images/next-btn.png differ diff --git a/04.系统编码/Frontend/public/images/picture.png b/04.系统编码/Frontend/public/images/picture.png new file mode 100644 index 0000000..29ac1da Binary files /dev/null and b/04.系统编码/Frontend/public/images/picture.png differ diff --git a/04.系统编码/Frontend/public/images/prev-btn.png b/04.系统编码/Frontend/public/images/prev-btn.png new file mode 100644 index 0000000..80ac782 Binary files /dev/null and b/04.系统编码/Frontend/public/images/prev-btn.png differ diff --git a/04.系统编码/Frontend/public/images/save.png b/04.系统编码/Frontend/public/images/save.png new file mode 100644 index 0000000..983d2cc Binary files /dev/null and b/04.系统编码/Frontend/public/images/save.png differ diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue index 127dd2c..a04d047 100644 --- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue +++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue @@ -4,9 +4,9 @@ 垂直廓线 <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 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图 @@ -29,20 +29,27 @@ <el-col :span="8"><span @click="onRegionClick('溧水')" :class="{'active': currentRegion === '溧水'}">溧水</span></el-col> </el-row> </div> - <div class="menu-item"> + <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="time.name"> + <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" :class="{'active': currentTime === time.date}" @click="onTimeClick(time)">{{time.minute}}</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"> @@ -69,6 +76,21 @@ <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> @@ -84,6 +106,7 @@ currentTab: '垂直廓线', currentRegion: '江宁', currentElement: '温度', + currentCategory: 'CAPE', date: new Date(), currentHour: '10', hours: [{ @@ -94,7 +117,8 @@ label: '11' }], times: [], - currentTime: null + currentTime: null, + srcList: ['/images/picture.png'] }) onMounted(() => { @@ -109,8 +133,12 @@ options.currentRegion = region; } - const onElementClick = (region) => { - options.currentElement = region; + const onElementClick = (element) => { + options.currentElement = element; + } + + const onCategoryClick = (category) => { + options.currentCategory = category; } const initTimes = () => { @@ -145,6 +173,7 @@ onTabClick, onRegionClick, onElementClick, + onCategoryClick, onTimeClick } } diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue index e69de29..0a46048 100644 --- a/04.系统编码/Frontend/src/components/RamanLidar.vue +++ b/04.系统编码/Frontend/src/components/RamanLidar.vue @@ -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> diff --git a/04.系统编码/Frontend/src/components/Shared/Header.vue b/04.系统编码/Frontend/src/components/Shared/Header.vue index 596eecc..0003d26 100644 --- a/04.系统编码/Frontend/src/components/Shared/Header.vue +++ b/04.系统编码/Frontend/src/components/Shared/Header.vue @@ -43,37 +43,37 @@ <style lang="less" scoped> .header { width: 100%; - height: 84px; + height: 0.84rem; display: flex; align-items: center; color: #ffffff; .logo { - margin-left: 20px; + margin-left: 0.2rem; display: flex; align-items: center; letter-spacing: 2px; - font-size: 30px; + font-size: 0.3rem; font-weight: bold; img { - width: 53px; - margin-right: 10px; + width: 0.53rem; + margin-right: 0.1rem; } } .nav { - margin: 17px 0 0 50px; + margin: 0.17rem 0 0 0.5rem; display: flex; - font-size: 22px; + font-size: 0.22rem; .nav-item { - width: 170px; - height: 66px; - margin: 0 25px; - line-height: 50px; + width: 1.7rem; + height: 0.66rem; + margin: 0 0.25rem; + line-height: 0.5rem; text-align: center; cursor: pointer; &:nth-of-type(3) { - width: 230px; + width: 2.3rem; &.active { background: url("/images/nav-bg-big.png") no-repeat center/cover; } diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less index 3be9362..1162064 100644 --- a/04.系统编码/Frontend/src/index.less +++ b/04.系统编码/Frontend/src/index.less @@ -32,7 +32,7 @@ img { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #222222; - font-size: 16px; + font-size: 0.16rem; } .el-input__inner { @@ -75,16 +75,16 @@ img { .tabs { width: 100%; - height: 60px; + height: 0.6rem; display: flex; align-items: center; justify-content: center; color: #ffffff; - font-size: 22px; + font-size: 0.22rem; background-color: rgba(21, 81, 136, 0.46); .tab-item { - margin: 0 100px; + margin: 0 1rem; position: relative; cursor: pointer; color: #ffffff; @@ -105,46 +105,48 @@ img { .main { width: 100%; - height: calc(~"100vh - 144px"); + height: calc(~"100vh - 1.44rem"); display: flex; .panel { - height: calc(~"100% - 20px"); + height: calc(~"100% - 0.2rem"); background-color: #ffffff; border-radius: 10px; } .menu { - width: 250px; - padding: 20px; - height: calc(~"100% - 60px"); - border-radius: 0 10px 10px 0; + width: 2.5rem; + padding: 0.2rem; + height: calc(~"100% - 0.6rem"); + border-radius: 0 0.1rem 0.1rem 0; .tip { - height: 32px; - padding-left: 12px; - line-height: 32px; + height: 0.32rem; + padding-left: 0.12rem; + line-height: 0.32rem; color: #ffffff; - font-size: 18px; + font-size: 0.18rem; font-weight: bold; background: url("/images/menu-bg.png") no-repeat center/cover; } .menu-item { + margin-bottom: 0.1rem; + .el-row { - margin-top: 20px; + margin-top: 0.2rem; .el-col { span { width: 100%; - height: 30px; + height: 0.3rem; padding: 0; display: block; - line-height: 28px; + line-height: 0.3rem; text-align: center; - margin: 0 0 10px 0; - font-size: 16px; + margin: 0 0 0.1rem 0; + font-size: 0.16rem; color: #666666; - border-radius: 5px; + border-radius: 0.05rem; cursor: pointer; border: 1px solid #ECF4FF; background-color: #ECF4FF; @@ -159,11 +161,12 @@ img { } .container { - width: calc(~"100% - 290px"); - margin-left: 20px; + width: calc(~"100% - 2.9rem"); + margin-left: 0.2rem; .toolbar { - padding: 0.25rem; + padding-top: 0.25rem; + margin: 0 0.25rem; display: flex; align-items: center; border-bottom: 1px solid #666666; @@ -177,31 +180,29 @@ img { background-color: #ECF4FF; .time-item { + position: relative; + span { display: block; position: relative; color: #498DF0; + &.hour { + height: 0.2rem; + font-size: 0; + } + &.minute { width: 0.37rem; line-height: 0.26rem; text-align: center; color: #666666; cursor: pointer; - - &::before { - content: ''; - width: 1px; - height: 0.15rem; - display: block; - position: absolute; - left: -1px; - bottom: 0; - background-color: #666666; - } } + } - &.active { + &.active { + .minute { color: #ffffff; background-color: #498DF0; @@ -224,6 +225,33 @@ img { } } } + + &.first-hour { + .hour { + font-size: 0.16rem; + } + + &::before { + height: 100%; + } + } + + &:first-of-type { + .hour { + font-size: 0.16rem; + } + } + } + + .first-hour::before, .time-item .minute::before { + content: ''; + width: 1px; + height: 100%; + display: block; + position: absolute; + left: -1px; + bottom: 0; + background-color: #666666; } } @@ -279,27 +307,9 @@ img { } .el-input__suffix { - right: 0.07rem; .el-input__icon { width: 0.1rem; - svg { - display: none; - } - - &::after { - content: ''; - width: 0; - height: 0; - display: block; - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - border-left: 0.05rem solid transparent; - border-right: 0.05rem solid transparent; - border-bottom: 0.05rem solid #222222; - } } } } @@ -328,5 +338,63 @@ img { } } } + + .picture-view { + width: 100%; + height: calc(~"100% - 0.71rem"); + position: relative; + + .arrow { + width: 0.68rem; + display: block; + position: absolute; + top: 50%; + left: 0.3rem; + cursor: pointer; + transform: translateY(-50%); + + &.arrow-next { + left: auto; + right: 0.3rem; + } + } + + .save-btn { + width: 0.26rem; + display: block; + position: absolute; + top: 0.6rem; + right: 2rem; + cursor: pointer; + } + + .title { + padding: 0.4rem 0; + line-height: 0.3rem; + text-align: center; + font-size: 0.3rem; + font-weight: bold; + } + + .picture { + width: 72%; + height: calc(~"100% - 1.2rem"); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + + .el-image-viewer__mask { + opacity: 0.8; + } + + .el-image-viewer__canvas { + img { + width: 75%; + } + } + } + } } } \ No newline at end of file