From 8f3a6171dc4ff3cc8180aca4df828ef7e41c3953 Mon Sep 17 00:00:00 2001 From: hehongxing Date: Wed, 8 Dec 2021 13:47:40 +0800 Subject: [PATCH] commit --- .../src/components/MicrowaveRadiation.vue | 180 +++++++++++++----- 04.系统编码/Frontend/src/index.less | 4 + 2 files changed, 135 insertions(+), 49 deletions(-) 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 @@ - +

-
+
-
+
{{isPlay ? '暂停动画' : '播放动画'}} 下载动画 - + 下载隐藏层
- + + +
+ +

原始数据

@@ -106,8 +110,8 @@

异常值标记

{ 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