From 68ed8f5710eff2b6e96864da03df27ab8cc33c7d Mon Sep 17 00:00:00 2001
From: xuhuihui <3548508071@qq.com>
Date: Mon, 28 Feb 2022 09:28:10 +0800
Subject: [PATCH] commit

---
 04.系统编码/Frontend/index.html           |    5 +-
 04.系统编码/Frontend/package-lock.json    |   14 +-
 04.系统编码/Frontend/package.json         |    2 +-
 04.系统编码/Frontend/public/favicon.ico   |  Bin 9662 -> 4286 bytes
 .../src/components/MicrowaveRadiation.vue     |  474 ++++++-
 .../Frontend/src/components/RamanLidar.vue    | 1115 +++++++++++------
 .../src/components/SystemManagement.vue       |    2 +-
 04.系统编码/Frontend/src/index.less       |   35 +-
 .../Frontend/src/model/constant.ts            |    3 +
 .../Frontend/src/model/high-chart-create.ts   |   14 +-
 .../Frontend/src/uilts/box-drawer.ts          |    6 +-
 11 files changed, 1174 insertions(+), 496 deletions(-)

diff --git a/04.系统编码/Frontend/index.html b/04.系统编码/Frontend/index.html
index 796b397..82d9ad3 100644
--- a/04.系统编码/Frontend/index.html
+++ b/04.系统编码/Frontend/index.html
@@ -2,12 +2,13 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <link rel="icon" href="/images/logo.png" />
+  <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>南京生态环境评估决策平台</title>
 </head>
 <body>
   <div id="app"></div>
   <script type="module" src="/src/main.ts"></script>
-</body>
+
+  </body>
 </html>
diff --git a/04.系统编码/Frontend/package-lock.json b/04.系统编码/Frontend/package-lock.json
index 10c2ab2..c3a027c 100644
--- a/04.系统编码/Frontend/package-lock.json
+++ b/04.系统编码/Frontend/package-lock.json
@@ -13,7 +13,7 @@
         "crypto-js": "^4.1.1",
         "echarts": "^5.2.2",
         "element-plus": "^1.2.0-beta.4",
-        "highcharts": "^9.3.2",
+        "highcharts": "^9.3.3",
         "js-md5": "^0.7.3",
         "jsencrypt": "3.0.0-rc.1",
         "moment": "^2.29.1",
@@ -1652,9 +1652,9 @@
       "dev": true
     },
     "node_modules/highcharts": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.2.tgz",
-      "integrity": "sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg=="
+      "version": "9.3.3",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.3.tgz",
+      "integrity": "sha512-QeOvm6cifeZYYdTLm4IxZsXcOE9c4xqfs0z0OJJ0z7hhA9WG0rmcVAyuIp5HBl/znjA/ayYHmpYjBYD/9PG4Fg=="
     },
     "node_modules/http-assert": {
       "version": "1.5.0",
@@ -5055,9 +5055,9 @@
       "dev": true
     },
     "highcharts": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.2.tgz",
-      "integrity": "sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg=="
+      "version": "9.3.3",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-9.3.3.tgz",
+      "integrity": "sha512-QeOvm6cifeZYYdTLm4IxZsXcOE9c4xqfs0z0OJJ0z7hhA9WG0rmcVAyuIp5HBl/znjA/ayYHmpYjBYD/9PG4Fg=="
     },
     "http-assert": {
       "version": "1.5.0",
diff --git a/04.系统编码/Frontend/package.json b/04.系统编码/Frontend/package.json
index 8415147..6fb5d08 100644
--- a/04.系统编码/Frontend/package.json
+++ b/04.系统编码/Frontend/package.json
@@ -11,7 +11,7 @@
     "crypto-js": "^4.1.1",
     "echarts": "^5.2.2",
     "element-plus": "^1.2.0-beta.4",
-    "highcharts": "^9.3.2",
+    "highcharts": "^9.3.3",
     "js-md5": "^0.7.3",
     "jsencrypt": "3.0.0-rc.1",
     "moment": "^2.29.1",
diff --git a/04.系统编码/Frontend/public/favicon.ico b/04.系统编码/Frontend/public/favicon.ico
index 4a45747c25205f2f2cdc2f65a20f680bd48979f2..92dc57c2d7d6175e81c7204a0949b4822feef763 100644
GIT binary patch
literal 4286
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
BB_{v?

literal 9662
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
X652^7Gvh_<SQ6MZw6g|I(V#y9Sc0|*

diff --git a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
index 942cdac..eac6935 100644
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@@ -26,8 +26,16 @@
       <div class="menu-item">
         <h2 class="tip">区域选择</h2>
         <el-row :gutter="12">
-          <el-col :span="8"><span :class="{'active': currentRegion === 'jiangning'}"
-                                  @click="onRegionClick('jiangning')">江宁</span></el-col>
+          <el-col :span="8"><span :class="{'active': currentRegion === 'jiang-ning'}"
+                                  @click="onRegionClick('jiang-ning')">江宁</span></el-col>
+          <el-col :span="8"><span :class="{'active': currentRegion === 'liu-he'}"
+                                  @click="onRegionClick('liu-he')">六合</span></el-col>
+          <el-col :span="8"><span :class="{'active': currentRegion === 'pu-kou'}"
+                                  @click="onRegionClick('pu-kou')">浦口</span></el-col>
+          <el-col :span="8"><span :class="{'active': currentRegion === 'gao-chun'}"
+                                  @click="onRegionClick('gao-chun')">高淳</span></el-col>
+          <el-col :span="8"><span :class="{'active': currentRegion === 'li-shui'}"
+                                  @click="onRegionClick('li-shui')">溧水</span></el-col>
         </el-row>
       </div>
       <div class="menu-item">
@@ -93,51 +101,96 @@
       <div class="picture-view">
 
         <!--质控对比-->
-        <div v-if="currentTab === 'MWR'" class="picture-container contrast-picture-container">
+        <div v-if="currentTab === 'MWR'" class="picture-container contrast-picture-container picture-MWR">
+
           <div class="picture">
-            <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度原始数据</h2>
+            <h2 class="title">质控前</h2>
             <canvas id='original-data-canvas'></canvas>
           </div>
-          <div class="picture">
-            <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度异常值标记</h2>
-            <canvas id='abnormal-canvas'></canvas>
-          </div>
-          <div class="picture">
-            <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}温度野点插补结果</h2>
+
+<!--          <div class="picture">-->
+<!--            <h2 class="title">温度异常值标记</h2>-->
+<!--            <canvas id='abnormal-canvas'></canvas>-->
+<!--          </div>-->
+
+
+            <div class="picture">
+            <h2 class="title">质控后</h2>
             <canvas id='interpolate-canvas'></canvas>
-          </div>
+            </div>
+
+
+
         </div>
 
         <!--BP反演产品-->
-        <div v-if="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container">
-          <div class="picture">
-            <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演温度</h2>
+        <div v-if="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container shiXuBP">
+          <div class="BPPicture picture">
+            <h2 class="title">BP反演温度</h2>
             <canvas id="BP-temp"></canvas>
           </div>
-          <div class="picture">
-            <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演相对湿度</h2>
+          <div class="BPPicture picture">
+            <h2 class="title">BP反演相对湿度</h2>
             <canvas id="BP-relative-humidity"></canvas>
           </div>
-          <div class="picture">
-            <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}BP反演水汽密度</h2>
+          <div class="BPPicture picture">
+            <h2 class="title">BP反演水汽密度</h2>
             <canvas id="BP-vapor-density"></canvas>
           </div>
         </div>
 
-        <div v-if="currentTab === 'kuoxian'" class="picture-container contrast-picture-container">
-          <h2>{{ BPTitleTime }}温度、相对湿度、水汽密度廓线</h2>
-          <div id="container" style="width:100%;height:100%"></div>
+        <div v-if="currentTab === 'kuoxian'" class="verticalProfile">
+
+          <div class="verticalProfile-picture">
+          <h2 class="verticalProfileTitle">温度廓线</h2>
+          <div id="verticalProfileTemp" style="width: 400px;height: 400px"></div>
+          </div>
+
+          <div class="verticalProfile-picture">
+            <h2 class="verticalProfileTitle">相对湿度廓线</h2>
+            <div id="verticalProfileRelativeHumidity" style="width: 400px;height: 400px"></div>
+          </div>
+
+          <div class="verticalProfile-picture">
+            <h2 class="verticalProfileTitle">水汽密度廓线</h2>
+            <div id="verticalProfileVaporDensity" style="width: 400px;height: 400px"></div>
+          </div>
         </div>
 
-        <div v-if="currentTab === 'shixu'" class="picture-container contrast-picture-container">
-          <div class="picture">
-            <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}对流有效位能CAPE</h2>
-            <div id="convectiveHighChartCAPE" style="width:100%;height:75%"></div>
+        <div v-if="currentTab === 'shixu'" class="picture-container contrast-picture-container shiXu">
+          <div class="picture" style="margin-top: 570px">
+            <h2 class="title">对流有效位能CAPE</h2>
+            <div id="convectiveHighChartCAPE" style="width: 100%;height:75%"></div>
+          </div>
+
+          <div class="picture" style="margin-top: 570px">
+            <h2 class="title">K指数</h2>
+            <div id="kIndexChart" style="width: 100%;height:75%"></div>
           </div>
           <div class="picture">
-            <h2 class="title">{{ titleStartTime }}~{{ titleEndTime }}对流抑制势能CIN</h2>
+            <h2 class="title">对流抑制势能CIN</h2>
             <div id="convectiveHighChartCIN" style="width:100%;height:75%"></div>
           </div>
