diff --git a/04.系统编码/Frontend/src/components/DecisionSupport.vue b/04.系统编码/Frontend/src/components/DecisionSupport.vue
index 4a5adb9..0ffe303 100644
--- a/04.系统编码/Frontend/src/components/DecisionSupport.vue
+++ b/04.系统编码/Frontend/src/components/DecisionSupport.vue
@@ -77,9 +77,8 @@
       <div class="picture-container raman-picture-container" v-show="currentIndicator === 'pollution-indicator'">
         <div class="picture">
           <div id="pollutionIndicator"
-               style="margin-top: 66px"
                v-loading="loadingPollutionIndicatorStatus"
-               custom-class="loading"
+               class= 'loadingStatus'
                element-loading-text="加载中">
           </div>
         </div>
@@ -455,7 +454,6 @@ export default {
         height: auto;
         display: block;
         position: relative;
-
         .el-image {
           width: 100%;
           height: auto;
@@ -487,11 +485,20 @@ export default {
     }
 
     .raman-picture-container {
-      margin: 0 auto;
-
+      padding-top: 20px;
+      width: 100%;
+      height: 90%;
       .picture {
         width: 100%;
         height: 100%;
+        display: flex;
+        align-items: center;
+        :deep(.loadingStatus) {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding-right: 20px;
+        }
       }
     }
 
@@ -510,5 +517,6 @@ export default {
 
     }
   }
+
 }
 </style>
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 50c304f..0d69f94 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -151,55 +151,55 @@
         <div v-show ="currentTab === 'kuoxian'" class="verticalProfile">
           <div class="verticalProfile-picture">
             <h2 class="verticalProfileTitle">温度廓线</h2>
-            <div id="verticalProfileTemp" style="width: 400px;height: 400px"></div>
+            <div id="verticalProfileTemp" ></div>
           </div>
           <div class="verticalProfile-picture">
             <h2 class="verticalProfileTitle">相对湿度廓线</h2>
-            <div id="verticalProfileRelativeHumidity" style="width: 400px;height: 400px"></div>
+            <div id="verticalProfileRelativeHumidity" ></div>
           </div>
           <div class="verticalProfile-picture">
-            <h2 class="verticalProfileTitle" style="left: 1.4rem;">水汽密度廓线</h2>
-            <div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div>
+            <h2 class="verticalProfileTitle">水汽密度廓线</h2>
+            <div id="verticalProfileVaporDensity"></div>
           </div>
         </div>
 
-        <div v-show ="currentTab === 'shixu'" class="picture-container contrast-picture-container shiXu">
-          <div class="picture" style="margin-top: 570px">
+        <div v-show ="currentTab === 'shixu'" class="contrast-picture-container shiXu">
+          <div class="picture" >
             <h2 class="title">对流有效位能CAPE</h2>
-            <div id="convectiveHighChartCAPE" style="width: 100%;height:75%"></div>
+            <div id="convectiveHighChartCAPE" ></div>
           </div>
 
-          <div class="picture" style="margin-top: 570px">
+          <div class="picture">
             <h2 class="title">K指数</h2>
-            <div id="kIndexChart" style="width: 100%;height:75%"></div>
+            <div id="kIndexChart" ></div>
           </div>
           <div class="picture">
             <h2 class="title">对流抑制势能CIN</h2>
-            <div id="convectiveHighChartCIN" style="width:100%;height:75%"></div>
+            <div id="convectiveHighChartCIN" ></div>
           </div>
           <div class="picture">
             <h2 class="title">沙式指数</h2>
-            <div id="sandIndexChart" style="width:100%;height:75%"></div>
+            <div id="sandIndexChart" ></div>
           </div>
           <div class="picture">
             <h2 class="title">LCL气压</h2>
-            <div id="airPressureChart" style="width:100%;height:75%"></div>
+            <div id="airPressureChart" ></div>
           </div>
           <div class="picture">
             <h2 class="title">850hpa和500hpa温差</h2>
-            <div id="deltaTChart" style="width:100%;height:75%"></div>
+            <div id="deltaTChart" ></div>
           </div>
           <div class="picture">
             <h2 class="title">0度层高度</h2>
-            <div id="zeroHeightChart" style="width:100%;height:75%"></div>
+            <div id="zeroHeightChart"></div>
           </div>
           <div class="picture">
             <h2 class="title">-20度层高度</h2>
-            <div id="NegativeTwentyHeightChart" style="width:100%;height:75%"></div>
+            <div id="NegativeTwentyHeightChart" ></div>
           </div>
         </div>
 
