From 0db6657cb7eeca686a5b21cc4f1d1f482c02b664 Mon Sep 17 00:00:00 2001
From: xuhuihui <3548508071@qq.com>
Date: Wed, 26 Jan 2022 18:06:37 +0800
Subject: [PATCH] commit

---
 04.系统编码/Frontend/package-lock.json    |  70 +++
 04.系统编码/Frontend/package.json         |   2 +
 04.系统编码/Frontend/src/App.vue          |   2 +-
 .../src/components/DecisionSupport.vue        |   2 +
 .../src/components/MicrowaveRadiation.vue     | 536 +++++++++++-------
 04.系统编码/Frontend/src/index.less       |  31 +-
 .../Frontend/src/model/microwave-radiation.ts |  38 ++
 .../Frontend/src/uilts/box-drawer.ts          |  73 ++-
 8 files changed, 501 insertions(+), 253 deletions(-)
 create mode 100644 04.系统编码/Frontend/src/model/microwave-radiation.ts

diff --git a/04.系统编码/Frontend/package-lock.json b/04.系统编码/Frontend/package-lock.json
index 82d0dad..10c2ab2 100644
--- a/04.系统编码/Frontend/package-lock.json
+++ b/04.系统编码/Frontend/package-lock.json
@@ -11,7 +11,9 @@
         "axios": "^0.21.4",
         "browser-tiff.js": "^1.0.1",
         "crypto-js": "^4.1.1",
+        "echarts": "^5.2.2",
         "element-plus": "^1.2.0-beta.4",
+        "highcharts": "^9.3.2",
         "js-md5": "^0.7.3",
         "jsencrypt": "3.0.0-rc.1",
         "moment": "^2.29.1",
@@ -1242,6 +1244,20 @@
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
+    "node_modules/echarts": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.2.tgz",
+      "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -1635,6 +1651,11 @@
       "integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
       "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=="
+    },
     "node_modules/http-assert": {
       "version": "1.5.0",
       "resolved": "https://registry.nlark.com/http-assert/download/http-assert-1.5.0.tgz",
@@ -3748,6 +3769,19 @@
       "engines": {
         "node": ">= 4.0.0"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
+      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   },
   "dependencies": {
@@ -4714,6 +4748,22 @@
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
+    "echarts": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.2.tgz",
+      "integrity": "sha512-yxuBfeIH5c+0FsoRP60w4De6omXhA06c7eUYBsC1ykB6Ys2yK5fSteIYWvkJ4xJVLQgCvAdO8C4mN6MLeJpBaw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -5004,6 +5054,11 @@
       "integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
       "dev": true
     },
+    "highcharts": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.2.tgz",
+      "integrity": "sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg=="
+    },
     "http-assert": {
       "version": "1.5.0",
       "resolved": "https://registry.nlark.com/http-assert/download/http-assert-1.5.0.tgz",
@@ -6583,6 +6638,21 @@
       "resolved": "https://registry.npm.taobao.org/ylru/download/ylru-1.2.1.tgz",
       "integrity": "sha1-9Xa2M0FUeYnB3nuiiHYJI7J/6E8=",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
+      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }
diff --git a/04.系统编码/Frontend/package.json b/04.系统编码/Frontend/package.json
index f8cd90e..8415147 100644
--- a/04.系统编码/Frontend/package.json
+++ b/04.系统编码/Frontend/package.json
@@ -9,7 +9,9 @@
     "axios": "^0.21.4",
     "browser-tiff.js": "^1.0.1",
     "crypto-js": "^4.1.1",
+    "echarts": "^5.2.2",
     "element-plus": "^1.2.0-beta.4",
+    "highcharts": "^9.3.2",
     "js-md5": "^0.7.3",
     "jsencrypt": "3.0.0-rc.1",
     "moment": "^2.29.1",
diff --git a/04.系统编码/Frontend/src/App.vue b/04.系统编码/Frontend/src/App.vue
index 45d877c..1636727 100644
--- a/04.系统编码/Frontend/src/App.vue
+++ b/04.系统编码/Frontend/src/App.vue
@@ -8,11 +8,11 @@
     import { useRouter } from 'vue-router';
     import Header from './components/Shared/Header.vue';
 
