From 8f3a6171dc4ff3cc8180aca4df828ef7e41c3953 Mon Sep 17 00:00:00 2001
From: hehongxing <hehongxing@pc.com>
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 @@
                     <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