+          <div class="picture">
+            <h2 class="title">沙式指数</h2>
+            <div id="sandIndexChart" style="width:100%;height:75%"></div>
+          </div>
+          <div class="picture">
+            <h2 class="title">LCL气压</h2>
+            <div id="airPressureChart" style="width:100%;height:75%"></div>
+          </div>
+          <div class="picture">
+            <h2 class="title">850hpa和500hpa温差</h2>
+            <div id="deltaTChart" style="width:100%;height:75%"></div>
+          </div>
+          <div class="picture">
+            <h2 class="title">0度层高度</h2>
+            <div id="zeroHeightChart" style="width:100%;height:75%"></div>
+          </div>
+          <div class="picture">
+            <h2 class="title">-20度层高度</h2>
+            <div id="NegativeTwentyHeightChart" style="width:100%;height:75%"></div>
+          </div>
         </div>
 
         <div v-if="currentTab === 'T-logP'" class="picture-container contrast-picture-container">
@@ -162,13 +215,31 @@ export default {
   setup() {
     let timer = null;
     let creates: {
-      verticalProfile: HighChartCreate
+      // verticalProfile: HighChartCreate
+      verticalProfileTemp: HighChartCreate
+      verticalProfileVaporDensity: HighChartCreate
+      verticalProfileRelativeHumidity: HighChartCreate
       convectiveIndexProfileTimeChartCAPE: HighChartCreate
       convectiveIndexProfileTimeChartCIN: HighChartCreate
+      kIndexChart: HighChartCreate
+      sandIndex: HighChartCreate
+      airPressure: HighChartCreate
+      deltaT: HighChartCreate
+      zeroHeight: HighChartCreate
+      NegativeTwentyHeight: HighChartCreate
     } = {
-      verticalProfile: null,
+      //verticalProfile: null,
+      verticalProfileTemp: null,
+      verticalProfileVaporDensity: null,
+      verticalProfileRelativeHumidity: null,
       convectiveIndexProfileTimeChartCAPE: null,
-      convectiveIndexProfileTimeChartCIN: null
+      convectiveIndexProfileTimeChartCIN: null,
+      kIndexChart: null,
+      sandIndex: null,
+      airPressure: null,
+      deltaT: null,
+      zeroHeight: null,
+      NegativeTwentyHeight: null
     }
 
     let options = reactive({
@@ -195,6 +266,7 @@ export default {
       // onPitchTime: 0,
       BPTitleTime: null,
       highChartXAxis: [],
+      specialStartTime: null
     });
 
     let drawers = {
@@ -224,34 +296,81 @@ export default {
     }
 
     const initEcharts = (name) => {
-      if (name === 'kuoxian')
-        verticalProfileInit()
-       else if (name === 'shixu') {
+      if (name === 'kuoxian') {
+        // verticalProfileInit()
+        verticalProfileTempInit()
+        verticalProfileVaporDensityInit()
+        verticalProfileRelativeHumidityInit()
+      }
+      else if (name === 'shixu') {
         convectiveIndexProfileTimeChartInitCAPE()
         convectiveIndexProfileTimeChartInitCIN()
+        kIndexChartInit()
+        sandIndexInit()
+        airPressureInit()
+        deltaTInit()
+        zeroHeightInit()
+        NegativeTwentyHeightInit()
       }
     }
 
-    const verticalProfileInit = () => {
-      creates.verticalProfile = new HighChartCreate('container');
-      creates.verticalProfile.setChart(true);
-      creates.verticalProfile.setXAxis('高度(km)', false);
-      creates.verticalProfile.setYAxis('温度T(degree)', 10, -40, 10, 6, true);
-      creates.verticalProfile.setYAxis('相对湿度RH(%)', 100, 0, 10, 6);
-      creates.verticalProfile.setYAxis('水汽密度Q(g/kg)', 10, 0, 1, 11);
-      creates.verticalProfile.setLegend();
-      creates.verticalProfile.setTooltip('{point.category} KM: {point.y}');
-      creates.verticalProfile.setSeries('温度', 0, '℃', '#F49927');
-      creates.verticalProfile.setSeries('相对湿度', 1, '%', '#3534FD');
-      creates.verticalProfile.setSeries('水汽密度', 2, 'g/Kg', '#6AB312');
-      creates.verticalProfile.init();
+    // const verticalProfileInit = () => {
+    //   creates.verticalProfile = new HighChartCreate('container');
+    //   creates.verticalProfile.setChart(true);
+    //   creates.verticalProfile.setXAxis('高度(km)', false);
+    //   creates.verticalProfile.setYAxis('温度T(degree)', 10, -40, 10, 6, true);
+    //   creates.verticalProfile.setYAxis('相对湿度RH(%)', 100, 0, 10, 6);
+    //   creates.verticalProfile.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11);
+    //   creates.verticalProfile.setLegend();
+    //   creates.verticalProfile.setTooltip('{point.category} KM: {point.y}');
+    //   creates.verticalProfile.setSeries('温度', 0, '℃', '#F49927');
+    //   creates.verticalProfile.setSeries('相对湿度', 1, '%', '#3534FD');
+    //   creates.verticalProfile.setSeries('水汽密度', 2, 'g/Kg', '#6AB312');
+    //   creates.verticalProfile.init();
+    // }
+
+    //垂直廓线温度数据图
+    const verticalProfileTempInit = () => {
+      creates.verticalProfileTemp = new HighChartCreate('verticalProfileTemp');
+      creates.verticalProfileTemp.setChart(true);
+      creates.verticalProfileTemp.setXAxis('高度(km)', false);
+      creates.verticalProfileTemp.setYAxis('温度T(degree)', 10, -40, 10, 6);
+      creates.verticalProfileTemp.setLegend();
+      creates.verticalProfileTemp.setTooltip('{point.category} KM: {point.y}');
+      creates.verticalProfileTemp.setSeries('温度', 0, '℃', '#F49927');
+      creates.verticalProfileTemp.init();
+    }
+
+    //垂直廓线水汽密度数据图
+    const verticalProfileVaporDensityInit = () => {
+      creates.verticalProfileVaporDensity = new HighChartCreate('verticalProfileVaporDensity');
+      creates.verticalProfileVaporDensity.setChart(true);
+      creates.verticalProfileVaporDensity.setXAxis('高度(km)', false);
+      creates.verticalProfileVaporDensity.setYAxis('水汽密度q(g/kg)', 10, 0, 1, 11);
+      creates.verticalProfileVaporDensity.setLegend();
+      creates.verticalProfileVaporDensity.setTooltip('{point.category} KM: {point.y}');
+      creates.verticalProfileVaporDensity.setSeries('水汽密度', 0, 'g/Kg', '#6AB312');
+      creates.verticalProfileVaporDensity.init();
+    }
+
+    //垂直廓线相对湿度数据图
+    const verticalProfileRelativeHumidityInit = () => {
+      creates.verticalProfileRelativeHumidity = new HighChartCreate('verticalProfileRelativeHumidity');
+      creates.verticalProfileRelativeHumidity.setChart(true);
+      creates.verticalProfileRelativeHumidity.setXAxis('高度(km)', false);
+      creates.verticalProfileRelativeHumidity.setYAxis('相对湿度RH(%)', 100, 0, 10, 6);
+      creates.verticalProfileRelativeHumidity.setLegend();
+      creates.verticalProfileRelativeHumidity.setTooltip('{point.category} KM: {point.y}');
+      creates.verticalProfileRelativeHumidity.setSeries('相对湿度', 0, '%', '#498DF0');
+      creates.verticalProfileRelativeHumidity.init();
     }
 
     const convectiveIndexProfileTimeChartInitCAPE = () => {
       creates.convectiveIndexProfileTimeChartCAPE = new HighChartCreate('convectiveHighChartCAPE');
       creates.convectiveIndexProfileTimeChartCAPE.setChart();
       creates.convectiveIndexProfileTimeChartCAPE.setXAxis( '时间(时/分)', false);
-      creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)', 500, 0, 100,6);
+      creates.convectiveIndexProfileTimeChartCAPE.setYAxis('CAPE(J/kg)', 800, 0, 100,9);
+      creates.convectiveIndexProfileTimeChartCAPE.setLegend();
       creates.convectiveIndexProfileTimeChartCAPE.setTooltip('{point.category}: {point.y}(J/kg)');
       creates.convectiveIndexProfileTimeChartCAPE.setSeries('CAPE')
       creates.convectiveIndexProfileTimeChartCAPE.init();
@@ -261,12 +380,85 @@ export default {
       creates.convectiveIndexProfileTimeChartCIN = new HighChartCreate('convectiveHighChartCIN');
       creates.convectiveIndexProfileTimeChartCIN.setChart();
       creates.convectiveIndexProfileTimeChartCIN.setXAxis( '时间(时/分)', false);
-      creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIE(J/kg)', 500, 0, 100,6);
+      creates.convectiveIndexProfileTimeChartCIN.setYAxis('CIN(J/kg)', 800, 0, 100,9);
+      creates.convectiveIndexProfileTimeChartCIN.setLegend();
       creates.convectiveIndexProfileTimeChartCIN.setTooltip('{point.category}: {point.y}(J/kg)');
       creates.convectiveIndexProfileTimeChartCIN.setSeries('CIN')
       creates.convectiveIndexProfileTimeChartCIN.init();
     }
 
+    //绘制K指数
+    const kIndexChartInit = () => {
+      creates.kIndexChart = new HighChartCreate('kIndexChart');
+      creates.kIndexChart.setChart();
+      creates.kIndexChart.setXAxis( '时间(时/分)', false);
+      creates.kIndexChart.setYAxis('K(℃)', 40, -40, 10,9);
+      creates.kIndexChart.setLegend();
+      creates.kIndexChart.setTooltip('{point.category}: {point.y}(℃)');
+      creates.kIndexChart.setSeries('K指数')
+      creates.kIndexChart.init();
+    }
+
+    //绘制沙式指数
+    const sandIndexInit = () => {
+      creates.sandIndex = new HighChartCreate('sandIndexChart');
+      creates.sandIndex.setChart();
+      creates.sandIndex.setXAxis( '时间(时/分)', false);
+      creates.sandIndex.setYAxis('SI(℃)', 30, 0, 3,11);
+      creates.sandIndex.setLegend();
+      creates.sandIndex.setTooltip('{point.category}: {point.y}(℃)');
+      creates.sandIndex.setSeries('沙式指数')
+      creates.sandIndex.init();
+    }
+
+    //绘制LCl气压
+    const airPressureInit = () => {
+      creates.airPressure = new HighChartCreate('airPressureChart');
+      creates.airPressure.setChart();
+      creates.airPressure.setXAxis( '时间(时/分)', false);
+      creates.airPressure.setYAxis('LCL气压(hPa)', 1000, 300, 100,8);
+      creates.airPressure.setLegend();
+      creates.airPressure.setTooltip('{point.category}: {point.y}(hPa)');
+      creates.airPressure.setSeries('LCL气压')
+      creates.airPressure.init();
+    }
+
+    //绘制850hpa和500hpa温差
+    const deltaTInit = () => {
+      creates.deltaT = new HighChartCreate('deltaTChart');
+      creates.deltaT.setChart();
+      creates.deltaT.setXAxis( '时间(时/分)', false);
+      creates.deltaT.setYAxis('deltaT(℃)', 1000, 300, 100,8);
+      creates.deltaT.setLegend();
+      creates.deltaT.setTooltip('{point.category}: {point.y}(℃)');
+      creates.deltaT.setSeries('deltaT')
+      creates.deltaT.init();
+    }
+
+    //绘制0度层高度
+    const zeroHeightInit = () => {
+      creates.zeroHeight = new HighChartCreate('zeroHeightChart');
+      creates.zeroHeight.setChart();
+      creates.zeroHeight.setXAxis( '时间(时/分)', false);
+      creates.zeroHeight.setYAxis('hgt_0(m)', 10, 0, 1,11);
+      creates.zeroHeight.setLegend();
+      creates.zeroHeight.setTooltip('{point.category}: {point.y}(m)');
+      creates.zeroHeight.setSeries('hgt_0')
+      creates.zeroHeight.init();
+    }
+
+    //绘制-20度层高度
+    const NegativeTwentyHeightInit = () => {
+      creates.NegativeTwentyHeight = new HighChartCreate('NegativeTwentyHeightChart');
+      creates.NegativeTwentyHeight.setChart();
+      creates.NegativeTwentyHeight.setXAxis( '时间(时/分)', false);
+      creates.NegativeTwentyHeight.setYAxis('hgt_-20(m)', 20, -20, 5,9);
+      creates.NegativeTwentyHeight.setLegend();
+      creates.NegativeTwentyHeight.setTooltip('{point.category}: {point.y}(m)');
+      creates.NegativeTwentyHeight.setSeries('hgt_-20')
+      creates.NegativeTwentyHeight.init();
+    }
+
     const onRegionClick = (region) => {
       options.currentRegion = region;
     }
@@ -282,6 +474,7 @@ export default {
           changeColor()
         }, 0)
       }
+      reloadChangeData()
     }
 
     //初始化时间轴
@@ -319,9 +512,11 @@ export default {
     }
 
     const onTimeClick = (time, index) => {
+      options.currentHour = time.hour.substring(0, 2)
       options.currentTime = time.date;
       options.titleStartTime = moment(time.date).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:ss')
       options.titleEndTime = time.date
+      options.date = moment(time.date).format('YYYY-MM-DD')
       reloadChangeData()
     }
 
@@ -388,6 +583,12 @@ export default {
       } else if (options.currentTab === 'shixu') {
         convectiveIndexCAPEData()
         convectiveIndexCINData()
+        kIndexApi()
+        sandIndexApi()
+        airPressureApi()
+        deltaTApi()
+        zeroHeightApi()
+        NegativeTwentyHeightApi()
       }
     }
 
@@ -410,19 +611,24 @@ export default {
           clearBoxDrawer(drawers.abnormalDrawer);
           if (response.code != 200 || response.data.radar_data.length === 0) {
             createEmptyCanvas('original-data-canvas', 1500, 500);
-            createEmptyCanvas('abnormal-canvas', 1500, 500);
+            // createEmptyCanvas('abnormal-canvas', 1500, 500);
             return;
           }
           drawers.originalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'original-data-canvas', '℃');
-          drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', '℃');
+          // drawers.abnormalDrawer = new BoxDrawer(1500, 500, prepareTmpOriginalColors(), response.data, 'abnormal-canvas', '℃');
           // options.contrast.noQCImgUrl = drawers.originalDrawer.base64Image;
           // options.contrast.checkImgUrl = drawers.abnormalDrawer.base64Image;
         })
     }
 
     const reloadQualityInterpolation = () => {
-      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
-      const params = prepareApiParams(401, startTime, options.titleEndTime);
+      options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      if (options.currentTab==='shixu_BPFY') {
+        if (options.currentElement === 'six-minute') {
+          options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+        }
+      }
+      const params = prepareApiParams(401, options.specialStartTime, options.titleEndTime);
         get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
           clearBoxDrawer(drawers.interpolateDrawer);
           if (response.code != 200 || response.data.radar_data.length === 0) {
@@ -439,10 +645,14 @@ export default {
           // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
         })
     }
