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

commit

master
xuhuihui 4 years ago
parent
5cae87dac3 44eb9101cb
commit
39183c85b7
3 changed files with 130 additions and 24 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 113
      04.系统编码/Frontend/src/components/RamanLidar.vue
  2. 33
      04.系统编码/Frontend/src/model/heat-map-drawer.ts
  3. 6
      04.系统编码/Frontend/src/uilts/box-drawer.ts

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

@ -103,6 +103,11 @@
<div class="picture"> <div class="picture">
<h2 class="title">边界层特征值</h2> <h2 class="title">边界层特征值</h2>
<div v-loading="loadingBackscatterStatus"
style="width: 100%;"
element-loading-text="加载中">
<canvas id='backscatter_chart'></canvas>
</div>
</div> </div>
</div> </div>
@ -187,7 +192,8 @@ export default {
singleWatervaporDrawer: HeatMapDrawer, singleWatervaporDrawer: HeatMapDrawer,
cloudSolDrawer: HeatMapDrawer, cloudSolDrawer: HeatMapDrawer,
pm2Point5Drawer: HeatMapDrawer, pm2Point5Drawer: HeatMapDrawer,
pm10Drawer: HeatMapDrawer pm10Drawer: HeatMapDrawer,
backscatterDrawer: HeatMapDrawer,
} = { } = {
boundaryLayerHeight: null, boundaryLayerHeight: null,
cloudsHeight: null, cloudsHeight: null,
@ -200,7 +206,8 @@ export default {
opticsExtinctionDrawer: null, opticsExtinctionDrawer: null,
cloudSolDrawer: null, cloudSolDrawer: null,
pm2Point5Drawer: null, pm2Point5Drawer: null,
pm10Drawer: null pm10Drawer: null,
backscatterDrawer: null
} }
let options = reactive({ let options = reactive({
currentTab: 'MWR', currentTab: 'MWR',
@ -232,6 +239,7 @@ export default {
loadingCloudRecognitionStatus: false, loadingCloudRecognitionStatus: false,
loadingExtinctionStatus: false, loadingExtinctionStatus: false,
loadingWaterVaporStatus: false, loadingWaterVaporStatus: false,
loadingBackscatterStatus: false
}) })
onMounted(() => { onMounted(() => {
@ -304,19 +312,20 @@ export default {
} else if (options.currentTab === 'optical-property') { } else if (options.currentTab === 'optical-property') {
// extinctionApi() // extinctionApi()
// LidarRatioApi() // LidarRatioApi()
// reloadCloudRecognition(801, 'extinction', drawOpticsExtinction); reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
} else if (options.currentTab === 'aerosol-product') { } else if (options.currentTab === 'aerosol-product') {
// boundaryLayerHeightDate() // boundaryLayerHeightDate()
reloadChartsRecognition('pblh', drawCharts) reloadChartsRecognition('pblh', drawCharts)
reloadCloudRecognition(201, 'pm2_5', drawPm2Point5); reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
// reloadCloudRecognition(201, 'pm10', drawPm10); reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
reloadCloudRecognition('backscatter', 201, 'backscatter', drawBackscatter)
// boundaryCharacteristicApi() // boundaryCharacteristicApi()
//aerosolApi() //aerosolApi()
} else if (options.currentTab === 'BingoCloud') { } else if (options.currentTab === 'BingoCloud') {
//layerTypeApi() //layerTypeApi()
// cloudsHeightApi() // cloudsHeightApi()
// cloudTopHeightApi() // cloudTopHeightApi()
// reloadCloudRecognition(801, 'layertype', drawCloudSol); reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol);
} else if (options.currentTab === 'MWR') { } else if (options.currentTab === 'MWR') {
//waterVapourApi() //waterVapourApi()
// reloadCloudRecognition(801, 'layertype', drawCloudRecognition); // 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 = () => { const cancelRequest = () => {
axiosStore._axiosPromiseCancel.forEach(e=>{ axiosStore._axiosPromiseCancel.forEach(e=>{
e && e() e && e()
@ -332,8 +390,31 @@ export default {
axiosStore._axiosPromiseCancel = []; axiosStore._axiosPromiseCancel = [];
} }
const drawBackscatter = (result: CustomeArray<any>) => {
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<any>) => { const drawPm2Point5 = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
options.loadingPmStatus = false;
if (creates.pm2Point5Drawer != null){ if (creates.pm2Point5Drawer != null){
creates.pm2Point5Drawer.close(); creates.pm2Point5Drawer.close();
} }
@ -347,6 +428,7 @@ export default {
const drawPm10 = (result: CustomeArray<any>) => { const drawPm10 = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
options.loadingPmStatus = false;
if (creates.pm10Drawer != null){ if (creates.pm10Drawer != null){
creates.pm10Drawer.close(); creates.pm10Drawer.close();
} }
@ -385,6 +467,7 @@ export default {
const drawCloudSol = (result: CustomeArray<any>) => { const drawCloudSol = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
options.loadingCloudSolStatus = false;
if (creates.cloudSolDrawer != null){ if (creates.cloudSolDrawer != null){
creates.cloudSolDrawer.close(); creates.cloudSolDrawer.close();
} }
@ -399,6 +482,7 @@ export default {
const drawOpticsExtinction = (result: CustomeArray<any>) => { const drawOpticsExtinction = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
options.loadingExtinctionOpticsStatus = false;
if (creates.opticsExtinctionDrawer != null){ if (creates.opticsExtinctionDrawer != null){
creates.opticsExtinctionDrawer.close(); creates.opticsExtinctionDrawer.close();
} }
@ -413,6 +497,7 @@ export default {
const drawSingleWatervapor = (result: CustomeArray<any>) => { const drawSingleWatervapor = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
options.loadingWaterVaporSingleStatus = false;
if (creates.singleWatervaporDrawer != null){ if (creates.singleWatervaporDrawer != null){
creates.singleWatervaporDrawer.close(); creates.singleWatervaporDrawer.close();
} }
@ -427,6 +512,7 @@ export default {
const drawWatervapor = (result: CustomeArray<any>) => { const drawWatervapor = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
options.loadingWaterVaporStatus = false;
if (creates.watervaporDrawer != null){ if (creates.watervaporDrawer != null){
creates.watervaporDrawer.close(); creates.watervaporDrawer.close();
} }
@ -448,6 +534,7 @@ export default {
const drawExtinction = (result: CustomeArray<any>) => { const drawExtinction = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
options.loadingExtinctionStatus = false;
if (creates.extinctionDrawer != null){ if (creates.extinctionDrawer != null){
creates.extinctionDrawer.close(); 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 result = new CustomeArray(callback);
let time = moment(options.date); let time = moment(options.date);
for(let index = 0; index < 24; index ++){ for(let index = 0; index < 24; index ++){
@ -486,6 +574,7 @@ export default {
const drawCloudRecognition = (result: CustomeArray<any>) => { const drawCloudRecognition = (result: CustomeArray<any>) => {
if (result.length != 24) return; if (result.length != 24) return;
options.loadingCloudRecognitionStatus = false;
if (creates.cloudRecognitionDrawer != null){ if (creates.cloudRecognitionDrawer != null){
creates.cloudRecognitionDrawer.close(); creates.cloudRecognitionDrawer.close();
} }
@ -517,7 +606,7 @@ export default {
} }
for(let y = 0; y < capacity; y++){ 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; return;
@ -532,7 +621,10 @@ export default {
if (matrix[tempIndex] == null){ if (matrix[tempIndex] == null){
matrix[tempIndex] = new Array<Box>(capacity); matrix[tempIndex] = new Array<Box>(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 { #pm10_chart {
transform: scale(0.5,0.4) translate(-314px, -475px); transform: scale(0.5,0.4) translate(-314px, -475px);
} }
#backscatter_chart {
transform: scale(0.6,0.85) translateX(-260px);
}
#cloud_sol_chart { #cloud_sol_chart {
transform: scale(0.6,0.85) translate(-31%, -12px); transform: scale(0.6,0.85) translate(-31%, -12px);
} }

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

@ -13,7 +13,7 @@ export class HeatMapDrawer{
private readonly width: number = null; private readonly width: number = null;
private readonly height: number = null; private readonly height: number = null;
private readonly paddingLeft: number = 200; private readonly paddingLeft: number = 150;
private readonly paddingRight: number = 100; private readonly paddingRight: number = 100;
private readonly paddingTop: number = 60; private readonly paddingTop: number = 60;
private readonly paddingBottom: number = 50; private readonly paddingBottom: number = 50;
@ -23,13 +23,13 @@ export class HeatMapDrawer{
// 垂直刻度 // 垂直刻度
private readonly verticalScaleLine: number = 18; private readonly verticalScaleLine: number = 18;
// 水平刻度 // 水平刻度
private readonly horizontalScaleLine: number = 20; private readonly horizontalScaleLine: number = 15;
public base64Image: string = null; public base64Image: string = null;
private verticalScaleIntervalLength: number = 0; private verticalScaleIntervalLength: number = 0;
private horizontalScaleIntervalLength: number = 0; private horizontalScaleIntervalLength: number = 0;
private paddingColorLeft: number = 50; private paddingColorLeft: number = 20;
private defaultColorWidth: number = 30; private defaultColorWidth: number = 30;
private calc: Calc = null; private calc: Calc = null;
@ -67,7 +67,13 @@ export class HeatMapDrawer{
let startY = this.paddingTop + this.verticalScaleLine + heightInterval; let startY = this.paddingTop + this.verticalScaleLine + heightInterval;
let interval = (this.borderHeight - heightInterval) / (this.colorChart.colors.length) 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"; this.canvasContext.fillStyle = "#000000";
for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){ for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){
@ -81,22 +87,22 @@ export class HeatMapDrawer{
if (index == 0){ if (index == 0){
if (this.colorChart.showStartValue){ if (this.colorChart.showStartValue){
const text = this.colorChart.values[targetIndex + 1]; 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]; 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){ }else if (index == lastLen){
if (this.colorChart.showEndValue){ if (this.colorChart.showEndValue){
const text = this.colorChart.values[targetIndex]; 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]; 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{ }else{
const text = this.colorChart.values[targetIndex]; 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.fillStyle = color;
this.canvasContext.fillRect(x, y, width, height); this.canvasContext.fillRect(x, y, width, height);
} }
// this.values[dataIndex].sort((x, y) => y.dataHeight - x.dataHeight);
this.values[dataIndex] = this.values[dataIndex].reverse(); this.values[dataIndex] = this.values[dataIndex].reverse();
} }
@ -248,7 +255,7 @@ export class HeatMapDrawer{
this.canvasContext.translate(x, y); this.canvasContext.translate(x, y);
this.canvasContext.rotate(Math.PI / 180 * 90); this.canvasContext.rotate(Math.PI / 180 * 90);
this.canvasContext.textBaseline = 'bottom'; this.canvasContext.textBaseline = 'bottom';
this.canvasContext.font = "normal 35px Verdana"; this.canvasContext.font = "normal 25px Verdana";
this.canvasContext.fillStyle = "#000000"; this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(str, 0, 0); this.canvasContext.fillText(str, 0, 0);
this.canvasContext.restore(); this.canvasContext.restore();
@ -256,7 +263,7 @@ export class HeatMapDrawer{
} else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) { } else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) {
this.canvasContext.save(); this.canvasContext.save();
this.canvasContext.textBaseline = 'top'; this.canvasContext.textBaseline = 'top';
this.canvasContext.font = "normal 35px Verdana"; this.canvasContext.font = "normal 25px Verdana";
this.canvasContext.fillStyle = "#000000"; this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(str, x, y); this.canvasContext.fillText(str, x, y);
this.canvasContext.restore(); this.canvasContext.restore();
@ -292,7 +299,7 @@ export class HeatMapDrawer{
this.canvasContext.stroke(); this.canvasContext.stroke();
if (true){ if (true){
this.canvasContext.font = "normal 30px Verdana"; this.canvasContext.font = "normal 20px Verdana";
this.canvasContext.fillStyle = "#000000"; 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); 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(); this.canvasContext.stroke();
if (true) { if (true) {
this.canvasContext.font = "normal 30px Verdana"; this.canvasContext.font = "normal 20px Verdana";
this.canvasContext.fillStyle = "#000000"; this.canvasContext.fillStyle = "#000000";
this.canvasContext.fillText(this.yAxis.scales[index], startX - this.canvasContext.measureText(this.yAxis.scales[index]).width - this.horizontalScaleLine, _y + 10); this.canvasContext.fillText(this.yAxis.scales[index], startX - this.canvasContext.measureText(this.yAxis.scales[index]).width - this.horizontalScaleLine, _y + 10);
} }

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

@ -1,3 +1,4 @@
import { number } from "echarts";
import moment from "moment"; import moment from "moment";
export function createEmptyCanvas(id: string, width: number, height: number): void{ export function createEmptyCanvas(id: string, width: number, height: number): void{
@ -398,6 +399,7 @@ export class ColorChart{
} }
public getColor(value: number): string{ public getColor(value: number): string{
if (isNaN(value)) return null;
for(let index = 1; index < this.valueLength; index ++){ for(let index = 1; index < this.valueLength; index ++){
if (this.values[index -1] < value && this.values[index] >= value){ if (this.values[index -1] < value && this.values[index] >= value){
@ -421,7 +423,7 @@ export class Box implements IBox{
height: number; height: number;
public value: number; public value: number;
dataHeight: number; public dataHeight: number;
time: string; time: string;
util: string; util: string;
@ -452,6 +454,8 @@ export class Box implements IBox{
this.y = y; this.y = y;
this.width = width; this.width = width;
this.height = height; this.height = height;
this.isReserved = this.y - 10 - this.rectHeight < 0;
} }
show(canvasContext: any) { show(canvasContext: any) {

Write Preview
Loading…
Cancel
Save