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) => { - 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) => { - 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();