commit

3 years ago · 1010c53c9b
6 changed files with 89 additions and 14 deletions
--- a/04.系统编码/Frontend/index.html
+++ b/04.系统编码/Frontend/index.html
@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vite App</title>
+  <title>南京生态环境评估决策平台</title>
 </head>
 <body>
  <div id="app"></div>
--- a/04.系统编码/Frontend/public/favicon.ico
+++ b/04.系统编码/Frontend/public/favicon.ico
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@ -68,13 +68,13 @@
                </div>
                <div class="btns-group">
                    <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
-                    <span>下载动画</span>
+                    <a @click="onDownloadClick">下载动画</a>  <!-- :href=""-->
                </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="/images/picture1.png" download class="save-btn"><img src="/images/save.png" /></a>
+                <a :href="downloadImgUrl" download class="save-btn"><img src="/images/save.png" /></a>
                <div class="picture-container">
                    <h2 class="title">{{title}}</h2>
                    <div class="picture">
@ -83,6 +83,7 @@
                            :preview-src-list="srcList"
                            :initial-index="0"
                            fit="contain"
+                            @load="onImageLoad"
                        >
                            <template #error>
                                <div class="image-slot">
@ -122,6 +123,7 @@
                times: [],
                currentTime: null,
                imgUrl: '/images/default-picture.png',
+                downloadImgUrl: '/images/default-picture.png',
                srcList: [],
                isPlay: false,
                title: null,
@ -190,6 +192,42 @@
                options.srcList = [options.imgUrl];
            }

+            const onImageLoad = (event) => {
+                if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
+                    converToBase64(options.imgUrl);
+                else
+                    return
+            }
+
+            const onDownloadClick = () => {
+                let params = {
+                    model: 'weibo',
+                    station: options.currentRegion,
+                    element: options.currentElement,
+                    type: options.currentTab,
+                    time: [options.times[0].date, options.times[options.times.length - 1].date],
+                    urls: []
+                }
+            }
+
+            const converToBase64 = (path) => {
+                let img = new Image();
+                img.src = path;
+                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");
+                    options.downloadImgUrl = base64;
+                };
+            }
+
            const initTimeLine = () => {
                options.times = [];
                options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm');
@ -292,7 +330,7 @@
                        options.index = 0;

                    setCurrentPlayElement(element);
-                }, 2000)
+                }, 5000)
            }

            const clearTimer = () => {
@ -333,7 +371,9 @@
                onNextImgClick,
                onRefreshClick,
                onPlayClick,
-                onChange
+                onChange,
+                onImageLoad,
+                onDownloadClick
            }
        }
    }
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@ -49,13 +49,13 @@
                </div>
                <div class="btns-group">
                    <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
-                    <span>下载动画</span>
+                    <a @click="onDownloadClick">下载动画</a>  <!-- :href=""-->
                </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>
-                <span class="save-btn"><img src="/images/save.png" /></span>
+                <a :href="downloadImgUrl" download class="save-btn"><img src="/images/save.png" /></a>
                <div class="picture-container">
                    <h2 class="title">{{title}}</h2>
                    <div class="picture">
@ -64,6 +64,7 @@
                        :preview-src-list="srcList"
                        :initial-index="1"
                        fit="contain"
+                        @load="onImageLoad"
                        >
                            <template #error>
                                <div class="image-slot">
@ -101,6 +102,7 @@
                times: [],
                currentTime: null,
                imgUrl: '/images/default-picture.png',
+                downloadImgUrl: '/images/default-picture.png',
                srcList: [],
                isPlay: false,
                title: null,
@ -143,6 +145,37 @@
                options.srcList = [options.imgUrl];
            }

+            const onImageLoad = (event) => {
+                if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
+                    converToBase64(options.imgUrl);
+                else
+                    return
+            }
+
+            const onDownloadClick = () => {
+                let params = {
+                    station: options.currentRegion
+                }
+            }
+
+            const converToBase64 = (path) => {
+                let img = new Image();
+                img.src = path;
+                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");
+                    options.downloadImgUrl = base64;
+                };
+            }
+
            const initTimeLine = () => {
                options.times = [];
                options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm');
@ -245,7 +278,7 @@
                        options.index = 0;

                    setCurrentPlayElement(element);
-                }, 2000)
+                }, 5000)
            }

            const clearTimer = () => {
@ -284,7 +317,9 @@
                onNextImgClick,
                onRefreshClick,
                onPlayClick,
-                onChange
+                onChange,
+                onImageLoad,
+                onDownloadClick
            }
        }
    }
--- a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
+++ b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
@ -50,7 +50,7 @@
            </div>
        </div>
        <div class="container panel synergy-container">
-            <span class="save-btn"><img src="/images/save.png" /></span>
+            <span class="save-btn" ><img src="/images/save.png" /></span>
            <div class="element-select" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'">
                <div class="surface-temperature" v-if="currentTab === 'element-change-trend'">
                    <span @click="onSurfaceTemperatureClick('time0130')" :class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度（01:30）</span>
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@ -323,7 +323,7 @@ img {
            }

            .btns-group {
-                span {
+                span, a {
                    width: 0.88rem;
                    height: 0.33rem;
                    line-height: 0.33rem;
@ -332,10 +332,10 @@ img {
                    border-radius: 4px;
                    cursor: pointer;
                    background-color: #ECF4FF;
+                }

-                    &:last-of-type {
-                        margin-left: 0.06rem;
-                    }
+                a {
+                    margin-left: 0.06rem;
                }
            }
        }