root
/
NanJingLamanRadarProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

commit

master
hehongxing 3 years ago
parent
d3e1c9daed
commit
f2faac78f9
3 changed files with 181 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      04.系统编码/Frontend/public/images/picture1.png
  2. 51
      04.系统编码/Frontend/src/components/RamanLidar.vue
  3. 174
      04.系统编码/Frontend/src/components/SynergyEvaluation.vue

BIN
04.系统编码/Frontend/public/images/picture1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

51
04.系统编码/Frontend/src/components/RamanLidar.vue
View File

@ -1,22 +1,5 @@
<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="tabs"></div>
<div class="main">
<div class="menu panel">
<div class="menu-item">
@ -25,22 +8,15 @@
<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 === '对流指数'">
<div class="menu-item">
<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-col :span="24"><span @click="onElementClick('激光雷达比')" :class="{'active': currentElement === '激光雷达比'}">激光雷达比</span></el-col>
<el-col :span="24"><span @click="onElementClick('消光系数')" :class="{'active': currentElement === '消光系数'}">消光系数</span></el-col>
<el-col :span="24"><span @click="onElementClick('气溶胶浓度')" :class="{'active': currentElement === '气溶胶浓度'}">气溶胶浓度</span></el-col>
<el-col :span="24"><span @click="onElementClick('云和气溶胶识别')" :class="{'active': currentElement === '云和气溶胶识别'}">云和气溶胶识别</span></el-col>
</el-row>
</div>
</div>
@ -103,10 +79,8 @@
name: 'RamanLidar',
setup() {
let options = reactive({
currentTab: '垂直廓线',
currentRegion: '江宁',
currentElement: '温度',
currentCategory: 'CAPE',
currentElement: '激光雷达比',
date: new Date(),
currentHour: '10',
hours: [{
@ -124,10 +98,6 @@
onMounted(() => {
initTimes();
})
const onTabClick = (name) => {
options.currentTab = name;
}
const onRegionClick = (region) => {
options.currentRegion = region;
@ -137,10 +107,6 @@
options.currentElement = element;
}
const onCategoryClick = (category) => {
options.currentCategory = category;
}
const initTimes = () => {
let now = moment();
let minute = now.minute();
@ -170,15 +136,12 @@
return {
...toRefs(options),
onTabClick,
onRegionClick,
onElementClick,
onCategoryClick,
onTimeClick
}
}
}
</script>
<style lang="less" scoped>
</style>

174
04.系统编码/Frontend/src/components/SynergyEvaluation.vue
View File

@ -0,0 +1,174 @@
<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('植被和气候要素变化趋势')" :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>
<div class="main">
<div class="menu panel">
<div class="menu-item">
<h2 class="tip">要素选择</h2>
<el-row :gutter="12">
<el-col :span="24"><span @click="onElementClick('归一化植被指数NDVI')" :class="{'active': currentElement === '归一化植被指数NDVI'}">归一化植被指数NDVI</span></el-col>
<el-col :span="24"><span @click="onElementClick('叶面积指数LAI')" :class="{'active': currentElement === '叶面积指数LAI'}">叶面积指数LAI</span></el-col>
<el-col :span="24"><span @click="onElementClick('增强植被指数EVI')" :class="{'active': currentElement === '增强植被指数EVI'}">增强植被指数EVI</span></el-col>
</el-row>
</div>
</div>
<div class="container panel">
<div class="picture-view synergy-picture-view">
<el-row :gutter="0">
<el-col :span="8">
<h2 class="title">地表温度（01:30）</h2>
<el-image
src="/images/picture1.png"
:preview-src-list="srcList"
:initial-index="1"
fit="contain"
>
</el-image>
</el-col>
<el-col :span="8">
<h2 class="title">地表温度（01:30）</h2>
<el-image
src="/images/picture1.png"
:preview-src-list="srcList"
:initial-index="1"
fit="contain"
>
</el-image>
</el-col>
<el-col :span="8">
<h2 class="title">地表温度（01:30）</h2>
<el-image
src="/images/picture1.png"
:preview-src-list="srcList"
:initial-index="1"
fit="contain"
>
</el-image>
</el-col>
<el-col :span="8">
<h2 class="title">地表温度（01:30）</h2>
<el-image
src="/images/picture1.png"
:preview-src-list="srcList"
:initial-index="1"
fit="contain"
>
</el-image>
</el-col>
<el-col :span="8">
<h2 class="title">地表温度（01:30）</h2>
<el-image
src="/images/picture1.png"
:preview-src-list="srcList"
:initial-index="1"
fit="contain"
>
</el-image>
</el-col>
<el-col :span="8">
<h2 class="title">地表温度（01:30）</h2>
<el-image
src="/images/picture1.png"
:preview-src-list="srcList"
:initial-index="1"
fit="contain"
>
</el-image>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import moment from "moment";
export default {
name: 'SynergyEvaluation',
setup() {
let options = reactive({
currentTab: '植被变化对气候的影响',
currentElement: '归一化植被指数NDVI',
date: new Date(),
currentHour: '10',
hours: [{
value: '10',
label: '10'
}, {
value: '11',
label: '11'
}],
currentTime: null,
srcList: ['/images/picture1.png']
})
onMounted(() => {
})
const onTabClick = (name) => {
options.currentTab = name;
}
const onElementClick = (element) => {
options.currentElement = element;
}
const onTimeClick = (time) => {
console.log(time.date)
options.currentTime = time.date;
console.log(options.currentTime)
}
return {
...toRefs(options),
onTabClick,
onElementClick,
onTimeClick
}
}
}
</script>
<style lang="less" scoped>
.main {
.container {
.synergy-picture-view {
height: 100%;
display: flex;
:deep(.el-row) {
.title {
padding: 0;
font-size: 0.22rem;
}
.el-col {
height: 46%;
margin-top: 1%;
text-align: center;
.el-image {
height: calc(~"100% - 0.4rem");
margin-top: 0.1rem;
}
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save