diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue index e4cbeee..6b3af66 100644 --- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue +++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue @@ -49,6 +49,15 @@ @click="onElementClick('one-hour', -24, 60)">1小时 + + + + + + + + +
@@ -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'); diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue index ee15e38..455d4fe 100644 --- a/04.系统编码/Frontend/src/components/RamanLidar.vue +++ b/04.系统编码/Frontend/src/components/RamanLidar.vue @@ -39,9 +39,15 @@ :class="{'active': currentRegion === 'pk'}">浦口
- - - + +
@@ -49,7 +55,7 @@
+ :class="{'active': currentTime === time.date, 'first-hour': time.hour === '00'}"> {{ time.day }} {{ time.hour }}
@@ -63,42 +69,44 @@
+
-
+ +
-

水汽

-
+
-

光学厚度

+
+
-

消光系数

+
+
-

后向散射系数

-
+
-

气溶胶PM

+ +
+
+
+
+
-
-

边界层高度

-
+
+
+
+
+
-

激光雷达比

@@ -138,9 +158,11 @@
-
+ + + +
-

云气溶胶分类

+
+ +
-

云层高度

-
+
+
+
-

- 云顶高度

-
+
+ +

云的识别

@@ -191,7 +223,6 @@
-
@@ -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 { diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts index 7b953a9..be69cb2 100644 --- a/04.系统编码/Frontend/src/model/high-chart-create.ts +++ b/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){