+
     //BP反演相对湿度
     const reloadBPRelativeHumidity = () => {
-      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
-      const params = prepareApiParams(404, startTime, options.titleEndTime);
+      options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      if (options.currentElement === 'six-minute') {
+        options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      }
+      const params = prepareApiParams(404, options.specialStartTime, options.titleEndTime);
         get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
           clearBoxDrawer(drawers.BPRelativeHumidity);
           if (response.code != 200 || response.data.radar_data.length === 0) {
@@ -453,10 +663,14 @@ export default {
           // options.contrast.fillingImgUrl = drawers.interpolateDrawer.base64Image;
         })
     }
+
     //水汽密度
     const reloadBPVaporDensity = () => {
-      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
-      const params = prepareApiParams(402, startTime, options.titleEndTime);
+      options.specialStartTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      if (options.currentElement === 'six-minute') {
+        options.specialStartTime = moment(options.currentTime).add(-8, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      }
+      const params = prepareApiParams(402, options.specialStartTime, options.titleEndTime);
         get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
           clearBoxDrawer(drawers.BPVaporDensity);
           if (response.code != 200 || response.data.radar_data.length === 0) {
@@ -472,7 +686,8 @@ export default {
       const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
       const params = prepareApiParams(401, startTime, options.titleEndTime);
         get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
-          creates.verticalProfile.updateSeries(0, getVerticalProfileResponseData(response));
+          // creates.verticalProfile.updateSeries(0, getVerticalProfileResponseData(response));
+          creates.verticalProfileTemp.updateSeries(0,getVerticalProfileResponseData(response))
         })
     }
 
@@ -480,7 +695,8 @@ export default {
       const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
       const params = prepareApiParams(402, startTime, options.titleEndTime);
         get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
-          creates.verticalProfile.updateSeries(2, getVerticalProfileResponseData(response));
+          // creates.verticalProfile.updateSeries(2, getVerticalProfileResponseData(response));
+          creates.verticalProfileVaporDensity.updateSeries(0, getVerticalProfileResponseData(response));
         })
     }
 
@@ -488,17 +704,22 @@ export default {
       const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
       const params = prepareApiParams(404, startTime, options.titleEndTime);
         get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response: any) => {
-          creates.verticalProfile.updateSeries(1, getVerticalProfileResponseData(response));
+          // creates.verticalProfile.updateSeries(1, getVerticalProfileResponseData(response));
+          creates.verticalProfileRelativeHumidity.updateSeries(0,getVerticalProfileResponseData(response))
         })
     }
 
