Skip to content

V
V3-TailingPond
Commit 3e0db5e7 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

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

parent 180e7a34
Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 63 deletions
src/views/dataMonitor/jrx/history/index.vue
View file @ 3e0db5e7
......@@ -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();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment