From 83894e771876f59c47e3a16d5ba2df93d1c164c4 Mon Sep 17 00:00:00 2001
From: hehongxing <hehongxing@pc.com>
Date: Thu, 23 Mar 2023 17:17:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9canvas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../Frontend/src/components/RamanLidar.vue | 90 ++++++++++---------
1 file changed, 50 insertions(+), 40 deletions(-)
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 0774b14..6fcb3a5 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -391,6 +391,7 @@ export default {
initEcharts(options.currentTab)
reloadChangeData();
}, 50);
+ window.onresize = () => getElementSize();
})
//边界层高度
@@ -616,36 +617,46 @@ export default {
}
const reloadWatervaporBefore = () => {
- options.loadingWatervaporBeforeStatus = true;
- let params = {
- date: moment(options.date).format('YYYY-MM-DD 00'),
- var: 'Vapor Mixing Ratio',
- locate: options.currentRegion
- }
- post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
- options.loadingWatervaporBeforeStatus = false;
- if (response.error != 0) {
- createEmptyCanvas('watervapor_chart-before', 810, 650);
- console.log("未找到质控前数据文件");
- return;
- }
+ let element = getElementSize();
- if (creates.watervaporBeforeDrawer != null) {
- creates.watervaporBeforeDrawer.close();
+ options.loadingWatervaporBeforeStatus = true;
+ let params = {
+ date: moment(options.date).format('YYYY-MM-DD 00'),
+ var: 'Vapor Mixing Ratio',
+ locate: options.currentRegion
}
+ post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
+ options.loadingWatervaporBeforeStatus = false;
+ if (response.error != 0) {
+ createEmptyCanvas('watervapor_chart-before', element.width, element.heigth);
+ console.log("未找到质控前数据文件");
+ return;
+ }
- let matrix = convertValueToBox(response.data);
- creates.watervaporBeforeDrawer = new HeatMapDrawer(810, 700, matrix, "watervapor_chart-before", 'g/kg');
- creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
- creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
- creates.watervaporBeforeDrawer.draw();
- })
+ if (creates.watervaporBeforeDrawer != null) {
+ creates.watervaporBeforeDrawer.close();
+ }
+
+ let matrix = convertValueToBox(response.data);
+ creates.watervaporBeforeDrawer = new HeatMapDrawer(element.width, element.heigth, matrix, "watervapor_chart-before", 'g/kg');
+ creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
+ creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
+ creates.watervaporBeforeDrawer.draw();
+ })
+ }
+
+ const getElementSize = () => {
+ let view = document.querySelector('.picture-view');
+ let width = view.clientWidth / 2;
+ let heigth = view.clientHeight - 102;
+ return {
+ width: width,
+ heigth: heigth
+ }
}
const reloadExtinctionBefore = () => {
- let view = document.querySelector('.picture-view');
- let width = view.clientWidth / 2;
- let heigth = view.clientHeight - 102;
+ let element = getElementSize();
options.loadingExtinctionBeforeStatus = true;
let params = {
@@ -656,7 +667,7 @@ export default {
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
options.loadingExtinctionBeforeStatus = false;
if (response.error != 0) {
- createEmptyCanvas('extinction_chart-before', width, heigth);
+ createEmptyCanvas('extinction_chart-before', element.width, element.heigth);
console.log("未找到质控前数据文件");
return;
}
@@ -666,7 +677,7 @@ export default {
}
let matrix = convertValueToBox(response.data);
- creates.extinctionBeforeDrawer = new HeatMapDrawer(width, heigth, matrix, "extinction_chart-before", '/km');
+ creates.extinctionBeforeDrawer = new HeatMapDrawer(element.width, element.heigth, matrix, "extinction_chart-before", '/km');
creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionBeforeDrawer.draw();
@@ -979,18 +990,19 @@ export default {
}
const drawWatervaporAfter = (result: CustomeArray<any>) => {
- if (result.length != 24) return;
+ if (result.length != 24) return;
- options.loadingWaterVaporStatus = false;
- if (creates.watervaporDrawer != null) {
- creates.watervaporDrawer.close();
- }
+ let element = getElementSize();
+ options.loadingWaterVaporStatus = false;
+ if (creates.watervaporDrawer != null) {
+ creates.watervaporDrawer.close();
+ }
- let matrix = converCloudRecognition(101, result, 'watervapor');
- creates.watervaporDrawer = new HeatMapDrawer(800, 700, matrix, "watervapor_chart-after", 'g/kg');
- creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
- creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
- creates.watervaporDrawer.draw();
+ let matrix = converCloudRecognition(101, result, 'watervapor');
+ creates.watervaporDrawer = new HeatMapDrawer(element.width, element.heigth, matrix, "watervapor_chart-after", 'g/kg');
+ creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
+ creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
+ creates.watervaporDrawer.draw();
}
const prepareWatervaporColors = () => {
@@ -1001,9 +1013,7 @@ export default {
}
const drawExtinctionAfter = (result: CustomeArray<any>) => {
- let view = document.querySelector('.picture-view');
- let width = view.clientWidth / 2;
- let heigth = view.clientHeight - 102;
+ let element = getElementSize();
if (result.length != 12) return;
@@ -1013,7 +1023,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'extinction');
- creates.extinctionDrawer = new HeatMapDrawer(width, heigth, matrix, "extinction_chart-after", '/km');
+ creates.extinctionDrawer = new HeatMapDrawer(element.width, element.heigth, matrix, "extinction_chart-after", '/km');
creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionDrawer.draw();