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

Merge remote-tracking branch 'remotes/origin/master'

master
xiaowuler 3 years ago
parent
dcde513fc7 eb8389e02c
commit
0bcc3e6102
5 changed files with 159 additions and 113 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. 18
      04.系统编码/Frontend/src/components/DecisionSupport.vue
  2. 134
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  3. 83
      04.系统编码/Frontend/src/components/RamanLidar.vue
  4. 2
      04.系统编码/Frontend/src/model/heat-map-drawer.ts
  5. 35
      04.系统编码/Frontend/src/model/high-chart-create.ts

18
04.系统编码/Frontend/src/components/DecisionSupport.vue
View File

@ -77,9 +77,8 @@
<div class="picture-container raman-picture-container" v-show="currentIndicator === 'pollution-indicator'">
<div class="picture">
<div id="pollutionIndicator"
style="margin-top: 66px"
v-loading="loadingPollutionIndicatorStatus"
custom-class="loading"
class= 'loadingStatus'
element-loading-text="加载中">
</div>
</div>
@ -455,7 +454,6 @@ export default {
height: auto;
display: block;
position: relative;
.el-image {
width: 100%;
height: auto;
@ -487,11 +485,20 @@ export default {
}
.raman-picture-container {
margin: 0 auto;
padding-top: 20px;
width: 100%;
height: 90%;
.picture {
width: 100%;
height: 100%;
display: flex;
align-items: center;
:deep(.loadingStatus) {
display: flex;
justify-content: center;
align-items: center;
padding-right: 20px;
}
}
}
@ -510,5 +517,6 @@ export default {
}
}
}
</style>

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

