diff --git a/04.系统编码/Frontend/.idea/inspectionProfiles/Project_Default.xml b/04.系统编码/Frontend/.idea/inspectionProfiles/Project_Default.xml index 8a9e271..ecdcb3a 100644 --- a/04.系统编码/Frontend/.idea/inspectionProfiles/Project_Default.xml +++ b/04.系统编码/Frontend/.idea/inspectionProfiles/Project_Default.xml @@ -4,9 +4,10 @@ diff --git a/04.系统编码/Frontend/public/images/nodata.png b/04.系统编码/Frontend/public/images/nodata.png new file mode 100644 index 0000000..d9f304c Binary files /dev/null and b/04.系统编码/Frontend/public/images/nodata.png differ diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue index ecfe98b..a4d3cab 100644 --- a/04.系统编码/Frontend/src/components/RamanLidar.vue +++ b/04.系统编码/Frontend/src/components/RamanLidar.vue @@ -35,9 +35,9 @@ :class="{'active': currentRegion === 'pukou'}">浦口 -
-

要素选择

-
+ + +
@@ -71,10 +71,17 @@

激光雷达比

-
+ + + + +
+ +

光学厚度

+

消光系数

@@ -89,7 +96,12 @@

边界层高度

+ + + +
+

气溶胶PM

@@ -122,11 +134,19 @@

云层高度

+ + +
+

云顶高度

+ + +
+
@@ -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) => { + const drawBoundaryLayerCharts = (result: CustomeArray) => { + if (result.length != 24) return; + const data = prepareChartData(result); + creates.boundaryLayerHeight.updateSeries(0, data) + options.loadingBoundaryLayerHeightStatus = false + } + + const drawLidarRatioCharts = (result: CustomeArray) => { + if (result.length != 24) return; + const data = prepareChartData(result); + creates.LidarRatio.updateSeries(0, data) + options.loadingLidarRatioStatus = false + } + + const drawCloudTopHeightCharts = (result: CustomeArray) => { + if (result.length != 24) return; + const data = prepareChartData(result); + creates.cloudTopHeight.updateSeries(0, data) + options.loadingCloudTopHeightStatus = false + } + + const drawCloudsHeightCharts = (result: CustomeArray) => { 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) => { 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 { diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts index 9bac4b5..4993bf6 100644 --- a/04.系统编码/Frontend/src/model/high-chart-create.ts +++ b/04.系统编码/Frontend/src/model/high-chart-create.ts @@ -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, index: number = 0){ this.highChart.xAxis[index].setCategories(categories); } + }