From d0db5decaea0dec404bcce4f1244b52e7e6ebda6 Mon Sep 17 00:00:00 2001
From: xuhuihui <3548508071@qq.com>
Date: Tue, 12 Apr 2022 15:09:44 +0800
Subject: [PATCH] commit

---
 .../src/components/MicrowaveRadiation.vue     | 36 ++++----
 .../Frontend/src/components/RamanLidar.vue    | 90 +++++++++++--------
 .../Frontend/src/uilts/box-drawer.ts          |  4 +-
 3 files changed, 68 insertions(+), 62 deletions(-)

diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index df03fec..a783815 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -114,10 +114,7 @@
             <h2 class="title">质控前</h2>
             <canvas id='original-data-canvas'></canvas>
           </div>
-          <!--          <div class="picture">-->
-          <!--            <h2 class="title">温度异常值标记</h2>-->
-          <!--            <canvas id='abnormal-canvas'></canvas>-->
-          <!--          </div>-->
+
           <div class="picture special-picture">
             <h2 class="title">质控后</h2>
             <canvas id='interpolate-canvas'></canvas>
@@ -201,7 +198,7 @@
 </template>
 
 <script lang="ts">
-import {onMounted, reactive, toRefs} from 'vue';
+import {onMounted, reactive, ref, toRefs} from 'vue';
 import moment from "moment";
 import {get, post} from '../uilts/axios';
 import {BoxDrawer, ColorChart, createEmptyCanvas} from "../uilts/box-drawer";
