diff --git a/04.系统编码/Backend/src/main/java/com/userinformation/backend/service/ImageService.java b/04.系统编码/Backend/src/main/java/com/userinformation/backend/service/ImageService.java index b4e7feb..58241f8 100644 --- a/04.系统编码/Backend/src/main/java/com/userinformation/backend/service/ImageService.java +++ b/04.系统编码/Backend/src/main/java/com/userinformation/backend/service/ImageService.java @@ -41,8 +41,11 @@ public class ImageService { public String convert(String url) throws IOException { String filepath = url.replace(imageUrl, imagePath); File sourceFile = new File(filepath); - Assert.isTrue(sourceFile.exists(), "文件不存在"); - Assert.isTrue(filepath.toLowerCase(Locale.ROOT).endsWith(TIF_FILE_SUFFIX), "文件格式不正确"); +// Assert.isTrue(sourceFile.exists(), "文件不存在"); +// Assert.isTrue(filepath.toLowerCase(Locale.ROOT).endsWith(TIF_FILE_SUFFIX), "文件格式不正确"); + if(!sourceFile.exists() || !filepath.toLowerCase(Locale.ROOT).endsWith(TIF_FILE_SUFFIX)){ + return "/images/empty.png"; + } String targetFilePath = filepath.replace(TIF_FILE_SUFFIX, PNG_FILE_SUFFIX); File targetFile = new File(targetFilePath); if (!targetFile.exists()){ diff --git a/04.系统编码/Backend/src/main/resources/application.yml b/04.系统编码/Backend/src/main/resources/application.yml index 197a887..eee433a 100644 --- a/04.系统编码/Backend/src/main/resources/application.yml +++ b/04.系统编码/Backend/src/main/resources/application.yml @@ -20,11 +20,11 @@ custom: image: url: ${custom.parent-url}:${server.port}/product gifPath: ${custom.image.path}/gif -# path: D:/Deployments/LamanRadar/product -# parent-url: http://localhost -# quality-path: E:/Memorandum/VPN配置/南京/多曼雷达项目/AllData - path: /home/project/NJEnvironmentPlatform/html/product - parent-url: http://10.124.102.10 - quality-path: /share/win + path: D:\下载\可视化平台\product + parent-url: http://localhost + quality-path: E:/Memorandum/VPN配置/南京/多曼雷达项目/AllData +# path: /home/project/NJEnvironmentPlatform/html/product +# parent-url: http://10.124.102.10 +# quality-path: /share/win # path: /home/develop/product # parent-url: http://rdp.nagr.com.cn diff --git a/04.系统编码/Frontend/public/images/empty.png b/04.系统编码/Frontend/public/images/empty.png new file mode 100644 index 0000000..6e8f87b Binary files /dev/null and b/04.系统编码/Frontend/public/images/empty.png differ diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue index 7cb74a6..8f8ab9e 100644 --- a/04.系统编码/Frontend/src/components/RamanLidar.vue +++ b/04.系统编码/Frontend/src/components/RamanLidar.vue @@ -989,7 +989,7 @@ export default { const prepareWatervaporColors = () => { return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66', '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'], - [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], true, true + [30, 28, 26, 24, 22, 20, 18, 16, 14, 12, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], true, true ); } diff --git a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue index 6545a5c..d5a2a9b 100644 --- a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue +++ b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue @@ -1,468 +1,739 @@ <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 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="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 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-row> - </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('landCoverTypes')" + :class="{'active': currentCategory === 'landCoverTypes'}">土地覆盖类型</span> + </el-col> + </el-row> + </div> + <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-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-row> + </div> + </div> + + <div class="container panel synergy-container"> + <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-monitor'"> + <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'"> + <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="container panel synergy-container"> - <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-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 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" + :preview-src-list="item.preview" + :initial-index="0" + fit="contain" + > + <template #error> + <div class="image-slot"> + <img src="/images/null-picture.png"/> </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 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"> - <el-col :span="12" 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> + <p class="image-tip">暂无图片</p> + </template> + <template #placeholder> + <div class="image-placeholder">正在加载...</div> + </template> + </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'; - - 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: [] - }], - urls: [] - }) - - 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); - } - options.urls = values; +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: [] + }], + 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: [] + } + ] + }) - const initImage = (tabName, elementName, type, index, values) => { - post("/image/convert", {url: SynergyEvaluationConfig.getUrl(tabName, elementName, type)}).then((response: any) => { - if (response.error != 0){ - return; - } + onMounted(() => { + setTimeout(() => { + changeElementCode(options.currentCategory, options.currentTime) + },500) + setImage(6, options.items, options.currentElement); + }) - 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 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 onElementClick = (element) => { - options.currentElement = element; - setImage(6, options.items, options.currentElement); - } + 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]; + }); + } - 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 onTabClick = (name) => { + options.currentTab = name; - const onTimeClick = (time) => { - options.currentTime = time; - } + 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 { + 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 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); - } + } - 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; - let canvas = document.createElement("canvas") as HTMLCanvasElement; - canvas.width = img.width; - canvas.height = img.height; - - let ctx = canvas.getContext("2d"); - let base64 = ''; - - img.setAttribute("crossOrigin",'Anonymous'); - img.onload = function() { - ctx.drawImage(img, 0, 0); - base64 = canvas.toDataURL("image/png"); - pictures.children[i].setAttribute('href', base64); - - let button: HTMLElement = pictures.children[i] as HTMLElement; - setTimeout(() => { - button.click(); - }, 500); - }; - } - } + const onElementClick = (element) => { + options.currentElement = element; + setImage(6, options.items, options.currentElement); + } - return { - ...toRefs(options), - onTabClick, - onElementClick, - onCategoryClick, - onSurfaceTemperatureClick, - onYearClick, - onTimeClick, - onSaveClick - } + const onCategoryClick = (category) => { + options.currentCategory = category; + changeElementCode(category, options.currentTime) + if (options.currentTab === 'element-change-trend') { + setImage(12, options.trendItems, options.currentCategory + '/' + options.currentSurfaceTemperatureTime); + } + else { + interpretation() + } + } + + const onTimeClick = (time) => { + options.currentTime = time; + changeElementCode(options.currentCategory, options.currentTime) + interpretation() + } + + const onSurfaceTemperatureClick = (value) => { + options.currentSurfaceTemperatureTime = value; + } + + const onYearClick = (year) => { + options.currentYear = year; + 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; + let canvas = document.createElement("canvas") as HTMLCanvasElement; + canvas.width = img.width; + canvas.height = img.height; + + let ctx = canvas.getContext("2d"); + let base64 = ''; + + img.setAttribute("crossOrigin", 'Anonymous'); + img.onload = function () { + ctx.drawImage(img, 0, 0); + base64 = canvas.toDataURL("image/png"); + pictures.children[i].setAttribute('href', base64); + + let button: HTMLElement = pictures.children[i] as HTMLElement; + setTimeout(() => { + button.click(); + }, 500); + }; + } + } + + 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, + onElementClick, + onCategoryClick, + onSurfaceTemperatureClick, + onYearClick, + onTimeClick, + onSaveClick + } + } +} </script> <style lang="less" scoped> - .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; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #ffffff; - .image-slot { - margin-top: 0; - } - } - } - } - } - .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; - align-items: center; - flex-direction: column; - justify-content: center; - } - - //&:nth-of-type(6n) { - // margin-right: 0; - //} - } - } +.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; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #ffffff; + + .image-slot { + margin-top: 0; } - .scroll { - overflow-y: scroll; } - .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; - z-index: 9999!important; - } } + } + } + + .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; + align-items: center; + flex-direction: column; + justify-content: center; + } + + //&:nth-of-type(6n) { + // margin-right: 0; + //} + } + } } - ::-webkit-scrollbar { - width: 8px; - border-radius: 4px; + + .scroll { + overflow-y: scroll; } - ::-webkit-scrollbar-track { - background-color: inherit; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + .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; + } + } + } } - ::-webkit-scrollbar-thumb { - background-color: #c3c9cd; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + .save-btn { + right: 0.2rem; + top: 0.2rem; + z-index: 9999 !important; } + } +} + +::-webkit-scrollbar { + width: 8px; + border-radius: 4px; +} + +::-webkit-scrollbar-track { + background-color: inherit; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb { + background-color: #c3c9cd; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} </style> diff --git a/04.系统编码/Frontend/src/router/index.ts b/04.系统编码/Frontend/src/router/index.ts index 3157156..da43b12 100644 --- a/04.系统编码/Frontend/src/router/index.ts +++ b/04.系统编码/Frontend/src/router/index.ts @@ -31,7 +31,6 @@ router.beforeEach((to,form,next)=>{ next('/Login') } } - }) -export default router; \ No newline at end of file +export default router; diff --git a/04.系统编码/Frontend/src/uilts/Config.ts b/04.系统编码/Frontend/src/uilts/Config.ts index 6662a4e..a34879d 100644 --- a/04.系统编码/Frontend/src/uilts/Config.ts +++ b/04.系统编码/Frontend/src/uilts/Config.ts @@ -5,7 +5,8 @@ export class Config { // public static url: string = ""; // public static parentUrl: string = "http://10.124.102.10:8002/product/picture"; public static url: string = "http://localhost:8002"; - public static parentUrl: string = "http://112.124.40.88:8999/product/picture"; + // public static parentUrl: string = "http://112.124.40.88:8999/product/picture"; + public static parentUrl: string = "http://localhost:8002/product/picture"; // public static parentUrl: string = "http://rdp.nagr.com.cn:8082/product/picture"; } @@ -36,4 +37,4 @@ export class DecisionSupportConfig { public static getUrl(productName: string, imgName: string): string { return format('{2}/decision-support/{0}/{1}.tif', productName, imgName, this.url); } -} \ No newline at end of file +} diff --git a/04.系统编码/Frontend/src/uilts/storage.ts b/04.系统编码/Frontend/src/uilts/storage.ts index 76d53f7..a2a9f37 100644 --- a/04.系统编码/Frontend/src/uilts/storage.ts +++ b/04.系统编码/Frontend/src/uilts/storage.ts @@ -1,5 +1,4 @@ - export function setStaff(key: any, staff: any) { localStorage.setItem(key, JSON.stringify(staff)); }