|
|
@ -2,19 +2,21 @@ |
|
|
|
<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'" /> |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'plant-change'"/> |
|
|
|
</div> |
|
|
|
<div class="tab-item" @click="onTabClick('plant-distribute')" :class="{'active': currentTab === 'plant-distribute'}"> |
|
|
|
<div class="tab-item" @click="onTabClick('plant-distribute')" |
|
|
|
:class="{'active': currentTab === 'plant-distribute'}"> |
|
|
|
植被分布对气候的影响 |
|
|
|
<img src="/images/line.png" v-if="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'}"> |
|
|
|
<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'" /> |
|
|
|
<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'" /> |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'element-monitor'"/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main"> |
|
|
@ -22,85 +24,112 @@ |
|
|
|
<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-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-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('landCoverTypes')" |
|
|
|
:class="{'active': currentCategory === 'landCoverTypes'}">土地覆盖类型</span> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<div class="menu-item" v-if="currentTab === 'element-monitor'"> |
|
|
|
<div class="menu-item" v-if="currentTab === 'element-monitor' && iStTimeRange"> |
|
|
|
<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-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 class="menu-item" v-if="currentTab === 'element-change-trend'"> |
|
|
|
<h2 class="tip">时间点选择</h2> |
|
|
|
<el-row :gutter="12"> |
|
|
|
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time0130')" :class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度(01:30)</span></el-col> |
|
|
|
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time1030')" :class="{'active': currentSurfaceTemperatureTime === 'time1030'}">地表温度(10:30)</span></el-col> |
|
|
|
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time1330')" :class="{'active': currentSurfaceTemperatureTime === 'time1330'}">地表温度(13:30)</span></el-col> |
|
|
|
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time2230')" :class="{'active': currentSurfaceTemperatureTime === 'time2230'}">地表温度(22:30)</span></el-col> |
|
|
|
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time0130')" |
|
|
|
:class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度(01:30)</span> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time1030')" |
|
|
|
:class="{'active': currentSurfaceTemperatureTime === 'time1030'}">地表温度(10:30)</span> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time1330')" |
|
|
|
:class="{'active': currentSurfaceTemperatureTime === 'time1330'}">地表温度(13:30)</span> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24"><span @click="onSurfaceTemperatureClick('time2230')" |
|
|
|
:class="{'active': currentSurfaceTemperatureTime === 'time2230'}">地表温度(22:30)</span> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="container panel synergy-container"> |
|
|
|
<span class="save-btn" @click="onSaveClick"><img src="/images/save.png" /></span> |
|
|
|
<span class="save-btn" @click="onSaveClick"><img src="/images/save.png"/></span> |
|
|
|
<div class="download-pictures" id="pictures"> |
|
|
|
<a v-for="(url, index) in urls" :key="index" download></a> |
|
|
|
</div> |
|
|
|
<div class="element-select" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'"> |
|
|
|
<!-- <div class="surface-temperature" v-if="currentTab === 'element-change-trend' && currentCategory === 'LST'">--> |
|
|
|
<!-- <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-change-trend' && currentCategory === 'LST'">--> |
|
|
|
<!-- <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> |
|
|
|
<span @click="onYearClick(item)" :class="{'active': currentYear === item }" v-for="item in time">{{ item }}</span> |
|
|
|
<!-- <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'"> |
|
|
|
<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> |
|
|
|
<h2 class="title">{{ item.title }}</h2> |
|
|
|
<el-image |
|
|
|
:src="item.imgUrl" |
|
|
|
:preview-src-list="item.preview" |
|
|
@ -109,7 +138,7 @@ |
|
|
|
> |
|
|
|
<template #error> |
|
|
|
<div class="image-slot"> |
|
|
|
<img src="/images/null-picture.png" /> |
|
|
|
<img src="/images/null-picture.png"/> |
|
|
|
</div> |
|
|
|
<p class="image-tip">暂无图片</p> |
|
|
|
</template> |
|
|
@ -120,8 +149,12 @@ |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<div class="picture-view multi-picture-view scroll" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'" :style="{'marginTop': currentTab === 'element-change-trend' ? 'calc(0.34rem + 2px)' : 0}"> |
|
|
|
<el-row :gutter="20"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="picture-view multi-picture-view scroll" |
|
|
|
v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'" |
|
|
|
:style="{'marginTop': currentTab === 'element-change-trend' ? 'calc(0.34rem + 2px)' : 0}"> |
|
|
|
<el-row :gutter="20" v-if="currentCategory !== 'landCoverTypes'"> |
|
|
|
<el-col :span="12" v-for="(item, index) in trendItems" :key="index"> |
|
|
|
<el-image |
|
|
|
:src="item.imgUrl" |
|
|
@ -131,7 +164,7 @@ |
|
|
|
> |
|
|
|
<template #error> |
|
|
|
<div class="image-slot"> |
|
|
|
<img src="/images/null-picture.png" /> |
|
|
|
<img src="/images/null-picture.png"/> |
|
|
|
</div> |
|
|
|
<p class="image-tip">暂无图片</p> |
|
|
|
</template> |
|
|
@ -141,19 +174,43 @@ |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<el-row :gutter="20" v-if="currentCategory === 'landCoverTypes'"> |
|
|
|
<el-col :span="12" v-for="(item, index) in landCoverTypesDate" :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'; |
|
|
|
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 { |
|
|
|
export default { |
|
|
|
name: 'SynergyEvaluation', |
|
|
|
setup() { |
|
|
|
let options = reactive({ |
|
|
@ -246,26 +303,181 @@ |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}], |
|
|
|
urls: [] |
|
|
|
urls: [], |
|
|
|
SwitchElementsData: [ |
|
|
|
{ |
|
|
|
elementCode: "LST", |
|
|
|
isTimeRange: true, |
|
|
|
isDateRange: true, |
|
|
|
timeRange: [ |
|
|
|
{ |
|
|
|
time: 'time0130', |
|
|
|
dateRange: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '多年平均值(2002-2020)'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
time: 'time1030', |
|
|
|
dateRange: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '多年平均值(2000-2020)'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
time: 'time1330', |
|
|
|
dateRange: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '多年平均值(2002-2020)'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
time: 'time2230', |
|
|
|
dateRange: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '多年平均值(2000-2020)'] |
|
|
|
} |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
elementCode: "LAI", |
|
|
|
isTimeRange: false, |
|
|
|
isDateRange: true, |
|
|
|
timeRange: ['2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '多年平均值(2002-2020)'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
elementCode: "EVI", |
|
|
|
isTimeRange: false, |
|
|
|
isDateRange: true, |
|
|
|
timeRange: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '多年平均值(2000-2020)'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
elementCode: "NDVI", |
|
|
|
isTimeRange: false, |
|
|
|
isDateRange: true, |
|
|
|
timeRange: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
elementCode: "Albedo", |
|
|
|
isTimeRange: false, |
|
|
|
isDateRange: true, |
|
|
|
timeRange: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '多年平均值(2000-2020)'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
elementCode: "Evapotranspiration", |
|
|
|
isTimeRange: false, |
|
|
|
isDateRange: true, |
|
|
|
timeRange: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '多年平均值(2000-2020)'] |
|
|
|
}, |
|
|
|
{ |
|
|
|
elementCode: "landCoverTypes", |
|
|
|
isTimeRange: false, |
|
|
|
isDateRange: false, |
|
|
|
timeRange: [] |
|
|
|
}, |
|
|
|
], |
|
|
|
iStTimeRange: true, |
|
|
|
isDateRange: true, |
|
|
|
timeRange: true, |
|
|
|
time: [], |
|
|
|
landCoverTypesDate: [ |
|
|
|
{ |
|
|
|
type: '2001', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2002', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2003', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2004', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2005', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2006', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2007', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2008', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2009', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2010', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2011', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2012', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2013', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2014', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2015', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2016', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2017', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2018', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: '2019', |
|
|
|
imgUrl: '/images/default-picture.png', |
|
|
|
preview: [] |
|
|
|
} |
|
|
|
] |
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
setTimeout(() => { |
|
|
|
changeElementCode(options.currentCategory, options.currentTime) |
|
|
|
},500) |
|
|
|
setImage(6, options.items, options.currentElement); |
|
|
|
}) |
|
|
|
|
|
|
|
const setImage = (number, values, element) => { |
|
|
|
for(let index = 0; index < number; index ++){ |
|
|
|
if (options.currentCategory == 'landCoverTypes') { |
|
|
|
values = options.landCoverTypesDate |
|
|
|
for (let index = 0; index < 19; index++) { |
|
|
|
initImage(options.currentTab, element, values[index].type, index, values); |
|
|
|
} |
|
|
|
} |
|
|
|
else { |
|
|
|
for (let index = 0; index < number; index++) { |
|
|
|
initImage(options.currentTab, element, values[index].type, index, values); |
|
|
|
} |
|
|
|
} |
|
|
|
options.urls = values; |
|
|
|
} |
|
|
|
|
|
|
|
const initImage = (tabName, elementName, type, index, values) => { |
|
|
|
elementName = elementName.replace('多年平均值','yearsAverage'); |
|
|
|
post("/image/convert", {url: SynergyEvaluationConfig.getUrl(tabName, elementName, type)}).then((response: any) => { |
|
|
|
if (response.error != 0){ |
|
|
|
if (response.error != 0) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
values[index].imgUrl = response.data; |
|
|
|
values[index].preview = [response.data]; |
|
|
|
}); |
|
|
@ -274,14 +486,23 @@ |
|
|
|
const onTabClick = (name) => { |
|
|
|
options.currentTab = name; |
|
|
|
|
|
|
|
if(options.currentTab === 'plant-change' || options.currentTab === 'plant-distribute') |
|
|
|
if (options.currentTab === 'plant-change' || options.currentTab === 'plant-distribute') |
|
|
|
setImage(6, options.items, options.currentElement); |
|
|
|
else if(options.currentTab === 'element-change-trend') |
|
|
|
else if (options.currentTab === 'element-change-trend') |
|
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentSurfaceTemperatureTime); |
|
|
|
else |
|
|
|
else { |
|
|
|
if (options.iStTimeRange == false) { |
|
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentYear); |
|
|
|
} |
|
|
|
if (options.isDateRange == false) { |
|
|
|
setImage(12, options.trendItems, options.currentCategory + '/' ); |
|
|
|
} |
|
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentTime + '/' + options.currentYear); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const onElementClick = (element) => { |
|
|
|
options.currentElement = element; |
|
|
|
setImage(6, options.items, options.currentElement); |
|
|
@ -289,29 +510,32 @@ |
|
|
|
|
|
|
|
const onCategoryClick = (category) => { |
|
|
|
options.currentCategory = category; |
|
|
|
if(options.currentTab === 'element-change-trend') |
|
|
|
changeElementCode(category, options.currentTime) |
|
|
|
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); |
|
|
|
} |
|
|
|
else { |
|
|
|
interpretation() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const onTimeClick = (time) => { |
|
|
|
options.currentTime = time; |
|
|
|
changeElementCode(options.currentCategory, options.currentTime) |
|
|
|
interpretation() |
|
|
|
} |
|
|
|
|
|
|
|
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); |
|
|
|
interpretation() |
|
|
|
} |
|
|
|
|
|
|
|
const onSaveClick = () => { |
|
|
|
let pictures = document.getElementById('pictures'); |
|
|
|
|
|
|
|
for (let i = 0; i < options.urls.length; i++) { |
|
|
|
let img = new Image(); |
|
|
|
img.src = options.urls[i].imgUrl; |
|
|
@ -322,8 +546,8 @@ |
|
|
|
let ctx = canvas.getContext("2d"); |
|
|
|
let base64 = ''; |
|
|
|
|
|
|
|
img.setAttribute("crossOrigin",'Anonymous'); |
|
|
|
img.onload = function() { |
|
|
|
img.setAttribute("crossOrigin", 'Anonymous'); |
|
|
|
img.onload = function () { |
|
|
|
ctx.drawImage(img, 0, 0); |
|
|
|
base64 = canvas.toDataURL("image/png"); |
|
|
|
pictures.children[i].setAttribute('href', base64); |
|
|
@ -336,6 +560,37 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const changeElementCode = (code, nowTime) => { |
|
|
|
options.time = [] |
|
|
|
let elementCode = options.SwitchElementsData.filter(d => d.elementCode == code) |
|
|
|
options.iStTimeRange = elementCode[0].isTimeRange |
|
|
|
options.isDateRange = elementCode[0].isDateRange |
|
|
|
elementCode[0].timeRange.forEach(item => { |
|
|
|
if (item.time) { |
|
|
|
if (item.time == nowTime) { |
|
|
|
options.time = item.dateRange |
|
|
|
options.currentYear = item.dateRange[0] |
|
|
|
} |
|
|
|
} |
|
|
|
else { |
|
|
|
options.time = elementCode[0].timeRange |
|
|
|
options.currentYear = elementCode[0].timeRange[0] |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const interpretation = () => { |
|
|
|
if (options.iStTimeRange == false) { |
|
|
|
if (options.isDateRange == false) { |
|
|
|
setImage(12, options.trendItems, options.currentCategory ); |
|
|
|
return; |
|
|
|
} |
|
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentYear); |
|
|
|
} else { |
|
|
|
setImage(12, options.trendItems, options.currentCategory + '/' + options.currentTime + '/' + options.currentYear); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
return { |
|
|
|
...toRefs(options), |
|
|
|
onTabClick, |
|
|
@ -347,31 +602,37 @@ |
|
|
|
onSaveClick |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="less" scoped> |
|
|
|
.main { |
|
|
|
.main { |
|
|
|
.synergy-container { |
|
|
|
height: calc(~"100% - 0.6rem"); |
|
|
|
padding: 0.2rem 0 0.2rem 0.2rem; |
|
|
|
|
|
|
|
.save-btn { |
|
|
|
z-index: 9999; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
@ -380,6 +641,7 @@ |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
background-color: #ffffff; |
|
|
|
|
|
|
|
.image-slot { |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
@ -387,19 +649,23 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.multi-picture-view { |
|
|
|
width: 100%; |
|
|
|
height: calc(~"100% - 0.2rem"); |
|
|
|
|
|
|
|
:deep(.el-row) { |
|
|
|
height: 100%; |
|
|
|
padding-top: 10px; |
|
|
|
margin-left: 0!important; |
|
|
|
margin-right: 0!important; |
|
|
|
margin-left: 0 !important; |
|
|
|
margin-right: 0 !important; |
|
|
|
|
|
|
|
.el-col { |
|
|
|
max-width: calc(~"(100% / 4) - 0.2rem"); |
|
|
|
height: 50%; |
|
|
|
margin: 0.2rem 0.2rem 0 0; |
|
|
|
border: 1px solid #666666; |
|
|
|
|
|
|
|
.el-image { |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
@ -414,11 +680,14 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.scroll { |
|
|
|
overflow-y: scroll; |
|
|
|
} |
|
|
|
|
|
|
|
.element-select { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.surface-temperature { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
@ -440,29 +709,31 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.save-btn { |
|
|
|
right: 0.2rem; |
|
|
|
top: 0.2rem; |
|
|
|
z-index: 9999!important; |
|
|
|
} |
|
|
|
z-index: 9999 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
::-webkit-scrollbar { |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
|
width: 8px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
|
::-webkit-scrollbar-track { |
|
|
|
background-color: inherit; |
|
|
|
-webkit-border-radius: 4px; |
|
|
|
-moz-border-radius: 4px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
|
::-webkit-scrollbar-thumb { |
|
|
|
background-color: #c3c9cd; |
|
|
|
-webkit-border-radius: 4px; |
|
|
|
-moz-border-radius: 4px; |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|