Browse Source

修改canvas

master
hehongxing 2 years ago
parent
commit
83894e7718
  1. 90
      04.系统编码/Frontend/src/components/RamanLidar.vue

90
04.系统编码/Frontend/src/components/RamanLidar.vue

@ -391,6 +391,7 @@ export default {
initEcharts(options.currentTab) initEcharts(options.currentTab)
reloadChangeData(); reloadChangeData();
}, 50); }, 50);
window.onresize = () => getElementSize();
}) })
// //
@ -616,36 +617,46 @@ export default {
} }
const reloadWatervaporBefore = () => { const reloadWatervaporBefore = () => {
options.loadingWatervaporBeforeStatus = true; let element = getElementSize();
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;
}
if (creates.watervaporBeforeDrawer != null) { options.loadingWatervaporBeforeStatus = true;
creates.watervaporBeforeDrawer.close(); 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); if (creates.watervaporBeforeDrawer != null) {
creates.watervaporBeforeDrawer = new HeatMapDrawer(810, 700, matrix, "watervapor_chart-before", 'g/kg'); creates.watervaporBeforeDrawer.close();
creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true)); }
creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporBeforeDrawer.draw(); 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 = () => { const reloadExtinctionBefore = () => {
let view = document.querySelector('.picture-view'); let element = getElementSize();
let width = view.clientWidth / 2;
let heigth = view.clientHeight - 102;
options.loadingExtinctionBeforeStatus = true; options.loadingExtinctionBeforeStatus = true;
let params = { let params = {
@ -656,7 +667,7 @@ export default {
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => { post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
options.loadingExtinctionBeforeStatus = false; options.loadingExtinctionBeforeStatus = false;
if (response.error != 0) { if (response.error != 0) {
createEmptyCanvas('extinction_chart-before', width, heigth); createEmptyCanvas('extinction_chart-before', element.width, element.heigth);
console.log("未找到质控前数据文件"); console.log("未找到质控前数据文件");
return; return;
} }
@ -666,7 +677,7 @@ export default {
} }
let matrix = convertValueToBox(response.data); 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.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors()); creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionBeforeDrawer.draw(); creates.extinctionBeforeDrawer.draw();
@ -979,18 +990,19 @@ export default {
} }
const drawWatervaporAfter = (result: CustomeArray<any>) => { const drawWatervaporAfter = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
options.loadingWaterVaporStatus = false; let element = getElementSize();
if (creates.watervaporDrawer != null) { options.loadingWaterVaporStatus = false;
creates.watervaporDrawer.close(); if (creates.watervaporDrawer != null) {
} creates.watervaporDrawer.close();
}
let matrix = converCloudRecognition(101, result, 'watervapor'); let matrix = converCloudRecognition(101, result, 'watervapor');
creates.watervaporDrawer = new HeatMapDrawer(800, 700, matrix, "watervapor_chart-after", 'g/kg'); 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.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporDrawer.setColorChart(prepareWatervaporColors()); creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporDrawer.draw(); creates.watervaporDrawer.draw();
} }
const prepareWatervaporColors = () => { const prepareWatervaporColors = () => {
@ -1001,9 +1013,7 @@ export default {
} }
const drawExtinctionAfter = (result: CustomeArray<any>) => { const drawExtinctionAfter = (result: CustomeArray<any>) => {
let view = document.querySelector('.picture-view'); let element = getElementSize();
let width = view.clientWidth / 2;
let heigth = view.clientHeight - 102;
if (result.length != 12) return; if (result.length != 12) return;
@ -1013,7 +1023,7 @@ export default {
} }
let matrix = converCloudRecognition(801, result, 'extinction'); 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.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionDrawer.setColorChart(prepareExtinctionnColors()); creates.extinctionDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionDrawer.draw(); creates.extinctionDrawer.draw();

Loading…
Cancel
Save