diff --git a/04.系统编码/Frontend/src/components/DecisionSupport.vue b/04.系统编码/Frontend/src/components/DecisionSupport.vue index 4a5adb9..0ffe303 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,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 { } } + } 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 98c5477..1bac871 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 @@
@@ -223,7 +223,7 @@
-

质控前

+

质控前

{ 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; } diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts index fb05d02..2e67815 100644 --- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts +++ b/04.系统编码/Frontend/src/model/heat-map-drawer.ts @@ -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 微软雅黑"; } diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts index e614d59..70c6692 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, @@ -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' + } } }