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

commit

master
xuhuihui 3 years ago
parent
0a619b7a46
commit
6996960893
4 changed files with 115 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      04.系统编码/Frontend/src/components/DecisionSupport.vue
  2. 134
      04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
  3. 30
      04.系统编码/Frontend/src/components/RamanLidar.vue
  4. 23
      04.系统编码/Frontend/src/model/high-chart-create.ts

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

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

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

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

@ -92,10 +92,10 @@
<div class="picture-view"> <div class="picture-view">
<div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'"> <div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'">
<div class="picture special-picture"> <div class="picture">
<div v-loading="loadingWaterVaporSingleStatus" <div v-loading="loadingWaterVaporSingleStatus"
style="width: 100%;height: 100%" style="width: 100%;height: 100%"
custom-class="loading" class= 'loadingStatus'
element-loading-text="加载中"> element-loading-text="加载中">
<canvas id='watervapor_single_chart'></canvas> <canvas id='watervapor_single_chart'></canvas>
</div> </div>
@ -117,7 +117,7 @@
<div class="picture special-picture"> <div class="picture special-picture">
<div v-loading="loadingExtinctionOpticsStatus" <div v-loading="loadingExtinctionOpticsStatus"
style="width: 100%;height: 100%" style="width: 100%;height: 100%"
custom-class="loading" class= 'loadingStatus'
element-loading-text="加载中"> element-loading-text="加载中">
<canvas id='extinction_optics_chart'></canvas> <canvas id='extinction_optics_chart'></canvas>
</div> </div>
@ -128,7 +128,7 @@
<div class="picture special-picture"> <div class="picture special-picture">
<div v-loading="loadingBackscatterStatus" <div v-loading="loadingBackscatterStatus"
style="width: 100%;" style="width: 100%;"
custom-class="loading" class= 'loadingStatus'
element-loading-text="加载中"> element-loading-text="加载中">
<canvas id='backscatter_chart'></canvas> <canvas id='backscatter_chart'></canvas>
</div> </div>
@ -181,7 +181,7 @@
<div class="picture special-picture"> <div class="picture special-picture">
<div v-loading="loadingCloudSolStatus" <div v-loading="loadingCloudSolStatus"
style="width: 100%;" style="width: 100%;"
custom-class="loading" class= 'loadingStatus'
element-loading-text="加载中"> element-loading-text="加载中">
<canvas id='cloud_sol_chart'></canvas> <canvas id='cloud_sol_chart'></canvas>
</div> </div>
@ -1630,6 +1630,9 @@ export default {
.raman-picture-container { .raman-picture-container {
//width: calc(~"100% - 1rem"); //width: calc(~"100% - 1rem");
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto; margin: 0 auto;
.special-picture { .special-picture {
@ -1644,15 +1647,22 @@ export default {
.picture { .picture {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
align-items: center;
//position: relative; //position: relative;
//margin-top: 30px; //margin-top: 30px;
:deep(.loadingStatus) {
display: flex;
justify-content: center;
align-items: center;
padding-top: 80px;
}
#watervapor_single_chart { #watervapor_single_chart {
transform: translateX(6%) translateY(50px); //transform: translateX(6%) translateY(50px);
} }
#extinction_optics_chart { #extinction_optics_chart {
transform: translateX(6%) translateY(50px); //transform: translateX(6%) translateY(50px);
} }
#pm2_5_chart { #pm2_5_chart {
@ -1664,11 +1674,11 @@ export default {
} }
#backscatter_chart { #backscatter_chart {
transform: translateX(6%) translateY(50px); //transform: translateX(6%) translateY(50px);
} }
#cloud_sol_chart { #cloud_sol_chart {
transform: translateX(6%) translateY(50px); //transform: translateX(6%) translateY(50px);
} }
//#extinction_chart-before, //#extinction_chart-before,

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

@ -36,10 +36,15 @@ export class HighChartCreate {
text: text, text: text,
style: { style: {
color: '#000000', color: '#000000',
fontSize: '18px', fontSize: '20px',
fontFamily: '微软雅黑' fontFamily: '微软雅黑'
} }
}, },
labels: {
style: {
fontSize:'20px',
},
},
categories: [], categories: [],
showLastLabel: true, showLastLabel: true,
showFirstLabel: true, showFirstLabel: true,
@ -55,7 +60,7 @@ export class HighChartCreate {
type: 'datetime', type: 'datetime',
labels: { labels: {
style: { style: {
fontSize:'18px' fontSize:'20px'
}, },
formatter: function () { formatter: function () {
return Highcharts.dateFormat('%d日%H时', this.value); return Highcharts.dateFormat('%d日%H时', this.value);
@ -105,10 +110,16 @@ export class HighChartCreate {
text: text, text: text,
style: { style: {
color: '#000000', color: '#000000',
fontSize: '18px', fontSize: '20px',
fontFamily: '微软雅黑' fontFamily: '微软雅黑',
fontWeight: 'normal'
} }
}, },
labels: {
style: {
fontSize:'19px'
},
},
max: max, max: max,
min: min, min: min,
tickInterval: tickInterval, tickInterval: tickInterval,
@ -124,7 +135,7 @@ export class HighChartCreate {
text: text, text: text,
style: { style: {
color: '#000000', color: '#000000',
fontSize: '22px', fontSize: '20px',
fontFamily: '微软雅黑', fontFamily: '微软雅黑',
fontWeight: '500' fontWeight: '500'
} }
@ -157,7 +168,7 @@ export class HighChartCreate {
y: 0, y: 0,
enabled: enabled, enabled: enabled,
itemStyle : { itemStyle : {
fontSize: '22px', fontSize: '20px',
fontWeight : '500' fontWeight : '500'
} }
} }

Write Preview
Loading…
Cancel
Save