commit

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

@@ -146,7 +146,7 @@
             </div>
           </div>
           <div class="picture special-picture">
-            <div v-loading="loadingPmStatus"
+            <div v-loading="loadingPm10Status"
                  style="width: 100%;"
                  custom-class="loading"
                  element-loading-text="加载中">
@@ -349,6 +349,7 @@ export default {
       loadingWaterVaporSingleStatus: false,
       loadingExtinctionOpticsStatus: false,
       loadingPmStatus: false,
+      loadingPm10Status: false,
       loadingCloudSolStatus: false,
       loadingCloudRecognitionStatus: false,
       loadingExtinctionStatus: false,
@@ -395,7 +396,7 @@ export default {
       creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
       creates.boundaryLayerHeight.setChart(false,'line', 1000);
       creates.boundaryLayerHeight.setXAxisTypeDate();
-      creates.boundaryLayerHeight.setYAxis('边界层高度(m)');
+      creates.boundaryLayerHeight.setSpecialYAxis('边界层高度(m)');
       creates.boundaryLayerHeight.setLegend();
       creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
       creates.boundaryLayerHeight.setSeries('边界层高度',0, null, null, '#3636FF')
@@ -408,19 +409,20 @@ export default {
       creates.cloudsHeight.setChart(false, 'scatter', 1000);
       // creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
       creates.cloudsHeight.setXAxisTypeDate();
-      creates.cloudsHeight.setYAxis('高度(m)');
+      creates.cloudsHeight.setSpecialYAxis('高度(m)');
       creates.cloudsHeight.setLegend();
       creates.cloudsHeight.setTooltip('高度: {point.y}');
       creates.cloudsHeight.setSeries('云层高度')
       creates.cloudsHeight.init();
     }
+
     //云顶高度
     const cloudTopHeightInit = () => {
       creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
       creates.cloudTopHeight.setChart(false, 'scatter', 1000);
       // creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
       creates.cloudTopHeight.setXAxisTypeDate();
-      creates.cloudTopHeight.setYAxis('高度(m)');
+      creates.cloudTopHeight.setSpecialYAxis('高度(m)');
       creates.cloudTopHeight.setLegend();
       creates.cloudTopHeight.setTooltip('高度: {point.y}');
       creates.cloudTopHeight.setSeries('云顶高度')
@@ -432,7 +434,7 @@ export default {
       creates.LidarRatio = new HighChartCreate('LidarRatio');
       creates.LidarRatio.setChart(false,'line', 1000);
       creates.LidarRatio.setSpecialXAxis('sr', 120, 0, 20);
-      creates.LidarRatio.setYAxis('高度(m)');
+      creates.LidarRatio.setSpecialYAxis('高度(m)');
       creates.LidarRatio.setLegend();
       creates.LidarRatio.setTooltip('高度: {point.y}');
       creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF')
@@ -443,10 +445,8 @@ export default {
     const opticalThicknessInit = () => {
       creates.opticalThickness = new HighChartCreate('opticalThickness');
       creates.opticalThickness.setChart(false,'line', 1000);
-      // creates.opticalThickness.setSpecialXAxis('时间（小时）', 24, 0, 2);
-      // creates.opticalThickness.setXAxis('时间(天/时)', false);
       creates.opticalThickness.setXAxisTypeDate();
-      creates.opticalThickness.setYAxis('光学厚度');
+      creates.opticalThickness.setSpecialYAxis('光学厚度');
       creates.opticalThickness.setLegend(true);
       creates.opticalThickness.setTooltip('{point.y}');
       creates.opticalThickness.setSeries('气溶胶', 0, null, null, '#FF5352')
@@ -574,7 +574,7 @@ export default {
         case 'pm2_5' :
           initTimeLine();
           reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
-          reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
+          reloadCloudRecognition('pm10', 201, 'pm10', drawPm10);
           break;
         case 'pblh' :
           initTimeLine();
@@ -670,7 +670,6 @@ export default {
 
     const convertValueToBox = (data) => {
       let timeMoment = moment(options.date).set('h', 1).add(-1, 'd');
-      console.log(options.currentElement)
       if (options.currentElement === 'extinction'){
         timeMoment.add(12, 'h');
       }
@@ -719,7 +718,7 @@ export default {
           clearHeatMapDrawer(creates.pm2Point5Drawer);
           break;
         case 'pm10':
-          options.loadingPmStatus = true;
+          options.loadingPm10Status = true;
           clearHeatMapDrawer(creates.pm10Drawer);
           break;
         case 'extinctionOptics':
@@ -820,7 +819,7 @@ export default {
     const drawPm10 = (result: CustomeArray<any>) => {
       if (result.length != 24) return;
 
-      options.loadingPmStatus = false;
+      options.loadingPm10Status = false;
       if (creates.pm10Drawer != null) {
         creates.pm10Drawer.close();
       }
@@ -1030,7 +1029,7 @@ export default {
       }
       options.timeArray.reverse()
     }
-    //
+
     const reloadChartsRecognition = (element: string, callback: any) => {
       preprocessingCharts(element)
       let result = new CustomeArray(callback);
@@ -1057,7 +1056,6 @@ export default {
       }
 
       let matrix = converCloudRecognition(801, result, 'layertype');
-
       creates.cloudRecognitionDrawer = new HeatMapDrawer(1200, 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());
@@ -1066,7 +1064,10 @@ export default {
 
     const prepareCloudRecognitionColors = () => {
       return new ColorChart(['#0000FF', '#00FF00', '#FF0000', '#FFFFFF'],
-          [3, 2, 1, 0, -99]
+          [{ label: '冰云', value: 3 }, { label: '水云', value: 2 }, { label: '气溶胶', value: 1 }, { label: '晴空', value: 0 }],
+          false,
+          false,
+          "equal"
       );
     }
 
@@ -1138,12 +1139,13 @@ export default {
         }
 
         setCloudRecognitionResult(capacity, time, response.message, response.data, result);
-      }).catch(error => {
-        setCloudRecognitionResult(capacity, time, error.message, null, result);
       })
       //     .catch(error => {
       //   setCloudRecognitionResult(capacity, time, error.message, null, result);
       // })
+      // .catch(error => {
+      //   setCloudRecognitionResult(capacity, time, error.message, null, result);
+      // })
     }
 
     //

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

@@ -85,6 +85,11 @@ export class HeatMapDrawer{
             this.canvasContext.fillRect(startX, _y, this.defaultColorWidth, interval);
 
             this.canvasContext.fillStyle = "#000000";
+            if (this.colorChart.type == 'equal') {
+                const text = this.colorChart.values[targetIndex].label;
+                this.canvasContext.fillText(text, startX + this.defaultColorWidth + 2,  _y + interval - 40);
+                continue;
+            }
             if (index == 0){
                 if (this.colorChart.showStartValue){
                     const text = this.colorChart.values[targetIndex + 1];
@@ -151,7 +156,7 @@ export class HeatMapDrawer{
                 }
 
                 let targetValue = value[infoIndex].value;
-                let color = this.colorChart.getColor(targetValue);
+                let color = this.colorChart.getColor(targetValue, this.id);
                 value[infoIndex].updateBorderInfo(x, y, width, height);
                 if (color == null) continue;
                 this.canvasContext.fillStyle = color;

04.系统编码/Frontend/src/model/high-chart-create.ts

@@ -115,6 +115,34 @@ export class HighChartCreate {
             opposite: opposite
         });
     }
+
+    public setSpecialYAxis(text: string, max: number = null, min: number = null, tickInterval: number = null, tickAmount: number = null, opposite: boolean = false, lineWidth: number = 1,  reversed: boolean = true){
+        this.yAxis.push({
+            title: {
+                text: text,
+                style: {
+                    color: '#000000',
+                    fontSize: '18px',
+                    fontFamily: '微软雅黑'
+                }
+            },
+            labels: {
+                y: 8,
+                style: {
+                    fontSize:'18px'
+                },
+            },
+            max: max,
+            min: min,
+            tickInterval: tickInterval,
+            tickAmount: tickAmount,
+            lineWidth: lineWidth,
+            opposite: opposite
+        });
+    }
+
+
+
     //图例标识
     public setLegend(enabled: boolean = false){
         this.legend = {

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

@@ -306,7 +306,7 @@ export class BoxDrawer{
             this.canvasContext.stroke();
 
             if (flag){
-                this.canvasContext.font = "normal 20px 微软雅黑";
+                this.canvasContext.font = "normal 25px 微软雅黑";
                 this.canvasContext.fillStyle = "#000000";
                 const text = moment(this.values.radar_data[index].data_time).format("HH:mm");
                 this.canvasContext.fillText(text, _x -  this.canvasContext.measureText(text).width / 2, startY + yInterval + this.borderHeight + 36);
@@ -373,6 +373,7 @@ export class BoxDrawer{
 
 export class ColorChart{
 
+    public readonly type: string;
     public colors: any = null;
     public values: any = null;
     public showStartValue: boolean = false;
@@ -382,8 +383,8 @@ export class ColorChart{
     private maxDefaultColor: string = null;
 
     private readonly valueLength: number = 0;
-
-    constructor(colors: any, values: any, showStartValue: boolean = false, showEndValue: boolean = false) {
+    constructor(colors: any, values: any, showStartValue: boolean = false, showEndValue: boolean = false, type: string = 'normal') {
+        this.type = type;
         this.verify(colors, values);
         this.colors = colors;
         this.values = values;
@@ -407,6 +408,8 @@ export class ColorChart{
     }
 
     private verify(colors: any, values: any): void{
+        if (this.type == "equal") return;
+
         if (values.length <= 2)
             throw new Error("色标数据至少包含两个数据");
 
@@ -414,10 +417,21 @@ export class ColorChart{
             throw new Error("色标数据不正确，数据个数应为颜色个数 + 1");
     }
 
-    public getColor(value: number): string{
+    public getColor(value: number, id: string = null ): string{
         if (isNaN(value)) return null;
 
         const length = this.valueLength;
+        if (this.type == 'equal') {
+            if (this.minDefaultColor != null){
+                if (value < this.values[0].value) return this.minDefaultColor;
+                if (value > this.values[length - 1].value) return this.maxDefaultColor;
+            }
+            for(let index = 1; index < length; index ++){
+                if (this.values[index -1].value < value && this.values[index].value >= value){
+                    return this.colors[index];
+                }
+            }
+        }
         if (this.minDefaultColor != null){
             if (value < this.values[0]) return this.minDefaultColor;
             if (value > this.values[length - 1]) return this.maxDefaultColor;
@@ -428,6 +442,9 @@ export class ColorChart{
                 return this.colors[index - 1];
             }
         }
+
+
+
         return null;
     }
 }