+
     const getVerticalProfileResponseData = (response) => {
       if (response.code != 200 || response.data == null || response.data.radar_data.length === 0) {
         options.BPTitleTime = null;
         verify();
         return [];
       }
-      creates.verticalProfile.updateXAxis(response.data.radar_info.map(r => r.col_factor));
+      // creates.verticalProfile.updateXAxis(response.data.radar_info.map(r => r.col_factor));
+      creates.verticalProfileTemp.updateXAxis(response.data.radar_info.map(r => r.col_factor))
+      creates.verticalProfileVaporDensity.updateXAxis(response.data.radar_info.map(r => r.col_factor))
+      creates.verticalProfileRelativeHumidity.updateXAxis(response.data.radar_info.map(r => r.col_factor))
       // verticalProfileHighChart.xAxis[0].setCategories(response.data.radar_info.map(r => r.col_factor));
       response.data.radar_data.sort((x, y) => {
         return moment(x.data_time).isBefore(moment(y.data_time));
@@ -531,6 +752,71 @@ export default {
           creates.convectiveIndexProfileTimeChartCIN.updateXAxis(data[1], 0)
         })
     }
+    //K-index
+    const kIndexApi = () => {
+      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      const params = prepareApiParams('K', startTime, options.titleEndTime);
+      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
+        let data = convectiveIndexResponseData(response);
+        creates.kIndexChart.updateSeries(0,data[0])
+        creates.kIndexChart.updateXAxis(data[1], 0)
+      })
+    }
+
+    //沙式指数
+    const sandIndexApi = () => {
+      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      const params = prepareApiParams('SI', startTime, options.titleEndTime);
+      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
+        let data = convectiveIndexResponseData(response);
+        creates.sandIndex.updateSeries(0,data[0])
+        creates.sandIndex.updateXAxis(data[1], 0)
+      })
+    }
+
+    //LCL气压
+    const airPressureApi  = () => {
+      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      const params = prepareApiParams('LCL_pres', startTime, options.titleEndTime);
+      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
+        let data = convectiveIndexResponseData(response);
+        creates.airPressure.updateSeries(0,data[0])
+        creates.airPressure.updateXAxis(data[1], 0)
+      })
+    }
+
+    //850hpa和500hpa温差
+    const deltaTApi  = () => {
+      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      const params = prepareApiParams('LCL_pres', startTime, options.titleEndTime);
+      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
+        let data = convectiveIndexResponseData(response);
+        creates.deltaT.updateSeries(0,data[0])
+        creates.deltaT.updateXAxis(data[1], 0)
+      })
+    }
+
+    //绘制0度层高度
+    const zeroHeightApi  = () => {
+      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      const params = prepareApiParams('hgt_0', startTime, options.titleEndTime);
+      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
+        let data = convectiveIndexResponseData(response);
+        creates.zeroHeight.updateSeries(0,data[0])
+        creates.zeroHeight.updateXAxis(data[1], 0)
+      })
+    }
+
+    //绘制-20度层高度
+    const NegativeTwentyHeightApi  = () => {
+      const startTime = moment(options.currentTime).add(options.apiTimeLength, 'h').add(options.apiTimeInterval, 'm').format('YYYY-MM-DD HH:mm:00');
+      const params = prepareApiParams('hgt_-20', startTime, options.titleEndTime);
+      get('/njplatform/radardata/getBpRangeData', params, Constant.baseUrl).then((response) => {
+        let data = convectiveIndexResponseData(response);
+        creates.NegativeTwentyHeight.updateSeries(0,data[0])
+        creates.NegativeTwentyHeight.updateXAxis(data[1], 0)
+      })
+    }
 
     const convectiveIndexResponseData = (response) => {
       if (response.code != 200 || response.data == null || response.data.radar_data.length === 0) {
@@ -626,32 +912,84 @@ export default {
 </script>
 <style lang="less" scoped>
 .main {
-
   .container {
+
+    .verticalProfile {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+
+      .verticalProfile-picture {
+        position: relative;
+
+        .verticalProfileTitle {
+          position: absolute;
+          font-size: 0.22rem;
+          left: 1.97rem;
+          top: -0.38rem;
+        }
+      }
+    }
+
+    :deep(.el-date-editor), .control-btn, :deep(.el-select), .unit {
+      padding-top: 0.06rem;
+    }
+
     .contrast-picture-container {
+
       width: calc(~"100% - 2.5rem");
       margin: 0 auto;
-      align-items: center;
+      //width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
 
       .picture {
-        width: 100%;
-        //flex-direction: column;
+        width: 45%;
+        height: 45%;
         position: relative;
 
-        #original-data-canvas, #abnormal-canvas, #interpolate-canvas,
-        #BP-temp, #BP-relative-humidity, #BP-vapor-density {
-          transform: scale(0.5, 0.4);
+        #original-data-canvas /*#abnormal-canvas*/, #interpolate-canvas {
+          transform: scale(0.38, 0.4);
         }
 
+
         .title {
-          //padding-bottom: 0;
+          width: 100%;
           font-size: 0.22rem;
           position: absolute;
-          left: 3.90rem;
+          left: 3.10rem;
           top: 0;
           z-index: 100;
         }
       }
+      .BPPicture {
+        width: 65% !important;
+        height: 45%;
+        position: relative;
+        #BP-temp, #BP-relative-humidity, #BP-vapor-density{
+          transform: scale(0.40, 0.4);
+        }
+        .title {
+          left: 4.35rem!important;
+        }
+      }
+    }
+    .shiXu {
+      overflow-y: scroll;
+      width: 100% !important;
+    }
+    .shiXuBP {
+      flex-flow: column;
+      align-content: space-around !important;
+    }
+    .picture-MWR {
+      width: 100%;
+      height: 100%;
+      display: flex;
     }
   }
 }
diff --git a/04.系统编码/Frontend/src/components/RamanLidar.vue b/04.系统编码/Frontend/src/components/RamanLidar.vue
index 63fba51..83adc25 100644
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@@ -1,439 +1,784 @@
 <template>
-    <div class="tabs"></div>
-    <div class="main">
-        <div class="menu panel">
-            <div class="menu-item">
-                <h2 class="tip">区域选择</h2>
-                <el-row :gutter="12">
-                    <el-col :span="8"><span @click="onRegionClick('jiangning')" :class="{'active': currentRegion === 'jiangning'}">江宁</span></el-col>
-                    <el-col :span="8"><span @click="onRegionClick('liuhe')" :class="{'active': currentRegion === 'liuhe'}">六合</span></el-col>
-                    <el-col :span="8"><span @click="onRegionClick('pukou')" :class="{'active': currentRegion === 'pukou'}">浦口</span></el-col>
-                </el-row>
-            </div>
-            <!-- layertype -->
-            <div class="menu-item">
-                <h2 class="tip">要素选择</h2>
-                <el-row :gutter="12">
-                    <el-col :span="24"><span @click="onElementClick('PBLH', '边界层高度')" :class="{'active': currentElement === 'PBLH'}">边界层高度</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('opticalthickness', '光学厚度')" :class="{'active': currentElement === 'opticalthickness'}">光学厚度</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('Lidar_ratio', '激光雷达比')" :class="{'active': currentElement === 'Lidar_ratio'}">激光雷达比</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('PM', '气溶胶PM')" :class="{'active': currentElement === 'PM'}">气溶胶PM</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('ext_plot', '消光系数')" :class="{'active': currentElement === 'ext_plot'}">消光系数</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('layertype', '云气溶胶分类')" :class="{'active': currentElement === 'layertype'}">云气溶胶分类</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('wv_plot', '水汽')" :class="{'active': currentElement === 'wv_plot'}">水汽</span></el-col>
-                    <el-col :span="24"><span @click="onElementClick('cloudheight', '云高')" :class="{'active': currentElement === 'cloudheight'}">云高</span></el-col>
-                </el-row>
-            </div>
+  <div class="tabs">
+    <div :class="{'active': currentTab === 'MWR'}" class="tab-item" @click="onTabClick('MWR')">
+      质控对比
+      <img v-if="currentTab === 'MWR'" src="/images/line.png"/>
+    </div>
+    <div :class="{'active': currentTab === 'boundary-layer-height'}" class="tab-item" @click="onTabClick('boundary-layer-height')">
+      水汽
+      <img v-if="currentTab === 'boundary-layer-height'" src="/images/line.png"/>
+    </div>
+    <div :class="{'active': currentTab === 'optical-property'}" class="tab-item" @click="onTabClick('optical-property')">
+      光学特性
+      <img v-if="currentTab === 'optical-property'" src="/images/line.png"/>
+    </div>
+    <div :class="{'active': currentTab === 'aerosol-product'}" class="tab-item" @click="onTabClick('aerosol-product')">
+      气溶胶产品
+      <img v-if="currentTab === 'aerosol-product'" src="/images/line.png"/>
+    </div>
+    <div :class="{'active': currentTab === 'BingoCloud'}" class="tab-item" @click="onTabClick('BingoCloud')">
+      云产品
+      <img v-if="currentTab === 'BingoCloud'" src="/images/line.png"/>
+    </div>
+  </div>
+
+  <div class="main">
+    <div class="menu panel">
+      <div class="menu-item">
+        <h2 class="tip">区域选择</h2>
+        <el-row :gutter="12">
+          <el-col :span="8"><span @click="onRegionClick('jiangning')"
+                                  :class="{'active': currentRegion === 'jiangning'}">江宁</span></el-col>
+          <el-col :span="8"><span @click="onRegionClick('liuhe')"
+                                  :class="{'active': currentRegion === 'liuhe'}">六合</span></el-col>
+          <el-col :span="8"><span @click="onRegionClick('pukou')"
+                                  :class="{'active': currentRegion === 'pukou'}">浦口</span></el-col>
+        </el-row>
+      </div>
+
+      <!-- layertype -->
+      <div class="menu-item">
+        <h2 class="tip">要素选择</h2>
+<!--        <el-row :gutter="12">-->
+<!--          <el-col :span="24"><span @click="onElementClick('PBLH', '边界层高度')"-->
+<!--                                   :class="{'active': currentElement === 'PBLH'}">边界层高度</span></el-col>-->
+<!--          <el-col :span="24"><span @click="onElementClick('opticalthickness', '光学厚度')"-->
+<!--                                   :class="{'active': currentElement === 'opticalthickness'}">光学厚度</span></el-col>-->
+<!--          <el-col :span="24"><span @click="onElementClick('Lidar_ratio', '激光雷达比')"-->
+<!--                                   :class="{'active': currentElement === 'Lidar_ratio'}">激光雷达比</span></el-col>-->
+<!--          <el-col :span="24"><span @click="onElementClick('PM', '气溶胶PM')" :class="{'active': currentElement === 'PM'}">气溶胶PM</span>-->
+<!--          </el-col>-->
+<!--          <el-col :span="24"><span @click="onElementClick('ext_plot', '消光系数')"-->
+<!--                                   :class="{'active': currentElement === 'ext_plot'}">消光系数</span></el-col>-->
+<!--          <el-col :span="24"><span @click="onElementClick('layertype', '云气溶胶分类')"-->
+<!--                                   :class="{'active': currentElement === 'layertype'}">云气溶胶分类</span></el-col>-->
+<!--          <el-col :span="24"><span @click="onElementClick('wv_plot', '水汽')"-->
+<!--                                   :class="{'active': currentElement === 'wv_plot'}">水汽</span></el-col>-->
+<!--          <el-col :span="24"><span @click="onElementClick('cloudheight', '云高')"-->
+<!--                                   :class="{'active': currentElement === 'cloudheight'}">云高</span></el-col>-->
+<!--        </el-row>-->
+      </div>
+    </div>
+
+    <div class="container panel">
+      <div class="toolbar day-toolbar">
+        <div class="times">
+          <div class="time-item" v-for="(time, index) in times" :key="index"
+               :class="{'active': currentTime === time.date}">
+            <span class="time" @click="onTimeClick(time, index)">{{ time.day }}</span>
+          </div>
+        </div>
+        <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false"
+                        class="date-picker" @change="onChange">
+        </el-date-picker>
+        <div class="control-btn">
+          <span @click="onPrevDayClick"><img src="/images/prev.png"/></span>
+          <span @click="onNextDayClick"><img src="/images/next.png"/></span>
         </div>
-        <div class="container panel">
-            <div class="toolbar day-toolbar">
-                <div class="times">
-                    <div class="time-item" v-for="(time, index) in times" :key="index" :class="{'active': currentTime === time.date}">
-                        <span class="time" @click="onTimeClick(time, index)">{{time.day}}</span>
-                    </div>
-                </div>
-                <el-date-picker v-model="date" type="date" placeholder="请选择" :clearable="false" :editable="false" class="date-picker" @change="onChange">
-                </el-date-picker>
-                <div class="control-btn">
-                    <span @click="onPrevDayClick"><img src="/images/prev.png" /></span>
-                    <span @click="onNextDayClick"><img src="/images/next.png" /></span>
-                </div>
-                <div class="refresh-btn" @click="onRefreshClick">
-                    <img src="/images/refresh.png" />
-                </div>
-                <div class="btns-group">
-                    <span @click="onPlayClick">{{isPlay ? '暂停动画' : '播放动画'}}</span>
-                    <a @click="onDownloadClick">下载动画</a>
-                    <a id="radarDownload" :href="downloadSrc" download style="display: none;">下载隐藏层</a>
-                </div>
-            </div>
-            <div class="picture-view">
-                <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>
-                <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>
-                <!-- <span class="save-btn" @click="onSaveClick" v-if="currentElement === 'PBLH'"><img src="/images/save.png" /></span> -->
-                <a :href="downloadImgUrl" download class="save-btn" v-if="currentElement !== 'PBLH'"><img src="/images/save.png" /></a>
-                <div class="download-pictures hide" id="pictures">
-                    <a v-for="(url, index) in urls" :key="index" download></a>
-                </div>
-                <div class="picture-container raman-picture-container">
-                    <!-- <h2 class="title">{{title}}</h2> -->
-                    <div class="picture">
-                        <el-image
-                        :src="imgUrl"
-                        :preview-src-list="previewUrl"
-                        :initial-index="1"
-                        fit="contain"
-                        @load="onImageLoad"
-                        :class="{'pblh-image': currentElement === 'PBLH'}"
-                        >
-                            <template #error>
-                                <div class="image-slot">
-                                    <img src="/images/null-picture.png" />
-                                </div>
-                                <p class="image-tip">暂无图片</p>
-                            </template>
-                            <template #placeholder>
-                                <div class="image-placeholder">正在加载...</div>
-                            </template>
-                        </el-image>
-                        <el-image
-                        :src="signalPBLHImgUrl"
-                        :preview-src-list="signalPBLHPreviewUrl"
-                        :initial-index="1"
-                        fit="contain"
-                        @load="onImageLoad"
-                        v-if="currentElement === 'PBLH'"
-                        :class="{'pblh-image': currentElement === 'PBLH'}"
-                        >
-                            <template #error>
-                                <div class="image-slot">
-                                    <img src="/images/null-picture.png" />
-                                </div>
-                                <p class="image-tip">暂无图片</p>
-                            </template>
-                            <template #placeholder>
-                                <div class="image-placeholder">正在加载...</div>
-                            </template>
-                        </el-image>
-                    </div>
-                </div>
-            </div>
+        <!--        <div class="refresh-btn" @click="onRefreshClick">-->
+        <!--          <img src="/images/refresh.png"/>-->
+        <!--        </div>-->
+        <!--        <div class="btns-group">-->
+        <!--          <span @click="onPlayClick">{{ isPlay ? '暂停动画' : '播放动画' }}</span>-->
+        <!--          <a @click="onDownloadClick">下载动画</a>-->
+        <!--          <a id="radarDownload" :href="downloadSrc" download style="display: none;">下载隐藏层</a>-->
+        <!--        </div>-->
+      </div>
+      <div class="picture-view">
+        <!--                <span class="arrow arrow-prev" @click="onPrevImgClick"><img src="/images/prev-btn.png" /></span>-->
+        <!--                <span class="arrow arrow-next" @click="onNextImgClick"><img src="/images/next-btn.png" /></span>-->
+        <!--                &lt;!&ndash; <span class="save-btn" @click="onSaveClick" v-if="currentElement === 'PBLH'"><img src="/images/save.png" /></span> &ndash;&gt;-->
+        <!--                <a :href="downloadImgUrl" download class="save-btn" v-if="currentElement !== 'PBLH'"><img src="/images/save.png" /></a>-->
+        <!--                <div class="download-pictures hide" id="pictures">-->
+        <!--                    <a v-for="(url, index) in urls" :key="index" download></a>-->
+        <!--                </div>-->
+        <div class="picture-container raman-picture-container" v-show="currentTab === 'boundary-layer-height'">
+          <div class="picture">
+            <h2>水汽</h2>
+          </div>
         </div>
+
+        <div class="picture-container raman-picture-container" v-show="currentTab === 'optical-property'">
+          <div class="picture">
+            <h2 class="title">激光雷达比</h2>
+            <div id="LidarRatio" style="width: 650px;height: 450px"></div>
+          </div>
+          <div class="picture">
+            <h2 class="title">光学厚度</h2>
+          </div>
+          <div class="picture">
+            <h2 class="title">消光系数</h2>
+          </div>
+        </div>
+
+        <div class="picture-container raman-picture-container" v-show="currentTab === 'aerosol-product'">
+          <div class="picture">
+            <h2 class="title">边界层高度</h2>
+            <div id="BoundaryLayerHeight" style="width: 650px;height: 450px"></div>
+          </div>
+          <div class="picture">
+            <h2 class="title">气溶胶PM</h2>
+          </div>
+
+          <div class="picture">
+            <h2 class="title">边界层特征值</h2>
+          </div>
+        </div>
+
+        <div class="picture-container raman-picture-container" v-show="currentTab === 'BingoCloud'">
+          <div class="picture">
+            <h2 class="title">云气溶胶分类</h2>
+          </div>
+          <div class="picture">
+            <h2 class="title">云层高度</h2>
+            <div id="cloudsHeight" style="width: 650px;height: 450px"></div>
+          </div>
+          <div class="picture">
+            <h2 class="title">云顶高度</h2>
+            <div id="cloudTopHeight" style="width: 650px;height: 450px"></div>
+          </div>
+        </div>
+
+        <div class="picture-container raman-picture-container" v-show="currentTab === 'MWR'">
+          <div class="picture">
+            <h2 class="title">云的识别</h2>
+          </div>
+          <div class="picture">
+            <h2 class="title">消光系数</h2>
+          </div>
+          <div class="picture">
+            <h2 class="title">水汽</h2>
+          </div>
+        </div>
+      </div>
+
     </div>
+  </div>
 </template>
 
 <script lang="ts">
-    import { onMounted, reactive, toRefs } from 'vue';
-    import moment from "moment";
-    import { RamanLidarConfig } from '../uilts/Config';
-    import { post } from '../uilts/axios';
-    
-    export default {
-        name: 'RamanLidar',
-        setup() {
-            let timer = null;
-            let options = reactive({
-                currentRegion: 'jiangning',
-                currentElement: 'PBLH',
-                currentType: '边界层高度',
-                date: moment('2021-11-15').format('YYYY-MM-DD'),
-                times: [],
-                currentTime: null,
-                downloadImgUrl: '/images/default-picture.png',
-                imgUrl: '/images/default-picture.png',
-                signalPBLHImgUrl: '/images/default-picture.png',
-                previewUrl: [],
-                signalPBLHPreviewUrl: [],
-                isPlay: false,
-                title: null,
-                index: 0,
-                downloadSrc: null,
-                urls: []
-            })
-
-            onMounted(() => {
-                initTimeLine();
-                setTitle(moment(options.date, 'YYYY-MM-DD'));
-                setTimeout(() => {
-                    activeImage();
-                }, 50);
-            })
-
-            const onRegionClick = (region) => {
-                options.currentRegion = region;
-                options.date = options.currentTime;
-
-                cancelActive();
-                setTitle(moment(options.date));
-                activeImage();
-            }
+import {onMounted, reactive, toRefs} from 'vue';
+import moment, {min} from "moment";
+import {RamanLidarConfig} from '../uilts/Config';
+import {post} from '../uilts/axios';
+import {ElMessage} from "element-plus";
+import * as Highcharts from 'highcharts';
+import {ConstantRamanLidar} from "../model/constant";
+import {get} from '../uilts/axios';
+import {HighChartCreate} from "../model/high-chart-create";
+import {BoxDrawer, ColorChart, createEmptyCanvas} from "../uilts/box-drawer";
+
+export default {
+  name: 'RamanLidar',
+  setup() {
+    let timer = null;
+    let creates: {
+      boundaryLayerHeight: HighChartCreate
+      cloudsHeight: HighChartCreate
+      cloudTopHeight: HighChartCreate
+      LidarRatio: HighChartCreate
+    } = {
+      boundaryLayerHeight: null,
+      cloudsHeight: null,
+      cloudTopHeight: null,
+      LidarRatio: null
+    }
+    let options = reactive({
+      currentTab: 'MWR',
+      currentRegion: 'jiangning',
+      currentElement: 'PBLH',
+      currentType: '边界层高度',
+      date: moment('2021-12-14').format('YYYY-MM-DD'),
+      times: [],
+      currentTime: null,
+      downloadImgUrl: '/images/default-picture.png',
+      imgUrl: '/images/default-picture.png',
+      signalPBLHImgUrl: '/images/default-picture.png',
+      previewUrl: [],
+      signalPBLHPreviewUrl: [],
+      isPlay: false,
+      title: null,
+      index: 0,
+      downloadSrc: null,
+      urls: [],
+      boundaryLayerHeightList: [],
+      LidarRatioList: [],
+      cloudsHeightList: [],
+      cloudTopHeightList: []
+    })
+
+    onMounted(() => {
+      initTimeLine();
+      setTitle(moment(options.date, 'YYYY-MM-DD'));
+      setTimeout(() => {
+        activeImage();
+      }, 50)
+    })
+
+    //边界层高度
+    const boundaryLayerHeightInit = () => {
+      creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
+      creates.boundaryLayerHeight.setChart();
+      creates.boundaryLayerHeight.setXAxis('时间(分钟)', false);
+      creates.boundaryLayerHeight.setYAxis('边界层高度(米)', 3000, 0, 500, 7);
+      creates.boundaryLayerHeight.setLegend();
+      creates.boundaryLayerHeight.setTooltip('{point.category}: {point.y}(m)');
+      creates.boundaryLayerHeight.setSeries('边界层高度')
+      creates.boundaryLayerHeight.init();
+    }
 
-            const onElementClick = (element, type) => {
-                options.currentElement = element;
-                options.currentType = type;
-                options.date = options.currentTime;
+    //云层高度
+    const cloudsHeightInit = () => {
+      creates.cloudsHeight = new HighChartCreate('cloudsHeight');
+      creates.cloudsHeight.setChart(false,'scatter');
+      creates.cloudsHeight.setXAxis('时间(分钟)', false);
+      creates.cloudsHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
+      creates.cloudsHeight.setLegend();
+      creates.cloudsHeight.setTooltip('{point.category}: {point.y}(m)');
+      creates.cloudsHeight.setSeries('云层高度')
+      creates.cloudsHeight.init();
+    }
+    //云顶高度
+    const cloudTopHeightInit = () => {
+      creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
+      creates.cloudTopHeight.setChart(false,'scatter');
+      creates.cloudTopHeight.setXAxis('时间(分钟)', false);
+      creates.cloudTopHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
+      creates.cloudTopHeight.setLegend();
+      creates.cloudTopHeight.setTooltip('{point.category}: {point.y}(m)');
+      creates.cloudTopHeight.setSeries('云顶高度')
+      creates.cloudTopHeight.init();
+    }
 
-                cancelActive();
-                setTitle(moment(options.date));
-                activeImage();
-            }
+    //激光雷达比
+    const LidarRatioInit = () => {
+      creates.LidarRatio = new HighChartCreate('LidarRatio');
+      creates.LidarRatio.setChart();
+      creates.LidarRatio.setXAxis('时间(分钟)', false);
+      creates.LidarRatio.setYAxis('边界层高度(米)', 3000, 0, 500, 7);
+      creates.LidarRatio.setLegend();
+      creates.LidarRatio.setTooltip('{point.category}: {point.y}(m)');
+      creates.LidarRatio.setSeries('激光雷达比')
+      creates.LidarRatio.init();
+    }
 
-            const setTitle = (date) => {
-                options.title = date.format('YYYY.MM.DD') + '  ' + options.currentType;
-            }
+    const onTabClick = (name) => {
+      options.currentTab = name;
+      setTimeout(() => {
+        initEcharts(name)
+        reloadChangeData()
+      }, 500)
+    }
 
-            const activeImage = () => {
-                options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
-                options.previewUrl = [options.imgUrl];
+    const reloadChangeData = () => {
+      if (options.currentTab === 'boundary-layer-height') {
+
+      } else if (options.currentTab === 'optical-property') {
+        LidarRatioApi()
+      } else if (options.currentTab === 'aerosol-product') {
+        boundaryLayerHeightDate()
+        // boundaryCharacteristicApi()
+        //aerosolApi()
+      } else if (options.currentTab === 'BingoCloud') {
+        //layerTypeApi()
+        cloudsHeightApi()
+        cloudTopHeightApi()
+      } else if (options.currentTab === 'MWR') {
+        // waterVapourApi()
+      }
+    }
 
-                options.signalPBLHImgUrl = RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
-                options.signalPBLHPreviewUrl = [options.signalPBLHImgUrl];
-            }
+    const initEcharts = (name) => {
+      if (name === 'boundary-layer-height') {
+
+      } else if (name === 'optical-property') {
+        LidarRatioInit()
+      } else if (name === 'aerosol-product') {
+        boundaryLayerHeightInit()
+      } else if (name === 'BingoCloud') {
+        cloudsHeightInit()
+        cloudTopHeightInit()
+      }
+    }
 
-            const onImageLoad = (event) => {
-                if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
-                    converToBase64(options.imgUrl);
-                else
-                    return
-            }
+    //区域切换
+    const onRegionClick = (region) => {
+      options.currentRegion = region;
+      options.date = options.currentTime;
+      cancelActive();
+      setTitle(moment(options.date));
+      activeImage();
+      setTimeout(() => {
+      }, 500)
+    }
 
-            const onDownloadClick = () => {
-                post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
-                    if (response.error != 0){
-                        console.log(response.message);
-                        return;
-                    }
-
-                    fetch(response.data).then(res => {     
-                        return res.blob();
-                    }).then(blob => {
-                        let reader = new FileReader(); 
-                        reader.onloadend = function(){
-                            options.downloadSrc = reader.result;
-                            
-                            setTimeout(() => {
-                                document.getElementById("radarDownload").click();
-                                options.downloadSrc = null;
-                            }, 500);
-                        };
-                        reader.readAsDataURL(blob);
-                    }).catch(console.error);
-                })
-            }
+    //要素选择
+    // const onElementClick = (element, type) => {
+    //   options.currentElement = element;
+    //   options.currentType = type;
+    //   options.date = options.currentTime;
+    //   setTimeout(() => {
+    //   }, 500)
+    //   cancelActive();
+    //   setTitle(moment(options.date));
+    //   activeImage();
+    // }
+
+    const setTitle = (date) => {
+      options.title = date.format('YYYY.MM.DD') + '  ' + options.currentType;
+    }
 
-            const prepareParams = () => {
-                return {
-                    model: 'radar',
-                    station: options.currentRegion,
-                    elementCode: options.currentElement,
-                    type: null,
-                    time: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"),
-                    urls: prepareUrls()
-                }
-            }
+    const activeImage = () => {
+      options.imgUrl = RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
+      options.previewUrl = [options.imgUrl];
 
-            const prepareUrls = () => {
-                let urls = [];
-                for(let index = 0, len = options.times.length; index < len; index++){
-                    let time = moment(options.times[index].date);
-                    
-                    if (options.currentElement === 'PBLH') {
-                        urls.push(
-                            RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time),
-                            RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, time)
-                        );
-                    } else
-                        urls.push(RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time));
-                }
-
-                console.log(urls)
-                return urls;
-            }
+      options.signalPBLHImgUrl = RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, moment(options.currentTime, 'YYYY-MM-DD'));
+      options.signalPBLHPreviewUrl = [options.signalPBLHImgUrl];
+    }
 