-
     export default {
         name: 'App',
         components: {Header},
         setup() {
+
             const router = useRouter();
             const showHeader = ref(false);
 
diff --git a/04.系统编码/Frontend/src/components/DecisionSupport.vue b/04.系统编码/Frontend/src/components/DecisionSupport.vue
index a23c2b1..4a9a3c9 100644
--- a/04.系统编码/Frontend/src/components/DecisionSupport.vue
+++ b/04.系统编码/Frontend/src/components/DecisionSupport.vue
@@ -255,6 +255,8 @@ import { post } from '../uilts/axios';
                     width: 6.5rem;
                     height: auto;
                     display: block;
+                    position: relative;
+
                     .el-image {
                         width: 100%;
                         height: auto;
diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 7e30b81..67493e9 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -45,9 +45,8 @@
         <div class="container panel">
             <div class="toolbar">
 
-
                 <!--6分钟-->
-                <div class="times" v-if="currentElement === 'six-minute'">
+                <div class="times sixMinute" v-if="currentElement === 'six-minute'">
                     <div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date, 'first-hour': time.minute === '00'}">
                         <span class="hour">{{time.hour}}</span>
                         <span class="time" @click="onTimeClick(time, index)">{{time.minute}}</span>
@@ -89,11 +88,11 @@
 <!--                <div class="refresh-btn" @click="onRefreshClick">-->
 <!--                    <img src="/images/refresh.png" />-->
 <!--                </div>-->
-                <div class="btns-group" v-if="currentTab==='kuoxian' || currentTab==='T-logP'">
-                    <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
-                    <a @click="onDownloadClick">下载动画</a>
-                    <a id="weboDownload" download :href="downloadSrc" class="hide">下载隐藏层</a>
-                </div>
+<!--                <div class="btns-group" v-if="currentTab==='kuoxian' || currentTab==='T-logP'">-->
+<!--                    <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>-->
+<!--                    <a @click="onDownloadClick">下载动画</a>-->
+<!--                    <a id="weboDownload" download :href="downloadSrc" class="hide">下载隐藏层</a>-->
+<!--                </div>-->
             </div>
             <div class="picture-view">
 <!--                <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>-->
@@ -103,78 +102,44 @@
 <!--                <div class="download-pictures hide" id="pictures">-->
 <!--                    <a v-for="(url, index) in urls" :key="index" download></a>-->
 <!--                </div>-->
+
+              <!--质控对比-->
                 <div class="picture-container contrast-picture-container" v-if="currentTab === 'MWR'">
                     <div class="picture">
                         <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2>
-                        <canvas id="original-data-canvas"></canvas>
-<!--                        <el-image-->
-<!--                            :src="contrast.noQCImgUrl"-->
-<!--                            :preview-src-list="contrast.noQCImgPreview"-->
-<!--                            :initial-index="0"-->
-<!--                            fit="contain"-->
-<!--                            @load="onImageLoad"-->
-<!--                        >-->
-<!--                            <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>-->
+                        <canvas id='original-data-canvas'></canvas>
                     </div>
                     <div class="picture">
                         <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2>
-                        <canvas id="abnormal-canvas"></canvas>
-<!--                        <el-image-->
-<!--                            :src="contrast.checkImgUrl"-->
-<!--                            :preview-src-list="contrast.checkImgPreview"-->
-<!--                            :initial-index="0"-->
-<!--                            fit="contain"-->
-<!--                            @load="onImageLoad"-->
-<!--                            @mousemove="onImageMove"-->
-<!--                        >-->
-<!--                            <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>-->
+                        <canvas id='abnormal-canvas'></canvas>
                     </div>
                     <div class="picture">
                         <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2>
-                        <canvas id="interpolate-canvas"></canvas>
+                        <canvas id='interpolate-canvas'></canvas>
                     </div>
                 </div>
 
-                <div class="picture-container" v-if="currentTab !== 'MWR'">
-                    <!-- <h2 class="title">{{title}}</h2> -->
+              <!--BP反演产品-->
+                <div class="picture-container contrast-picture-container" v-if="currentTab === 'shixu_BPFY'">
                     <div class="picture">
-                        <el-image
-                            :src="imgUrl"
-                            :preview-src-list="srcList"
-                            :initial-index="0"
-                            fit="contain"
-                            @load="onImageLoad"
-                        >
-                            <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>
+                      <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演温度</h2>
+                      <canvas id="BP-temp"></canvas>
                     </div>
+                  <div class="picture">
+                    <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演相对湿度</h2>
+                    <canvas id="BP-relative-humidity"></canvas>
+                  </div>
+                  <div class="picture">
+                    <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演水汽密度</h2>
+                    <canvas id="BP-vapor-density"></canvas>
+                  </div>
                 </div>
+
+              <div class="picture-container contrast-picture-container" v-if="currentTab === 'kuoxian'">
+                <h2 >{{ BPTitleTime }}温度、相对湿度、水汽密度廓线</h2>
+                <div id="container" style="width:100%;height:100%"></div>
+              </div>
+
             </div>
         </div>
     </div>
@@ -183,15 +148,14 @@
 <script lang="ts">
     import { onMounted, reactive, toRefs } from 'vue';
     import moment from "moment";
-    import { MicrowaveRadiationConfig } from '../uilts/Config';
-    import { post, get } from '../uilts/axios';
+    import { get } from '../uilts/axios';
     import {BoxDrawer, ColorChart, createEmptyCanvas} from "../uilts/box-drawer";
-    import {ElMessage} from "element-plus";
-    
+    import * as Highcharts from 'highcharts';
     export default {
         name: 'MicrowaveRadiation',
         setup() {
             let timer = null;
+            let verticalProfileHighChart = null;
 
             let options = reactive({
                 currentTab: 'MWR',
@@ -200,7 +164,7 @@
                 currentElement: 'six-minute',
                 currentCategory: 'CAPE',
                 date: moment('2021-12-05').format('YYYY-MM-DD'),
-                currentHour: '24',
+                currentHour: '00',
                 hours: [],
                 times: [],
                 days: [],
@@ -217,85 +181,155 @@
                     noQCImgPreview: [],
                     checkImgUrl: '',
                     checkImgPreview: [],
-                    fillingImgUrl: '/images/picture.png',
-                    fillingImgPreview: ['/images/picture.png']
+                    fillingImgUrl: '',
+                    fillingImgPreview: ['']
                 },
                 urls: [],
                 titleStartTime: null,
                 titleEndTime: null,
                 apiTimeLength: -2,
                 apiTimeInterval: 6,
-                onPitchTime : 0
+                onPitchTime : 0,
+                BPTitleTime:null,
+
+                highChartXAxis: [],
             });
 
             let drawers = {
               originalDrawer: null,
               interpolateDrawer: null,
-              abnormalDrawer: null
+              abnormalDrawer: null,
+              BPTempDrawer: null,
+              BPRelativeHumidity: null,
+              BPVaporDensity: null
             }
 
-            onMounted(() => {
-
+          onMounted(() => {
+                // initEcharts(null)
                 initTimeLine()
                 initHours();
                 setTimeout(() => {
                     changeColor()
-                },0)
+                },100)
                 reloadData()
-            })
 
-                // const onTabClick = (name) => {
-                //   options.currentTab = name;
-                //   options.currentElement = 'six-minute'
-                //   if (options.currentTab === 'MWR') {
-                //
-                //   }
-                //   cancelActive();
-                // }
+          })
 
             const onTabClick = (name) => {
                 options.currentTab = name;
                 options.currentElement = 'six-minute'
-                reloadData()
-                // initTimeLine()
-                // if ( options.currentTab === 'MWR' ) {
-                    // options.date = moment('2021-11-10').format('YYYY-MM-DD');
-                    // options.currentElement = 'TEMP';
-                    // options.index = options.days.length - 1;
-                    // initDays();
-
-                    // setTimeout(() => activeContrastImage(), 50)
-                // } else {
-                //
-                //     if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') {
-                //         // options.currentElement = 'TEMP';
-                //         setTimeout(()=>changeColor(),100) ;
-                //     }
-                //     else if (options.currentTab === 'shixu') {
-                //         options.date = moment('2021-12-04').format('YYYY-MM-DD');
-                //         // options.currentElement = 'CAPE';
-                //     }
-                //
-                //     options.date = moment('2021-12-05').format('YYYY-MM-DD');
-                //     options.index = options.times.length - 1;
-                //
-                //     if (options.currentTab === 'kuoxian' || options.currentTab === 'shixu_BPFY') {
-                //         options.date = moment('2021-12-04').format('YYYY-MM-DD');
-                //         // options.currentElement = 'TEMP';
-                //         options.currentHour = '23';
-                //     } else if (options.currentTab === 'shixu') {
-                //         options.date = moment('2021-12-04').format('YYYY-MM-DD');
-                //         // options.currentElement = 'CAPE';
-                //         options.currentHour = '23';
-                //     } else if (options.currentTab === 'T-logP') {
-                //         options.date = moment('2021-12-05').format('YYYY-MM-DD');
-                //         // options.currentElement = 'TEMP';
-                //         options.currentHour = '16';
-                //     }
-                //     initTimeLine();
-                //     // setTimeout(() => activeImage(moment(options.times[options.times.length - 1].date).hour(), moment(options.times[options.times.length - 1].date).minute()), 50)
-                // }
-                // cancelActive();
+                setTimeout( () => {
+                  initEcharts(name);
+                  reloadChangeData();
+                },500)
+            }
+
+            const initEcharts = (name) => {
+              if ( name === 'kuoxian'){
+                verticalProfileHighChart = Highcharts.chart('container', {
+                  credits: {
+                    enabled: false
+                  },
+                  chart: {
+                    type: 'line',
+                    inverted: true
+                  },
+                  title: {
+                    text: null
+                  },
+                  subtitle: {
+                    text: null
+                  },
+                  xAxis: {
+                    reversed: false,
+                    title: {
+                      enabled: true,
+                      text: '高度(km)'
+                    },
+                    categories: options.highChartXAxis,
+                    showLastLabel: true,
+                    showFirstLabel: true,
+                  },
+                  yAxis: [
+                    {
+                      title: {
+                        text: '温度T(degree)',
+                      },
+                      max: 10,
+                      min: -40,
+                      tickInterval: 10,
+                      tickAmount: 6,
+                      lineWidth: 1,
+                      opposite:true
+                    },
+                    {
+                      title: {
+                        text: '相对湿度RH(%)'
+                      },
+                      max: 100,
+                      min: 0,
+                      tickInterval: 10,
+                      tickAmount: 11,
+                      lineWidth: 1,
+                    },
+                    {
+                      title: {
+                        text: '水汽密度Q(g/kg)'
+                      },
+                      labels: {
+                        formatter: function() {
+                          return this.value.toFixed(1);
+                        }
+                      },
+                      // allowDecimals: true,
+                      max: 10.0,
+                      min: 0.0,
+                      tickInterval: 1.0,
+                      tickAmount: 11,
+                      lineWidth: 1,
+                    },
+                  ],
+                  legend: {
+                    layout: 'vertical',
+                    align: 'right',
+                    verticalAlign: 'middle'
+                  },
+                  tooltip: {
+                    headerFormat: '<b>{series.name}</b><br/>',
+                    pointFormat: '{point.category} KM: {point.y}'
+                    // pointFormatter: function () {
+                    //   console.log(this)
+                    //   return '{point.category} KM: {point.y}'
+                    // }
+                  },
+                  series: [
+                    {
+                      name: '温度',
+                      data: [],
+                      yAxis: 0,
+                      tooltip: {
+                      valueSuffix: '℃'
+                     }
+                    },
+                    {
+                      name: '相对湿度',
+                      data: [],
+                      yAxis: 1,
+                      tooltip: {
+                      valueSuffix: '%'
+                      }
+                    },
+                    {
+                      name: '水汽密度',
+                      data: [],
+                      yAxis: 2,
+                      tooltip: {
+                      valueSuffix: 'g/Kg'
+                      }
+                    }
+                  ]
+                });
+              }
             }
 
             const onRegionClick = (region) => {
@@ -313,10 +347,6 @@
                 options.currentElement = element;
                 options.onPitchTime = onPitchTime
                 initTimeLine(reloadData)
-                // if (options.currentTab === 'MWR')
-                //     activeContrastImage();
-                // else
-                //     activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
                 if (element === 'six-minute') {
                     setTimeout(() => {
                         changeColor()
@@ -452,23 +482,6 @@
                   callback(params);
             }
 
-            // const initDays = () => {
-            //     options.days = [];
-            //     options.currentTime = moment(options.date).format('YYYY-MM-DD');
-            //
-            //     let now = moment(options.date).add(1, 'day');
-            //
-            //     for (let i = 0; i < 10 ; i++) {
-            //         options.days.push({
-            //             day: now.add(-1, 'day').format('DD'),
-            //             date: now.format('YYYY-MM-DD'),
-            //         })
-            //     }
-            //
-            //     options.days.reverse();
-            //     options.index = options.days.length - 1;
-            // }
-
             const initHours = () => {
                 for (let i = 0; i < 24; i++) {
                     options.hours.push({
@@ -479,16 +492,10 @@
             }
 
             const onTimeClick = (time, index) => {
-              options.currentTime = time.date;
-              reloadQualityComparison();
-                // options.currentTime = time.date;
+                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
-                reloadData()
-                // options.index = index;
-                // test()
-                // cancelActive();
-                // activeImage(moment(time.date).hour(), moment(time.date).minute());
+                reloadChangeData()
             }
 
             // const onDayClick = (time, index) => {
@@ -509,8 +516,8 @@
                 initTimeLine()
                 options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30).format('YYYY-MM-DD HH:mm:ss');
                 options.titleEndTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
-                reloadData()
-              
+                reloadChangeData()
+
             }
 
             //下一天
@@ -519,7 +526,7 @@
                 initTimeLine()
                 options.titleStartTime = moment(options.date).hour(parseInt(options.currentHour) + options.apiTimeLength).minute(options.currentElement === 'six-minute' ? 36 : 30).format('YYYY-MM-DD HH:mm:ss');
                 options.titleEndTime = moment(options.date).hour(parseInt(options.currentHour)).minute(options.currentElement === 'six-minute' ? 30 : 0).format('YYYY-MM-DD HH:mm:ss');
-                reloadData()
+                reloadChangeData()
             }
 
             // const onPrevImgClick = () => {
@@ -549,22 +556,14 @@
             //     setCurrentPlayElement(element);
             // }
             //重置时间
-            // const onRefreshClick = () => {
-            //     // cancelActive();
-            //     let element = getCurrentElement();
-            //     // if (options.currentTab === 'MWR') {
-            //     //     options.date = moment('2021-11-10').format('YYYY-MM-DD');
-            //     //     options.currentTime = options.date;
-            //     //     element.children[options.days.length - 1].classList.add('active');
-            //         // activeContrastImage();
-            //     // } else {
-            //         options.currentHour = '24';
-            //         options.date = moment('2021-12-05').format('YYYY-MM-DD');
-            //         options.currentTime = moment(options.date).hour(parseInt(options.currentHour)).format('YYYY-MM-DD HH:mm');
-            //         element.children[options.times.length - 1].classList.add('active');
-            //         // activeImage(moment(options.currentTime).hour(), moment(options.currentTime).minute(options.currentTab === 'T-logP' ? 0 : 30));
-            //     // }
-            // }
+            const onRefreshClick = () => {
+                let element = getCurrentElement();
+                    options.currentHour = '00';
+                    options.date = moment('2021-12-05').format('YYYY-MM-DD');
+                    element.children[options.times.length - 1].classList.add('active');
+                    initTimeLine()
+                    reloadChangeData()
+            }
 
             //播放动画
             const onPlayClick = () => {
@@ -605,22 +604,13 @@
                 element.children[options.index].classList.add('active');
                 if(options.currentTab === 'MWR') {
                     options.currentTime = options.days[options.index].date;
-                    // activeContrastImage();
                 }
                 else {
-                    options.currentTime = options.times[options.index].date;
-                    // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
-                }
+                    options.currentTime = options.times[options.index].date;}
             }
 
             const onChange = () => {
-                    initTimeLine(reloadData);
-
-                // if(options.currentTab === 'MWR') {
-                //     // activeContrastImage();
-                // } else {
-                //     // activeImage(moment(options.times[options.index].date).hour(), moment(options.times[options.index].date).minute());
-                // }
+              initTimeLine(reloadChangeData);
             }
 
             const reloadData = () => {
@@ -628,6 +618,27 @@
               reloadQualityInterpolation()
             }
 
+            const reloadBPData = () => {
+              reloadBPRelativeHumidity()
+              reloadQualityInterpolation()
+              reloadBPVaporDensity()
+            }
+
+            const BPBrokenLineData = () => {
+              BPTempData()
+              BPVaporDensityData()
+              BPRelativeHumidityData()
+            }
+            const reloadChangeData = () => {
+              if (options.currentTab === 'MWR')
+                reloadData()
+              else if (options.currentTab ==='shixu_BPFY')
+                reloadBPData()
+              else if (options.currentTab ==='kuoxian') {
+                BPBrokenLineData()
+              }
+            }
+
             // const onSaveClick = () => {
             //     let pictures = document.getElementById('pictures');
             //     options.urls = [options.contrast.noQCImgUrl, options.contrast.checkImgUrl, options.contrast.fillingImgUrl];
@@ -671,66 +682,154 @@
            const reloadQualityComparison = () => {
             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);
-            console.log(params);
             get('/njplatform/radardata/getOriginRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
               clearBoxDrawer(drawers.originalDrawer);
               clearBoxDrawer(drawers.abnormalDrawer);
               if (response.code != 200 || response.data.radar_data.length === 0){
-                //   ElMessage.error({
-                //   message: "请求失败",
-                //   type: 'error',
-                //   grouping: true,
-                //   customClass:'messageerror',
-                //   duration:0,
-                // });
-
                 createEmptyCanvas('original-data-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');
-              options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
-              options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image;
+              drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-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 clearBoxDrawer = (boxDrawer: BoxDrawer) => {
-              if (boxDrawer == null) return;
-              boxDrawer.close();
-          }
-
           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);
             get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
-
               clearBoxDrawer(drawers.interpolateDrawer);
               if (response.code != 200 || response.data.radar_data.length === 0){
-                // ElMessage.error({
-                //   message: "请求失败",
-                //   type: 'error',
-                //   grouping: true,
-                //   customClass:'messageerror',
-                //   duration:0,
-                // });
+                if (options.currentTab ==='MWR')
                 createEmptyCanvas('interpolate-canvas', 1500, 500);
+                else if(options.currentTab ==='shixu_BPFY')
+                createEmptyCanvas('BP-temp', 1500, 500);
+                return;
+              }
+              if (options.currentTab ==='MWR')
+                drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'interpolate-canvas','℃');
+              else if(options.currentTab ==='shixu_BPFY')
+                drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareBPTempColors(), response.data, 'BP-temp','(degree)');
+
+              // 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);
+            get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+              clearBoxDrawer(drawers.BPRelativeHumidity);
+              if (response.code != 200 || response.data.radar_data.length === 0){
+                createEmptyCanvas('BP-relative-humidity', 1500, 500);
+                return;
+              }
+                drawers.BPRelativeHumidity = new BoxDrawer(1500, 500, prepareBPRelativeHumidityColors(), response.data, 'BP-relative-humidity','(%)');
+              // 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);
+            get('/njplatform/radardata/getBpRangeData',params,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+              console.log(response)
+              clearBoxDrawer(drawers.BPVaporDensity);
+              if (response.code != 200 || response.data.radar_data.length === 0){
+                createEmptyCanvas('BP-relative-humidity', 1500, 500);
                 return;
               }
+              drawers.BPVaporDensity = new BoxDrawer(1500, 500, prepareBPVaporDensityColors(), response.data, 'BP-vapor-density','(g/kg)');
+              // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
+            })
+          }
+
+          const BPTempData = () => {
+            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,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+              verticalProfileHighChart.series[0].setData(getVerticalProfileResponseData(response));
+            })
+          }
+
+          const BPVaporDensityData = () => {
+            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,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+              verticalProfileHighChart.series[2].setData(getVerticalProfileResponseData(response));
+            })
+          }
 
