diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 43944ec..723da00 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -643,6 +643,10 @@ export default {
     }
 
     const reloadExtinctionBefore = () => {
+      let view = document.querySelector('.picture-view');
+      let width = view.clientWidth / 2;
+      let heigth = view.clientHeight - 102;
+      
       options.loadingExtinctionBeforeStatus = true;
       let params = {
         date: moment(options.date).format('YYYY-MM-DD HH'),
@@ -652,7 +656,7 @@ export default {
       post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
         options.loadingExtinctionBeforeStatus = false;
         if (response.error != 0) {
-          createEmptyCanvas('extinction_chart-before', 810, 650);
+          createEmptyCanvas('extinction_chart-before', width, heigth);
           console.log("未找到质控前数据文件");
           return;
         }
@@ -662,7 +666,7 @@ export default {
         }
 
         let matrix = convertValueToBox(response.data);
-        creates.extinctionBeforeDrawer = new HeatMapDrawer(810, 700, matrix, "extinction_chart-before", '/km');
+        creates.extinctionBeforeDrawer = new HeatMapDrawer(width, 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();