-            const converToBase64 = (path) => {
-                let img = new Image();
-                img.src = path;
-                let canvas = document.createElement("canvas") as HTMLCanvasElement;
-                canvas.width = img.width;
-                canvas.height = img.height;
-
-                let ctx = canvas.getContext("2d");
-                let base64 = '';
-
-                img.setAttribute("crossOrigin",'Anonymous')
-                img.onload = function() {
-                    ctx.drawImage(img, 0, 0);    
-                    base64 = canvas.toDataURL("image/png");
-                    options.downloadImgUrl = base64;
-                };
-            }
+    const onImageLoad = (event) => {
+      if (event.currentTarget.getAttribute('src') !== '/images/default-picture.png')
+        converToBase64(options.imgUrl);
+      else
+        return
+    }
 
-            const initTimeLine = () => {
-                options.times = [];
-                options.currentTime = moment(options.date).format('YYYY-MM-DD');
+    const onDownloadClick = () => {
+      post("/image/createGif", prepareParams(), 'application/json').then((response: any) => {
+        if (response.error != 0) {
+          console.log(response.message);
+          return;
+        }
 
-                let now = moment(options.date).add(1, 'day');
+        fetch(response.data).then(res => {
+          return res.blob();
+        }).then(blob => {
+          let reader = new FileReader();
+          reader.onloadend = function () {
+            options.downloadSrc = reader.result;
+
+            setTimeout(() => {
+              document.getElementById("radarDownload").click();
+              options.downloadSrc = null;
+            }, 500);
+          };
+          reader.readAsDataURL(blob);
+        }).catch(console.error);
+      })
+    }
 
-                for (let i = 0; i < 15 ; i++) {
-                    options.times.push({
-                        day: now.add(-1, 'day').format('DD'),
-                        date: now.format('YYYY-MM-DD'),
-                    })
-                }
+    //参数准备
+    const prepareParams = () => {
+      return {
+        model: 'radar',
+        station: options.currentRegion,
+        elementCode: options.currentElement,
+        type: null,
+        time: moment(options.times[0].date).format("YYYYMMDDHHmmss") + '-' + moment(options.times[options.times.length - 1].date).format("YYYYMMDDHHmmss"),
+        urls: prepareUrls()
+      }
+    }
 
-                options.times.reverse();
-                options.index = options.times.length - 1;
+    const prepareUrls = () => {
+      let urls = [];
+      for (let index = 0, len = options.times.length; index < len; index++) {
+        let time = moment(options.times[index].date);
+
+        if (options.currentElement === 'PBLH') {
+          urls.push(
+              RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time),
+              RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, time)
+          );
+        } else
+          urls.push(RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time));
+      }
+
+      console.log(urls)
+      return urls;
+    }
 