@@ -214,7 +211,6 @@ export default {
   setup() {
     let timer = null;
     let creates: {
-      // verticalProfile: HighChartCreate
       verticalProfileTemp: HighChartCreate
       verticalProfileVaporDensity: HighChartCreate
       verticalProfileRelativeHumidity: HighChartCreate
@@ -227,7 +223,6 @@ export default {
       zeroHeight: HighChartCreate
       NegativeTwentyHeight: HighChartCreate
     } = {
-      //verticalProfile: null,
       verticalProfileTemp: null,
       verticalProfileVaporDensity: null,
       verticalProfileRelativeHumidity: null,
@@ -298,7 +293,6 @@ export default {
 
     const initEcharts = (name) => {
       if (name === 'kuoxian') {
-        // verticalProfileInit()
         verticalProfileTempInit()
         verticalProfileVaporDensityInit()
         verticalProfileRelativeHumidityInit()
@@ -336,7 +330,7 @@ export default {
       creates.verticalProfileTemp.setXAxis('高度(km)', false);
       creates.verticalProfileTemp.setYAxis('温度T(degree)', 10, -40, 10, 6);
       creates.verticalProfileTemp.setLegend();
-      creates.verticalProfileTemp.setTooltip('{point.category} KM: {point.y}');
+      creates.verticalProfileTemp.setTooltip('{point.category} KM, {point.y}');
       creates.verticalProfileTemp.setSeries('温度', 0, '℃', '#F49927');
       creates.verticalProfileTemp.init();
     }
@@ -348,7 +342,7 @@ export default {
       creates.verticalProfileVaporDensity.setXAxis('高度(km)', false);
       creates.verticalProfileVaporDensity.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11);
       creates.verticalProfileVaporDensity.setLegend();
-      creates.verticalProfileVaporDensity.setTooltip('{point.category} KM: {point.y}');
+      creates.verticalProfileVaporDensity.setTooltip('{point.category} KM, {point.y}');
       creates.verticalProfileVaporDensity.setSeries('水汽密度', 0, 'g/Kg', '#6AB312');
       creates.verticalProfileVaporDensity.init();
     }
@@ -360,7 +354,7 @@ export default {
       creates.verticalProfileRelativeHumidity.setXAxis('高度(km)', false);
       creates.verticalProfileRelativeHumidity.setYAxis('相对湿度RH(%)', 100, 0, 10, 6);
       creates.verticalProfileRelativeHumidity.setLegend();
-      creates.verticalProfileRelativeHumidity.setTooltip('{point.category} KM: {point.y}');
+      creates.verticalProfileRelativeHumidity.setTooltip('{point.category} KM, {point.y}');
       creates.verticalProfileRelativeHumidity.setSeries('相对湿度', 0, '%', '#498DF0');
       creates.verticalProfileRelativeHumidity.init();
     }
@@ -371,7 +365,7 @@ export default {
       creates.convectiveIndexProfileTimeChartCAPE.setXAxis('时间（时/分）', false);
       creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)', 800, 0, 100, 9);
       creates.convectiveIndexProfileTimeChartCAPE.setLegend();
-      creates.convectiveIndexProfileTimeChartCAPE.setTooltip('{point.category}: {point.y}(J/kg)');
+      creates.convectiveIndexProfileTimeChartCAPE.setTooltip('{point.category}, {point.y}(J/kg)');
       creates.convectiveIndexProfileTimeChartCAPE.setSeries('CAPE')
       creates.convectiveIndexProfileTimeChartCAPE.init();
     }
@@ -382,7 +376,7 @@ export default {
       creates.convectiveIndexProfileTimeChartCIN.setXAxis('时间（时/分）', false);
       creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIN(J/kg)', 800, 0, 100, 9);
       creates.convectiveIndexProfileTimeChartCIN.setLegend();
-      creates.convectiveIndexProfileTimeChartCIN.setTooltip('{point.category}: {point.y}(J/kg)');
+      creates.convectiveIndexProfileTimeChartCIN.setTooltip('{point.category}, {point.y}(J/kg)');
       creates.convectiveIndexProfileTimeChartCIN.setSeries('CIN')
       creates.convectiveIndexProfileTimeChartCIN.init();
     }
@@ -394,7 +388,7 @@ export default {
       creates.kIndexChart.setXAxis('时间（时/分）', false);
       creates.kIndexChart.setYAxis('K（℃）', 40, -40, 10, 9);
       creates.kIndexChart.setLegend();
-      creates.kIndexChart.setTooltip('{point.category}: {point.y}(℃)');
+      creates.kIndexChart.setTooltip('{point.category}, {point.y}(℃)');
       creates.kIndexChart.setSeries('K指数')
       creates.kIndexChart.init();
     }
@@ -406,7 +400,7 @@ export default {
       creates.sandIndex.setXAxis('时间（时/分）', false);
       creates.sandIndex.setYAxis('SI（℃）', 30, 0, 3, 11);
       creates.sandIndex.setLegend();
-      creates.sandIndex.setTooltip('{point.category}: {point.y}(℃)');
+      creates.sandIndex.setTooltip('{point.category}, {point.y}(℃)');
       creates.sandIndex.setSeries('沙式指数')
       creates.sandIndex.init();
     }
@@ -418,7 +412,7 @@ export default {
       creates.airPressure.setXAxis('时间（时/分）', false);
       creates.airPressure.setYAxis('LCL气压（hPa)', 1000, 300, 100, 8);
       creates.airPressure.setLegend();
-      creates.airPressure.setTooltip('{point.category}: {point.y}(hPa)');
+      creates.airPressure.setTooltip('{point.category}, {point.y}(hPa)');
       creates.airPressure.setSeries('LCL气压')
       creates.airPressure.init();
     }
@@ -430,7 +424,7 @@ export default {
       creates.deltaT.setXAxis('时间（时/分）', false);
       creates.deltaT.setYAxis('deltaT（℃）', 1000, 300, 100, 8);
       creates.deltaT.setLegend();
-      creates.deltaT.setTooltip('{point.category}: {point.y}(℃)');
+      creates.deltaT.setTooltip('{point.category}, {point.y}(℃)');
       creates.deltaT.setSeries('deltaT')
       creates.deltaT.init();
     }
@@ -442,7 +436,7 @@ export default {
       creates.zeroHeight.setXAxis('时间（时/分）', false);
       creates.zeroHeight.setYAxis('hgt_0(m)', 10, 0, 1, 11);
       creates.zeroHeight.setLegend();
-      creates.zeroHeight.setTooltip('{point.category}: {point.y}(m)');
+      creates.zeroHeight.setTooltip('{point.category}, {point.y}(m)');
       creates.zeroHeight.setSeries('hgt_0')
       creates.zeroHeight.init();
     }
@@ -454,7 +448,7 @@ export default {
       creates.NegativeTwentyHeight.setXAxis('时间（时/分）', false);
       creates.NegativeTwentyHeight.setYAxis('hgt_-20(m)', 20, -20, 5, 9);
       creates.NegativeTwentyHeight.setLegend();
-      creates.NegativeTwentyHeight.setTooltip('{point.category}: {point.y}(m)');
+      creates.NegativeTwentyHeight.setTooltip('{point.category}, {point.y}(m)');
       creates.NegativeTwentyHeight.setSeries('hgt_-20')
       creates.NegativeTwentyHeight.init();
     }
@@ -1048,12 +1042,12 @@ export default {
       }
 
       :deep(.el-switch__core) {
-        width: 50px !important;
+        width: 40px !important;
         //height: 20px !important;
       }
 
       :deep(.el-switch__core::after) {
-        width: 80px;
+        width: 50px;
         height: 35px;
         margin-top: -1px;
         margin-bottom: 2px;
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 584adfa..e147722 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -75,13 +75,13 @@
         </div>
 
         <div class="picture-container raman-picture-container" v-show="currentTab === 'optical-property'">
-          <div class="picture">
-            <h2 class="title">激光雷达比</h2>
-            <div id="LidarRatio"
-                 style="width: 650px;height: 450px"
-                 v-loading="loadingLidarRatioStatus"
+          <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>
 
@@ -126,16 +126,17 @@
                  v-loading="loadingBoundaryLayerHeightStatus" custom-class="loading" element-loading-text="加载中"></div>
           </div>
 
-
-          <div class="picture special-picture">
-            <h2 class="title">后向散射系数</h2>
-            <div v-loading="loadingBackscatterStatus"
-                 style="width: 100%;"
+          <div class="picture">
+            <h2 class="title">激光雷达比</h2>
+            <div id="LidarRatio"
+                 style="width: 650px;height: 450px"
+                 v-loading="loadingLidarRatioStatus"
                  custom-class="loading"
                  element-loading-text="加载中">
-              <canvas id='backscatter_chart'></canvas>
             </div>
           </div>
+
+
         </div>
 
 
@@ -197,7 +198,7 @@
 </template>
 
 <script lang="ts">
-import {onMounted, reactive, toRefs} from 'vue';
+import {onMounted, reactive, toRefs, watch} from 'vue';
 import moment from "moment";
 import {RamanLidarConfig} from '../uilts/Config';
 import {post} from '../uilts/axios';
@@ -246,13 +247,13 @@ export default {
       backscatterDrawer: null
     }
     let options = reactive({
-      currentTab: 'MWR',
+      // currentTab: 'MWR',
+      currentTab:'aerosol-product',
       currentRegion: 'pk',
       currentElement: 'PBLH',
       currentType: '边界层高度',
       // date: moment().add(-1, 'd').format('YYYY-MM-DD'),
-      date: moment().format('YYYY-MM-DD HH:MM:SS'),
-      // date: moment('2022-04-01').format('YYYY-MM-DD HH:MM:SS'),
+      date: moment().format('YYYY-MM-DD HH:mm:ss'),
       times: [],
       currentTime: null,
       downloadImgUrl: '/images/default-picture.png',
@@ -335,8 +336,8 @@ export default {
     const LidarRatioInit = () => {
       creates.LidarRatio = new HighChartCreate('LidarRatio');
       creates.LidarRatio.setChart();
-      creates.LidarRatio.setSpecialXAxis('时间(小时)', 24, 0, 2);
-      creates.LidarRatio.setYAxis('高度(米)', 500, 0, 50, 7);
+      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('激光雷达比')
@@ -358,6 +359,7 @@ export default {
     }
 
     const onTabClick = (name) => {
+      initTimeLine()
       options.currentTab = name;
       setTimeout(() => {
         initEcharts(name)
@@ -370,16 +372,16 @@ export default {
       if (options.currentTab === 'boundary-layer-height') {
         reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor);
       } else if (options.currentTab === 'optical-property') {
-        reloadChartsRecognition('lidarratio', drawLidarRatioCharts)
+        reloadCloudRecognition('backscatter', 201, 'backscatter', drawBackscatter)
         reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
         reloadChartsRecognition('aod', drawAerosolCharts)
         reloadChartsRecognition('icot', drawIceCloudsCharts)
         reloadChartsRecognition('wcot', drawWaterCloud)
       } else if (options.currentTab === 'aerosol-product') {
+        reloadChartsRecognition('lidarratio', drawLidarRatioCharts)
         reloadChartsRecognition('pblh', drawBoundaryLayerCharts)
         reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
         reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
-        reloadCloudRecognition('backscatter', 201, 'backscatter', drawBackscatter)
       } else if (options.currentTab === 'BingoCloud') {
         reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts)
         reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts)
@@ -484,7 +486,7 @@ export default {
 
       let matrix = converCloudRecognition(201, result, 'backscatter');
       creates.backscatterDrawer = new HeatMapDrawer(800, 600, matrix, "backscatter_chart", '米');
-      creates.backscatterDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true));
+      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();
     }
@@ -492,7 +494,7 @@ export default {
     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]
+          [-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]
       );
     }
 
@@ -599,6 +601,24 @@ 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 preparePmColors = () => {
       return new ColorChart(['#F6EF20', '#FEC338', '#C5C22A', '#72CD64', '#31C69F', '#01B8CA', '#259BE8', '#327CFC', '#4853F4', '#422EC1'],
           [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0], true, true
@@ -701,7 +721,7 @@ export default {
       options.timeArray = []
       for (let index = 0; index < 12; index++) {
         reloadSingleCloudRecognition(capacity, time.clone().add(-index, 'h').format('M_D_H'), element, result);
-        options.timeArray.push(time.clone().add(-index, 'h').format('HH:00'))
+        options.timeArray.push(time.clone().add(-index, 'h').format('HH时'))
       }
       options.timeArray.reverse()
     }
@@ -715,7 +735,6 @@ export default {
       }
     }
 
-
     const drawCloudRecognition = (result: CustomeArray<any>) => {
       if (result.length != 12) return;
       options.loadingCloudRecognitionStatus = false;
@@ -781,20 +800,6 @@ export default {
       return matrix;
     }
 
-    //科学计数法转普通数字
-    function getFullNum(num) {
-      //处理非数字
-      if (isNaN(num)) {
-        return num
-      }
-      //处理不需要转换的数字
-      let str = '' + num;
-      if (!/e/i.test(str)) {
-        return num
-      }
-      return num.toFixed(18).replace(/\.?0+$/, "");
-    }
-
     const reloadSingleCloudRecognition = (capacity: number, time: string, elementCode, result: CustomeArray<any>) => {
       const params = prepareApiParams(time, elementCode)
       get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
@@ -842,9 +847,10 @@ export default {
       if (name === 'boundary-layer-height') {
 
       } else if (name === 'optical-property') {
-        LidarRatioInit()
+
         opticalThicknessInit()
       } else if (name === 'aerosol-product') {
+        LidarRatioInit()
         boundaryLayerHeightInit()
       } else if (name === 'BingoCloud') {
         cloudsHeightInit()
@@ -991,7 +997,6 @@ export default {
       options.currentTime = time.hour;
       options.date = moment(time.date).format('YYYY-MM-DD HH');
       reloadChangeData()
-
       options.index = index;
       // cancelActive();
       // setTitle(moment(time.date, 'YYYY-MM-DD'));
@@ -1141,6 +1146,13 @@ export default {
       }
     }
 
+    // watch(()=>options.date,() =>{
+    //   reloadChangeData()
+    // },{
+    //   deep: true,
+    //   immediate: true
+    // })
+
     const verify = () => {
       ElMessage({
         showClose: true,
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index 573c82a..936e571 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -27,7 +27,7 @@ export class BoxDrawer{
     private readonly width: number = null;
     private readonly height: number = null;
     private readonly paddingLeft: number = 200;
-    private readonly paddingRight: number = 100;
+    private readonly paddingRight: number = 130;
     private readonly paddingTop: number = 60;
     private readonly paddingBottom: number = 50;
     private readonly colorChart: ColorChart = null;
@@ -426,7 +426,7 @@ export class Box implements IBox{
     time: string;
     util: string;
     //提示框的宽高
-    rectWidth: number = 320;
+    rectWidth: number = 340;
     rectHeight: number = 120;
     rectX: number;
     rectY: number;