Skip to content

V
V3-TailingPond
Commit 0c191572 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add: 浸润线剖面层级接口条件查询。promise添加

parent 2c6f846b
Hide whitespace changes
Inline Side-by-side
Showing with 87 additions and 228 deletions
src/views/dataMonitor/jrx/history/index.vue
View file @ 0c191572
...@@ -122,6 +122,8 @@ export default { ...@@ -122,6 +122,8 @@ export default {
}, },
data() { data() {
return { return {
chartDataEmpty: false,
canvasDataEmpty: false,
Dict: { selectList: [] }, Dict: { selectList: [] },
table: { table: {
page: 1, page: 1,
...@@ -228,75 +230,6 @@ export default { ...@@ -228,75 +230,6 @@ export default {
// this.handleCanvasData(this.canvasData); // this.handleCanvasData(this.canvasData);
}, },
mounted() { mounted() {
// 新增：动态调整Canvas尺寸 目前支持7层。
const poCount = 4;
const lineCount = 5;
let canvasWidth = 1000; // 默认宽度
let canvasHeight = 600; // 默认高度
if (poCount > 4) {
canvasHeight = poCount * 150; // 高度 = 个数 × 150px
// canvasWidth = 1000 + (poCount - 4) * 150; // 宽度 = 原宽度 + (个数-4)×150px
}
// 更新Canvas元素属性和样式
const canvasEl = this.$refs.canvas;
if (canvasEl) {
// 实际绘图区域尺寸（关键属性）
canvasEl.width = canvasWidth;
canvasEl.height = canvasHeight;
// 显示尺寸（与绘图区域保持一致）
canvasEl.style.width = `${canvasWidth}px`;
canvasEl.style.height = `${canvasHeight}px`;
}
// // 数据清洗
// const po_pad_right = poCount > 4 ? 130 : 180; // 第一个台阶距离画布的距离
// const poH = 150;
// const line_color = ["red", "yellow", "green", "blue", "white"];
// this.poConfigs = [];
// this.guanConfigs = [];
// this.lineConfigs = [];
// for (let index = 0; index < poCount; index++) {
// // 坡数据数据格式处理
// this.poConfigs.push({
// x: 0,
// y: canvasHeight - (index + 1) * poH,
// width: canvasWidth - (index + 1) * po_pad_right,
// height: poH
// });
// // 管孔数据数据格式处理
// this.guanConfigs.push({
// x: this.poConfigs[index].width * 0.75,
// y: canvasHeight - this.poConfigs[index].height * (index + 1) + 30,
// width: 6,
// height: index == 0 ? 100 : 200,
// image: "guanImage"
// });
// }
// // 警戒线逻辑- 初始化4条线
// for (let index1 = 0; index1 < lineCount; index1++) {
// this.lineConfigs.push({
// // 设置
// points: [],
// color: line_color[index1],
// lineWidth: 2,
// cha: 20 * index1 // 每条线之间的差值
// });
// }
// // 警戒线种类下，根据管孔个数，设定对应的坐标点
// this.lineConfigs.forEach((line, index) => {
// // 几个管孔几个坐标点
// this.guanConfigs.forEach((guan, subindex) => {
// line.points.push({
// x: guan.x + 1,
// y: guan.y + 30 + line.cha
// });
// });
// });
this.$nextTick(() => { this.$nextTick(() => {
this.loadData(); this.loadData();
}); });
...@@ -313,183 +246,108 @@ export default { ...@@ -313,183 +246,108 @@ export default {
next(); next();
} }
}); });
this.getCanvasData();
// 新增：在图表初始化的 $nextTick 后初始化 Canvas（确保 DOM 已渲染）
this.$nextTick(() => {
// 初始化 Canvas
// setTimeout(() => {
// this.initCanvas();
// }, 1000);
});
}, },
methods: { methods: {
getCanvasData() { getCanvasData() {
const params = {}; const params = { ...this.form.query };
request({ request({
url: "tab/jrx/dissect/visual-xinHua", url: "tab/jrx/dissect/visual-xinHua",
method: "get", method: "get",
params, params,
}).then((res) => { }).then(async (res) => {
const data = res.body; const data = res.body;
console.log("接口数据", data); console.log("接口数据", data);
this.handleCanvasData(data); // 判断数据是否为空（根据实际接口返回结构调整）
this.initCanvas(); // const isEmpty =
// !data.jrxStepsDtoList?.length || !data.equipmentDataList?.length;
// this.canvasDataEmpty = isEmpty; // 更新空数据状态
// if (!isEmpty) {
await this.handleCanvasData(data);
this.initCanvas();
// }
}); });
}, },
handleCanvasData(list = []) { handleCanvasData(list = []) {
// 新增：动态调整Canvas尺寸 目前支持7层。 return new Promise((resolve) => {
const poumian = list[0]; // 新增Promise封装
const poCount = poumian.jrxStepsDtoList.length; let canvasWidth = 1000; // 默认宽度
const lineCount = 5; let canvasHeight = 600; // 默认高度
let canvasWidth = 1000; // 默认宽度 // 更新Canvas元素属性和样式
let canvasHeight = 600; // 默认高度 const canvasEl = this.$refs.canvas;
if (poCount > 4) { if (canvasEl) {
canvasHeight = poCount * 150; // 高度 = 个数 × 150px // 实际绘图区域尺寸（关键属性）
// canvasWidth = 1000 + (poCount - 4) * 150; // 宽度 = 原宽度 + (个数-4)×150px canvasEl.width = canvasWidth;
} canvasEl.height = canvasHeight;
// 显示尺寸（与绘图区域保持一致）
// 更新Canvas元素属性和样式 canvasEl.style.width = `${canvasWidth}px`;
const canvasEl = this.$refs.canvas; canvasEl.style.height = `${canvasHeight}px`;
if (canvasEl) { }
// 实际绘图区域尺寸（关键属性）
canvasEl.width = canvasWidth;
canvasEl.height = canvasHeight;
// 显示尺寸（与绘图区域保持一致）
canvasEl.style.width = `${canvasWidth}px`;
canvasEl.style.height = `${canvasHeight}px`;
}
// 数据清洗
const po_pad_right = 180; // poCount > 4 ? 130 : 180; // 第一个台阶距离画布的距离
const poH = 150;
const line_color = ["red", "orange", "yellow", "blue", "white"];
this.canvasDataReal.poConfigs = [];
this.canvasDataReal.guanConfigs = [];
this.canvasDataReal.lineConfigs = [];
//第一层台阶的开孔深度和设备图片相除的系数
const sbHeightModulus = poumian.equipmentDataList[0].jrxTrepanning // / 130;
for (let index = 0; index < poCount; index++) {
// 坡数据数据格式处理
this.canvasDataReal.poConfigs.push({
x: 0,
y: canvasHeight - (index + 1) * poH,
width: canvasWidth - (index + 1) * po_pad_right,
height: poH,
});
// 管孔数据数据格式处理
this.canvasDataReal.guanConfigs.push({
x: this.canvasDataReal.poConfigs[index].width * 0.75,
y: canvasHeight - this.canvasDataReal.poConfigs[index].height * (index + 1) + 30,
width: 6,
height:
poumian.equipmentDataList[index].jrxTrepanning * sbHeightModulus,
image: "guanImage",
});
}
// 警戒线逻辑- 初始化4条线
for (let index1 = 0; index1 < lineCount; index1++) {
this.canvasDataReal.lineConfigs.push({
// 设置
points: [],
color: line_color[index1],
lineWidth: 2,
cha: 20 * index1, // 每条线之间的差值
});
}
// 警戒线种类下，根据管孔个数，设定对应的坐标点
this.canvasDataReal.lineConfigs.forEach((line, index) => {
let lineValKey = line.color == "white" ? "depth" : line.color + "Alarm";
// 几个管孔几个坐标点 // 数据清洗
this.canvasDataReal.guanConfigs.forEach((guan, subindex) => { const poumian = list[0]; // 坡面数据
line.points.push({ const poCount = poumian.jrxStepsDtoList.length;
x: guan.x+1, const lineCount = 5;
const po_pad_right = 180; // poCount > 4 ? 130 : 180; // 第一个台阶距离画布的距离
const poH = 150;
const line_color = ["red", "orange", "yellow", "blue", "white"];
this.canvasDataReal.poConfigs = [];
this.canvasDataReal.guanConfigs = [];
this.canvasDataReal.lineConfigs = [];
//第一层台阶的开孔深度和设备图片相除的系数
const sbHeightModulus = poumian.equipmentDataList[0].jrxTrepanning; // / 130;
for (let index = 0; index < poCount; index++) {
// 坡数据数据格式处理
this.canvasDataReal.poConfigs.push({
x: 0,
y: canvasHeight - (index + 1) * poH,
width: canvasWidth - (index + 1) * po_pad_right,
height: poH,
});
// 管孔数据数据格式处理
this.canvasDataReal.guanConfigs.push({
x: this.canvasDataReal.poConfigs[index].width * 0.75,
y: y:
guan.y + canvasHeight -
poumian.equipmentDataList[subindex][lineValKey] * sbHeightModulus, this.canvasDataReal.poConfigs[index].height * (index + 1) +
30,
width: 6,
height:
poumian.equipmentDataList[index].jrxTrepanning * sbHeightModulus,
image: "guanImage",
}); });
}); }
});
console.log('this.canvasDataReal', this.canvasDataReal) // 警戒线逻辑- 初始话基本数据结构
for (let index1 = 0; index1 < lineCount; index1++) {
this.canvasDataReal.lineConfigs.push({
// 设置
points: [],
color: line_color[index1],
lineWidth: 2,
cha: 20 * index1, // 每条线之间的差值
});
}
}, // 警戒线种类下，根据管孔设备个数，设定对应的坐标点point
// 处理canvas数据 this.canvasDataReal.lineConfigs.forEach((line, index) => {
handleCanvasData1(list = []) { let lineValKey =
const canvasData = { poConfigs: [], guanConfigs: [], lineConfigs: [] }; line.color == "white" ? "depth" : line.color + "Alarm";
canvasData.lineConfigs = [ // 几个管孔几个坐标点
{ points: [], color: "red", lineWidth: 2 }, // 红色连接线配置 poumian.equipmentDataList.forEach((equip, subindex) => {
{ points: [], color: "yellow", lineWidth: 2 }, // 黄色连接线配置 line.points.push({
{ points: [], color: "green", lineWidth: 2 }, // 绿色连接线配置 x: this.canvasDataReal.guanConfigs[subindex].x + 1,
{ points: [], color: "blue", lineWidth: 2 }, // 蓝色连接线配置 y:
{ points: [], color: "white", lineWidth: 2 }, // 实际连接线配置 this.canvasDataReal.guanConfigs[subindex].y +
]; equip[lineValKey] * sbHeightModulus, // 管设备的y坐标+设备的警戒值*系数
const tjNumber = list[0].jrxStepsDtoList.length; });
//第一层台阶的开孔深度和设备图片相除的系数 });
const sbHeightModulus = list[0].equipmentDataList[0].jrxTrepanning / 130;
for (let index = 0; index < tjNumber; index++) {
canvasData.poConfigs.push({
x: 0,
y: 600 - 150 * index,
width: 879 - 250 * index,
height: 150,
});
canvasData.guanConfigs.push({
x: 820 - 250 * index,
y: 600 - 150 * index,
width: 6,
height:
list[0].equipmentDataList[index].jrxTrepanning * sbHeightModulus,
image: "guanImage",
});
// 向红色连接线配置push数据
canvasData.lineConfigs[0].points.push({
x: 820 - 250 * index, // x坐标
y:
600 -
150 * index +
list[0].equipmentDataList[index].redAlarm * sbHeightModulus, // y坐标
});
// 向黄色连接线配置push数据
canvasData.lineConfigs[1].points.push({
x: 820 - 250 * index, // x坐标
y:
600 -
150 * index +
list[0].equipmentDataList[index].orangeAlarm * sbHeightModulus, // y坐标
});
// 向绿色连接线配置push数据
canvasData.lineConfigs[2].points.push({
x: 820 - 250 * index, // x坐标
y:
600 -
150 * index +
list[0].equipmentDataList[index].yellowAlarm * sbHeightModulus, // y坐标
});
// 向蓝色连接线配置push数据
canvasData.lineConfigs[3].points.push({
x: 820 - 250 * index, // x坐标
y:
600 -
150 * index +
list[0].equipmentDataList[index].blueAlarm * sbHeightModulus, // y坐标
});
// 向实际连接线配置push数据
canvasData.lineConfigs[4].points.push({
x: 820 - 250 * index, // x坐标
y:
600 -
150 * index +
list[0].equipmentDataList[index].depth * sbHeightModulus, // y坐标
}); });
}
console.log("加工后的数据结构", canvasData); console.log("this.canvasDataReal", this.canvasDataReal);
this.canvasDataReal = canvasData; resolve(); // 数据处理完成后触发resolve
});
}, },
/** 初始化 Canvas 画布及坐标系 */ /** 初始化 Canvas 画布及坐标系 */
initCanvas() { initCanvas() {
...@@ -963,6 +821,7 @@ export default { ...@@ -963,6 +821,7 @@ export default {
loadData: function () { loadData: function () {
console.log(this.form, "form"); console.log(this.form, "form");
this.initChart1(); this.initChart1();
this.getCanvasData();
return reqApi.common.getRequst; return reqApi.common.getRequst;
}, },
......
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