-            }
+    const converToBase64 = (path) => {
+      let img = new Image();
+      img.src = path;
+      let canvas = document.createElement("canvas") as HTMLCanvasElement;
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      let ctx = canvas.getContext("2d");
+      let base64 = '';
+
+      img.setAttribute("crossOrigin", 'Anonymous')
+      img.onload = function () {
+        ctx.drawImage(img, 0, 0);
+        base64 = canvas.toDataURL("image/png");
+        options.downloadImgUrl = base64;
+      };
+    }
 
-            const onTimeClick = (time, index) => {
-                options.currentTime = time.date;
-                options.date = time.date;
-                options.index = index;
-                cancelActive();
-                setTitle(moment(time.date, 'YYYY-MM-DD'));
-                activeImage();
-            }
+    //初始化时间轴
+    const initTimeLine = () => {
+      options.times = [];
+      options.currentTime = moment(options.date).format('YYYY-MM-DD');
+      let now = moment(options.date).add(1, 'day');
+
+      for (let i = 0; i < 15; i++) {
+        options.times.push({
+          day: now.add(-1, 'day').format('DD'),
+          date: now.format('YYYY-MM-DD'),
+        })
+      }
+      options.times.reverse();
+      options.index = options.times.length - 1;
+    }
 
-            const cancelActive = () => {
-                clearTimer();
-                options.isPlay = false;
-            }
+    //时间选择
+    const onTimeClick = (time, index) => {
 
-            const onPrevDayClick = () => {
-                let element = getCurrentElement();
-                
-                options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
-                options.currentTime = options.date;
-                options.index--;
-                if (options.index < 0) {
-                    options.index = element.childElementCount - 1;
-                    options.date = options.times[options.times.length - 1].date
-                }
-
-                cancelActive();
-                setCurrentPlayElement(element)
-            }
+      options.currentTime = time.date;
+      options.date = time.date;
+      reloadChangeData()
+      options.index = index;
+      cancelActive();
+      setTitle(moment(time.date, 'YYYY-MM-DD'));
+      activeImage();
+    }
 
