From 69969608933eda47d1e7fd74b83977c38b5cccbc Mon Sep 17 00:00:00 2001 From: xuhuihui <3548508071@qq.com> Date: Wed, 15 Jun 2022 14:14:27 +0800 Subject: [PATCH] commit --- .../src/components/DecisionSupport.vue | 17 ++- .../src/components/MicrowaveRadiation.vue | 134 +++++++++--------- .../Frontend/src/components/RamanLidar.vue | 30 ++-- .../Frontend/src/model/high-chart-create.ts | 23 ++- 4 files changed, 115 insertions(+), 89 deletions(-) diff --git a/04.系统编码/Frontend/src/components/DecisionSupport.vue b/04.系统编码/Frontend/src/components/DecisionSupport.vue index 4a5adb9..4158959 100644 --- a/04.系统编码/Frontend/src/components/DecisionSupport.vue +++ b/04.系统编码/Frontend/src/components/DecisionSupport.vue @@ -77,9 +77,8 @@
@@ -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 { } } + } diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue index 50c304f..0d69f94 100644 --- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue +++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue @@ -151,55 +151,55 @@

温度廓线

-
+

相对湿度廓线

-
+
-

水汽密度廓线

-
+

水汽密度廓线

+
-
-
+
+

对流有效位能CAPE

-
+
-
+

K指数

-
+

对流抑制势能CIN

-
+

沙式指数

-
+

LCL气压

-
+

850hpa和500hpa温差

-
+

0度层高度

-
+

-20度层高度

-
+
-
+
@@ -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%; diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue index 720a12d..f4c073b 100644 --- a/04.系统编码/Frontend/src/components/RamanLidar.vue +++ b/04.系统编码/Frontend/src/components/RamanLidar.vue @@ -92,10 +92,10 @@
-
+
@@ -117,7 +117,7 @@
@@ -128,7 +128,7 @@
@@ -181,7 +181,7 @@
@@ -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, diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts index 1a6293e..5058170 100644 --- a/04.系统编码/Frontend/src/model/high-chart-create.ts +++ b/04.系统编码/Frontend/src/model/high-chart-create.ts @@ -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' } }