From 55a8ed881b82774e15fd6c70a7dbf09313b8df77 Mon Sep 17 00:00:00 2001
From: xiaowuler <xiaowuler@163.com>
Date: Thu, 31 Mar 2022 09:39:07 +0800
Subject: [PATCH 1/4] modify some codes
---
04.系统编码/Frontend/src/model/heat-map-drawer.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
index d310828..1ae89f0 100644
--- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts
+++ b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
@@ -151,7 +151,6 @@ export class HeatMapDrawer{
this.values[dataIndex] = this.values[dataIndex].reverse();
}
- console.log(this.values);
this.createCalc(this.values);
}
From fa7dcbdbf6ace0256f7f45fe9dcbb746850dc0d7 Mon Sep 17 00:00:00 2001
From: xiaowuler <xiaowuler@163.com>
Date: Thu, 31 Mar 2022 11:49:42 +0800
Subject: [PATCH 2/4] modify some codes
---
.../Frontend/src/components/RamanLidar.vue | 119 ++++++++++++++++--
.../Frontend/src/model/heat-map-drawer.ts | 33 +++--
.../Frontend/src/uilts/box-drawer.ts | 4 +-
3 files changed, 130 insertions(+), 26 deletions(-)
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index ec2435b..c1ecc52 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -103,6 +103,11 @@
<div class="picture">
<h2 class="title">边界层特征值</h2>
+ <div v-loading="loadingBackscatterStatus"
+ style="width: 100%;"
+ element-loading-text="加载中">
+ <canvas id='backscatter_chart'></canvas>
+ </div>
</div>
</div>
@@ -187,7 +192,8 @@ export default {
singleWatervaporDrawer: HeatMapDrawer,
cloudSolDrawer: HeatMapDrawer,
pm2Point5Drawer: HeatMapDrawer,
- pm10Drawer: HeatMapDrawer
+ pm10Drawer: HeatMapDrawer,
+ backscatterDrawer: HeatMapDrawer,
} = {
boundaryLayerHeight: null,
cloudsHeight: null,
@@ -200,7 +206,8 @@ export default {
opticsExtinctionDrawer: null,
cloudSolDrawer: null,
pm2Point5Drawer: null,
- pm10Drawer: null
+ pm10Drawer: null,
+ backscatterDrawer: null
}
let options = reactive({
currentTab: 'MWR',
@@ -232,6 +239,7 @@ export default {
loadingCloudRecognitionStatus: false,
loadingExtinctionStatus: false,
loadingWaterVaporStatus: false,
+ loadingBackscatterStatus: false
})
onMounted(() => {
@@ -300,31 +308,81 @@ export default {
const reloadChangeData = () => {
cancelRequest();
if (options.currentTab === 'boundary-layer-height') {
- reloadCloudRecognition(101, 'watervapor', drawSingleWatervapor);
+ reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor);
} else if (options.currentTab === 'optical-property') {
// extinctionApi()
// LidarRatioApi()
- reloadCloudRecognition(801, 'extinction', drawOpticsExtinction);
+ reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
} else if (options.currentTab === 'aerosol-product') {
// boundaryLayerHeightDate()
reloadChartsRecognition('pblh', drawCharts)
- reloadCloudRecognition(201, 'pm2_5', drawPm2Point5);
- reloadCloudRecognition(201, 'pm10', drawPm10);
+ reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
+ reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
+ reloadCloudRecognition('backscatter', 201, 'backscatter', drawBackscatter)
// boundaryCharacteristicApi()
//aerosolApi()
} else if (options.currentTab === 'BingoCloud') {
//layerTypeApi()
// cloudsHeightApi()
// cloudTopHeightApi()
- reloadCloudRecognition(801, 'layertype', drawCloudSol);
+ reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol);
} else if (options.currentTab === 'MWR') {
//waterVapourApi()
- reloadCloudRecognition(801, 'layertype', drawCloudRecognition);
- reloadCloudRecognition(801, 'extinction', drawExtinction);
- reloadCloudRecognition(101, 'watervapor', drawWatervapor);
+ reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
+ reloadCloudRecognition('extinction', 801, 'extinction', drawExtinction);
+ reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervapor);
+ }
+ }
+
+ const preprocessing = (type: string) => {
+ switch(type) {
+ case 'layertype':
+ options.loadingCloudRecognitionStatus = true;
+ clearHeatMapDrawer(creates.cloudRecognitionDrawer);
+ break;
+ case 'extinction':
+ options.loadingExtinctionStatus = true;
+ clearHeatMapDrawer(creates.extinctionDrawer);
+ break;
+ case 'watervapor':
+ options.loadingWaterVaporStatus = true;
+ clearHeatMapDrawer(creates.watervaporDrawer);
+ break;
+ case 'cloudSol':
+ options.loadingCloudSolStatus = true;
+ clearHeatMapDrawer(creates.cloudSolDrawer);
+ break;
+ case 'pm2_5':
+ options.loadingPmStatus = true;
+ clearHeatMapDrawer(creates.pm2Point5Drawer);
+ break;
+ case 'pm10':
+ options.loadingPmStatus = true;
+ clearHeatMapDrawer(creates.pm10Drawer);
+ break;
+ case 'extinctionOptics':
+ options.loadingExtinctionOpticsStatus = true;
+ clearHeatMapDrawer(creates.opticsExtinctionDrawer);
+ break;
+ case 'singleWatervapor':
+ options.loadingWaterVaporSingleStatus = true;
+ clearHeatMapDrawer(creates.singleWatervaporDrawer);
+ break;
+ case 'backscatter':
+ options.loadingBackscatterStatus = true;
+ clearHeatMapDrawer(creates.backscatterDrawer);
+ break;
+ default:
+ throw new Error("无效的type类型");
}
}
+ const clearHeatMapDrawer = (drawer: HeatMapDrawer) => {
+ if (drawer == null) return;
+ drawer.close();
+ drawer = null;
+ }
+
const cancelRequest = () => {
axiosStore._axiosPromiseCancel.forEach(e=>{
e && e()
@@ -332,9 +390,32 @@ export default {
axiosStore._axiosPromiseCancel = [];
}
+ const drawBackscatter = (result: CustomeArray<any>) => {
+ if (result.length != 24) return;
+
+ options.loadingBackscatterStatus = false;
+ if (creates.backscatterDrawer != null){
+ creates.backscatterDrawer.close();
+ }
+
+ let matrix = converCloudRecognition(201, result);
+ creates.backscatterDrawer = new HeatMapDrawer(800, 600, matrix, "backscatter_chart", '米');
+ creates.backscatterDrawer.setAxis(new CoordinateScale([0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]), new CoordinateScale([0, 1000, 2000, 3000], true, true));
+ creates.backscatterDrawer.setColorChart(prepareBackscatterColors());
+ creates.backscatterDrawer.draw();
+ }
+
+ const prepareBackscatterColors = () => {
+ return new ColorChart(['#8F0000','#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0',
+ '#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'],
+ [-4, -4.25, -4.5, -4.75, -5, -5.25, -5.5, -5.75, -6, -6.25, -6.5, -6.75, -7, -7.25, -7.5, -7.75, -8]
+ );
+ }
+
const drawPm2Point5 = (result: CustomeArray<any>) => {
if (result.length != 24) return;
+ options.loadingPmStatus = false;
if (creates.pm2Point5Drawer != null){
creates.pm2Point5Drawer.close();
}
@@ -349,6 +430,7 @@ export default {
const drawPm10 = (result: CustomeArray<any>) => {
if (result.length != 24) return;
+ options.loadingPmStatus = false;
if (creates.pm10Drawer != null){
creates.pm10Drawer.close();
}
@@ -373,6 +455,7 @@ export default {
const drawCloudSol = (result: CustomeArray<any>) => {
if (result.length != 24) return;
+ options.loadingCloudSolStatus = false;
if (creates.cloudSolDrawer != null){
creates.cloudSolDrawer.close();
}
@@ -387,6 +470,7 @@ export default {
const drawOpticsExtinction = (result: CustomeArray<any>) => {
if (result.length != 24) return;
+ options.loadingExtinctionOpticsStatus = false;
if (creates.opticsExtinctionDrawer != null){
creates.opticsExtinctionDrawer.close();
}
@@ -401,6 +485,7 @@ export default {
const drawSingleWatervapor = (result: CustomeArray<any>) => {
if (result.length != 24) return;
+ options.loadingWaterVaporSingleStatus = false;
if (creates.singleWatervaporDrawer != null){
creates.singleWatervaporDrawer.close();
}
@@ -415,6 +500,7 @@ export default {
const drawWatervapor = (result: CustomeArray<any>) => {
if (result.length != 24) return;
+ options.loadingWaterVaporStatus = false;
if (creates.watervaporDrawer != null){
creates.watervaporDrawer.close();
}
@@ -436,6 +522,7 @@ export default {
const drawExtinction = (result: CustomeArray<any>) => {
if (result.length != 24) return;
+ options.loadingExtinctionStatus = false;
if (creates.extinctionDrawer != null){
creates.extinctionDrawer.close();
}
@@ -454,7 +541,8 @@ export default {
);
}
- const reloadCloudRecognition = (capacity: number, element: string, callback: any) => {
+ const reloadCloudRecognition = (type: string, capacity: number, element: string, callback: any) => {
+ preprocessing(type);
let result = new CustomeArray(callback);
let time = moment(options.date);
for(let index = 0; index < 24; index ++){
@@ -474,6 +562,7 @@ export default {
const drawCloudRecognition = (result: CustomeArray<any>) => {
if (result.length != 24) return;
+ options.loadingCloudRecognitionStatus = false;
if (creates.cloudRecognitionDrawer != null){
creates.cloudRecognitionDrawer.close();
}
@@ -521,7 +610,10 @@ export default {
if (matrix[tempIndex] == null){
matrix[tempIndex] = new Array<Box>(capacity);
}
- matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, r.data[h][i], i * 15, time, "米");
+
+ let value = r.data[h][i];
+ value = value == null ? 0 : value;
+ matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, value, h * 15, time, "米");
}
}
}
@@ -1077,6 +1169,9 @@ export default {
#pm10_chart {
transform: scale(0.5,0.4) translate(-314px, -475px);
}
+ #backscatter_chart {
+ transform: scale(0.6,0.85) translateX(-260px);
+ }
#cloud_sol_chart {
transform: scale(0.6,0.85) translate(-31%, -12px);
}
diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
index d3adb42..7430a8a 100644
--- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts
+++ b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
@@ -13,7 +13,7 @@ export class HeatMapDrawer{
private readonly width: number = null;
private readonly height: number = null;
- private readonly paddingLeft: number = 200;
+ private readonly paddingLeft: number = 150;
private readonly paddingRight: number = 100;
private readonly paddingTop: number = 60;
private readonly paddingBottom: number = 50;
@@ -23,13 +23,13 @@ export class HeatMapDrawer{
// 垂直刻度
private readonly verticalScaleLine: number = 18;
// 水平刻度
- private readonly horizontalScaleLine: number = 20;
+ private readonly horizontalScaleLine: number = 15;
public base64Image: string = null;
private verticalScaleIntervalLength: number = 0;
private horizontalScaleIntervalLength: number = 0;
- private paddingColorLeft: number = 50;
+ private paddingColorLeft: number = 20;
private defaultColorWidth: number = 30;
private calc: Calc = null;
@@ -67,7 +67,13 @@ export class HeatMapDrawer{
let startY = this.paddingTop + this.verticalScaleLine + heightInterval;
let interval = (this.borderHeight - heightInterval) / (this.colorChart.colors.length)
- this.canvasContext.font = "normal 24px Verdana";
+ // 绘制色标外边框
+ this.canvasContext.lineWidth="1";
+ this.canvasContext.strokeStyle="black";
+ this.canvasContext.rect(startX, startY, this.defaultColorWidth, this.borderHeight - heightInterval);
+ this.canvasContext.stroke();
+
+ this.canvasContext.font = "normal 20px Verdana";
this.canvasContext.fillStyle = "#000000";
for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){
@@ -81,22 +87,22 @@ export class HeatMapDrawer{
if (index == 0){
if (this.colorChart.showStartValue){
const text = this.colorChart.values[targetIndex + 1];
- this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + 9);
+ this.canvasContext.fillText(text, startX + this.defaultColorWidth + 2, _y + 9);
}
const text = this.colorChart.values[targetIndex];
- this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + interval + 9);
+ this.canvasContext.fillText(text, startX + this.defaultColorWidth + 2, _y + interval + 9);
}else if (index == lastLen){
if (this.colorChart.showEndValue){
const text = this.colorChart.values[targetIndex];
- this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + interval + 9);
+ this.canvasContext.fillText(text, startX + this.defaultColorWidth + 2, _y + interval + 9);
}
const text = this.colorChart.values[targetIndex + 1];
- this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + 9);
+ this.canvasContext.fillText(text, startX + this.defaultColorWidth + 2, _y + 9);
}else{
const text = this.colorChart.values[targetIndex];
- this.canvasContext.fillText(text, startX + this.defaultColorWidth, _y + interval + 9);
+ this.canvasContext.fillText(text, startX + this.defaultColorWidth + 2, _y + interval + 9);
}
}
}
@@ -148,6 +154,7 @@ export class HeatMapDrawer{
this.canvasContext.fillStyle = color;
this.canvasContext.fillRect(x, y, width, height);
}
+ // this.values[dataIndex].sort((x, y) => y.dataHeight - x.dataHeight);
this.values[dataIndex] = this.values[dataIndex].reverse();
}
@@ -248,7 +255,7 @@ export class HeatMapDrawer{
this.canvasContext.translate(x, y);
this.canvasContext.rotate(Math.PI / 180 * 90);
this.canvasContext.textBaseline = 'bottom';
- this.canvasContext.font = "normal 35px Verdana";
+ this.canvasContext.font = "normal 25px Verdana";
this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(str, 0, 0);
this.canvasContext.restore();
@@ -256,7 +263,7 @@ export class HeatMapDrawer{
} else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) {
this.canvasContext.save();
this.canvasContext.textBaseline = 'top';
- this.canvasContext.font = "normal 35px Verdana";
+ this.canvasContext.font = "normal 25px Verdana";
this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(str, x, y);
this.canvasContext.restore();
@@ -292,7 +299,7 @@ export class HeatMapDrawer{
this.canvasContext.stroke();
if (true){
- this.canvasContext.font = "normal 30px Verdana";
+ this.canvasContext.font = "normal 20px Verdana";
this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(this.xAxis.scales[index], _x - this.canvasContext.measureText(this.xAxis.scales[index]).width / 2, startY + this.verticalScaleLine + this.borderHeight + 36);
}
@@ -318,7 +325,7 @@ export class HeatMapDrawer{
this.canvasContext.stroke();
if (true) {
- this.canvasContext.font = "normal 30px Verdana";
+ this.canvasContext.font = "normal 20px Verdana";
this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(this.yAxis.scales[index], startX - this.canvasContext.measureText(this.yAxis.scales[index]).width - this.horizontalScaleLine, _y + 10);
}
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index 86a21b3..35798cd 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -421,7 +421,7 @@ export class Box implements IBox{
height: number;
public value: number;
- dataHeight: number;
+ public dataHeight: number;
time: string;
util: string;
@@ -452,6 +452,8 @@ export class Box implements IBox{
this.y = y;
this.width = width;
this.height = height;
+
+ this.isReserved = this.y - 10 - this.rectHeight < 0;
}
show(canvasContext: any) {
From 9b272a729f0a0ebdb7f4d816cdefdbb50a7fdafe Mon Sep 17 00:00:00 2001
From: xiaowuler <xiaowuler@163.com>
Date: Thu, 31 Mar 2022 13:37:45 +0800
Subject: [PATCH 3/4] modify some codes
---
04.系统编码/Frontend/src/components/RamanLidar.vue | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index c1ecc52..4309d82 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -594,7 +594,7 @@ export default {
}
for(let y = 0; y < capacity; y++){
- matrix[index][y] = new Box(index, y, 0, 0, 0, y * 15, time, "米");
+ matrix[index][y] = new Box(index, y, 0, 0, NaN, y * 15, time, "米");
}
}
return;
@@ -612,7 +612,7 @@ export default {
}
let value = r.data[h][i];
- value = value == null ? 0 : value;
+ value = value == null ? NaN : value;
matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, value, h * 15, time, "米");
}
}
From 44eb9101cb2a414bb4c4312841e36bd40c14c4f3 Mon Sep 17 00:00:00 2001
From: xiaowuler <xiaowuler@163.com>
Date: Thu, 31 Mar 2022 13:48:45 +0800
Subject: [PATCH 4/4] commit some codes
---
04.系统编码/Frontend/src/uilts/box-drawer.ts | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index 35798cd..e0cb0ec 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -1,3 +1,4 @@
+import { number } from "echarts";
import moment from "moment";
export function createEmptyCanvas(id: string, width: number, height: number): void{
@@ -398,7 +399,8 @@ export class ColorChart{
}
public getColor(value: number): string{
-
+ if (isNaN(value)) return null;
+
for(let index = 1; index < this.valueLength; index ++){
if (this.values[index -1] < value && this.values[index] >= value){
return this.colors[index - 1];