From 68ed8f5710eff2b6e96864da03df27ab8cc33c7d Mon Sep 17 00:00:00 2001 From: xuhuihui <3548508071@qq.com> Date: Mon, 28 Feb 2022 09:28:10 +0800 Subject: [PATCH] commit --- 04.系统编码/Frontend/index.html | 5 +- 04.系统编码/Frontend/package-lock.json | 14 +- 04.系统编码/Frontend/package.json | 2 +- 04.系统编码/Frontend/public/favicon.ico | Bin 9662 -> 4286 bytes .../src/components/MicrowaveRadiation.vue | 474 ++++++- .../Frontend/src/components/RamanLidar.vue | 1115 +++++++++++------ .../src/components/SystemManagement.vue | 2 +- 04.系统编码/Frontend/src/index.less | 35 +- .../Frontend/src/model/constant.ts | 3 + .../Frontend/src/model/high-chart-create.ts | 14 +- .../Frontend/src/uilts/box-drawer.ts | 6 +- 11 files changed, 1174 insertions(+), 496 deletions(-) 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 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <link rel="icon" href="/images/logo.png" /> + <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>南京生态环境评估决策平台</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> -</body> + + </body> </html> 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 4a45747c25205f2f2cdc2f65a20f680bd48979f2..92dc57c2d7d6175e81c7204a0949b4822feef763 100644 GIT binary patch literal 4286 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 BB_{v? literal 9662 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 X652^7Gvh_<SQ6MZw6g|I(V#y9Sc0|* 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 @@ <div class="menu-item"> <h2 class="tip">区域选择</h2> <el-row :gutter="12"> - <el-col :span="8"><span :class="{'active': currentRegion === 'jiangning'}" - @click="onRegionClick('jiangning')">江宁</span></el-col> + <el-col :span="8"><span :class="{'active': currentRegion === 'jiang-ning'}" + @click="onRegionClick('jiang-ning')">江宁</span></el-col> + <el-col :span="8"><span :class="{'active': currentRegion === 'liu-he'}" + @click="onRegionClick('liu-he')">六合</span></el-col> + <el-col :span="8"><span :class="{'active': currentRegion === 'pu-kou'}" + @click="onRegionClick('pu-kou')">浦口</span></el-col> + <el-col :span="8"><span :class="{'active': currentRegion === 'gao-chun'}" + @click="onRegionClick('gao-chun')">高淳</span></el-col> + <el-col :span="8"><span :class="{'active': currentRegion === 'li-shui'}" + @click="onRegionClick('li-shui')">溧水</span></el-col> </el-row> </div> <div class="menu-item"> @@ -93,51 +101,96 @@ <div class="picture-view"> <!--质控对比--> - <div v-if="currentTab === 'MWR'" class="picture-container contrast-picture-container"> + <div v-if="currentTab === 'MWR'" class="picture-container contrast-picture-container picture-MWR"> + <div class="picture"> - <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2> + <h2 class="title">质控前</h2> <canvas id='original-data-canvas'></canvas> </div> - <div class="picture"> - <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2> - <canvas id='abnormal-canvas'></canvas> - </div> - <div class="picture"> - <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2> + +<!-- <div class="picture">--> +<!-- <h2 class="title">温度异常值标记</h2>--> +<!-- <canvas id='abnormal-canvas'></canvas>--> +<!-- </div>--> + + + <div class="picture"> + <h2 class="title">质控后</h2> <canvas id='interpolate-canvas'></canvas> - </div> + </div> + + + </div> <!--BP反演产品--> - <div v-if="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container"> - <div class="picture"> - <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演温度</h2> + <div v-if="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container shiXuBP"> + <div class="BPPicture picture"> + <h2 class="title">BP反演温度</h2> <canvas id="BP-temp"></canvas> </div> - <div class="picture"> - <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演相对湿度</h2> + <div class="BPPicture picture"> + <h2 class="title">BP反演相对湿度</h2> <canvas id="BP-relative-humidity"></canvas> </div> - <div class="picture"> - <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演水汽密度</h2> + <div class="BPPicture picture"> + <h2 class="title">BP反演水汽密度</h2> <canvas id="BP-vapor-density"></canvas> </div> </div> - <div v-if="currentTab === 'kuoxian'" class="picture-container contrast-picture-container"> - <h2>{{ BPTitleTime }}温度、相对湿度、水汽密度廓线</h2> - <div id="container" style="width:100%;height:100%"></div> + <div v-if="currentTab === 'kuoxian'" class="verticalProfile"> + + <div class="verticalProfile-picture"> + <h2 class="verticalProfileTitle">温度廓线</h2> + <div id="verticalProfileTemp" style="width: 400px;height: 400px"></div> + </div> + + <div class="verticalProfile-picture"> + <h2 class="verticalProfileTitle">相对湿度廓线</h2> + <div id="verticalProfileRelativeHumidity" style="width: 400px;height: 400px"></div> + </div> + + <div class="verticalProfile-picture"> + <h2 class="verticalProfileTitle">水汽密度廓线</h2> + <div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div> + </div> </div> - <div v-if="currentTab === 'shixu'" class="picture-container contrast-picture-container"> - <div class="picture"> - <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}对流有效位能CAPE</h2> - <div id="convectiveHighChartCAPE" style="width:100%;height:75%"></div> + <div v-if="currentTab === 'shixu'" class="picture-container contrast-picture-container shiXu"> + <div class="picture" style="margin-top: 570px"> + <h2 class="title">对流有效位能CAPE</h2> + <div id="convectiveHighChartCAPE" style="width: 100%;height:75%"></div> + </div> + + <div class="picture" style="margin-top: 570px"> + <h2 class="title">K指数</h2> + <div id="kIndexChart" style="width: 100%;height:75%"></div> </div> <div class="picture"> - <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}对流抑制势能CIN</h2> + <h2 class="title">对流抑制势能CIN</h2> <div id="convectiveHighChartCIN" style="width:100%;height:75%"></div> </div> + <div class="picture"> + <h2 class="title">沙式指数</h2> + <div id="sandIndexChart" style="width:100%;height:75%"></div> + </div> + <div class="picture"> + <h2 class="title">LCL气压</h2> + <div id="airPressureChart" style="width:100%;height:75%"></div> + </div> + <div class="picture"> + <h2 class="title">850hpa和500hpa温差</h2> + <div id="deltaTChart" style="width:100%;height:75%"></div> + </div> + <div class="picture"> + <h2 class="title">0度层高度</h2> + <div id="zeroHeightChart" style="width:100%;height:75%"></div> + </div> + <div class="picture"> + <h2 class="title">-20度层高度</h2> + <div id="NegativeTwentyHeightChart" style="width:100%;height:75%"></div> + </div> </div> <div v-if="currentTab === 'T-logP'" class="picture-container contrast-picture-container"> @@ -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 { </script> <style lang="less" scoped> .main { - .container { + + .verticalProfile { + width: 100%; + height: 100%; + display: flex; + justify-content: space-evenly; + align-items: center; + + .verticalProfile-picture { + position: relative; + + .verticalProfileTitle { + position: absolute; + font-size: 0.22rem; + left: 1.97rem; + top: -0.38rem; + } + } + } + + :deep(.el-date-editor), .control-btn, :deep(.el-select), .unit { + padding-top: 0.06rem; + } + .contrast-picture-container { + width: calc(~"100% - 2.5rem"); margin: 0 auto; - align-items: center; + //width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; .picture { - width: 100%; - //flex-direction: column; + width: 45%; + height: 45%; position: relative; - #original-data-canvas, #abnormal-canvas, #interpolate-canvas, - #BP-temp, #BP-relative-humidity, #BP-vapor-density { - transform: scale(0.5, 0.4); + #original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas { + transform: scale(0.38, 0.4); } + .title { - //padding-bottom: 0; + width: 100%; font-size: 0.22rem; position: absolute; - left: 3.90rem; + left: 3.10rem; top: 0; z-index: 100; } } + .BPPicture { + width: 65% !important; + height: 45%; + position: relative; + #BP-temp, #BP-relative-humidity, #BP-vapor-density{ + transform: scale(0.40, 0.4); + } + .title { + left: 4.35rem!important; + } + } + } + .shiXu { + overflow-y: scroll; + width: 100% !important; + } + .shiXuBP { + flex-flow: column; + align-content: space-around !important; + } + .picture-MWR { + width: 100%; + height: 100%; + display: flex; } } } diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue index 63fba51..83adc25 100644 --- a/04.系统编码/Frontend/src/components/RamanLidar.vue +++ b/04.系统编码/Frontend/src/components/RamanLidar.vue @@ -1,439 +1,784 @@ <template> - <div class="tabs"></div> - <div class="main"> - <div class="menu panel"> - <div class="menu-item"> - <h2 class="tip">区域选择</h2> - <el-row :gutter="12"> - <el-col :span="8"><span @click="onRegionClick('jiangning')" :class="{'active': currentRegion === 'jiangning'}">江宁</span></el-col> - <el-col :span="8"><span @click="onRegionClick('liuhe')" :class="{'active': currentRegion === 'liuhe'}">六合</span></el-col> - <el-col :span="8"><span @click="onRegionClick('pukou')" :class="{'active': currentRegion === 'pukou'}">浦口</span></el-col> - </el-row> - </div> - <!-- layertype --> - <div class="menu-item"> - <h2 class="tip">要素选择</h2> - <el-row :gutter="12"> - <el-col :span="24"><span @click="onElementClick('PBLH', '边界层高度')" :class="{'active': currentElement === 'PBLH'}">边界层高度</span></el-col> - <el-col :span="24"><span @click="onElementClick('opticalthickness', '光学厚度')" :class="{'active': currentElement === 'opticalthickness'}">光学厚度</span></el-col> - <el-col :span="24"><span @click="onElementClick('Lidar_ratio', '激光雷达比')" :class="{'active': currentElement === 'Lidar_ratio'}">激光雷达比</span></el-col> - <el-col :span="24"><span @click="onElementClick('PM', '气溶胶PM')" :class="{'active': currentElement === 'PM'}">气溶胶PM</span></el-col> - <el-col :span="24"><span @click="onElementClick('ext_plot', '消光系数')" :class="{'active': currentElement === 'ext_plot'}">消光系数</span></el-col> - <el-col :span="24"><span @click="onElementClick('layertype', '云气溶胶分类')" :class="{'active': currentElement === 'layertype'}">云气溶胶分类</span></el-col> - <el-col :span="24"><span @click="onElementClick('wv_plot', '水汽')" :class="{'active': currentElement === 'wv_plot'}">水汽</span></el-col> - <el-col :span="24"><span @click="onElementClick('cloudheight', '云高')" :class="{'active': currentElement === 'cloudheight'}">云高</span></el-col> - </el-row> - </div> + <div class="tabs"> + <div :class="{'active': currentTab === 'MWR'}" class="tab-item" @click="onTabClick('MWR')"> + 质控对比 + <img v-if="currentTab === 'MWR'" src="/images/line.png"/> + </div> + <div :class="{'active': currentTab === 'boundary-layer-height'}" class="tab-item" @click="onTabClick('boundary-layer-height')"> + 水汽 + <img v-if="currentTab === 'boundary-layer-height'" src="/images/line.png"/> + </div> + <div :class="{'active': currentTab === 'optical-property'}" class="tab-item" @click="onTabClick('optical-property')"> + 光学特性 + <img v-if="currentTab === 'optical-property'" src="/images/line.png"/> + </div> + <div :class="{'active': currentTab === 'aerosol-product'}" class="tab-item" @click="onTabClick('aerosol-product')"> + 气溶胶产品 + <img v-if="currentTab === 'aerosol-product'" src="/images/line.png"/> + </div> + <div :class="{'active': currentTab === 'BingoCloud'}" class="tab-item" @click="onTabClick('BingoCloud')"> + 云产品 + <img v-if="currentTab === 'BingoCloud'" src="/images/line.png"/> + </div> + </div> + + <div class="main"> + <div class="menu panel"> + <div class="menu-item"> + <h2 class="tip">区域选择</h2> + <el-row :gutter="12"> + <el-col :span="8"><span @click="onRegionClick('jiangning')" + :class="{'active': currentRegion === 'jiangning'}">江宁</span></el-col> + <el-col :span="8"><span @click="onRegionClick('liuhe')" + :class="{'active': currentRegion === 'liuhe'}">六合</span></el-col> + <el-col :span="8"><span @click="onRegionClick('pukou')" + :class="{'active': currentRegion === 'pukou'}">浦口</span></el-col> + </el-row> + </div> + + <!-- layertype --> + <div class="menu-item"> + <h2 class="tip">要素选择</h2> +<!-- <el-row :gutter="12">--> +<!-- <el-col :span="24"><span @click="onElementClick('PBLH', '边界层高度')"--> +<!-- :class="{'active': currentElement === 'PBLH'}">边界层高度</span></el-col>--> +<!-- <el-col :span="24"><span @click="onElementClick('opticalthickness', '光学厚度')"--> +<!-- :class="{'active': currentElement === 'opticalthickness'}">光学厚度</span></el-col>--> +<!-- <el-col :span="24"><span @click="onElementClick('Lidar_ratio', '激光雷达比')"--> +<!-- :class="{'active': currentElement === 'Lidar_ratio'}">激光雷达比</span></el-col>--> +<!-- <el-col :span="24"><span @click="onElementClick('PM', '气溶胶PM')" :class="{'active': currentElement === 'PM'}">气溶胶PM</span>--> +<!-- </el-col>--> +<!-- <el-col :span="24"><span @click="onElementClick('ext_plot', '消光系数')"--> +<!-- :class="{'active': currentElement === 'ext_plot'}">消光系数</span></el-col>--> +<!-- <el-col :span="24"><span @click="onElementClick('layertype', '云气溶胶分类')"--> +<!-- :class="{'active': currentElement === 'layertype'}">云气溶胶分类</span></el-col>--> +<!-- <el-col :span="24"><span @click="onElementClick('wv_plot', '水汽')"--> +<!-- :class="{'active': currentElement === 'wv_plot'}">水汽</span></el-col>--> +<!-- <el-col :span="24"><span @click="onElementClick('cloudheight', '云高')"--> +<!-- :class="{'active': currentElement === 'cloudheight'}">云高</span></el-col>--> +<!-- </el-row>--> + </div> + </div> + + <div class="container panel"> + <div class="toolbar day-toolbar"> + <div class="times"> + <div class="time-item" v-for="(time, index) in times" :key="index" + :class="{'active': currentTime === time.date}"> + <span class="time" @click="onTimeClick(time, index)">{{ time.day }}</span> + </div> + </div> + <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" + class="date-picker" @change="onChange"> + </el-date-picker> + <div class="control-btn"> + <span @click="onPrevDayClick"><img src="/images/prev.png"/></span> + <span @click="onNextDayClick"><img src="/images/next.png"/></span> </div> - <div class="container panel"> - <div class="toolbar day-toolbar"> - <div class="times"> - <div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}"> - <span class="time" @click="onTimeClick(time, index)">{{time.day}}</span> - </div> - </div> - <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker" @change="onChange"> - </el-date-picker> - <div class="control-btn"> - <span @click="onPrevDayClick"><img src="/images/prev.png" /></span> - <span @click="onNextDayClick"><img src="/images/next.png" /></span> - </div> - <div class="refresh-btn" @click="onRefreshClick"> - <img src="/images/refresh.png" /> - </div> - <div class="btns-group"> - <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span> - <a @click="onDownloadClick">下载动画</a> - <a id="radarDownload" :href="downloadSrc" download style="display: none;">下载隐藏层</a> - </div> - </div> - <div class="picture-view"> - <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span> - <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span> - <!-- <span class="save-btn" @click="onSaveClick" v-if="currentElement === 'PBLH'"><img src="/images/save.png" /></span> --> - <a :href="downloadImgUrl" download class="save-btn" v-if="currentElement !== 'PBLH'"><img src="/images/save.png" /></a> - <div class="download-pictures hide" id="pictures"> - <a v-for="(url, index) in urls" :key="index" download></a> - </div> - <div class="picture-container raman-picture-container"> - <!-- <h2 class="title">{{title}}</h2> --> - <div class="picture"> - <el-image - :src="imgUrl" - :preview-src-list="previewUrl" - :initial-index="1" - fit="contain" - @load="onImageLoad" - :class="{'pblh-image': currentElement === 'PBLH'}" - > - <template #error> - <div class="image-slot"> - <img src="/images/null-picture.png" /> - </div> - <p class="image-tip">暂无图片</p> - </template> - <template #placeholder> - <div class="image-placeholder">正在加载...</div> - </template> - </el-image> - <el-image - :src="signalPBLHImgUrl" - :preview-src-list="signalPBLHPreviewUrl" - :initial-index="1" - fit="contain" - @load="onImageLoad" - v-if="currentElement === 'PBLH'" - :class="{'pblh-image': currentElement === 'PBLH'}" - > - <template #error> - <div class="image-slot"> - <img src="/images/null-picture.png" /> - </div> - <p class="image-tip">暂无图片</p> - </template> - <template #placeholder> - <div class="image-placeholder">正在加载...</div> - </template> - </el-image> - </div> - </div> - </div> + <!-- <div class="refresh-btn" @click="onRefreshClick">--> + <!-- <img src="/images/refresh.png"/>--> + <!-- </div>--> + <!-- <div class="btns-group">--> + <!-- <span @click="onPlayClick">{{ isPlay ? '暂停动画' : '播放动画' }}</span>--> + <!-- <a @click="onDownloadClick">下载动画</a>--> + <!-- <a id="radarDownload" :href="downloadSrc" download style="display: none;">下载隐藏层</a>--> + <!-- </div>--> + </div> + <div class="picture-view"> + <!-- <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>--> + <!-- <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>--> + <!-- <!– <span class="save-btn" @click="onSaveClick" v-if="currentElement === 'PBLH'"><img src="/images/save.png" /></span> –>--> + <!-- <a :href="downloadImgUrl" download class="save-btn" v-if="currentElement !== 'PBLH'"><img src="/images/save.png" /></a>--> + <!-- <div class="download-pictures hide" id="pictures">--> + <!-- <a v-for="(url, index) in urls" :key="index" download></a>--> + <!-- </div>--> + <div class="picture-container raman-picture-container" v-show="currentTab === 'boundary-layer-height'"> + <div class="picture"> + <h2>水汽</h2> + </div> </div> + + <div class="picture-container raman-picture-container" v-show="currentTab === 'optical-property'"> + <div class="picture"> + <h2 class="title">激光雷达比</h2> + <div id="LidarRatio" style="width: 650px;height: 450px"></div> + </div> + <div class="picture"> + <h2 class="title">光学厚度</h2> + </div> + <div class="picture"> + <h2 class="title">消光系数</h2> + </div> + </div> + + <div class="picture-container raman-picture-container" v-show="currentTab === 'aerosol-product'"> + <div class="picture"> + <h2 class="title">边界层高度</h2> + <div id="BoundaryLayerHeight" style="width: 650px;height: 450px"></div> + </div> + <div class="picture"> + <h2 class="title">气溶胶PM</h2> + </div> + + <div class="picture"> + <h2 class="title">边界层特征值</h2> + </div> + </div> + + <div class="picture-container raman-picture-container" v-show="currentTab === 'BingoCloud'"> + <div class="picture"> + <h2 class="title">云气溶胶分类</h2> + </div> + <div class="picture"> + <h2 class="title">云层高度</h2> + <div id="cloudsHeight" style="width: 650px;height: 450px"></div> + </div> + <div class="picture"> + <h2 class="title">云顶高度</h2> + <div id="cloudTopHeight" style="width: 650px;height: 450px"></div> + </div> + </div> + + <div class="picture-container raman-picture-container" v-show="currentTab === 'MWR'"> + <div class="picture"> + <h2 class="title">云的识别</h2> + </div> + <div class="picture"> + <h2 class="title">消光系数</h2> + </div> + <div class="picture"> + <h2 class="title">水汽</h2> + </div> + </div> + </div> + </div> + </div> </template> <script lang="ts"> - import { onMounted, reactive, toRefs } from 'vue'; - import moment from "moment"; - import { RamanLidarConfig } from '../uilts/Config'; - import { post } from '../uilts/axios'; - - export default { - name: 'RamanLidar', - setup() { - let timer = null; - let options = reactive({ - currentRegion: 'jiangning', - currentElement: 'PBLH', - currentType: '边界层高度', - date: moment('2021-11-15').format('YYYY-MM-DD'), - times: [], - currentTime: null, - downloadImgUrl: '/images/default-picture.png', - imgUrl: '/images/default-picture.png', - signalPBLHImgUrl: '/images/default-picture.png', - previewUrl: [], - signalPBLHPreviewUrl: [], - isPlay: false, - title: null, - index: 0, - downloadSrc: null, - urls: [] - }) - - onMounted(() => { - initTimeLine(); - setTitle(moment(options.date, 'YYYY-MM-DD')); - setTimeout(() => { - activeImage(); - }, 50); - }) - - const onRegionClick = (region) => { - options.currentRegion = region; - options.date = options.currentTime; - - cancelActive(); - setTitle(moment(options.date)); - activeImage(); - } +import {onMounted, reactive, toRefs} from 'vue'; +import moment, {min} from "moment"; +import {RamanLidarConfig} from '../uilts/Config'; +import {post} from '../uilts/axios'; +import {ElMessage} from "element-plus"; +import * as Highcharts from 'highcharts'; +import {ConstantRamanLidar} from "../model/constant"; +import {get} from '../uilts/axios'; +import {HighChartCreate} from "../model/high-chart-create"; +import {BoxDrawer, ColorChart, createEmptyCanvas} from "../uilts/box-drawer"; + +export default { + name: 'RamanLidar', + setup() { + let timer = null; + let creates: { + boundaryLayerHeight: HighChartCreate + cloudsHeight: HighChartCreate + cloudTopHeight: HighChartCreate + LidarRatio: HighChartCreate + } = { + boundaryLayerHeight: null, + cloudsHeight: null, + cloudTopHeight: null, + LidarRatio: null + } + let options = reactive({ + currentTab: 'MWR', + currentRegion: 'jiangning', + currentElement: 'PBLH', + currentType: '边界层高度', + date: moment('2021-12-14').format('YYYY-MM-DD'), + times: [], + currentTime: null, + downloadImgUrl: '/images/default-picture.png', + imgUrl: '/images/default-picture.png', + signalPBLHImgUrl: '/images/default-picture.png', + previewUrl: [], + signalPBLHPreviewUrl: [], + isPlay: false, + title: null, + index: 0, + downloadSrc: null, + urls: [], + boundaryLayerHeightList: [], + LidarRatioList: [], + cloudsHeightList: [], + cloudTopHeightList: [] + }) + + onMounted(() => { + initTimeLine(); + setTitle(moment(options.date, 'YYYY-MM-DD')); + setTimeout(() => { + activeImage(); + }, 50) + }) + + //边界层高度 + const boundaryLayerHeightInit = () => { + creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight'); + creates.boundaryLayerHeight.setChart(); + creates.boundaryLayerHeight.setXAxis('时间(分钟)', false); + creates.boundaryLayerHeight.setYAxis('边界层高度(米)', 3000, 0, 500, 7); + creates.boundaryLayerHeight.setLegend(); + creates.boundaryLayerHeight.setTooltip('{point.category}: {point.y}(m)'); + creates.boundaryLayerHeight.setSeries('边界层高度') + creates.boundaryLayerHeight.init(); + } - const onElementClick = (element, type) => { - options.currentElement = element; - options.currentType = type; - options.date = options.currentTime; + //云层高度 + const cloudsHeightInit = () => { + creates.cloudsHeight = new HighChartCreate('cloudsHeight'); + creates.cloudsHeight.setChart(false,'scatter'); + creates.cloudsHeight.setXAxis('时间(分钟)', false); + creates.cloudsHeight.setYAxis('高度(米)', 14000, 0, 2000, 8); + creates.cloudsHeight.setLegend(); + creates.cloudsHeight.setTooltip('{point.category}: {point.y}(m)'); + creates.cloudsHeight.setSeries('云层高度') + creates.cloudsHeight.init(); + } + //云顶高度 + const cloudTopHeightInit = () => { + creates.cloudTopHeight = new HighChartCreate('cloudTopHeight'); + creates.cloudTopHeight.setChart(false,'scatter'); + creates.cloudTopHeight.setXAxis('时间(分钟)', false); + creates.cloudTopHeight.setYAxis('高度(米)', 14000, 0, 2000, 8); + creates.cloudTopHeight.setLegend(); + creates.cloudTopHeight.setTooltip('{point.category}: {point.y}(m)'); + creates.cloudTopHeight.setSeries('云顶高度') + creates.cloudTopHeight.init(); + } - cancelActive(); - setTitle(moment(options.date)); - activeImage(); - } + //激光雷达比 + const LidarRatioInit = () => { + creates.LidarRatio = new HighChartCreate('LidarRatio'); + creates.LidarRatio.setChart(); + creates.LidarRatio.setXAxis('时间(分钟)', false); + creates.LidarRatio.setYAxis('边界层高度(米)', 3000, 0, 500, 7); + creates.LidarRatio.setLegend(); + creates.LidarRatio.setTooltip('{point.category}: {point.y}(m)'); + creates.LidarRatio.setSeries('激光雷达比') + creates.LidarRatio.init(); + } - const setTitle = (date) => { - options.title = date.format('YYYY.MM.DD') + ' ' + options.currentType; - } + const onTabClick = (name) => { + options.currentTab = name; + setTimeout(() => { + initEcharts(name) + reloadChangeData() + }, 500) + } - const activeImage = () => { - options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, moment(options.currentTime, 'YYYY-MM-DD')); - options.previewUrl = [options.imgUrl]; + const reloadChangeData = () => { + if (options.currentTab === 'boundary-layer-height') { + + } else if (options.currentTab === 'optical-property') { + LidarRatioApi() + } else if (options.currentTab === 'aerosol-product') { + boundaryLayerHeightDate() + // boundaryCharacteristicApi() + //aerosolApi() + } else if (options.currentTab === 'BingoCloud') { + //layerTypeApi() + cloudsHeightApi() + cloudTopHeightApi() + } else if (options.currentTab === 'MWR') { + // waterVapourApi() + } + } - options.signalPBLHImgUrl = RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, moment(options.currentTime, 'YYYY-MM-DD')); - options.signalPBLHPreviewUrl = [options.signalPBLHImgUrl]; - } + const initEcharts = (name) => { + if (name === 'boundary-layer-height') { + + } else if (name === 'optical-property') { + LidarRatioInit() + } else if (name === 'aerosol-product') { + boundaryLayerHeightInit() + } else if (name === 'BingoCloud') { + cloudsHeightInit() + cloudTopHeightInit() + } + } - const onImageLoad = (event) => { - if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png') - converToBase64(options.imgUrl); - else - return - } + //区域切换 + const onRegionClick = (region) => { + options.currentRegion = region; + options.date = options.currentTime; + cancelActive(); + setTitle(moment(options.date)); + activeImage(); + setTimeout(() => { + }, 500) + } - const onDownloadClick = () => { - post("/image/createGif", prepareParams(), 'application/json').then((response: any) => { - if (response.error != 0){ - console.log(response.message); - return; - } - - fetch(response.data).then(res => { - return res.blob(); - }).then(blob => { - let reader = new FileReader(); - reader.onloadend = function(){ - options.downloadSrc = reader.result; - - setTimeout(() => { - document.getElementById("radarDownload").click(); - options.downloadSrc = null; - }, 500); - }; - reader.readAsDataURL(blob); - }).catch(console.error); - }) - } + //要素选择 + // const onElementClick = (element, type) => { + // options.currentElement = element; + // options.currentType = type; + // options.date = options.currentTime; + // setTimeout(() => { + // }, 500) + // cancelActive(); + // setTitle(moment(options.date)); + // activeImage(); + // } + + const setTitle = (date) => { + options.title = date.format('YYYY.MM.DD') + ' ' + options.currentType; + } - const prepareParams = () => { - return { - model: 'radar', - station: options.currentRegion, - elementCode: options.currentElement, - type: null, - time: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"), - urls: prepareUrls() - } - } + const activeImage = () => { + options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, moment(options.currentTime, 'YYYY-MM-DD')); + options.previewUrl = [options.imgUrl]; - const prepareUrls = () => { - let urls = []; - for(let index = 0, len = options.times.length; index < len; index++){ - let time = moment(options.times[index].date); - - if (options.currentElement === 'PBLH') { - urls.push( - RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time), - RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, time) - ); - } else - urls.push(RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time)); - } - - console.log(urls) - return urls; - } + options.signalPBLHImgUrl = RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, moment(options.currentTime, 'YYYY-MM-DD')); + options.signalPBLHPreviewUrl = [options.signalPBLHImgUrl]; + } - const converToBase64 = (path) => { - let img = new Image(); - img.src = path; - let canvas = document.createElement("canvas") as HTMLCanvasElement; - canvas.width = img.width; - canvas.height = img.height; - - let ctx = canvas.getContext("2d"); - let base64 = ''; - - img.setAttribute("crossOrigin",'Anonymous') - img.onload = function() { - ctx.drawImage(img, 0, 0); - base64 = canvas.toDataURL("image/png"); - options.downloadImgUrl = base64; - }; - } + const onImageLoad = (event) => { + if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png') + converToBase64(options.imgUrl); + else + return + } - const initTimeLine = () => { - options.times = []; - options.currentTime = moment(options.date).format('YYYY-MM-DD'); + const onDownloadClick = () => { + post("/image/createGif", prepareParams(), 'application/json').then((response: any) => { + if (response.error != 0) { + console.log(response.message); + return; + } - let now = moment(options.date).add(1, 'day'); + fetch(response.data).then(res => { + return res.blob(); + }).then(blob => { + let reader = new FileReader(); + reader.onloadend = function () { + options.downloadSrc = reader.result; + + setTimeout(() => { + document.getElementById("radarDownload").click(); + options.downloadSrc = null; + }, 500); + }; + reader.readAsDataURL(blob); + }).catch(console.error); + }) + } - for (let i = 0; i < 15 ; i++) { - options.times.push({ - day: now.add(-1, 'day').format('DD'), - date: now.format('YYYY-MM-DD'), - }) - } + //参数准备 + const prepareParams = () => { + return { + model: 'radar', + station: options.currentRegion, + elementCode: options.currentElement, + type: null, + time: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"), + urls: prepareUrls() + } + } - options.times.reverse(); - options.index = options.times.length - 1; + const prepareUrls = () => { + let urls = []; + for (let index = 0, len = options.times.length; index < len; index++) { + let time = moment(options.times[index].date); + + if (options.currentElement === 'PBLH') { + urls.push( + RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time), + RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, time) + ); + } else + urls.push(RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time)); + } + + console.log(urls) + return urls; + } - } + const converToBase64 = (path) => { + let img = new Image(); + img.src = path; + let canvas = document.createElement("canvas") as HTMLCanvasElement; + canvas.width = img.width; + canvas.height = img.height; + + let ctx = canvas.getContext("2d"); + let base64 = ''; + + img.setAttribute("crossOrigin", 'Anonymous') + img.onload = function () { + ctx.drawImage(img, 0, 0); + base64 = canvas.toDataURL("image/png"); + options.downloadImgUrl = base64; + }; + } - const onTimeClick = (time, index) => { - options.currentTime = time.date; - options.date = time.date; - options.index = index; - cancelActive(); - setTitle(moment(time.date, 'YYYY-MM-DD')); - activeImage(); - } + //初始化时间轴 + const initTimeLine = () => { + options.times = []; + options.currentTime = moment(options.date).format('YYYY-MM-DD'); + let now = moment(options.date).add(1, 'day'); + + for (let i = 0; i < 15; i++) { + options.times.push({ + day: now.add(-1, 'day').format('DD'), + date: now.format('YYYY-MM-DD'), + }) + } + options.times.reverse(); + options.index = options.times.length - 1; + } - const cancelActive = () => { - clearTimer(); - options.isPlay = false; - } + //时间选择 + const onTimeClick = (time, index) => { - const onPrevDayClick = () => { - let element = getCurrentElement(); - - options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); - options.currentTime = options.date; - options.index--; - if (options.index < 0) { - options.index = element.childElementCount - 1; - options.date = options.times[options.times.length - 1].date - } - - cancelActive(); - setCurrentPlayElement(element) - } + options.currentTime = time.date; + options.date = time.date; + reloadChangeData() + options.index = index; + cancelActive(); + setTitle(moment(time.date, 'YYYY-MM-DD')); + activeImage(); + } - const onNextDayClick = () => { - options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD') - } + const cancelActive = () => { + clearTimer(); + options.isPlay = false; + } - const onPrevImgClick = () => { - let element = getCurrentElement(); + //上一天 + const onPrevDayClick = () => { + let element = getCurrentElement(); + options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); + + options.currentTime = options.date; + options.index--; + if (options.index < 0) { + options.index = element.childElementCount - 1; + options.date = options.times[options.times.length - 1].date + } + initTimeLine() + cancelActive(); + setCurrentPlayElement(element) + reloadChangeData() + } - options.index--; - if (options.index < 0) - options.index = element.childElementCount - 1; + const onNextDayClick = () => { + options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD') + initTimeLine() + reloadChangeData() + } - setCurrentPlayElement(element); - } - - const onNextImgClick = () => { - let element = getCurrentElement(); - - options.index++; - if (options.index > element.childElementCount - 1) - options.index = 0; - - setCurrentPlayElement(element); - } + //上一张图片 + const onPrevImgClick = () => { + let element = getCurrentElement(); - const onRefreshClick = () => { - options.date = moment('2021-11-15').format('YYYY-MM-DD'); - options.currentTime = options.times[options.times.length - 1].date; + options.index--; + if (options.index < 0) + options.index = element.childElementCount - 1; - cancelActive(); - activeImage(); - } + setCurrentPlayElement(element); + } - const onPlayClick = () => { - options.isPlay = !options.isPlay; - if (options.isPlay) { - timeExcute(); - } else { - clearTimer(); - } - } + const onNextImgClick = () => { + let element = getCurrentElement(); - const timeExcute = () => { - clearTimer(); + options.index++; + if (options.index > element.childElementCount - 1) + options.index = 0; - let element = getCurrentElement(); + setCurrentPlayElement(element); + } - timer = setInterval( () => { - options.index++; - if (options.index > element.childElementCount - 1) - options.index = 0; + //重置 + const onRefreshClick = () => { + options.date = moment('2021-11-15').format('YYYY-MM-DD'); + options.currentTime = options.times[options.times.length - 1].date; - setCurrentPlayElement(element); - }, 3000) - } + cancelActive(); + activeImage(); + } - const clearTimer = () => { - if (timer) - clearInterval(timer); - } + const onPlayClick = () => { + options.isPlay = !options.isPlay; + if (options.isPlay) { + timeExcute(); + } else { + clearTimer(); + } + } - const getCurrentElement = () => { - return document.querySelector('.times'); - } + const timeExcute = () => { + clearTimer(); - const setCurrentPlayElement = (element) => { - for(let i = 0; i < element.childElementCount; i++) - element.children[i].classList.remove('active'); + let element = getCurrentElement(); - element.children[options.index].classList.add('active'); - options.currentTime = options.times[options.index].date; - setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD')); - activeImage(); - } + timer = setInterval(() => { + options.index++; + if (options.index > element.childElementCount - 1) + options.index = 0; + setCurrentPlayElement(element); + }, 3000) + } - const onChange = () => { - initTimeLine(); - setTitle(moment(options.date)); - activeImage(); - } + const clearTimer = () => { + if (timer) + clearInterval(timer); + } + + const getCurrentElement = () => { + return document.querySelector('.times'); + } + + const setCurrentPlayElement = (element) => { + for (let i = 0; i < element.childElementCount; i++) + element.children[i].classList.remove('active'); + + element.children[options.index].classList.add('active'); + options.currentTime = options.times[options.index].date; + setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD')); + activeImage(); + } + + const onChange = () => { + initTimeLine(); + setTitle(moment(options.date)); + activeImage(); + } + + const onSaveClick = () => { + let pictures = document.getElementById('pictures'); + options.urls = [options.imgUrl, options.signalPBLHImgUrl]; + + for (let i = 0; i < options.urls.length; i++) { + let img = new Image(); + img.src = options.urls[i]; + let canvas = document.createElement("canvas") as HTMLCanvasElement; + canvas.width = img.width; + canvas.height = img.height; + + let ctx = canvas.getContext("2d"); + let base64 = ""; + + img.setAttribute("crossOrigin", 'Anonymous'); + img.onload = () => { + ctx.drawImage(img, 0, 0); + base64 = canvas.toDataURL("image/png"); + pictures.children[i].setAttribute('href', base64); + setTimeout(() => { + let button: HTMLElement = pictures.children[i] as HTMLElement; + button.click(); + pictures.children[i].setAttribute('href', null); + }, 500); + }; + } + } + + + //边界层高度 + const boundaryLayerHeightDate = () => { + options.boundaryLayerHeightList = [] + const time = moment(options.date).format('MM_DD') + const params = prepareApiParams(time, 'pblh') + get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => { + if (response.length <= 0) { + verify() + return; + } + for (let i in response) { + for (let val in response[i]) { + options.boundaryLayerHeightList.push(response[i][val]) + } + } + creates.boundaryLayerHeight.updateSeries(0, options.boundaryLayerHeightList) + }) + } + + //边界层特征值 + const boundaryCharacteristicApi = () => { + const time = moment(options.date).format('MM_DD') + const params = prepareApiParams(time, 'pblhfeatures') + get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response) => { + console.log(response) + }) + } + + //光学特性 + //激光雷达比 + const LidarRatioApi = () => { + options.LidarRatioList = [] + const time = moment(options.date).format('MM_DD') + const params = prepareApiParams(time, 'lidarratio') + get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => { + if (response.length <= 0) { + verify() + return; + } + for (let i in response[18]) { + if (response[18][i] === null) { + response[18][i] = 0 + } + options.LidarRatioList.push(response[18][i]) + } + creates.LidarRatio.updateSeries(0, options.LidarRatioList) + }) + } + + + //消光系数 + // const extinctionApi = () => { + // const time = moment(options.date).format('MM_DD') + // const params = prepareApiParams(time ,'extinction') + // get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => { + // + // }) + // } + + //水汽 + const waterVapourApi = () => { + const time = moment(options.date).format('MM_DD') + const params = prepareApiParams(time,'watervapor') + get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => { + console.log(response) + }) + } + + //气溶胶PM + //粗颗粒 + const aerosolApi = () => { + const time = moment(options.date).format('MM_DD') + const params = prepareApiParams(time,'pm10') + get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => { + console.log(response) + }) + } + + //云气溶胶分类 + const layerTypeApi = () => { + const time = moment(options.date).format('MM_DD') + const params = prepareApiParams(time,'layertype') + get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => { + + }) + } - const onSaveClick = () => { - let pictures = document.getElementById('pictures'); - options.urls = [options.imgUrl, options.signalPBLHImgUrl]; - - for (let i = 0; i < options.urls.length; i++) { - let img = new Image(); - img.src = options.urls[i]; - let canvas = document.createElement("canvas") as HTMLCanvasElement; - canvas.width = img.width; - canvas.height = img.height; - - let ctx = canvas.getContext("2d"); - let base64 = ""; - - img.setAttribute("crossOrigin",'Anonymous'); - img.onload = () => { - ctx.drawImage(img, 0, 0); - base64 = canvas.toDataURL("image/png"); - pictures.children[i].setAttribute('href', base64); - setTimeout(() => { - let button: HTMLElement = pictures.children[i] as HTMLElement; - button.click(); - pictures.children[i].setAttribute('href', null); - }, 500); - }; - } + //云层高度 + const cloudsHeightApi = () => { + options.cloudsHeightList = [] + const time = moment(options.date).format('MM_DD') + const params = prepareApiParams(time,'cloudbaseheight') + get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => { + if (response.length <= 0) { + verify() + return; + } + for (let i in response) { + for (let val in response[i]) { + if (response[i][val] === null) { + response[i][val] = 0 } + options.cloudsHeightList.push([parseInt(i),response[i][val]]) + } + } + creates.cloudsHeight.updateSeries(0, options.cloudsHeightList) + }) + } - return { - ...toRefs(options), - onRegionClick, - onElementClick, - onTimeClick, - onPrevDayClick, - onNextDayClick, - onPrevImgClick, - onNextImgClick, - onRefreshClick, - onPlayClick, - onChange, - onImageLoad, - onDownloadClick, - onSaveClick + //云顶高度 + const cloudTopHeightApi = () => { + options.cloudTopHeightList = [] + const time = moment(options.date).format('MM_DD') + const params = prepareApiParams(time,'cloudtopheight') + get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => { + if (response.length <= 0) { + verify() + return; + } + for (let i in response) { + for (let val in response[i]) { + if (response[i][val] === null) { + response[i][val] = 0 } + options.cloudTopHeightList.push([parseInt(i),response[i][val]]) + } } + creates.cloudTopHeight.updateSeries(0, options.cloudTopHeightList) + }) + } + + const prepareApiParams = (time, variableName) => { + return { + date: time, + var: variableName, + } + } + + const verify = () => { + ElMessage({ + showClose: true, + message: '请求接口无数据', + icon: '', + type: null, + grouping: true, + duration: 1500 + }) + } + + return { + ...toRefs(options), + onRegionClick, + // onElementClick, + onTimeClick, + onPrevDayClick, + onNextDayClick, + onPrevImgClick, + onNextImgClick, + onRefreshClick, + onPlayClick, + onChange, + onImageLoad, + onDownloadClick, + onSaveClick, + onTabClick } + } +} </script> <style lang="less" scoped> .main { - .container { - .raman-picture-container { - width: calc(~"100% - 1rem"); - margin: 0 auto; - .picture { - .pblh-image { - width: 50%; - } - } + .container { + .toolbar { + padding: 0.15rem 0; + + .times { + padding-bottom: 0; + } + } + + .raman-picture-container { + width: calc(~"100% - 1rem"); + margin: 0 auto; + + .picture { + position: relative; + margin-top: 30px; + + .title { + width: 100%; + font-size: 0.22rem; + position: absolute; + left: 3.10rem; + top: 0.30rem; + z-index: 100; + } + + .pblh-image { + width: 50%; } + } } + } } </style> 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<any>, 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);