|
|
@ -4,11 +4,13 @@ |
|
|
|
植被变化对气候的影响 |
|
|
|
<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'"/> |
|
|
|
</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'"/> |
|
|
|
</div> |
|
|
@ -22,40 +24,64 @@ |
|
|
|
<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> |
|
|
@ -73,31 +99,34 @@ |
|
|
|
<!-- <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> |
|
|
@ -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" |
|
|
@ -141,7 +174,31 @@ |
|
|
|
</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> |
|
|
@ -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) => { |
|
|
|
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) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
values[index].imgUrl = response.data; |
|
|
|
values[index].preview = [response.data]; |
|
|
|
}); |
|
|
@ -278,10 +490,19 @@ |
|
|
|
setImage(6, options.items, options.currentElement); |
|
|
|
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; |
|
|
@ -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, |
|
|
@ -354,24 +609,30 @@ |
|
|
|
.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; |
|
|
|
|
|
|
|
.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,6 +709,7 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.save-btn { |
|
|
|
right: 0.2rem; |
|
|
|
top: 0.2rem; |
|
|
@ -447,6 +717,7 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
|
width: 8px; |
|
|
|
border-radius: 4px; |
|
|
|