diff --git a/04.系统编码/Frontend/index.html b/04.系统编码/Frontend/index.html index 796b397..82d9ad3 100644 --- a/04.系统编码/Frontend/index.html +++ b/04.系统编码/Frontend/index.html @@ -2,12 +2,13 @@ - + 南京生态环境评估决策平台
- + + diff --git a/04.系统编码/Frontend/package-lock.json b/04.系统编码/Frontend/package-lock.json index 10c2ab2..c3a027c 100644 --- a/04.系统编码/Frontend/package-lock.json +++ b/04.系统编码/Frontend/package-lock.json @@ -13,7 +13,7 @@ "crypto-js": "^4.1.1", "echarts": "^5.2.2", "element-plus": "^1.2.0-beta.4", - "highcharts": "^9.3.2", + "highcharts": "^9.3.3", "js-md5": "^0.7.3", "jsencrypt": "3.0.0-rc.1", "moment": "^2.29.1", @@ -1652,9 +1652,9 @@ "dev": true }, "node_modules/highcharts": { - "version": "9.3.2", - "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.2.tgz", - "integrity": "sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg==" + "version": "9.3.3", + "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.3.tgz", + "integrity": "sha512-QeOvm6cifeZYYdTLm4IxZsXcOE9c4xqfs0z0OJJ0z7hhA9WG0rmcVAyuIp5HBl/znjA/ayYHmpYjBYD/9PG4Fg==" }, "node_modules/http-assert": { "version": "1.5.0", @@ -5055,9 +5055,9 @@ "dev": true }, "highcharts": { - "version": "9.3.2", - "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.2.tgz", - "integrity": "sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg==" + "version": "9.3.3", + "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.3.tgz", + "integrity": "sha512-QeOvm6cifeZYYdTLm4IxZsXcOE9c4xqfs0z0OJJ0z7hhA9WG0rmcVAyuIp5HBl/znjA/ayYHmpYjBYD/9PG4Fg==" }, "http-assert": { "version": "1.5.0", diff --git a/04.系统编码/Frontend/package.json b/04.系统编码/Frontend/package.json index 8415147..6fb5d08 100644 --- a/04.系统编码/Frontend/package.json +++ b/04.系统编码/Frontend/package.json @@ -11,7 +11,7 @@ "crypto-js": "^4.1.1", "echarts": "^5.2.2", "element-plus": "^1.2.0-beta.4", - "highcharts": "^9.3.2", + "highcharts": "^9.3.3", "js-md5": "^0.7.3", "jsencrypt": "3.0.0-rc.1", "moment": "^2.29.1", diff --git a/04.系统编码/Frontend/public/favicon.ico b/04.系统编码/Frontend/public/favicon.ico index 4a45747..92dc57c 100644 Binary files a/04.系统编码/Frontend/public/favicon.ico and b/04.系统编码/Frontend/public/favicon.ico differ diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue index 942cdac..eac6935 100644 --- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue +++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue @@ -26,8 +26,16 @@

区域选择

- 江宁 + 江宁 + 六合 + 浦口 + 高淳 + 溧水
@@ -93,51 +101,96 @@
-
+
+
-

{{ titleStartTime }}~{{ titleEndTime }}温度原始数据

+

质控前

-
-

{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记

- -
-
-

{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果

+ + + + + + + +
+

质控后

-
+
+ + +
-
-
-

{{ titleStartTime }}~{{ titleEndTime }}BP反演温度

+
+
+

BP反演温度

-
-

{{ titleStartTime }}~{{ titleEndTime }}BP反演相对湿度

+
+

BP反演相对湿度

-
-

{{ titleStartTime }}~{{ titleEndTime }}BP反演水汽密度

+
+

BP反演水汽密度

-
-

{{ BPTitleTime }}温度、相对湿度、水汽密度廓线

-
+
+ +
+

温度廓线

+
+
+ +
+

相对湿度廓线

+
+
+ +
+

水汽密度廓线

+
+
-
-
-

{{ titleStartTime }}~{{ titleEndTime }}对流有效位能CAPE

-
+
+
+

对流有效位能CAPE

+
+
+ +
+

K指数

+
-

{{ titleStartTime }}~{{ titleEndTime }}对流抑制势能CIN

+

对流抑制势能CIN

+
+

沙式指数

+
+
+
+

LCL气压

+
+
+
+

850hpa和500hpa温差

+
+
+
+

0度层高度

+
+
+
+

-20度层高度

+
+
@@ -162,13 +215,31 @@ export default { setup() { let timer = null; let creates: { - verticalProfile: HighChartCreate + // verticalProfile: HighChartCreate + verticalProfileTemp: HighChartCreate + verticalProfileVaporDensity: HighChartCreate + verticalProfileRelativeHumidity: HighChartCreate convectiveIndexProfileTimeChartCAPE: HighChartCreate convectiveIndexProfileTimeChartCIN: HighChartCreate + kIndexChart: HighChartCreate + sandIndex: HighChartCreate + airPressure: HighChartCreate + deltaT: HighChartCreate + zeroHeight: HighChartCreate + NegativeTwentyHeight: HighChartCreate } = { - verticalProfile: null, + //verticalProfile: null, + verticalProfileTemp: null, + verticalProfileVaporDensity: null, + verticalProfileRelativeHumidity: null, convectiveIndexProfileTimeChartCAPE: null, - convectiveIndexProfileTimeChartCIN: null + convectiveIndexProfileTimeChartCIN: null, + kIndexChart: null, + sandIndex: null, + airPressure: null, + deltaT: null, + zeroHeight: null, + NegativeTwentyHeight: null } let options = reactive({ @@ -195,6 +266,7 @@ export default { // onPitchTime: 0, BPTitleTime: null, highChartXAxis: [], + specialStartTime: null }); let drawers = { @@ -224,34 +296,81 @@ export default { } const initEcharts = (name) => { - if (name === 'kuoxian') - verticalProfileInit() - else if (name === 'shixu') { + if (name === 'kuoxian') { + // verticalProfileInit() + verticalProfileTempInit() + verticalProfileVaporDensityInit() + verticalProfileRelativeHumidityInit() + } + else if (name === 'shixu') { convectiveIndexProfileTimeChartInitCAPE() convectiveIndexProfileTimeChartInitCIN() + kIndexChartInit() + sandIndexInit() + airPressureInit() + deltaTInit() + zeroHeightInit() + NegativeTwentyHeightInit() } } - const verticalProfileInit = () => { - creates.verticalProfile = new HighChartCreate('container'); - creates.verticalProfile.setChart(true); - creates.verticalProfile.setXAxis('高度(km)', false); - creates.verticalProfile.setYAxis('温度T(degree)', 10, -40, 10, 6, true); - creates.verticalProfile.setYAxis('相对湿度RH(%)', 100, 0, 10, 6); - creates.verticalProfile.setYAxis('水汽密度Q(g/kg)', 10, 0, 1, 11); - creates.verticalProfile.setLegend(); - creates.verticalProfile.setTooltip('{point.category} KM: {point.y}'); - creates.verticalProfile.setSeries('温度', 0, '℃', '#F49927'); - creates.verticalProfile.setSeries('相对湿度', 1, '%', '#3534FD'); - creates.verticalProfile.setSeries('水汽密度', 2, 'g/Kg', '#6AB312'); - creates.verticalProfile.init(); + // const verticalProfileInit = () => { + // creates.verticalProfile = new HighChartCreate('container'); + // creates.verticalProfile.setChart(true); + // creates.verticalProfile.setXAxis('高度(km)', false); + // creates.verticalProfile.setYAxis('温度T(degree)', 10, -40, 10, 6, true); + // creates.verticalProfile.setYAxis('相对湿度RH(%)', 100, 0, 10, 6); + // creates.verticalProfile.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11); + // creates.verticalProfile.setLegend(); + // creates.verticalProfile.setTooltip('{point.category} KM: {point.y}'); + // creates.verticalProfile.setSeries('温度', 0, '℃', '#F49927'); + // creates.verticalProfile.setSeries('相对湿度', 1, '%', '#3534FD'); + // creates.verticalProfile.setSeries('水汽密度', 2, 'g/Kg', '#6AB312'); + // creates.verticalProfile.init(); + // } + + //垂直廓线温度数据图 + const verticalProfileTempInit = () => { + creates.verticalProfileTemp = new HighChartCreate('verticalProfileTemp'); + creates.verticalProfileTemp.setChart(true); + creates.verticalProfileTemp.setXAxis('高度(km)', false); + creates.verticalProfileTemp.setYAxis('温度T(degree)', 10, -40, 10, 6); + creates.verticalProfileTemp.setLegend(); + creates.verticalProfileTemp.setTooltip('{point.category} KM: {point.y}'); + creates.verticalProfileTemp.setSeries('温度', 0, '℃', '#F49927'); + creates.verticalProfileTemp.init(); + } + + //垂直廓线水汽密度数据图 + const verticalProfileVaporDensityInit = () => { + creates.verticalProfileVaporDensity = new HighChartCreate('verticalProfileVaporDensity'); + creates.verticalProfileVaporDensity.setChart(true); + creates.verticalProfileVaporDensity.setXAxis('高度(km)', false); + creates.verticalProfileVaporDensity.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11); + creates.verticalProfileVaporDensity.setLegend(); + creates.verticalProfileVaporDensity.setTooltip('{point.category} KM: {point.y}'); + creates.verticalProfileVaporDensity.setSeries('水汽密度', 0, 'g/Kg', '#6AB312'); + creates.verticalProfileVaporDensity.init(); + } + + //垂直廓线相对湿度数据图 + const verticalProfileRelativeHumidityInit = () => { + creates.verticalProfileRelativeHumidity = new HighChartCreate('verticalProfileRelativeHumidity'); + creates.verticalProfileRelativeHumidity.setChart(true); + creates.verticalProfileRelativeHumidity.setXAxis('高度(km)', false); + creates.verticalProfileRelativeHumidity.setYAxis('相对湿度RH(%)', 100, 0, 10, 6); + creates.verticalProfileRelativeHumidity.setLegend(); + creates.verticalProfileRelativeHumidity.setTooltip('{point.category} KM: {point.y}'); + creates.verticalProfileRelativeHumidity.setSeries('相对湿度', 0, '%', '#498DF0'); + creates.verticalProfileRelativeHumidity.init(); } const convectiveIndexProfileTimeChartInitCAPE = () => { creates.convectiveIndexProfileTimeChartCAPE = new HighChartCreate('convectiveHighChartCAPE'); creates.convectiveIndexProfileTimeChartCAPE.setChart(); creates.convectiveIndexProfileTimeChartCAPE.setXAxis( '时间（时/分）', false); - creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)', 500, 0, 100,6); + creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)', 800, 0, 100,9); + creates.convectiveIndexProfileTimeChartCAPE.setLegend(); creates.convectiveIndexProfileTimeChartCAPE.setTooltip('{point.category}: {point.y}(J/kg)'); creates.convectiveIndexProfileTimeChartCAPE.setSeries('CAPE') creates.convectiveIndexProfileTimeChartCAPE.init(); @@ -261,12 +380,85 @@ export default { creates.convectiveIndexProfileTimeChartCIN = new HighChartCreate('convectiveHighChartCIN'); creates.convectiveIndexProfileTimeChartCIN.setChart(); creates.convectiveIndexProfileTimeChartCIN.setXAxis( '时间（时/分）', false); - creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIE(J/kg)', 500, 0, 100,6); + creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIN(J/kg)', 800, 0, 100,9); + creates.convectiveIndexProfileTimeChartCIN.setLegend(); creates.convectiveIndexProfileTimeChartCIN.setTooltip('{point.category}: {point.y}(J/kg)'); creates.convectiveIndexProfileTimeChartCIN.setSeries('CIN') creates.convectiveIndexProfileTimeChartCIN.init(); } + //绘制K指数 + const kIndexChartInit = () => { + creates.kIndexChart = new HighChartCreate('kIndexChart'); + creates.kIndexChart.setChart(); + creates.kIndexChart.setXAxis( '时间（时/分）', false); + creates.kIndexChart.setYAxis('K（℃）', 40, -40, 10,9); + creates.kIndexChart.setLegend(); + creates.kIndexChart.setTooltip('{point.category}: {point.y}(℃)'); + creates.kIndexChart.setSeries('K指数') + creates.kIndexChart.init(); + } + + //绘制沙式指数 + const sandIndexInit = () => { + creates.sandIndex = new HighChartCreate('sandIndexChart'); + creates.sandIndex.setChart(); + creates.sandIndex.setXAxis( '时间（时/分）', false); + creates.sandIndex.setYAxis('SI（℃）', 30, 0, 3,11); + creates.sandIndex.setLegend(); + creates.sandIndex.setTooltip('{point.category}: {point.y}(℃)'); + creates.sandIndex.setSeries('沙式指数') + creates.sandIndex.init(); + } + + //绘制LCl气压 + const airPressureInit = () => { + creates.airPressure = new HighChartCreate('airPressureChart'); + creates.airPressure.setChart(); + creates.airPressure.setXAxis( '时间（时/分）', false); + creates.airPressure.setYAxis('LCL气压（hPa)', 1000, 300, 100,8); + creates.airPressure.setLegend(); + creates.airPressure.setTooltip('{point.category}: {point.y}(hPa)'); + creates.airPressure.setSeries('LCL气压') + creates.airPressure.init(); + } + + //绘制850hpa和500hpa温差 + const deltaTInit = () => { + creates.deltaT = new HighChartCreate('deltaTChart'); + creates.deltaT.setChart(); + creates.deltaT.setXAxis( '时间（时/分）', false); + creates.deltaT.setYAxis('deltaT（℃）', 1000, 300, 100,8); + creates.deltaT.setLegend(); + creates.deltaT.setTooltip('{point.category}: {point.y}(℃)'); + creates.deltaT.setSeries('deltaT') + creates.deltaT.init(); + } + + //绘制0度层高度 + const zeroHeightInit = () => { + creates.zeroHeight = new HighChartCreate('zeroHeightChart'); + creates.zeroHeight.setChart(); + creates.zeroHeight.setXAxis( '时间（时/分）', false); + creates.zeroHeight.setYAxis('hgt_0(m)', 10, 0, 1,11); + creates.zeroHeight.setLegend(); + creates.zeroHeight.setTooltip('{point.category}: {point.y}(m)'); + creates.zeroHeight.setSeries('hgt_0') + creates.zeroHeight.init(); + } + + //绘制-20度层高度 + const NegativeTwentyHeightInit = () => { + creates.NegativeTwentyHeight = new HighChartCreate('NegativeTwentyHeightChart'); + creates.NegativeTwentyHeight.setChart(); + creates.NegativeTwentyHeight.setXAxis( '时间（时/分）', false); + creates.NegativeTwentyHeight.setYAxis('hgt_-20(m)', 20, -20, 5,9); + creates.NegativeTwentyHeight.setLegend(); + creates.NegativeTwentyHeight.setTooltip('{point.category}: {point.y}(m)'); + creates.NegativeTwentyHeight.setSeries('hgt_-20') + creates.NegativeTwentyHeight.init(); + } + const onRegionClick = (region) => { options.currentRegion = region; } @@ -282,6 +474,7 @@ export default { changeColor() }, 0) } + reloadChangeData() } //初始化时间轴 @@ -319,9 +512,11 @@ export default { } const onTimeClick = (time, index) => { + options.currentHour = time.hour.substring(0, 2) options.currentTime = time.date; options.titleStartTime = moment(time.date).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:ss') options.titleEndTime = time.date + options.date = moment(time.date).format('YYYY-MM-DD') reloadChangeData() } @@ -388,6 +583,12 @@ export default { } else if (options.currentTab === 'shixu') { convectiveIndexCAPEData() convectiveIndexCINData() + kIndexApi() + sandIndexApi() + airPressureApi() + deltaTApi() + zeroHeightApi() + NegativeTwentyHeightApi() } } @@ -410,19 +611,24 @@ export default { clearBoxDrawer(drawers.abnormalDrawer); if (response.code != 200 || response.data.radar_data.length === 0) { createEmptyCanvas('original-data-canvas', 1500, 500); - createEmptyCanvas('abnormal-canvas', 1500, 500); + // createEmptyCanvas('abnormal-canvas', 1500, 500); return; } drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-canvas', '℃'); - drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', '℃'); + // drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', '℃'); // options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image; // options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image; }) } const reloadQualityInterpolation = () => { - const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); - const params = prepareApiParams(401, startTime, options.titleEndTime); + options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + if (options.currentTab==='shixu_BPFY') { + if (options.currentElement === 'six-minute') { + options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + } + } + const params = prepareApiParams(401, options.specialStartTime, options.titleEndTime); get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => { clearBoxDrawer(drawers.interpolateDrawer); if (response.code != 200 || response.data.radar_data.length === 0) { @@ -439,10 +645,14 @@ export default { // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image; }) } + //BP反演相对湿度 const reloadBPRelativeHumidity = () => { - const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); - const params = prepareApiParams(404, startTime, options.titleEndTime); + options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + if (options.currentElement === 'six-minute') { + options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + } + const params = prepareApiParams(404, options.specialStartTime, options.titleEndTime); get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => { clearBoxDrawer(drawers.BPRelativeHumidity); if (response.code != 200 || response.data.radar_data.length === 0) { @@ -453,10 +663,14 @@ export default { // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image; }) } + //水汽密度 const reloadBPVaporDensity = () => { - const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); - const params = prepareApiParams(402, startTime, options.titleEndTime); + options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + if (options.currentElement === 'six-minute') { + options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + } + const params = prepareApiParams(402, options.specialStartTime, options.titleEndTime); get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => { clearBoxDrawer(drawers.BPVaporDensity); if (response.code != 200 || response.data.radar_data.length === 0) { @@ -472,7 +686,8 @@ export default { const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); const params = prepareApiParams(401, startTime, options.titleEndTime); get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => { - creates.verticalProfile.updateSeries(0, getVerticalProfileResponseData(response)); + // creates.verticalProfile.updateSeries(0, getVerticalProfileResponseData(response)); + creates.verticalProfileTemp.updateSeries(0,getVerticalProfileResponseData(response)) }) } @@ -480,7 +695,8 @@ export default { const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); const params = prepareApiParams(402, startTime, options.titleEndTime); get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => { - creates.verticalProfile.updateSeries(2, getVerticalProfileResponseData(response)); + // creates.verticalProfile.updateSeries(2, getVerticalProfileResponseData(response)); + creates.verticalProfileVaporDensity.updateSeries(0, getVerticalProfileResponseData(response)); }) } @@ -488,17 +704,22 @@ export default { const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); const params = prepareApiParams(404, startTime, options.titleEndTime); get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => { - creates.verticalProfile.updateSeries(1, getVerticalProfileResponseData(response)); + // creates.verticalProfile.updateSeries(1, getVerticalProfileResponseData(response)); + creates.verticalProfileRelativeHumidity.updateSeries(0,getVerticalProfileResponseData(response)) }) } + const getVerticalProfileResponseData = (response) => { if (response.code != 200 || response.data == null || response.data.radar_data.length === 0) { options.BPTitleTime = null; verify(); return []; } - creates.verticalProfile.updateXAxis(response.data.radar_info.map(r => r.col_factor)); + // creates.verticalProfile.updateXAxis(response.data.radar_info.map(r => r.col_factor)); + creates.verticalProfileTemp.updateXAxis(response.data.radar_info.map(r => r.col_factor)) + creates.verticalProfileVaporDensity.updateXAxis(response.data.radar_info.map(r => r.col_factor)) + creates.verticalProfileRelativeHumidity.updateXAxis(response.data.radar_info.map(r => r.col_factor)) // verticalProfileHighChart.xAxis[0].setCategories(response.data.radar_info.map(r => r.col_factor)); response.data.radar_data.sort((x, y) => { return moment(x.data_time).isBefore(moment(y.data_time)); @@ -531,6 +752,71 @@ export default { creates.convectiveIndexProfileTimeChartCIN.updateXAxis(data[1], 0) }) } + //K-index + const kIndexApi = () => { + const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + const params = prepareApiParams('K', startTime, options.titleEndTime); + get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => { + let data = convectiveIndexResponseData(response); + creates.kIndexChart.updateSeries(0,data[0]) + creates.kIndexChart.updateXAxis(data[1], 0) + }) + } + + //沙式指数 + const sandIndexApi = () => { + const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + const params = prepareApiParams('SI', startTime, options.titleEndTime); + get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => { + let data = convectiveIndexResponseData(response); + creates.sandIndex.updateSeries(0,data[0]) + creates.sandIndex.updateXAxis(data[1], 0) + }) + } + + //LCL气压 + const airPressureApi = () => { + const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + const params = prepareApiParams('LCL_pres', startTime, options.titleEndTime); + get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => { + let data = convectiveIndexResponseData(response); + creates.airPressure.updateSeries(0,data[0]) + creates.airPressure.updateXAxis(data[1], 0) + }) + } + + //850hpa和500hpa温差 + const deltaTApi = () => { + const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + const params = prepareApiParams('LCL_pres', startTime, options.titleEndTime); + get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => { + let data = convectiveIndexResponseData(response); + creates.deltaT.updateSeries(0,data[0]) + creates.deltaT.updateXAxis(data[1], 0) + }) + } + + //绘制0度层高度 + const zeroHeightApi = () => { + const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + const params = prepareApiParams('hgt_0', startTime, options.titleEndTime); + get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => { + let data = convectiveIndexResponseData(response); + creates.zeroHeight.updateSeries(0,data[0]) + creates.zeroHeight.updateXAxis(data[1], 0) + }) + } + + //绘制-20度层高度 + const NegativeTwentyHeightApi = () => { + const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00'); + const params = prepareApiParams('hgt_-20', startTime, options.titleEndTime); + get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => { + let data = convectiveIndexResponseData(response); + creates.NegativeTwentyHeight.updateSeries(0,data[0]) + creates.NegativeTwentyHeight.updateXAxis(data[1], 0) + }) + } const convectiveIndexResponseData = (response) => { if (response.code != 200 || response.data == null || response.data.radar_data.length === 0) { @@ -626,32 +912,84 @@ export default { diff --git a/04.系统编码/Frontend/src/components/SystemManagement.vue b/04.系统编码/Frontend/src/components/SystemManagement.vue index 51329a9..6bab266 100644 --- a/04.系统编码/Frontend/src/components/SystemManagement.vue +++ b/04.系统编码/Frontend/src/components/SystemManagement.vue @@ -92,7 +92,7 @@ import {post} from "../uilts/axios"; import {ElMessage} from 'element-plus' import {format} from '../uilts/String'; -import { decrypt, encrypt } from '../uilts/Coder'; + import { decrypt, encrypt } from '../uilts/Coder'; export default { name: 'SystemManagement', diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less index 983bf6a..68e8e7e 100644 --- a/04.系统编码/Frontend/src/index.less +++ b/04.系统编码/Frontend/src/index.less @@ -168,7 +168,7 @@ img { position: relative; .toolbar { - //padding-top: 0.25rem; + margin: 0 0.25rem; display: flex; align-items: center; @@ -178,10 +178,7 @@ img { display: flex; margin-right: 0.2rem; align-items: center; - padding-bottom: 0.12rem; - //border-left: 1px solid #666666; - //border-right: 1px solid #666666; - //background-color: #ECF4FF; + padding-bottom: 0.07rem; div:first-child { span:last-child { border-radius: 0.05rem 0 0 0.05rem; @@ -250,17 +247,6 @@ img { } } } - - //.first-hour::before, .time-item .time::before { - // content: ''; - // width: 1px; - // height: 100%; - // display: block; - // position: absolute; - // left: -1px; - // bottom: 0; - // background-color: #666666; - //} } .halfHour { @@ -298,6 +284,7 @@ img { } .date-picker { + width: 1.44rem; height: 0.33rem; line-height: normal; @@ -384,8 +371,7 @@ img { .times { .time-item { .time { - line-height: 0.46rem; - + //line-height: 0.46rem; } } } @@ -427,13 +413,14 @@ img { //} .picture-container { + height: 100%; display: flex; - flex-direction: column; + //flex-direction: column; justify-content: center; - + align-content: center; .picture { - height: 100%; + //height: 100%; //.el-image { // height: 100%; @@ -442,9 +429,9 @@ img { } .picture { - //width: 100%; - //height: calc(~"100% - 1.1rem"); - //margin: 0 auto; + width: 100%; + height: calc(~"100% - 1.1rem"); + margin: 0 auto; display: flex; align-items: center; justify-content: center; diff --git a/04.系统编码/Frontend/src/model/constant.ts b/04.系统编码/Frontend/src/model/constant.ts index aea9397..c1cedc4 100644 --- a/04.系统编码/Frontend/src/model/constant.ts +++ b/04.系统编码/Frontend/src/model/constant.ts @@ -1,3 +1,6 @@ export class Constant{ public static readonly baseUrl: string = 'http://rdp.nagr.com.cn:18080'; +} +export class ConstantRamanLidar{ + public static readonly baseUrl: string = 'http://112.124.40.88:5511/'; } \ No newline at end of file diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts index a27975c..9bac4b5 100644 --- a/04.系统编码/Frontend/src/model/high-chart-create.ts +++ b/04.系统编码/Frontend/src/model/high-chart-create.ts @@ -31,7 +31,8 @@ export class HighChartCreate { text: text, style: { color: '#000000', - fontSize: '18px' + fontSize: '14px', + fontFamily: 'Verdana' } }, categories: [], @@ -46,7 +47,8 @@ export class HighChartCreate { text: text, style: { color: '#000000', - fontSize: '18px' + fontSize: '14px', + fontFamily: 'Verdana' } }, max: max, @@ -58,11 +60,12 @@ export class HighChartCreate { }); } - public setLegend(){ + public setLegend(enabled: boolean = false){ this.legend = { layout: 'vertical', align: 'right', - verticalAlign: 'middle' + verticalAlign: 'middle', + enabled: enabled } } @@ -125,4 +128,5 @@ export class HighChartCreate { public updateXAxis(categories: Array, index: number = 0){ this.highChart.xAxis[index].setCategories(categories); } -} \ No newline at end of file +} + diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts index 86e5181..648e019 100644 --- a/04.系统编码/Frontend/src/uilts/box-drawer.ts +++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts @@ -75,7 +75,7 @@ export class BoxDrawer{ let startY = this.paddingTop + this.verticalScaleLine + heightInterval; let interval = (this.borderHeight - heightInterval) / (this.colorChart.colors.length) - this.canvasContext.font = "normal 20px Verdana"; + this.canvasContext.font = "normal 24px Verdana"; this.canvasContext.fillStyle = "#000000"; for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){ @@ -300,7 +300,7 @@ export class BoxDrawer{ this.canvasContext.stroke(); if (flag){ - this.canvasContext.font = "normal 20px Verdana"; + this.canvasContext.font = "normal 30px Verdana"; this.canvasContext.fillStyle = "#000000"; const text = moment(this.values.radar_data[index].data_time).format("HH:mm"); this.canvasContext.fillText(text, _x - this.canvasContext.measureText(text).width / 2, startY + yInterval + this.borderHeight + 36); @@ -330,7 +330,7 @@ export class BoxDrawer{ this.canvasContext.stroke(); if (flag) { - this.canvasContext.font = "normal 20px Verdana"; + this.canvasContext.font = "normal 30px Verdana"; this.canvasContext.fillStyle = "#000000"; const text = this.values.radar_info[index].col_factor; this.canvasContext.fillText(text, startX - this.canvasContext.measureText(text).width - this.horizontalScaleLine, _y + 10);