-              drawers.interpolateDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'interpolate-canvas');
-              options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
+          const BPRelativeHumidityData = () => {
+            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,'http://rdp.nagr.com.cn:18080').then((response: any)=> {
+              // BPResponseData(response, options.BPTempTimeData);
+              verticalProfileHighChart.series[1].setData(getVerticalProfileResponseData(response));
             })
           }
 
+          const getVerticalProfileResponseData = (response) => {
+              if (response.code != 200 || response.data.radar_data.length === 0) {
+                options.BPTitleTime = null;
+                return [];
+              }
+
+              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));
+              });
+              let data = response.data.radar_data[0];
+              options.BPTitleTime = data.data_time;
+              let optionData = [];
+              response.data.radar_info.forEach(r => {
+                optionData.push([r.col_name, data[r.col_name]]);
+              });
+              return optionData;
+          }
+
+          const clearBoxDrawer = (boxDrawer: BoxDrawer) => {
+            if (boxDrawer == null) return;
+            boxDrawer.close();
+          }
+
           const prepareTmpOriginalColors = () => {
               return new ColorChart(['#860200','#CD0402','#FF1A04','#FF5E0C',
                     '#FEA61B','#FDED2A','#C1FE46','#7AFD86',
                     '#2BFDCD','#05E6FD','#14A0FA','#1B5AFB',
                     '#1C1FF9','#1310C4','#09067C'],
-                  [ 999, 305, 300, 295, 290, 285, 280, 275, 270, 265, 260, 255, 250, 245, 240, -999]);
+                  [ 999, 30, 25, 20, 15, 10, 5, 0, -5, -10, -15, -20, -25, -30, -35, -999]);
+          }
+
+          const prepareBPTempColors = () => {
+            return new ColorChart(['#860100','#D20201','#FF2402','#FF6F09',
+                  '#FEBF14','#EFFE24','#9FFE61','#52FEAA',
+                  '#03FEF8','#0AB8FD','#1069FD','#1222FD',
+                  '#0C0AC9','#05037D'],
+                [ 999, 12, 8, 4, 0, -4, -8, -12, -16, -20, -24, -28, -32, -36, -999]);
           }
 
