root
/
NanJingLamanRadarProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

commit

master
xuhuihui 3 years ago
parent
39183c85b7
commit
5d44d9dd04
4 changed files with 127 additions and 171 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      04.系统编码/Frontend/.idea/inspectionProfiles/Project_Default.xml
  2. BIN
      04.系统编码/Frontend/public/images/nodata.png
  3. 275
      04.系统编码/Frontend/src/components/RamanLidar.vue
  4. 20
      04.系统编码/Frontend/src/model/high-chart-create.ts

3
04.系统编码/Frontend/.idea/inspectionProfiles/Project_Default.xml
View File

@ -4,9 +4,10 @@
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="2">
<list size="3">
<item index="0" class="java.lang.String" itemvalue="element-loading-background" />
<item index="1" class="java.lang.String" itemvalue="element-loading-text" />
<item index="2" class="java.lang.String" itemvalue="custom-class" />
</list>
</value>
</option>

BIN
04.系统编码/Frontend/public/images/nodata.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

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

@ -35,9 +35,9 @@
:class="{'active': currentRegion === 'pukou'}">浦口</span></el-col>
</el-row>
</div>
<div class="menu-item">
<h2 class="tip">要素选择</h2>
</div>
<!-- <div class="menu-item">-->
<!-- <h2 class="tip">要素选择</h2>-->
<!-- </div>-->
</div>
<div class="container panel">
@ -71,10 +71,17 @@
<div class="picture-container raman-picture-container" v-show="currentTab === 'optical-property'">
<div class="picture">
<h2 class="title">激光雷达比</h2>
<div id="LidarRatio" style="width: 650px;height: 450px"></div>
<!-- <div v-loading="loadingLidarRatioStatus"-->
<!-- style="width: 100%;"-->
<!-- custom-class="loading"-->
<!-- element-loading-text="加载中">-->
<div id="LidarRatio" style="width: 650px;height: 450px"></div>
<!-- </div>-->
</div>
<div class="picture">
<h2 class="title">光学厚度</h2>
<div style="width: 45%; padding-left: 16px"><img src="/images/nodata.png" ></div>
</div>
<div class="picture">
<h2 class="title">消光系数</h2>
@ -89,7 +96,12 @@
<div class="picture-container raman-picture-container" v-show="currentTab === 'aerosol-product'">
<div class="picture">
<h2 class="title">边界层高度</h2>
<!-- <div v-loading="loadingBoundaryLayerHeightStatus"-->
<!-- style="width: 100%;"-->
<!-- custom-class="loading"-->
<!-- element-loading-text="加载中">-->
<div id="BoundaryLayerHeight" style="width: 650px;height: 450px"></div>
<!-- </div>-->
</div>
<div class="picture">
<h2 class="title">气溶胶PM</h2>
@ -122,11 +134,19 @@
</div>
<div class="picture">
<h2 class="title">云层高度</h2>
<!-- <div v-loading="loadingCloudsHeightStatus"-->
<!-- style="width: 100%;"-->
<!-- element-loading-text="加载中">-->
<div id="cloudsHeight" style="width: 650px;height: 450px"></div>
<!-- </div>-->
</div>
<div class="picture">
<h2 class="title">云顶高度</h2>
<!-- <div v-loading="loadingCloudTopHeightStatus"-->
<!-- style="width: 100%;"-->
<!-- element-loading-text="加载中">-->
<div id="cloudTopHeight" style="width: 650px;height: 450px"></div>
<!-- </div>-->
</div>
</div>
@ -239,7 +259,11 @@ export default {
loadingCloudRecognitionStatus: false,
loadingExtinctionStatus: false,
loadingWaterVaporStatus: false,
loadingBackscatterStatus: false
loadingBackscatterStatus: false,
loadingLidarRatioStatus: true,
loadingBoundaryLayerHeightStatus: false,
loadingCloudsHeightStatus: false,
loadingCloudTopHeightStatus: false
})
onMounted(() => {
@ -254,7 +278,7 @@ export default {
const boundaryLayerHeightInit = () => {
creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
creates.boundaryLayerHeight.setChart();
creates.boundaryLayerHeight.setXAxis('时间(小时)', false);
creates.boundaryLayerHeight.setSpecialXAxis('时间(小时)', 24,0,2);
creates.boundaryLayerHeight.setYAxis('边界层高度(米)', 3000, 0, 500, 7);
creates.boundaryLayerHeight.setLegend();
creates.boundaryLayerHeight.setTooltip('{point.category}: {point.y}(m)');
@ -266,7 +290,7 @@ export default {
const cloudsHeightInit = () => {
creates.cloudsHeight = new HighChartCreate('cloudsHeight');
creates.cloudsHeight.setChart(false,'scatter');
creates.cloudsHeight.setXAxis('时间(分钟)', false);
creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24,0,2);
creates.cloudsHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
creates.cloudsHeight.setLegend();
creates.cloudsHeight.setTooltip('{point.category}: {point.y}(m)');
@ -277,7 +301,7 @@ export default {
const cloudTopHeightInit = () => {
creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
creates.cloudTopHeight.setChart(false,'scatter');
creates.cloudTopHeight.setXAxis('时间(分钟)', false);
creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24,0,2);
creates.cloudTopHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
creates.cloudTopHeight.setLegend();
creates.cloudTopHeight.setTooltip('{point.category}: {point.y}(m)');
@ -289,8 +313,8 @@ export default {
const LidarRatioInit = () => {
creates.LidarRatio = new HighChartCreate('LidarRatio');
creates.LidarRatio.setChart();
creates.LidarRatio.setXAxis('时间(分钟)', false);
creates.LidarRatio.setYAxis('边界层高度(米)', 3000, 0, 500, 7);
creates.LidarRatio.setSpecialXAxis('时间(小时)', 24,0,2);
creates.LidarRatio.setYAxis('高度(米)', 500, 0, 50, 7);
creates.LidarRatio.setLegend();
creates.LidarRatio.setTooltip('{point.category}: {point.y}(m)');
creates.LidarRatio.setSeries('激光雷达比')
@ -308,29 +332,24 @@ export default {
const reloadChangeData = () => {
cancelRequest();
if (options.currentTab === 'boundary-layer-height') {
// reloadCloudRecognition(101, 'watervapor', drawSingleWatervapor);
reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor);
} else if (options.currentTab === 'optical-property') {
// extinctionApi()
// LidarRatioApi()
reloadChartsRecognition('lidarratio', drawLidarRatioCharts)
reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
} else if (options.currentTab === 'aerosol-product') {
// boundaryLayerHeightDate()
reloadChartsRecognition('pblh', drawCharts)
reloadChartsRecognition('pblh', drawBoundaryLayerCharts)
reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
reloadCloudRecognition('backscatter', 201, 'backscatter', drawBackscatter)
// boundaryCharacteristicApi()
//aerosolApi()
} else if (options.currentTab === 'BingoCloud') {
//layerTypeApi()
// cloudsHeightApi()
// cloudTopHeightApi()
reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts)
reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts)
reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol);
} else if (options.currentTab === 'MWR') {
//waterVapourApi()
// reloadCloudRecognition(801, 'layertype', drawCloudRecognition);
// reloadCloudRecognition(801, 'extinction', drawExtinction);
// reloadCloudRecognition(101, 'watervapor', drawWatervapor);
reloadCloudRecognition('layertype',801, 'layertype', drawCloudRecognition);
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinction);
reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervapor);
}
}
@ -377,6 +396,26 @@ export default {
}
}
const preprocessingCharts = (type: string) => {
switch (type) {
case 'lidarratio':
options.loadingLidarRatioStatus = true;
break;
case 'pblh':
options.loadingBoundaryLayerHeightStatus = true;
break;
case 'cloudbaseheight':
options.loadingCloudsHeightStatus = true;
break;
case 'cloudtopheight':
options.loadingCloudTopHeightStatus = true;
break;
default:
throw new Error("无效的type类型");
}
}
const clearHeatMapDrawer = (drawer: HeatMapDrawer) => {
if (drawer == null) return;
drawer.close();
@ -440,24 +479,57 @@ export default {
creates.pm10Drawer.draw();
}
const drawCharts = (result: CustomeArray<any>) => {
const drawBoundaryLayerCharts = (result: CustomeArray<any>) => {
if (result.length != 24) return;
const data = prepareChartData(result);
creates.boundaryLayerHeight.updateSeries(0, data)
options.loadingBoundaryLayerHeightStatus = false
}
const drawLidarRatioCharts = (result: CustomeArray<any>) => {
if (result.length != 24) return;
const data = prepareChartData(result);
creates.LidarRatio.updateSeries(0, data)
options.loadingLidarRatioStatus = false
}
const drawCloudTopHeightCharts = (result: CustomeArray<any>) => {
if (result.length != 24) return;
const data = prepareChartData(result);
creates.cloudTopHeight.updateSeries(0, data)
options.loadingCloudTopHeightStatus = false
}
const drawCloudsHeightCharts = (result: CustomeArray<any>) => {
if (result.length != 24) return;
prepareChartData(result)
const data = prepareChartData(result);
creates.cloudsHeight.updateSeries(0, data)
options.loadingCloudsHeightStatus = false
}
const prepareChartData = (result) => {
options.boundaryLayerHeightList = []
let prepareData = []
result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1);
result.forEach(item => {
if (item.data )
options.boundaryLayerHeightList.push(item.data)
if (item.data == null ) {
if (item.data == null) {
let temp = [];
for (let i = 0 ; i < 60; i++) {
temp.push(NaN);
}
item.data = [temp];
}
for (let i in item.data[0]) {
prepareData.push(item.data[0][i])
}
})
creates.boundaryLayerHeight.updateSeries(0, options.boundaryLayerHeightList)
let interval = ( 24 / prepareData.length );
let data = [];
for (let i = 0 , len = prepareData.length ; i < len ; i++) {
data.push([parseFloat((interval * i).toFixed(2)), prepareData[i]])
}
return data;
}
const preparePmColors = () => {
return new ColorChart(['#F6EF20','#FEC338', '#C5C22A', '#72CD64', '#31C69F', '#01B8CA', '#259BE8', '#327CFC', '#4853F4', '#422EC1'],
[100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0], true, true
@ -563,6 +635,7 @@ export default {
}
//
const reloadChartsRecognition = (element: string, callback: any) => {
preprocessingCharts(element)
let result = new CustomeArray(callback);
let time = moment(options.date);
for(let index = 0; index < 24; index ++){
@ -573,7 +646,6 @@ export default {
const drawCloudRecognition = (result: CustomeArray<any>) => {
if (result.length != 24) return;
options.loadingCloudRecognitionStatus = false;
if (creates.cloudRecognitionDrawer != null){
creates.cloudRecognitionDrawer.close();
@ -960,141 +1032,6 @@ export default {
}
}
//边界层高度
const boundaryLayerHeightDate = () => {
options.boundaryLayerHeightList = []
const time = moment(options.date).format('M_D_2')
const params = prepareApiParams(time, 'pblh')
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
if (response.state != 0) {
error()
return;
}
if (response.data.length === 0) {
verify()
return;
}
for (let i in JSON.parse(response.data)) {
for (let val in JSON.parse(response.data)[i]) {
options.boundaryLayerHeightList.push(JSON.parse(response.data)[i][val])
}
}
creates.boundaryLayerHeight.updateSeries(0, options.boundaryLayerHeightList)
})
}
//边界层特征值
const boundaryCharacteristicApi = () => {
const time = moment(options.date).format('MM_DD')
const params = prepareApiParams(time, 'pblhfeatures')
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response) => {
console.log(response)
})
}
//光学特性
//激光雷达比
const LidarRatioApi = () => {
options.LidarRatioList = []
const time = moment(options.date).format('MM_DD')
const params = prepareApiParams(time, 'lidarratio')
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
if (response.length <= 0) {
verify()
return;
}
for (let i in response[18]) {
if (response[18][i] === null) {
response[18][i] = 0
}
options.LidarRatioList.push(response[18][i])
}
creates.LidarRatio.updateSeries(0, options.LidarRatioList)
})
}
//消光系数
const extinctionApi = () => {
const time = moment(options.date).format('MM_DD')
const params = prepareApiParams(time ,'extinction')
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
console.log(response)
})
}
//水汽
const waterVapourApi = () => {
const time = moment(options.date).format('MM_DD')
const params = prepareApiParams(time,'watervapor')
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
console.log(response,'水汽')
})
}
//气溶胶PM
//粗颗粒
const aerosolApi = () => {
const time = moment(options.date).format('MM_DD')
const params = prepareApiParams(time,'pm10')
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
console.log(response,'气溶胶PM')
})
}
//云气溶胶分类
const layerTypeApi = () => {
const time = moment(options.date).format('MM_DD')
const params = prepareApiParams(time,'layertype')
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
console.log(response,'云气溶胶分类')
})
}
//云层高度
const cloudsHeightApi = () => {
options.cloudsHeightList = []
const time = moment(options.date).format('MM_DD')
const params = prepareApiParams(time,'cloudbaseheight')
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
if (response.length <= 0) {
verify()
return;
}
for (let i in response) {
for (let val in response[i]) {
if (response[i][val] === null) {
response[i][val] = 0
}
options.cloudsHeightList.push([parseInt(i),response[i][val]])
}
}
creates.cloudsHeight.updateSeries(0, options.cloudsHeightList)
})
}
//云顶高度
const cloudTopHeightApi = () => {
options.cloudTopHeightList = []
const time = moment(options.date).format('MM_DD')
const params = prepareApiParams(time,'cloudtopheight')
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
if (response.length <= 0) {
verify()
return;
}
for (let i in response) {
for (let val in response[i]) {
if (response[i][val] === null) {
response[i][val] = 0
}
options.cloudTopHeightList.push([parseInt(i),response[i][val]])
}
}
creates.cloudTopHeight.updateSeries(0, options.cloudTopHeightList)
})
}
const prepareApiParams = (time, variableName) => {
return {

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

@ -40,7 +40,24 @@ export class HighChartCreate {
showFirstLabel: true,
});
}
public setSpecialXAxis(text: string, max: number, min: number, tickInterval: number, opposite: boolean = false, lineWidth: number = 1, reversed: boolean = true) {
this.xAxis.push({
title: {
enabled: true,
text: text,
style: {
color: '#000000',
fontSize: '14px',
fontFamily: 'Verdana'
}
},
max: max,
min: min,
tickInterval: tickInterval,
lineWidth: lineWidth,
opposite: opposite
})
}
public setYAxis(text: string, max: number, min: number, tickInterval: number, tickAmount: number, opposite: boolean = false, lineWidth: number = 1, reversed: boolean = true){
this.yAxis.push({
title: {
@ -128,5 +145,6 @@ export class HighChartCreate {
public updateXAxis(categories: Array<any>, index: number = 0){
this.highChart.xAxis[index].setCategories(categories);
}
}

Write Preview
Loading…
Cancel
Save