Skip to content

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

add：浸润线剖面canvas初始化

parent 9c7752f5
Show whitespace changes
Inline Side-by-side
Showing with 262 additions and 0 deletions
src/views/dataMonitor/jrx/history/index.vue
View file @ cd8efe41
......@@ -10,6 +10,40 @@
:loadData="loadData"
/>
</div>
<div class="new-container" style="display: flex;">
<div class="canvas-wrapper" style="width:1200px;height: 600px;">
<!-- 替换为 Canvas 元素 -->
<canvas
ref="canvas"
id="mainCanvas"
width="1200"
height="600"
style="background: #f0f0f0;"
></canvas>
</div>
<div class="chart-wrapper">
<!-- 图表容器 -->
<div ref="chartContainer" style="width:0px; height: 400px; margin-bottom: 20px;"></div>
<!-- 图表操作区域（调整到最下方左侧） -->
<div class="chart-btn-group">
<button
size="small"
:type="currentChartType === 'line' ? 'primary' : ''"
@click="switchChartType('line')"
>折线图</button>
<button
size="small"
:type="currentChartType === 'column' ? 'primary' : ''"
@click="switchChartType('column')"
>柱状图</button>
</div>
</div>
</div>
<div class="panel-bottom page-row">
<div class="ctin-box">
<div class="content-within">
......@@ -45,10 +79,17 @@
:cancel="cancelForm"
:watchKeys="['paperfilename']"
/>
</div>
</template>
<script>
import Highcharts from 'highcharts';
import { reqApi, Config } from '@/assets/js/httpApi.js';
import { Tools } from '@/assets/js/common.js';
import DateRangePicker from '@/components/DateRangePicker';
......@@ -81,6 +122,21 @@ export default {
file:0,
config:{},
},
// 新增图表相关数据
chartVisible: false, // 图表弹窗可见性
deviceList: [{ id: 'test001', name: '测试设备1' }], // 设备列表数据
selectedDevice: null, // 选中设备ID
dateRange: [null, null], // 日期范围选择
currentChartType: 'line', // 当前图表类型（line/column）
chartLoading: false, // 图表加载状态
chartInstance: null, // Highcharts实例引用
// ...原有data属性保持不变...
canvas: null, // Canvas 实例
ctx: null, // 2D 上下文
bgImage: null, // 背景图对象
waterImage: null, // 新增：water.png 图片对象
poImage: null, // 新增：po.png 图片对象
}
},
created(){
......@@ -105,8 +161,214 @@ export default {
})
}else{next()};
});
this.chartVisible = true;
// 弹窗显示后初始化图表
this.$nextTick(() => {
this.initChart()
// 新增：在图表初始化的 $nextTick 后初始化 Canvas（确保 DOM 已渲染）
this.$nextTick(() => {
// 初始化 Canvas
setTimeout(()=>{
this.initCanvas();
}, 1000)
});
});
},
methods: {
/** 初始化 Canvas 画布及坐标系 */
initCanvas() {
// 获取 Canvas 元素和上下文
this.canvas = this.$refs.canvas; // document.getElementById('mainCanvas')
if (!this.canvas) {
console.error('Canvas 元素未找到');
return;
}
console.log(this.canvas, 'canvas')
this.ctx = this.canvas.getContext('2d');
// 坐标系变换：将原点移至左下角（默认原点在左上角）
this.ctx.translate(0, this.canvas.height); // 向下移动画布高度
this.ctx.scale(1, -1); // 翻转 Y 轴方向（上为正）
// 加载背景图并绘制
this.loadBackgroundImage();
// 加载所有图片并绘制
this.loadAllImages();
},
/** 加载所有图片并绘制 */
loadAllImages() {
// 加载背景图（原有）
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');
// 加载 po.png
this.poImage = new Image();
this.poImage.src = require('@/assets/images/jrx/po.png');
// 等待所有图片加载完成
Promise.all([
new Promise(resolve => this.bgImage.onload = resolve),
new Promise(resolve => this.waterImage.onload = resolve),
new Promise(resolve => this.poImage.onload = resolve)
]).then(() => {
// 所有图片加载完成后绘制
this.drawAllImages();
}).catch(() => {
console.error('部分图片加载失败');
});
},
/** 绘制所有图片（背景图 + 新增图片） */
drawAllImages() {
// 1. 绘制背景图（原有逻辑）
this.ctx.save(); // 保存当前变换状态
this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转）
this.ctx.drawImage(
this.bgImage,
0, 0,
this.canvas.width,
this.canvas.height
);
this.ctx.restore(); // 恢复之前的变换
// 3. 绘制 po.png（同样临时恢复默认坐标系）
this.ctx.save();
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
this.ctx.drawImage(
this.poImage,
0, this.canvas.height - 150, // Y坐标调整为画布高度 - 图片高度
879, 150 // 绘制尺寸（与原尺寸一致）
);
this.ctx.restore();
// 2. 绘制 water.png（临时恢复默认坐标系，避免翻转）
this.ctx.save(); // 保存当前变换状态
this.ctx.setTransform(1, 0, 0, 1, 0, 0); // 恢复默认变换（不翻转）
this.ctx.drawImage(
this.waterImage,
0, this.canvas.height - 255, // Y坐标调整为画布高度 - 图片高度（原点在左下角）
485, 255 // 绘制尺寸（与原尺寸一致）
);
this.ctx.restore(); // 恢复之前的变换
},
/** 加载背景图并绘制 */
loadBackgroundImage() {
this.bgImage = new Image();
this.bgImage.src = require('@/assets/images/jrx/bg.png'); // 路径根据项目实际结构调整
// 图片加载完成后绘制
this.bgImage.onload = () => {
// 绘制背景图（注意：坐标系已变换，Y轴向上）
// 原点在左下角，直接从 (0,0) 开始绘制，高度方向需适配翻转后的坐标系
this.ctx.drawImage(
this.bgImage,
0, 0, // 图片在画布上的起始坐标（左下角原点）
this.canvas.width, // 绘制宽度
this.canvas.height // 绘制高度
);
};
// 处理图片加载错误
this.bgImage.onerror = () => {
console.error('背景图加载失败');
this.ctx.fillStyle = '#f0f0f0';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
};
},
/** 初始化图表（关键修改：调整图例位置） */
initChart() {
const mockData = this.generateMockData();
console.log('shuju', mockData)
this.chartInstance = Highcharts.chart(this.$refs.chartContainer, {
title: { text: '监测数据趋势图' },
xAxis: { type: 'datetime' },
yAxis: { title: { text: '监测值' } },
legend: { // 新增图例配置
align: 'right', // 水平右对齐
verticalAlign: 'top', // 垂直顶部对齐
layout: 'vertical', // 垂直排列
x: -20, // 微调水平位置
y: 10 // 微调垂直位置
},
series: [{ name: '水位', data: [...mockData.waterLevel] }, { name: '浸润线埋深', data: [...mockData.infiltration] }]
});
},
/** 加载图表数据 */
async loadChartData() {
if (!this.selectedDevice || !this.dateRange[0] || !this.dateRange[1]) {
this.$message.warning('请选择完整查询条件');
return;
}
this.chartLoading = true;
try {
const params = {
deviceId: this.selectedDevice,
startDate: this.dateRange[0],
endDate: this.dateRange[1]
};
// const res = await reqApi.getMonitorData(params); // 替换为实际数据接口
// const mockData = this.generateMockData();
// this.updateChartData(mockData);
} catch (error) {
this.$message.error('加载图表数据失败');
} finally {
this.chartLoading = false;
}
},
/** 生成测试数据 */
generateMockData() {
const [startDate, endDate] = this.dateRange;
const start = new Date(startDate).getTime();
const end = new Date(endDate).getTime();
const days = Math.ceil((end - start) / (1000 * 3600 * 24)); // 计算天数差
const mockData = { waterLevel: [], infiltration: [] };
// 生成每天的模拟数据（时间戳+随机值）
for (let i = 0; i < 30; i++) {
const timestamp = start + i * 1000 * 3600 * 24;
// 水位：10-20之间的随机数（保留2位小数）
mockData.waterLevel.push([timestamp, Number((10 + Math.random() * 10).toFixed(2))]);
// 浸润线埋深：5-15之间的随机数（保留2位小数）
mockData.infiltration.push([timestamp, Number((5 + Math.random() * 10).toFixed(2))]);
}
return mockData;
},
/** 更新图表数据 */
updateChartData(data) {
if (!this.chartInstance) return;
// 假设data结构：{ waterLevel: [], infiltration: [] }
this.chartInstance.series[0].setData(data.waterLevel);
this.chartInstance.series[1].setData(data.infiltration);
},
/** 切换图表类型 */
switchChartType(type) {
this.currentChartType = type;
if (this.chartInstance) {
this.chartInstance.series.forEach(series => {
series.update({ type: this.currentChartType });
});
}
},
loadData:reqApi.common.getRequst,
cancelForm(){
this.form.visible = false;
......
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