@ -151,55 +151,55 @@
<div v-show ="currentTab === 'kuoxian'" class="verticalProfile">
<div class="verticalProfile-picture">
<h2 class="verticalProfileTitle">温度廓线</h2>
<div id="verticalProfileTemp" style="width: 400px;height: 400px"></div>
<div id="verticalProfileTemp" ></div>
</div>
<div class="verticalProfile-picture">
<h2 class="verticalProfileTitle">相对湿度廓线</h2>
<div id="verticalProfileRelativeHumidity" style="width: 400px;height: 400px"></div>
<div id="verticalProfileRelativeHumidity" ></div>
</div>
<div class="verticalProfile-picture">
<h2 class="verticalProfileTitle" style="left: 1.4rem;">水汽密度廓线</h2>
<div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div>
<h2 class="verticalProfileTitle">水汽密度廓线</h2>
<div id="verticalProfileVaporDensity"></div>
</div>
</div>
<div v-show ="currentTab === 'shixu'" class="picture-container contrast-picture-container shiXu">
<div class="picture" style="margin-top: 570px">
<div v-show ="currentTab === 'shixu'" class="contrast-picture-container shiXu">
<div class="picture" >
<h2 class="title">对流有效位能CAPE</h2>
<div id="convectiveHighChartCAPE" style="width: 100%;height:75%"></div>
<div id="convectiveHighChartCAPE" ></div>
</div>
<div class="picture" style="margin-top: 570px">
<div class="picture">
<h2 class="title">K指数</h2>
<div id="kIndexChart" style="width: 100%;height:75%"></div>
<div id="kIndexChart" ></div>
</div>
<div class="picture">
<h2 class="title">对流抑制势能CIN</h2>
<div id="convectiveHighChartCIN" style="width:100%;height:75%"></div>
<div id="convectiveHighChartCIN" ></div>
</div>
<div class="picture">
<h2 class="title">沙式指数</h2>
<div id="sandIndexChart" style="width:100%;height:75%"></div>
<div id="sandIndexChart" ></div>
</div>
<div class="picture">
<h2 class="title">LCL气压</h2>
<div id="airPressureChart" style="width:100%;height:75%"></div>
<div id="airPressureChart" ></div>
</div>
<div class="picture">
<h2 class="title">850hpa和500hpa温差</h2>
<div id="deltaTChart" style="width:100%;height:75%"></div>
<div id="deltaTChart" ></div>
</div>
<div class="picture">
<h2 class="title">0度层高度</h2>
<div id="zeroHeightChart" style="width:100%;height:75%"></div>
<div id="zeroHeightChart"></div>
</div>
<div class="picture">
<h2 class="title">-20度层高度</h2>
<div id="NegativeTwentyHeightChart" style="width:100%;height:75%"></div>
<div id="NegativeTwentyHeightChart" ></div>
</div>
</div>
<div v-show ="currentTab === 'T-logP'" class="picture-container contrast-picture-container">
<div v-show ="currentTab === 'T-logP'" class="T-logP">
<img :src="tLogPPicture" class="T-logpImg">
</div>
@ -338,7 +338,7 @@ export default {
//垂直廓线温度数据图
const verticalProfileTempInit = () => {
creates.verticalProfileTemp = new HighChartCreate('verticalProfileTemp');
creates.verticalProfileTemp.setChart(true);
creates.verticalProfileTemp.setChart(true, 'line', 500, 500);
creates.verticalProfileTemp.setXAxis('高度(km)', false);
creates.verticalProfileTemp.setYAxis('温度T(℃)', 10, -40, 10, 6);
creates.verticalProfileTemp.setLegend();
@ -350,7 +350,7 @@ export default {
//垂直廓线水汽密度数据图
const verticalProfileVaporDensityInit = () => {
creates.verticalProfileVaporDensity = new HighChartCreate('verticalProfileVaporDensity');
creates.verticalProfileVaporDensity.setChart(true);
creates.verticalProfileVaporDensity.setChart(true, 'line', 500, 500);
creates.verticalProfileVaporDensity.setXAxis('高度(km)', false);
creates.verticalProfileVaporDensity.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11);
creates.verticalProfileVaporDensity.setLegend();
@ -362,7 +362,7 @@ export default {
//垂直廓线相对湿度数据图
const verticalProfileRelativeHumidityInit = () => {
creates.verticalProfileRelativeHumidity = new HighChartCreate('verticalProfileRelativeHumidity');
creates.verticalProfileRelativeHumidity.setChart(true);
creates.verticalProfileRelativeHumidity.setChart(true, 'line', 500, 500);
creates.verticalProfileRelativeHumidity.setXAxis('高度(km)', false);
creates.verticalProfileRelativeHumidity.setYAxis('相对湿度RH(%)', 100, 0, 10, 6);
creates.verticalProfileRelativeHumidity.setLegend();
@ -373,7 +373,7 @@ export default {
const convectiveIndexProfileTimeChartInitCAPE = () => {
creates.convectiveIndexProfileTimeChartCAPE = new HighChartCreate('convectiveHighChartCAPE');
creates.convectiveIndexProfileTimeChartCAPE.setChart();
creates.convectiveIndexProfileTimeChartCAPE.setChart(false, 'line', 750, 400);
creates.convectiveIndexProfileTimeChartCAPE.setXAxis('时间（时/分）', false);
creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)');
creates.convectiveIndexProfileTimeChartCAPE.setLegend();
@ -384,7 +384,7 @@ export default {
const convectiveIndexProfileTimeChartInitCIN = () => {
creates.convectiveIndexProfileTimeChartCIN = new HighChartCreate('convectiveHighChartCIN');
creates.convectiveIndexProfileTimeChartCIN.setChart();
creates.convectiveIndexProfileTimeChartCIN.setChart(false, 'line', 750, 400);
creates.convectiveIndexProfileTimeChartCIN.setXAxis('时间（时/分）', false);
creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIN(J/kg)');
creates.convectiveIndexProfileTimeChartCIN.setLegend();
@ -396,7 +396,7 @@ export default {
//绘制K指数
const kIndexChartInit = () => {
creates.kIndexChart = new HighChartCreate('kIndexChart');
creates.kIndexChart.setChart();
creates.kIndexChart.setChart(false, 'line', 750, 400);
creates.kIndexChart.setXAxis('时间（时/分）', false);
creates.kIndexChart.setYAxis('K（℃）');
creates.kIndexChart.setLegend();
@ -408,7 +408,7 @@ export default {
//绘制沙式指数
const sandIndexInit = () => {
creates.sandIndex = new HighChartCreate('sandIndexChart');
creates.sandIndex.setChart();
creates.sandIndex.setChart(false, 'line', 750, 400);
creates.sandIndex.setXAxis('时间（时/分）', false);
creates.sandIndex.setYAxis('SI（℃）');
creates.sandIndex.setLegend();
@ -420,7 +420,7 @@ export default {
//绘制LCl气压
const airPressureInit = () => {
creates.airPressure = new HighChartCreate('airPressureChart');
creates.airPressure.setChart();
creates.airPressure.setChart(false, 'line', 750, 400);
creates.airPressure.setXAxis('时间（时/分）', false);
creates.airPressure.setYAxis('LCL气压（hPa)');
creates.airPressure.setLegend();
@ -432,7 +432,7 @@ export default {
//绘制850hpa和500hpa温差
const deltaTInit = () => {
creates.deltaT = new HighChartCreate('deltaTChart');
creates.deltaT.setChart();
creates.deltaT.setChart(false, 'line', 750, 400);
creates.deltaT.setXAxis('时间（时/分）', false);
creates.deltaT.setYAxis('deltaT（℃）');
creates.deltaT.setLegend();
@ -444,7 +444,7 @@ export default {
//绘制0度层高度
const zeroHeightInit = () => {
creates.zeroHeight = new HighChartCreate('zeroHeightChart');
creates.zeroHeight.setChart();
creates.zeroHeight.setChart(false, 'line', 750, 400);
creates.zeroHeight.setXAxis('时间（时/分）', false);
creates.zeroHeight.setYAxis('hgt_0(m)');
creates.zeroHeight.setLegend();
@ -456,7 +456,7 @@ export default {
//绘制-20度层高度
const NegativeTwentyHeightInit = () => {
creates.NegativeTwentyHeight = new HighChartCreate('NegativeTwentyHeightChart');
creates.NegativeTwentyHeight.setChart();
creates.NegativeTwentyHeight.setChart(false, 'line', 750, 400);
creates.NegativeTwentyHeight.setXAxis('时间（时/分）', false);
creates.NegativeTwentyHeight.setYAxis('hgt_-20(m)');
creates.NegativeTwentyHeight.setLegend();
@ -963,6 +963,8 @@ export default {
.main {
.container {
//width: 100%;
.verticalProfile {
width: 100%;
height: 100%;
@ -971,13 +973,15 @@ export default {
align-items: center;
.verticalProfile-picture {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.verticalProfileTitle {
position: absolute;
font-size: 0.22rem;
left: 1.77rem;
top: -0.8rem;
padding-bottom: 30px;
}
}
}
@ -987,40 +991,39 @@ export default {
}
.contrast-picture-container {
width: calc(~"100% - 2.5rem");
margin: 0 auto;
//width: 100%;
width: 100% !important;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
// justify-content: space-between;
.special-picture {
height: 100%!important;
.title {
top: 80px!important;
}
}
.picture {
width: 45%;
height: 45%;
position: relative;
width: 48%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
.title {
width: 100%;
font-size: 0.22rem;
position: absolute;
left: 3.10rem;
top: 0;
z-index: 1000;
}
}
}
.shiXu {
overflow-y: scroll;
}
.T-logP {
width: 100% !important;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.T-logpImg {
transform: scale(0.5);
transform: scale(0.5,0.4);
}
}
.raman-picture-container {
//width: calc(~"100% - 1rem");
margin: 0 auto;
#original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas {
}
@ -1039,25 +1042,20 @@ export default {
}
}
}
//.BPPicture {
// width: 100% !important;
// height: 100%!important;
// position: relative;
//
//}
#BP-temp, #BP-relative-humidity, #BP-vapor-density {
transform: scale(1, 1.0) translateX(-42px);
}
.shiXu {
overflow-y: scroll;
.BPPicture {
width: 100% !important;
}
height: 100%!important;
//position: relative;
display: flex;
justify-content: center;
.shiXuBP {
flex-flow: column;
align-content: space-around !important;
}
//#BP-temp, #BP-relative-humidity, #BP-vapor-density {
//transform: scale(1, 1.0) translateX(-42px);
//}
.picture-MWR {
width: 100%;

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

@ -92,10 +92,10 @@
<div class="picture-view">
<div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'">
<div class="picture special-picture">
<div class="picture">
<div v-loading="loadingWaterVaporSingleStatus"
style="width: 100%;height: 100%"
custom-class="loading"
class= 'loadingStatus'
element-loading-text="加载中">
<canvas id='watervapor_single_chart'></canvas>
</div>
@ -117,7 +117,7 @@
<div class="picture special-picture">
<div v-loading="loadingExtinctionOpticsStatus"
style="width: 100%;height: 100%"
custom-class="loading"
class= 'loadingStatus'
element-loading-text="加载中">
<canvas id='extinction_optics_chart'></canvas>
</div>
@ -128,7 +128,7 @@
<div class="picture special-picture">
<div v-loading="loadingBackscatterStatus"
style="width: 100%;"
custom-class="loading"
class= 'loadingStatus'
element-loading-text="加载中">
<canvas id='backscatter_chart'></canvas>
</div>
@ -181,7 +181,7 @@
<div class="picture special-picture">
<div v-loading="loadingCloudSolStatus"
style="width: 100%;"
custom-class="loading"
class= 'loadingStatus'
element-loading-text="加载中">
<canvas id='cloud_sol_chart'></canvas>
</div>
@ -223,7 +223,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>
<h2 class="title">质控前</h2>
<div v-loading="loadingExtinctionBeforeStatus"
style="width: 100%;"
custom-class="loading"
@ -502,7 +502,7 @@ export default {
},
{
value: 'backscatter',
label: '后向散射系数'
label: '消光后的后向散射系数'
}]
} else if (options.currentTab === 'aerosol-product') {
@ -767,11 +767,11 @@ export default {
drawer.close();
drawer = null;
}
const cancelRequest = () => {
axiosStore._axiosPromiseCancel.forEach(e => {
e && e()
});
axiosStore._axiosPromiseCancel = [];
}
@ -790,11 +790,18 @@ export default {
}
const prepareBackscatterColors = () => {
let colorChart = new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0',
'#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'],
[-1, -1.25, -1.5, -1.75, -2, -2.25, -2.5, -2.75, -3, -3.25, -3.5, -3.75, -4, -4.25, -4.5, -4.75, -5]
// let colorChart = new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0',
// '#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'],
// // [-1, -1.25, -1.5, -1.75, -2, -2.25, -2.5, -2.75, -3, -3.25, -3.5, -3.75, -4, -4.25, -4.5, -4.75, -5]
// [0.02, 0.01, 0.008, 0.006, 0.004, 0.002, 0.001, 0.0008, 0.0006, 0.0004, 0.0002, 0.0001, 0.00008, 0.00006, 0.00004, 0.00002, 0.00001]
// );
let colorChart = new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
'#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
[0.1, 0.08, 0.06, 0.04, 0.02, 0.01, 0.008, 0.006, 0.004, 0.002, 0.001, 0.0008, 0.0006, 0.0004, 0.0002, 0.0001, 0.00008, 0.00006, 0.00004, 0.00002, 0.00001],
true,
true
);
colorChart.setDefaultColors('#000099', '#8F0000');
colorChart.setDefaultColors('#0D1485', '#8F0000');
return colorChart;
}
@ -1116,7 +1123,8 @@ export default {
let value = r.data[h - 2][i]
if (name == 'backscatter') {
value = value == null ? NaN : Math.log10(value);
value = value == null ? NaN : value;
//value = value == null ? NaN : Math.log10(value);
}
if (name == 'singleWatervapor' || name == 'watervapor') {
value = value == null ? NaN : value * 1000;
@ -1515,6 +1523,7 @@ export default {
locate: options.currentRegion
}
}
return {
date: time,
var: variableName,
@ -1622,9 +1631,15 @@ export default {
.raman-picture-container {
//width: calc(~"100% - 1rem");
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
.special-picture {
display: flex;
flex-flow: column;
justify-content: center;
//:deep(.el-loading-mask) {
// top: 64px !important;
//}
@ -1633,15 +1648,22 @@ export default {
.picture {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
//position: relative;
//margin-top: 30px;
:deep(.loadingStatus) {
display: flex;
justify-content: center;
align-items: center;
padding-top: 80px;
}
#watervapor_single_chart {
transform: translateX(6%) translateY(50px);
//transform: translateX(6%) translateY(50px);
}
#extinction_optics_chart {
transform: translateX(6%) translateY(50px);
//transform: translateX(6%) translateY(50px);
}
#pm2_5_chart {
@ -1653,26 +1675,27 @@ export default {
}
#backscatter_chart {
transform: translateX(6%) translateY(50px);
//transform: translateX(6%) translateY(50px);
}
#cloud_sol_chart {
transform: translateX(6%) translateY(50px);
//transform: translateX(6%) translateY(50px);
}
#extinction_chart-before,
#extinction_chart-after,
#watervapor_chart-before,
#watervapor_chart-after {
transform: translateY(50px);
}
//#extinction_chart-before,
//#extinction_chart-after,
//#watervapor_chart-before,
//#watervapor_chart-after {
// transform: translateY(50px);
//}
.title {
width: 100%;
font-size: 0.22rem;
position: absolute;
left: 3.5rem;
top: 0.30rem;
padding-top: 70px;
//width: 100%;
//font-size: 0.22rem;
//position: absolute;
//left: 350px;
//top: 30px;
z-index: 100;
}

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

@ -339,7 +339,7 @@ export class HeatMapDrawer{
private setTimeDetail(_x: number, startY: number, text: string): void{
// const text = this.values[15][0].time.slice(0, 6);
this.canvasContext.font = "normal 15px 微软雅黑";
this.canvasContext.font = "normal 17px 微软雅黑";
this.canvasContext.fillText(text, _x - this.canvasContext.measureText(text).width / 2, startY + this.verticalScaleLine + this.borderHeight + 38);
this.canvasContext.font = "normal 17px 微软雅黑";
}

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

@ -36,10 +36,15 @@ export class HighChartCreate {
text: text,
style: {
color: '#000000',
fontSize: '18px',
fontSize: '20px',
fontFamily: '微软雅黑'
}
},
labels: {
style: {
fontSize:'20px',
},
},
categories: [],
showLastLabel: true,
showFirstLabel: true,
@ -81,13 +86,14 @@ export class HighChartCreate {
text: text,
style: {
color: '#000000',
fontSize: '18px',
fontFamily: '微软雅黑'
fontSize: '20px',
fontFamily: '微软雅黑',
fontWeight: '300'
}
},
labels: {
style: {
fontSize:'20px'
fontSize:'20px',
},
},
max: max,
@ -104,10 +110,16 @@ export class HighChartCreate {
text: text,
style: {
color: '#000000',
fontSize: '18px',
fontFamily: '微软雅黑'
fontSize: '20px',
fontFamily: '微软雅黑',
fontWeight: '400'
}
},
labels: {
style: {
fontSize: '18px'
},
},
max: max,
min: min,
tickInterval: tickInterval,
@ -123,8 +135,9 @@ export class HighChartCreate {
text: text,
style: {
color: '#000000',
fontSize: '18px',
fontFamily: '微软雅黑'
fontSize: '20px',
fontFamily: '微软雅黑',
fontWeight: '300'
}
},
labels: {
@ -153,7 +166,11 @@ export class HighChartCreate {
floating: true,
x: 20,
y: 0,
enabled: enabled
enabled: enabled,
itemStyle : {
fontSize: '20px',
fontWeight: '300'
}
}
}

Write Preview
Loading…
Cancel
Save