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

Merge branch 'master' of http://112.124.40.88:5510/root/NanJingLamanRadarProject

master
xiaowuler 3 years ago
parent
8d7094ec11 2e3c44512e
commit
87a4e6ea91
5 changed files with 122 additions and 55 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. 8
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  2. 87
      04.系统编码/Frontend/src/components/RamanLidar.vue
  3. 7
      04.系统编码/Frontend/src/model/heat-map-drawer.ts
  4. 40
      04.系统编码/Frontend/src/model/high-chart-create.ts
  5. 29
      04.系统编码/Frontend/src/uilts/box-drawer.ts

8
04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
View File

@ -274,7 +274,7 @@ export default {
specialStartTime: null,
tLogPPicture: "/images/no-data.png",
SeasonValue: '1',
ElementChange: "BP-temp"
ElementChange: "BP-temp",
});
let drawers = {
@ -996,6 +996,7 @@ export default {
// justify-content: space-between;
.special-picture {
height: 100%!important;
.title {
top: 80px!important;
}
@ -1025,14 +1026,15 @@ export default {
}
.picture {
width: 100%;
height: 100%;
position: relative;
margin-top: 30px;
//margin-top: 30px;
.title {
width: 100%;
font-size: 0.22rem;
position: absolute;
left: 3.4rem;
top: 0;
top: 0.3rem;
z-index: 1000;
}
}

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

@ -77,7 +77,7 @@
<div class="time-item" v-for="(time, index) in times" :key="index"
:class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}">
<span class="hour" style="padding-left: 10px">{{ time.month }}</span>
<span class="time" @click="onDayClick(time, index)">{{ time.day }}</span>
<span class="time" @click="onChangeDayClick(time, index)">{{ time.day }}</span>
</div>
</div>
@ -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="加载中">
@ -224,6 +224,7 @@
<div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'">
<div class="picture special-picture">
<h2 class="title" style="left: 3.3rem">质控前</h2>
<div v-loading="loadingExtinctionBeforeStatus"
style="width: 100%;"
custom-class="loading"
@ -232,6 +233,7 @@
</div>
</div>
<div class="picture special-picture">
<h2 class="title">质控后</h2>
<div v-loading="loadingExtinctionStatus"
style="width: 100%;"
custom-class="loading"
@ -243,6 +245,7 @@
<div class="picture-container raman-picture-container" v-show="currentElement === 'watervapor'">
<div class="picture special-picture">
<h2 class="title" style="left: 3.3rem">质控前</h2>
<div v-loading="loadingWatervaporBeforeStatus"
style="width: 100%"
element-loading-text="加载中">
@ -250,6 +253,7 @@
</div>
</div>
<div class="picture special-picture">
<h2 class="title">质控后</h2>
<div v-loading="loadingWaterVaporStatus"
style="width: 100%"
element-loading-text="加载中">
@ -264,6 +268,7 @@
</template>
<script lang="ts">
import {onMounted, reactive, toRefs, watch} from 'vue';
import moment from "moment";
import {post} from '../uilts/axios';
@ -344,6 +349,7 @@ export default {
loadingWaterVaporSingleStatus: false,
loadingExtinctionOpticsStatus: false,
loadingPmStatus: false,
loadingPm10Status: false,
loadingCloudSolStatus: false,
loadingCloudRecognitionStatus: false,
loadingExtinctionStatus: false,
@ -390,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')
@ -403,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('云顶高度')
@ -427,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')
@ -438,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')
@ -567,12 +572,12 @@ export default {
reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter);
break;
case 'pm2_5' :
initTimeLine()
initTimeLine();
reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
reloadCloudRecognition('pm10', 201, 'pm10', drawPm10);
break;
case 'pblh' :
initTimeLine()
initTimeLine();
reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
break;
case 'lidarratio' :
@ -595,7 +600,6 @@ export default {
// reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
// break;
case 'extinction' :
// initTimeLineDay()
initTimeLine(true);
reloadExtinctionBefore();
reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter, false, 12);
@ -620,6 +624,7 @@ export default {
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
options.loadingWatervaporBeforeStatus = false;
if (response.error != 0){
createEmptyCanvas('watervapor_chart-before', 800, 650);
console.log("未找到质控前数据文件");
return;
}
@ -629,7 +634,7 @@ export default {
}
let matrix = convertValueToBox(response.data);
creates.watervaporBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before", 'g/kg','质控前');
creates.watervaporBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before", 'g/kg');
creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporBeforeDrawer.draw();
@ -646,6 +651,7 @@ export default {
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
options.loadingExtinctionBeforeStatus = false;
if (response.error != 0){
createEmptyCanvas('extinction_chart-before', 800, 650);
console.log("未找到质控前数据文件");
return;
}
@ -655,7 +661,7 @@ export default {
}
let matrix = convertValueToBox(response.data);
creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控前');
creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", '/km');
creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionBeforeDrawer.draw();
@ -664,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');
}
@ -713,7 +718,7 @@ export default {
clearHeatMapDrawer(creates.pm2Point5Drawer);
break;
case 'pm10':
options.loadingPmStatus = true;
options.loadingPm10Status = true;
clearHeatMapDrawer(creates.pm10Drawer);
break;
case 'extinctionOptics':
@ -814,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();
}
@ -943,7 +948,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'extinctionOptics');
creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km/sr');
creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km');
creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors());
creates.opticsExtinctionDrawer.draw();
@ -974,7 +979,7 @@ export default {
}
let matrix = converCloudRecognition(101, result, 'watervapor');
creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg', '质控前');
creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg');
creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporDrawer.draw();
@ -996,7 +1001,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'extinction');
creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", 'km/sr','质控后');
creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", '/km');
creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionDrawer.draw();
@ -1024,7 +1029,7 @@ export default {
}
options.timeArray.reverse()
}
//
const reloadChartsRecognition = (element: string, callback: any) => {
preprocessingCharts(element)
let result = new CustomeArray(callback);
@ -1051,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());
@ -1060,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"
);
}
@ -1132,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);
// })
}
//
@ -1550,12 +1558,12 @@ export default {
elementChange(element)
}
const onDayClick = (time, index) => {
options.timeLineFormat = "hour"
options.currentTime = time.date;
const onChangeDayClick = (time, index) => {
options.currentTime = time.date
options.date = moment(time.date).format('YYYY-MM-DD');
options.index = index;
elementChange(options.currentElement)
options.index = index;
}
const onPrevDayTimeClick = () => {
@ -1589,7 +1597,7 @@ export default {
// onSaveClick,
onTabClick,
onElementClick,
onDayClick,
onChangeDayClick,
onPrevDayTimeClick,
onNextDayTimeClick
}
@ -1628,35 +1636,36 @@ export default {
.picture {
width: 100%;
height: 100%;
position: relative;
margin-top: 30px;
//margin-top: 30px;
#watervapor_single_chart {
transform: translateX(9%) translateY(15px);
transform: translateX(9%) translateY(20px);
//transform: scale(1.0, 0.8) translateX(539px);
}
#extinction_optics_chart {
//transform: scale(0.56, 0.85) translateX(-32%);
transform: translateX(9%) translateY(15px);
transform: translateX(9%) translateY(20px);
}
#pm2_5_chart {
transform: translateX(-50px) translateY(50px);
transform: translateX(-50px) translateY(20px);
}
#pm10_chart {
transform: translateX(-50px) translateY(50px);
transform: translateX(-50px) translateY(20px);
}
#backscatter_chart {
transform: translateX(9%) translateY(50px);
transform: translateX(9%) translateY(20px);
//transform: scale(0.6, 0.85) translateX(-76px);
}
#cloud_sol_chart {
transform: translateX(9%) translateY(50px);
transform: translateX(9%) translateY(20px);
//transform: scale(0.6, 0.85) translate(-12%, -12px);
}
@ -1675,7 +1684,7 @@ export default {
width: 100%;
font-size: 0.22rem;
position: absolute;
left: 2.10rem;
left: 3.5rem;
top: 0.30rem;
z-index: 100;
}

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

