diff --git a/04.系统编码/Backend/pom.xml b/04.系统编码/Backend/pom.xml
index 22bce2b..992203d 100644
--- a/04.系统编码/Backend/pom.xml
+++ b/04.系统编码/Backend/pom.xml
@@ -51,6 +51,7 @@
             1.0.29
         
 
+
     
 
     
diff --git a/04.系统编码/Backend/src/main/java/com/userinformation/backend/config/WebMvcConfig.java b/04.系统编码/Backend/src/main/java/com/userinformation/backend/config/WebMvcConfig.java
new file mode 100644
index 0000000..2debb5a
--- /dev/null
+++ b/04.系统编码/Backend/src/main/java/com/userinformation/backend/config/WebMvcConfig.java
@@ -0,0 +1,24 @@
+package com.userinformation.backend.config;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
+
+/**
+ * @describe: 虚拟目录配置
+ * @author: xiaowuler
+ * @createTime: 2021-12-03 09:33
+ */
+@Configuration
+public class WebMvcConfig extends WebMvcConfigurerAdapter {
+
+    @Value("${custom.image.path}")
+    private String path;
+
+    @Override
+    public void addResourceHandlers(ResourceHandlerRegistry registry) {
+        registry.addResourceHandler("/product/**").addResourceLocations("file:" + path + "/");
+    }
+}
diff --git a/04.系统编码/Backend/src/main/java/com/userinformation/backend/controller/ImageController.java b/04.系统编码/Backend/src/main/java/com/userinformation/backend/controller/ImageController.java
new file mode 100644
index 0000000..18bd322
--- /dev/null
+++ b/04.系统编码/Backend/src/main/java/com/userinformation/backend/controller/ImageController.java
@@ -0,0 +1,29 @@
+package com.userinformation.backend.controller;
+
+import java.io.IOException;
+
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import com.userinformation.backend.service.ImageService;
+import com.userinformation.backend.util.RequestResult;
+
+/**
+ * @describe: 图片处理控制层
+ * @author: xiaowuler
+ * @createTime: 2021-12-03 13:10
+ */
+@RestController
+@RequestMapping("image")
+public class ImageController {
+
+    private final ImageService imageService;
+    public ImageController(ImageService imageService){
+        this.imageService = imageService;
+    }
+
+    @PostMapping("convert")
+    public RequestResult convert(String url) throws IOException {
+        return RequestResult.success(imageService.convert(url));
+    }
+}
diff --git a/04.系统编码/Backend/src/main/java/com/userinformation/backend/service/ImageService.java b/04.系统编码/Backend/src/main/java/com/userinformation/backend/service/ImageService.java
new file mode 100644
index 0000000..3b979fa
--- /dev/null
+++ b/04.系统编码/Backend/src/main/java/com/userinformation/backend/service/ImageService.java
@@ -0,0 +1,43 @@
+package com.userinformation.backend.service;
+
+import javax.imageio.ImageIO;
+import java.awt.image.BufferedImage;
+import java.io.File;
+import java.io.IOException;
+import java.util.Locale;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+import org.springframework.util.Assert;
+
+/**
+ * @describe: 图片处理 逻辑层
+ * @author: xiaowuler
+ * @createTime: 2021-12-03 13:12
+ */
+@Service
+public class ImageService {
+
+    @Value("${custom.image.path}")
+    private String imagePath;
+
+    @Value("${custom.image.url}")
+    private String imageUrl;
+
+    private final static String TIF_FILE_SUFFIX = ".tif";
+    private final static String PNG_FILE_SUFFIX = ".png";
+
+    public String convert(String url) throws IOException {
+        String filepath = url.replace(imageUrl, imagePath);
+        File sourceFile = new File(filepath);
+        Assert.isTrue(sourceFile.exists(), "文件不存在");
+        Assert.isTrue(filepath.toLowerCase(Locale.ROOT).endsWith(TIF_FILE_SUFFIX), "文件格式不正确");
+        String targetFilePath = filepath.replace(TIF_FILE_SUFFIX, PNG_FILE_SUFFIX);
+        File targetFile = new File(targetFilePath);
+        if (!targetFile.exists()){
+            BufferedImage image = ImageIO.read(sourceFile);
+            ImageIO.write(image, "png", targetFile);
+        }
+        return targetFilePath.replace(imagePath, imageUrl);
+    }
+}
diff --git a/04.系统编码/Backend/src/main/resources/application.yml b/04.系统编码/Backend/src/main/resources/application.yml
index 0680ca7..69c8ccb 100644
--- a/04.系统编码/Backend/src/main/resources/application.yml
+++ b/04.系统编码/Backend/src/main/resources/application.yml
@@ -1,8 +1,12 @@
 server:
