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
Split 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">
<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,19 @@ export default {
}
.raman-picture-container {
margin: 0 auto;
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 +516,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%;

30
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>
@ -1630,6 +1630,9 @@ export default {
.raman-picture-container {
//width: calc(~"100% - 1rem");
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
.special-picture {
@ -1644,15 +1647,22 @@ export default {
.picture {
width: 100%;
height: 100%;
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 {
@ -1664,11 +1674,11 @@ 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,

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

Write Preview
Loading…
Cancel
Save