Merge branch 'master' of http://112.124.40.88:5510/root/NanJingLamanRadarProject

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

@@ -274,7 +274,7 @@ export default {
       specialStartTime: null,
       tLogPPicture: "/images/no-data.png",
       SeasonValue: '1',
-      ElementChange: "BP-temp"
+      ElementChange: "BP-temp",
     });
 
     let drawers = {
@@ -996,6 +996,7 @@ export default {
       // justify-content: space-between;
       .special-picture {
         height: 100%!important;
+
         .title {
             top: 80px!important;
         }
@@ -1025,14 +1026,15 @@ export default {
       }
       .picture {
         width: 100%;
+        height: 100%;
         position: relative;
-        margin-top: 30px;
+        //margin-top: 30px;
         .title {
           width: 100%;
           font-size: 0.22rem;
           position: absolute;
           left: 3.4rem;
-          top: 0;
+          top: 0.3rem;
           z-index: 1000;
         }
       }

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

@@ -77,7 +77,7 @@
           <div class="time-item" v-for="(time, index) in times" :key="index"
                :class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}">
             <span class="hour" style="padding-left: 10px">{{ time.month }}</span>
-            <span class="time" @click="onDayClick(time, index)">{{ time.day }}</span>
+            <span class="time" @click="onChangeDayClick(time, index)">{{ time.day }}</span>
           </div>
         </div>
 
@@ -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="加载中">
@@ -224,6 +224,7 @@
 
         <div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'">
           <div class="picture special-picture">
+            <h2 class="title" style="left: 3.3rem">质控前</h2>
             <div v-loading="loadingExtinctionBeforeStatus"
                  style="width: 100%;"
                  custom-class="loading"
@@ -232,6 +233,7 @@
             </div>
           </div>
           <div class="picture special-picture">
+            <h2 class="title">质控后</h2>
             <div v-loading="loadingExtinctionStatus"
                  style="width: 100%;"
                  custom-class="loading"
@@ -243,6 +245,7 @@
 
         <div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'">
           <div class="picture special-picture">
+            <h2 class="title" style="left: 3.3rem">质控前</h2>
             <div v-loading="loadingWatervaporBeforeStatus"
                  style="width: 100%"
                  element-loading-text="加载中">
@@ -250,6 +253,7 @@
             </div>
           </div>
           <div class="picture special-picture">
+            <h2 class="title">质控后</h2>
             <div v-loading="loadingWaterVaporStatus"
                  style="width: 100%"
                  element-loading-text="加载中">
@@ -264,6 +268,7 @@
 </template>
 
 <script lang="ts">
+
 import {onMounted, reactive, toRefs, watch} from 'vue';
 import moment from "moment";
 import {post} from '../uilts/axios';
@@ -344,6 +349,7 @@ export default {
       loadingWaterVaporSingleStatus: false,
       loadingExtinctionOpticsStatus: false,
       loadingPmStatus: false,
+      loadingPm10Status: false,
       loadingCloudSolStatus: false,
       loadingCloudRecognitionStatus: false,
       loadingExtinctionStatus: false,
@@ -390,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')
@@ -403,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('云顶高度')
@@ -427,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')
@@ -438,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')
@@ -567,12 +572,12 @@ export default {
           reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter);
           break;
         case 'pm2_5' :
-          initTimeLine()
+          initTimeLine();
           reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
-          reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
+          reloadCloudRecognition('pm10', 201, 'pm10', drawPm10);
           break;
         case 'pblh' :
-          initTimeLine()
+          initTimeLine();
           reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
           break;
         case 'lidarratio' :
@@ -595,7 +600,6 @@ export default {
         //   reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
         //   break;
         case 'extinction' :
-          // initTimeLineDay()
           initTimeLine(true);
           reloadExtinctionBefore();
           reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter, false, 12);
@@ -620,6 +624,7 @@ export default {
       post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
         options.loadingWatervaporBeforeStatus = false;
         if (response.error != 0){
+          createEmptyCanvas('watervapor_chart-before', 800, 650);
           console.log("未找到质控前数据文件");
           return;
         }
@@ -629,7 +634,7 @@ export default {
         }
 
         let matrix = convertValueToBox(response.data);
-        creates.watervaporBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before", 'g/kg','质控前');
+        creates.watervaporBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before", 'g/kg');
         creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
         creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
         creates.watervaporBeforeDrawer.draw();
@@ -646,6 +651,7 @@ export default {
       post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
         options.loadingExtinctionBeforeStatus = false;
         if (response.error != 0){
+          createEmptyCanvas('extinction_chart-before', 800, 650);
           console.log("未找到质控前数据文件");
           return;
         }
@@ -655,7 +661,7 @@ export default {
         }
 
         let matrix = convertValueToBox(response.data);
-        creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控前');
+        creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", '/km');
         creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
         creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors());
         creates.extinctionBeforeDrawer.draw();
@@ -664,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');
       }
@@ -713,7 +718,7 @@ export default {
           clearHeatMapDrawer(creates.pm2Point5Drawer);
           break;
         case 'pm10':
-          options.loadingPmStatus = true;
+          options.loadingPm10Status = true;
           clearHeatMapDrawer(creates.pm10Drawer);
           break;
         case 'extinctionOptics':
@@ -814,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();
       }
@@ -943,7 +948,7 @@ export default {
       }
 
       let matrix = converCloudRecognition(801, result, 'extinctionOptics');
-      creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km/sr');
+      creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, 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();
@@ -974,7 +979,7 @@ export default {
       }
 
       let matrix = converCloudRecognition(101, result, 'watervapor');
-      creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg', '质控前');
+      creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg');
       creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
       creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
       creates.watervaporDrawer.draw();
@@ -996,7 +1001,7 @@ export default {
       }
 
       let matrix = converCloudRecognition(801, result, 'extinction');
-      creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", 'km/sr','质控后');
+      creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", '/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();
@@ -1024,7 +1029,7 @@ export default {
       }
       options.timeArray.reverse()
     }
-    //
+
     const reloadChartsRecognition = (element: string, callback: any) => {
       preprocessingCharts(element)
       let result = new CustomeArray(callback);
@@ -1051,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());
@@ -1060,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"
       );
     }
 