-  port: 8001
+  port: 8002
 spring:
   datasource:
     url: jdbc:mysql://112.124.40.88:33306/user_information?useUnicode=true&characteEncoding=utf-8
     username: root
     password: 3cqscbr@only1
     driver-class-name: com.mysql.cj.jdbc.Driver
+custom:
+  image:
+    url: http://112.124.40.88:8002/product
+    path: D:/Deployments/LamanRadar/product
diff --git a/04.系统编码/Backend/src/test/java/com/userinformation/backend/UserInformationApplicationTests.java b/04.系统编码/Backend/src/test/java/com/userinformation/backend/UserInformationApplicationTests.java
index e184ec9..6d25383 100644
--- a/04.系统编码/Backend/src/test/java/com/userinformation/backend/UserInformationApplicationTests.java
+++ b/04.系统编码/Backend/src/test/java/com/userinformation/backend/UserInformationApplicationTests.java
@@ -1,5 +1,11 @@
 package com.userinformation.backend;
 
+import javax.imageio.ImageIO;
+
+import java.awt.image.BufferedImage;
+import java.io.File;
+import java.io.IOException;
+
 import org.junit.jupiter.api.Test;
 import org.springframework.boot.test.context.SpringBootTest;
 
@@ -7,7 +13,11 @@ import org.springframework.boot.test.context.SpringBootTest;
 class UserInformationApplicationTests {
 
     @Test
-    void contextLoads() {
+    void contextLoads() throws IOException {
+        File inputFile = new File("C:\\Users\\xiaowuler\\Desktop\\images\\decision-support\\plan-advice\\control-experiment\\TFLD_Q2.tif");
+        File outputFile = new File("C:\\Users\\xiaowuler\\Desktop\\output.png");
+        BufferedImage image = ImageIO.read(inputFile);
+        ImageIO.write(image, "png", outputFile);
     }
 
 }
diff --git a/04.系统编码/Frontend/.idea/workspace.xml b/04.系统编码/Frontend/.idea/workspace.xml
index 2812014..da4dbb5 100644
--- a/04.系统编码/Frontend/.idea/workspace.xml
+++ b/04.系统编码/Frontend/.idea/workspace.xml
@@ -2,10 +2,20 @@
 
   
     
-      
-      
+      
+      
+      
+      
+      
+      
+      
+      
+      
       
+      
       
+      
+      
       
     
     
@@ -85,7 +95,7 @@
       
       
       
-      
+      
     
     
       1638357539757
diff --git a/04.系统编码/Frontend/src/components/DecisionSupport.vue b/04.系统编码/Frontend/src/components/DecisionSupport.vue
index 5f5d283..383a551 100644
--- a/04.系统编码/Frontend/src/components/DecisionSupport.vue
+++ b/04.系统编码/Frontend/src/components/DecisionSupport.vue
@@ -31,12 +31,15 @@
                         :initial-index="0"
                         fit="contain"
                         >
-                        
+                            
                                 
                                 暂无图片
                             
+                            
+                                正在加载...
+                            
                         
                     
                 
@@ -63,6 +66,7 @@
     import { onMounted, reactive, toRefs } from 'vue';
     import * as Tiff from 'browser-tiff.js';
     import { DecisionSupportConfig } from '../uilts/Config';
+import { post } from '../uilts/axios';
     
     export default {
         name: 'DecisionSupport',
@@ -73,32 +77,32 @@
                 items: [{
                     title: '比湿',
                     imgName: 'TFLD_Q2',
-                    imgUrl: '',
+                    imgUrl: '/images/null-picture.png',
                     preview: []
                 }, {
                     title: '风速和风向',
                     imgName: 'TFLD_V10',
-                    imgUrl: '',
+                    imgUrl: '/images/null-picture.png',
                     preview: []
                 }, {
                     title: '降水',
                     imgName: 'TFLD_RAIN',
-                    imgUrl: '',
+                    imgUrl: '/images/null-picture.png',
                     preview: []
                 }, {
                     title: '平均气温',
                     imgName: 'TFLD_T2',
-                    imgUrl: '',
+                    imgUrl: '/images/null-picture.png',
                     preview: []
                 }, {
                     title: '最低温度',
                     imgName: 'TFLD_TN',
-                    imgUrl: '',
+                    imgUrl: '/images/null-picture.png',
                     preview: []
                 }, {
                     title: '最高温度',
                     imgName: 'TFLD_TX',
-                    imgUrl: '',
+                    imgUrl: '/images/null-picture.png',
                     preview: []
                 }],
                 indicatorImg: '/images/decision-support/pollution-indicator/pollution-indicator.png',
@@ -128,18 +132,15 @@
             }
 
             const initImage = (type, imgName, index) => {
-                var xhr = new XMLHttpRequest();
-                xhr.responseType = 'arraybuffer';
-                xhr.open('GET', DecisionSupportConfig.getUrl(type, imgName));
-                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.items[index].imgUrl = image.src;
-                    options.items[index].preview = [image.src];
-                };
-                xhr.send();
+                post("/image/convert", {url: DecisionSupportConfig.getUrl(type, imgName)}).then((response: any) => {
+                    if (response.error != 0){
+                        console.log("发生错误")
+                        return;
+                    }
+
+                    options.items[index].imgUrl = response.data;
+                    options.items[index].preview = [response.data];
+                })
             }
 
             return {
@@ -176,6 +177,10 @@
                         .el-image {
                             height: calc(~"100% - 0.4rem");
                             margin-top: 0.1rem;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: center;
                         }
                     }
                 }
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 887d0c3..b476a33 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -74,7 +74,7 @@
             
                 
                 
