diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue index cfba413..8f4799d 100644 --- a/04.系统编码/Frontend/src/components/RamanLidar.vue +++ b/04.系统编码/Frontend/src/components/RamanLidar.vue @@ -146,7 +146,7 @@
-
@@ -349,6 +349,7 @@ export default { loadingWaterVaporSingleStatus: false, loadingExtinctionOpticsStatus: false, loadingPmStatus: false, + loadingPm10Status: false, loadingCloudSolStatus: false, loadingCloudRecognitionStatus: false, loadingExtinctionStatus: false, @@ -395,7 +396,7 @@ export default { creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight'); creates.boundaryLayerHeight.setChart(false,'line', 1000); creates.boundaryLayerHeight.setXAxisTypeDate(); - creates.boundaryLayerHeight.setYAxis('边界层高度(m)'); + creates.boundaryLayerHeight.setSpecialYAxis('边界层高度(m)'); creates.boundaryLayerHeight.setLegend(); creates.boundaryLayerHeight.setTooltip('高度: {point.y}'); creates.boundaryLayerHeight.setSeries('边界层高度',0, null, null, '#3636FF') @@ -408,19 +409,20 @@ export default { creates.cloudsHeight.setChart(false, 'scatter', 1000); // creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2); creates.cloudsHeight.setXAxisTypeDate(); - creates.cloudsHeight.setYAxis('高度(m)'); + creates.cloudsHeight.setSpecialYAxis('高度(m)'); creates.cloudsHeight.setLegend(); creates.cloudsHeight.setTooltip('高度: {point.y}'); creates.cloudsHeight.setSeries('云层高度') creates.cloudsHeight.init(); } + //云顶高度 const cloudTopHeightInit = () => { creates.cloudTopHeight = new HighChartCreate('cloudTopHeight'); creates.cloudTopHeight.setChart(false, 'scatter', 1000); // creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2); creates.cloudTopHeight.setXAxisTypeDate(); - creates.cloudTopHeight.setYAxis('高度(m)'); + creates.cloudTopHeight.setSpecialYAxis('高度(m)'); creates.cloudTopHeight.setLegend(); creates.cloudTopHeight.setTooltip('高度: {point.y}'); creates.cloudTopHeight.setSeries('云顶高度') @@ -432,7 +434,7 @@ export default { creates.LidarRatio = new HighChartCreate('LidarRatio'); creates.LidarRatio.setChart(false,'line', 1000); creates.LidarRatio.setSpecialXAxis('sr', 120, 0, 20); - creates.LidarRatio.setYAxis('高度(m)'); + creates.LidarRatio.setSpecialYAxis('高度(m)'); creates.LidarRatio.setLegend(); creates.LidarRatio.setTooltip('高度: {point.y}'); creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF') @@ -443,10 +445,8 @@ export default { const opticalThicknessInit = () => { creates.opticalThickness = new HighChartCreate('opticalThickness'); creates.opticalThickness.setChart(false,'line', 1000); - // creates.opticalThickness.setSpecialXAxis('时间（小时）', 24, 0, 2); - // creates.opticalThickness.setXAxis('时间(天/时)', false); creates.opticalThickness.setXAxisTypeDate(); - creates.opticalThickness.setYAxis('光学厚度'); + creates.opticalThickness.setSpecialYAxis('光学厚度'); creates.opticalThickness.setLegend(true); creates.opticalThickness.setTooltip('{point.y}'); creates.opticalThickness.setSeries('气溶胶', 0, null, null, '#FF5352') @@ -574,7 +574,7 @@ export default { case 'pm2_5' : initTimeLine(); reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5); - reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10); + reloadCloudRecognition('pm10', 201, 'pm10', drawPm10); break; case 'pblh' : initTimeLine(); @@ -670,7 +670,6 @@ export default { const convertValueToBox = (data) => { let timeMoment = moment(options.date).set('h', 1).add(-1, 'd'); - console.log(options.currentElement) if (options.currentElement === 'extinction'){ timeMoment.add(12, 'h'); } @@ -719,7 +718,7 @@ export default { clearHeatMapDrawer(creates.pm2Point5Drawer); break; case 'pm10': - options.loadingPmStatus = true; + options.loadingPm10Status = true; clearHeatMapDrawer(creates.pm10Drawer); break; case 'extinctionOptics': @@ -820,7 +819,7 @@ export default { const drawPm10 = (result: CustomeArray) => { if (result.length != 24) return; - options.loadingPmStatus = false; + options.loadingPm10Status = false; if (creates.pm10Drawer != null) { creates.pm10Drawer.close(); } @@ -1030,7 +1029,7 @@ export default { } options.timeArray.reverse() } - // + const reloadChartsRecognition = (element: string, callback: any) => { preprocessingCharts(element) let result = new CustomeArray(callback); @@ -1057,7 +1056,6 @@ export default { } let matrix = converCloudRecognition(801, result, 'layertype'); - creates.cloudRecognitionDrawer = new HeatMapDrawer(1200, 600, matrix, "cloud_recognition_chart"); creates.cloudRecognitionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.cloudRecognitionDrawer.setColorChart(prepareCloudRecognitionColors()); @@ -1066,7 +1064,10 @@ export default { const prepareCloudRecognitionColors = () => { return new ColorChart(['#0000FF', '#00FF00', '#FF0000', '#FFFFFF'], - [3, 2, 1, 0, -99] + [{ label: '冰云', value: 3 }, { label: '水云', value: 2 }, { label: '气溶胶', value: 1 }, { label: '晴空', value: 0 }], + false, + false, + "equal" ); } @@ -1138,9 +1139,10 @@ export default { } setCloudRecognitionResult(capacity, time, response.message, response.data, result); - }).catch(error => { - setCloudRecognitionResult(capacity, time, error.message, null, result); }) + // .catch(error => { + // setCloudRecognitionResult(capacity, time, error.message, null, result); + // }) // .catch(error => { // setCloudRecognitionResult(capacity, time, error.message, null, result); // }) diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts index 64f5062..2c01122 100644 --- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts +++ b/04.系统编码/Frontend/src/model/heat-map-drawer.ts @@ -85,6 +85,11 @@ export class HeatMapDrawer{ this.canvasContext.fillRect(startX, _y, this.defaultColorWidth, interval); this.canvasContext.fillStyle = "#000000"; + if (this.colorChart.type == 'equal') { + const text = this.colorChart.values[targetIndex].label; + this.canvasContext.fillText(text, startX + this.defaultColorWidth + 2, _y + interval - 40); + continue; + } if (index == 0){ if (this.colorChart.showStartValue){ const text = this.colorChart.values[targetIndex + 1]; @@ -151,7 +156,7 @@ export class HeatMapDrawer{ } let targetValue = value[infoIndex].value; - let color = this.colorChart.getColor(targetValue); + let color = this.colorChart.getColor(targetValue, this.id); value[infoIndex].updateBorderInfo(x, y, width, height); if (color == null) continue; this.canvasContext.fillStyle = color; diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts index 6906bde..713dc73 100644 --- a/04.系统编码/Frontend/src/model/high-chart-create.ts +++ b/04.系统编码/Frontend/src/model/high-chart-create.ts @@ -115,6 +115,34 @@ export class HighChartCreate { opposite: opposite }); } + + public setSpecialYAxis(text: string, max: number = null, min: number = null, tickInterval: number = null, tickAmount: number = null, opposite: boolean = false, lineWidth: number = 1, reversed: boolean = true){ + this.yAxis.push({ + title: { + text: text, + style: { + color: '#000000', + fontSize: '18px', + fontFamily: '微软雅黑' + } + }, + labels: { + y: 8, + style: { + fontSize:'18px' + }, + }, + max: max, + min: min, + tickInterval: tickInterval, + tickAmount: tickAmount, + lineWidth: lineWidth, + opposite: opposite + }); + } + + + //图例标识 public setLegend(enabled: boolean = false){ this.legend = { diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts index a17879b..38cacd4 100644 --- a/04.系统编码/Frontend/src/uilts/box-drawer.ts +++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts @@ -306,7 +306,7 @@ export class BoxDrawer{ this.canvasContext.stroke(); if (flag){ - this.canvasContext.font = "normal 20px 微软雅黑"; + this.canvasContext.font = "normal 25px 微软雅黑"; this.canvasContext.fillStyle = "#000000"; const text = moment(this.values.radar_data[index].data_time).format("HH:mm"); this.canvasContext.fillText(text, _x - this.canvasContext.measureText(text).width / 2, startY + yInterval + this.borderHeight + 36); @@ -373,6 +373,7 @@ export class BoxDrawer{ export class ColorChart{ + public readonly type: string; public colors: any = null; public values: any = null; public showStartValue: boolean = false; @@ -382,8 +383,8 @@ export class ColorChart{ private maxDefaultColor: string = null; private readonly valueLength: number = 0; - - constructor(colors: any, values: any, showStartValue: boolean = false, showEndValue: boolean = false) { + constructor(colors: any, values: any, showStartValue: boolean = false, showEndValue: boolean = false, type: string = 'normal') { + this.type = type; this.verify(colors, values); this.colors = colors; this.values = values; @@ -407,6 +408,8 @@ export class ColorChart{ } private verify(colors: any, values: any): void{ + if (this.type == "equal") return; + if (values.length <= 2) throw new Error("色标数据至少包含两个数据"); @@ -414,10 +417,21 @@ export class ColorChart{ throw new Error("色标数据不正确，数据个数应为颜色个数 + 1"); } - public getColor(value: number): string{ + public getColor(value: number, id: string = null ): string{ if (isNaN(value)) return null; const length = this.valueLength; + if (this.type == 'equal') { + if (this.minDefaultColor != null){ + if (value < this.values[0].value) return this.minDefaultColor; + if (value > this.values[length - 1].value) return this.maxDefaultColor; + } + for(let index = 1; index < length; index ++){ + if (this.values[index -1].value < value && this.values[index].value >= value){ + return this.colors[index]; + } + } + } if (this.minDefaultColor != null){ if (value < this.values[0]) return this.minDefaultColor; if (value > this.values[length - 1]) return this.maxDefaultColor; @@ -428,6 +442,9 @@ export class ColorChart{ return this.colors[index - 1]; } } + + + return null; } }