diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index cfba413..8f4799d 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/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,9 +1139,10 @@ 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);
// })
diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
index 64f5062..2c01122 100644
--- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts
+++ b/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;
diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts
index 6906bde..713dc73 100644
--- a/04.系统编码/Frontend/src/model/high-chart-create.ts
+++ b/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 = {
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index a17879b..38cacd4 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/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;
}
}