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; }