@ -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;

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

@ -1,7 +1,10 @@
import * as Highcharts from 'highcharts';
//import * as Exporting from 'highcharts/modules/exporting';
export class HighChartCreate {
// // 初始化导出模块
// Exporting(Highcharts);
export class HighChartCreate {
private readonly id: string;
private highChart: any;
@ -12,7 +15,6 @@ export class HighChartCreate {
private legend: any = null;
private tooltip: any = null;
private time: any = null;
constructor(id: string) {
this.id = id;
}
@ -82,6 +84,11 @@ export class HighChartCreate {
fontFamily: '微软雅黑'
}
},
labels: {
style: {
fontSize:'18px'
},
},
max: max,
min: min,
tickInterval: tickInterval,
@ -108,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 = {
@ -193,4 +228,3 @@ export class HighChartCreate {
}
}

29
04.系统编码/Frontend/src/uilts/box-drawer.ts
View File

@ -278,8 +278,8 @@ export class BoxDrawer{
private drawTemperatureText(unit): void {
this.canvasContext.font = "normal 35px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
let unitX = 1390
if (unit === '(degree)') unitX =1350
let unitX = this.width - this.paddingRight;
if (unit === '(degree)') unitX = this.width - this.paddingRight - 30;
this.canvasContext.fillText(unit, unitX,50);
}
@ -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;
}
}

Write Preview
Loading…
Cancel
Save