diff --git a/04.系统编码/Backend/src/main/java/com/userinformation/backend/controller/QualityCompareController.java b/04.系统编码/Backend/src/main/java/com/userinformation/backend/controller/QualityCompareController.java
index 0fa6f4b..944cfa2 100644
--- a/04.系统编码/Backend/src/main/java/com/userinformation/backend/controller/QualityCompareController.java
+++ b/04.系统编码/Backend/src/main/java/com/userinformation/backend/controller/QualityCompareController.java
@@ -23,6 +23,7 @@ public class QualityCompareController {
 
     @RequestMapping("findByTimeAndElement")
     public RequestResult findByTimeAndElement(String date, String var, String locate) throws IOException {
+        date = "5_1_10";
         return RequestResult.success(qualityCompareService.findByTimeAndElement(date, var, locate));
     }
 }
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index c3d7645..27873c0 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -52,10 +52,10 @@
 
     <div class="container panel">
       <div class="toolbar day-toolbar" v-if="currentElement === 'singleWatervapor' || currentElement === 'aod-icot-wcot'
-                                                            || currentElement === 'extinctionOptics' || currentElement === 'backscatter'
-                                                            || currentElement === 'pm2_5' || currentElement === 'pblh'
-                                                            || currentElement === 'cloudSol' || currentElement === 'cloudbaseheight'
-                                                            || currentElement === 'cloudtopheight'">
+        || currentElement === 'extinctionOptics' || currentElement === 'backscatter'
+        || currentElement === 'pm2_5' || currentElement === 'pblh'
+        || currentElement === 'cloudSol' || currentElement === 'cloudbaseheight'
+        || currentElement === 'cloudtopheight'">
         <div class="times">
           <div class="time-item" v-for="(time, index) in times" :key="index"
                :class="{'active': currentTime === time.date, 'first-hour': time.hour === '00'}">
@@ -72,7 +72,6 @@
         </div>
       </div>
 
-
       <div class="toolbar day-toolbar" v-if="currentElement === 'extinction' || currentElement=== 'lidarratio' || currentElement === 'watervapor'">
         <div class="times">
           <div class="time-item" v-for="(time, index) in times" :key="index"
@@ -91,8 +90,6 @@
         </div>
       </div>
 
-
-
       <div class="picture-view">
         <div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'">
           <div class="picture special-picture">
@@ -270,7 +267,6 @@
 <script lang="ts">
 import {onMounted, reactive, toRefs, watch} from 'vue';
 import moment from "moment";
-import {RamanLidarConfig} from '../uilts/Config';
 import {post} from '../uilts/axios';
 import {ElMessage} from "element-plus";
 import {ConstantRamanLidar} from "../model/constant";
@@ -292,6 +288,7 @@ export default {
       LidarRatio: HighChartCreate,
       opticalThickness: HighChartCreate,
       cloudRecognitionDrawer: HeatMapDrawer,
+      extinctionBeforeDrawer: HeatMapDrawer,
       extinctionDrawer: HeatMapDrawer,
       watervaporDrawer: HeatMapDrawer,
       opticsExtinctionDrawer: HeatMapDrawer,
@@ -308,6 +305,7 @@ export default {
       opticalThickness: null,
       cloudRecognitionDrawer: null,
       extinctionDrawer: null,
+      extinctionBeforeDrawer: null,
       watervaporDrawer: null,
       singleWatervaporDrawer: null,
       opticsExtinctionDrawer: null,
@@ -590,7 +588,7 @@ export default {
         //   break;
         case 'extinction' :
           // initTimeLineDay()
-          reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionBefore);
+          reloadExtinctionBefore();
           reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter);
           break;
         case 'watervapor' :
@@ -603,6 +601,48 @@ export default {
       }
     }
 
+    const reloadExtinctionBefore = () => {
+      let params = {
+          date: moment(options.date).format('YYYY-MM-DD'),
+          var: 'MEXT',
+          locate: options.currentRegion
+        }
+      post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
+        if (response.error != 0){
+          console.log("未找到质控前数据文件");
+          return;
+        }
+
+        let matrix = convertValueToBox(response.data);
+        creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控后');
+        creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
+        creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors());
+        creates.extinctionBeforeDrawer.draw();
+      })
+    }
+
+    const convertValueToBox = (data) => {
+      let timeMoment = moment(options.date).add(-1, 'd');
+      let timeFormat = timeMoment.format("MM月DD日HH时");
+
+      let boxes = new Array<Array<Box>>();
+      let index = 1;
+      data.forEach(r => {
+        if (index % 11 == 0){
+          timeMoment.add(1, 'h');
+          timeFormat = timeMoment.format("MM月DD日HH时");
+        }
+
+        let rows = new Array<Box>(r.length);
+        for (let h = 0, len = r.length; h < len; h++) {
+          rows[h] = new Box(index - 1, h, 0, 0, r[h], h * 15, timeFormat, "米");
+        }
+        index++;
+        boxes.push(rows);
+      })
+
+      return boxes;
+    }
 
     const preprocessing = (type: string) => {
       switch (type) {
@@ -909,9 +949,6 @@ export default {
       creates.watervaporDrawer.draw();
     }
 
-
-
-
     const prepareWatervaporColors = () => {
       return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
             '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
@@ -919,21 +956,6 @@ export default {
       );
     }
 
-    const drawExtinctionBefore = (result: CustomeArray<any>) => {
-      if (result.length != 24) return;
-
-      options.loadingExtinctionStatus = false;
-      if (creates.extinctionDrawer != null) {
-        creates.extinctionDrawer.close();
-      }
-
-      let matrix = converCloudRecognition(801, result, 'extinction');
-      creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控前');
-      creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
-      creates.extinctionDrawer.setColorChart(prepareExtinctionnColors());
-      creates.extinctionDrawer.draw();
-    }
-
     const drawExtinctionAfter = (result: CustomeArray<any>) => {
       if (result.length != 24) return;