add：水位图阴影效果 multiple 优化rev

src/views/dataMonitor/jrx/history/index.vue

@@ -291,9 +291,9 @@ export default {
           return;
         }
 
-        console.log("剖面接口数据", data);
-        console.table(JSON.parse(JSON.stringify(data[0].jrxStepsDtoList)));
-        console.table(JSON.parse(JSON.stringify(data[0].equipmentDataList)));
+        // console.log("剖面接口数据", data);
+        // console.table(JSON.parse(JSON.stringify(data[0].jrxStepsDtoList)));
+        // console.table(JSON.parse(JSON.stringify(data[0].equipmentDataList)));
 
         await this.handleCanvasData(data);
         this.initCanvas();
@@ -381,16 +381,16 @@ export default {
           });
         });
 
-        console.log("坡面处理完毕数据", this.canvasDataReal);
-        console.table(
-          JSON.parse(JSON.stringify(this.canvasDataReal.poConfigs))
-        );
-        console.table(
-          JSON.parse(JSON.stringify(this.canvasDataReal.guanConfigs))
-        );
-        console.table(
-          JSON.parse(JSON.stringify(this.canvasDataReal.lineConfigs))
-        );
+        // console.log("坡面处理完毕数据", this.canvasDataReal);
+        // console.table(
+        //   JSON.parse(JSON.stringify(this.canvasDataReal.poConfigs))
+        // );
+        // console.table(
+        //   JSON.parse(JSON.stringify(this.canvasDataReal.guanConfigs))
+        // );
+        // console.table(
+        //   JSON.parse(JSON.stringify(this.canvasDataReal.lineConfigs))
+        // );
 
         resolve(); // 数据处理完成后触发resolve
       });
@@ -403,7 +403,7 @@ export default {
         console.error("Canvas 元素未找到");
         return;
       }
-      console.log(this.canvas, "canvas");
+      // console.log(this.canvas, "canvas");
       this.ctx = this.canvas.getContext("2d");
 
       // 坐标系变换：将原点移至左下角（默认原点在左上角）
@@ -477,18 +477,18 @@ export default {
     },
 
     // 绘制water.png（独立方法）
