Skip to content

V
V3-TailingPond
Commit 30508fd6 authored by lei's avatar lei
Browse files
Options

add:浸润线画布尺寸换算

parent 116e8ad4
Hide whitespace changes
Inline Side-by-side
Showing with 248 additions and 149 deletions
.gitignore
View file @ 30508fd6
......@@ -24,3 +24,4 @@ selenium-debug.log
package-lock.json
yarn.lock
*.zip
src/views/dataMonitor/jrx/history/index.vue
View file @ 30508fd6
......@@ -113,7 +113,7 @@ export default {
DateRangePicker,
TableFilter,
cuForm,
cuTable,
cuTable
},
data() {
return {
......@@ -123,7 +123,7 @@ export default {
size: 10,
total: 0,
loading: false,
dataList: [],
dataList: []
},
rules: {},
form: {
......@@ -136,7 +136,7 @@ export default {
search: {},
item: {},
file: 0,
config: {},
config: {}
},
// 新增图表相关数据
chartVisible: true, // 图表弹窗可见性
......@@ -155,16 +155,52 @@ export default {
poImage: null, // 新增：po.png 图片对象
// Canvas绘制配置（支持批量扩展）
poConfigs: [
{ x: 0, y: null, width: 879, height: 150 }, // 第一张po.png配置
{ x: 0, y: null, width: 879 - 250, height: 150 }, // 第二张po.png配置（宽度减少250px）
{ x: 0, y: null, width: 879, height: 150 }, // 第一张po.png配置
{ x: 0, y: null, width: 879 - 250, height: 150 } // 第二张po.png配置（宽度减少250px）
],
guanConfigs: [
{ x: null, y: null, width: 6, height: 121, image: 'guanImage' }, // 第一张guan0.png
{ x: null, y: null, width: 6, height: 200, image: 'guanImage' } // 第二张guan0.png（高度调整）
poConfigs: [
{ x: null, y: null, width: 6, height: 121, image: "guanImage" }, // 第一张guan0.png
{ x: null, y: null, width: 6, height: 200, image: "guanImage" } // 第二张guan0.png（高度调整）
],
lineConfigs: [
{ points: [], color: 'red', lineWidth: 2 }, // 红色连接线配置
{ points: [], color: 'yellow', lineWidth: 2 } // 黄色连接线配置
{ points: [], color: "red", lineWidth: 2 }, // 红色连接线配置
{ points: [], color: "yellow", lineWidth: 2 } // 黄色连接线配置
],
canvasData: [
{
name: "剖面名称",
height: "剖面高度",
width: "剖面宽度",
code: "剖面编号",
sdeg: "水区扇形起始角度",
diameter: "总直径",
jrxStepsDtoList: [
{
name: "台阶名称",
code: "台阶编号",
height: "高度(米)",
width: "宽度(米)",
slope: "坡度(deg)"
}
],
equipmentDataList: [
{
sensorid: "设备id",
sensorname: "设备名称",
unit: "设备单位",
stage: "水位（传感器到水面的距离）",
depth: "浸润线埋深(水位到管口的距离)(m)",
smhb: "// 水面海拔",
time: "时间",
holeDepth: "孔口高程",
jrxTrepanning: "浸润线开口深度",
redAlarm: "红色预警 此预警值针对的是depth 浸润线埋深",
orangeAlarm: "橙色预警",
yellowAlarm: "黄色预警",
blueAlarm: "蓝色预警"
}
]
}
]
};
},
......@@ -181,81 +217,77 @@ export default {
if (deviceId) {
this.form.query.sensorid = deviceId; // 将deviceId赋值到查询条件的code字段
}
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`;
}
// 新增：动态调整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 = []
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
})
// 管孔数据数据格式处理
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,
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'
})
height: index == 0 ? 100 : 200,
image: "guanImage"
});
}
// 警戒线逻辑- 初始化4条线
for (let index1 = 0; index1 < lineCount; index1++) {
this.lineConfigs.push({ // 设置
points: [],
// 警戒线逻辑- 初始化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,
})
})
})
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();
......@@ -263,9 +295,9 @@ export default {
// 获取选择列表字典
var selectList = this.Dict.selectList;
Tools.asyncLoop.call(this, selectList, function (key, value, next) {
Tools.asyncLoop.call(this, selectList, function(key, value, next) {
if (typeof value === "function") {
value.call(this.Dict).then(function (res) {
value.call(this.Dict).then(function(res) {
selectList[key] = res;
next();
});
......@@ -274,7 +306,7 @@ export default {
}
});
// 新增：在图表初始化的 $nextTick 后初始化 Canvas（确保 DOM 已渲染）
// 新增：在图表初始化的 $nextTick 后初始化 Canvas（确保 DOM 已渲染）
this.$nextTick(() => {
// 初始化 Canvas
setTimeout(() => {
......@@ -283,6 +315,76 @@ export default {
});
},
methods: {
// 处理canvas数据
handleCanvasData(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: 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坐标
});
}
},
/** 初始化 Canvas 画布及坐标系 */
initCanvas() {
// 获取 Canvas 元素和上下文
......@@ -342,7 +444,9 @@ export default {
this.ctx.lineWidth = config.lineWidth;
this.ctx.beginPath();
config.points.forEach((point, index) => {
index === 0 ? this.ctx.moveTo(point.x, point.y) : this.ctx.lineTo(point.x, point.y);
index === 0
? this.ctx.moveTo(point.x, point.y)
: this.ctx.lineTo(point.x, point.y);
});
this.ctx.stroke();
this.ctx.restore();
......@@ -384,7 +488,7 @@ export default {
this.drawBackground();
// 2. 绘制po.png（遍历配置数组）
console.log(this.poConfigs, 'poConfigs')
console.log(this.poConfigs, "poConfigs");
this.poConfigs.forEach((config, index) => {
// // 第二张po.png的y坐标需要基于第一张计算（顶部对齐）
// if (index === 1) {
......@@ -395,7 +499,7 @@ export default {
});
// 3. 绘制guan.png（遍历配置数组）
console.log(this.guanConfigs, 'guanConfigs')
console.log(this.guanConfigs, "guanConfigs");
this.guanConfigs.forEach((config, index) => {
// const firstPo = this.poConfigs[0];
// const secondPo = this.poConfigs[1];
......@@ -457,11 +561,10 @@ export default {
// 等待所有图片加载完成
Promise.all([
new Promise((resolve) => (this.bgImage.onload = resolve)),
new Promise((resolve) => (this.waterImage.onload = resolve)),
new Promise((resolve) => (this.poImage.onload = resolve)),
new Promise((resolve) => (this.guanImage.onload = resolve)),
new Promise(resolve => (this.bgImage.onload = resolve)),
new Promise(resolve => (this.waterImage.onload = resolve)),
new Promise(resolve => (this.poImage.onload = resolve)),
new Promise(resolve => (this.guanImage.onload = resolve))
])
.then(() => {
// 所有图片加载完成后绘制
......@@ -525,7 +628,6 @@ export default {
// );
// this.ctx.restore();
// // 3. 绘制 guan0.png（po.png 右侧中间，上层）
// this.ctx.save();
// this.ctx.setTransform(1, 0, 0, 1, 0, 0);
......@@ -544,7 +646,6 @@ export default {
// );
// this.ctx.restore();
// /**
// * canvas绘画原则。坐标轴从左上角开始画，y轴要从上往下找y轴的起始原点。
// * canvasWidth：this.canvas.height // 画布的宽度（目前为600）
......@@ -571,7 +672,6 @@ export default {
// this.ctx.restore();
// // 新增：绘制红色连接线（关键修改）
// this.ctx.save();
// this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认坐标系（原点在左上角）
......@@ -603,7 +703,6 @@ export default {
// this.ctx.stroke(); // 描边绘制
// this.ctx.restore();
// // 2. 绘制 water.png（临时恢复默认坐标系，避免翻转）
// this.ctx.save(); // 保存当前变换状态
// this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转）
......@@ -657,55 +756,58 @@ export default {
verticalAlign: "top", // 垂直顶部对齐
layout: "vertical", // 垂直排列
x: -20, // 微调水平位置
y: 10, // 微调垂直位置
y: 10 // 微调垂直位置
},
series: [
{ name: "水位", data: [...mockData.waterLevel] },
{ name: "浸润线埋深", data: [...mockData.infiltration] },
],
{ name: "浸润线埋深", data: [...mockData.infiltration] }
]
});
},
initChart1() {
let params = {
sort: "date,desc",
}
if(this.form.query.daterange){
params.daterange = this.form.query.daterange.join(',')
sort: "date,desc"
};
if (this.form.query.daterange) {
params.daterange = this.form.query.daterange.join(",");
}
if(this.form.query.sensorid){
params.code = this.form.query.sensorid
if (this.form.query.sensorid) {
params.code = this.form.query.sensorid;
}
request({
url: "data/st/imghistory",
method: "get",
params
}).then((res) => {
}).then(res => {
const data = res.body;
// const data = this.getChartData().body
console.log("data", data);
const chartData = this.seriesDataFormat(data, { datekey: "date" });
var warningLine = undefined // this.form.config.warningLine;
var option = {
valEnabled: true,
opacity:1,
lineWidth:3,
};
var alarmData = this.discernValidAlarmValue(data.alarm, data.lists, chartData.series, warningLine, option);
var warningLine = undefined; // this.form.config.warningLine;
var option = {
valEnabled: true,
opacity: 1,
lineWidth: 3
};
var alarmData = this.discernValidAlarmValue(
data.alarm,
data.lists,
chartData.series,
warningLine,
option
);
// const chartData = data
console.log("chartCData", chartData);
Highcharts.setOptions({
global: {
useUTC: false,
useUTC: false
},
lang: {
resetZoom: "重置缩放比例",
},
resetZoom: "重置缩放比例"
}
});
this.chartInstance = new Highcharts.chart(this.$refs.chartContainer, {
......@@ -715,20 +817,20 @@ export default {
//marginTop:30,
//marginBottom:30,
//marginLeft:30,
zoomType: "x", // xy
zoomType: "x" // xy
},
valEnabled: true,
opacity: 1,
lineWidth: 3,
title: {
text: "",
text: ""
},
subtitle: {
text: "",
text: ""
},
tooltip: {
enabled: false,
borderWidth: 10,
borderWidth: 10
},
xAxis: {
type: "datetime",
......@@ -746,28 +848,28 @@ export default {
day: "%m-%d",
week: "%m-%d",
month: "%Y-%m",
year: "%Y",
},
year: "%Y"
}
},
yAxis: {
title: {
text: "",
text: ""
},
labels: {
x: -6,
x: -6
},
gridLineColor: "#aaa",
max: null,
max: null
},
plotOptions: {
column: {
borderWidth: 0,
borderWidth: 0
//y:50,
//itemMarginTop:50,
},
bar: {
borderWidth: 0,
},
borderWidth: 0
}
},
tooltip: {
// {point.y:.4f} // 保留4位小数
......@@ -788,8 +890,8 @@ export default {
day: "%m-%d %H时",
week: "%m-%d",
month: "%Y-%m",
year: "%Y",
},
year: "%Y"
}
},
legend: {
enabled: chartData.series.length > 1 ? true : false,
......@@ -812,12 +914,12 @@ export default {
y: -10,
itemMarginTop: 2,
itemStyle: {},
itemHoverStyle: {},
itemHoverStyle: {}
},
credits: {
enabled: false,
enabled: false
},
series: chartData.series,
series: chartData.series
});
});
},
......@@ -842,7 +944,7 @@ export default {
"#00ABBD",
"#ffd886",
"#9F2E61",
"#4D670C",
"#4D670C"
];
var len = names.length;
......@@ -853,7 +955,7 @@ export default {
data: [],
key: item.key,
type: data.chartType,
color: colors[i],
color: colors[i]
};
opts && serie.type && (serie.type = opts.type);
series.push(serie);
......@@ -887,10 +989,10 @@ export default {
{ color: "red", name: "红色报警线" },
{ color: "orange", name: "橙色报警线" },
{ color: "yellow", name: "黄色报警线" },
{ color: "blue", name: "蓝色报警线" },
{ color: "blue", name: "蓝色报警线" }
],
alarmLine = {},
setAlarmSerie = function (value, name, color) {
setAlarmSerie = function(value, name, color) {
// 修改蓝色色值
color === "blue" && (color = "#3BAFFB");
var sx = list[0].date,
......@@ -898,10 +1000,7 @@ export default {
var serie = {
name: name,
type: "spline",
data: [
{ x: sx, y: value },
{ x: ex, y: value },
],
data: [{ x: sx, y: value }, { x: ex, y: value }],
color: color,
enableMouseTracking: false,
legend: false,
......@@ -910,8 +1009,8 @@ export default {
lineWidth: opts.lineWidth || 1,
states: {
inactive: {
opacity: opts.opacity,
},
opacity: opts.opacity
}
},
dataLabels: {
enabled: opts.valEnabled || false, // 数据值, 2022/11/11(周五) 因多条报警线暂时关闭
......@@ -922,19 +1021,19 @@ export default {
allowOverlap: true,
color: color,
style: {
textOutline: "none",
},
textOutline: "none"
}
},
tooltip: {
//footerFormat:'',
//pointFormat:'',
headerFormat: "",
headerFormat: ""
//nullFormat:'',
},
marker: {
enabled: false,
enabled: false
},
zIndex: -10,
zIndex: -10
};
series.push(serie);
};
......@@ -967,30 +1066,29 @@ export default {
}
return { series, maxAlarm };
},
/** 切换图表类型 */
switchChartType(type) {
this.currentChartType = type;
if (this.chartInstance) {
this.chartInstance.series.forEach((series) => {
this.chartInstance.series.forEach(series => {
series.update({ type: this.currentChartType });
});
}
},
loadData: function(){
console.log(this.form, 'form')
this.initChart1()
loadData: function() {
console.log(this.form, "form");
this.initChart1();
return reqApi.common.getRequst
return reqApi.common.getRequst;
},
cancelForm() {
this.form.visible = false;
},
submitForm(form, item) {
reqApi.common.submitForm.call(this, form, item);
},
},
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
......
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