root
/
NanJingLamanRadarProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

commit

master
xuhuihui 3 years ago
parent
d0db5decae
commit
6b144cabb4
4 changed files with 97 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  2. 142
      04.系统编码/Frontend/src/components/RamanLidar.vue
  3. 9
      04.系统编码/Frontend/src/model/heat-map-drawer.ts
  4. 17
      04.系统编码/Frontend/src/uilts/box-drawer.ts

4
04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
View File

@ -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;

142
04.系统编码/Frontend/src/components/RamanLidar.vue
View File

@ -75,16 +75,6 @@
</div>
<div class="picture-container raman-picture-container" v-show="currentTab === 'optical-property'">
<div class="picture special-picture">
<h2 class="title">后向散射系数</h2>
<div v-loading="loadingBackscatterStatus"
style="width: 100%;"
custom-class="loading"
element-loading-text="加载中">
<canvas id='backscatter_chart'></canvas>
</div>
</div>
<div class="picture">
<h2 class="title">光学厚度</h2>
<div id="opticalThickness"
@ -105,6 +95,15 @@
</div>
</div>
<div class="picture special-picture">
<h2 class="title">后向散射系数</h2>
<div v-loading="loadingBackscatterStatus"
style="width: 100%;"
custom-class="loading"
element-loading-text="加载中">
<canvas id='backscatter_chart'></canvas>
</div>
</div>
</div>
<div class="picture-container raman-picture-container" v-show="currentTab === 'aerosol-product'">
@ -135,11 +134,8 @@
element-loading-text="加载中">
</div>
</div>
</div>
<div class="picture-container raman-picture-container" v-show="currentTab === 'BingoCloud'">
<div class="picture special-picture">
<h2 class="title">云气溶胶分类</h2>
@ -174,7 +170,7 @@
</div>
</div>
<div class="picture special-picture">
<h2 class="title ">消光系数</h2>
<h2 class="title">消光系数</h2>
<div v-loading="loadingExtinctionStatus"
style="width: 100%;"
custom-class="loading"
@ -247,12 +243,12 @@ export default {
backscatterDrawer: null
}
let options = reactive({
// currentTab: 'MWR',
currentTab:'aerosol-product',
currentRegion: 'pk',
currentTab: 'MWR',
// currentRegion: 'pk',
currentRegion: 'jn',
currentElement: 'PBLH',
currentType: '边界层高度',
// date: moment().add(-1, 'd').format('YYYY-MM-DD'),
// date: moment('2022-04-01 12:00:00').format('YYYY-MM-DD HH:mm:ss'),
date: moment().format('YYYY-MM-DD HH:mm:ss'),
times: [],
currentTime: null,
@ -304,7 +300,7 @@ export default {
creates.boundaryLayerHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
creates.boundaryLayerHeight.setYAxis('边界层高度(米)', 3000, 0, 500, 7);
creates.boundaryLayerHeight.setLegend();
creates.boundaryLayerHeight.setTooltip('KM: {point.y}');
creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
creates.boundaryLayerHeight.setSeries('边界层高度')
creates.boundaryLayerHeight.init();
}
@ -316,7 +312,7 @@ export default {
creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
creates.cloudsHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
creates.cloudsHeight.setLegend();
creates.cloudsHeight.setTooltip('KM: {point.y}');
creates.cloudsHeight.setTooltip('高度: {point.y}');
creates.cloudsHeight.setSeries('云层高度')
creates.cloudsHeight.init();
}
@ -327,7 +323,7 @@ export default {
creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
creates.cloudTopHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
creates.cloudTopHeight.setLegend();
creates.cloudTopHeight.setTooltip('KM: {point.y}');
creates.cloudTopHeight.setTooltip('高度: {point.y}');
creates.cloudTopHeight.setSeries('云顶高度')
creates.cloudTopHeight.init();
}
@ -339,8 +335,10 @@ export default {
creates.LidarRatio.setSpecialXAxis('', 120, 0, 20);
creates.LidarRatio.setYAxis('高度(米)', 12000, 0, 2000, 7);
creates.LidarRatio.setLegend();
creates.LidarRatio.setTooltip('KM: {point.y}');
creates.LidarRatio.setSeries('激光雷达比')
creates.LidarRatio.setTooltip('高度: {point.y}');
for (let i = 0; i < 24; i++) {
creates.LidarRatio.setSeries(`${i}时`, 0, null, null, '#BDBDBD')
}
creates.LidarRatio.init();
}
@ -351,7 +349,7 @@ export default {
creates.opticalThickness.setSpecialXAxis('时间（小时）', 24, 0, 2);
creates.opticalThickness.setYAxis('光学厚度', 6, 0, 1, 7);
creates.opticalThickness.setLegend(true);
creates.opticalThickness.setTooltip('KM: {point.y}');
creates.opticalThickness.setTooltip('{point.y}');
creates.opticalThickness.setSeries('气溶胶', 0, null, null, '#FF5352')
creates.opticalThickness.setSeries('冰云', 0, null, null, '#5050FD')
creates.opticalThickness.setSeries('水云', 0, null, null, '#58FE5F')
@ -359,7 +357,7 @@ export default {
}
const onTabClick = (name) => {
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<any>) => {
@ -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<any>) => {
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<Box>(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 {

9
04.系统编码/Frontend/src/model/heat-map-drawer.ts
View File

@ -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 {

17
04.系统编码/Frontend/src/uilts/box-drawer.ts
View File

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

Write Preview
Loading…
Cancel
Save