diff --git a/04.系统编码/Frontend/package-lock.json b/04.系统编码/Frontend/package-lock.json
index 412ca60..ed66113 100644
--- a/04.系统编码/Frontend/package-lock.json
+++ b/04.系统编码/Frontend/package-lock.json
@@ -4404,6 +4404,11 @@
"duplexer": "0.1.1"
}
},
+ "browser-tiff.js": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmmirror.com/browser-tiff.js/download/browser-tiff.js-1.0.1.tgz",
+ "integrity": "sha1-XbeQO58jBJL4Tl9bZqwL55H70KI="
+ },
"buffer": {
"version": "5.7.1",
"resolved": "https://registry.npm.taobao.org/buffer/download/buffer-5.7.1.tgz?cache=0&sync_timestamp=1606098189689&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbuffer%2Fdownload%2Fbuffer-5.7.1.tgz",
diff --git a/04.系统编码/Frontend/package.json b/04.系统编码/Frontend/package.json
index 7f02dec..7cecb78 100644
--- a/04.系统编码/Frontend/package.json
+++ b/04.系统编码/Frontend/package.json
@@ -7,6 +7,7 @@
},
"dependencies": {
"axios": "^0.21.4",
+ "browser-tiff.js": "^1.0.1",
"element-plus": "^1.2.0-beta.4",
"moment": "^2.29.1",
"qs": "^6.10.1",
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/111.tif b/04.系统编码/Frontend/public/images/ecological-environment/111.tif
new file mode 100644
index 0000000..314bc01
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/111.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/albedo.tif
new file mode 100644
index 0000000..4e6f148
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/evaporation.tif
new file mode 100644
index 0000000..abba1cd
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature0130.tif
new file mode 100644
index 0000000..c547d43
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1030.tif
new file mode 100644
index 0000000..41ff39b
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1330.tif
new file mode 100644
index 0000000..fed6550
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature2230.tif
new file mode 100644
index 0000000..3ad93c7
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/EVI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/albedo.tif
new file mode 100644
index 0000000..54eb05f
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/evaporation.tif
new file mode 100644
index 0000000..635139d
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature0130.tif
new file mode 100644
index 0000000..845d6d8
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1030.tif
new file mode 100644
index 0000000..a06bbbe
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1330.tif
new file mode 100644
index 0000000..c1f82da
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature2230.tif
new file mode 100644
index 0000000..156df3d
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/LAI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/albedo.tif
new file mode 100644
index 0000000..833069e
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/evaporation.tif
new file mode 100644
index 0000000..53cc17a
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature0130.tif
new file mode 100644
index 0000000..314bc01
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1030.tif
new file mode 100644
index 0000000..d8a8c05
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1330.tif
new file mode 100644
index 0000000..737a197
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature2230.tif
new file mode 100644
index 0000000..1dbdd3a
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-change/NDVI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/albedo.tif
new file mode 100644
index 0000000..0bebb03
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/evaporation.tif
new file mode 100644
index 0000000..5e1f03f
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature0130.tif
new file mode 100644
index 0000000..db55c14
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1030.tif
new file mode 100644
index 0000000..37eb92a
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1330.tif
new file mode 100644
index 0000000..8a79e8d
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature2230.tif
new file mode 100644
index 0000000..79b47d1
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/EVI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/albedo.tif
new file mode 100644
index 0000000..24ad44f
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/evaporation.tif
new file mode 100644
index 0000000..dc78ad6
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature0130.tif
new file mode 100644
index 0000000..062e1df
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1030.tif
new file mode 100644
index 0000000..b372661
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1330.tif
new file mode 100644
index 0000000..0167eb2
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature2230.tif
new file mode 100644
index 0000000..bd0408b
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/LAI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/albedo.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/albedo.tif
new file mode 100644
index 0000000..a9d7655
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/albedo.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/evaporation.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/evaporation.tif
new file mode 100644
index 0000000..72ec2e0
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/evaporation.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature0130.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature0130.tif
new file mode 100644
index 0000000..c5b4f4a
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature0130.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1030.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1030.tif
new file mode 100644
index 0000000..228fe88
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1030.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1330.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1330.tif
new file mode 100644
index 0000000..d5be6b9
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature1330.tif differ
diff --git a/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature2230.tif b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature2230.tif
new file mode 100644
index 0000000..e6568bb
Binary files /dev/null and b/04.系统编码/Frontend/public/images/ecological-environment/plant-distribute/NDVI/temperature2230.tif differ
diff --git a/04.系统编码/Frontend/public/images/null-picture.png b/04.系统编码/Frontend/public/images/null-picture.png
new file mode 100644
index 0000000..41adcdc
Binary files /dev/null and b/04.系统编码/Frontend/public/images/null-picture.png differ
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index b30f465..1a05f03 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -4,17 +4,17 @@
垂直廓线
<img src="/images/line.png" v-if="currentTab === 'kuoxian'" />
</div>
- <div class="tab-item" @click="onTabClick('对流指数')" :class="{'active': currentTab === '对流指数'}">
+ <div class="tab-item" @click="onTabClick('shixu')" :class="{'active': currentTab === 'shixu'}">
对流指数
- <img src="/images/line.png" v-if="currentTab === '对流指数'" />
+ <img src="/images/line.png" v-if="currentTab === 'shixu'" />
</div>
- <div class="tab-item" @click="onTabClick('T-logP图')" :class="{'active': currentTab === 'T-logP图'}">
+ <div class="tab-item" @click="onTabClick('T-logP')" :class="{'active': currentTab === 'T-logP'}">
T-logP图
- <img src="/images/line.png" v-if="currentTab === 'T-logP图'" />
+ <img src="/images/line.png" v-if="currentTab === 'T-logP'" />
</div>
- <div class="tab-item" @click="onTabClick('BP反演产品')" :class="{'active': currentTab === 'BP反演产品'}">
+ <div class="tab-item" @click="onTabClick('BPFY')" :class="{'active': currentTab === 'BPFY'}">
BP反演产品
- <img src="/images/line.png" v-if="currentTab === 'BP反演产品'" />
+ <img src="/images/line.png" v-if="currentTab === 'BPFY'" />
</div>
</div>
<div class="main">
@@ -29,18 +29,13 @@
<el-col :span="8"><span @click="onRegionClick('lishui')" :class="{'active': currentRegion === 'lishui'}">溧水</span></el-col>
</el-row>
</div>
- <div class="menu-item" v-if="currentTab === 'kuoxian'">
+ <div class="menu-item" v-if="currentTab === 'kuoxian' || currentTab === 'shixu'">
<h2 class="tip">要素选择</h2>
<el-row :gutter="12">
- <el-col :span="8"><span @click="onElementClick('TEMP')" :class="{'active': currentElement === 'TEMP'}">温度</span></el-col>
- <el-col :span="8"><span @click="onElementClick('RH')" :class="{'active': currentElement === 'RH'}">湿度</span></el-col>
- </el-row>
- </div>
- <div class="menu-item" v-if="currentTab === '对流指数'">
- <h2 class="tip">要素选择</h2>
- <el-row :gutter="12">
- <el-col :span="8"><span @click="onCategoryClick('CAPE')" :class="{'active': currentCategory === 'CAPE'}">CAPE</span></el-col>
- <el-col :span="8"><span @click="onCategoryClick('CIN')" :class="{'active': currentCategory === 'CIN'}">CIN</span></el-col>
+ <el-col :span="8" v-if="currentTab === 'kuoxian'"><span @click="onElementClick('TEMPERATURE', 'TEMP')" :class="{'active': currentElement === 'TEMPERATURE'}">温度</span></el-col>
+ <el-col :span="8" v-if="currentTab === 'kuoxian'"><span @click="onElementClick('HUMIDITY', 'RH')" :class="{'active': currentElement === 'HUMIDITY'}">湿度</span></el-col>
+ <el-col :span="8" v-if="currentTab === 'shixu'"><span @click="onElementClick('CAPE时序图', 'CAPE')" :class="{'active': currentElement === 'CAPE时序图'}">CAPE</span></el-col>
+ <el-col :span="8" v-if="currentTab === 'shixu'"><span @click="onElementClick('CIN时序图', 'CIN')" :class="{'active': currentElement === 'CIN时序图'}">CIN</span></el-col>
</el-row>
</div>
</div>
@@ -49,16 +44,16 @@
<div class="times">
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
<span class="hour">{{time.hour}}</span>
- <span class="minute" @click="onTimeClick(time)">{{time.minute}}</span>
+ <span class="minute" @click="onTimeClick(time, index)">{{time.minute}}</span>
</div>
</div>
- <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker" @change="onDateChange">
+ <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker" @change="onChange">
</el-date-picker>
<div class="control-btn">
<span @click="onPrevDayClick"><img src="/images/prev.png" /></span>
<span @click="onNextDayClick"><img src="/images/next.png" /></span>
</div>
- <el-select v-model="currentHour" placeholder="" @change="onHourChange">
+ <el-select v-model="currentHour" placeholder="" @change="onChange">
<el-option
v-for="item in hours"
:key="item.value"
@@ -68,11 +63,11 @@
</el-option>
</el-select>
<p class="unit">时</p>
- <div class="refresh-btn">
+ <div class="refresh-btn" @click="onRefreshClick">
<img src="/images/refresh.png" />
</div>
<div class="btns-group">
- <span>播放动画</span>
+ <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
<span>下载动画</span>
</div>
</div>
@@ -80,15 +75,23 @@
<span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>
<span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>
<span class="save-btn"><img src="/images/save.png" /></span>
- <h2 class="title">{{title}}</h2>
- <div class="picture">
- <el-image
- :src="imgUrl"
- :preview-src-list="srcList"
- :initial-index="1"
- fit="contain"
- >
- </el-image>
+ <div class="picture-container">
+ <h2 class="title">{{title}}</h2>
+ <div class="picture">
+ <el-image
+ :src="imgUrl"
+ :preview-src-list="srcList"
+ :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>
+ </div>
</div>
</div>
</div>
@@ -103,40 +106,70 @@
export default {
name: 'MicrowaveRadiation',
setup() {
+ let timer = null;
let options = reactive({
currentTab: 'kuoxian',
currentRegion: 'jiangning',
- currentElement: 'TEMP',
+ currentType: 'TEMP',
+ currentElement: 'TEMPERATURE',
currentCategory: 'CAPE',
- date: moment().format('YYYY-MM-DD'),
+ date: moment('2020-07-01').format('YYYY-MM-DD'),
currentHour: '10',
hours: [],
times: [],
currentTime: null,
imgUrl: null,
- srcList: ['/images/picture.png'],
+ srcList: [],
isPlay: false,
title: null,
- test: []
+ index: 0
})
onMounted(() => {
initHours();
initTimeLine();
- activeImage();
- setTitle(moment(options.date, 'YYYY-MM-DD').hour(parseInt(options.currentHour)))
+ setTitle(moment(options.date, 'YYYY-MM-DD').hour(parseInt(options.currentHour)));
+ setTimeout(() => {
+ activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute());
+ }, 50);
})
const onTabClick = (name) => {
options.currentTab = name;
+ if (options.currentTab === 'kuoxian') {
+ options.currentType = 'TEMP';
+ options.currentElement = 'TEMPERATURE';
+ } else if (options.currentTab === 'shixu') {
+ options.currentType = 'CAPE';
+ options.currentElement = 'CAPE时序图';
+ } else if (options.currentTab === 'T-logP') {
+ options.currentType = 'T-logP';
+ options.currentElement = 'T-logP';
+ } else {
+ options.currentType = 'BPFY';
+ options.currentElement = 'BPFY';
+ }
+
+ cancelActive();
+ setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+ activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
const onRegionClick = (region) => {
options.currentRegion = region;
+
+ cancelActive();
+ setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+ activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
- const onElementClick = (element) => {
+ const onElementClick = (element, type) => {
options.currentElement = element;
+ options.currentType = type;
+
+ cancelActive();
+ setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+ activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
const onCategoryClick = (category) => {
@@ -144,14 +177,14 @@
}
const setTitle = (date) => {
- console.log(date)
options.title = date.format('YYYY.MM.DD HH:mm') + ' ' + options.currentElement;
}
- const activeImage = () => {
- console.log(MicrowaveRadiationConfig.getUrl("jingning", "kuoxian_TEMP", moment()));
- options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_' + options.currentElement, moment(options.date).hour(parseInt(options.currentHour)).minute(0));
- console.log(options.imgUrl)
+ const activeImage = (hour, minute) => {
+ let time = moment(options.date).hour(hour).minute(minute);
+ let type = (options.currentTab === 'T-logP' || options.currentTab === 'BPFY') ? options.currentTab : (options.currentTab + '_' + options.currentType);
+ options.imgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, type, time);
+ options.srcList = [options.imgUrl];
}
const initTimeLine = () => {
@@ -176,6 +209,7 @@
name: 'hour' + now.format('HH')
});
}
+ options.index = options.times.length - 1;
}
const initHours = () => {
@@ -187,10 +221,17 @@
}
}
- const onTimeClick = (time) => {
+ const onTimeClick = (time, index) => {
options.currentTime = time.date;
+ options.index = index;
+ cancelActive();
setTitle(moment(time.date, 'YYYY-MM-DD HH:mm'));
- activeImage();
+ activeImage(moment(time.date).hour(), moment(time.date).minute());
+ }
+
+ const cancelActive = () => {
+ clearTimer();
+ options.isPlay = false;
}
const onPrevDayClick = () => {
@@ -202,21 +243,78 @@
}
const onPrevImgClick = () => {
+ console.log(options.index);
+ let element = getCurrentElement();
+
+ options.index--;
+ if (options.index < 0)
+ options.index = element.childElementCount - 1;
+ setCurrentPlayElement(element);
}
const onNextImgClick = () => {
+ let element = getCurrentElement();
+
+ options.index++;
+ if (options.index > element.childElementCount - 1)
+ options.index = 0;
+ setCurrentPlayElement(element);
}
- const onHourChange = () => {
- initTimeLine();
- setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+ const onRefreshClick = () => {
+ cancelActive();
+ options.date = moment('2020-07-01').format('YYYY-MM-DD');
+ options.currentHour = '10';
+ }
+
+ const onPlayClick = () => {
+ options.isPlay = !options.isPlay;
+ if (options.isPlay) {
+ timeExcute();
+ } else {
+ clearTimer();
+ }
+ }
+
+ const timeExcute = () => {
+ clearTimer();
+
+ let element = getCurrentElement();;
+
+ timer = setInterval( () => {
+ options.index++;
+ if (options.index > element.childElementCount - 1)
+ options.index = 0;
+
+ setCurrentPlayElement(element);
+ }, 2000)
}
- const onDateChange = () => {
+ const clearTimer = () => {
+ if (timer)
+ clearInterval(timer);
+ }
+
+ const getCurrentElement = () => {
+ return document.querySelector('.times');
+ }
+
+ const setCurrentPlayElement = (element) => {
+ for(let i = 0; i < element.childElementCount; i++)
+ element.children[i].classList.remove('active');
+
+ element.children[options.index].classList.add('active');
+ options.currentTime = options.times[options.index].date;
+ setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD HH:mm'));
+ activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
+ }
+
+ const onChange = () => {
initTimeLine();
setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+ activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
return {
@@ -230,8 +328,9 @@
onNextDayClick,
onPrevImgClick,
onNextImgClick,
- onHourChange,
- onDateChange
+ onRefreshClick,
+ onPlayClick,
+ onChange
}
}
}
@@ -239,4 +338,3 @@
<style lang="less" scoped>
</style>
-
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 15fbe96..070d7aa 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -5,18 +5,18 @@
<div class="menu-item">
<h2 class="tip">区域选择</h2>
<el-row :gutter="12">
- <el-col :span="8"><span @click="onRegionClick('江宁')" :class="{'active': currentRegion === '江宁'}">江宁</span></el-col>
- <el-col :span="8"><span @click="onRegionClick('六合')" :class="{'active': currentRegion === '六合'}">六合</span></el-col>
- <el-col :span="8"><span @click="onRegionClick('浦口')" :class="{'active': currentRegion === '浦口'}">浦口</span></el-col>
+ <el-col :span="8"><span @click="onRegionClick('jiangning')" :class="{'active': currentRegion === 'jiangning'}">江宁</span></el-col>
+ <el-col :span="8"><span @click="onRegionClick('liuhe')" :class="{'active': currentRegion === 'liuhe'}">六合</span></el-col>
+ <el-col :span="8"><span @click="onRegionClick('pukou')" :class="{'active': currentRegion === 'pukou'}">浦口</span></el-col>
</el-row>
</div>
<div class="menu-item">
<h2 class="tip">要素选择</h2>
<el-row :gutter="12">
- <el-col :span="24"><span @click="onElementClick('激光雷达比')" :class="{'active': currentElement === '激光雷达比'}">激光雷达比</span></el-col>
- <el-col :span="24"><span @click="onElementClick('消光系数')" :class="{'active': currentElement === '消光系数'}">消光系数</span></el-col>
- <el-col :span="24"><span @click="onElementClick('气溶胶浓度')" :class="{'active': currentElement === '气溶胶浓度'}">气溶胶浓度</span></el-col>
- <el-col :span="24"><span @click="onElementClick('云和气溶胶识别')" :class="{'active': currentElement === '云和气溶胶识别'}">云和气溶胶识别</span></el-col>
+ <el-col :span="24"><span @click="onElementClick('lidar-ratio', '激光雷达比')" :class="{'active': currentElement === 'lidar-ratio'}">激光雷达比</span></el-col>
+ <el-col :span="24"><span @click="onElementClick('extinction-coefficient', '消光系数')" :class="{'active': currentElement === 'extinction-coefficient'}">消光系数</span></el-col>
+ <el-col :span="24"><span @click="onElementClick('aerosol-conc', '气溶胶浓度')" :class="{'active': currentElement === 'aerosol-conc'}">气溶胶浓度</span></el-col>
+ <el-col :span="24"><span @click="onElementClick('cloud-aerosol-identify', '云和气溶胶识别')" :class="{'active': currentElement === 'cloud-aerosol-identify'}">云和气溶胶识别</span></el-col>
</el-row>
</div>
</div>
@@ -25,16 +25,16 @@
<div class="times">
<div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
<span class="hour">{{time.hour}}</span>
- <span class="minute" @click="onTimeClick(time)">{{time.minute}}</span>
+ <span class="minute" @click="onTimeClick(time, index)">{{time.minute}}</span>
</div>
</div>
- <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker">
+ <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker" @change="onChange">
</el-date-picker>
<div class="control-btn">
- <span><img src="/images/prev.png" /></span>
- <span><img src="/images/next.png" /></span>
+ <span @click="onPrevDayClick"><img src="/images/prev.png" /></span>
+ <span @click="onNextDayClick"><img src="/images/next.png" /></span>
</div>
- <el-select v-model="currentHour" placeholder="">
+ <el-select v-model="currentHour" @change="onChange">
<el-option
v-for="item in hours"
:key="item.value"
@@ -44,27 +44,29 @@
</el-option>
</el-select>
<p class="unit">时</p>
- <div class="refresh-btn">
+ <div class="refresh-btn" @click="onRefreshClick">
<img src="/images/refresh.png" />
</div>
<div class="btns-group">
- <span>播放动画</span>
+ <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
<span>下载动画</span>
</div>
</div>
<div class="picture-view">
- <span class="arrow arrow-prev"><img src="/images/prev-btn.png" /></span>
- <span class="arrow arrow-next"><img src="/images/next-btn.png" /></span>
+ <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>
+ <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>
<span class="save-btn"><img src="/images/save.png" /></span>
- <h2 class="title">2021.11.21 10:42 Temperature</h2>
- <div class="picture">
- <el-image
- src="/images/picture.png"
- :preview-src-list="srcList"
- :initial-index="1"
- fit="contain"
- >
- </el-image>
+ <div class="picture-container">
+ <h2 class="title">{{title}}</h2>
+ <div class="picture">
+ <el-image
+ :src="imgUrl"
+ :preview-src-list="srcList"
+ :initial-index="1"
+ fit="contain"
+ >
+ </el-image>
+ </div>
</div>
</div>
</div>
@@ -74,51 +76,79 @@
<script lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import moment from "moment";
+ import { RamanLidarConfig } from '../hooks/Config';
export default {
name: 'RamanLidar',
setup() {
+ let timer = null;
let options = reactive({
- currentRegion: '江宁',
- currentElement: '激光雷达比',
- date: new Date(),
+ currentRegion: 'jiangning',
+ currentElement: 'lidar-ratio',
+ currentType: '激光雷达比',
+ date: moment('2020-07-01').format('YYYY-MM-DD'),
currentHour: '10',
- hours: [{
- value: '10',
- label: '10'
- }, {
- value: '11',
- label: '11'
- }],
+ hours: [],
times: [],
currentTime: null,
- srcList: ['/images/picture.png']
+ imgUrl: null,
+ srcList: [],
+ isPlay: false,
+ title: null,
+ index: 0
})
onMounted(() => {
- initTimes();
+ initHours();
+ initTimeLine();
+ setTitle(moment(options.date, 'YYYY-MM-DD').hour(parseInt(options.currentHour)));
+ setTimeout(() => {
+ activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute());
+ }, 50);
})
const onRegionClick = (region) => {
options.currentRegion = region;
+
+ cancelActive();
+ setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+ activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
- const onElementClick = (element) => {
+ const onElementClick = (element, type) => {
options.currentElement = element;
+ options.currentType = type
+
+ cancelActive();
+ setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+ activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
+ }
+
+ const setTitle = (date) => {
+ options.title = date.format('YYYY.MM.DD HH:mm') + ' ' + options.currentType;
}
- const initTimes = () => {
- let now = moment();
+ const activeImage = (hour, minute) => {
+ let time = moment(options.date).hour(hour).minute(minute);
+ options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time);
+ options.srcList = [options.imgUrl];
+ }
+
+ const initTimeLine = () => {
+ options.times = [];
+ options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm');
+
+ let now = moment(options.date).hour(parseInt(options.currentHour) - 2);
+
let minute = now.minute();
const remainder = minute % 6;
if (remainder > 0){
now.minute(minute + (6 - remainder));
}
- options.currentTime = now.format('YYYY-MM-DD HH:mm');
now.minute(now.minute() - 6);
- for (let i = 0; i < 20 ; i++) {
+ for (let i = 0; i < 21 ; i++) {
options.times.push({
hour: now.add(6, 'minute').format('HH时'),
minute: now.format('mm'),
@@ -126,19 +156,126 @@
name: 'hour' + now.format('HH')
});
}
+ options.index = options.times.length - 1;
+ }
+
+ const initHours = () => {
+ for (let i = 0; i < 23; i++) {
+ options.hours.push({
+ value: i,
+ label: i < 10 ? '0' + i : i,
+ })
+ }
}
- const onTimeClick = (time) => {
- console.log(time.date)
+ const onTimeClick = (time, index) => {
options.currentTime = time.date;
- console.log(options.currentTime)
+ options.index = index;
+ cancelActive();
+ setTitle(moment(time.date, 'YYYY-MM-DD HH:mm'));
+ activeImage(moment(time.date).hour(), moment(time.date).minute());
+ }
+
+ const cancelActive = () => {
+ clearTimer();
+ options.isPlay = false;
+ }
+
+ const onPrevDayClick = () => {
+ options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD')
+ }
+
+ const onNextDayClick = () => {
+ options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
+ }
+
+ const onPrevImgClick = () => {
+ console.log(options.index);
+ let element = getCurrentElement();
+
+ options.index--;
+ if (options.index < 0)
+ options.index = element.childElementCount - 1;
+
+ setCurrentPlayElement(element);
+ }
+
+ const onNextImgClick = () => {
+ let element = getCurrentElement();
+
+ options.index++;
+ if (options.index > element.childElementCount - 1)
+ options.index = 0;
+
+ setCurrentPlayElement(element);
+ }
+
+ const onRefreshClick = () => {
+ cancelActive();
+ options.date = moment('2020-07-01').format('YYYY-MM-DD');
+ options.currentHour = '10';
+ }
+
+ const onPlayClick = () => {
+ options.isPlay = !options.isPlay;
+ if (options.isPlay) {
+ timeExcute();
+ } else {
+ clearTimer();
+ }
+ }
+
+ const timeExcute = () => {
+ clearTimer();
+
+ let element = getCurrentElement();;
+
+ timer = setInterval( () => {
+ options.index++;
+ if (options.index > element.childElementCount - 1)
+ options.index = 0;
+
+ setCurrentPlayElement(element);
+ }, 2000)
+ }
+
+ const clearTimer = () => {
+ if (timer)
+ clearInterval(timer);
+ }
+
+ const getCurrentElement = () => {
+ return document.querySelector('.times');
+ }
+
+ const setCurrentPlayElement = (element) => {
+ for(let i = 0; i < element.childElementCount; i++)
+ element.children[i].classList.remove('active');
+
+ element.children[options.index].classList.add('active');
+ options.currentTime = options.times[options.index].date;
+ setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD HH:mm'));
+ activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
+ }
+
+ const onChange = () => {
+ initTimeLine();
+ setTitle(moment(options.date).hour(parseInt(options.currentHour)));
+ activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
}
return {
...toRefs(options),
onRegionClick,
onElementClick,
- onTimeClick
+ onTimeClick,
+ onPrevDayClick,
+ onNextDayClick,
+ onPrevImgClick,
+ onNextImgClick,
+ onRefreshClick,
+ onPlayClick,
+ onChange
}
}
}
diff --git a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
index 8b98108..91677f9 100644
--- a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
+++ b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
@@ -1,12 +1,12 @@
<template>
<div class="tabs">
- <div class="tab-item" @click="onTabClick('植被变化对气候的影响')" :class="{'active': currentTab === '植被变化对气候的影响'}">
+ <div class="tab-item" @click="onTabClick('plant-change')" :class="{'active': currentTab === 'plant-change'}">
植被变化对气候的影响
- <img src="/images/line.png" v-if="currentTab === '植被变化对气候的影响'" />
+ <img src="/images/line.png" v-if="currentTab === 'plant-change'" />
</div>
- <div class="tab-item" @click="onTabClick('植被分布对气候的影响')" :class="{'active': currentTab === '植被分布对气候的影响'}">
+ <div class="tab-item" @click="onTabClick('plant-distribute')" :class="{'active': currentTab === 'plant-distribute'}">
植被分布对气候的影响
- <img src="/images/line.png" v-if="currentTab === '植被分布对气候的影响'" />
+ <img src="/images/line.png" v-if="currentTab === 'plant-distribute'" />
</div>
<div class="tab-item" @click="onTabClick('植被和气候要素变化趋势')" :class="{'active': currentTab === '植被和气候要素变化趋势'}">
植被和气候要素变化趋势
@@ -19,12 +19,12 @@
</div>
<div class="main">
<div class="menu panel">
- <div class="menu-item" v-if="currentTab === '植被变化对气候的影响' || currentTab === '植被分布对气候的影响'">
+ <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 === '植被和气候要素的监测'">
@@ -83,12 +83,12 @@
<span @click="onYearClick('多年平均值2000-2020')" :class="{'active': currentYear === '多年平均值2000-2020'}">多年平均值2000-2020</span>
</div>
</div>
- <div class="picture-view synergy-picture-view" v-if="currentTab === '植被变化对气候的影响' || currentTab === '植被分布对气候的影响'">
+ <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-image
- src="/images/picture1.png"
+ :src="imgUrl"
:preview-src-list="srcList"
:initial-index="1"
fit="contain"
@@ -96,7 +96,7 @@
</el-image>
</el-col>
<el-col :span="8">
- <h2 class="title">地表温度（01:30）</h2>
+ <h2 class="title">地表温度（10:30）</h2>
<el-image
src="/images/picture2.png"
:preview-src-list="srcList"
@@ -106,7 +106,7 @@
</el-image>
</el-col>
<el-col :span="8">
- <h2 class="title">地表温度（01:30）</h2>
+ <h2 class="title">地表温度（13:30）</h2>
<el-image
src="/images/picture1.png"
:preview-src-list="srcList"
@@ -116,7 +116,7 @@
</el-image>
</el-col>
<el-col :span="8">
- <h2 class="title">地表温度（01:30）</h2>
+ <h2 class="title">地表温度（22:30）</h2>
<el-image
src="/images/picture1.png"
:preview-src-list="srcList"
@@ -126,7 +126,7 @@
</el-image>
</el-col>
<el-col :span="8">
- <h2 class="title">地表温度（01:30）</h2>
+ <h2 class="title">反照率</h2>
<el-image
src="/images/picture1.png"
:preview-src-list="srcList"
@@ -136,7 +136,7 @@
</el-image>
</el-col>
<el-col :span="8">
- <h2 class="title">地表温度（01:30）</h2>
+ <h2 class="title">蒸散发</h2>
<el-image
src="/images/picture1.png"
:preview-src-list="srcList"
@@ -265,24 +265,61 @@
<script lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
- import moment from "moment";
+ import { format } from '../hooks/String';
+ import * as Tiff from 'browser-tiff.js';
+ import { SynergyEvaluationConfig } from '../hooks/Config';
export default {
name: 'SynergyEvaluation',
setup() {
let options = reactive({
- currentTab: '植被变化对气候的影响',
- currentElement: '归一化植被指数NDVI',
+ currentTab: 'plant-change',
+ currentElement: 'NDVI',
currentCategory: '地表温度LST',
currentTime: '地表温度（01:30）',
currentYear: '2000',
currentSurfaceTemperatureTime: '地表温度（01:30）',
- srcList: ['/images/picture1.png']
+ srcList: [],
+ imgUrl: null,
+ imgUrls: [],
+ items: [{
+ //'地表温度（10:30）', '地表温度（13:30）', '地表温度（22:30）', '反照率', '蒸散发',
+ title: '地表温度（01:30）',
+ type: 'temperature0130'
+ }]
})
onMounted(() => {
-
+ setImage();
})
+
+ 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 initImage = (tabName, elementName, type) => {
+ var xhr = new XMLHttpRequest();
+ xhr.responseType = 'arraybuffer';
+ xhr.open('GET', SynergyEvaluationConfig.getUrl(tabName, elementName, type));
+ xhr.onload = function (e) {
+ let tiff = new Tiff({buffer: xhr.response});
+ let canvas = tiff.toCanvas();
+ let image = new Image();
+ image.src = canvas.toDataURL("image/png");
+ options.imgUrl = image.src;
+ options.srcList = [image.src];
+ };
+ xhr.send();
+ }
const onTabClick = (name) => {
options.currentTab = name;
@@ -315,7 +352,7 @@
onCategoryClick,
onSurfaceTemperatureClick,
onYearClick,
- onTimeClick
+ onTimeClick,
}
}
}
diff --git a/04.系统编码/Frontend/src/hooks/Config.ts b/04.系统编码/Frontend/src/hooks/Config.ts
index 08a7a8e..6a758d5 100644
--- a/04.系统编码/Frontend/src/hooks/Config.ts
+++ b/04.系统编码/Frontend/src/hooks/Config.ts
@@ -1,4 +1,5 @@
import { Moment } from "moment";
+import { format } from "./String";
export class Config {
public static parentUrl: string = "http://112.124.40.88:8890/product/picture";
@@ -9,4 +10,21 @@ export class MicrowaveRadiationConfig {
public static getUrl(station: string, type: string, time: Moment): string {
return this.url+ '/' + station + '/' + type + '/' + time.format("YYYY/YYYYMM/YYYYMMDD/YYYYMMDDHHmmss.png");
}
+}
+
+export class RamanLidarConfig {
+ private static url: string = Config.parentUrl + "/radar";
+
+ public static getUrl(station: string, type: string, time: Moment): string {
+ return this.url+ '/' + station + '/' + type + '/' + time.format("YYYY/YYYYMM/YYYYMMDD/YYYYMMDDHHmmss.png");
+ }
+}
+
+export class SynergyEvaluationConfig {
+ public static url: string = "/images/ecological-environment/111.tif";
+
+ public static getUrl(tabName: string, elementName: string, type: string): string {
+ return format('/images/ecological-environment/{0}/{1}/{2}.tif', tabName, elementName, type)
+ //return this.url+ '/' + station + '/' + type + '/' + time.format("YYYY/YYYYMM/YYYYMMDD/YYYYMMDDHHmmss.png");
+ }
}
\ No newline at end of file
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index fb403c2..72707aa 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -351,6 +351,7 @@ img {
position: absolute;
top: 50%;
left: 0.3rem;
+ z-index: 10;
cursor: pointer;
transform: translateY(-50%);
@@ -366,22 +367,69 @@ img {
}
.title {
- padding: 0.4rem 0;
+ padding-bottom: 0.4rem;
line-height: 0.3rem;
text-align: center;
font-size: 0.3rem;
font-weight: bold;
}
+ .picture-container {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .picture {
+ height: 70%;
+
+ .el-image {
+ height: 100%;
+ }
+ }
+ }
+
.picture {
- width: 72%;
- height: calc(~"100% - 1.2rem");
+ width: 100%;
+ height: calc(~"100% - 1.1rem");
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
+ .el-image {
+ height: 90%;
+ margin: 0 auto;
+
+ .el-image__inner {
+ width: auto;
+ max-width: 100%;
+ margin: 0 auto;
+ }
+
+ .image-slot {
+ width: 1.5rem;
+ height: 1.5rem;
+ margin: 1rem auto 0 auto;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ background: #F7F8FA;
+
+ img {
+ width: 0.8rem;
+ height: 0.8rem;
+ margin: 0 auto;
+ }
+ }
+
+ .image-tip {
+ text-align: center;
+ margin-top: 10px;
+ }
+ }
+
.el-image-viewer__mask {
opacity: 0.8;
}