+
-
-
边界层高度
-
+
+
-
激光雷达比
@@ -138,9 +158,11 @@
-
-
@@ -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){