@@ -1132,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);
+      // })
     }
 
     //
@@ -1550,12 +1558,12 @@ export default {
       elementChange(element)
     }
 
-    const onDayClick = (time, index) => {
+    const onChangeDayClick = (time, index) => {
-      options.timeLineFormat = "hour"
+      options.currentTime = time.date
-      options.currentTime = time.date;
       options.date = moment(time.date).format('YYYY-MM-DD');
-      options.index = index;
       elementChange(options.currentElement)
+      options.index = index;
+
     }
 
     const onPrevDayTimeClick = () => {
@@ -1589,7 +1597,7 @@ export default {
       // onSaveClick,
       onTabClick,
       onElementClick,
-      onDayClick,
+      onChangeDayClick,
       onPrevDayTimeClick,
       onNextDayTimeClick
     }
@@ -1628,35 +1636,36 @@ export default {
 
       .picture {
         width: 100%;
+        height: 100%;
         position: relative;
-        margin-top: 30px;
+        //margin-top: 30px;
 
         #watervapor_single_chart {
-          transform: translateX(9%) translateY(15px);
+          transform: translateX(9%) translateY(20px);
           //transform: scale(1.0, 0.8) translateX(539px);
         }
 
         #extinction_optics_chart {
             //transform: scale(0.56, 0.85) translateX(-32%);
-          transform: translateX(9%) translateY(15px);
+          transform: translateX(9%) translateY(20px);
 
         }
 
         #pm2_5_chart {
-          transform: translateX(-50px) translateY(50px);
+          transform: translateX(-50px) translateY(20px);
         }
 
         #pm10_chart {
-          transform: translateX(-50px) translateY(50px);
+          transform: translateX(-50px) translateY(20px);
         }
 
         #backscatter_chart {
-          transform: translateX(9%) translateY(50px);
+          transform: translateX(9%) translateY(20px);
           //transform: scale(0.6, 0.85) translateX(-76px);
         }
 
         #cloud_sol_chart {
-          transform: translateX(9%) translateY(50px);
+          transform: translateX(9%) translateY(20px);
           //transform: scale(0.6, 0.85) translate(-12%, -12px);
         }
 
@@ -1675,7 +1684,7 @@ export default {
           width: 100%;
           font-size: 0.22rem;
           position: absolute;
-          left: 2.10rem;
+          left: 3.5rem;
           top: 0.30rem;
           z-index: 100;
         }

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

@@ -1,7 +1,10 @@
 import * as Highcharts from 'highcharts';
+//import * as Exporting from 'highcharts/modules/exporting';
 
-export class HighChartCreate {
+// // 初始化导出模块
+// Exporting(Highcharts);
 
+export class HighChartCreate {
     private readonly id: string;
 
     private highChart: any;
@@ -12,7 +15,6 @@ export class HighChartCreate {
     private legend: any = null;
     private tooltip: any = null;
     private time: any = null;
-
     constructor(id: string) {
         this.id = id;
     }
@@ -82,6 +84,11 @@ export class HighChartCreate {
                     fontFamily: '微软雅黑'
                 }
             },
+            labels: {
+                style: {
+                    fontSize:'18px'
+                },
+            },
             max: max,
             min: min,
             tickInterval: tickInterval,
@@ -108,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 = {
@@ -193,4 +228,3 @@ export class HighChartCreate {
     }
 
 }
-

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

@@ -278,8 +278,8 @@ export class BoxDrawer{
     private drawTemperatureText(unit): void {
         this.canvasContext.font = "normal 35px 微软雅黑";
         this.canvasContext.fillStyle = "#000000";
-        let unitX = 1390
+        let unitX = this.width - this.paddingRight;
-        if (unit === '(degree)') unitX =1350
+        if (unit === '(degree)')  unitX = this.width - this.paddingRight - 30;
         this.canvasContext.fillText(unit,  unitX,50);
     }
 
@@ -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, type: string = 'normal') {
-    constructor(colors: any, values: any, showStartValue: boolean = false, showEndValue: boolean = false) {
+        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;
     }
 }