diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue index 73c2957..ecfe98b 100644 --- a/04.系统编码/Frontend/src/components/RamanLidar.vue +++ b/04.系统编码/Frontend/src/components/RamanLidar.vue @@ -103,6 +103,11 @@

边界层特征值

+
+ +
@@ -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(() => { @@ -304,19 +312,20 @@ export default { } 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); @@ -325,6 +334,55 @@ export default { } } + 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,8 +390,31 @@ export default { axiosStore._axiosPromiseCancel = []; } + const drawBackscatter = (result: CustomeArray) => { + 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) => { if (result.length != 24) return; + options.loadingPmStatus = false; if (creates.pm2Point5Drawer != null){ creates.pm2Point5Drawer.close(); } @@ -347,6 +428,7 @@ export default { const drawPm10 = (result: CustomeArray) => { if (result.length != 24) return; + options.loadingPmStatus = false; if (creates.pm10Drawer != null){ creates.pm10Drawer.close(); } @@ -385,6 +467,7 @@ export default { const drawCloudSol = (result: CustomeArray) => { if (result.length != 24) return; + options.loadingCloudSolStatus = false; if (creates.cloudSolDrawer != null){ creates.cloudSolDrawer.close(); } @@ -399,6 +482,7 @@ export default { const drawOpticsExtinction = (result: CustomeArray) => { if (result.length != 24) return; + options.loadingExtinctionOpticsStatus = false; if (creates.opticsExtinctionDrawer != null){ creates.opticsExtinctionDrawer.close(); } @@ -413,6 +497,7 @@ export default { const drawSingleWatervapor = (result: CustomeArray) => { if (result.length != 24) return; + options.loadingWaterVaporSingleStatus = false; if (creates.singleWatervaporDrawer != null){ creates.singleWatervaporDrawer.close(); } @@ -427,6 +512,7 @@ export default { const drawWatervapor = (result: CustomeArray) => { if (result.length != 24) return; + options.loadingWaterVaporStatus = false; if (creates.watervaporDrawer != null){ creates.watervaporDrawer.close(); } @@ -448,6 +534,7 @@ export default { const drawExtinction = (result: CustomeArray) => { if (result.length != 24) return; + options.loadingExtinctionStatus = false; if (creates.extinctionDrawer != null){ creates.extinctionDrawer.close(); } @@ -466,7 +553,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 ++){ @@ -486,6 +574,7 @@ export default { const drawCloudRecognition = (result: CustomeArray) => { if (result.length != 24) return; + options.loadingCloudRecognitionStatus = false; if (creates.cloudRecognitionDrawer != null){ creates.cloudRecognitionDrawer.close(); } @@ -517,7 +606,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; @@ -532,7 +621,10 @@ export default { if (matrix[tempIndex] == null){ matrix[tempIndex] = new Array(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 ? NaN : value; + matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, value, h * 15, time, "米"); } } } @@ -1088,6 +1180,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..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]; @@ -421,7 +423,7 @@ export class Box implements IBox{ height: number; public value: number; - dataHeight: number; + public dataHeight: number; time: string; util: string; @@ -452,6 +454,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) {