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