-            const onNextDayClick = () => {
-                options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
-            }
+    const cancelActive = () => {
+      clearTimer();
+      options.isPlay = false;
+    }
 
-            const onPrevImgClick = () => {
-                let element = getCurrentElement();
+    //上一天
+    const onPrevDayClick = () => {
+      let element = getCurrentElement();
+      options.date = moment(options.date).add(-1, 'day').format('YYYY-MM-DD');
+
+      options.currentTime = options.date;
+      options.index--;
+      if (options.index < 0) {
+        options.index = element.childElementCount - 1;
+        options.date = options.times[options.times.length - 1].date
+      }
+      initTimeLine()
+      cancelActive();
+      setCurrentPlayElement(element)
+      reloadChangeData()
+    }
 
-                options.index--;
-                if (options.index < 0)
-                    options.index = element.childElementCount - 1;
+    const onNextDayClick = () => {
+      options.date = moment(options.date).add(1, 'day').format('YYYY-MM-DD')
+      initTimeLine()
+      reloadChangeData()
+    }
 
-                setCurrentPlayElement(element);
-            }
-            
-            const onNextImgClick = () => {
-                let element = getCurrentElement();
-
-                options.index++;
-                if (options.index > element.childElementCount - 1)
-                    options.index = 0;
-                
-                setCurrentPlayElement(element);
-            }
+    //上一张图片
+    const onPrevImgClick = () => {
+      let element = getCurrentElement();
 
-            const onRefreshClick = () => {
-                options.date = moment('2021-11-15').format('YYYY-MM-DD');
-                options.currentTime = options.times[options.times.length - 1].date;
+      options.index--;
+      if (options.index < 0)
+        options.index = element.childElementCount - 1;
 
-                cancelActive();
-                activeImage();
-            }
+      setCurrentPlayElement(element);
+    }
 
-            const onPlayClick = () => {
-                options.isPlay = !options.isPlay;
-                if (options.isPlay) {
-                    timeExcute();
-                } else {
-                    clearTimer();
-                }
-            }
+    const onNextImgClick = () => {
+      let element = getCurrentElement();
 
-            const timeExcute = () => {
-                clearTimer();
+      options.index++;
+      if (options.index > element.childElementCount - 1)
+        options.index = 0;
 
-                let element = getCurrentElement();
+      setCurrentPlayElement(element);
+    }
 
-                timer = setInterval( () => {
-                    options.index++;
-                    if (options.index > element.childElementCount - 1)
-                        options.index = 0;
+    //重置
+    const onRefreshClick = () => {
+      options.date = moment('2021-11-15').format('YYYY-MM-DD');
+      options.currentTime = options.times[options.times.length - 1].date;
 
-                    setCurrentPlayElement(element);
-                }, 3000)
-            }
+      cancelActive();
+      activeImage();
+    }
 
-            const clearTimer = () => {
-                if (timer)
-                    clearInterval(timer);
-            }
+    const onPlayClick = () => {
+      options.isPlay = !options.isPlay;
+      if (options.isPlay) {
+        timeExcute();
+      } else {
+        clearTimer();
+      }
+    }
 
-            const getCurrentElement = () => {
-                return document.querySelector('.times');
-            }
+    const timeExcute = () => {
+      clearTimer();
 
-            const setCurrentPlayElement = (element) => {
-                for(let i = 0; i < element.childElementCount; i++)
-                    element.children[i].classList.remove('active');
+      let element = getCurrentElement();
 
-                element.children[options.index].classList.add('active');
-                options.currentTime = options.times[options.index].date;
-                setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD'));
-                activeImage();
-            }
+      timer = setInterval(() => {
+        options.index++;
+        if (options.index > element.childElementCount - 1)
+          options.index = 0;
+        setCurrentPlayElement(element);
+      }, 3000)
+    }
 
-            const onChange = () => {
-                initTimeLine();
-                setTitle(moment(options.date));
-                activeImage();
-            }
+    const clearTimer = () => {
+      if (timer)
+        clearInterval(timer);
+    }
+
+    const getCurrentElement = () => {
+      return document.querySelector('.times');
+    }
+
+    const setCurrentPlayElement = (element) => {
+      for (let i = 0; i < element.childElementCount; i++)
+        element.children[i].classList.remove('active');
+
+      element.children[options.index].classList.add('active');
+      options.currentTime = options.times[options.index].date;
+      setTitle(moment(options.times[options.index].date, 'YYYY-MM-DD'));
+      activeImage();
+    }
+
+    const onChange = () => {
+      initTimeLine();
+      setTitle(moment(options.date));
+      activeImage();
+    }
+
+    const onSaveClick = () => {
+      let pictures = document.getElementById('pictures');
+      options.urls = [options.imgUrl, options.signalPBLHImgUrl];
+
+      for (let i = 0; i < options.urls.length; i++) {
+        let img = new Image();
+        img.src = options.urls[i];
+        let canvas = document.createElement("canvas") as HTMLCanvasElement;
+        canvas.width = img.width;
+        canvas.height = img.height;
+
+        let ctx = canvas.getContext("2d");
+        let base64 = "";
+
+        img.setAttribute("crossOrigin", 'Anonymous');
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0);
+          base64 = canvas.toDataURL("image/png");
+          pictures.children[i].setAttribute('href', base64);
+          setTimeout(() => {
+            let button: HTMLElement = pictures.children[i] as HTMLElement;
+            button.click();
+            pictures.children[i].setAttribute('href', null);
+          }, 500);
+        };
+      }
+    }
+
+
+    //边界层高度
+    const boundaryLayerHeightDate = () => {
+      options.boundaryLayerHeightList = []
+      const time = moment(options.date).format('MM_DD')
+      const params = prepareApiParams(time, 'pblh')
+      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
+        if (response.length <= 0) {
+          verify()
+          return;
+        }
+        for (let i in response) {
+          for (let val in response[i]) {
+            options.boundaryLayerHeightList.push(response[i][val])
+          }
+        }
+        creates.boundaryLayerHeight.updateSeries(0, options.boundaryLayerHeightList)
+      })
+    }
+
+    //边界层特征值
+    const boundaryCharacteristicApi = () => {
+      const time = moment(options.date).format('MM_DD')
+      const params = prepareApiParams(time, 'pblhfeatures')
+      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response) => {
+        console.log(response)
+      })
+    }
+
+    //光学特性
+    //激光雷达比
+    const LidarRatioApi = () => {
+      options.LidarRatioList = []
+      const time = moment(options.date).format('MM_DD')
+      const params = prepareApiParams(time, 'lidarratio')
+      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response: any) => {
+        if (response.length <= 0) {
+          verify()
+          return;
+        }
+        for (let i in response[18]) {
+          if (response[18][i] === null) {
+            response[18][i] = 0
+          }
+          options.LidarRatioList.push(response[18][i])
+        }
+        creates.LidarRatio.updateSeries(0, options.LidarRatioList)
+      })
+    }
+
+
+    //消光系数
+    // const extinctionApi = () => {
+    //   const time = moment(options.date).format('MM_DD')
+    //   const params = prepareApiParams(time ,'extinction')
+    //   get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+    //
+    //   })
+    // }
+
+    //水汽
+    const waterVapourApi = () => {
+      const time = moment(options.date).format('MM_DD')
+      const params = prepareApiParams(time,'watervapor')
+      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+        console.log(response)
+      })
+    }
+
+    //气溶胶PM
+    //粗颗粒
+    const aerosolApi = () => {
+      const time = moment(options.date).format('MM_DD')
+      const params = prepareApiParams(time,'pm10')
+      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+          console.log(response)
+      })
+    }
+
+    //云气溶胶分类
+    const layerTypeApi = () => {
+      const time = moment(options.date).format('MM_DD')
+      const params = prepareApiParams(time,'layertype')
+      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+
+      })
+    }
 
-            const onSaveClick = () => {
-                let pictures = document.getElementById('pictures');
-                options.urls = [options.imgUrl, options.signalPBLHImgUrl];
-
-                for (let i = 0; i < options.urls.length; i++) {
-                    let img = new Image();
-                    img.src = options.urls[i];
-                    let canvas = document.createElement("canvas") as HTMLCanvasElement;
-                    canvas.width = img.width;
-                    canvas.height = img.height;
-
-                    let ctx = canvas.getContext("2d");
-                    let base64 = "";
-
-                    img.setAttribute("crossOrigin",'Anonymous');
-                    img.onload = () => {
-                        ctx.drawImage(img, 0, 0);
-                        base64 = canvas.toDataURL("image/png");
-                        pictures.children[i].setAttribute('href', base64);
-                        setTimeout(() => {
-                            let button: HTMLElement = pictures.children[i] as HTMLElement;
-                            button.click();
-                            pictures.children[i].setAttribute('href', null);
-                        }, 500);
-                    };
-                }
+    //云层高度
+    const cloudsHeightApi = () => {
+      options.cloudsHeightList = []
+      const time = moment(options.date).format('MM_DD')
+      const params = prepareApiParams(time,'cloudbaseheight')
+      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+        if (response.length <= 0) {
+          verify()
+          return;
+        }
+        for (let i in response) {
+          for (let val in response[i]) {
+            if (response[i][val] === null) {
+                response[i][val] = 0
             }
+            options.cloudsHeightList.push([parseInt(i),response[i][val]])
+          }
+        }
+        creates.cloudsHeight.updateSeries(0, options.cloudsHeightList)
+      })
+    }
 
