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