+        const prepareBPRelativeHumidityColors = () => {
+            return new ColorChart(['#860100','#F60301','#FF6708','#FED718',
+              '#B3FE4F','#3EFEBD','#07CFFE','#1061FD',
+              '#100DED','#05037D'],
+                [ 999, 90, 80, 70, 60, 50, 40, 30, 20, 10, -999])
+        }
+
+        const prepareBPVaporDensityColors = () => {
+          return new ColorChart(['#860100','#F60301','#FF6708','#FED718',
+                '#B3FE4F','#3EFEBD','#07CFFE','#1061FD',
+                '#100DED','#05037D'],
+              [ 999, 9, 8, 7, 6, 5, 4, 3, 2, 1, -999])
+        }
+
+
+
           const prepareApiParams = (radarDataCode, startTime, endTime) => {
             return {
               radar_data_code: radarDataCode,
@@ -754,7 +853,7 @@
                 onNextDayClick,
                 // onPrevImgClick,
                 // onNextImgClick,
-                // onRefreshClick,
+                onRefreshClick,
                 onPlayClick,
                 onChange,
                 onImageLoad,
@@ -776,17 +875,18 @@
                 align-items: center;
                 .picture {
                     width: 100%;
-                    flex-direction: column;
+                    //flex-direction: column;
                     position: relative;
 
-                  #original-data-canvas , #abnormal-canvas ,#interpolate-canvas{
+                  #original-data-canvas , #abnormal-canvas ,#interpolate-canvas,
+                  #BP-temp, #BP-relative-humidity, #BP-vapor-density {
                     transform: scale(0.5,0.4);
                   }
                     .title {
-                        padding-bottom: 0;
+                        //padding-bottom: 0;
                         font-size: 0.22rem;
                         position: absolute;
-                        left: 296px;
+                        left: 3.90rem;
                         top: 0;
                         z-index: 100;
                     }
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index b502646..983bf6a 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -178,18 +178,18 @@ img {
                 display: flex;
                 margin-right: 0.2rem;
                 align-items: center;
-                padding-bottom: 12px;
+                padding-bottom: 0.12rem;
                 //border-left: 1px solid #666666;
                 //border-right: 1px solid #666666;
                 //background-color: #ECF4FF;
                 div:first-child {
                     span:last-child {
-                        border-radius: 5px 0 0 5px;
+                        border-radius: 0.05rem 0 0 0.05rem;
                     }
                 }
                 div:last-child {
                     span:last-child {
-                        border-radius: 0 5px 5px 0;
+                        border-radius: 0 0.05rem 0.05rem 0;
                     }
                 }
 
@@ -213,7 +213,7 @@ img {
                             cursor: pointer;
                             background-color: #e6edfd;
                             color: #0a2e62;
-                            font-size: 14px;
+                            font-size: 0.14rem;
                             font-weight: 400;
                         }
                     }
@@ -262,6 +262,7 @@ img {
                 //    background-color: #666666;
                 //}
             }
+
             .halfHour {
                 :nth-child(4n-2) {
                     span.time {
@@ -417,13 +418,13 @@ img {
                 right: 2rem;
             }
 
-            .title {
-                padding-bottom: 0.4rem;
-                line-height: 0.3rem;
-                text-align: center;
-                font-size: 0.3rem;
-                font-weight: bold;
-            }
+            //.title {
+            //    padding-bottom: 0.4rem;
+            //    line-height: 0.3rem;
+            //    text-align: center;
+            //    font-size: 0.3rem;
+            //    font-weight: bold;
+            //}
 
             .picture-container {
                 height: 100%;
@@ -441,9 +442,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;
@@ -494,7 +495,7 @@ img {
 
         .image-tip {
             text-align: center;
-            margin-top: 10px;
+            margin-top: 0.1rem;
         }
 
         .save-btn {
diff --git a/04.系统编码/Frontend/src/model/microwave-radiation.ts b/04.系统编码/Frontend/src/model/microwave-radiation.ts
new file mode 100644
index 0000000..fb8e5d8
--- /dev/null
+++ b/04.系统编码/Frontend/src/model/microwave-radiation.ts
@@ -0,0 +1,38 @@
+export class MicrowaveRadiation {
+
+    /**
+     * echart 创建x轴
+     * @param color
+     * @param data
+     * @param formatter
+     */
+    public static createXAxis(color: string, data: Array<string | number>, formatter: Function);
+    public static createXAxis(color: string, data: Array<string | number>, formatter: Function, position: string);
+    public static createXAxis(color: string, data: Array<string | number>, formatter: Function, position: string, offset: number);
+    public static createXAxis(color: string, data: Array<string | number>, formatter: Function, position: string = 'top', offset: number = 0, type: string = "category"): any{
+        return {
+            type: type,
+            offset : offset,
+            position: position,
+            nameLocation: 'end',
+            axisTick: {
+                alignWithLabel: true
+            },
+            axisLine: {
+                onZero: false,
+                lineStyle: {
+                    color: color
+                }
+            },
+            axisPointer: {
+                label: {
+                    formatter: formatter
+                }
+            },
+            data: data
+            // min: -40,
+            // max: 10,
+            // splitNumber: 5
+        }
+    }
+}
\ 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 a0eeaf4..86e5181 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -16,10 +16,6 @@ export function createEmptyCanvas(id: string, width: number, height: number): vo
     canvasContext.fillText('暂无数据', (width / 2) - (canvasContext.measureText('暂无数据').width / 2), height / 2 - 24);
 }
 
-
-
-
-
 export class BoxDrawer{
 
     private canvas: any = null;
@@ -32,9 +28,9 @@ export class BoxDrawer{
 
     private readonly width: number = null;
     private readonly height: number = null;
-    private readonly paddingLeft: number = 100;
+    private readonly paddingLeft: number = 200;
     private readonly paddingRight: number = 100;
-    private readonly paddingTop: number = 50;
+    private readonly paddingTop: number = 60;
     private readonly paddingBottom: number = 50;
     private readonly colorChart: ColorChart = null;
     private readonly values: any = null;
@@ -56,7 +52,7 @@ export class BoxDrawer{
     private calc: Calc = null;
     private box: Box = null;
 
-    constructor(width: number, height: number, colorChart: ColorChart, values: any, id: string) {
+    constructor(width: number, height: number, colorChart: ColorChart, values: any, id: string, unit: string) {
         if (id == null) return;
 
         this.width = width;
@@ -65,7 +61,7 @@ export class BoxDrawer{
         this.values = values;
 
         this.init();
-        this.drawCoordinate();
+        this.drawCoordinate(unit);
         this.drawColorChart();
         this.draw();
 
@@ -79,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 18px Verdana";
+        this.canvasContext.font = "normal 20px Verdana";
         this.canvasContext.fillStyle = "#000000";
 
         for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){
@@ -237,10 +233,48 @@ export class BoxDrawer{
         this.canvasContext.fillRect(0,0, this.width,this.height);
     }
 
-    private drawCoordinate(): void{
+    private drawCoordinate(unit): void{
         this.drawBorder();
         this.drawVerticalScale();
         this.drawHorizontalScale();
+        this.drawHeightText();
+        this.drawTemperatureText(unit);
+    }
+    //高度单位
+    private drawHeightText(): void {
+        let name =['高','度','(','k','m',')']; // 文本内容
+        let x = 70,y = 180; // 文字开始的坐标
+        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 Verdana";
+                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 Verdana";
+                this.canvasContext.fillStyle = "#000000";
+                this.canvasContext.fillText(str, x, y);
+                this.canvasContext.restore();
+                y += this.canvasContext.measureText(str).width + letterSpacing; // 计算文字宽度
+            }
+        }
+    }
+    //温度单位
+    private drawTemperatureText(unit): void {
+        this.canvasContext.font = "normal 35px Verdana";
+        this.canvasContext.fillStyle = "#000000";
+        let unitX = 1390
+        if (unit === '(degree)') unitX =1350
+        this.canvasContext.fillText(unit,  unitX,50);
     }
 
     private drawVerticalScale(): void{
@@ -276,15 +310,16 @@ export class BoxDrawer{
 
     private drawHorizontalScale(): void{
         let scaleCount = this.values.radar_info.length;
-        this.horizontalScaleIntervalLength = this.borderHeight / (scaleCount - 1);
-        let scaleSpecial = parseInt((scaleCount * 1.0 / this.horizontalScaleSpecialCount).toString());
+        this.horizontalScaleIntervalLength = this.borderHeight / (scaleCount - 1) ;
+        let scaleSpecial = parseInt((scaleCount * 1.0 / this.horizontalScaleSpecialCount + 1).toString());
         let startX = this.paddingLeft + this.horizontalScaleLine;
         let startY = this.paddingTop + this.verticalScaleLine;
         const lastLen = scaleCount - 1;
-        for(let index = lastLen; index >= 0; index--){
+        for(let index = lastLen; index >= 0; index--) {
+
             const flag = index % scaleSpecial == 0;
             this.setScaleStyle(flag);
-            const xInterval =  flag? this.horizontalScaleLine : this.horizontalScaleLine / 2;
+            const xInterval = flag ? this.horizontalScaleLine : this.horizontalScaleLine / 2;
 
             const _y = startY + (this.borderHeight - index * this.horizontalScaleIntervalLength);
             this.canvasContext.beginPath();
@@ -294,11 +329,11 @@ export class BoxDrawer{
             this.canvasContext.lineTo(this.borderWidth + startX + xInterval, _y);
             this.canvasContext.stroke();
 
-            if (flag){
-                this.canvasContext.font = "normal 20px 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);
+            if (flag) {
+                    this.canvasContext.font = "normal 20px 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);
             }
         }
     }