-            return {
-                ...toRefs(options),
-                onRegionClick,
-                onElementClick,
-                onTimeClick,
-                onPrevDayClick,
-                onNextDayClick,
-                onPrevImgClick,
-                onNextImgClick,
-                onRefreshClick,
-                onPlayClick,
-                onChange,
-                onImageLoad,
-                onDownloadClick,
-                onSaveClick
+    //云顶高度
+    const cloudTopHeightApi = () => {
+      options.cloudTopHeightList = []
+      const time = moment(options.date).format('MM_DD')
+      const params = prepareApiParams(time,'cloudtopheight')
+      get('/njqxj/lmlidar', params, ConstantRamanLidar.baseUrl).then((response :any) => {
+        if (response.length <= 0) {
+          verify()
+          return;
+        }
+        for (let i in response) {
+          for (let val in response[i]) {
+            if (response[i][val] === null) {
+              response[i][val] = 0
             }
+            options.cloudTopHeightList.push([parseInt(i),response[i][val]])
+          }
         }
+        creates.cloudTopHeight.updateSeries(0, options.cloudTopHeightList)
+      })
+    }
+
+    const prepareApiParams = (time, variableName) => {
+      return {
+        date: time,
+        var: variableName,
+      }
+    }
+
+    const verify = () => {
+      ElMessage({
+        showClose: true,
+        message: '请求接口无数据',
+        icon: '',
+        type: null,
+        grouping: true,
+        duration: 1500
+      })
+    }
+
+    return {
+      ...toRefs(options),
+      onRegionClick,
+      // onElementClick,
+      onTimeClick,
+      onPrevDayClick,
+      onNextDayClick,
+      onPrevImgClick,
+      onNextImgClick,
+      onRefreshClick,
+      onPlayClick,
+      onChange,
+      onImageLoad,
+      onDownloadClick,
+      onSaveClick,
+      onTabClick
     }
+  }
+}
 </script>
 <style lang="less" scoped>
 .main {
-    .container {
-        .raman-picture-container {
-            width: calc(~"100% - 1rem");
-            margin: 0 auto;
-            .picture {
-                .pblh-image {
-                    width: 50%;
-                }
-            }
+  .container {
+    .toolbar {
+      padding: 0.15rem 0;
+
+      .times {
+        padding-bottom: 0;
+      }
+    }
+
+    .raman-picture-container {
+      width: calc(~"100% - 1rem");
+      margin: 0 auto;
+
+      .picture {
+        position: relative;
+        margin-top: 30px;
+
+        .title {
+          width: 100%;
+          font-size: 0.22rem;
+          position: absolute;
+          left: 3.10rem;
+          top: 0.30rem;
+          z-index: 100;
+        }
+
+        .pblh-image {
+          width: 50%;
         }
+      }
     }
+  }
 }
 </style>
diff --git a/04.系统编码/Frontend/src/components/SystemManagement.vue b/04.系统编码/Frontend/src/components/SystemManagement.vue
index 51329a9..6bab266 100644
--- a/04.系统编码/Frontend/src/components/SystemManagement.vue
+++ b/04.系统编码/Frontend/src/components/SystemManagement.vue
@@ -92,7 +92,7 @@
   import {post} from "../uilts/axios";
   import {ElMessage} from 'element-plus'
   import {format} from '../uilts/String';
-import { decrypt, encrypt } from '../uilts/Coder';
+  import { decrypt, encrypt } from '../uilts/Coder';
 
 export default {
   name: 'SystemManagement',
diff --git a/04.系统编码/Frontend/src/index.less b/04.系统编码/Frontend/src/index.less
index 983bf6a..68e8e7e 100644
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@@ -168,7 +168,7 @@ img {
         position: relative;
 
         .toolbar {
-            //padding-top: 0.25rem;
+
             margin: 0 0.25rem;
             display: flex;
             align-items: center;
@@ -178,10 +178,7 @@ img {
                 display: flex;
                 margin-right: 0.2rem;
                 align-items: center;
-                padding-bottom: 0.12rem;
-                //border-left: 1px solid #666666;
-                //border-right: 1px solid #666666;
-                //background-color: #ECF4FF;
+                padding-bottom: 0.07rem;
                 div:first-child {
                     span:last-child {
                         border-radius: 0.05rem 0 0 0.05rem;
@@ -250,17 +247,6 @@ img {
                         }
                     }
                 }
-
-                //.first-hour::before, .time-item .time::before {
-                //    content: '';
-                //    width: 1px;
-                //    height: 100%;
-                //    display: block;
-                //    position: absolute;
-                //    left: -1px;
-                //    bottom: 0;
-                //    background-color: #666666;
-                //}
             }
 
             .halfHour {
@@ -298,6 +284,7 @@ img {
             }
 
             .date-picker {
+
                 width: 1.44rem;
                 height: 0.33rem;
                 line-height: normal;
@@ -384,8 +371,7 @@ img {
                 .times {
                     .time-item {
                         .time {
-                            line-height: 0.46rem;
-
+                            //line-height: 0.46rem;
                         }
                     }
                 }
@@ -427,13 +413,14 @@ img {
             //}
 
             .picture-container {
+
                 height: 100%;
                 display: flex;
-                flex-direction: column;
+                //flex-direction: column;
                 justify-content: center;
-
+                align-content: center;
                 .picture {
-                    height: 100%;
+                    //height: 100%;
 
                     //.el-image {
                     //    height: 100%;
@@ -442,9 +429,9 @@ img {
             }
 
             .picture {
-                //width: 100%;
-                //height: calc(~"100% - 1.1rem");
-                //margin: 0 auto;
+                width: 100%;
+                height: calc(~"100% - 1.1rem");
+                margin: 0 auto;
                 display: flex;
                 align-items: center;
                 justify-content: center;
diff --git a/04.系统编码/Frontend/src/model/constant.ts b/04.系统编码/Frontend/src/model/constant.ts
index aea9397..c1cedc4 100644
--- a/04.系统编码/Frontend/src/model/constant.ts
+++ b/04.系统编码/Frontend/src/model/constant.ts
@@ -1,3 +1,6 @@
 export class Constant{
     public static readonly baseUrl: string = 'http://rdp.nagr.com.cn:18080';
+}
+export class ConstantRamanLidar{
+    public static readonly baseUrl: string = 'http://112.124.40.88:5511/';
 }
\ No newline at end of file
diff --git a/04.系统编码/Frontend/src/model/high-chart-create.ts b/04.系统编码/Frontend/src/model/high-chart-create.ts
index a27975c..9bac4b5 100644
--- a/04.系统编码/Frontend/src/model/high-chart-create.ts
+++ b/04.系统编码/Frontend/src/model/high-chart-create.ts
@@ -31,7 +31,8 @@ export class HighChartCreate {
                 text: text,
                 style: {
                     color: '#000000',
-                    fontSize: '18px'
+                    fontSize: '14px',
+                    fontFamily: 'Verdana'
                 }
             },
             categories: [],
@@ -46,7 +47,8 @@ export class HighChartCreate {
                 text: text,
                 style: {
                     color: '#000000',
-                    fontSize: '18px'
+                    fontSize: '14px',
+                    fontFamily: 'Verdana'
                 }
             },
             max: max,
@@ -58,11 +60,12 @@ export class HighChartCreate {
         });
     }
 
-    public setLegend(){
+    public setLegend(enabled: boolean = false){
         this.legend = {
             layout: 'vertical',
             align: 'right',
-            verticalAlign: 'middle'
+            verticalAlign: 'middle',
+            enabled: enabled
         }
     }
 
@@ -125,4 +128,5 @@ export class HighChartCreate {
     public updateXAxis(categories: Array<any>, index: number = 0){
         this.highChart.xAxis[index].setCategories(categories);
     }
-}
\ No newline at end of file
+}
+
diff --git a/04.系统编码/Frontend/src/uilts/box-drawer.ts b/04.系统编码/Frontend/src/uilts/box-drawer.ts
index 86e5181..648e019 100644
--- a/04.系统编码/Frontend/src/uilts/box-drawer.ts
+++ b/04.系统编码/Frontend/src/uilts/box-drawer.ts
@@ -75,7 +75,7 @@ export class BoxDrawer{
         let startY = this.paddingTop + this.verticalScaleLine + heightInterval;
         let interval = (this.borderHeight - heightInterval) / (this.colorChart.colors.length)
         
-        this.canvasContext.font = "normal 20px Verdana";
+        this.canvasContext.font = "normal 24px Verdana";
         this.canvasContext.fillStyle = "#000000";
 
         for(let lastLen = this.colorChart.colors.length - 1, index = lastLen; index >= 0; index --){
@@ -300,7 +300,7 @@ export class BoxDrawer{
             this.canvasContext.stroke();
 
             if (flag){
-                this.canvasContext.font = "normal 20px Verdana";
+                this.canvasContext.font = "normal 30px Verdana";
                 this.canvasContext.fillStyle = "#000000";
                 const text = moment(this.values.radar_data[index].data_time).format("HH:mm");
                 this.canvasContext.fillText(text, _x -  this.canvasContext.measureText(text).width / 2, startY + yInterval + this.borderHeight + 36);
@@ -330,7 +330,7 @@ export class BoxDrawer{
             this.canvasContext.stroke();
 
             if (flag) {
-                    this.canvasContext.font = "normal 20px Verdana";
+                    this.canvasContext.font = "normal 30px Verdana";
                     this.canvasContext.fillStyle = "#000000";
                     const text = this.values.radar_info[index].col_factor;
                     this.canvasContext.fillText(text, startX - this.canvasContext.measureText(text).width - this.horizontalScaleLine, _y + 10);