-                

+                
                 
                     {{title}}
                     
@@ -90,6 +90,9 @@
                                 
                                 暂无图片
                             
+                            
+                                正在加载...
+                            
                         
                      
                  
@@ -118,7 +121,7 @@
                 hours: [],
                 times: [],
                 currentTime: null,
-                imgUrl: null,
+                imgUrl: '/images/null-picture.png',
                 srcList: [],
                 isPlay: false,
                 title: null,
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 2df742e..a2fd0d8 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -71,6 +71,9 @@
                                 
                                 暂无图片
                             
+                            
+                                正在加载...
+                            
                         
                     
                 
@@ -97,7 +100,7 @@
                 hours: [],
                 times: [],
                 currentTime: null,
-                imgUrl: null,
+                imgUrl: '/images/null-picture.png',
                 srcList: [],
                 isPlay: false,
                 title: null,
diff --git a/04.系统编码/Frontend/src/components/Shared/Header.vue b/04.系统编码/Frontend/src/components/Shared/Header.vue
index e33e201..567ac8a 100644
--- a/04.系统编码/Frontend/src/components/Shared/Header.vue
+++ b/04.系统编码/Frontend/src/components/Shared/Header.vue
@@ -5,46 +5,56 @@
             南京生态环境评估决策平台
         
         
-            
微波辐射计
-            
拉曼激光雷达
-            
生态环境效应评估
-            
决策支持
-            
系统管理
+            
+                微波辐射计
+            
+            
+                拉曼激光雷达
+            
+            
+                生态环境效应评估
+            
+            
+                决策支持
+            
+            
+                系统管理
+            
          
-
           退出登录
     
 
 
 
 
@@ -87,14 +97,19 @@
                 text-align: center;
                 cursor: pointer;
 
