commit

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

@@ -49,6 +49,15 @@
                                   @click="onElementClick('one-hour', -24, 60)">1小时</span></el-col>
         </el-row>
       </div>
+
+
+
+
+
+
+
+
+
     </div>
     <div class="container panel">
       <div class="toolbar">
@@ -328,7 +337,7 @@ export default {
       creates.verticalProfileTemp = new HighChartCreate('verticalProfileTemp');
       creates.verticalProfileTemp.setChart(true);
       creates.verticalProfileTemp.setXAxis('高度(km)', false);
-      creates.verticalProfileTemp.setYAxis('温度T(degree)', 10, -40, 10, 6);
+      creates.verticalProfileTemp.setYAxis('温度T(℃)', 10, -40, 10, 6);
       creates.verticalProfileTemp.setLegend();
       creates.verticalProfileTemp.setTooltip('{point.category} KM, {point.y}');
       creates.verticalProfileTemp.setSeries('温度', 0, '℃', '#F49927');

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

@@ -39,9 +39,15 @@
                                   :class="{'active': currentRegion === 'pk'}">浦口</span></el-col>
         </el-row>
       </div>
-      <!--      <div class="menu-item">-->
-      <!--        <h2 class="tip">要素选择</h2>-->
-      <!--      </div>-->
+
+    <div class="menu-item">
+      <h2 class="tip">要素选择</h2>
+        <el-row :gutter="12">
+           <el-col :span="24" v-for="(item, index) in elementData" :key = 'index'>
+                    <span @click="onElementClick(item)"
+                    :class="{'active': currentElement === item}">{{ item }}</span></el-col>
+           </el-row>
+      </div>
     </div>
 
     <div class="container panel">
@@ -49,7 +55,7 @@
 
         <div class="times">
           <div class="time-item" v-for="(time, index) in times" :key="index"
-               :class="{'active': currentTime === time.hour, 'first-hour': time.hour === '00'}">
+               :class="{'active': currentTime === time.date, 'first-hour': time.hour === '00'}">
             <span class="hour">{{ time.day }}</span>
             <span class="time" @click="onTimeClick(time, index)">{{ time.hour }}</span>
           </div>
@@ -63,42 +69,44 @@
           <span @click="onNextDayClick"><img src="/images/next.png"/></span>
         </div>
       </div>
+
       <div class="picture-view">
-        <div class="picture-container raman-picture-container" v-show="currentTab === 'boundary-layer-height'">
+
+        <div class="picture-container raman-picture-container" v-show="currentElement === '水汽'">
           <div class="picture special-picture">
-            <h2 class="title special-title">水汽</h2>
             <div v-loading="loadingWaterVaporSingleStatus"
-                 style="width: 100%;"
-                 custom-class="special-loading"
+                 style="width: 100%;height: 100%"
+                 custom-class="loading"
                  element-loading-text="加载中">
               <canvas id='watervapor_single_chart'></canvas>
             </div>
           </div>
         </div>
 
-        <div class="picture-container raman-picture-container" v-show="currentTab === 'optical-property'">
+        <div class="picture-container raman-picture-container" v-show=" currentElement=== '光学厚度'">
           <div class="picture">
-            <h2 class="title">光学厚度</h2>
             <div id="opticalThickness"
-                 style="width: 500px;height: 450px"
+                 style="width: 800px;height: 450px"
                  v-loading="loadingOpticalThicknessStatus"
                  custom-class="loading"
                  element-loading-text="加载中">
             </div>
           </div>
+        </div>
 
+          <div class="picture-container raman-picture-container" v-show = "currentElement=== '消光系数'">
           <div class="picture special-picture">
-            <h2 class="title">消光系数</h2>
             <div v-loading="loadingExtinctionOpticsStatus"
-                 style="width: 100%;"
+                 style="width: 100%;height: 100%"
                  custom-class="loading"
                  element-loading-text="加载中">
               <canvas id='extinction_optics_chart'></canvas>
             </div>
           </div>
+          </div>
 
+          <div class="picture-container raman-picture-container" v-show="currentElement=== '后向散射系数'">
           <div class="picture special-picture">
-            <h2 class="title">后向散射系数</h2>
             <div v-loading="loadingBackscatterStatus"
                  style="width: 100%;"
                  custom-class="loading"
@@ -108,29 +116,41 @@
           </div>
         </div>
 
-        <div class="picture-container raman-picture-container" v-show="currentTab === 'aerosol-product'">
 
+        <div class="picture-container raman-picture-container" v-show="currentElement=== '气溶胶PM'">
           <div class="picture special-picture">
-            <h2 class="title">气溶胶PM</h2>
             <div v-loading="loadingPmStatus"
                  style="width: 100%;"
                  custom-class="loading"
                  element-loading-text="加载中">
               <canvas id='pm2_5_chart'></canvas>
+
+            </div>
+          </div>
+          <div class="picture special-picture">
+            <div v-loading="loadingPmStatus"
+                 style="width: 100%;"
+                 custom-class="loading"
+                 element-loading-text="加载中">
               <canvas id='pm10_chart'></canvas>
             </div>
           </div>
+        </div>
 
-          <div class="picture ">
-            <h2 class="title">边界层高度</h2>
-            <div id="BoundaryLayerHeight" style="width: 500px;height: 450px"
-                 v-loading="loadingBoundaryLayerHeightStatus" custom-class="loading" element-loading-text="加载中"></div>
+      <div class="picture-container raman-picture-container" v-show="currentElement=== '边界层高度'">
+          <div class="picture">
+            <div id="BoundaryLayerHeight"
+                 style="width: 800px;height: 450px"
+                 v-loading="loadingBoundaryLayerHeightStatus"
+                 custom-class="loading"
+                 element-loading-text="加载中"></div>
           </div>
+      </div>
 
+      <div class="picture-container raman-picture-container" v-show="currentElement=== '激光雷达比'">
           <div class="picture">
-            <h2 class="title">激光雷达比</h2>
             <div id="LidarRatio"
-                 style="width: 500px;height: 450px"
+                 style="width: 800px;height: 450px"
                  v-loading="loadingLidarRatioStatus"
                  custom-class="loading"
                  element-loading-text="加载中">
@@ -138,9 +158,11 @@
           </div>
         </div>
 
-        <div class="picture-container raman-picture-container" v-show="currentTab === 'BingoCloud'">
+
+
+
+        <div class="picture-container raman-picture-container" v-show="currentElement=== '云气溶胶分类'">
           <div class="picture special-picture">
-            <h2 class="title">云气溶胶分类</h2>
             <div v-loading="loadingCloudSolStatus"
                  style="width: 100%;"
                  custom-class="loading"
@@ -148,20 +170,30 @@
               <canvas id='cloud_sol_chart'></canvas>
             </div>
           </div>
+        </div>
+
+        <div class="picture-container raman-picture-container" v-show="currentElement=== '云底高度'">
           <div class="picture">
-            <h2 class="title">云层高度</h2>
-            <div id="cloudsHeight" style="width: 500px;height: 450px" v-loading="loadingCloudsHeightStatus"
-                 custom-class="loading" element-loading-text="加载中"></div>
+            <div id="cloudsHeight"
+                 style="width: 800px;height: 450px"
+                 v-loading="loadingCloudsHeightStatus"
+                 custom-class="loading"
+                 element-loading-text="加载中"></div>
           </div>
+        </div>
 
+        <div class="picture-container raman-picture-container" v-show="currentElement=== '云顶高度'">
           <div class="picture">
-            <h2 class="title">
-              云顶高度</h2>
-            <div id="cloudTopHeight" style="width: 500px;height: 450px" v-loading="loadingCloudTopHeightStatus"
-                 custom-class="loading" element-loading-text="加载中"></div>
+            <div id="cloudTopHeight"
+                 style="width: 800px;height: 450px"
+                 v-loading="loadingCloudTopHeightStatus"
+                 custom-class="loading"
+                 element-loading-text="加载中"></div>
           </div>
         </div>
 
+
+
         <div class="picture-container raman-picture-container" v-show="currentTab === 'MWR'">
           <div class="picture special-picture">
             <h2 class="title">云的识别</h2>
@@ -191,7 +223,6 @@
           </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
@@ -248,7 +279,7 @@ export default {
     let options = reactive({
       currentTab: 'MWR',
       currentRegion: 'jn',
-      currentElement: 'PBLH',
+      // currentElement: 'PBLH',
       currentType: '边界层高度',
       // date: moment('2022-04-01 12:00:00').format('YYYY-MM-DD HH:mm:ss'),
       date: moment().format('YYYY-MM-DD HH:mm:ss'),
@@ -283,7 +314,10 @@ export default {
       loadingOpticalThicknessStatus: false,
       currentHour: 0,
       timeArray: [],
-      chartsData: []
+      chartsData: [],
+      chartTimeData: [],
+      elementData: ['光学厚度', '消光系数', '后向散射系数'],
+      currentElement: '光学厚度'
     })
 
     onMounted(() => {
@@ -299,7 +333,7 @@ export default {
     const boundaryLayerHeightInit = () => {
       creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
       creates.boundaryLayerHeight.setChart();
-      creates.boundaryLayerHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
+      creates.boundaryLayerHeight.setXAxis('时间(天/时)', false);
       creates.boundaryLayerHeight.setYAxis('边界层高度(米)', 3000, 0, 500, 7);
       creates.boundaryLayerHeight.setLegend();
       creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
@@ -311,7 +345,8 @@ export default {
     const cloudsHeightInit = () => {
       creates.cloudsHeight = new HighChartCreate('cloudsHeight');
       creates.cloudsHeight.setChart(false, 'scatter');
-      creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
+      // creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
+      creates.cloudsHeight.setXAxis('时间(天/时)', false);
       creates.cloudsHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
       creates.cloudsHeight.setLegend();
       creates.cloudsHeight.setTooltip('高度: {point.y}');
@@ -322,7 +357,8 @@ export default {
     const cloudTopHeightInit = () => {
       creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
       creates.cloudTopHeight.setChart(false, 'scatter');
-      creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
+      // creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
+      creates.cloudTopHeight.setXAxis('时间(天/时)', false);
       creates.cloudTopHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
       creates.cloudTopHeight.setLegend();
       creates.cloudTopHeight.setTooltip('高度: {point.y}');
@@ -346,7 +382,8 @@ export default {
     const opticalThicknessInit = () => {
       creates.opticalThickness = new HighChartCreate('opticalThickness');
       creates.opticalThickness.setChart();
-      creates.opticalThickness.setSpecialXAxis('时间（小时）', 24, 0, 2);
+      // creates.opticalThickness.setSpecialXAxis('时间（小时）', 24, 0, 2);
+      creates.opticalThickness.setXAxis('时间(天/时)', false);
       creates.opticalThickness.setYAxis('光学厚度', 6, 0, 1, 7);
       creates.opticalThickness.setLegend(true);
       creates.opticalThickness.setTooltip('{point.y}');
@@ -357,42 +394,81 @@ export default {
     }
 
     const onTabClick = (name) => {
-      // initTimeLine()
       options.currentTab = name;
-      // setTimeout(() => {
-      //   initEcharts(name)
-      //   reloadChangeData()
-      // }, 500)
       initEcharts(name)
       reloadChangeData()
     }
 
     const reloadChangeData = () => {
       cancelRequest();
+      options.elementData = []
       if (options.currentTab === 'boundary-layer-height') {
-        reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor);
+        options.currentElement = '水汽'
+        options.elementData = ['水汽']
+
+
       } else if (options.currentTab === 'optical-property') {
-        reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter);
-        reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
-        reloadChartsRecognition('aod', drawAerosolCharts);
-        reloadChartsRecognition('icot', drawIceCloudsCharts);
-        reloadChartsRecognition('wcot', drawWaterCloud);
+        options.currentElement = '光学厚度'
+        options.elementData = ['光学厚度', '消光系数', '后向散射系数']
+
       } else if (options.currentTab === 'aerosol-product') {
-        reloadChartLidarratio('lidarratio', drawLidarRatioCharts)
-        reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
-        reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
-        reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
+        options.currentElement = '气溶胶PM'
+        options.elementData = ['气溶胶PM', '边界层高度', '激光雷达比']
+
       } else if (options.currentTab === 'BingoCloud') {
-        reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts);
-        reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts);
-        reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol);
+        options.currentElement = '云气溶胶分类'
+        options.elementData = ['云气溶胶分类', '云底高度', '云顶高度']
+
       } else if (options.currentTab === 'MWR') {
+        options.currentElement = '质控对比'
         reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
         reloadCloudRecognition('extinction', 801, 'extinction', drawExtinction);
         reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervapor);
       }
+      elementChange(options.currentElement)
+    }
+
+    const elementChange = (code: string) => {
+      switch (code) {
+        case '水汽' :
+          reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor);
+          break;
+        case '光学厚度' :
+          reloadChartsRecognition('aod', drawAerosolCharts);
+          reloadChartsRecognition('icot', drawIceCloudsCharts);
+          reloadChartsRecognition('wcot', drawWaterCloud);
+          break;
+        case '消光系数' :
+          reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
+          break;
+        case '后向散射系数' :
+          reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter);
+          break;
+        case '气溶胶PM' :
+          reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
+          reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
+          break;
+        case '边界层高度' :
+          reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
+          break;
+        case '激光雷达比' :
+          reloadChartLidarratio('lidarratio', drawLidarRatioCharts);
+          break;
+        case '云气溶胶分类' :
+          reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol);
+          break;
+        case '云底高度' :
+          reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts);
+          break;
+        case '云顶高度' :
+          reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts);
+          break;
+        default:
+          throw new Error("无效的type类型");
+      }
     }
 
+
     const preprocessing = (type: string) => {
       switch (type) {
         case 'layertype':
@@ -508,7 +584,7 @@ export default {
         creates.pm2Point5Drawer.close();
       }
       let matrix = converCloudRecognition(201, result, 'pm2_5');
-      creates.pm2Point5Drawer = new HeatMapDrawer(800, 600, matrix, "pm2_5_chart",'μg/m³', 'PM2_5');
+      creates.pm2Point5Drawer = new HeatMapDrawer(800, 600, matrix, "pm2_5_chart",'μg/m³', 'PM2.5');
       creates.pm2Point5Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true));
       creates.pm2Point5Drawer.setColorChart(preparePmColors());
       creates.pm2Point5Drawer.draw();
@@ -533,6 +609,7 @@ export default {
       if (result.length != 24) return;
       const data = prepareChartData(result);
       creates.boundaryLayerHeight.updateSeries(0, data)
+      creates.boundaryLayerHeight.updateXAxis(options.chartTimeData, 0)
       options.loadingBoundaryLayerHeightStatus = false
     }
 
@@ -548,6 +625,7 @@ export default {
 
       const data = prepareChartData(result);
       creates.opticalThickness.updateSeries(0, data)
+      creates.opticalThickness.updateXAxis(options.chartTimeData, 0)
       options.loadingOpticalThicknessStatus = false
     }
 
@@ -555,6 +633,7 @@ export default {
       if (result.length != 24) return;
       const data = prepareChartData(result);
       creates.opticalThickness.updateSeries(1, data)
+      creates.opticalThickness.updateXAxis(options.chartTimeData, 0)
       options.loadingOpticalThicknessStatus = false
     }
 
@@ -562,6 +641,7 @@ export default {
       if (result.length != 24) return;
       const data = prepareChartData(result);
       creates.opticalThickness.updateSeries(2, data)
+      creates.opticalThickness.updateXAxis(options.chartTimeData, 0)
       options.loadingOpticalThicknessStatus = false
     }
 
@@ -570,6 +650,7 @@ export default {
       if (result.length != 24) return;
       const data = prepareChartData(result);
       creates.cloudTopHeight.updateSeries(0, data)
+      creates.cloudTopHeight.updateXAxis(options.chartTimeData, 0)
       options.loadingCloudTopHeightStatus = false
     }
 
@@ -577,13 +658,16 @@ export default {
       if (result.length != 24) return;
       const data = prepareChartData(result);
       creates.cloudsHeight.updateSeries(0, data)
+      creates.cloudsHeight.updateXAxis(options.chartTimeData, 0)
       options.loadingCloudsHeightStatus = false
     }
 
     const prepareChartData = (result) => {
       let prepareData = []
+      options.chartTimeData = [];
       result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1);
       result.forEach(item => {
+        options.chartTimeData.push(item.time)
         if (item.data == null) {
           let temp = [];
           for (let i = 0; i < 60; i++) {
@@ -737,7 +821,9 @@ export default {
     const reloadChartLidarratio = (element: string, callback: any) => {
       preprocessingCharts(element)
       let result = new CustomeArray(callback);
+
       let time = moment(options.date);
+
         reloadSingleChartsRecognition(time.format('M_D_H'), element, result);
     }
 
@@ -884,7 +970,9 @@ export default {
       options.currentRegion = region;
       setTimeout(() => {
         initEcharts(options.currentRegion)
-        reloadChangeData()
+
+        // reloadChangeData()
+        elementChange(options.currentElement)
       }, 500)
     }
 
@@ -994,31 +1082,30 @@ export default {
     //初始化时间轴
     const initTimeLine = () => {
       options.times = [];
-      options.currentTime = moment(options.date).format('HH');
-      let now = moment(options.date)
-      let hour = now.hour();
-      const remainder = hour % 12;
-      if (remainder > 0) {
-        now.hour(hour + (12 - remainder));
-      }
-      now.hour(now.hour() + 12);
+      options.currentTime = moment(options.date).format('YYYY-MM-DD HH');
+      let now = moment(options.date).add(1, 'h')
       for (let i = 0; i < 24; i++) {
         options.times.push({
-          day: now.format('MM/DD'),
           hour: now.add(-1, 'hour').format('HH'),
+          day: now.format('MM/DD'),
           date: now.format('YYYY-MM-DD HH'),
         })
       }
       options.times.reverse();
       options.index = options.times.length - 1;
+      // options.chartTimeData = ['0']
+      // options.times.forEach(i => {
+      //   options.chartTimeData.push(moment(i.date).format('MM-DD HH'))
+      // })
     }
 
     //时间选择
     const onTimeClick = (time, index) => {
-      options.currentTime = time.hour;
+      options.currentTime = time.date;
       options.date = moment(time.date).format('YYYY-MM-DD HH');
-      reloadChangeData()
+      elementChange(options.currentElement)
       options.index = index;
+      reloadChangeData()
       // cancelActive();
       // setTitle(moment(time.date, 'YYYY-MM-DD'));
       // activeImage();
@@ -1203,6 +1290,11 @@ export default {
       })
     }
 
+    const onElementClick = (element) => {
+      options.currentElement = element
+      elementChange(element)
+    }
+
     return {
       ...toRefs(options),
       onRegionClick,
@@ -1218,7 +1310,8 @@ export default {
       // onImageLoad,
       // onDownloadClick,
       // onSaveClick,
-      onTabClick
+      onTabClick,
+      onElementClick
     }
   }
 }
@@ -1248,47 +1341,48 @@ export default {
       margin: 0 auto;
 
       .special-picture {
-        :deep(.el-loading-mask) {
-          top: 64px !important;
-        }
+        //:deep(.el-loading-mask) {
+        //  top: 64px !important;
+        //}
       }
 
       .picture {
+        width: 100%;
         position: relative;
         margin-top: 30px;
+
         #watervapor_single_chart {
-          //transform: scale(1.0, 0.8) translateX(38%);
-          transform: scale(1.0, 0.8) translateX(539px);
+          transform: scale(1.0, 1.0) translateX(38%);
+          //transform: scale(1.0, 0.8) translateX(539px);
         }
 
         #extinction_optics_chart {
-          //transform: scale(0.56, 0.85) translateX(-32%);
-          transform: scale(0.56, 0.85) translateX(-17%);
+            //transform: scale(0.56, 0.85) translateX(-32%);
+          transform: scale(1, 1) translateX(35%);
+
         }
 
         #pm2_5_chart {
-          //transform: scale(0.7, 0.43) translate(-236px, 450px);
-          transform: scale(0.7, 0.43) translate(-170px, 450px);
+          transform: scale(0.8, 1) translateX(-50px);
         }
 
         #pm10_chart {
-          //transform: scale(0.7, 0.43) translate(-236px, -393px);
-          transform: scale(0.7, 0.43) translate(-170px, -393px);
+          transform: scale(0.8, 1) translateX(-50px);
         }
 
         #backscatter_chart {
-          //transform: scale(0.6, 0.85) translateX(-260px);
-          transform: scale(0.6, 0.85) translateX(-76px);
+          transform: scale(1, 1) translateX(35%);
+          //transform: scale(0.6, 0.85) translateX(-76px);
         }
 
         #cloud_sol_chart {
-          //transform: scale(0.6, 0.85) translate(-31%, -12px);
-          transform: scale(0.6, 0.85) translate(-12%, -12px);
+          transform: scale(1, 1) translateX(35%);
+          //transform: scale(0.6, 0.85) translate(-12%, -12px);
         }
 
         #cloud_recognition_chart, #extinction_chart, #watervapor_chart {
-          //transform: scale(0.6, 0.8) translateX(-260px);
-          transform: scale(0.6, 0.8) translateX(-131px);
+          transform: scale(0.6, 0.8) translateX(-260px);
+          //transform: scale(0.6, 0.8) translateX(-131px);
         }
 
         .title {

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

@@ -55,7 +55,8 @@ export class HighChartCreate {
             min: min,
             tickInterval: tickInterval,
             lineWidth: lineWidth,
-            opposite: opposite
+            opposite: opposite,
+
         })
     }
     public setYAxis(text: string, max: number, min: number, tickInterval: number, tickAmount: number, opposite: boolean = false, lineWidth: number = 1,  reversed: boolean = true){