|
|
@ -59,8 +59,12 @@ |
|
|
|
<div class="picture-view"> |
|
|
|
<div class="picture-container raman-picture-container" v-show="currentTab === 'boundary-layer-height'"> |
|
|
|
<div class="picture"> |
|
|
|
<h2>水汽</h2> |
|
|
|
<canvas id='watervapor_single_chart' style="width: 500px;"></canvas> |
|
|
|
<h2 class="title-watervapor">水汽</h2> |
|
|
|
<div v-loading="loadingWaterVaporSingleStatus" |
|
|
|
style="width: 100%;" |
|
|
|
element-loading-text="加载中"> |
|
|
|
<canvas id='watervapor_single_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
@ -74,7 +78,11 @@ |
|
|
|
</div> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">消光系数</h2> |
|
|
|
<canvas id='extinction_optics_chart' style="width: 500px;"></canvas> |
|
|
|
<div v-loading="loadingExtinctionOpticsStatus" |
|
|
|
style="width: 100%;" |
|
|
|
element-loading-text="加载中"> |
|
|
|
<canvas id='extinction_optics_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
@ -85,8 +93,12 @@ |
|
|
|
</div> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">气溶胶PM</h2> |
|
|
|
<canvas id='pm2_5_chart' style="width: 500px;"></canvas> |
|
|
|
<canvas id='pm10_chart' style="width: 500px;"></canvas> |
|
|
|
<div v-loading="loadingPmStatus" |
|
|
|
style="width: 100%;" |
|
|
|
element-loading-text="加载中"> |
|
|
|
<canvas id='pm2_5_chart'></canvas> |
|
|
|
<canvas id='pm10_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="picture"> |
|
|
@ -97,7 +109,11 @@ |
|
|
|
<div class="picture-container raman-picture-container" v-show="currentTab === 'BingoCloud'"> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">云气溶胶分类</h2> |
|
|
|
<canvas id='cloud_sol_chart' style="width: 500px;"></canvas> |
|
|
|
<div v-loading="loadingCloudSolStatus" |
|
|
|
style="width: 100%;" |
|
|
|
element-loading-text="加载中"> |
|
|
|
<canvas id='cloud_sol_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">云层高度</h2> |
|
|
@ -112,15 +128,27 @@ |
|
|
|
<div class="picture-container raman-picture-container" v-show="currentTab === 'MWR'"> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">云的识别</h2> |
|
|
|
<canvas id='cloud_recognition_chart' style="width: 500px;"></canvas> |
|
|
|
<div v-loading="loadingCloudRecognitionStatus" |
|
|
|
style="width: 100%;" |
|
|
|
element-loading-text="加载中"> |
|
|
|
<canvas id='cloud_recognition_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">消光系数</h2> |
|
|
|
<canvas id='extinction_chart' style="width: 500px;"></canvas> |
|
|
|
<div v-loading="loadingExtinctionStatus" |
|
|
|
style="width: 100%;" |
|
|
|
element-loading-text="加载中"> |
|
|
|
<canvas id='extinction_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="picture"> |
|
|
|
<h2 class="title">水汽</h2> |
|
|
|
<canvas id='watervapor_chart' style="width: 500px;"></canvas> |
|
|
|
<h2 class="title" style="left: 2.4rem;">水汽</h2> |
|
|
|
<div v-loading="loadingWaterVaporStatus" |
|
|
|
style="width: 100%;" |
|
|
|
element-loading-text="加载中"> |
|
|
|
<canvas id='watervapor_chart'></canvas> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -175,6 +203,7 @@ export default { |
|
|
|
pm10Drawer: null |
|
|
|
} |
|
|
|
let options = reactive({ |
|
|
|
|
|
|
|
currentTab: 'MWR', |
|
|
|
currentRegion: 'jiangning', |
|
|
|
currentElement: 'PBLH', |
|
|
@ -195,7 +224,14 @@ export default { |
|
|
|
boundaryLayerHeightList: [], |
|
|
|
LidarRatioList: [], |
|
|
|
cloudsHeightList: [], |
|
|
|
cloudTopHeightList: [] |
|
|
|
cloudTopHeightList: [], |
|
|
|
loadingWaterVaporSingleStatus: false, |
|
|
|
loadingExtinctionOpticsStatus: false, |
|
|
|
loadingPmStatus: false, |
|
|
|
loadingCloudSolStatus: false, |
|
|
|
loadingCloudRecognitionStatus: false, |
|
|
|
loadingExtinctionStatus: false, |
|
|
|
loadingWaterVaporStatus: false, |
|
|
|
}) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
@ -972,16 +1008,39 @@ export default { |
|
|
|
.raman-picture-container { |
|
|
|
width: calc(~"100% - 1rem"); |
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
.picture { |
|
|
|
position: relative; |
|
|
|
margin-top: 30px; |
|
|
|
|
|
|
|
.title-watervapor { |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
margin-left: -10px; |
|
|
|
top: 0px; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
#watervapor_single_chart { |
|
|
|
transform: scale(0.8,0.4) translateX(50%); |
|
|
|
} |
|
|
|
#extinction_optics_chart { |
|
|
|
transform: scale(0.5,0.8) translateX(-40%); |
|
|
|
} |
|
|
|
#pm2_5_chart { |
|
|
|
transform: scale(0.5,0.4) translate(-311px, 444px); |
|
|
|
} |
|
|
|
#pm10_chart { |
|
|
|
transform: scale(0.5,0.4) translate(-314px, -475px); |
|
|
|
} |
|
|
|
#cloud_sol_chart { |
|
|
|
transform: scale(0.6,0.85) translate(-31%, -12px); |
|
|
|
} |
|
|
|
#cloud_recognition_chart, #extinction_chart, #watervapor_chart { |
|
|
|
transform: scale(0.6,0.8) translateX(-260px); |
|
|
|
} |
|
|
|
.title { |
|
|
|
width: 100%; |
|
|
|
font-size: 0.22rem; |
|
|
|
position: absolute; |
|
|
|
left: 3.10rem; |
|
|
|
left: 2.10rem; |
|
|
|
top: 0.30rem; |
|
|
|
z-index: 100; |
|
|
|
} |
|
|
|