|
|
|
@ -8,13 +8,13 @@ |
|
|
|
植被分布对气候的影响 |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'plant-distribute'" /> |
|
|
|
</div> |
|
|
|
<div class="tab-item" @click="onTabClick('植被和气候要素变化趋势')" :class="{'active': currentTab === '植被和气候要素变化趋势'}"> |
|
|
|
<div class="tab-item" @click="onTabClick('element-change-trend')" :class="{'active': currentTab === 'element-change-trend'}"> |
|
|
|
植被和气候要素变化趋势 |
|
|
|
<img src="/images/line.png" v-if="currentTab === '植被和气候要素变化趋势'" /> |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'element-change-trend'" /> |
|
|
|
</div> |
|
|
|
<div class="tab-item" @click="onTabClick('植被和气候要素的监测')" :class="{'active': currentTab === '植被和气候要素的监测'}"> |
|
|
|
<div class="tab-item" @click="onTabClick('element-monitor')" :class="{'active': currentTab === 'element-monitor'}"> |
|
|
|
植被和气候要素的监测 |
|
|
|
<img src="/images/line.png" v-if="currentTab === '植被和气候要素的监测'" /> |
|
|
|
<img src="/images/line.png" v-if="currentTab === 'element-monitor'" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="main"> |
|
|
|
@ -22,43 +22,43 @@ |
|
|
|
<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 === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'"> |
|
|
|
<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 === '植被和气候要素的监测'"><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('土地覆盖类型')" :class="{'active': currentCategory === '土地覆盖类型'}">土地覆盖类型</span></el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<div class="menu-item" v-if="currentTab === '植被和气候要素的监测'"> |
|
|
|
<div class="menu-item" v-if="currentTab === 'element-monitor'"> |
|
|
|
<h2 class="tip">时间点选择</h2> |
|
|
|
<el-row :gutter="12"> |
|
|
|
<el-col :span="24"><span @click="onTimeClick('地表温度（01:30）')" :class="{'active': currentTime === '地表温度（01:30）'}">地表温度（01:30）</span></el-col> |
|
|
|
<el-col :span="24"><span @click="onTimeClick('地表温度（10:30）')" :class="{'active': currentTime === '地表温度（10:30）'}">地表温度（10:30）</span></el-col> |
|
|
|
<el-col :span="24"><span @click="onTimeClick('地表温度（13:30）')" :class="{'active': currentTime === '地表温度（13:30）'}">地表温度（13:30）</span></el-col> |
|
|
|
<el-col :span="24"><span @click="onTimeClick('地表温度（13:30）')" :class="{'active': currentTime === '地表温度（22:30）'}">地表温度（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> |
|
|
|
<div class="container panel synergy-container"> |
|
|
|
<span class="save-btn"><img src="/images/save.png" /></span> |
|
|
|
<div class="element-select" v-if="currentTab === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'"> |
|
|
|
<div class="surface-temperature" v-if="currentTab === '植被和气候要素变化趋势'"> |
|
|
|
<span @click="onSurfaceTemperatureClick('地表温度（01:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（01:30）'}">地表温度（01:30）</span> |
|
|
|
<span @click="onSurfaceTemperatureClick('地表温度（10:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（10:30）'}">地表温度（10:30）</span> |
|
|
|
<span @click="onSurfaceTemperatureClick('地表温度（13:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（13:30）'}">地表温度（13:30）</span> |
|
|
|
<span @click="onSurfaceTemperatureClick('地表温度（22:30）')" :class="{'active': currentSurfaceTemperatureTime === '地表温度（22:30）'}">地表温度（22:30）</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 === '植被和气候要素的监测'"> |
|
|
|
<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> |
|
|
|
@ -80,181 +80,44 @@ |
|
|
|
<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('多年平均值2000-2020')" :class="{'active': currentYear === '多年平均值2000-2020'}">多年平均值2000-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"> |
|
|
|
<h2 class="title">地表温度（01:30）</h2> |
|
|
|
<el-col :span="8" v-for="(item, index) in items" :key="index"> |
|
|
|
<h2 class="title">{{item.title}}</h2> |
|
|
|
<el-image |
|
|
|
:src="imgUrl" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="8"> |
|
|
|
<h2 class="title">地表温度（10:30）</h2> |
|
|
|
<el-image |
|
|
|
src="/images/picture2.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="8"> |
|
|
|
<h2 class="title">地表温度（13: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">地表温度（22: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">反照率</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">蒸散发</h2> |
|
|
|
<el-image |
|
|
|
src="/images/picture1.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
: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> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<div class="picture-view multi-picture-view" v-if="currentTab === '植被和气候要素变化趋势' || currentTab === '植被和气候要素的监测'"> |
|
|
|
<div class="picture-view multi-picture-view" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'"> |
|
|
|
<el-row :gutter="0"> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-col :span="4" v-for="(item, index) in trendItems" :key="index"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
fit="contain" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-image |
|
|
|
src="/images/picture3.png" |
|
|
|
:preview-src-list="srcList" |
|
|
|
:initial-index="1" |
|
|
|
: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> |
|
|
|
</el-image> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
@ -275,38 +138,106 @@ |
|
|
|
let options = reactive({ |
|
|
|
currentTab: 'plant-change', |
|
|
|
currentElement: 'NDVI', |
|
|
|
currentCategory: '地表温度LST', |
|
|
|
currentTime: '地表温度（01:30）', |
|
|
|
currentCategory: 'LST', |
|
|
|
currentTime: 'time0130', |
|
|
|
currentYear: '2000', |
|
|
|
currentSurfaceTemperatureTime: '地表温度（01:30）', |
|
|
|
currentSurfaceTemperatureTime: 'time0130', |
|
|
|
srcList: [], |
|
|
|
imgUrl: null, |
|
|
|
imgUrls: [], |
|
|
|
items: [{ |
|
|
|
//'地表温度（10:30）', '地表温度（13:30）', '地表温度（22:30）', '反照率', '蒸散发', |
|
|
|
title: '地表温度（01:30）', |
|
|
|
type: 'temperature0130' |
|
|
|
type: 'temperature0130', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
title: '地表温度（10:30）', |
|
|
|
type: 'temperature1030', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
title: '地表温度（13:30）', |
|
|
|
type: 'temperature1330', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
title: '地表温度（22:30）', |
|
|
|
type: 'temperature2230', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
title: '反照率', |
|
|
|
type: 'albedo', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
title: '蒸散发', |
|
|
|
type: 'evaporation', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}], |
|
|
|
trendItems: [{ |
|
|
|
type: 'month_01', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_02', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_03', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_04', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_05', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_06', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_07', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_08', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_09', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_10', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_11', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}, { |
|
|
|
type: 'month_12', |
|
|
|
imgUrl: '', |
|
|
|
preview: [] |
|
|
|
}] |
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
setImage(); |
|
|
|
setImage(6, options.items, options.currentElement); |
|
|
|
}) |
|
|
|
|
|
|
|
const setImage = () => { |
|
|
|
initImage(options.currentTab, options.currentElement, 'temperature0130'); |
|
|
|
initImage(options.currentTab, options.currentElement, 'temperature1030'); |
|
|
|
initImage(options.currentTab, options.currentElement, 'temperature1330'); |
|
|
|
initImage(options.currentTab, options.currentElement, 'temperature2230'); |
|
|
|
initImage(options.currentTab, options.currentElement, 'albedo'); |
|
|
|
initImage(options.currentTab, options.currentElement, 'evaporation'); |
|
|
|
|
|
|
|
for (let i = 0; i < options.items.length; i++) { |
|
|
|
initImage(options.currentTab, options.currentElement, 'temperature0130'); |
|
|
|
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) => { |
|
|
|
const initImage = (tabName, elementName, type, index, values) => { |
|
|
|
var xhr = new XMLHttpRequest(); |
|
|
|
xhr.responseType = 'arraybuffer'; |
|
|
|
xhr.open('GET', SynergyEvaluationConfig.getUrl(tabName, elementName, type)); |
|
|
|
@ -315,22 +246,34 @@ |
|
|
|
let canvas = tiff.toCanvas(); |
|
|
|
let image = new Image(); |
|
|
|
image.src = canvas.toDataURL("image/png"); |
|
|
|
options.imgUrl = image.src; |
|
|
|
options.srcList = [image.src]; |
|
|
|
values[index].imgUrl = image.src; |
|
|
|
values[index].preview = [image.src]; |
|
|
|
}; |
|
|
|
xhr.send(); |
|
|
|
} |
|
|
|
|
|
|
|
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) => { |
|
|
|
@ -339,10 +282,12 @@ |
|
|
|
|
|
|
|
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 { |
|
|
|
@ -363,9 +308,11 @@ |
|
|
|
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; |
|
|
|
@ -394,6 +341,7 @@ |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
|
|
|
|
&:nth-of-type(6n) { |
|
|
|
|
