commit

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

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

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

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

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

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