Browse Source

commit

master
xuhuihui 3 years ago
parent
commit
2e3c44512e
  1. 36
      04.系统编码/Frontend/src/components/RamanLidar.vue
  2. 7
      04.系统编码/Frontend/src/model/heat-map-drawer.ts
  3. 28
      04.系统编码/Frontend/src/model/high-chart-create.ts
  4. 25
      04.系统编码/Frontend/src/uilts/box-drawer.ts

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

@ -146,7 +146,7 @@
</div>
</div>
<div class="picture special-picture">
<div v-loading="loadingPmStatus"
<div v-loading="loadingPm10Status"
style="width: 100%;"
custom-class="loading"
element-loading-text="加载中">
@ -349,6 +349,7 @@ export default {
loadingWaterVaporSingleStatus: false,
loadingExtinctionOpticsStatus: false,
loadingPmStatus: false,
loadingPm10Status: false,
loadingCloudSolStatus: false,
loadingCloudRecognitionStatus: false,
loadingExtinctionStatus: false,
@ -395,7 +396,7 @@ export default {
creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
creates.boundaryLayerHeight.setChart(false,'line', 1000);
creates.boundaryLayerHeight.setXAxisTypeDate();
creates.boundaryLayerHeight.setYAxis('边界层高度(m)');
creates.boundaryLayerHeight.setSpecialYAxis('边界层高度(m)');
creates.boundaryLayerHeight.setLegend();
creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
creates.boundaryLayerHeight.setSeries('边界层高度',0, null, null, '#3636FF')
@ -408,19 +409,20 @@ export default {
creates.cloudsHeight.setChart(false, 'scatter', 1000);
// creates.cloudsHeight.setSpecialXAxis('()', 24, 0, 2);
creates.cloudsHeight.setXAxisTypeDate();
creates.cloudsHeight.setYAxis('高度(m)');
creates.cloudsHeight.setSpecialYAxis('高度(m)');
creates.cloudsHeight.setLegend();
creates.cloudsHeight.setTooltip('高度: {point.y}');
creates.cloudsHeight.setSeries('云层高度')
creates.cloudsHeight.init();
}
//
const cloudTopHeightInit = () => {
creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
creates.cloudTopHeight.setChart(false, 'scatter', 1000);
// creates.cloudTopHeight.setSpecialXAxis('()', 24, 0, 2);
creates.cloudTopHeight.setXAxisTypeDate();
creates.cloudTopHeight.setYAxis('高度(m)');
creates.cloudTopHeight.setSpecialYAxis('高度(m)');
creates.cloudTopHeight.setLegend();
creates.cloudTopHeight.setTooltip('高度: {point.y}');
creates.cloudTopHeight.setSeries('云顶高度')
@ -432,7 +434,7 @@ export default {
creates.LidarRatio = new HighChartCreate('LidarRatio');
creates.LidarRatio.setChart(false,'line', 1000);
creates.LidarRatio.setSpecialXAxis('sr', 120, 0, 20);
creates.LidarRatio.setYAxis('高度(m)');
creates.LidarRatio.setSpecialYAxis('高度(m)');
creates.LidarRatio.setLegend();
creates.LidarRatio.setTooltip('高度: {point.y}');
creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF')
@ -443,10 +445,8 @@ export default {
const opticalThicknessInit = () => {
creates.opticalThickness = new HighChartCreate('opticalThickness');
creates.opticalThickness.setChart(false,'line', 1000);
// creates.opticalThickness.setSpecialXAxis('', 24, 0, 2);
// creates.opticalThickness.setXAxis('(/)', false);
creates.opticalThickness.setXAxisTypeDate();
creates.opticalThickness.setYAxis('光学厚度');
creates.opticalThickness.setSpecialYAxis('光学厚度');
creates.opticalThickness.setLegend(true);
creates.opticalThickness.setTooltip('{point.y}');
creates.opticalThickness.setSeries('气溶胶', 0, null, null, '#FF5352')
@ -574,7 +574,7 @@ export default {
case 'pm2_5' :
initTimeLine();
reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
reloadCloudRecognition('pm10', 201, 'pm10', drawPm10);
break;
case 'pblh' :
initTimeLine();
@ -670,7 +670,6 @@ export default {
const convertValueToBox = (data) => {
let timeMoment = moment(options.date).set('h', 1).add(-1, 'd');
console.log(options.currentElement)
if (options.currentElement === 'extinction'){
timeMoment.add(12, 'h');
}
@ -719,7 +718,7 @@ export default {
clearHeatMapDrawer(creates.pm2Point5Drawer);
break;
case 'pm10':
options.loadingPmStatus = true;
options.loadingPm10Status = true;
clearHeatMapDrawer(creates.pm10Drawer);
break;
case 'extinctionOptics':
@ -820,7 +819,7 @@ export default {
const drawPm10 = (result: CustomeArray<any>) => {
if (result.length != 24) return;
options.loadingPmStatus = false;
options.loadingPm10Status = false;
if (creates.pm10Drawer != null) {
creates.pm10Drawer.close();
}
@ -1030,7 +1029,7 @@ export default {
}
options.timeArray.reverse()
}
//
const reloadChartsRecognition = (element: string, callback: any) => {
preprocessingCharts(element)
let result = new CustomeArray(callback);
@ -1057,7 +1056,6 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'layertype');
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());
@ -1066,7 +1064,10 @@ export default {
const prepareCloudRecognitionColors = () => {
return new ColorChart(['#0000FF', '#00FF00', '#FF0000', '#FFFFFF'],
[3, 2, 1, 0, -99]
[{ label: '冰云', value: 3 }, { label: '水云', value: 2 }, { label: '气溶胶', value: 1 }, { label: '晴空', value: 0 }],
false,
false,
"equal"
);
}
@ -1138,12 +1139,13 @@ export default {
}
setCloudRecognitionResult(capacity, time, response.message, response.data, result);
}).catch(error => {
setCloudRecognitionResult(capacity, time, error.message, null, result);
})
// .catch(error => {
// setCloudRecognitionResult(capacity, time, error.message, null, result);
// })
// .catch(error => {
// setCloudRecognitionResult(capacity, time, error.message, null, result);
// })
}
//

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

@ -85,6 +85,11 @@ export class HeatMapDrawer{
this.canvasContext.fillRect(startX, _y, this.defaultColorWidth, interval);
this.canvasContext.fillStyle = "#000000";
if (this.colorChart.type == 'equal') {
const text = this.colorChart.values[targetIndex].label;
this.canvasContext.fillText(text, startX + this.defaultColorWidth + 2, _y + interval - 40);
continue;
}
if (index == 0){
if (this.colorChart.showStartValue){
const text = this.colorChart.values[targetIndex + 1];
@ -151,7 +156,7 @@ export class HeatMapDrawer{
}
let targetValue = value[infoIndex].value;
let color = this.colorChart.getColor(targetValue);
let color = this.colorChart.getColor(targetValue, this.id);
value[infoIndex].updateBorderInfo(x, y, width, height);
if (color == null) continue;
this.canvasContext.fillStyle = color;

28
04.系统编码/Frontend/src/model/high-chart-create.ts

@ -115,6 +115,34 @@ export class HighChartCreate {
opposite: opposite
});
}
public setSpecialYAxis(text: string, max: number = null, min: number = null, tickInterval: number = null, tickAmount: number = null, opposite: boolean = false, lineWidth: number = 1, reversed: boolean = true){
this.yAxis.push({
title: {
text: text,
style: {
color: '#000000',
fontSize: '18px',
fontFamily: '微软雅黑'
}
},
labels: {
y: 8,
style: {
fontSize:'18px'
},
},
max: max,
min: min,
tickInterval: tickInterval,
tickAmount: tickAmount,
lineWidth: lineWidth,
opposite: opposite
});
}
//图例标识
public setLegend(enabled: boolean = false){
this.legend = {

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

@ -306,7 +306,7 @@ export class BoxDrawer{
this.canvasContext.stroke();
if (flag){
this.canvasContext.font = "normal 20px 微软雅黑";
this.canvasContext.font = "normal 25px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
const text = moment(this.values.radar_data[index].data_time).format("HH:mm");
this.canvasContext.fillText(text, _x - this.canvasContext.measureText(text).width / 2, startY + yInterval + this.borderHeight + 36);
@ -373,6 +373,7 @@ export class BoxDrawer{
export class ColorChart{
public readonly type: string;
public colors: any = null;
public values: any = null;
public showStartValue: boolean = false;
@ -382,8 +383,8 @@ export class ColorChart{
private maxDefaultColor: string = null;
private readonly valueLength: number = 0;
constructor(colors: any, values: any, showStartValue: boolean = false, showEndValue: boolean = false) {
constructor(colors: any, values: any, showStartValue: boolean = false, showEndValue: boolean = false, type: string = 'normal') {
this.type = type;
this.verify(colors, values);
this.colors = colors;
this.values = values;
@ -407,6 +408,8 @@ export class ColorChart{
}
private verify(colors: any, values: any): void{
if (this.type == "equal") return;
if (values.length <= 2)
throw new Error("色标数据至少包含两个数据");
@ -414,10 +417,21 @@ export class ColorChart{
throw new Error("色标数据不正确,数据个数应为颜色个数 + 1");
}
public getColor(value: number): string{
public getColor(value: number, id: string = null ): string{
if (isNaN(value)) return null;
const length = this.valueLength;
if (this.type == 'equal') {
if (this.minDefaultColor != null){
if (value < this.values[0].value) return this.minDefaultColor;
if (value > this.values[length - 1].value) return this.maxDefaultColor;
}
for(let index = 1; index < length; index ++){
if (this.values[index -1].value < value && this.values[index].value >= value){
return this.colors[index];
}
}
}
if (this.minDefaultColor != null){
if (value < this.values[0]) return this.minDefaultColor;
if (value > this.values[length - 1]) return this.maxDefaultColor;
@ -428,6 +442,9 @@ export class ColorChart{
return this.colors[index - 1];
}
}
return null;
}
}

Loading…
Cancel
Save