Browse Source

commit

master
xuhuihui 3 years ago
parent
commit
42f276fcf9
  1. 92
      04.系统编码/Frontend/src/components/RamanLidar.vue
  2. 9
      04.系统编码/Frontend/src/model/heat-map-drawer.ts
  3. 22
      04.系统编码/Frontend/src/uilts/box-drawer.ts

92
04.系统编码/Frontend/src/components/RamanLidar.vue

@ -80,7 +80,7 @@
<div class="picture"> <div class="picture">
<h2 class="title">光学厚度</h2> <h2 class="title">光学厚度</h2>
<div id="opticalThickness" <div id="opticalThickness"
style="width: 650px;height: 450px" style="width: 500px;height: 450px"
v-loading="loadingOpticalThicknessStatus" v-loading="loadingOpticalThicknessStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"> element-loading-text="加载中">
@ -123,14 +123,14 @@
<div class="picture "> <div class="picture ">
<h2 class="title">边界层高度</h2> <h2 class="title">边界层高度</h2>
<div id="BoundaryLayerHeight" style="width: 650px;height: 450px" <div id="BoundaryLayerHeight" style="width: 500px;height: 450px"
v-loading="loadingBoundaryLayerHeightStatus" custom-class="loading" element-loading-text="加载中"></div> v-loading="loadingBoundaryLayerHeightStatus" custom-class="loading" element-loading-text="加载中"></div>
</div> </div>
<div class="picture"> <div class="picture">
<h2 class="title">激光雷达比</h2> <h2 class="title">激光雷达比</h2>
<div id="LidarRatio" <div id="LidarRatio"
style="width: 650px;height: 450px" style="width: 500px;height: 450px"
v-loading="loadingLidarRatioStatus" v-loading="loadingLidarRatioStatus"
custom-class="loading" custom-class="loading"
element-loading-text="加载中"> element-loading-text="加载中">
@ -150,14 +150,14 @@
</div> </div>
<div class="picture"> <div class="picture">
<h2 class="title">云层高度</h2> <h2 class="title">云层高度</h2>
<div id="cloudsHeight" style="width: 650px;height: 450px" v-loading="loadingCloudsHeightStatus" <div id="cloudsHeight" style="width: 500px;height: 450px" v-loading="loadingCloudsHeightStatus"
custom-class="loading" element-loading-text="加载中"></div> custom-class="loading" element-loading-text="加载中"></div>
</div> </div>
<div class="picture"> <div class="picture">
<h2 class="title"> <h2 class="title">
云顶高度</h2> 云顶高度</h2>
<div id="cloudTopHeight" style="width: 650px;height: 450px" v-loading="loadingCloudTopHeightStatus" <div id="cloudTopHeight" style="width: 500px;height: 450px" v-loading="loadingCloudTopHeightStatus"
custom-class="loading" element-loading-text="加载中"></div> custom-class="loading" element-loading-text="加载中"></div>
</div> </div>
</div> </div>
@ -247,12 +247,11 @@ export default {
} }
let options = reactive({ let options = reactive({
currentTab: 'MWR', currentTab: 'MWR',
currentRegion: 'pk', currentRegion: 'jn',
// currentRegion: 'jn',
currentElement: 'PBLH', currentElement: 'PBLH',
currentType: '边界层高度', currentType: '边界层高度',
date: moment('2022-04-01 12:00:00').format('YYYY-MM-DD HH:mm:ss'), // date: moment('2022-04-01 12:00:00').format('YYYY-MM-DD HH:mm:ss'),
// date: moment().format('YYYY-MM-DD HH:mm:ss'), date: moment().format('YYYY-MM-DD HH:mm:ss'),
times: [], times: [],
currentTime: null, currentTime: null,
downloadImgUrl: '/images/default-picture.png', downloadImgUrl: '/images/default-picture.png',
@ -339,9 +338,7 @@ export default {
creates.LidarRatio.setYAxis('高度(米)', 3000, 0, 500, 7); creates.LidarRatio.setYAxis('高度(米)', 3000, 0, 500, 7);
creates.LidarRatio.setLegend(); creates.LidarRatio.setLegend();
creates.LidarRatio.setTooltip('高度: {point.y}'); creates.LidarRatio.setTooltip('高度: {point.y}');
for (let i = 0; i < 24; i++) { creates.LidarRatio.setSeries('激光雷达比')
creates.LidarRatio.setSeries(`${i}`, 0, null, null, '#BDBDBD')
}
creates.LidarRatio.init(); creates.LidarRatio.init();
} }
@ -362,10 +359,12 @@ export default {
const onTabClick = (name) => { const onTabClick = (name) => {
// initTimeLine() // initTimeLine()
options.currentTab = name; options.currentTab = name;
setTimeout(() => { // setTimeout(() => {
initEcharts(name) // initEcharts(name)
reloadChangeData() // reloadChangeData()
}, 500) // }, 500)
initEcharts(name)
reloadChangeData()
} }
const reloadChangeData = () => { const reloadChangeData = () => {
@ -379,11 +378,10 @@ export default {
reloadChartsRecognition('icot', drawIceCloudsCharts); reloadChartsRecognition('icot', drawIceCloudsCharts);
reloadChartsRecognition('wcot', drawWaterCloud); reloadChartsRecognition('wcot', drawWaterCloud);
} else if (options.currentTab === 'aerosol-product') { } else if (options.currentTab === 'aerosol-product') {
// reloadChartsRecognition('lidarratio', drawLidarRatioCharts);
reloadChartLidarratio('lidarratio', drawLidarRatioCharts) reloadChartLidarratio('lidarratio', drawLidarRatioCharts)
// reloadChartsRecognition('pblh', drawBoundaryLayerCharts); reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
// reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5); reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
// reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10); reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
} else if (options.currentTab === 'BingoCloud') { } else if (options.currentTab === 'BingoCloud') {
reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts); reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts);
reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts); reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts);
@ -539,11 +537,9 @@ export default {
} }
const drawLidarRatioCharts = (result: CustomeArray<any>) => { const drawLidarRatioCharts = (result: CustomeArray<any>) => {
// if (result.length != 24) return; if (result.length <= 0) return;
// const data = LidarRatioPrepareChartData(result); const data = LidarRatioPrepareChartData(result);
// for (let i = 0; i < 24; i++) { creates.LidarRatio.updateSeries(0, data);
// creates.LidarRatio.updateSeries(i, data[i]);
// }
options.loadingLidarRatioStatus = false options.loadingLidarRatioStatus = false
} }
@ -609,25 +605,14 @@ export default {
const LidarRatioPrepareChartData = (result) => { const LidarRatioPrepareChartData = (result) => {
let prepareData = [] let prepareData = []
result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1); if (result[0].data == null) return;
result.forEach(item => { result[0].data.forEach((item) => {
if (item.data == null) { item.forEach((item, index) => {
let temp = []; if (item == null) item = NaN
for (let i = 0; i < 201; i++) { prepareData.push([item, index * 15])
temp.push([NaN])
}
item.data = temp
}
let newData = item.data.slice(0,201)
newData.forEach((item, index) => {
prepareData.push([item[0], index * 15])
}) })
}) })
let results = []; return prepareData;
for (let i = 0; i < prepareData.length; i+= 201) {
results.push(prepareData.slice(i, i + 201))
}
return results;
} }
const preparePmColors = () => { const preparePmColors = () => {
@ -664,6 +649,7 @@ export default {
creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors()); creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors());
creates.opticsExtinctionDrawer.draw(); creates.opticsExtinctionDrawer.draw();
} }
const drawSingleWatervapor = (result: CustomeArray<any>) => { const drawSingleWatervapor = (result: CustomeArray<any>) => {
@ -751,8 +737,8 @@ export default {
const reloadChartLidarratio = (element: string, callback: any) => { const reloadChartLidarratio = (element: string, callback: any) => {
preprocessingCharts(element) preprocessingCharts(element)
let result = new CustomeArray(callback); let result = new CustomeArray(callback);
let time = moment(options.date) let time = moment(options.date);
reloadSingleChartsRecognition(time.format('M_D_H'), element, result); reloadSingleChartsRecognition(time.format('M_D_H'), element, result);
} }
const drawCloudRecognition = (result: CustomeArray<any>) => { const drawCloudRecognition = (result: CustomeArray<any>) => {
@ -795,8 +781,19 @@ export default {
return; return;
} }
const interval = Math.round(11 / r.data[0].length); const interval = Math.round(11 / r.data[0].length);
for (let h = 0, len = r.data.length; h < len; h++) { for (let h = 0, len = capacity; h < len; h++) {
let tempIndex = parseInt(index + ""); let tempIndex = parseInt(index + "");
if (r.data[h] == null){
for(let i = 0; i < 11; i++){
tempIndex++;
if (matrix[tempIndex] == null) {
matrix[tempIndex] = new Array<Box>(capacity);
}
matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, NaN, h * 15, time, "米");
}
continue;
}
r.data[h] = r.data[h].slice(0, 11); r.data[h] = r.data[h].slice(0, 11);
for (let i = 0, len = r.data[h].length; i < len; i++) { for (let i = 0, len = r.data[h].length; i < len; i++) {
for (let _i = 0; _i < interval; _i++) { for (let _i = 0; _i < interval; _i++) {
@ -820,6 +817,7 @@ export default {
return matrix; return matrix;
} }
const reloadSingleCloudRecognition = (capacity: number, time: string, elementCode, result: CustomeArray<any>) => { const reloadSingleCloudRecognition = (capacity: number, time: string, elementCode, result: CustomeArray<any>) => {
const params = prepareApiParams(time, elementCode) const params = prepareApiParams(time, elementCode)
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => { get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
@ -832,13 +830,15 @@ export default {
}).catch(error => { }).catch(error => {
setCloudRecognitionResult(capacity, time, error.message, null, result); setCloudRecognitionResult(capacity, time, error.message, null, result);
}) })
// .catch(error => {
// setCloudRecognitionResult(capacity, time, error.message, null, result);
// })
} }
// //
const reloadSingleChartsRecognition = (time: string, elementCode, result: CustomeArray<any>) => { const reloadSingleChartsRecognition = (time: string, elementCode, result: CustomeArray<any>) => {
const params = prepareApiParams(time, elementCode) const params = prepareApiParams(time, elementCode)
get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => { get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
console.log(response)
if (response.state != 0) { if (response.state != 0) {
setChartsRecognitionResult(time, response.message, null, result); setChartsRecognitionResult(time, response.message, null, result);
return; return;

9
04.系统编码/Frontend/src/model/heat-map-drawer.ts

@ -41,7 +41,9 @@ export class HeatMapDrawer{
private unit: string; private unit: string;
private name: string; private name: string;
constructor(width: number, height: number, values: any, id: string, unit: string = '', name: string = '') { constructor(width: number, height: number, values: any, id: string, unit: string = '', name: string = '') {
if (id == null) return; if (id == null) {
throw new Error("heat map drawer id not allow null");
}
this.id = id; this.id = id;
this.width = width; this.width = width;
@ -127,7 +129,9 @@ export class HeatMapDrawer{
for(let dataIndex = 0, len = this.values.length, lastDataLen = len - 1; dataIndex < len; dataIndex++){ for(let dataIndex = 0, len = this.values.length, lastDataLen = len - 1; dataIndex < len; dataIndex++){
let value = this.values[dataIndex]; let value = this.values[dataIndex];
for(let lastInfoLen = this.values[0].length - 1, infoIndex = lastInfoLen; infoIndex >= 0; infoIndex--){ for(let lastInfoLen = value.length - 1, infoIndex = lastInfoLen; infoIndex >= 0; infoIndex--){
// if (value[infoIndex] == null) continue;
let x = startX + dataIndex * this.verticalScaleIntervalLength; let x = startX + dataIndex * this.verticalScaleIntervalLength;
let y = startY + (this.borderHeight - infoIndex * this.horizontalScaleIntervalLength); let y = startY + (this.borderHeight - infoIndex * this.horizontalScaleIntervalLength);
let width = this.verticalScaleIntervalLength; let width = this.verticalScaleIntervalLength;
@ -158,7 +162,6 @@ export class HeatMapDrawer{
this.values[dataIndex] = this.values[dataIndex].reverse(); this.values[dataIndex] = this.values[dataIndex].reverse();
} }
this.createCalc(this.values); this.createCalc(this.values);
} }

22
04.系统编码/Frontend/src/uilts/box-drawer.ts

@ -579,8 +579,8 @@ export class Calc{
private readonly paddingRight: number; private readonly paddingRight: number;
private readonly paddingBottom: number; private readonly paddingBottom: number;
private readonly boxWidth: number; private boxWidth: number;
private readonly boxHeight: number; private boxHeight: number;
private xMax: number = null; private xMax: number = null;
private yMax: number = null; private yMax: number = null;
@ -602,9 +602,24 @@ export class Calc{
this.boxWidth = this.boxes[1][1].width; this.boxWidth = this.boxes[1][1].width;
this.boxHeight = this.boxes[1][1].height; this.boxHeight = this.boxes[1][1].height;
// this.setWidthAndHeight();
this.init(); this.init();
} }
private setWidthAndHeight() : void{
for(let row = 0, rowLen = this.boxes.length; row < rowLen; row++){
for(let col = 0, colLen = this.boxes[row].length; col < colLen; col++){
let box = this.boxes[row][col];
if (box == null) continue;
console.log(box)
this.boxWidth = box.width;
this.boxHeight = box.height;
return;
}
}
}
private init(): void{ private init(): void{
this.xMax = this.width - this.paddingRight; this.xMax = this.width - this.paddingRight;
this.yMax = this.height - this.paddingBottom; this.yMax = this.height - this.paddingBottom;
@ -619,7 +634,8 @@ export class Calc{
} }
const indexX = parseInt(((x - this.startX) * 1.0 / this.boxWidth).toString()); const indexX = parseInt(((x - this.startX) * 1.0 / this.boxWidth).toString());
const indexY = parseInt(((y - this.startY) * 1.0 / this.boxHeight).toString()) const indexY = parseInt(((y - this.startY) * 1.0 / this.boxHeight).toString());
return this.boxes[indexX][indexY]; return this.boxes[indexX][indexY];
} }
} }
Loading…
Cancel
Save