|
|
@ -170,7 +170,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudbaseheight'"> |
|
|
|
<div class="picture"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<div id="cloudsHeight" |
|
|
|
style="width: 1000px;height: 450px" |
|
|
|
v-loading="loadingCloudsHeightStatus" |
|
|
@ -180,7 +180,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudtopheight'"> |
|
|
|
<div class="picture"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<div id="cloudTopHeight" |
|
|
|
style="width: 1000px;height: 450px" |
|
|
|
v-loading="loadingCloudTopHeightStatus" |
|
|
@ -191,9 +191,9 @@ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentTab === 'MWR'"> |
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement === 'layertype'"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title">云的识别</h2> |
|
|
|
<!-- <h2 class="title">云的识别</h2>--> |
|
|
|
<div v-loading="loadingCloudRecognitionStatus" |
|
|
|
style="width: 100%;" |
|
|
|
custom-class="loading" |
|
|
@ -201,8 +201,11 @@ |
|
|
|
<canvas id='cloud_recognition_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title">消光系数</h2> |
|
|
|
<!-- <h2 class="title">消光系数</h2>--> |
|
|
|
<div v-loading="loadingExtinctionStatus" |
|
|
|
style="width: 100%;" |
|
|
|
custom-class="loading" |
|
|
@ -210,8 +213,11 @@ |
|
|
|
<canvas id='extinction_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'"> |
|
|
|
<div class="picture special-picture"> |
|
|
|
<h2 class="title" style="left: 2.4rem;">水汽</h2> |
|
|
|
<!-- <h2 class="title" style="left: 2.4rem;">水汽</h2>--> |
|
|
|
<div v-loading="loadingWaterVaporStatus" |
|
|
|
style="width: 100%" |
|
|
|
element-loading-text="加载中"> |
|
|
@ -315,19 +321,18 @@ export default { |
|
|
|
chartTimeData: [], |
|
|
|
elementData: [ |
|
|
|
{ |
|
|
|
value: 'aod-icot-wcot', |
|
|
|
label: '光学厚度' |
|
|
|
value: 'layertype', |
|
|
|
label: '云的识别' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'extinctionOptics', |
|
|
|
value: 'extinction', |
|
|
|
label: '消光系数' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'backscatter', |
|
|
|
label: '后向散射系数' |
|
|
|
}, |
|
|
|
], |
|
|
|
currentElement: 'aod-icot-wcot' |
|
|
|
value: 'watervapor', |
|
|
|
label: '水汽' |
|
|
|
}], |
|
|
|
currentElement: 'layertype' |
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
@ -344,7 +349,7 @@ export default { |
|
|
|
creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight'); |
|
|
|
creates.boundaryLayerHeight.setChart(false,'line', 1000); |
|
|
|
creates.boundaryLayerHeight.setXAxisTypeDate(); |
|
|
|
creates.boundaryLayerHeight.setYAxis('边界层高度(米)'); |
|
|
|
creates.boundaryLayerHeight.setYAxis('边界层高度(m)'); |
|
|
|
creates.boundaryLayerHeight.setLegend(); |
|
|
|
creates.boundaryLayerHeight.setTooltip('高度: {point.y}'); |
|
|
|
creates.boundaryLayerHeight.setSeries('边界层高度') |
|
|
@ -357,7 +362,7 @@ export default { |
|
|
|
creates.cloudsHeight.setChart(false, 'scatter', 1000); |
|
|
|
// creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2); |
|
|
|
creates.cloudsHeight.setXAxisTypeDate(); |
|
|
|
creates.cloudsHeight.setYAxis('高度(米)'); |
|
|
|
creates.cloudsHeight.setYAxis('高度(m)'); |
|
|
|
creates.cloudsHeight.setLegend(); |
|
|
|
creates.cloudsHeight.setTooltip('高度: {point.y}'); |
|
|
|
creates.cloudsHeight.setSeries('云层高度') |
|
|
@ -369,7 +374,7 @@ export default { |
|
|
|
creates.cloudTopHeight.setChart(false, 'scatter', 1000); |
|
|
|
// creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2); |
|
|
|
creates.cloudTopHeight.setXAxisTypeDate(); |
|
|
|
creates.cloudTopHeight.setYAxis('高度(米)'); |
|
|
|
creates.cloudTopHeight.setYAxis('高度(m)'); |
|
|
|
creates.cloudTopHeight.setLegend(); |
|
|
|
creates.cloudTopHeight.setTooltip('高度: {point.y}'); |
|
|
|
creates.cloudTopHeight.setSeries('云顶高度') |
|
|
@ -381,7 +386,7 @@ export default { |
|
|
|
creates.LidarRatio = new HighChartCreate('LidarRatio'); |
|
|
|
creates.LidarRatio.setChart(false,'line', 1000); |
|
|
|
creates.LidarRatio.setSpecialXAxis('sr', 120, 0, 20); |
|
|
|
creates.LidarRatio.setYAxis('高度(米)'); |
|
|
|
creates.LidarRatio.setYAxis('高度(m)'); |
|
|
|
creates.LidarRatio.setLegend(); |
|
|
|
creates.LidarRatio.setTooltip('高度: {point.y}'); |
|
|
|
creates.LidarRatio.setSeries('激光雷达比') |
|
|
@ -412,21 +417,26 @@ export default { |
|
|
|
|
|
|
|
const reloadChangeData = () => { |
|
|
|
cancelRequest(); |
|
|
|
onMenuChange() |
|
|
|
elementChange(options.currentElement) |
|
|
|
} |
|
|
|
|
|
|
|
const onMenuChange = () => { |
|
|
|
options.elementData = [] |
|
|
|
if (options.currentTab === 'boundary-layer-height') { |
|
|
|
options.currentElement = 'singleWatervapor' |
|
|
|
options.elementData = [{ |
|
|
|
options.elementData = [ |
|
|
|
{ |
|
|
|
value: 'singleWatervapor', |
|
|
|
label: '水汽' |
|
|
|
}] |
|
|
|
|
|
|
|
|
|
|
|
} else if (options.currentTab === 'optical-property') { |
|
|
|
options.currentElement = 'aod-icot-wcot' |
|
|
|
options.elementData = [ |
|
|
|
{ |
|
|
|
value: 'aod-icot-wcot', |
|
|
|
label: '光学厚度' |
|
|
|
value: 'aod-icot-wcot', |
|
|
|
label: '光学厚度' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'extinctionOptics', |
|
|
@ -435,7 +445,7 @@ export default { |
|
|
|
{ |
|
|
|
value: 'backscatter', |
|
|
|
label: '后向散射系数' |
|
|
|
},] |
|
|
|
}] |
|
|
|
|
|
|
|
} else if (options.currentTab === 'aerosol-product') { |
|
|
|
options.currentElement = 'pm2_5' |
|
|
@ -451,9 +461,7 @@ export default { |
|
|
|
{ |
|
|
|
value: 'lidarratio', |
|
|
|
label: '激光雷达比' |
|
|
|
} |
|
|
|
] |
|
|
|
|
|
|
|
}] |
|
|
|
} else if (options.currentTab === 'BingoCloud') { |
|
|
|
options.currentElement = 'cloudSol' |
|
|
|
options.elementData = [ |
|
|
@ -468,16 +476,23 @@ export default { |
|
|
|
{ |
|
|
|
value: 'cloudtopheight', |
|
|
|
label: '云顶高度' |
|
|
|
} |
|
|
|
] |
|
|
|
|
|
|
|
}] |
|
|
|
} else if (options.currentTab === 'MWR') { |
|
|
|
options.currentElement = '质控对比' |
|
|
|
reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition); |
|
|
|
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinction); |
|
|
|
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervapor); |
|
|
|
options.currentElement = 'layertype' |
|
|
|
options.elementData = [ |
|
|
|
{ |
|
|
|
value: 'layertype', |
|
|
|
label: '云的识别' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'extinction', |
|
|
|
label: '消光系数' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 'watervapor', |
|
|
|
label: '水汽' |
|
|
|
}] |
|
|
|
} |
|
|
|
elementChange(options.currentElement) |
|
|
|
} |
|
|
|
|
|
|
|
const elementChange = (code: string) => { |
|
|
@ -515,6 +530,15 @@ export default { |
|
|
|
case 'cloudtopheight' : |
|
|
|
reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts); |
|
|
|
break; |
|
|
|
case 'layertype' : |
|
|
|
reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition); |
|
|
|
break; |
|
|
|
case 'extinction' : |
|
|
|
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinction); |
|
|
|
break; |
|
|
|
case 'watervapor' : |
|
|
|
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervapor); |
|
|
|
break; |
|
|
|
default: |
|
|
|
throw new Error("无效的type类型"); |
|
|
|
} |
|
|
@ -806,7 +830,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(101, result, 'watervapor'); |
|
|
|
creates.watervaporDrawer = new HeatMapDrawer(800, 600, matrix, "watervapor_chart",'g/kg'); |
|
|
|
creates.watervaporDrawer = new HeatMapDrawer(1200, 600, matrix, "watervapor_chart",'g/kg'); |
|
|
|
creates.watervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); |
|
|
|
creates.watervaporDrawer.setColorChart(prepareWatervaporColors()); |
|
|
|
creates.watervaporDrawer.draw(); |
|
|
@ -828,7 +852,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(801, result, 'extinction'); |
|
|
|
creates.extinctionDrawer = new HeatMapDrawer(800, 600, matrix, "extinction_chart", '/km/sr'); |
|
|
|
creates.extinctionDrawer = new HeatMapDrawer(1200, 600, matrix, "extinction_chart", 'km/sr'); |
|
|
|
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(); |
|
|
@ -882,7 +906,7 @@ export default { |
|
|
|
|
|
|
|
let matrix = converCloudRecognition(801, result, 'layertype'); |
|
|
|
|
|
|
|
creates.cloudRecognitionDrawer = new HeatMapDrawer(800, 600, matrix, "cloud_recognition_chart"); |
|
|
|
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()); |
|
|
|
creates.cloudRecognitionDrawer.draw(); |
|
|
@ -1261,9 +1285,6 @@ export default { |
|
|
|
|
|
|
|
const onChange = () => { |
|
|
|
initTimeLine(); |
|
|
|
if (options.currentTab === 'MWR') { |
|
|
|
reloadChangeData(); |
|
|
|
} |
|
|
|
elementChange(options.currentElement) |
|
|
|
// setTitle(moment(options.date)); |
|
|
|
// activeImage(); |
|
|
@ -1343,7 +1364,6 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
const onElementClick = (element) => { |
|
|
|
|
|
|
|
options.currentElement = element |
|
|
|
elementChange(element) |
|
|
|
} |
|
|
@ -1405,13 +1425,13 @@ export default { |
|
|
|
margin-top: 30px; |
|
|
|
|
|
|
|
#watervapor_single_chart { |
|
|
|
transform: scale(1.0, 1.0) translateX(13%); |
|
|
|
transform: scale(1.0, 1.0) translateX(9%); |
|
|
|
//transform: scale(1.0, 0.8) translateX(539px); |
|
|
|
} |
|
|
|
|
|
|
|
#extinction_optics_chart { |
|
|
|
//transform: scale(0.56, 0.85) translateX(-32%); |
|
|
|
transform: scale(1.0, 1) translateX(13%); |
|
|
|
transform: scale(1.0, 1) translateX(9%); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
@ -1424,17 +1444,18 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
#backscatter_chart { |
|
|
|
transform: scale(1.0, 1) translateX(13%); |
|
|
|
transform: scale(1.0, 1) translateX(9%); |
|
|
|
//transform: scale(0.6, 0.85) translateX(-76px); |
|
|
|
} |
|
|
|
|
|
|
|
#cloud_sol_chart { |
|
|
|
transform: scale(1.0, 1) translateX(13%); |
|
|
|
transform: scale(1.0, 1) translateX(9%); |
|
|
|
//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(1.0, 1) translateX(9%); |
|
|
|
//transform: scale(0.6, 0.8) translateX(-260px); |
|
|
|
//transform: scale(0.6, 0.8) translateX(-131px); |
|
|
|
} |
|
|
|
|
|
|
|