Browse Source

commit

master
xuhuihui 3 years ago
parent
commit
6996960893
  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

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

@ -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 {
//850hpa500hpa //850hpa500hpa
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

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

@ -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'
} }
} }

Loading…
Cancel
Save