-    drawWaterImage() {
-      this.ctx.save();
-      this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-      this.ctx.drawImage(
-        this.waterImage,
-        0,
-        this.canvas.height - 255,
-        485,
-        255
-      );
-      this.ctx.restore();
-    },
+    // drawWaterImage() {
+    //   this.ctx.save();
+    //   this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    //   this.ctx.drawImage(
+    //     this.waterImage,
+    //     0,
+    //     this.canvas.height - 255,
+    //     485,
+    //     255
+    //   );
+    //   this.ctx.restore();
+    // },
 
     // 重构后的统一绘制入口（通过配置驱动）
     drawAllImages() {
@@ -496,13 +496,13 @@ export default {
       this.drawBackground();
 
       // 2. 绘制po.png（遍历配置数组）
-      console.log(this.canvasDataReal.poConfigs, "poConfigs");
+      // console.log(this.canvasDataReal.poConfigs, "poConfigs");
       this.canvasDataReal.poConfigs.forEach((config, index) => {
         this.drawPoImage(config);
       });
 
       // 3. 绘制guan.png（遍历配置数组）
-      console.log(this.canvasDataReal.guanConfigs, "guanConfigs");
+      // console.log(this.canvasDataReal.guanConfigs, "guanConfigs");
       this.canvasDataReal.guanConfigs.forEach((config, index) => {
         this.drawGuanImage(config);
       });
@@ -539,45 +539,50 @@ export default {
           this.ctx.save();
           this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系（左上角原点，Y轴向下）
           
+          // // 增加测试数据
+          // lineConfig.points.push({
+          //   x: lineConfig.points[1].x - 150,
+          //   y: lineConfig.points[1].y -150
+          // })
+
           // 将警戒线坐标转换为默认坐标系（原坐标系Y轴向上）
-          const points = lineConfig.points.map(point => ({
+          const canvasHeight = this.canvas.height; // 缓存画布高度
+          const convertedPoints = lineConfig.points.map(point => ({
             x: point.x,
             y: point.y // 转换为默认Y轴向下的坐标
           }));
 
-          // 取警戒线的起点和终点（假设points按顺序排列）
-          const startPoint = points[0];
-          const endPoint = points[points.length - 1];
-
-          console.table(startPoint)
-          console.table(endPoint)
-
-
-          // 构建梯形四个顶点（直角梯形）
-          const trapezoidPoints = [
-            startPoint,                  // 顶部左端点
-            endPoint,                    // 顶部右端点
-            { x: endPoint.x, y: endPoint.y + (this.canvas.height - endPoint.y) }, // 底部右端点（垂直投影到底边）
-            { x: startPoint.x, y: startPoint.y + (this.canvas.height - endPoint.y) }, // 底部左端点（垂直投影到底边）
-          ];
-
-          // 绘制梯形路径并填充
-          this.ctx.fillStyle = 'rgba(59, 175, 251, 0.3)'; // 海蓝色，透明度30%
-          this.ctx.beginPath();
-          trapezoidPoints.forEach((point, index) => {
-            index === 0 
-              ? this.ctx.moveTo(point.x, point.y) 
-              : this.ctx.lineTo(point.x, point.y);
-          });
-          this.ctx.closePath(); // 闭合路径
-          this.ctx.fill();
+        // 遍历相邻点对，生成梯形
+        for (let i = 0; i < convertedPoints.length - 1; i++) {
+            const start = convertedPoints[i];
+            const end = convertedPoints[i + 1];
+
+            // 构建当前线段对应的梯形四个顶点
+            const trapezoid = [
+              start,                  // 顶部左端点
+              end,                    // 顶部右端点
+              { x: end.x, y: canvasHeight }, // 底部右端点（垂直投影到底边）
+              { x: start.x, y: canvasHeight }, // 底部左端点（垂直投影到底边）
+            ];
+
+            // 绘制当前梯形
+            this.ctx.fillStyle = 'rgba(59, 175, 251, 0.3)'; // 海蓝色，透明度30%
+            this.ctx.beginPath();
+            trapezoid.forEach((point, index) => {
+              index === 0 
+                ? this.ctx.moveTo(point.x, point.y) 
+                : this.ctx.lineTo(point.x, point.y);
+            });
+            this.ctx.closePath();
+            this.ctx.fill();
+          }
 
           this.ctx.restore();
         }
       });
 
       // 5. 绘制water.png
-      this.drawWaterImage();
+      // this.drawWaterImage();
     },
     /** 加载所有图片并绘制 */
     loadAllImages() {
@@ -585,9 +590,9 @@ export default {
       this.bgImage = new Image();
       this.bgImage.src = require("@/assets/images/jrx/bg.png");
 
-      // 加载 water.png
-      this.waterImage = new Image();
-      this.waterImage.src = require("@/assets/images/jrx/water.png");
+      // // 加载 water.png
+      // this.waterImage = new Image();
+      // this.waterImage.src = require("@/assets/images/jrx/water.png");
 
       // 加载 po.png
       this.poImage = new Image();
@@ -600,7 +605,7 @@ export default {
       // 等待所有图片加载完成
       Promise.all([
         new Promise((resolve) => (this.bgImage.onload = resolve)),
-        new Promise((resolve) => (this.waterImage.onload = resolve)),
+        // new Promise((resolve) => (this.waterImage.onload = resolve)),
         new Promise((resolve) => (this.poImage.onload = resolve)),
         new Promise((resolve) => (this.guanImage.onload = resolve)),
       ])
@@ -631,7 +636,7 @@ export default {
       }).then((res) => {
         const data = res.body;
         // const data = this.getChartData().body
-        console.log("data", data);
+        // console.log("data", data);
         const chartData = this.seriesDataFormat(data, { datekey: "date" });
 
         var warningLine = undefined; // this.form.config.warningLine;
@@ -649,7 +654,7 @@ export default {
         );
         // const chartData = data
 
-        console.log("chartCData", chartData);
+        // console.log("chartCData", chartData);
         Highcharts.setOptions({
           global: {
             useUTC: false,
@@ -929,7 +934,7 @@ export default {
       }
     },
     loadData: function () {
-      console.log(this.form, "form");
+      // console.log(this.form, "form");
       this.initChart1();
       this.getCanvasData();