diff --git a/04.系统编码/Frontend/src/components/DecisionSupport.vue b/04.系统编码/Frontend/src/components/DecisionSupport.vue
index 4a9a3c9..b1f4cba 100644
--- a/04.系统编码/Frontend/src/components/DecisionSupport.vue
+++ b/04.系统编码/Frontend/src/components/DecisionSupport.vue
@@ -19,7 +19,7 @@
</div>
</div>
<div class="container panel decision-container">
- <span class="save-btn" @click="onSaveClick"><img src="/images/save.png" /></span>
+ <span class="save-btn" @click="onSaveClick" v-if="currentIndicator != 'pollution-indicator'"><img src="/images/save.png" /></span>
<div class="download-pictures" id="pictures">
<a v-for="(url, index) in urls" :key="index" download></a>
</div>
@@ -47,37 +47,66 @@
</el-col>
</el-row>
</div>
- <div class="picture-view indicator-picture-view" v-if="currentIndicator === 'pollution-indicator'">
- <h2 class="title">高楼污染指数</h2>
- <div class="picture-block">
- <div class="picture">
- <el-image
- :src="indicatorImg"
- :preview-src-list="indicatorPreview"
- :initial-index="1"
- fit="contain"
- >
- <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 class="instruction">
- <h2>高楼污染指数说明：</h2>
- <p>使用激光雷达数据反演PM2.5和PM10</p>
- <p>浓度廓线，基于PM2.5和PM10的平均</p>
- <p>值构建高楼污染指数，</p>
- <p> 高楼(60米)，</p>
- <p> 超高楼(200米)，</p>
- <p> 极高楼层(500米)</p>
- </div>
+
+
+ <div class="toolbar day-toolbar" v-show="currentIndicator === 'pollution-indicator'">
+ <div class="times">
+ <div class="time-item" v-for="(time, index) in times" :key="index"
+ :class="{'active': currentTime === time.date, 'first-hour': time.day === '01'}">
+ <span class="hour" style="padding-left: 10px">{{ time.month }}</span>
+ <span class="time" @click="onChangeDayClick(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="onPrevDayTimeClick"><img src="/images/prev.png"/></span>
+ <span @click="onNextDayTimeClick"><img src="/images/next.png"/></span>
+ </div>
+ </div>
+
+ <div class="picture-container raman-picture-container" v-show="currentIndicator === 'pollution-indicator'">
+ <div class="picture">
+ <div id="pollutionIndicator"
+ style="margin-top: 66px"
+ v-loading="loadingPollutionIndicatorStatus"
+ custom-class="loading"
+ element-loading-text="加载中">
+ </div>
</div>
+<!-- <div class="picture-block">-->
+<!-- <div class="picture">-->
+<!-- <el-image-->
+<!-- :src="indicatorImg"-->
+<!-- :preview-src-list="indicatorPreview"-->
+<!-- :initial-index="1"-->
+<!-- fit="contain"-->
+<!-- >-->
+<!-- <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 class="instruction">-->
+<!-- <h2>高楼污染指数说明：</h2>-->
+<!-- <p>使用激光雷达数据反演PM2.5和PM10</p>-->
+<!-- <p>浓度廓线，基于PM2.5和PM10的平均</p>-->
+<!-- <p>值构建高楼污染指数，</p>-->
+<!-- <p> 高楼(60米)，</p>-->
+<!-- <p> 超高楼(200米)，</p>-->
+<!-- <p> 极高楼层(500米)</p>-->
+<!-- </div>-->
+<!-- </div>-->
+
+
</div>
</div>
</div>
@@ -87,12 +116,20 @@
import { onMounted, reactive, toRefs } from 'vue';
import * as Tiff from 'browser-tiff.js';
import { DecisionSupportConfig } from '../uilts/Config';
-import { post } from '../uilts/axios';
-
+ import {get, post} from '../uilts/axios';
+ import {HighChartCreate} from "../model/high-chart-create";
+ import moment from "moment";
+ import {ConstantRamanLidar} from "../model/constant";
+ import {CustomeArray} from "../model/custome-array";
export default {
name: 'DecisionSupport',
setup() {
+
let options = reactive({
+ times: [],
+ currentTime: null,
+ date: moment().format('YYYY-MM-DD 00:00:00'),
+ index: 0,
currentIndicator: 'plan-advice',
currentProduct: 'control-experiment',
items: [{
@@ -128,18 +165,28 @@ import { post } from '../uilts/axios';
}],
indicatorImg: '/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png',
indicatorPreview: ['/product/picture/images/decision-support/pollution-indicator/pollution-indicator.png'],
- urls: []
+ urls: [],
+ loadingPollutionIndicatorStatus: false
})
+ let creates: {
+ pollutionIndicator: HighChartCreate
+ } = {
+ pollutionIndicator: null
+ }
onMounted(() => {
+ initTimeLineDay()
setImage(options.currentIndicator + '/' + options.currentProduct);
})
const onIndicatorClick = (indicator) => {
options.currentIndicator = indicator;
- if(options.currentIndicator === 'plan-advice')
- setImage(options.currentIndicator + '/' + options.currentProduct);
+ if(options.currentIndicator === 'plan-advice') {
+ setImage(options.currentIndicator + '/' + options.currentProduct);
+ }
+ reloadChartsRecognition('hbpi', drawPollutionIndicator)
+ pollutionIndicatorInit()
}
const onProductClick = (product) => {
@@ -193,11 +240,133 @@ import { post } from '../uilts/axios';
}
}
+ const pollutionIndicatorInit = () => {
+ creates.pollutionIndicator = new HighChartCreate('pollutionIndicator');
+ creates.pollutionIndicator.setChart(false, 'line', 1500, 600);
+ creates.pollutionIndicator.setXAxisTypeDate();
+ creates.pollutionIndicator.setSpecialYAxis('高楼污染指数');
+ creates.pollutionIndicator.setLegend(true);
+ creates.pollutionIndicator.setTooltip('{point.y}');
+ creates.pollutionIndicator.setSeries('高楼', 0, null, null, '#B21523')
+ creates.pollutionIndicator.setSeries('超高楼', 0, null, null, '#000B6F')
+ creates.pollutionIndicator.setSeries('极高楼层', 0, null, null, '#853083')
+ creates.pollutionIndicator.init();
+ }
+
+ const drawPollutionIndicator = (result: CustomeArray<any>) => {
+ if (result[0].time == null) return;
+ const data = prepareChartData(result);
+ creates.pollutionIndicator.updateSeries(0, data[0]);
+ creates.pollutionIndicator.updateSeries(1, data[1]);
+ creates.pollutionIndicator.updateSeries(2, data[2]);
+ options.loadingPollutionIndicatorStatus = false
+ }
+
+ const prepareChartData = (result) => {
+ if (result[0].data == null) {
+ let temp = []
+ for (let i = 0; i < 72; i++) {
+ temp.push(NaN);
+ }
+ result[0].data = [temp];
+ }
+ let prepareData = []
+ let startTimeMoment = moment(result[0].time, 'M_D_H').add(8, 'h')
+ result[0].data.forEach(item => {
+ let data = []
+ for (let i = 0, len = item.length; i < len; i++) {
+ data.push([startTimeMoment.clone().add(1 * i, 'h').valueOf(), item[i]])
+ }
+ prepareData.push(data)
+ })
+ return prepareData;
+ }
+
+ const reloadChartsRecognition = (element: string, callback: any) => {
+ options.loadingPollutionIndicatorStatus = true
+ let result = new CustomeArray(callback);
+ let time = moment(options.date);
+ reloadPollutionIndicator(time.format('M_D_H'), element, result);
+ }
+
+ const reloadPollutionIndicator = (time: string, elementCode, result: CustomeArray<any>) => {
+ let params = prepareApiParams(time, elementCode)
+ get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
+ if (response.state != 0) {
+ setChartsRecognitionResult(time, response.message, null, result);
+ return;
+ }
+ setChartsRecognitionResult(time, response.message, response.data, result);
+ }).catch(error => {
+ setChartsRecognitionResult(time, error.message, null, result);
+ })
+ }
+
+ const prepareApiParams = (time, elementCode) => {
+ return {
+ var: elementCode,
+ locate: 'nj',
+ date: moment(time,'MM_DD_hh').format('M_D'),
+ }
+ }
+
+ const setChartsRecognitionResult = (time: string, message: string, data: any, result: CustomeArray<any>) => {
+ result.push({
+ time: time,
+ message: message,
+ data: data == null ? null : JSON.parse(data)
+ })
+ }
+
+ const initTimeLineDay = () => {
+ 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 onChangeDayClick = (time, index) => {
+ options.currentTime = time.date
+ options.date = moment(time.date).format('YYYY-MM-DD');
+ reloadChartsRecognition('hbpi', drawPollutionIndicator)
+ options.index = index;
+ }
+
+ const onPrevDayTimeClick = () => {
+ options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
+ initTimeLineDay()
+ reloadChartsRecognition('hbpi', drawPollutionIndicator)
+ }
+
+ const onNextDayTimeClick = () => {
+ options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD');
+ initTimeLineDay()
+ reloadChartsRecognition('hbpi', drawPollutionIndicator)
+ }
+
+ const onChange = () => {
+ initTimeLineDay();
+ reloadChartsRecognition('hbpi', drawPollutionIndicator)
+ }
+
return {
...toRefs(options),
onIndicatorClick,
onProductClick,
- onSaveClick
+ onSaveClick,
+ onChangeDayClick,
+ onPrevDayTimeClick,
+ onNextDayTimeClick,
+ onChange
}
}
}
@@ -284,6 +453,25 @@ import { post } from '../uilts/axios';
}
}
}
+ .raman-picture-container {
+ margin: 0 auto;
+ .picture {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .toolbar {
+ //padding: 0.15rem 0;
+ padding-bottom: 7px;
+ margin: -12px 0.25rem 0px;
+ .times {
+ padding-bottom: 0;
+ }
+ :deep(.date-picker), .control-btn {
+ margin-top: 12px;
+ }
+
+ }
}
}
</style>
diff --git a/04.系统编码/Frontend/src/components/Login.vue b/04.系统编码/Frontend/src/components/Login.vue
index afaa4b2..729afab 100644
--- a/04.系统编码/Frontend/src/components/Login.vue
+++ b/04.系统编码/Frontend/src/components/Login.vue
@@ -93,7 +93,7 @@ export default {
<style lang="less" scoped>
.loginInput {
- width: 6.51rem;
+ width: 6.1rem;
border-radius: 10px;
position: absolute;
left: 50%;
@@ -129,16 +129,17 @@ export default {
line-height: 0.4rem;
color: #222222;
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
- margin-top: 1.20rem;
+ margin-top: 0.9rem;
margin-bottom: 0.52rem;
padding-left: 0.12rem;
+ z-index: 100;
}
:deep(.input) {
width: 4.96rem;
- height: 0.69rem;
+ height: 0.59rem;
background: #FFFFFF;
border: 1px solid #BCBCBC;
- margin-bottom: 0.7rem;
+ margin-bottom: 0.6rem;
.el-input__inner{
height: 100% !important;
@@ -156,7 +157,7 @@ export default {
width: 0.18rem;
height: 0.18rem;
position: absolute;
- top: -0.10rem;
+ top: -0.14rem;
left: 0.18rem;
}
}
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 7fd04e9..50c304f 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -629,11 +629,11 @@ export default {
clearBoxDrawer(drawers.originalDrawer);
clearBoxDrawer(drawers.abnormalDrawer);
if (response.code != 200 || response.data.radar_data.length === 0) {
- createEmptyCanvas('original-data-canvas', 800, 600);
+ createEmptyCanvas('original-data-canvas', 800, 650);
// createEmptyCanvas('abnormal-canvas', 1500, 500);
return;
}
- drawers.originalDrawer = new BoxDrawer(800, 600, prepareTmpOriginalColors(options.SeasonValue), response.data, 'original-data-canvas', 'T/℃');
+ drawers.originalDrawer = new BoxDrawer(800, 650, prepareTmpOriginalColors(options.SeasonValue), response.data, 'original-data-canvas', 'T/℃');
// drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', '℃');
// options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
// options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image;
@@ -652,15 +652,15 @@ export default {
clearBoxDrawer(drawers.interpolateDrawer);
if (response.code != 200 || response.data.radar_data.length === 0) {
if (options.currentTab === 'MWR')
- createEmptyCanvas('interpolate-canvas', 800, 600);
+ createEmptyCanvas('interpolate-canvas', 800, 650);
else if (options.currentTab === 'shixu_BPFY')
- createEmptyCanvas('BP-temp', 1200, 600);
+ createEmptyCanvas('BP-temp', 1400, 700);
return;
}
if (options.currentTab === 'MWR')
- drawers.interpolateDrawer = new BoxDrawer(800, 600, prepareTmpOriginalColors(options.SeasonValue), response.data, 'interpolate-canvas', 'T/℃');
+ drawers.interpolateDrawer = new BoxDrawer(800, 650, prepareTmpOriginalColors(options.SeasonValue), response.data, 'interpolate-canvas', 'T/℃');
else if (options.currentTab === 'shixu_BPFY')
- drawers.interpolateDrawer = new BoxDrawer(1200, 600, prepareBPTempColors(), response.data, 'BP-temp', '(degree)');
+ drawers.interpolateDrawer = new BoxDrawer(1400, 700, prepareBPTempColors(), response.data, 'BP-temp', '(degree)');
// options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
})
}
@@ -675,10 +675,10 @@ export default {
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
clearBoxDrawer(drawers.BPRelativeHumidity);
if (response.code != 200 || response.data.radar_data.length === 0) {
- createEmptyCanvas('BP-relative-humidity', 1200, 600);
+ createEmptyCanvas('BP-relative-humidity', 1400, 700);
return;
}
- drawers.BPRelativeHumidity = new BoxDrawer(1200, 600, prepareBPRelativeHumidityColors(), response.data, 'BP-relative-humidity', '(%)');
+ drawers.BPRelativeHumidity = new BoxDrawer(1400, 700, prepareBPRelativeHumidityColors(), response.data, 'BP-relative-humidity', '(%)');
// options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
})
}
@@ -693,10 +693,10 @@ export default {
get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
clearBoxDrawer(drawers.BPVaporDensity);
if (response.code != 200 || response.data.radar_data.length === 0) {
- createEmptyCanvas('BP-vapor-density', 1200, 600);
+ createEmptyCanvas('BP-vapor-density', 1400, 700);
return;
}
- drawers.BPVaporDensity = new BoxDrawer(1200, 600, prepareBPVaporDensityColors(), response.data, 'BP-vapor-density', '(g/kg)');
+ drawers.BPVaporDensity = new BoxDrawer(1400, 700, prepareBPVaporDensityColors(), response.data, 'BP-vapor-density', '(g/kg)');
// options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
})
}
@@ -1020,7 +1020,7 @@ export default {
}
}
.raman-picture-container {
- width: calc(~"100% - 1rem");
+ //width: calc(~"100% - 1rem");
margin: 0 auto;
#original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas {
}
@@ -1033,7 +1033,7 @@ export default {
width: 100%;
font-size: 0.22rem;
position: absolute;
- left: 3.4rem;
+ left: 3.6rem;
top: 0.3rem;
z-index: 1000;
}
@@ -1046,7 +1046,7 @@ export default {
//
//}
#BP-temp, #BP-relative-humidity, #BP-vapor-density {
- transform: scale(1, 1.0) translate(-42px, 55px);
+ transform: scale(1, 1.0) translateX(-42px);
}
.shiXu {
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 7463d44..8b71d7c 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -40,13 +40,13 @@
</el-row>
</div>
- <div class="menu-item">
- <h2 class="tip">要素选择</h2>
+ <div class="menu-item">
+ <h2 class="tip">要素选择</h2>
<el-row :gutter="12">
- <el-col :span="24" v-for="(item, index) in elementData" :key = 'index'>
+ <el-col :span="24" v-for="(item, index) in elementData" :key='index'>
<span @click="onElementClick(item.value)"
- :class="{'active': currentElement === item.value}">{{ item.label }}</span></el-col>
- </el-row>
+ :class="{'active': currentElement === item.value}">{{ item.label }}</span></el-col>
+ </el-row>
</div>
</div>
@@ -105,7 +105,7 @@
<div class="picture-container raman-picture-container" v-show=" currentElement=== 'aod-icot-wcot'">
<div class="picture">
<div id="opticalThickness"
- style="width: 1000px;height: 450px;margin-top: 66px"
+ style="margin-top: 66px"
v-loading="loadingOpticalThicknessStatus"
custom-class="loading"
element-loading-text="加载中">
@@ -113,7 +113,7 @@
</div>
</div>
- <div class="picture-container raman-picture-container" v-show = "currentElement=== 'extinctionOptics'">
+ <div class="picture-container raman-picture-container" v-show="currentElement=== 'extinctionOptics'">
<div class="picture special-picture">
<div v-loading="loadingExtinctionOpticsStatus"
style="width: 100%;height: 100%"
@@ -155,20 +155,20 @@
</div>
</div>
- <div class="picture-container raman-picture-container" v-show="currentElement=== 'pblh'">
+ <div class="picture-container raman-picture-container" v-show="currentElement=== 'pblh'">
<div class="picture">
<div id="BoundaryLayerHeight"
- style="width: 1000px;height: 450px;margin-top: 66px"
+ style="margin-top: 66px"
v-loading="loadingBoundaryLayerHeightStatus"
custom-class="loading"
element-loading-text="加载中"></div>
</div>
- </div>
+ </div>
- <div class="picture-container raman-picture-container" v-show="currentElement=== 'lidarratio'">
+ <div class="picture-container raman-picture-container" v-show="currentElement=== 'lidarratio'">
<div class="picture">
<div id="LidarRatio"
- style="width: 1000px;height: 450px;margin-top: 66px"
+ style="margin-top: 66px"
v-loading="loadingLidarRatioStatus"
custom-class="loading"
element-loading-text="加载中">
@@ -191,7 +191,7 @@
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudbaseheight'">
<div class="picture special-picture">
<div id="cloudsHeight"
- style="width: 1000px;height: 450px;margin-top: 66px"
+ style="margin-top: 66px"
v-loading="loadingCloudsHeightStatus"
custom-class="loading"
element-loading-text="加载中"></div>
@@ -201,7 +201,7 @@
<div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudtopheight'">
<div class="picture special-picture">
<div id="cloudTopHeight"
- style="width: 1000px;height: 450px;margin-top: 66px"
+ style="margin-top: 66px"
v-loading="loadingCloudTopHeightStatus"
custom-class="loading"
element-loading-text="加载中"></div>
@@ -209,18 +209,17 @@
</div>
-
-<!-- <div class="picture-container raman-picture-container" v-show="currentElement === 'layertype'">-->
-<!-- <div class="picture special-picture">-->
-<!--<!– <h2 class="title">云的识别</h2>–>-->
-<!-- <div v-loading="loadingCloudRecognitionStatus"-->
-<!-- style="width: 100%;"-->
-<!-- custom-class="loading"-->
-<!-- element-loading-text="加载中">-->
-<!-- <canvas id='cloud_recognition_chart'></canvas>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </div>-->
+ <!-- <div class="picture-container raman-picture-container" v-show="currentElement === 'layertype'">-->
+ <!-- <div class="picture special-picture">-->
+ <!--<!– <h2 class="title">云的识别</h2>–>-->
+ <!-- <div v-loading="loadingCloudRecognitionStatus"-->
+ <!-- style="width: 100%;"-->
+ <!-- custom-class="loading"-->
+ <!-- element-loading-text="加载中">-->
+ <!-- <canvas id='cloud_recognition_chart'></canvas>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
<div class="picture-container raman-picture-container" v-show="currentElement === 'extinction'">
<div class="picture special-picture">
@@ -285,7 +284,7 @@ export default {
name: 'RamanLidar',
setup() {
let timer = null;
- const quailtyTimes = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13",
+ const quailtyTimes = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13",
"14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
let creates: {
@@ -394,20 +393,19 @@ export default {
//边界层高度
const boundaryLayerHeightInit = () => {
creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
- creates.boundaryLayerHeight.setChart(false,'line', 1000);
+ creates.boundaryLayerHeight.setChart(false, 'line', 1500, 600);
creates.boundaryLayerHeight.setXAxisTypeDate();
creates.boundaryLayerHeight.setSpecialYAxis('边界层高度(m)');
creates.boundaryLayerHeight.setLegend();
creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
- creates.boundaryLayerHeight.setSeries('边界层高度',0, null, null, '#3636FF')
+ creates.boundaryLayerHeight.setSeries('边界层高度', 0, null, null, '#3636FF')
creates.boundaryLayerHeight.init();
}
//云层高度
const cloudsHeightInit = () => {
creates.cloudsHeight = new HighChartCreate('cloudsHeight');
- creates.cloudsHeight.setChart(false, 'scatter', 1000);
- // creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
+ creates.cloudsHeight.setChart(false, 'scatter', 1500, 600);
creates.cloudsHeight.setXAxisTypeDate();
creates.cloudsHeight.setSpecialYAxis('高度(m)');
creates.cloudsHeight.setLegend();
@@ -419,7 +417,7 @@ export default {
//云顶高度
const cloudTopHeightInit = () => {
creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
- creates.cloudTopHeight.setChart(false, 'scatter', 1000);
+ creates.cloudTopHeight.setChart(false, 'scatter', 1500, 600);
// creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
creates.cloudTopHeight.setXAxisTypeDate();
creates.cloudTopHeight.setSpecialYAxis('高度(m)');
@@ -432,10 +430,9 @@ export default {
//激光雷达比
const LidarRatioInit = () => {
creates.LidarRatio = new HighChartCreate('LidarRatio');
- creates.LidarRatio.setChart(false,'line', 1000);
+ creates.LidarRatio.setChart(false, 'line', 1500, 600);
creates.LidarRatio.setSpecialXAxis('激光雷达比(单位立体角)', 120, 0, 20);
- // creates.LidarRatio.setSpecialYAxis('高度(m)');
- creates.LidarRatio.setYAxis('高度(m)', 3000, 0);
+ creates.LidarRatio.setSpecialYAxis('高度(m)', 3000, 0);
creates.LidarRatio.setLegend();
creates.LidarRatio.setTooltip('高度: {point.y}');
creates.LidarRatio.setSeries('激光雷达比', 0, null, null, '#3636FF')
@@ -445,7 +442,7 @@ export default {
//光学厚度
const opticalThicknessInit = () => {
creates.opticalThickness = new HighChartCreate('opticalThickness');
- creates.opticalThickness.setChart(false,'line', 1000);
+ creates.opticalThickness.setChart(false, 'line', 1500, 600);
creates.opticalThickness.setXAxisTypeDate();
creates.opticalThickness.setSpecialYAxis('光学厚度');
creates.opticalThickness.setLegend(true);
@@ -465,14 +462,14 @@ export default {
const setAndChangeCurrentTime = (name) => {
options.index = 23;
- if ("MWR" === name){
+ if ("MWR" === name) {
options.date = moment().format('YYYY-MM-DD 00:00:00');
options.timeLineFormat = "";
- }else{
+ } else {
options.date = moment().format('YYYY-MM-DD HH:00:00');
options.timeLineFormat = "";
}
-
+
options.currentTime = options.date;
}
@@ -487,10 +484,10 @@ export default {
if (options.currentTab === 'boundary-layer-height') {
options.currentElement = 'singleWatervapor'
options.elementData = [
- {
- value: 'singleWatervapor',
- label: '水汽'
- }]
+ {
+ value: 'singleWatervapor',
+ label: '水汽'
+ }]
} else if (options.currentTab === 'optical-property') {
options.currentElement = 'aod-icot-wcot'
@@ -513,7 +510,7 @@ export default {
options.elementData = [
{
value: 'pm2_5',
- label: '气溶胶PM'
+ label: '气溶胶浓度'
},
{
value: 'pblh',
@@ -597,9 +594,9 @@ export default {
initTimeLine()
reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts);
break;
- // case 'layertype' :
- // reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
- // break;
+ // case 'layertype' :
+ // reloadCloudRecognition('layertype', 801, 'layertype', drawCloudRecognition);
+ // break;
case 'extinction' :
initTimeLine(true);
reloadExtinctionBefore();
@@ -618,14 +615,14 @@ export default {
const reloadWatervaporBefore = () => {
options.loadingWatervaporBeforeStatus = true;
let params = {
- date: moment(options.date).format('YYYY-MM-DD 00'),
- var: 'Vapor Mixing Ratio',
- locate: options.currentRegion
- }
+ date: moment(options.date).format('YYYY-MM-DD 00'),
+ var: 'Vapor Mixing Ratio',
+ locate: options.currentRegion
+ }
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
options.loadingWatervaporBeforeStatus = false;
- if (response.error != 0){
- createEmptyCanvas('watervapor_chart-before', 800, 650);
+ if (response.error != 0) {
+ createEmptyCanvas('watervapor_chart-before', 810, 650);
console.log("未找到质控前数据文件");
return;
}
@@ -635,7 +632,7 @@ export default {
}
let matrix = convertValueToBox(response.data);
- creates.watervaporBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-before", 'g/kg');
+ creates.watervaporBeforeDrawer = new HeatMapDrawer(810, 700, matrix, "watervapor_chart-before", 'g/kg');
creates.watervaporBeforeDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporBeforeDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporBeforeDrawer.draw();
@@ -645,14 +642,14 @@ export default {
const reloadExtinctionBefore = () => {
options.loadingExtinctionBeforeStatus = true;
let params = {
- date: moment(options.date).format('YYYY-MM-DD HH'),
- var: 'MEXT',
- locate: options.currentRegion
- }
+ date: moment(options.date).format('YYYY-MM-DD HH'),
+ var: 'MEXT',
+ locate: options.currentRegion
+ }
post("/qualityCompare/findByTimeAndElement", params).then((response: any) => {
options.loadingExtinctionBeforeStatus = false;
- if (response.error != 0){
- createEmptyCanvas('extinction_chart-before', 800, 650);
+ if (response.error != 0) {
+ createEmptyCanvas('extinction_chart-before', 810, 650);
console.log("未找到质控前数据文件");
return;
}
@@ -662,7 +659,7 @@ export default {
}
let matrix = convertValueToBox(response.data);
- creates.extinctionBeforeDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-before", '/km');
+ creates.extinctionBeforeDrawer = new HeatMapDrawer(810, 700, matrix, "extinction_chart-before", '/km');
creates.extinctionBeforeDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 2000, 4000, 6000, 8000, 10000, 12000], true, true));
creates.extinctionBeforeDrawer.setColorChart(prepareExtinctionnColors());
creates.extinctionBeforeDrawer.draw();
@@ -671,7 +668,7 @@ export default {
const convertValueToBox = (data) => {
let timeMoment = moment(options.date).set('h', 1).add(-1, 'd');
- if (options.currentElement === 'extinction'){
+ if (options.currentElement === 'extinction') {
timeMoment.add(12, 'h');
}
@@ -680,7 +677,7 @@ export default {
let boxes = new Array<Array<Box>>();
let index = 1;
data.forEach(r => {
- if (index % 11 == 0){
+ if (index % 11 == 0) {
timeMoment.add(1, 'h');
timeFormat = timeMoment.format("MM月DD日HH时");
}
@@ -788,7 +785,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'backscatter');
- creates.backscatterDrawer = new HeatMapDrawer(1200, 650, matrix, "backscatter_chart",'km/sr');
+ creates.backscatterDrawer = new HeatMapDrawer(1400, 700, 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();
@@ -798,7 +795,6 @@ export default {
let colorChart = new ColorChart(['#8F0000', '#E00000', '#FF1F00', '#FF6600', '#FF9900', '#FFE000', '#EBFF14', '#99FF66', '#66FF99', '#1FFFE0',
'#00E0FF', '#0099FF', '#005CFF', '#0029FF', '#0000E0', '#000099'],
[-1, -1.25, -1.5, -1.75, -2, -2.25, -2.5, -2.75, -3, -3.25, -3.5, -3.75, -4, -4.25, -4.5, -4.75, -5]
- // [-4, -4.25, -4.5, -4.75, -5, -5.25, -5.5, -5.75, -6, -6.25, -6.5, -6.75, -7, -7.25, -7.5, -7.75, -8]
);
colorChart.setDefaultColors('#000099', '#8F0000');
return colorChart;
@@ -811,7 +807,7 @@ export default {
creates.pm2Point5Drawer.close();
}
let matrix = converCloudRecognition(201, result, 'pm2_5');
- creates.pm2Point5Drawer = new HeatMapDrawer(800, 650, matrix, "pm2_5_chart",'μg/m³', 'PM2.5');
+ creates.pm2Point5Drawer = new HeatMapDrawer(810, 700, 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();
@@ -826,7 +822,7 @@ export default {
}
let matrix = converCloudRecognition(201, result, 'pm10');
- creates.pm10Drawer = new HeatMapDrawer(800, 650, matrix, "pm10_chart", 'μg/m³', 'PM10');
+ creates.pm10Drawer = new HeatMapDrawer(810, 700, 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();
@@ -842,7 +838,6 @@ export default {
const drawLidarRatioCharts = (result: CustomeArray<any>) => {
if (result.length <= 0) return;
const data = LidarRatioPrepareChartData(result);
- console.log(data);
creates.LidarRatio.updateSeries(0, data);
options.loadingLidarRatioStatus = false
}
@@ -935,7 +930,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'cloudSol');
- creates.cloudSolDrawer = new HeatMapDrawer(1200, 650, matrix, "cloud_sol_chart");
+ creates.cloudSolDrawer = new HeatMapDrawer(1400, 700, 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();
@@ -950,7 +945,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'extinctionOptics');
- creates.opticsExtinctionDrawer = new HeatMapDrawer(1200, 650, matrix, "extinction_optics_chart",'/km');
+ creates.opticsExtinctionDrawer = new HeatMapDrawer(1400, 700, matrix, "extinction_optics_chart", '/km');
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();
@@ -966,7 +961,7 @@ export default {
}
let matrix = converCloudRecognition(101, result, 'singleWatervapor');
- creates.singleWatervaporDrawer = new HeatMapDrawer(1200, 650, matrix, "watervapor_single_chart",' g/kg');
+ creates.singleWatervaporDrawer = new HeatMapDrawer(1400, 700, 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();
@@ -981,7 +976,7 @@ export default {
}
let matrix = converCloudRecognition(101, result, 'watervapor');
- creates.watervaporDrawer = new HeatMapDrawer(800, 650, matrix, "watervapor_chart-after",'g/kg');
+ creates.watervaporDrawer = new HeatMapDrawer(800, 700, matrix, "watervapor_chart-after", 'g/kg');
creates.watervaporDrawer.setAxis(new CoordinateScale(quailtyTimes), new CoordinateScale([0, 500, 1000, 1500], true, true));
creates.watervaporDrawer.setColorChart(prepareWatervaporColors());
creates.watervaporDrawer.draw();
@@ -1003,7 +998,7 @@ export default {
}
let matrix = converCloudRecognition(801, result, 'extinction');
- creates.extinctionDrawer = new HeatMapDrawer(800, 650, matrix, "extinction_chart-after", '/km');
+ creates.extinctionDrawer = new HeatMapDrawer(800, 700, matrix, "extinction_chart-after", '/km');
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();
@@ -1044,10 +1039,8 @@ export default {
const reloadChartLidarratio = (element: string, callback: any) => {
preprocessingCharts(element)
let result = new CustomeArray(callback);
-
let time = moment(options.date);
-
- reloadSingleChartsRecognition(time.format('M_D_H'), element, result);
+ reloadSingleChartsRecognition(time.format('M_D_H'), element, result);
}
const drawCloudRecognition = (result: CustomeArray<any>) => {
@@ -1066,7 +1059,7 @@ export default {
const prepareCloudRecognitionColors = () => {
return new ColorChart(['#0000FF', '#00FF00', '#FF0000', '#FFFFFF'],
- [{ label: '冰云', value: 3 }, { label: '水云', value: 2 }, { label: '气溶胶', value: 1 }, { label: '晴空', value: 0 }],
+ [{label: '冰云', value: 3}, {label: '水云', value: 2}, {label: '气溶胶', value: 1}, {label: '晴空', value: 0}],
false,
false,
"equal"
@@ -1094,8 +1087,8 @@ export default {
const interval = Math.round(11 / r.data[0].length);
for (let h = 0, len = capacity; h < len; h++) {
let tempIndex = parseInt(index + "");
- if (r.data[h] == null){
- for(let i = 0; i < 11; i++){
+ if (r.data[h] == null) {
+ for (let i = 0; i < 11; i++) {
tempIndex++;
if (matrix[tempIndex] == null) {
matrix[tempIndex] = new Array<Box>(capacity);
@@ -1114,7 +1107,7 @@ export default {
matrix[tempIndex] = new Array<Box>(capacity);
}
- if (h < 4){
+ if (h < 4) {
matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, NaN, h * 15, time, "米");
continue;
}
@@ -1372,10 +1365,9 @@ export default {
const onPrevDayClick = () => {
let element = getCurrentElement();
- if (moment(options.date).add(-1, 'day').format('YYYY-MM-DD') == moment().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');
+ } else options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
options.currentTime = options.date;
options.index--;
if (options.index < 0) {
@@ -1390,10 +1382,9 @@ export default {
}
const onNextDayClick = () => {
- if (moment(options.date).add(1, 'day').format('YYYY-MM-DD') == moment().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')
+ } else options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
options.timeLineFormat = "day";
initTimeLine()
elementChange(options.currentElement)
@@ -1440,9 +1431,7 @@ export default {
// const timeExcute = () => {
// clearTimer();
- //
// let element = getCurrentElement();
- //
// timer = setInterval(() => {
// options.index++;
// if (options.index > element.childElementCount - 1)
@@ -1471,12 +1460,11 @@ export default {
// }
const onChange = (e) => {
- if (options.currentElement === 'extinction' || options.currentElement=== 'lidarratio' || options.currentElement === 'watervapor') {
+ 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') ) {
+ } else {
+ if (moment(e).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
options.date = moment().format('YYYY-MM-DD HH')
}
options.timeLineFormat = "day";
@@ -1519,7 +1507,7 @@ export default {
const prepareApiParams = (time, variableName) => {
if (variableName == 'lidarratio') {
return {
- date: moment(time,'MM_DD_hh').format('M_D'),
+ date: moment(time, 'MM_DD_hh').format('M_D'),
var: variableName,
locate: options.currentRegion
}
@@ -1570,7 +1558,6 @@ export default {
options.date = moment(time.date).format('YYYY-MM-DD');
elementChange(options.currentElement)
options.index = index;
-
}
const onPrevDayTimeClick = () => {
@@ -1617,7 +1604,6 @@ export default {
:deep(.el-date-editor), .control-btn, :deep(.el-select), .unit {
padding-top: 0.08rem;
}
-
:deep(.el-input__prefix) {
top: 4px;
}
@@ -1632,7 +1618,7 @@ export default {
}
.raman-picture-container {
- width: calc(~"100% - 1rem");
+ //width: calc(~"100% - 1rem");
margin: 0 auto;
.special-picture {
@@ -1648,43 +1634,34 @@ export default {
//margin-top: 30px;
#watervapor_single_chart {
- transform: translateX(9%) translateY(20px);
- //transform: scale(1.0, 0.8) translateX(539px);
+ transform: translateX(6%) translateY(50px);
}
#extinction_optics_chart {
- //transform: scale(0.56, 0.85) translateX(-32%);
- transform: translateX(9%) translateY(20px);
-
+ transform: translateX(6%) translateY(50px);
}
#pm2_5_chart {
- transform: translateX(-50px) translateY(20px);
+ transform: translateX(-15px) translateY(50px);
}
#pm10_chart {
- transform: translateX(-50px) translateY(20px);
+ transform: translateX(-15px) translateY(50px);
}
#backscatter_chart {
- transform: translateX(9%) translateY(20px);
- //transform: scale(0.6, 0.85) translateX(-76px);
+ transform: translateX(6%) translateY(50px);
}
#cloud_sol_chart {
- transform: translateX(9%) translateY(20px);
- //transform: scale(0.6, 0.85) translate(-12%, -12px);
+ transform: translateX(6%) translateY(50px);
}
- //#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);
+ #watervapor_chart-after {
+ transform: translateY(50px);
}
.title {
@@ -1704,7 +1681,6 @@ export default {
width: 50%;
}
}
-
}
}
}
diff --git a/04.系统编码/Frontend/src/model/heat-map-drawer.ts b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
index dc9fae5..d04ecc3 100644
--- a/04.系统编码/Frontend/src/model/heat-map-drawer.ts
+++ b/04.系统编码/Frontend/src/model/heat-map-drawer.ts
@@ -12,9 +12,9 @@ export class HeatMapDrawer{
private readonly width: number = null;
private readonly height: number = null;
- private readonly paddingLeft: number = 150;
- private readonly paddingRight: number = 100;
- private readonly paddingTop: number = 80;
+ private readonly paddingLeft: number = 100;
+ private readonly paddingRight: number = 115;
+ private readonly paddingTop: number = 50;
private readonly paddingBottom: number = 100;
private colorChart: ColorChart = null;
private values: any = null;
@@ -259,7 +259,7 @@ export class HeatMapDrawer{
// 保存原有的canvas状态，供restore方法重置
this.canvasContext.save();
let name = "高度(m)";
- this.canvasContext.translate(90, this.height / 2 + this.paddingTop - this.canvasContext.measureText(name).width);
+ this.canvasContext.translate(45, this.height / 2 + this.paddingTop - this.canvasContext.measureText(name).width);
this.canvasContext.rotate(Math.PI * 1.5);
this.canvasContext.font="normal 22px 微软雅黑";
this.canvasContext.fillStyle="#000000";
@@ -295,17 +295,17 @@ export class HeatMapDrawer{
//温度单位
private drawTemperatureText(unit): void {
- this.canvasContext.font = "normal 25px 微软雅黑";
+ this.canvasContext.font = "normal 35px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
let unitX = this.width - this.paddingRight;
- this.canvasContext.fillText(unit, unitX, 70);
+ this.canvasContext.fillText(unit, unitX, 45);
}
private drawResolutionName(name): void {
this.canvasContext.font = "normal 35px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
- let nameX = 380
- this.canvasContext.fillText(name, nameX, 60)
+ let nameY = this.paddingTop - 23
+ this.canvasContext.fillText(name, 380, nameY)
}
private drawVerticalScale(): void{
@@ -315,7 +315,7 @@ export class HeatMapDrawer{
let startX = this.paddingLeft + this.horizontalScaleLine;
let startY = this.paddingTop + this.verticalScaleLine;
- this.canvasContext.font = "normal 16px 微软雅黑";
+ this.canvasContext.font = "normal 25px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
for(let index = 0, len = scaleCount, lastLen = scaleCount - 1; index < len; index++){
if ((index == 0 && !this.xAxis.showStartValue) || (index == lastLen && !this.xAxis.showEndValue)) continue;
@@ -339,9 +339,9 @@ export class HeatMapDrawer{
private setTimeDetail(_x: number, startY: number, text: string): void{
// const text = this.values[15][0].time.slice(0, 6);
- this.canvasContext.font = "normal 14px 微软雅黑";
+ this.canvasContext.font = "normal 15px 微软雅黑";
this.canvasContext.fillText(text, _x - this.canvasContext.measureText(text).width / 2, startY + this.verticalScaleLine + this.borderHeight + 38);
- this.canvasContext.font = "normal 16px 微软雅黑";
+ this.canvasContext.font = "normal 17px 微软雅黑";
}
private drawHorizontalScale(): void{
diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts
index 713dc73..e614d59 100644
--- a/04.系统编码/Frontend/src/model/high-chart-create.ts
+++ b/04.系统编码/Frontend/src/model/high-chart-create.ts
@@ -19,11 +19,12 @@ export class HighChartCreate {
this.id = id;
}
- public setChart(inverted: boolean = false, type: string = 'line', width: number = null): void {
+ public setChart(inverted: boolean = false, type: string = 'line', width: number = null, height: number = null): void {
this.chart = {
type: type,
inverted: inverted,
- width: width
+ width: width,
+ height: height
};
}
@@ -54,7 +55,7 @@ export class HighChartCreate {
type: 'datetime',
labels: {
style: {
- fontSize:'18px'
+ fontSize:'20px'
},
formatter: function () {
return Highcharts.dateFormat('%d日%H时', this.value);
@@ -86,7 +87,7 @@ export class HighChartCreate {
},
labels: {
style: {
- fontSize:'18px'
+ fontSize:'20px'
},
},
max: max,
@@ -129,7 +130,7 @@ export class HighChartCreate {
labels: {
y: 8,
style: {
- fontSize:'18px'
+ fontSize:'20px'
},
},
max: max,
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index 38cacd4..9135eec 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -26,8 +26,8 @@ export class BoxDrawer{
private readonly width: number = null;
private readonly height: number = null;
- private readonly paddingLeft: number = 150;
- private readonly paddingRight: number = 130;
+ private readonly paddingLeft: number = 110;
+ private readonly paddingRight: number = 110;
private readonly paddingTop: number = 60;
private readonly paddingBottom: number = 50;
private readonly colorChart: ColorChart = null;
@@ -243,7 +243,7 @@ export class BoxDrawer{
this.canvasContext.save();
let name = "高度(km)";
this.canvasContext.font="normal 22px 微软雅黑";
- this.canvasContext.translate(80, this.height / 2 + this.paddingTop);
+ this.canvasContext.translate(70, this.height / 2 + this.paddingTop);
this.canvasContext.rotate(Math.PI * 1.5);
this.canvasContext.fillStyle="#000000";
this.canvasContext.fillText(name, 0, 0);
@@ -278,9 +278,9 @@ export class BoxDrawer{
private drawTemperatureText(unit): void {
this.canvasContext.font = "normal 35px 微软雅黑";
this.canvasContext.fillStyle = "#000000";
- let unitX = this.width - this.paddingRight;
- if (unit === '(degree)') unitX = this.width - this.paddingRight - 30;
- this.canvasContext.fillText(unit, unitX,50);
+ let unitX = this.width - this.paddingRight - 15;
+ if (unit === '(degree)') unitX = this.width - this.paddingRight - 40;
+ this.canvasContext.fillText(unit, unitX,60);
}
private drawVerticalScale(): void{
@@ -336,7 +336,7 @@ export class BoxDrawer{
this.canvasContext.stroke();
if (flag) {
- this.canvasContext.font = "normal 30px 微软雅黑";
+ this.canvasContext.font = "normal 25px 微软雅黑";
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);
@@ -417,7 +417,7 @@ export class ColorChart{
throw new Error("色标数据不正确，数据个数应为颜色个数 + 1");
}
- public getColor(value: number, id: string = null ): string{
+ public getColor(value: number ): string{
if (isNaN(value)) return null;
const length = this.valueLength;
@@ -443,8 +443,6 @@ export class ColorChart{
}
}
-
-
return null;
}
}