From 5e383d622246eb7da2d9a41bb0a53dd5f8aad988 Mon Sep 17 00:00:00 2001 From: xuhuihui <3548508071@qq.com> Date: Fri, 6 May 2022 10:42:06 +0800 Subject: [PATCH] commit --- .../src/components/MicrowaveRadiation.vue | 2 +- .../Frontend/src/components/RamanLidar.vue | 306 +++++++++++++----- .../Frontend/src/model/heat-map-drawer.ts | 6 +- .../Frontend/src/uilts/box-drawer.ts | 60 ++-- 4 files changed, 269 insertions(+), 105 deletions(-) diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue index 263eed8..deff943 100644 --- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue +++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue @@ -1033,7 +1033,7 @@ export default { // //} #BP-temp, #BP-relative-humidity, #BP-vapor-density { - transform: scale(1, 1.2) translate(-42px,100px); + transform: scale(1, 1.2) translate(-42px, 80px); } .shiXu { diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue index d51e570..8f51c22 100644 --- a/04.系统编码/Frontend/src/components/RamanLidar.vue +++ b/04.系统编码/Frontend/src/components/RamanLidar.vue @@ -51,8 +51,11 @@
-
- +
@@ -60,7 +63,6 @@ {{ time.hour }}
- @@ -70,8 +72,28 @@
-
+
+
+
+ {{ time.month }} + {{ time.day }} +
+
+ + + +
+ + +
+
+ + + +
@@ -139,7 +161,7 @@
@@ -149,7 +171,7 @@
@@ -172,7 +194,7 @@
@@ -182,7 +204,7 @@
@@ -191,39 +213,54 @@ -
+ + + + + + + + + + + + +
- -
- +
-
- -
-
- +
-
- +
+
+
+ +
+
+ +
@@ -332,11 +369,13 @@ export default { value: 'watervapor', label: '水汽' }], - currentElement: 'layertype' + currentElement: 'layertype', + timeLineFormat: 'hour' }) onMounted(() => { - initTimeLine(); + // initTimeLine(); + initTimeLineDay(); // setTitle(moment(options.date, 'YYYY-MM-DD')); setTimeout(() => { initEcharts(options.currentTab) @@ -352,7 +391,7 @@ export default { creates.boundaryLayerHeight.setYAxis('边界层高度(m)'); creates.boundaryLayerHeight.setLegend(); creates.boundaryLayerHeight.setTooltip('高度: {point.y}'); - creates.boundaryLayerHeight.setSeries('边界层高度') + creates.boundaryLayerHeight.setSeries('边界层高度',0, null, null, '#3636FF') creates.boundaryLayerHeight.init(); } @@ -389,7 +428,7 @@ export default { creates.LidarRatio.setYAxis('高度(m)'); creates.LidarRatio.setLegend(); creates.LidarRatio.setTooltip('高度: {point.y}'); - creates.LidarRatio.setSeries('激光雷达比') + creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF') creates.LidarRatio.init(); } @@ -410,11 +449,21 @@ export default { } const onTabClick = (name) => { + changeTimeLineFormat(name); options.currentTab = name; initEcharts(name) reloadChangeData() } + const changeTimeLineFormat = (name) => { + if (name === 'MWR'){ + initTimeLineDay(); + return; + } + + initTimeLine(); + } + const reloadChangeData = () => { cancelRequest(); onMenuChange() @@ -478,12 +527,8 @@ export default { label: '云顶高度' }] } else if (options.currentTab === 'MWR') { - options.currentElement = 'layertype' + options.currentElement = 'extinction' options.elementData = [ - { - value: 'layertype', - label: '云的识别' - }, { value: 'extinction', label: '消光系数' @@ -498,46 +543,60 @@ export default { const elementChange = (code: string) => { switch (code) { case 'singleWatervapor' : + // initTimeLine() reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor); break; case 'aod-icot-wcot' : + // initTimeLine() reloadChartsRecognition('aod', drawAerosolCharts); reloadChartsRecognition('icot', drawIceCloudsCharts); reloadChartsRecognition('wcot', drawWaterCloud); break; case 'extinctionOptics' : + // initTimeLine() reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction); break; case 'backscatter' : + // initTimeLine() reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter); break; case 'pm2_5' : + // initTimeLine() reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5); reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10); break; case 'pblh' : + initTimeLine() reloadChartsRecognition('pblh', drawBoundaryLayerCharts); break; case 'lidarratio' : + initTimeLineDay() reloadChartLidarratio('lidarratio', drawLidarRatioCharts); break; case 'cloudSol' : + initTimeLine() reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol); break; case 'cloudbaseheight' : + // initTimeLine() reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts); break; case 'cloudtopheight' : + // initTimeLine() reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts); break; - case 'layertype' : - reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition); - break; + // case 'layertype' : + // reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition); + // break; case 'extinction' : - reloadCloudRecognition('extinction', 801, 'extinction', drawExtinction); + // initTimeLineDay() + reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionBefore); + reloadCloudRecognition('extinction', 801, 'extinction', drawExtinctionAfter); break; case 'watervapor' : - reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervapor); + // initTimeLineDay() + reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporBefore); + reloadCloudRecognition('watervapor', 101, 'watervapor', drawWatervaporAfter); break; default: throw new Error("无效的type类型"); @@ -630,14 +689,14 @@ export default { } const drawBackscatter = (result: CustomeArray) => { - if (result.length != 12) return; + if (result.length != 24) return; options.loadingBackscatterStatus = false; if (creates.backscatterDrawer != null) { creates.backscatterDrawer.close(); } let matrix = converCloudRecognition(801, result, 'backscatter'); - creates.backscatterDrawer = new HeatMapDrawer(1200, 600, matrix, "backscatter_chart",'/km/sr'); + creates.backscatterDrawer = new HeatMapDrawer(1200, 650, matrix, "backscatter_chart",'/km/sr'); creates.backscatterDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.backscatterDrawer.setColorChart(prepareBackscatterColors()); creates.backscatterDrawer.draw(); @@ -654,20 +713,20 @@ export default { } const drawPm2Point5 = (result: CustomeArray) => { - if (result.length != 12) return; + if (result.length != 24) return; options.loadingPmStatus = false; if (creates.pm2Point5Drawer != null) { creates.pm2Point5Drawer.close(); } let matrix = converCloudRecognition(201, result, 'pm2_5'); - creates.pm2Point5Drawer = new HeatMapDrawer(800, 600, matrix, "pm2_5_chart",'μg/m³', 'PM2.5'); + creates.pm2Point5Drawer = new HeatMapDrawer(800, 650, matrix, "pm2_5_chart",'μg/m³', 'PM2.5'); creates.pm2Point5Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true)); creates.pm2Point5Drawer.setColorChart(preparePmColors()); creates.pm2Point5Drawer.draw(); } const drawPm10 = (result: CustomeArray) => { - if (result.length != 12) return; + if (result.length != 24) return; options.loadingPmStatus = false; if (creates.pm10Drawer != null) { @@ -675,7 +734,7 @@ export default { } let matrix = converCloudRecognition(201, result, 'pm10'); - creates.pm10Drawer = new HeatMapDrawer(800, 600, matrix, "pm10_chart", 'μg/m³', 'PM10'); + creates.pm10Drawer = new HeatMapDrawer(800, 650, matrix, "pm10_chart", 'μg/m³', 'PM10'); creates.pm10Drawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 1000, 2000, 3000], true, true)); creates.pm10Drawer.setColorChart(preparePmColors()); creates.pm10Drawer.draw(); @@ -736,7 +795,6 @@ export default { options.chartTimeData = []; result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1); result.forEach(item => { - // options.chartTimeData.push(item.time) if (item.data == null) { let temp = []; for (let i = 0; i < 11; i++) { @@ -776,7 +834,7 @@ export default { } const drawCloudSol = (result: CustomeArray) => { - if (result.length != 12) return; + if (result.length != 24) return; options.loadingCloudSolStatus = false; if (creates.cloudSolDrawer != null) { @@ -784,14 +842,14 @@ export default { } let matrix = converCloudRecognition(801, result, 'cloudSol'); - creates.cloudSolDrawer = new HeatMapDrawer(1200, 600, matrix, "cloud_sol_chart"); + creates.cloudSolDrawer = new HeatMapDrawer(1200, 650, matrix, "cloud_sol_chart"); creates.cloudSolDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.cloudSolDrawer.setColorChart(prepareCloudRecognitionColors()); creates.cloudSolDrawer.draw(); } const drawOpticsExtinction = (result: CustomeArray) => { - if (result.length != 12) return; + if (result.length != 24) return; options.loadingExtinctionOpticsStatus = false; if (creates.opticsExtinctionDrawer != null) { @@ -799,7 +857,7 @@ export default { } let matrix = converCloudRecognition(801, result, 'extinctionOptics'); - creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 600, matrix, "extinction_optics_chart",'/km/sr'); + creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km/sr'); creates.opticsExtinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.opticsExtinctionDrawer.setColorChart(prepareExtinctionnColors()); creates.opticsExtinctionDrawer.draw(); @@ -807,7 +865,7 @@ export default { } const drawSingleWatervapor = (result: CustomeArray) => { - if (result.length != 12) return; + if (result.length != 24) return; options.loadingWaterVaporSingleStatus = false; if (creates.singleWatervaporDrawer != null) { @@ -815,14 +873,29 @@ export default { } let matrix = converCloudRecognition(101, result, 'singleWatervapor'); - creates.singleWatervaporDrawer = new HeatMapDrawer(1200, 600, matrix, "watervapor_single_chart",' g/kg'); + creates.singleWatervaporDrawer = new HeatMapDrawer(1200, 650, matrix, "watervapor_single_chart",' g/kg'); creates.singleWatervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); creates.singleWatervaporDrawer.setColorChart(prepareWatervaporColors()); creates.singleWatervaporDrawer.draw(); } - const drawWatervapor = (result: CustomeArray) => { - if (result.length != 12) return; + const drawWatervaporBefore = (result: CustomeArray) => { + if (result.length != 24) return; + + options.loadingWaterVaporStatus = false; + if (creates.watervaporDrawer != null) { + creates.watervaporDrawer.close(); + } + + let matrix = converCloudRecognition(101, result, 'watervapor'); + creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before",'g/kg', '质控前'); + creates.watervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); + creates.watervaporDrawer.setColorChart(prepareWatervaporColors()); + creates.watervaporDrawer.draw(); + } + + const drawWatervaporAfter = (result: CustomeArray) => { + if (result.length != 24) return; options.loadingWaterVaporStatus = false; if (creates.watervaporDrawer != null) { @@ -830,12 +903,15 @@ export default { } let matrix = converCloudRecognition(101, result, 'watervapor'); - creates.watervaporDrawer = new HeatMapDrawer(1200, 600, matrix, "watervapor_chart",'g/kg'); + creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg', '质控后'); creates.watervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true)); creates.watervaporDrawer.setColorChart(prepareWatervaporColors()); creates.watervaporDrawer.draw(); } + + + const prepareWatervaporColors = () => { return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66', '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'], @@ -843,8 +919,8 @@ export default { ); } - const drawExtinction = (result: CustomeArray) => { - if (result.length != 12) return; + const drawExtinctionBefore = (result: CustomeArray) => { + if (result.length != 24) return; options.loadingExtinctionStatus = false; if (creates.extinctionDrawer != null) { @@ -852,7 +928,22 @@ export default { } let matrix = converCloudRecognition(801, result, 'extinction'); - creates.extinctionDrawer = new HeatMapDrawer(1200, 600, matrix, "extinction_chart", 'km/sr'); + creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", 'km/sr','质控前'); + creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); + creates.extinctionDrawer.setColorChart(prepareExtinctionnColors()); + creates.extinctionDrawer.draw(); + } + + const drawExtinctionAfter = (result: CustomeArray) => { + if (result.length != 24) return; + + options.loadingExtinctionStatus = false; + if (creates.extinctionDrawer != null) { + creates.extinctionDrawer.close(); + } + + let matrix = converCloudRecognition(801, result, 'extinction'); + creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", 'km/sr','质控后'); creates.extinctionDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true)); creates.extinctionDrawer.setColorChart(prepareExtinctionnColors()); creates.extinctionDrawer.draw(); @@ -872,9 +963,9 @@ export default { let result = new CustomeArray(callback); let time = moment(options.date); options.timeArray = [] - for (let index = 0; index < 12; index++) { + for (let index = 0; index < 24; index++) { reloadSingleCloudRecognition(capacity, time.clone().add(-index, 'h').format('M_D_H'), element, result); - options.timeArray.push(time.clone().add(-index, 'h').format('HH时')) + options.timeArray.push(time.clone().add(-index, 'h').format('HH')) } options.timeArray.reverse() } @@ -1154,6 +1245,8 @@ export default { //初始化时间轴 const initTimeLine = () => { + if (options.timeLineFormat == "hour") return; + options.timeLineFormat = "hour"; options.times = []; options.currentTime = moment(options.date).format('YYYY-MM-DD HH'); let now = moment(options.date).add(1, 'h') @@ -1166,12 +1259,27 @@ export default { } options.times.reverse(); options.index = options.times.length - 1; - // options.chartTimeData = ['0'] - // options.times.forEach(i => { - // options.chartTimeData.push(moment(i.date).format('MM-DD HH')) - // }) } + const initTimeLineDay = () => { + if (options.timeLineFormat == "day") return; + options.timeLineFormat = "day"; + options.times = []; + options.currentTime = moment(options.date).format('YYYY-MM-DD'); + let now = moment(options.date).add(1, 'd'); + let day = new Date(now.year(), now.month() + 1, 0); + for (let i = 0; i < 24; i++) { + options.times.push({ + day: now.add(-1, 'd').format('DD'), + month: now.format('MM'), + date: now.format('YYYY-MM-DD'), + }) + } + options.times.reverse(); + options.index = options.times.length - 1; + } + + //时间选择 const onTimeClick = (time, index) => { options.currentTime = time.date; @@ -1191,25 +1299,33 @@ export default { //上一天 const onPrevDayClick = () => { - let element = getCurrentElement(); - options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); + let element = getCurrentElement(); + if (moment(options.date).add(-1, 'day').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD') ) { + options.date = moment().format('YYYY-MM-DD HH') + } + else 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 } + options.timeLineFormat = "day"; initTimeLine() // cancelActive(); // setCurrentPlayElement(element) - reloadChangeData() + elementChange(options.currentElement) } const onNextDayClick = () => { - options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD') + if (moment(options.date).add(1, 'day').format('YYYY-MM-DD') == moment().format('YYYY-MM-DD') ) { + options.date = moment().format('YYYY-MM-DD HH') + } + else options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD') + options.timeLineFormat = "day"; initTimeLine() - reloadChangeData() + elementChange(options.currentElement) } //上一张图片 @@ -1283,8 +1399,18 @@ export default { // activeImage(); // } - const onChange = () => { - initTimeLine(); + const onChange = (e) => { + if (options.currentElement === 'extinction' || options.currentElement=== 'lidarratio' || options.currentElement === 'watervapor') { + options.timeLineFormat = "hour"; + initTimeLineDay() + } + else { + if (moment(e).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD') ) { + options.date = moment().format('YYYY-MM-DD HH') + } + options.timeLineFormat = "day"; + initTimeLine(); + } elementChange(options.currentElement) // setTitle(moment(options.date)); // activeImage(); @@ -1368,6 +1494,28 @@ export default { elementChange(element) } + const onDayClick = (time, index) => { + options.timeLineFormat = "hour" + options.currentTime = time.date; + options.date = moment(time.date).format('YYYY-MM-DD'); + options.index = index; + elementChange(options.currentElement) + } + + const onPrevDayTimeClick = () => { + options.timeLineFormat = "hour" + options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD'); + initTimeLineDay() + elementChange(options.currentElement) + } + + const onNextDayTimeClick = () => { + options.timeLineFormat = "hour" + options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD'); + initTimeLineDay() + elementChange(options.currentElement) + } + return { ...toRefs(options), onRegionClick, @@ -1384,7 +1532,10 @@ export default { // onDownloadClick, // onSaveClick, onTabClick, - onElementClick + onElementClick, + onDayClick, + onPrevDayTimeClick, + onNextDayTimeClick } } } @@ -1425,36 +1576,41 @@ export default { margin-top: 30px; #watervapor_single_chart { - transform: scale(1.0, 1.0) translateX(9%); + transform: translateX(9%) translateY(15px); //transform: scale(1.0, 0.8) translateX(539px); } #extinction_optics_chart { //transform: scale(0.56, 0.85) translateX(-32%); - transform: scale(1.0, 1) translateX(9%); + transform: translateX(9%) translateY(50px); } #pm2_5_chart { - transform: scale(1.0, 1) translateX(-50px); + transform: translateX(-50px) translateY(50px); } #pm10_chart { - transform: scale(1.0, 1) translateX(-50px); + transform: translateX(-50px) translateY(50px); } #backscatter_chart { - transform: scale(1.0, 1) translateX(9%); + transform: translateX(9%) translateY(50px); //transform: scale(0.6, 0.85) translateX(-76px); } #cloud_sol_chart { - transform: scale(1.0, 1) translateX(9%); + transform: translateX(9%) translateY(50px); //transform: scale(0.6, 0.85) translate(-12%, -12px); } - #cloud_recognition_chart, #extinction_chart, #watervapor_chart { - transform: scale(1.0, 1) translateX(9%); + //#cloud_recognition_chart, + #extinction_chart-before, + #extinction_chart-after, + #watervapor_chart-before, + #watervapor_chart-after + { + transform: translateX(-50px) translateY(50px); //transform: scale(0.6, 0.8) translateX(-260px); //transform: scale(0.6, 0.8) translateX(-131px); } diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts index 5fc3016..a631e65 100644 --- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts +++ b/04.系统编码/Frontend/src/model/heat-map-drawer.ts @@ -20,7 +20,7 @@ export class HeatMapDrawer{ private values: any = null; // 垂直刻度 - private readonly verticalScaleLine: number = 18; + private readonly verticalScaleLine: number = 15; // 水平刻度 private readonly horizontalScaleLine: number = 15; public base64Image: string = null; @@ -319,9 +319,9 @@ export class HeatMapDrawer{ this.canvasContext.stroke(); if (true){ - this.canvasContext.font = "normal 18px 微软雅黑"; + this.canvasContext.font = "normal 16px 微软雅黑"; this.canvasContext.fillStyle = "#000000"; - this.canvasContext.fillText(this.xAxis.scales[index], _x - this.canvasContext.measureText(this.xAxis.scales[index]).width / 2, startY + this.verticalScaleLine + this.borderHeight + 36); + this.canvasContext.fillText(this.xAxis.scales[index], _x - this.canvasContext.measureText(this.xAxis.scales[index]).width / 2, startY + this.verticalScaleLine + this.borderHeight + 20); } } } diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts index dbe3239..a760596 100644 --- a/04.系统编码/Frontend/src/uilts/box-drawer.ts +++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts @@ -240,31 +240,39 @@ export class BoxDrawer{ } //高度单位 private drawHeightText(): void { - let name =['高','度','(','k','m',')']; // 文本内容 - let x = 70,y = 150; // 文字开始的坐标 - let letterSpacing = 20; // 设置字间距 - for(let i = 0; i < name.length; i++) { - const str = name.slice(i, i + 1).toString(); - if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转 - this.canvasContext.save(); - this.canvasContext.translate(x, y); - this.canvasContext.rotate(Math.PI / 180 * 90); - this.canvasContext.textBaseline = 'bottom'; - this.canvasContext.font = "normal 35px 微软雅黑"; - this.canvasContext.fillStyle = "#000000"; - this.canvasContext.fillText(str, 0, 0); - this.canvasContext.restore(); - y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 - } else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) { - this.canvasContext.save(); - this.canvasContext.textBaseline = 'top'; - this.canvasContext.font = "normal 35px 微软雅黑"; - this.canvasContext.fillStyle = "#000000"; - this.canvasContext.fillText(str, x, y); - this.canvasContext.restore(); - y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 - } - } + this.canvasContext.save(); + let name = "高度(km)"; + this.canvasContext.translate(90, this.height / 2 + this.paddingTop - this.canvasContext.measureText(name).width); + this.canvasContext.rotate(Math.PI * 1.5); + this.canvasContext.font="normal 35px 微软雅黑"; + this.canvasContext.fillStyle="#000000"; + this.canvasContext.fillText(name, -120, 0); + this.canvasContext.restore(); + // let name =['高','度','(','k','m',')']; // 文本内容 + // let x = 70,y = 150; // 文字开始的坐标 + // let letterSpacing = 20; // 设置字间距 + // for(let i = 0; i < name.length; i++) { + // const str = name.slice(i, i + 1).toString(); + // if (str.match(/[A-Za-z0-9-()-]/) && (y < 576)) { // 非汉字 旋转 + // this.canvasContext.save(); + // this.canvasContext.translate(x, y); + // this.canvasContext.rotate(Math.PI / 180 * 90); + // this.canvasContext.textBaseline = 'bottom'; + // this.canvasContext.font = "normal 35px 微软雅黑"; + // this.canvasContext.fillStyle = "#000000"; + // this.canvasContext.fillText(str, 0, 0); + // this.canvasContext.restore(); + // y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 + // } else if (str.match(/[\u4E00-\u9FA5]/) && (y < 576)) { + // this.canvasContext.save(); + // this.canvasContext.textBaseline = 'top'; + // this.canvasContext.font = "normal 35px 微软雅黑"; + // this.canvasContext.fillStyle = "#000000"; + // this.canvasContext.fillText(str, x, y); + // this.canvasContext.restore(); + // y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度 + // } + // } } //温度单位 private drawTemperatureText(unit): void { @@ -612,7 +620,7 @@ export class Calc{ let box = this.boxes[row][col]; if (box == null) continue; - console.log(box) + this.boxWidth = box.width; this.boxHeight = box.height; return;