diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue index 3bdb3b0..359ab2e 100644 --- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue +++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue @@ -59,7 +59,7 @@ <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="onChange" v-if="currentTab !== 'MWR'"> + <el-select v-model="currentHour" placeholder="" @change="onChange" v-show="currentTab !== 'MWR'"> <el-option v-for="item in hours" :key="item.value" @@ -69,19 +69,23 @@ </el-option> </el-select> <p class="unit" v-if="currentTab !== 'MWR'">时</p> - <div class="refresh-btn" @click="onRefreshClick" v-if="currentTab !== 'MWR'"> + <div class="refresh-btn" @click="onRefreshClick"> <img src="/images/refresh.png" /> </div> - <div class="btns-group" v-if="currentTab !== 'MWR'"> + <div class="btns-group"> <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span> <a @click="onDownloadClick">下载动画</a> - <a id="weboDownload" download :href="downloadSrc" style="display: none;">下载隐藏层</a> + <a id="weboDownload" download :href="downloadSrc" class="hide">下载隐藏层</a> </div> </div> <div class="picture-view"> <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> - <a :href="downloadImgUrl" download class="save-btn"><img src="/images/save.png" /></a> + <span class="save-btn" @click="onSaveClick" v-if="currentTab === 'MWR'"><img src="/images/save.png" /></span> + <a :href="downloadImgUrl" download class="save-btn" v-else><img src="/images/save.png" /></a> + <div class="download-pictures hide" id="pictures"> + <a v-for="(url, index) in urls" :key="index" download></a> + </div> <div class="picture-container contrast-picture-container" v-if="currentTab === 'MWR'"> <div class="picture"> <h2 class="title">原始数据</h2> @@ -106,8 +110,8 @@ <div class="picture"> <h2 class="title">异常值标记</h2> <el-image - :src="contrast.fillingImgUrl" - :preview-src-list="contrast.fillingImgPreview" + :src="contrast.checkImgUrl" + :preview-src-list="contrast.checkImgPreview" :initial-index="0" fit="contain" @load="onImageLoad" @@ -181,13 +185,16 @@ name: 'MicrowaveRadiation', setup() { let timer = null; + let dateFormat = '2021-12-05'; + let contrastDateFormat = '2021-11-10'; + let options = reactive({ currentTab: 'MWR', currentRegion: 'jiangning', currentType: 'TEMP', currentElement: 'TEMP', currentCategory: 'CAPE', - date: moment('2021-11-10').format('YYYY-MM-DD'), + date: moment(contrastDateFormat).format('YYYY-MM-DD'), currentHour: '23', hours: [], times: [], @@ -207,55 +214,71 @@ checkImgPreview: ['/images/picture.png'], fillingImgUrl: '/images/picture.png', fillingImgPreview: ['/images/picture.png'] - } + }, + urls: [] }) onMounted(() => { initHours(); initDays(); - initTimeLine(); - setTimeout(() => { - activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute()); - }, 50); + setTimeout(() => activeContrastImage(), 50); }) const onTabClick = (name) => { options.currentTab = name; if (options.currentTab === 'MWR') { + options.date = moment(contrastDateFormat).format('YYYY-MM-DD'); options.currentElement = 'TEMP'; - options.date = moment('2021-11-10').format('YYYY-MM-DD') - } - else { - options.date = moment('2021-12-05').format('YYYY-MM-DD'); + options.index = options.days.length - 1; + + initDays(); + setTimeout(() => activeContrastImage(), 50) + } else { if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') options.currentElement = 'TEMP'; else if (options.currentTab === 'shixu') options.currentElement = 'CAPE'; - } - + options.date = moment(dateFormat).format('YYYY-MM-DD'); + options.index = options.times.length - 1; + + initTimeLine(); + setTimeout(() => activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute()), 50) + } cancelActive(); - activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); } const onRegionClick = (region) => { options.currentRegion = region; cancelActive(); - activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); + + if (options.currentTab === 'MWR') + activeContrastImage(); + else + activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); } const onElementClick = (element) => { options.currentElement = element; cancelActive(); - activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); + + if (options.currentTab === 'MWR') + activeContrastImage(); + else + activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); } - const onCategoryClick = (category) => { - options.currentCategory = category; + const activeContrastImage = () => { + options.contrast.noQCImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_noQC', moment(options.currentTime, 'YYYY-MM-DD')); + options.contrast.noQCImgPreview = [options.contrast.noQCImgUrl]; + options.contrast.checkImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_check', moment(options.currentTime, 'YYYY-MM-DD')); + options.contrast.checkImgPreview = [options.contrast.checkImgUrl]; + options.contrast.fillingImgUrl = MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', moment(options.currentTime, 'YYYY-MM-DD')); + options.contrast.fillingImgPreview = [options.contrast.fillingImgUrl]; } const activeImage = (hour, minute) => { @@ -297,13 +320,14 @@ } const prepareParams = () => { + let time = options.currentTab === 'MWR' ? moment(options.days[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.days[options.days.length - 1].date).format("YYYYMMDDHHmmss") : moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"); return { model: 'weibo', station: options.currentRegion, elementCode: options.currentType, type: options.currentTab, - time: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"), - urls: prepareUrls() + time: time, + urls: options.currentTab === 'MWR' ? prepareContrastUrls() : prepareUrls() } } @@ -318,6 +342,20 @@ return urls; } + const prepareContrastUrls = () => { + let urls = []; + for(let i = 0, len = options.days.length; i < len; i++){ + let time = moment(options.days[i].date); + urls.push( + MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_noQC', time), + MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_check', time), + MicrowaveRadiationConfig.getUrl(options.currentRegion, options.currentTab + '_filling', time) + ); + } + + return urls; + } + const converToBase64 = (path) => { let img = new Image(); img.src = path; @@ -354,8 +392,7 @@ options.times.push({ hour: now.add(6, 'minute').format('HH时'), minute: now.format('mm'), - date: now.format('YYYY-MM-DD HH:mm'), - name: 'hour' + now.format('HH') + date: now.format('YYYY-MM-DD HH:mm') }); } options.index = options.times.length - 1; @@ -364,7 +401,6 @@ const initDays = () => { options.days = []; options.currentTime = moment(options.date).format('YYYY-MM-DD'); - console.log(options.currentTime) let now = moment(options.date).add(1, 'day'); @@ -376,7 +412,7 @@ } options.days.reverse(); - options.index = options.times.length - 1; + options.index = options.days.length - 1; } const initHours = () => { @@ -399,7 +435,7 @@ options.currentTime = time.date; options.index = index; cancelActive(); - activeImage(moment(time.date).hour(), moment(time.date).minute()); + activeContrastImage(); } const cancelActive = () => { @@ -409,19 +445,21 @@ const onPrevDayClick = () => { options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); - - initTimeLine(); - activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); } const onNextDayClick = () => { options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD'); - - initTimeLine(); - activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); } const onPrevImgClick = () => { + prevElement(); + } + + const onNextImgClick = () => { + nextElement(); + } + + const prevElement = () => { let element = getCurrentElement(); options.index--; @@ -430,8 +468,8 @@ setCurrentPlayElement(element); } - - const onNextImgClick = () => { + + const nextElement = () => { let element = getCurrentElement(); options.index++; @@ -443,14 +481,22 @@ const onRefreshClick = () => { cancelActive(); - let element = getCurrentElement();; + let element = getCurrentElement(); - options.currentHour = '23'; - options.date = moment('2021-12-05').format('YYYY-MM-DD'); - options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm'); + if (options.currentTab === 'MWR') { + options.date = moment(contrastDateFormat).format('YYYY-MM-DD'); + options.currentTime = options.date; + element.children[options.days.length - 1].classList.add('active'); - activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute()); - element.children[options.times.length - 1].classList.add('active'); + activeContrastImage(); + } else { + options.currentHour = '23'; + options.date = moment(dateFormat).format('YYYY-MM-DD'); + options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm'); + element.children[options.times.length - 1].classList.add('active'); + + activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute(30)); + } } const onPlayClick = () => { @@ -490,8 +536,15 @@ element.children[i].classList.remove('active'); element.children[options.index].classList.add('active'); - options.currentTime = options.times[options.index].date; - activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); + + if(options.currentTab === 'MWR') { + options.currentTime = options.days[options.index].date; + activeContrastImage(); + } + else { + options.currentTime = options.times[options.index].date; + activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); + } } const onChange = () => { @@ -499,12 +552,40 @@ activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute()); } + const onSaveClick = () => { + let pictures = document.getElementById('pictures'); + options.urls = [options.contrast.noQCImgUrl, options.contrast.checkImgUrl, options.contrast.fillingImgUrl]; + + console.log(options.urls) + for (let i = 0; i < options.urls.length; i++) { + let img = new Image(); + img.src = options.urls[i]; + 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); + }; + } + } + return { ...toRefs(options), onTabClick, onRegionClick, onElementClick, - onCategoryClick, onTimeClick, onDayClick, onPrevDayClick, @@ -515,7 +596,8 @@ onPlayClick, onChange, onImageLoad, - onDownloadClick + onDownloadClick, + onSaveClick } } } diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less index 679d6f6..f8fa1ba 100644 --- a/04.系统编码/Frontend/src/index.less +++ b/04.系统编码/Frontend/src/index.less @@ -465,4 +465,8 @@ img { z-index: 10; } } +} + +.hide { + display: none !important; } \ No newline at end of file