diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue index a783815..18404db 100644 --- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue +++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue @@ -621,7 +621,7 @@ export default { // createEmptyCanvas('abnormal-canvas', 1500, 500); return; } - drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), response.data, 'original-data-canvas', '℃'); + drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), response.data, 'original-data-canvas', 'T/℃'); // drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', '℃'); // options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image; // options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image; @@ -646,7 +646,7 @@ export default { return; } if (options.currentTab === 'MWR') - drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), response.data, 'interpolate-canvas', '℃'); + drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(options.SeasonValue), response.data, 'interpolate-canvas', 'T/℃'); else if (options.currentTab === 'shixu_BPFY') drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareBPTempColors(), response.data, 'BP-temp', '(degree)'); // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image; diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue index e147722..5713f8d 100644 --- a/04.系统编码/Frontend/src/components/RamanLidar.vue +++ b/04.系统编码/Frontend/src/components/RamanLidar.vue @@ -75,16 +75,6 @@
-
-

后向散射系数

-
- -
-
-

光学厚度

+
+

后向散射系数

+
+ +
+
@@ -135,11 +134,8 @@ element-loading-text="加载中">
- - -

云气溶胶分类

@@ -174,7 +170,7 @@
-

消光系数

+

消光系数

{ - initTimeLine() + // initTimeLine() options.currentTab = name; setTimeout(() => { initEcharts(name) @@ -372,19 +370,19 @@ export default { if (options.currentTab === 'boundary-layer-height') { reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor); } else if (options.currentTab === 'optical-property') { - reloadCloudRecognition('backscatter', 201, 'backscatter', drawBackscatter) + reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter); reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction); - reloadChartsRecognition('aod', drawAerosolCharts) - reloadChartsRecognition('icot', drawIceCloudsCharts) - reloadChartsRecognition('wcot', drawWaterCloud) + reloadChartsRecognition('aod', drawAerosolCharts); + reloadChartsRecognition('icot', drawIceCloudsCharts); + reloadChartsRecognition('wcot', drawWaterCloud); } else if (options.currentTab === 'aerosol-product') { - reloadChartsRecognition('lidarratio', drawLidarRatioCharts) - reloadChartsRecognition('pblh', drawBoundaryLayerCharts) + reloadChartsRecognition('lidarratio', drawLidarRatioCharts); + reloadChartsRecognition('pblh', drawBoundaryLayerCharts); reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5); reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10); } else if (options.currentTab === 'BingoCloud') { - reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts) - reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts) + reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts); + reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts); reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol); } else if (options.currentTab === 'MWR') { reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition); @@ -484,18 +482,21 @@ export default { creates.backscatterDrawer.close(); } - let matrix = converCloudRecognition(201, result, 'backscatter'); - creates.backscatterDrawer = new HeatMapDrawer(800, 600, matrix, "backscatter_chart", '米'); + let matrix = converCloudRecognition(801, result, 'backscatter'); + creates.backscatterDrawer = new HeatMapDrawer(800, 600, matrix, "backscatter_chart",'/km/sr'); creates.backscatterDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.backscatterDrawer.setColorChart(prepareBackscatterColors()); creates.backscatterDrawer.draw(); } const prepareBackscatterColors = () => { - return new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0', + let colorChart = new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0', '#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'], [-1, -1.25, -1.5, -1.75, -2, -2.25, -2.5, -2.75, -3, -3.25, -3.5, -3.75, -4, -4.25, -4.5, -4.75, -5] + // [-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] ); + colorChart.setDefaultColors('#000099', '#8F0000'); + return colorChart; } const drawPm2Point5 = (result: CustomeArray) => { @@ -505,7 +506,7 @@ export default { creates.pm2Point5Drawer.close(); } let matrix = converCloudRecognition(201, result, 'pm2_5'); - creates.pm2Point5Drawer = new HeatMapDrawer(800, 600, matrix, "pm2_5_chart", '米', 'PM2_5'); + creates.pm2Point5Drawer = new HeatMapDrawer(800, 600, matrix, "pm2_5_chart",'', 'PM2_5'); creates.pm2Point5Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true)); creates.pm2Point5Drawer.setColorChart(preparePmColors()); creates.pm2Point5Drawer.draw(); @@ -520,7 +521,7 @@ export default { } let matrix = converCloudRecognition(201, result, 'pm10'); - creates.pm10Drawer = new HeatMapDrawer(800, 600, matrix, "pm10_chart", '米', 'PM10'); + creates.pm10Drawer = new HeatMapDrawer(800, 600, matrix, "pm10_chart", '', 'PM10'); creates.pm10Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true)); creates.pm10Drawer.setColorChart(preparePmColors()); creates.pm10Drawer.draw(); @@ -535,9 +536,11 @@ export default { const drawLidarRatioCharts = (result: CustomeArray) => { if (result.length != 24) return; + const data = LidarRatioPrepareChartData(result); - const data = prepareChartData(result); - creates.LidarRatio.updateSeries(0, data); + for (let i = 0; i < 24; i++) { + creates.LidarRatio.updateSeries(i, data[i]); + } options.loadingLidarRatioStatus = false } @@ -601,23 +604,27 @@ export default { return data; } - // const LidarRatioPrepareChartData = (result) => { - // let prepareData = [] - // result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1); - // result.forEach(item => { - // if (item.data == null) { - // let temp = []; - // for (let i = 0; i < 801; i++) { - // item.data.push([NaN]) - // } - // console.log(item) - // } - // item.data.forEach((i, index) => { - // prepareData.push(index * 15) - // }) - // }) - // } - + const LidarRatioPrepareChartData = (result) => { + let prepareData = [] + result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1); + result.forEach(item => { + if (item.data == null) { + let temp = []; + for (let i = 0; i < 801; i++) { + temp.push([NaN]) + } + item.data = temp + } + item.data.forEach((item, index) => { + prepareData.push([item[0], index * 15]) + }) + }) + let results = []; + for (let i = 0; i < prepareData.length; i+= 801) { + results.push(prepareData.slice(i, i + 801)) + } + return results; + } const preparePmColors = () => { return new ColorChart(['#F6EF20', '#FEC338', '#C5C22A', '#72CD64', '#31C69F', '#01B8CA', '#259BE8', '#327CFC', '#4853F4', '#422EC1'], @@ -634,7 +641,7 @@ export default { } let matrix = converCloudRecognition(801, result, 'cloudSol'); - creates.cloudSolDrawer = new HeatMapDrawer(800, 600, matrix, "cloud_sol_chart", '米'); + creates.cloudSolDrawer = new HeatMapDrawer(800, 600, matrix, "cloud_sol_chart"); creates.cloudSolDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.cloudSolDrawer.setColorChart(prepareCloudRecognitionColors()); creates.cloudSolDrawer.draw(); @@ -649,7 +656,7 @@ export default { } let matrix = converCloudRecognition(801, result, 'extinctionOptics'); - creates.opticsExtinctionDrawer = new HeatMapDrawer(800, 600, matrix, "extinction_optics_chart", '米'); + creates.opticsExtinctionDrawer = new HeatMapDrawer(800, 600, matrix, "extinction_optics_chart",'/km'); creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors()); creates.opticsExtinctionDrawer.draw(); @@ -664,7 +671,7 @@ export default { } let matrix = converCloudRecognition(101, result, 'singleWatervapor'); - creates.singleWatervaporDrawer = new HeatMapDrawer(800, 600, matrix, "watervapor_single_chart", '米'); + creates.singleWatervaporDrawer = new HeatMapDrawer(800, 600, matrix, "watervapor_single_chart"); creates.singleWatervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); creates.singleWatervaporDrawer.setColorChart(prepareWatervaporColors()); creates.singleWatervaporDrawer.draw(); @@ -679,7 +686,7 @@ export default { } let matrix = converCloudRecognition(101, result, 'watervapor'); - creates.watervaporDrawer = new HeatMapDrawer(800, 600, matrix, "watervapor_chart", '米',); + creates.watervaporDrawer = new HeatMapDrawer(800, 600, matrix, "watervapor_chart"); creates.watervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); creates.watervaporDrawer.setColorChart(prepareWatervaporColors()); creates.watervaporDrawer.draw(); @@ -701,17 +708,19 @@ export default { } let matrix = converCloudRecognition(801, result, 'extinction'); - creates.extinctionDrawer = new HeatMapDrawer(800, 600, matrix, "extinction_chart", '米'); + creates.extinctionDrawer = new HeatMapDrawer(800, 600, matrix, "extinction_chart", '/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(); } const prepareExtinctionnColors = () => { - return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66', + let colorChart = new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66', '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'], [10, 8, 6, 4, 2, 1, 0.8, 0.6, 0.4, 0.2, 0.1, 0.08, 0.06, 0.04, 0.02, 0.01, 0.008, 0.006, 0.004, 0.002, 0.001], true, true ); + colorChart.setDefaultColors('#000099', '#8F0000'); + return colorChart; } const reloadCloudRecognition = (type: string, capacity: number, element: string, callback: any) => { @@ -743,7 +752,8 @@ export default { } let matrix = converCloudRecognition(801, result, 'layertype'); - creates.cloudRecognitionDrawer = new HeatMapDrawer(800, 600, matrix, "cloud_recognition_chart", '米'); + + creates.cloudRecognitionDrawer = new HeatMapDrawer(800, 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()); creates.cloudRecognitionDrawer.draw(); @@ -767,7 +777,6 @@ export default { if (matrix[index] == null) { matrix[index] = new Array(capacity); } - for (let y = 0; y < capacity; y++) { matrix[index][y] = new Box(index, y, 0, 0, NaN, y * 15, time, "米"); } @@ -1228,13 +1237,12 @@ export default { .picture { position: relative; margin-top: 30px; - #watervapor_single_chart { transform: scale(1.0, 0.8) translateX(38%); } #extinction_optics_chart { - transform: scale(0.5, 0.8) translateX(-40%); + transform: scale(0.56, 0.85) translateX(-32%); } #pm2_5_chart { diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts index 53de5c0..9d50ce1 100644 --- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts +++ b/04.系统编码/Frontend/src/model/heat-map-drawer.ts @@ -40,7 +40,7 @@ export class HeatMapDrawer{ private unit: string; private name: string; - constructor(width: number, height: number, values: any, id: string, unit: string, name: string = '') { + constructor(width: number, height: number, values: any, id: string, unit: string = '', name: string = '') { if (id == null) return; this.id = id; @@ -274,11 +274,10 @@ export class HeatMapDrawer{ } //温度单位 private drawTemperatureText(unit): void { - this.canvasContext.font = "normal 35px Verdana"; + this.canvasContext.font = "normal 25px Verdana"; this.canvasContext.fillStyle = "#000000"; - let unitX = 1390 - if (unit === '(degree)') unitX =1350 - this.canvasContext.fillText(unit, unitX, 50); + let unitX = 680 + this.canvasContext.fillText(unit, unitX, 60); } private drawResolutionName(name): void { diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts index 936e571..d7af21f 100644 --- a/04.系统编码/Frontend/src/uilts/box-drawer.ts +++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts @@ -370,6 +370,9 @@ export class ColorChart{ public showStartValue: boolean = false; public showEndValue: boolean = false; + private minDefaultColor: string = null; + private maxDefaultColor: string = null; + private readonly valueLength: number = 0; constructor(colors: any, values: any, showStartValue: boolean = false, showEndValue: boolean = false) { @@ -383,6 +386,12 @@ export class ColorChart{ this.resetValues(); } + public setDefaultColors(minDefaultColor: string, maxDefaultColor: string): void{ + this.minDefaultColor = minDefaultColor; + this.maxDefaultColor = maxDefaultColor; + } + + // 按照数值从小到大排序,供颜色值判断使用 private resetValues(): void{ if (this.values[0] < this.values[1]) return; this.values = this.values.reverse(); @@ -400,7 +409,13 @@ export class ColorChart{ public getColor(value: number): string{ if (isNaN(value)) return null; - for(let index = 1; index < this.valueLength; index ++){ + const length = this.valueLength; + if (this.minDefaultColor != null){ + if (value < this.values[0]) return this.minDefaultColor; + if (value > this.values[length - 1]) return this.maxDefaultColor; + } + + for(let index = 1; index < length; index ++){ if (this.values[index -1] < value && this.values[index] >= value){ return this.colors[index - 1]; }