diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 0774b14..6fcb3a5 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -391,6 +391,7 @@ export default {
         initEcharts(options.currentTab)
         reloadChangeData();
       }, 50);
+      window.onresize = () => getElementSize();
     })
 
     //边界层高度
@@ -616,36 +617,46 @@ export default {
     }
 
     const reloadWatervaporBefore = () => {
-      options.loadingWatervaporBeforeStatus = true;
-      let params = {
-        date: moment(options.date).format('YYYY-MM-DD 00'),
-        var: 'Vapor Mixing Ratio',
-        locate: options.currentRegion
-      }
-      post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
-        options.loadingWatervaporBeforeStatus = false;
-        if (response.error != 0) {
-          createEmptyCanvas('watervapor_chart-before', 810, 650);
-          console.log("未找到质控前数据文件");
-          return;
-        }
+        let element = getElementSize();
 
-        if (creates.watervaporBeforeDrawer != null) {
-          creates.watervaporBeforeDrawer.close();
+        options.loadingWatervaporBeforeStatus = true;
+        let params = {
+            date: moment(options.date).format('YYYY-MM-DD 00'),
+            var: 'Vapor Mixing Ratio',
+            locate: options.currentRegion
         }
+        post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
+            options.loadingWatervaporBeforeStatus = false;
+            if (response.error != 0) {
+            createEmptyCanvas('watervapor_chart-before', element.width, element.heigth);
+            console.log("未找到质控前数据文件");
+            return;
+            }
 
-        let matrix = convertValueToBox(response.data);
-        creates.watervaporBeforeDrawer = new HeatMapDrawer(810, 700, matrix, "watervapor_chart-before", 'g/kg');
-        creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
-        creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
-        creates.watervaporBeforeDrawer.draw();
-      })
+            if (creates.watervaporBeforeDrawer != null) {
+            creates.watervaporBeforeDrawer.close();
+            }
+
+            let matrix = convertValueToBox(response.data);
+            creates.watervaporBeforeDrawer = new HeatMapDrawer(element.width, element.heigth, matrix, "watervapor_chart-before", 'g/kg');
+            creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
+            creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
+            creates.watervaporBeforeDrawer.draw();
+        })
+    }
+
+    const getElementSize = () => {
+        let view = document.querySelector('.picture-view');
+        let width = view.clientWidth / 2;
+        let heigth = view.clientHeight - 102;
+        return {
+            width: width,
+            heigth: heigth
+        }
     }
 
     const reloadExtinctionBefore = () => {
-      let view = document.querySelector('.picture-view');
-      let width = view.clientWidth / 2;
-      let heigth = view.clientHeight - 102;
+      let element = getElementSize();
 
       options.loadingExtinctionBeforeStatus = true;
       let params = {
@@ -656,7 +667,7 @@ export default {
       post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
         options.loadingExtinctionBeforeStatus = false;
         if (response.error != 0) {
-          createEmptyCanvas('extinction_chart-before', width, heigth);
+          createEmptyCanvas('extinction_chart-before', element.width, element.heigth);
           console.log("未找到质控前数据文件");
           return;
         }
@@ -666,7 +677,7 @@ export default {
         }
 
         let matrix = convertValueToBox(response.data);
-        creates.extinctionBeforeDrawer = new HeatMapDrawer(width, heigth, matrix, "extinction_chart-before", '/km');
+        creates.extinctionBeforeDrawer = new HeatMapDrawer(element.width, element.heigth, matrix, "extinction_chart-before", '/km');
         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();
@@ -979,18 +990,19 @@ export default {
     }
 
     const drawWatervaporAfter = (result: CustomeArray<any>) => {
-      if (result.length != 24) return;
+        if (result.length != 24) return;
 
-      options.loadingWaterVaporStatus = false;
-      if (creates.watervaporDrawer != null) {
-        creates.watervaporDrawer.close();
-      }
+        let element = getElementSize();
+        options.loadingWaterVaporStatus = false;
+        if (creates.watervaporDrawer != null) {
+            creates.watervaporDrawer.close();
+        }
 
-      let matrix = converCloudRecognition(101, result, 'watervapor');
-      creates.watervaporDrawer = new HeatMapDrawer(800, 700, matrix, "watervapor_chart-after", 'g/kg');
-      creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
-      creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
-      creates.watervaporDrawer.draw();
+        let matrix = converCloudRecognition(101, result, 'watervapor');
+        creates.watervaporDrawer = new HeatMapDrawer(element.width, element.heigth, matrix, "watervapor_chart-after", 'g/kg');
+        creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
+        creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
+        creates.watervaporDrawer.draw();
     }
 
     const prepareWatervaporColors = () => {
@@ -1001,9 +1013,7 @@ export default {
     }
 
     const drawExtinctionAfter = (result: CustomeArray<any>) => {
-      let view = document.querySelector('.picture-view');
-      let width = view.clientWidth / 2;
-      let heigth = view.clientHeight - 102;
+      let element = getElementSize();
 
       if (result.length != 12) return;
 
@@ -1013,7 +1023,7 @@ export default {
       }
 
       let matrix = converCloudRecognition(801, result, 'extinction');
-      creates.extinctionDrawer = new HeatMapDrawer(width, heigth, matrix, "extinction_chart-after", '/km');
+      creates.extinctionDrawer = new HeatMapDrawer(element.width, element.heigth, matrix, "extinction_chart-after", '/km');
       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();