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 {
},
data() {
return {
chartDataEmpty: false,
canvasDataEmpty: false,
Dict: { selectList: [] },
table: {
page: 1,
......@@ -228,75 +230,6 @@ export default {
// this.handleCanvasData(this.canvasData);
},
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.loadData();
});
......@@ -313,183 +246,108 @@ export default {
next();
}
});
this.getCanvasData();
// 新增：在图表初始化的 $nextTick 后初始化 Canvas（确保 DOM 已渲染）
this.$nextTick(() => {
// 初始化 Canvas
// setTimeout(() => {
// this.initCanvas();
// }, 1000);
});
},
methods: {
getCanvasData() {
const params = {};
const params = { ...this.form.query };
request({
url: "tab/jrx/dissect/visual-xinHua",
method: "get",
params,
}).then((res) => {
}).then(async (res) => {
const data = res.body;
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 = []) {
// 新增：动态调整Canvas尺寸 目前支持7层。
const poumian = list[0];
const poCount = poumian.jrxStepsDtoList.length;
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 = 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";
return new Promise((resolve) => {
// 新增Promise封装
let canvasWidth = 1000; // 默认宽度
let canvasHeight = 600; // 默认高度
// 更新Canvas元素属性和样式
const canvasEl = this.$refs.canvas;
if (canvasEl) {
// 实际绘图区域尺寸（关键属性）
canvasEl.width = canvasWidth;
canvasEl.height = canvasHeight;
// 显示尺寸（与绘图区域保持一致）
canvasEl.style.width = `${canvasWidth}px`;
canvasEl.style.height = `${canvasHeight}px`;
}
// 几个管孔几个坐标点
this.canvasDataReal.guanConfigs.forEach((guan, subindex) => {
line.points.push({
x: guan.x+1,
// 数据清洗
const poumian = list[0]; // 坡面数据
const poCount = poumian.jrxStepsDtoList.length;
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:
guan.y +
poumian.equipmentDataList[subindex][lineValKey] * sbHeightModulus,
canvasHeight -
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, // 每条线之间的差值
});
}
},
// 处理canvas数据
handleCanvasData1(list = []) {
const canvasData = { poConfigs: [], guanConfigs: [], lineConfigs: [] };
canvasData.lineConfigs = [
{ points: [], color: "red", lineWidth: 2 }, // 红色连接线配置
{ points: [], color: "yellow", lineWidth: 2 }, // 黄色连接线配置
{ points: [], color: "green", lineWidth: 2 }, // 绿色连接线配置
{ points: [], color: "blue", lineWidth: 2 }, // 蓝色连接线配置
{ points: [], color: "white", lineWidth: 2 }, // 实际连接线配置
];
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坐标
// 警戒线种类下，根据管孔设备个数，设定对应的坐标点point
this.canvasDataReal.lineConfigs.forEach((line, index) => {
let lineValKey =
line.color == "white" ? "depth" : line.color + "Alarm";
// 几个管孔几个坐标点
poumian.equipmentDataList.forEach((equip, subindex) => {
line.points.push({
x: this.canvasDataReal.guanConfigs[subindex].x + 1,
y:
this.canvasDataReal.guanConfigs[subindex].y +
equip[lineValKey] * sbHeightModulus, // 管设备的y坐标+设备的警戒值*系数
});
});
});
}
console.log("加工后的数据结构", canvasData);
this.canvasDataReal = canvasData;
console.log("this.canvasDataReal", this.canvasDataReal);
resolve(); // 数据处理完成后触发resolve
});
},
/** 初始化 Canvas 画布及坐标系 */
initCanvas() {
......@@ -963,6 +821,7 @@ export default {
loadData: function () {
console.log(this.form, "form");
this.initChart1();
this.getCanvasData();
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