+                a {
+                    height: 100%;
+                    color: #ffffff;
+                }
+
                 &:nth-of-type(3) {
                     width: 2.3rem;
-                    &.active {
+                    .active {
                         background: url("/images/nav-bg-big.png") no-repeat center/cover;
                     }
                 }
-                &.active {
-                    color: #ffffff;
+                .active {
+                    color: #23FBFF;
                     background: url("/images/nav-bg.png") no-repeat center/cover;
                 }
             }
diff --git a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
index 4baf6a0..7c1bb14 100644
--- a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
+++ b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
@@ -99,6 +99,9 @@
                                 
                                 暂无图片
                             
+                            
+                                正在加载...
+                            
                         
                     
                 
@@ -112,12 +115,15 @@
                         :initial-index="0"
                         fit="contain"
                         >
-                        
+                            
                                 
                                 暂无图片
                             
+                            
+                                正在加载...
+                            
                         
                     
                 
@@ -131,6 +137,7 @@
     import { format } from '../uilts/String';
     import * as Tiff from 'browser-tiff.js';
     import { SynergyEvaluationConfig } from '../uilts/Config';
+import { post } from '../uilts/axios';
     
     export default {
         name: 'SynergyEvaluation',
@@ -143,7 +150,7 @@
                 currentYear: '2000',
                 currentSurfaceTemperatureTime: 'time0130',
                 srcList: [],
-                imgUrl: null,
+                imgUrl: '/images/null-picture.png',
                 imgUrls: [],
                 items: [{
                     title: '地表温度(01:30)',
@@ -238,18 +245,15 @@
             }
 
             const initImage = (tabName, elementName, type, index, values) => {
-                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");
-                    values[index].imgUrl = image.src;
-                    values[index].preview = [image.src];
-                };
-                xhr.send();
+                post("/image/convert", {url: SynergyEvaluationConfig.getUrl(tabName, elementName, type)}).then((response: any) => {
+                    if (response.error != 0){
+                        console.log("发生错误")
+                        return;
+                    }
+
+                    values[index].imgUrl = response.data;
+                    values[index].preview = [response.data];
+                })
             }
             
             const onTabClick = (name) => {
@@ -324,6 +328,14 @@
                         .el-image {
                             height: calc(~"100% - 0.4rem");
                             margin-top: 0.1rem;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+                            background-color: #ffffff;
+                            .image-slot {
+                                margin-top: 0;
+                            }
                         }
                     }
                 }
@@ -342,6 +354,7 @@
                             display: flex;
                             align-items: center;
                             flex-direction: column;
+                            justify-content: center;
                         }
 
                         &:nth-of-type(6n) {
diff --git a/04.系统编码/Frontend/src/components/SystemManagement.vue b/04.系统编码/Frontend/src/components/SystemManagement.vue
index 9132363..bd1eeea 100644
--- a/04.系统编码/Frontend/src/components/SystemManagement.vue
+++ b/04.系统编码/Frontend/src/components/SystemManagement.vue
@@ -393,3 +393,4 @@ export default {
   color: #498DF0;
 }
 
+
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index 465d9ec..616d408 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -401,6 +401,10 @@ img {
                 .el-image {
                     height: 90%;
                     margin: 0 auto;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
 
                     .el-image__inner {
                         width: auto;
@@ -418,7 +422,6 @@ img {
         .image-slot {
             width: 1.5rem;
             height: 1.5rem;
-            margin: 1rem auto 0 auto;
             text-align: center;
             display: flex;
             align-items: center;
diff --git a/04.系统编码/Frontend/src/uilts/Config.ts b/04.系统编码/Frontend/src/uilts/Config.ts
index 1ae6b7a..6422b3c 100644
--- a/04.系统编码/Frontend/src/uilts/Config.ts
+++ b/04.系统编码/Frontend/src/uilts/Config.ts
@@ -1,8 +1,8 @@
 import { Moment } from "moment";
-import { format } from "../uilts/String";
+import { format } from "./String";
 
 export class Config {
-    public static parentUrl: string = "http://112.124.40.88:8890/product/picture";
+    public static parentUrl: string = "http://112.124.40.88:8002/product/picture";
 }
 
 export class MicrowaveRadiationConfig {
@@ -21,13 +21,15 @@ export class RamanLidarConfig {
 }
 
 export class SynergyEvaluationConfig {
+    private static url: string = Config.parentUrl + "/images";
     public static getUrl(tabName: string, elementName: string, type: string): string {
-        return format('/images/ecological-environment/{0}/{1}/{2}.tif', tabName, elementName, type)
+        return format('{3}/ecological-environment/{0}/{1}/{2}.tif', tabName, elementName, type, this.url);
     }
 }
 
 export class DecisionSupportConfig {
+    private static url: string = Config.parentUrl + "/images";
     public static getUrl(productName: string, imgName: string): string {
-        return format('/images/decision-support/{0}/{1}.tif', productName, imgName)
+        return format('{2}/decision-support/{0}/{1}.tif', productName, imgName, this.url);
     }
 }
\ No newline at end of file
diff --git a/04.系统编码/Frontend/src/uilts/axios.ts b/04.系统编码/Frontend/src/uilts/axios.ts
index d69de39..c25aa0d 100644
--- a/04.系统编码/Frontend/src/uilts/axios.ts
+++ b/04.系统编码/Frontend/src/uilts/axios.ts
@@ -5,7 +5,8 @@ import { ElLoading } from 'element-plus'
 
 let loading = null;
 const service = axios.create({
-    baseURL:"http://localhost:8001",
+    baseURL:"http://localhost:8002",
+    // baseURL:"",
     timeout: 500000
 })