3 changed files with 181 additions and 44 deletions
After Width: | Height: | Size: 82 KiB |
@ -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> |
Loading…
Reference in new issue