{
- 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];
}