You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
395 lines
20 KiB
395 lines
20 KiB
<template>
|
|
<div class="tabs">
|
|
<div class="tab-item" @click="onTabClick('plant-change')" :class="{'active': currentTab === 'plant-change'}">
|
|
植被变化对气候的影响
|
|
<img src="/images/line.png" v-if="currentTab === 'plant-change'" />
|
|
</div>
|
|
<div class="tab-item" @click="onTabClick('plant-distribute')" :class="{'active': currentTab === 'plant-distribute'}">
|
|
植被分布对气候的影响
|
|
<img src="/images/line.png" v-if="currentTab === 'plant-distribute'" />
|
|
</div>
|
|
<div class="tab-item" @click="onTabClick('element-change-trend')" :class="{'active': currentTab === 'element-change-trend'}">
|
|
植被和气候要素变化趋势
|
|
<img src="/images/line.png" v-if="currentTab === 'element-change-trend'" />
|
|
</div>
|
|
<div class="tab-item" @click="onTabClick('element-monitor')" :class="{'active': currentTab === 'element-monitor'}">
|
|
植被和气候要素的监测
|
|
<img src="/images/line.png" v-if="currentTab === 'element-monitor'" />
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="menu panel">
|
|
<div class="menu-item" v-if="currentTab === 'plant-change' || currentTab === 'plant-distribute'">
|
|
<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 class="menu-item" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'">
|
|
<h2 class="tip">要素选择</h2>
|
|
<el-row :gutter="12">
|
|
<el-col :span="24"><span @click="onCategoryClick('LST')" :class="{'active': currentCategory === 'LST'}">地表温度LST</span></el-col>
|
|
<el-col :span="24"><span @click="onCategoryClick('LAI')" :class="{'active': currentCategory === 'LAI'}">叶面积指数LAI</span></el-col>
|
|
<el-col :span="24"><span @click="onCategoryClick('EVI')" :class="{'active': currentCategory === 'EVI'}">增强植被指数EVI</span></el-col>
|
|
<el-col :span="24"><span @click="onCategoryClick('NDVI')" :class="{'active': currentCategory === 'NDVI'}">归一化植被指数NDVI</span></el-col>
|
|
<el-col :span="24"><span @click="onCategoryClick('Albedo')" :class="{'active': currentCategory === 'Albedo'}">反照率Albedo</span></el-col>
|
|
<el-col :span="24"><span @click="onCategoryClick('Evapotranspiration')" :class="{'active': currentCategory === 'Evapotranspiration'}">蒸散发Evapotranspiration</span></el-col>
|
|
<el-col :span="24" v-if="currentTab === 'element-monitor'"><span @click="onCategoryClick('土地覆盖类型')" :class="{'active': currentCategory === '土地覆盖类型'}">土地覆盖类型</span></el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="menu-item" v-if="currentTab === 'element-monitor'">
|
|
<h2 class="tip">时间点选择</h2>
|
|
<el-row :gutter="12">
|
|
<el-col :span="24"><span @click="onTimeClick('time0130')" :class="{'active': currentTime === 'time0130'}">地表温度（01:30）</span></el-col>
|
|
<el-col :span="24"><span @click="onTimeClick('time1030')" :class="{'active': currentTime === 'time1030'}">地表温度（10:30）</span></el-col>
|
|
<el-col :span="24"><span @click="onTimeClick('time1330')" :class="{'active': currentTime === 'time1330'}">地表温度（13:30）</span></el-col>
|
|
<el-col :span="24"><span @click="onTimeClick('time2230')" :class="{'active': currentTime === 'time2230'}">地表温度（22:30）</span></el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
<div class="container panel synergy-container">
|
|
<span class="save-btn" ><img src="/images/save.png" /></span>
|
|
<div class="element-select" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'">
|
|
<div class="surface-temperature" v-if="currentTab === 'element-change-trend'">
|
|
<span @click="onSurfaceTemperatureClick('time0130')" :class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度（01:30）</span>
|
|
<span @click="onSurfaceTemperatureClick('time1030')" :class="{'active': currentSurfaceTemperatureTime === 'time1030'}">地表温度（10:30）</span>
|
|
<span @click="onSurfaceTemperatureClick('time1330')" :class="{'active': currentSurfaceTemperatureTime === 'time1330'}">地表温度（13:30）</span>
|
|
<span @click="onSurfaceTemperatureClick('time2230')" :class="{'active': currentSurfaceTemperatureTime === 'time2230'}">地表温度（22:30）</span>
|
|
</div>
|
|
<div class="surface-temperature" v-if="currentTab === 'element-monitor'">
|
|
<span @click="onYearClick('2000')" :class="{'active': currentYear === '2000'}">2000</span>
|
|
<span @click="onYearClick('2001')" :class="{'active': currentYear === '2001'}">2001</span>
|
|
<span @click="onYearClick('2002')" :class="{'active': currentYear === '2002'}">2002</span>
|
|
<span @click="onYearClick('2003')" :class="{'active': currentYear === '2003'}">2003</span>
|
|
<span @click="onYearClick('2004')" :class="{'active': currentYear === '2004'}">2004</span>
|
|
<span @click="onYearClick('2005')" :class="{'active': currentYear === '2005'}">2005</span>
|
|
<span @click="onYearClick('2006')" :class="{'active': currentYear === '2006'}">2006</span>
|
|
<span @click="onYearClick('2007')" :class="{'active': currentYear === '2007'}">2007</span>
|
|
<span @click="onYearClick('2008')" :class="{'active': currentYear === '2008'}">2008</span>
|
|
<span @click="onYearClick('2009')" :class="{'active': currentYear === '2009'}">2009</span>
|
|
<span @click="onYearClick('2010')" :class="{'active': currentYear === '2010'}">2010</span>
|
|
<span @click="onYearClick('2011')" :class="{'active': currentYear === '2011'}">2011</span>
|
|
<span @click="onYearClick('2012')" :class="{'active': currentYear === '2012'}">2012</span>
|
|
<span @click="onYearClick('2013')" :class="{'active': currentYear === '2013'}">2013</span>
|
|
<span @click="onYearClick('2014')" :class="{'active': currentYear === '2014'}">2014</span>
|
|
<span @click="onYearClick('2015')" :class="{'active': currentYear === '2015'}">2015</span>
|
|
<span @click="onYearClick('2016')" :class="{'active': currentYear === '2016'}">2016</span>
|
|
<span @click="onYearClick('2017')" :class="{'active': currentYear === '2017'}">2017</span>
|
|
<span @click="onYearClick('2018')" :class="{'active': currentYear === '2018'}">2018</span>
|
|
<span @click="onYearClick('2019')" :class="{'active': currentYear === '2019'}">2019</span>
|
|
<span @click="onYearClick('2020')" :class="{'active': currentYear === '2020'}">2020</span>
|
|
<span @click="onYearClick('multi-years')" :class="{'active': currentYear === 'multi-years'}">多年平均值2000-2020</span>
|
|
</div>
|
|
</div>
|
|
<div class="picture-view synergy-picture-view" v-if="currentTab === 'plant-change' || currentTab === 'plant-distribute'">
|
|
<el-row :gutter="0">
|
|
<el-col :span="8" v-for="(item, index) in items" :key="index">
|
|
<h2 class="title">{{item.title}}</h2>
|
|
<el-image
|
|
:src="item.imgUrl"
|
|
:preview-src-list="item.preview"
|
|
:initial-index="0"
|
|
fit="contain"
|
|
>
|
|
<template #error>
|
|
<div class="image-slot">
|
|
<img src="/images/null-picture.png" />
|
|
</div>
|
|
<p class="image-tip">暂无图片</p>
|
|
</template>
|
|
<template #placeholder>
|
|
<div class="image-placeholder">正在加载...</div>
|
|
</template>
|
|
</el-image>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="picture-view multi-picture-view" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'">
|
|
<el-row :gutter="0">
|
|
<el-col :span="4" v-for="(item, index) in trendItems" :key="index">
|
|
<el-image
|
|
:src="item.imgUrl"
|
|
:preview-src-list="item.preview"
|
|
:initial-index="0"
|
|
fit="contain"
|
|
>
|
|
<template #error>
|
|
<div class="image-slot">
|
|
<img src="/images/null-picture.png" />
|
|
</div>
|
|
<p class="image-tip">暂无图片</p>
|
|
</template>
|
|
<template #placeholder>
|
|
<div class="image-placeholder">正在加载...</div>
|
|
</template>
|
|
</el-image>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { onMounted, reactive, toRefs } from 'vue';
|
|
import { format } from '../uilts/String';
|
|
import * as Tiff from 'browser-tiff.js';
|
|
import { SynergyEvaluationConfig } from '../uilts/Config';
|
|
import { post } from '../uilts/axios';
|
|
|
|
export default {
|
|
name: 'SynergyEvaluation',
|
|
setup() {
|
|
let options = reactive({
|
|
currentTab: 'plant-change',
|
|
currentElement: 'NDVI',
|
|
currentCategory: 'LST',
|
|
currentTime: 'time0130',
|
|
currentYear: '2000',
|
|
currentSurfaceTemperatureTime: 'time0130',
|
|
srcList: [],
|
|
imgUrl: '/images/default-picture.png',
|
|
imgUrls: [],
|
|
items: [{
|
|
title: '地表温度（01:30）',
|
|
type: 'temperature0130',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
title: '地表温度（10:30）',
|
|
type: 'temperature1030',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
title: '地表温度（13:30）',
|
|
type: 'temperature1330',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
title: '地表温度（22:30）',
|
|
type: 'temperature2230',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
title: '反照率',
|
|
type: 'albedo',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
title: '蒸散发',
|
|
type: 'evaporation',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}],
|
|
trendItems: [{
|
|
type: 'month_01',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_02',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_03',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_04',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_05',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_06',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_07',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_08',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_09',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_10',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_11',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}, {
|
|
type: 'month_12',
|
|
imgUrl: '/images/default-picture.png',
|
|
preview: []
|
|
}]
|
|
})
|
|
|
|
onMounted(() => {
|
|
setImage(6, options.items, options.currentElement);
|
|
})
|
|
|
|
const setImage = (number, values, element) => {
|
|
for(let index = 0; index < number; index ++){
|
|
initImage(options.currentTab, element, values[index].type, index, values);
|
|
}
|
|
}
|
|
|
|
const initImage = (tabName, elementName, type, index, values) => {
|
|
post("/image/convert", {url: SynergyEvaluationConfig.getUrl(tabName, elementName, type)}).then((response: any) => {
|
|
if (response.error != 0){
|
|
console.log("发生错误")
|
|
return;
|
|
}
|
|
|
|
values[index].imgUrl = response.data;
|
|
values[index].preview = [response.data];
|
|
})
|
|
}
|
|
|
|
const onTabClick = (name) => {
|
|
options.currentTab = name;
|
|
|
|
if(options.currentTab === 'plant-change' || options.currentTab === 'plant-distribute')
|
|
setImage(6, options.items, options.currentElement);
|
|
else if(options.currentTab === 'element-change-trend')
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentSurfaceTemperatureTime);
|
|
else
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentTime + '/' + options.currentYear);
|
|
}
|
|
|
|
const onElementClick = (element) => {
|
|
options.currentElement = element;
|
|
setImage(6, options.items, options.currentElement);
|
|
}
|
|
|
|
const onCategoryClick = (category) => {
|
|
options.currentCategory = category;
|
|
if(options.currentTab === 'element-change-trend')
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentSurfaceTemperatureTime);
|
|
else
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentTime + '/' + options.currentYear);
|
|
}
|
|
|
|
const onTimeClick = (time) => {
|
|
options.currentTime = time;
|
|
}
|
|
|
|
const onSurfaceTemperatureClick = (value) => {
|
|
options.currentSurfaceTemperatureTime = value;
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentSurfaceTemperatureTime);
|
|
}
|
|
|
|
const onYearClick = (year) => {
|
|
options.currentYear = year;
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentTime + '/' + options.currentYear);
|
|
}
|
|
|
|
return {
|
|
...toRefs(options),
|
|
onTabClick,
|
|
onElementClick,
|
|
onCategoryClick,
|
|
onSurfaceTemperatureClick,
|
|
onYearClick,
|
|
onTimeClick,
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.main {
|
|
.synergy-container {
|
|
height: calc(~"100% - 0.6rem");
|
|
padding: 0.2rem 0 0.2rem 0.2rem;
|
|
.synergy-picture-view {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
:deep(.el-row) {
|
|
width: 100%;
|
|
.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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
.image-slot {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.multi-picture-view {
|
|
height: calc(~"100% - 0.76rem");
|
|
.el-row {
|
|
height: 100%;
|
|
.el-col {
|
|
max-width: calc(~"(100% / 6) - 0.2rem");
|
|
height: 50%;
|
|
margin: 0.2rem 0.2rem 0 0;
|
|
border: 1px solid #666666;
|
|
.el-image {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
&:nth-of-type(6n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.element-select {
|
|
position: relative;
|
|
.surface-temperature {
|
|
display: flex;
|
|
align-items: center;
|
|
border-left: 1px solid #498DF0;
|
|
|
|
span {
|
|
height: 0.34rem;
|
|
padding: 0 0.1rem;
|
|
text-align: center;
|
|
line-height: 0.34rem;
|
|
border: 1px solid #498DF0;
|
|
border-left: 0;
|
|
cursor: pointer;
|
|
|
|
&.active {
|
|
color: #ffffff;
|
|
background-color: #498DF0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.save-btn {
|
|
right: 0.2rem;
|
|
top: 0.2rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|