-        <div v-show ="currentTab === 'T-logP'" class="picture-container contrast-picture-container">
+        <div v-show ="currentTab === 'T-logP'" class="T-logP">
           <img :src="tLogPPicture" class="T-logpImg">
         </div>
 
@@ -338,7 +338,7 @@ export default {
     //垂直廓线温度数据图
     const verticalProfileTempInit = () => {
       creates.verticalProfileTemp = new HighChartCreate('verticalProfileTemp');
-      creates.verticalProfileTemp.setChart(true);
+      creates.verticalProfileTemp.setChart(true, 'line', 500, 500);
       creates.verticalProfileTemp.setXAxis('高度(km)', false);
       creates.verticalProfileTemp.setYAxis('温度T(℃)', 10, -40, 10, 6);
       creates.verticalProfileTemp.setLegend();
@@ -350,7 +350,7 @@ export default {
     //垂直廓线水汽密度数据图
     const verticalProfileVaporDensityInit = () => {
       creates.verticalProfileVaporDensity = new HighChartCreate('verticalProfileVaporDensity');
-      creates.verticalProfileVaporDensity.setChart(true);
+      creates.verticalProfileVaporDensity.setChart(true, 'line', 500, 500);
       creates.verticalProfileVaporDensity.setXAxis('高度(km)', false);
       creates.verticalProfileVaporDensity.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11);
       creates.verticalProfileVaporDensity.setLegend();
@@ -362,7 +362,7 @@ export default {
     //垂直廓线相对湿度数据图
     const verticalProfileRelativeHumidityInit = () => {
       creates.verticalProfileRelativeHumidity = new HighChartCreate('verticalProfileRelativeHumidity');
-      creates.verticalProfileRelativeHumidity.setChart(true);
+      creates.verticalProfileRelativeHumidity.setChart(true, 'line', 500, 500);
       creates.verticalProfileRelativeHumidity.setXAxis('高度(km)', false);
       creates.verticalProfileRelativeHumidity.setYAxis('相对湿度RH(%)', 100, 0, 10, 6);
       creates.verticalProfileRelativeHumidity.setLegend();
@@ -373,7 +373,7 @@ export default {
 
     const convectiveIndexProfileTimeChartInitCAPE = () => {
       creates.convectiveIndexProfileTimeChartCAPE = new HighChartCreate('convectiveHighChartCAPE');
-      creates.convectiveIndexProfileTimeChartCAPE.setChart();
+      creates.convectiveIndexProfileTimeChartCAPE.setChart(false, 'line', 750, 400);
       creates.convectiveIndexProfileTimeChartCAPE.setXAxis('时间（时/分）', false);
       creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)');
       creates.convectiveIndexProfileTimeChartCAPE.setLegend();
@@ -384,7 +384,7 @@ export default {
 
     const convectiveIndexProfileTimeChartInitCIN = () => {
       creates.convectiveIndexProfileTimeChartCIN = new HighChartCreate('convectiveHighChartCIN');
-      creates.convectiveIndexProfileTimeChartCIN.setChart();
+      creates.convectiveIndexProfileTimeChartCIN.setChart(false, 'line', 750, 400);
       creates.convectiveIndexProfileTimeChartCIN.setXAxis('时间（时/分）', false);
       creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIN(J/kg)');
       creates.convectiveIndexProfileTimeChartCIN.setLegend();
@@ -396,7 +396,7 @@ export default {
     //绘制K指数
     const kIndexChartInit = () => {
       creates.kIndexChart = new HighChartCreate('kIndexChart');
-      creates.kIndexChart.setChart();
+      creates.kIndexChart.setChart(false, 'line', 750, 400);
       creates.kIndexChart.setXAxis('时间（时/分）', false);
       creates.kIndexChart.setYAxis('K（℃）');
       creates.kIndexChart.setLegend();
@@ -408,7 +408,7 @@ export default {
     //绘制沙式指数
     const sandIndexInit = () => {
       creates.sandIndex = new HighChartCreate('sandIndexChart');
-      creates.sandIndex.setChart();
+      creates.sandIndex.setChart(false, 'line', 750, 400);
       creates.sandIndex.setXAxis('时间（时/分）', false);
       creates.sandIndex.setYAxis('SI（℃）');
       creates.sandIndex.setLegend();
@@ -420,7 +420,7 @@ export default {
     //绘制LCl气压
     const airPressureInit = () => {
       creates.airPressure = new HighChartCreate('airPressureChart');
-      creates.airPressure.setChart();
+      creates.airPressure.setChart(false, 'line', 750, 400);
       creates.airPressure.setXAxis('时间（时/分）', false);
       creates.airPressure.setYAxis('LCL气压（hPa)');
       creates.airPressure.setLegend();
@@ -432,7 +432,7 @@ export default {
     //绘制850hpa和500hpa温差
     const deltaTInit = () => {
       creates.deltaT = new HighChartCreate('deltaTChart');
-      creates.deltaT.setChart();
+      creates.deltaT.setChart(false, 'line', 750, 400);
       creates.deltaT.setXAxis('时间（时/分）', false);
       creates.deltaT.setYAxis('deltaT（℃）');
       creates.deltaT.setLegend();
@@ -444,7 +444,7 @@ export default {
     //绘制0度层高度
     const zeroHeightInit = () => {
       creates.zeroHeight = new HighChartCreate('zeroHeightChart');
-      creates.zeroHeight.setChart();
+      creates.zeroHeight.setChart(false, 'line', 750, 400);
       creates.zeroHeight.setXAxis('时间（时/分）', false);
       creates.zeroHeight.setYAxis('hgt_0(m)');
       creates.zeroHeight.setLegend();
@@ -456,7 +456,7 @@ export default {
     //绘制-20度层高度
     const NegativeTwentyHeightInit = () => {
       creates.NegativeTwentyHeight = new HighChartCreate('NegativeTwentyHeightChart');
-      creates.NegativeTwentyHeight.setChart();
+      creates.NegativeTwentyHeight.setChart(false, 'line', 750, 400);
       creates.NegativeTwentyHeight.setXAxis('时间（时/分）', false);
       creates.NegativeTwentyHeight.setYAxis('hgt_-20(m)');
       creates.NegativeTwentyHeight.setLegend();
@@ -963,6 +963,8 @@ export default {
 .main {
   .container {
     //width: 100%;
+
+
     .verticalProfile {
       width: 100%;
       height: 100%;
@@ -971,13 +973,15 @@ export default {
       align-items: center;
 
       .verticalProfile-picture {
-        position: relative;
-
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
         .verticalProfileTitle {
-          position: absolute;
-          font-size: 0.22rem;
-          left: 1.77rem;
-          top: -0.8rem;
+          padding-bottom: 30px;
+
         }
       }
     }
@@ -987,40 +991,39 @@ export default {
     }
 
     .contrast-picture-container {
-      width: calc(~"100% - 2.5rem");
-      margin: 0 auto;
-      //width: 100%;
+      width: 100% !important;
+      height: 100%;
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      // justify-content: space-between;
-      .special-picture {
-        height: 100%!important;
 
-        .title {
-            top: 80px!important;
-        }
-      }
       .picture {
-        width: 45%;
-        height: 45%;
-        position: relative;
+        width: 48%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;
 
         .title {
-          width: 100%;
-          font-size: 0.22rem;
-          position: absolute;
-          left: 3.10rem;
-          top: 0;
           z-index: 1000;
         }
       }
+
+    }
+    .shiXu {
+      overflow-y: scroll;
+    }
+    .T-logP {
+      width: 100% !important;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       .T-logpImg {
-        transform: scale(0.5);
+        transform: scale(0.5,0.4);
       }
     }
     .raman-picture-container {
-      //width: calc(~"100% - 1rem");
       margin: 0 auto;
       #original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas {
       }
@@ -1039,25 +1042,20 @@ export default {
         }
       }
     }
-    //.BPPicture {
-    //  width: 100% !important;
-    //  height: 100%!important;
-    //  position: relative;
-    //
-    //}
-    #BP-temp, #BP-relative-humidity, #BP-vapor-density {
-      transform: scale(1, 1.0) translateX(-42px);
-    }
 
-    .shiXu {
-      overflow-y: scroll;
+    .BPPicture {
       width: 100% !important;
-    }
+      height: 100%!important;
+      //position: relative;
+      display: flex;
+      justify-content: center;
 
-    .shiXuBP {
-      flex-flow: column;
-      align-content: space-around !important;
     }
+    //#BP-temp, #BP-relative-humidity, #BP-vapor-density {
+      //transform: scale(1, 1.0) translateX(-42px);
+    //}
+
+
 
     .picture-MWR {
       width: 100%;
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 98c5477..1bac871 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -92,10 +92,10 @@
 
       <div class="picture-view">
         <div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'">
-          <div class="picture special-picture">
+          <div class="picture">
             <div v-loading="loadingWaterVaporSingleStatus"
                  style="width: 100%;height: 100%"
-                 custom-class="loading"
+                 class= 'loadingStatus'
                  element-loading-text="加载中">
               <canvas id='watervapor_single_chart'></canvas>
             </div>
@@ -117,7 +117,7 @@
           <div class="picture special-picture">
             <div v-loading="loadingExtinctionOpticsStatus"
                  style="width: 100%;height: 100%"
-                 custom-class="loading"
+                 class= 'loadingStatus'
                  element-loading-text="加载中">
               <canvas id='extinction_optics_chart'></canvas>
             </div>
@@ -128,7 +128,7 @@
           <div class="picture special-picture">
             <div v-loading="loadingBackscatterStatus"
                  style="width: 100%;"
-                 custom-class="loading"
+                 class= 'loadingStatus'
                  element-loading-text="加载中">
               <canvas id='backscatter_chart'></canvas>
             </div>
@@ -181,7 +181,7 @@
           <div class="picture special-picture">
             <div v-loading="loadingCloudSolStatus"
                  style="width: 100%;"
-                 custom-class="loading"
+                 class= 'loadingStatus'
                  element-loading-text="加载中">
               <canvas id='cloud_sol_chart'></canvas>
             </div>
@@ -223,7 +223,7 @@
 
         <div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'">
           <div class="picture special-picture">
-            <h2 class="title" style="left: 3.3rem">质控前</h2>
+            <h2 class="title">质控前</h2>
             <div v-loading="loadingExtinctionBeforeStatus"
                  style="width: 100%;"
                  custom-class="loading"
@@ -502,7 +502,7 @@ export default {
           },
           {
             value: 'backscatter',
-            label: '后向散射系数'
+            label: '消光后的后向散射系数'
           }]
 
       } else if (options.currentTab === 'aerosol-product') {
@@ -767,11 +767,11 @@ export default {
       drawer.close();
       drawer = null;
     }
-
     const cancelRequest = () => {
       axiosStore._axiosPromiseCancel.forEach(e => {
         e && e()
       });
+
       axiosStore._axiosPromiseCancel = [];
     }
 
@@ -790,11 +790,18 @@ export default {
     }
 
     const prepareBackscatterColors = () => {
-      let colorChart = new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0',
-            '#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'],
-          [-1, -1.25, -1.5, -1.75, -2, -2.25, -2.5, -2.75, -3, -3.25, -3.5, -3.75, -4, -4.25, -4.5, -4.75, -5]
+      // let colorChart = new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0',
+      //       '#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'],
+      //     // [-1, -1.25, -1.5, -1.75, -2, -2.25, -2.5, -2.75, -3, -3.25, -3.5, -3.75, -4, -4.25, -4.5, -4.75, -5]
+      //         [0.02, 0.01, 0.008, 0.006, 0.004, 0.002, 0.001, 0.0008, 0.0006, 0.0004, 0.0002, 0.0001, 0.00008, 0.00006, 0.00004, 0.00002, 0.00001]
+      // );
+      let colorChart = new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
+            '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
+          [0.1, 0.08, 0.06, 0.04, 0.02, 0.01, 0.008, 0.006, 0.004, 0.002, 0.001, 0.0008, 0.0006, 0.0004, 0.0002, 0.0001, 0.00008, 0.00006, 0.00004, 0.00002, 0.00001],
+          true,
+          true
       );
-      colorChart.setDefaultColors('#000099', '#8F0000');
+      colorChart.setDefaultColors('#0D1485', '#8F0000');
       return colorChart;
     }
 
@@ -1116,7 +1123,8 @@ export default {
 
               let value = r.data[h - 2][i]
               if (name == 'backscatter') {
-                value = value == null ? NaN : Math.log10(value);
+                value = value == null ? NaN : value;
+                //value = value == null ? NaN : Math.log10(value);
               }
               if (name == 'singleWatervapor' || name == 'watervapor') {
                 value = value == null ? NaN : value * 1000;
@@ -1515,6 +1523,7 @@ export default {
           locate: options.currentRegion
         }
       }
+
       return {
         date: time,
         var: variableName,
@@ -1622,9 +1631,15 @@ export default {
 
     .raman-picture-container {
       //width: calc(~"100% - 1rem");
+      display: flex;
+      justify-content: center;
+      align-items: center;
       margin: 0 auto;
 
       .special-picture {
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
         //:deep(.el-loading-mask) {
         //  top: 64px !important;
         //}
@@ -1633,15 +1648,22 @@ export default {
       .picture {
         width: 100%;
         height: 100%;
-        position: relative;
+        display: flex;
+        align-items: center;
+        //position: relative;
         //margin-top: 30px;
-
+        :deep(.loadingStatus) {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding-top: 80px;
+        }
         #watervapor_single_chart {
-          transform: translateX(6%) translateY(50px);
+          //transform: translateX(6%) translateY(50px);
         }
 
         #extinction_optics_chart {
-          transform: translateX(6%) translateY(50px);
+          //transform: translateX(6%) translateY(50px);
         }
 
         #pm2_5_chart {
@@ -1653,26 +1675,27 @@ export default {
         }
 
         #backscatter_chart {
-          transform: translateX(6%) translateY(50px);
+          //transform: translateX(6%) translateY(50px);
         }
 
         #cloud_sol_chart {
-          transform: translateX(6%) translateY(50px);
+          //transform: translateX(6%) translateY(50px);
         }
 
-        #extinction_chart-before,
-        #extinction_chart-after,
-        #watervapor_chart-before,
-        #watervapor_chart-after {
-          transform: translateY(50px);
-        }
+        //#extinction_chart-before,
+        //#extinction_chart-after,
+        //#watervapor_chart-before,
+        //#watervapor_chart-after {
+        //  transform: translateY(50px);
+        //}
 
         .title {
-          width: 100%;
-          font-size: 0.22rem;
-          position: absolute;
-          left: 3.5rem;
-          top: 0.30rem;
+          padding-top: 70px;
+          //width: 100%;
+          //font-size: 0.22rem;
+          //position: absolute;
+          //left: 350px;
+          //top: 30px;
           z-index: 100;
         }
 
diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
index fb05d02..2e67815 100644
--- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts
+++ b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
@@ -339,7 +339,7 @@ export class HeatMapDrawer{
 
     private setTimeDetail(_x: number, startY: number, text: string): void{
         // const text = this.values[15][0].time.slice(0, 6);
-        this.canvasContext.font = "normal 15px 微软雅黑";
+        this.canvasContext.font = "normal 17px 微软雅黑";
         this.canvasContext.fillText(text, _x -  this.canvasContext.measureText(text).width / 2, startY + this.verticalScaleLine + this.borderHeight + 38);
         this.canvasContext.font = "normal 17px 微软雅黑";
     }
diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts
index e614d59..70c6692 100644
--- a/04.系统编码/Frontend/src/model/high-chart-create.ts
+++ b/04.系统编码/Frontend/src/model/high-chart-create.ts
@@ -36,10 +36,15 @@ export class HighChartCreate {
                 text: text,
                 style: {
                     color: '#000000',
-                    fontSize: '18px',
+                    fontSize: '20px',
                     fontFamily: '微软雅黑'
                 }
             },
+            labels: {
+                style: {
+                    fontSize:'20px',
+                },
+            },
             categories: [],
             showLastLabel: true,
             showFirstLabel: true,
@@ -81,13 +86,14 @@ export class HighChartCreate {
                 text: text,
                 style: {
                     color: '#000000',
-                    fontSize: '18px',
-                    fontFamily: '微软雅黑'
+                    fontSize: '20px',
+                    fontFamily: '微软雅黑',
+                    fontWeight: '300'
                 }
             },
             labels: {
                 style: {
-                    fontSize:'20px'
+                    fontSize:'20px',
                 },
             },
             max: max,
@@ -104,10 +110,16 @@ export class HighChartCreate {
                 text: text,
                 style: {
                     color: '#000000',
-                    fontSize: '18px',
-                    fontFamily: '微软雅黑'
+                    fontSize: '20px',
+                    fontFamily: '微软雅黑',
+                    fontWeight: '400'
                 }
             },
+            labels: {
+                style: {
+                    fontSize: '18px'
+                },
+            },
             max: max,
             min: min,
             tickInterval: tickInterval,
@@ -123,8 +135,9 @@ export class HighChartCreate {
                 text: text,
                 style: {
                     color: '#000000',
-                    fontSize: '18px',
-                    fontFamily: '微软雅黑'
+                    fontSize: '20px',
+                    fontFamily: '微软雅黑',
+                    fontWeight: '300'
                 }
             },
             labels: {
@@ -153,7 +166,11 @@ export class HighChartCreate {
             floating: true,
             x: 20,
             y: 0,
-            enabled: enabled
+            enabled: enabled,
+            itemStyle : {
+                fontSize: '20px',
+                fontWeight: '300'
+            }
         }
     }