commit

3 years ago · a4c66b17d3
5 changed files with 222 additions and 120 deletions
--- a/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
+++ b/04.系统编码/Frontend/src/components/MicrowaveRadiation.vue
@ -50,6 +50,18 @@
        </el-row>
      </div>

+      <div class="menu-item" v-show="currentTab === 'shixu_BPFY'">
+        <h2 class="tip">要素选择</h2>
+        <el-row :gutter="12">
+          <el-col :span="24"><span :class="{'active': ElementChange === 'BP-temp'}"
+                                  @click="onElementChange('BP-temp')">BP反演温度</span></el-col>
+          <el-col :span="24"><span :class="{'active': ElementChange === 'BP-relative-humidity'}"
+                                  @click="onElementChange('BP-relative-humidity')">BP反演相对湿度</span></el-col>
+          <el-col :span="24"><span :class="{'active': ElementChange === 'BP-vapor-density'}"
+                                  @click="onElementChange('BP-vapor-density')">BP反演水汽密度</span></el-col>
+        </el-row>
+      </div>
+
    </div>
    <div class="container panel">
      <div class="toolbar">
@ -123,20 +135,25 @@
        </div>

        <!--BP反演产品-->
-        <div v-show ="currentTab === 'shixu_BPFY'" class="picture-container contrast-picture-container shiXuBP">
-          <div class="BPPicture picture">
-            <h2 class="title">BP反演温度</h2>
+        <div v-show ="currentTab === 'shixu_BPFY'" style="height: 100%">
+        <div v-show ="ElementChange === 'BP-temp'" class="picture-container">
+          <div class="BPPicture">
            <canvas id="BP-temp"></canvas>
          </div>
-          <div class="BPPicture picture">
-            <h2 class="title">BP反演相对湿度</h2>
+          </div>
+
+        <div v-show ="ElementChange === 'BP-relative-humidity'" class="picture-container  ">
+          <div class="BPPicture">
            <canvas id="BP-relative-humidity"></canvas>
          </div>
-          <div class="BPPicture picture">
-            <h2 class="title">BP反演水汽密度</h2>
+        </div>
+
+        <div v-show ="ElementChange === 'BP-vapor-density'" class="picture-container  ">
+          <div class="BPPicture">
            <canvas id="BP-vapor-density"></canvas>
          </div>
        </div>
+        </div>

        <div v-show ="currentTab === 'kuoxian'" class="verticalProfile">
          <div class="verticalProfile-picture">
@ -263,7 +280,8 @@ export default {
      highChartXAxis: [],
      specialStartTime: null,
      tLogPPicture: "/images/no-data.png",
-      SeasonValue: '1'
+      SeasonValue: '1',
+      ElementChange: "BP-temp"
    });

    let drawers = {
@ -927,6 +945,10 @@ export default {
      reloadData()
    }

+    const onElementChange = (type) => {
+      options.ElementChange = type
+    }
+
    return {
      ...toRefs(options),
      onTabClick,
@ -938,7 +960,8 @@ export default {
      onRefreshClick,
      onChange,
      changeColor,
-      onchangeSeason
+      onchangeSeason,
+      onElementChange
    }
  }
 }
@ -946,6 +969,7 @@ export default {
 <style lang="less" scoped>
 .main {
  .container {
+    width: 100%;
    .verticalProfile {
      width: 100%;
      height: 100%;
@ -1001,20 +1025,15 @@ export default {
          z-index: 1000;
        }
      }
-
-      .BPPicture {
-        width: 65% !important;
-        height: 45%;
-        position: relative;
-
-        #BP-temp, #BP-relative-humidity, #BP-vapor-density {
-          transform: scale(0.50, 0.4);
-        }
-
-        .title {
-          left: 3.85rem !important;
-        }
-      }
+    }
+    //.BPPicture {
+    //  width: 100% !important;
+    //  height: 100%!important;
+    //  position: relative;
+    //
+    //}
+    #BP-temp, #BP-relative-humidity, #BP-vapor-density {
+      transform: scale(1, 1.2) translate(-42px,100px);
    }

    .shiXu {
--- a/04.系统编码/Frontend/src/components/RamanLidar.vue
+++ b/04.系统编码/Frontend/src/components/RamanLidar.vue
@ -44,8 +44,8 @@
      <h2 class="tip">要素选择</h2>
        <el-row :gutter="12">
           <el-col :span="24" v-for="(item, index) in elementData" :key = 'index'>
-                    <span @click="onElementClick(item)"
-                    :class="{'active': currentElement === item}">{{ item }}</span></el-col>
+                    <span @click="onElementClick(item.value)"
+                    :class="{'active': currentElement === item.value}">{{ item.label }}</span></el-col>
           </el-row>
      </div>
    </div>
@ -72,7 +72,7 @@

      <div class="picture-view">

-        <div class="picture-container raman-picture-container" v-show="currentElement === '水汽'">
+        <div class="picture-container raman-picture-container" v-show="currentElement === 'singleWatervapor'">
          <div class="picture special-picture">
            <div v-loading="loadingWaterVaporSingleStatus"
                 style="width: 100%;height: 100%"
@ -83,10 +83,10 @@
          </div>
        </div>

-        <div class="picture-container raman-picture-container" v-show=" currentElement=== '光学厚度'">
+        <div class="picture-container raman-picture-container" v-show=" currentElement=== 'aod-icot-wcot'">
          <div class="picture">
            <div id="opticalThickness"
-                 style="width: 800px;height: 450px"
+                 style="width: 1000px;height: 450px"
                 v-loading="loadingOpticalThicknessStatus"
                 custom-class="loading"
                 element-loading-text="加载中">
@ -94,7 +94,7 @@
          </div>
        </div>

-          <div class="picture-container raman-picture-container" v-show = "currentElement=== '消光系数'">
+          <div class="picture-container raman-picture-container" v-show = "currentElement=== 'extinctionOptics'">
          <div class="picture special-picture">
            <div v-loading="loadingExtinctionOpticsStatus"
                 style="width: 100%;height: 100%"
@ -105,7 +105,7 @@
          </div>
          </div>

-          <div class="picture-container raman-picture-container" v-show="currentElement=== '后向散射系数'">
+          <div class="picture-container raman-picture-container" v-show="currentElement=== 'backscatter'">
          <div class="picture special-picture">
            <div v-loading="loadingBackscatterStatus"
                 style="width: 100%;"
@ -116,7 +116,7 @@
          </div>
        </div>

-        <div class="picture-container raman-picture-container" v-show="currentElement=== '气溶胶PM'">
+        <div class="picture-container raman-picture-container" v-show="currentElement=== 'pm2_5'">
          <div class="picture special-picture">
            <div v-loading="loadingPmStatus"
                 style="width: 100%;"
@ -136,20 +136,20 @@
          </div>
        </div>

-      <div class="picture-container raman-picture-container" v-show="currentElement=== '边界层高度'">
+      <div class="picture-container raman-picture-container" v-show="currentElement=== 'pblh'">
          <div class="picture">
            <div id="BoundaryLayerHeight"
-                 style="width: 800px;height: 450px"
+                 style="width: 1000px;height: 450px"
                 v-loading="loadingBoundaryLayerHeightStatus"
                 custom-class="loading"
                 element-loading-text="加载中"></div>
          </div>
      </div>

-      <div class="picture-container raman-picture-container" v-show="currentElement=== '激光雷达比'">
+      <div class="picture-container raman-picture-container" v-show="currentElement=== 'lidarratio'">
          <div class="picture">
            <div id="LidarRatio"
-                 style="width: 800px;height: 450px"
+                 style="width: 1000px;height: 450px"
                 v-loading="loadingLidarRatioStatus"
                 custom-class="loading"
                 element-loading-text="加载中">
@ -158,7 +158,7 @@
        </div>


-        <div class="picture-container raman-picture-container" v-show="currentElement=== '云气溶胶分类'">
+        <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudSol'">
          <div class="picture special-picture">
            <div v-loading="loadingCloudSolStatus"
                 style="width: 100%;"
@ -169,20 +169,20 @@
          </div>
        </div>

-        <div class="picture-container raman-picture-container" v-show="currentElement=== '云底高度'">
+        <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudbaseheight'">
          <div class="picture">
            <div id="cloudsHeight"
-                 style="width: 800px;height: 450px"
+                 style="width: 1000px;height: 450px"
                 v-loading="loadingCloudsHeightStatus"
                 custom-class="loading"
                 element-loading-text="加载中"></div>
          </div>
        </div>

-        <div class="picture-container raman-picture-container" v-show="currentElement=== '云顶高度'">
+        <div class="picture-container raman-picture-container" v-show="currentElement=== 'cloudtopheight'">
          <div class="picture">
            <div id="cloudTopHeight"
-                 style="width: 800px;height: 450px"
+                 style="width: 1000px;height: 450px"
                 v-loading="loadingCloudTopHeightStatus"
                 custom-class="loading"
                 element-loading-text="加载中"></div>
@ -313,8 +313,21 @@ export default {
      timeArray: [],
      chartsData: [],
      chartTimeData: [],
-      elementData: ['光学厚度', '消光系数', '后向散射系数'],
-      currentElement: '光学厚度'
+      elementData: [
+        {
+          value: 'aod-icot-wcot',
+          label: '光学厚度'
+        },
+        {
+          value: 'extinctionOptics',
+          label: '消光系数'
+        },
+        {
+          value: 'backscatter',
+          label: '后向散射系数'
+        },
+      ],
+      currentElement: 'aod-icot-wcot'
    })

    onMounted(() => {
@ -329,9 +342,9 @@ export default {
    //边界层高度
    const boundaryLayerHeightInit = () => {
      creates.boundaryLayerHeight = new HighChartCreate('BoundaryLayerHeight');
-      creates.boundaryLayerHeight.setChart();
-      creates.boundaryLayerHeight.setXAxis('时间(天/时)', false);
-      creates.boundaryLayerHeight.setYAxis('边界层高度(米)', 3000, 0, 500, 7);
+      creates.boundaryLayerHeight.setChart(false,'line', 1000);
+      creates.boundaryLayerHeight.setXAxisTypeDate();
+      creates.boundaryLayerHeight.setYAxis('边界层高度(米)');
      creates.boundaryLayerHeight.setLegend();
      creates.boundaryLayerHeight.setTooltip('高度: {point.y}');
      creates.boundaryLayerHeight.setSeries('边界层高度')
@ -341,10 +354,10 @@ export default {
    //云层高度
    const cloudsHeightInit = () => {
      creates.cloudsHeight = new HighChartCreate('cloudsHeight');
-      creates.cloudsHeight.setChart(false, 'scatter');
+      creates.cloudsHeight.setChart(false, 'scatter', 1000);
      // creates.cloudsHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
-      creates.cloudsHeight.setXAxis('时间(天/时)', false);
-      creates.cloudsHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
+      creates.cloudsHeight.setXAxisTypeDate();
+      creates.cloudsHeight.setYAxis('高度(米)');
      creates.cloudsHeight.setLegend();
      creates.cloudsHeight.setTooltip('高度: {point.y}');
      creates.cloudsHeight.setSeries('云层高度')
@ -353,10 +366,10 @@ export default {
    //云顶高度
    const cloudTopHeightInit = () => {
      creates.cloudTopHeight = new HighChartCreate('cloudTopHeight');
-      creates.cloudTopHeight.setChart(false, 'scatter');
+      creates.cloudTopHeight.setChart(false, 'scatter', 1000);
      // creates.cloudTopHeight.setSpecialXAxis('时间(小时)', 24, 0, 2);
-      creates.cloudTopHeight.setXAxis('时间(天/时)', false);
-      creates.cloudTopHeight.setYAxis('高度(米)', 14000, 0, 2000, 8);
+      creates.cloudTopHeight.setXAxisTypeDate();
+      creates.cloudTopHeight.setYAxis('高度(米)');
      creates.cloudTopHeight.setLegend();
      creates.cloudTopHeight.setTooltip('高度: {point.y}');
      creates.cloudTopHeight.setSeries('云顶高度')
@ -366,9 +379,9 @@ export default {
    //激光雷达比
    const LidarRatioInit = () => {
      creates.LidarRatio = new HighChartCreate('LidarRatio');
-      creates.LidarRatio.setChart();
+      creates.LidarRatio.setChart(false,'line', 1000);
      creates.LidarRatio.setSpecialXAxis('sr', 120, 0, 20);
-      creates.LidarRatio.setYAxis('高度(米)', 3000, 0, 500, 7);
+      creates.LidarRatio.setYAxis('高度(米)');
      creates.LidarRatio.setLegend();
      creates.LidarRatio.setTooltip('高度: {point.y}');
      creates.LidarRatio.setSeries('激光雷达比')
@ -378,11 +391,11 @@ export default {
    //光学厚度
    const opticalThicknessInit = () => {
      creates.opticalThickness = new HighChartCreate('opticalThickness');
-      creates.opticalThickness.setChart();
+      creates.opticalThickness.setChart(false,'line', 1000);
      // creates.opticalThickness.setSpecialXAxis('时间（小时）', 24, 0, 2);
      // creates.opticalThickness.setXAxis('时间(天/时)', false);
      creates.opticalThickness.setXAxisTypeDate();
-      creates.opticalThickness.setYAxis('光学厚度', 6, 0, 1, 7);
+      creates.opticalThickness.setYAxis('光学厚度');
      creates.opticalThickness.setLegend(true);
      creates.opticalThickness.setTooltip('{point.y}');
      creates.opticalThickness.setSeries('气溶胶', 0, null, null, '#FF5352')
@ -401,21 +414,62 @@ export default {
      cancelRequest();
      options.elementData = []
      if (options.currentTab === 'boundary-layer-height') {
-        options.currentElement = '水汽'
-        options.elementData = ['水汽']
+        options.currentElement = 'singleWatervapor'
+        options.elementData = [{
+          value: 'singleWatervapor',
+          label: '水汽'
+        }]


      } else if (options.currentTab === 'optical-property') {
-        options.currentElement = '光学厚度'
-        options.elementData = ['光学厚度', '消光系数', '后向散射系数']
+        options.currentElement = 'aod-icot-wcot'
+        options.elementData = [
+          {
+          value: 'aod-icot-wcot',
+          label: '光学厚度'
+          },
+          {
+            value: 'extinctionOptics',
+            label: '消光系数'
+          },
+          {
+            value: 'backscatter',
+            label: '后向散射系数'
+          },]

      } else if (options.currentTab === 'aerosol-product') {
-        options.currentElement = '气溶胶PM'
-        options.elementData = ['气溶胶PM', '边界层高度', '激光雷达比']
+        options.currentElement = 'pm2_5'
+        options.elementData = [
+          {
+            value: 'pm2_5',
+            label: '气溶胶PM'
+          },
+          {
+            value: 'pblh',
+            label: '边界层高度'
+          },
+          {
+            value: 'lidarratio',
+            label: '激光雷达比'
+          }
+        ]

      } else if (options.currentTab === 'BingoCloud') {
-        options.currentElement = '云气溶胶分类'
-        options.elementData = ['云气溶胶分类', '云底高度', '云顶高度']
+        options.currentElement = 'cloudSol'
+        options.elementData = [
+          {
+            value: 'cloudSol',
+            label: '云气溶胶分类'
+          },
+          {
+            value: 'cloudbaseheight',
+            label: '云底高度'
+          },
+          {
+            value: 'cloudtopheight',
+            label: '云顶高度'
+          }
+        ]

      } else if (options.currentTab === 'MWR') {
        options.currentElement = '质控对比'
@ -428,37 +482,37 @@ export default {

    const elementChange = (code: string) => {
      switch (code) {
-        case '水汽' :
+        case 'singleWatervapor' :
          reloadCloudRecognition('singleWatervapor', 101, 'watervapor', drawSingleWatervapor);
          break;
-        case '光学厚度' :
+        case 'aod-icot-wcot' :
          reloadChartsRecognition('aod', drawAerosolCharts);
          reloadChartsRecognition('icot', drawIceCloudsCharts);
          reloadChartsRecognition('wcot', drawWaterCloud);
          break;
-        case '消光系数' :
+        case 'extinctionOptics' :
          reloadCloudRecognition('extinctionOptics', 801, 'extinction', drawOpticsExtinction);
          break;
-        case '后向散射系数' :
+        case 'backscatter' :
          reloadCloudRecognition('backscatter', 801, 'backscatter', drawBackscatter);
          break;
-        case '气溶胶PM' :
+        case 'pm2_5' :
          reloadCloudRecognition('pm2_5', 201, 'pm2_5', drawPm2Point5);
          reloadCloudRecognition('pm2_5', 201, 'pm10', drawPm10);
          break;
-        case '边界层高度' :
+        case 'pblh' :
          reloadChartsRecognition('pblh', drawBoundaryLayerCharts);
          break;
-        case '激光雷达比' :
+        case 'lidarratio' :
          reloadChartLidarratio('lidarratio', drawLidarRatioCharts);
          break;
-        case '云气溶胶分类' :
+        case 'cloudSol' :
          reloadCloudRecognition('cloudSol', 801, 'layertype', drawCloudSol);
          break;
-        case '云底高度' :
+        case 'cloudbaseheight' :
          reloadChartsRecognition('cloudbaseheight', drawCloudsHeightCharts);
          break;
-        case '云顶高度' :
+        case 'cloudtopheight' :
          reloadChartsRecognition('cloudtopheight', drawCloudTopHeightCharts);
          break;
        default:
@ -607,7 +661,6 @@ export default {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.boundaryLayerHeight.updateSeries(0, data)
-      creates.boundaryLayerHeight.updateXAxis(options.chartTimeData, 0)
      options.loadingBoundaryLayerHeightStatus = false
    }

@ -622,23 +675,20 @@ export default {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.opticalThickness.updateSeries(0, data);
-      // creates.opticalThickness.updateXAxis(options.chartTimeData, 0)
-      options.loadingOpticalThicknessStatus = false
+      // options.loadingOpticalThicknessStatus = false
    }

    const drawIceCloudsCharts = (result: CustomeArray<any>) => {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.opticalThickness.updateSeries(1, data)
-      // creates.opticalThickness.updateXAxis(options.chartTimeData, 0)
-      options.loadingOpticalThicknessStatus = false
+      // options.loadingOpticalThicknessStatus = false
    }

    const drawWaterCloud = (result: CustomeArray<any>) => {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.opticalThickness.updateSeries(2, data)
-      // creates.opticalThickness.updateXAxis(options.chartTimeData, 0)
      options.loadingOpticalThicknessStatus = false
    }

@ -647,7 +697,6 @@ export default {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.cloudTopHeight.updateSeries(0, data)
-      creates.cloudTopHeight.updateXAxis(options.chartTimeData, 0)
      options.loadingCloudTopHeightStatus = false
    }

@ -655,7 +704,6 @@ export default {
      if (result.length != 24) return;
      const data = prepareChartData(result);
      creates.cloudsHeight.updateSeries(0, data)
-      creates.cloudsHeight.updateXAxis(options.chartTimeData, 0)
      options.loadingCloudsHeightStatus = false
    }

@ -664,7 +712,7 @@ export default {
      options.chartTimeData = [];
      result.sort((x, y) => moment(x.time, 'M_D_H').isBefore(moment(y.time, 'M_D_H')) ? -1 : 1);
      result.forEach(item => {
-        options.chartTimeData.push(item.time)
+        // options.chartTimeData.push(item.time)
        if (item.data == null) {
          let temp = [];
          for (let i = 0; i < 11; i++) {
@ -743,7 +791,7 @@ export default {
      }

      let matrix = converCloudRecognition(101, result, 'singleWatervapor');
-      creates.singleWatervaporDrawer = new HeatMapDrawer(800, 600, matrix, "watervapor_single_chart",' g/g');
+      creates.singleWatervaporDrawer = new HeatMapDrawer(800, 600, matrix, "watervapor_single_chart",' g/kg');
      creates.singleWatervaporDrawer.setAxis(new CoordinateScale(options.timeArray), new CoordinateScale([0, 500, 1000, 1500], true, true));
      creates.singleWatervaporDrawer.setColorChart(prepareWatervaporColors());
      creates.singleWatervaporDrawer.draw();
@ -767,7 +815,7 @@ export default {
    const prepareWatervaporColors = () => {
      return new ColorChart(['#990000', '#CC0000', '#FF0000', '#FF3300', '#FF6600', '#FF9900', '#FFCC00', '#FFFF00', '#CCFF33', '#99FF66',
            '#66FF99', '#33FFCC', '#00FFFF', '#00CCFF', '#0099FF', '#0066FF', '#0033FF', '#0000FF', '#0000CC', '#000099'],
-          [0.02, 0.019, 0.018, 0.017, 0.016, 0.15, 0.014, 0.013, 0.012, 0.011, 0.01, 0.009, 0.008, 0.007, 0.006, 0.005, 0.004, 0.003, 0.002, 0.001, 0], true, true
+          [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], true, true
      );
    }

@ -891,6 +939,9 @@ export default {
              if (name == 'backscatter') {
                value = value == null ? NaN : Math.log10(value);
              }
+              if (name == 'singleWatervapor' || name == 'watervapor') {
+                value = value == null ? NaN : value * 1000;
+              }
              value = value == null ? NaN : value;
              matrix[tempIndex][h] = new Box(tempIndex, h, 0, 0, value, h * 15, time, "米");
            }
@ -1103,7 +1154,7 @@ export default {
      options.date = moment(time.date).format('YYYY-MM-DD HH');
      elementChange(options.currentElement)
      options.index = index;
-      reloadChangeData()
+      // reloadChangeData()
      // cancelActive();
      // setTitle(moment(time.date, 'YYYY-MM-DD'));
      // activeImage();
@ -1210,7 +1261,10 @@ export default {

    const onChange = () => {
      initTimeLine();
-      reloadChangeData();
+      if (options.currentTab === 'MWR') {
+        reloadChangeData();
+      }
+      elementChange(options.currentElement)
      // setTitle(moment(options.date));
      // activeImage();
    }
@ -1289,6 +1343,7 @@ export default {
    }

    const onElementClick = (element) => {
+
      options.currentElement = element
      elementChange(element)
    }
@ -1350,31 +1405,31 @@ export default {
        margin-top: 30px;

        #watervapor_single_chart {
-          transform: scale(1.0, 1.0) translateX(38%);
+          transform: scale(1.5, 1.0) translateX(24%);
          //transform: scale(1.0, 0.8) translateX(539px);
        }

        #extinction_optics_chart {
            //transform: scale(0.56, 0.85) translateX(-32%);
-          transform: scale(1, 1) translateX(35%);
+          transform: scale(1.5, 1) translateX(24%);

        }

        #pm2_5_chart {
-          transform: scale(0.8, 1) translateX(-50px);
+          transform: scale(1.0, 1) translateX(-50px);
        }

        #pm10_chart {
-          transform: scale(0.8, 1) translateX(-50px);
+          transform: scale(1.0, 1) translateX(-50px);
        }

        #backscatter_chart {
-          transform: scale(1, 1) translateX(35%);
+          transform: scale(1.5, 1) translateX(24%);
          //transform: scale(0.6, 0.85) translateX(-76px);
        }

        #cloud_sol_chart {
-          transform: scale(1, 1) translateX(35%);
+          transform: scale(1.5, 1) translateX(24%);
          //transform: scale(0.6, 0.85) translate(-12%, -12px);
        }

--- a/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
+++ b/04.系统编码/Frontend/src/components/SynergyEvaluation.vue
@ -48,19 +48,30 @@
                    <el-col :span="24"><span @click="onTimeClick('time2230')" :class="{'active': currentTime === 'time2230'}">地表温度（22:30）</span></el-col>
                </el-row>
            </div>
+
+          <div class="menu-item" v-if="currentTab === 'element-change-trend'">
+            <h2 class="tip">时间点选择</h2>
+            <el-row :gutter="12">
+              <el-col :span="24"><span @click="onSurfaceTemperatureClick('time0130')" :class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度（01:30）</span></el-col>
+              <el-col :span="24"><span @click="onSurfaceTemperatureClick('time1030')" :class="{'active': currentSurfaceTemperatureTime === 'time1030'}">地表温度（10:30）</span></el-col>
+              <el-col :span="24"><span @click="onSurfaceTemperatureClick('time1330')" :class="{'active': currentSurfaceTemperatureTime === 'time1330'}">地表温度（13:30）</span></el-col>
+              <el-col :span="24"><span @click="onSurfaceTemperatureClick('time2230')" :class="{'active': currentSurfaceTemperatureTime === 'time2230'}">地表温度（22:30）</span></el-col>
+            </el-row>
+          </div>
        </div>
+
        <div class="container panel synergy-container">
            <span class="save-btn" @click="onSaveClick"><img src="/images/save.png" /></span>
            <div class="download-pictures" id="pictures">
                <a v-for="(url, index) in urls" :key="index" download></a>
            </div>
            <div class="element-select" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'">
-                <div class="surface-temperature" v-if="currentTab === 'element-change-trend' && currentCategory === 'LST'">
-                    <span @click="onSurfaceTemperatureClick('time0130')" :class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度（01:30）</span>
-                    <span @click="onSurfaceTemperatureClick('time1030')" :class="{'active': currentSurfaceTemperatureTime === 'time1030'}">地表温度（10:30）</span>
-                    <span @click="onSurfaceTemperatureClick('time1330')" :class="{'active': currentSurfaceTemperatureTime === 'time1330'}">地表温度（13:30）</span>
-                    <span @click="onSurfaceTemperatureClick('time2230')" :class="{'active': currentSurfaceTemperatureTime === 'time2230'}">地表温度（22:30）</span>
-                </div>
+<!--                <div class="surface-temperature" v-if="currentTab === 'element-change-trend' && currentCategory === 'LST'">-->
+<!--                    <span @click="onSurfaceTemperatureClick('time0130')" :class="{'active': currentSurfaceTemperatureTime === 'time0130'}">地表温度（01:30）</span>-->
+<!--                    <span @click="onSurfaceTemperatureClick('time1030')" :class="{'active': currentSurfaceTemperatureTime === 'time1030'}">地表温度（10:30）</span>-->
+<!--                    <span @click="onSurfaceTemperatureClick('time1330')" :class="{'active': currentSurfaceTemperatureTime === 'time1330'}">地表温度（13:30）</span>-->
+<!--                    <span @click="onSurfaceTemperatureClick('time2230')" :class="{'active': currentSurfaceTemperatureTime === 'time2230'}">地表温度（22:30）</span>-->
+<!--                </div>-->
                <div class="surface-temperature" v-if="currentTab === 'element-monitor'">
                    <span @click="onYearClick('2000')" :class="{'active': currentYear === '2000'}">2000</span>
                    <span @click="onYearClick('2001')" :class="{'active': currentYear === '2001'}">2001</span>
@ -109,9 +120,9 @@
                    </el-col>
                </el-row>
            </div>
-            <div class="picture-view multi-picture-view" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'" :style="{'marginTop': currentTab === 'element-change-trend' && currentCategory !== 'LST' ? 'calc(0.34rem + 2px)' : 0}">
-                <el-row :gutter="0">
-                    <el-col :span="4" v-for="(item, index) in trendItems" :key="index">
+            <div class="picture-view multi-picture-view scroll" v-if="currentTab === 'element-change-trend' || currentTab === 'element-monitor'" :style="{'marginTop': currentTab === 'element-change-trend' && currentCategory !== 'LST' ? 'calc(0.34rem + 2px)' : 0}">
+                <el-row :gutter="20">
+                    <el-col :span="12" v-for="(item, index) in trendItems" :key="index">
                        <el-image
                        :src="item.imgUrl"
                        :preview-src-list="item.preview"
@ -373,11 +384,15 @@
                }
            }
            .multi-picture-view {
-                height: calc(~"100% - 0.76rem");
-                .el-row {
+              width: 100%;
+              height: calc(~"100% - 0.76rem");
+                :deep(.el-row) {
                    height: 100%;
+                    padding-top: 10px;
+                    margin-left: 0!important;
+                    margin-right: 0!important;
                    .el-col {
-                        max-width: calc(~"(100% / 6) - 0.2rem");
+                        max-width: calc(~"(100% / 4) - 0.2rem");
                        height: 50%;
                        margin: 0.2rem 0.2rem 0 0;
                        border: 1px solid #666666;
@ -389,12 +404,15 @@
                            justify-content: center;
                        }

-                        &:nth-of-type(6n) {
-                            margin-right: 0;
-                        }
+                        //&:nth-of-type(6n) {
+                        //    margin-right: 0;
+                        //}
                    }
                }
            }
+          .scroll {
+            overflow-y: scroll;
+          }
            .element-select {
                position: relative;
                .surface-temperature {
@ -424,4 +442,22 @@
            }
        }
    }
+    ::-webkit-scrollbar {
+      width: 8px;
+      border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: inherit;
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #c3c9cd;
+      -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+      border-radius: 4px;
+    }
 </style>
--- a/04.系统编码/Frontend/src/index.less
+++ b/04.系统编码/Frontend/src/index.less
@ -383,7 +383,6 @@ img {
            width: 100%;
            height: calc(~"100% - 0.71rem");
            position: relative;
-
            .arrow {
                width: 0.68rem;
                display: block;
@ -414,19 +413,12 @@ img {
            //}

            .picture-container {
-
                height: 100%;
                display: flex;
                //flex-direction: column;
                justify-content: center;
                align-content: center;
-                .picture {
-                    //height: 100%;

-                    //.el-image {
-                    //    height: 100%;
-                    //}
-                }
            }

            .picture {
--- a/04.系统编码/Frontend/src/model/high-chart-create.ts
+++ b/04.系统编码/Frontend/src/model/high-chart-create.ts
@ -17,10 +17,11 @@ export class HighChartCreate {
        this.id = id;
    }

-    public setChart(inverted: boolean = false, type: string = 'line'): void {
+    public setChart(inverted: boolean = false, type: string = 'line', width: number = null): void {
        this.chart = {
            type: type,
-            inverted: inverted
+            inverted: inverted,
+            width: width
        };
    }

@ -50,8 +51,7 @@ export class HighChartCreate {
        this.xAxis.push({
            type: 'datetime',
            labels: {
-                formatter: function () { 
-		            console.log(this)
+                formatter: function () {
                    return Highcharts.dateFormat('%d日%H时', this.value); 
                }
            }
@ -87,7 +87,7 @@ export class HighChartCreate {

        })
    }
-    public setYAxis(text: string, max: number, min: number, tickInterval: number, tickAmount: number, opposite: boolean = false, lineWidth: number = 1,  reversed: boolean = true){
+    public setYAxis(text: string, max: number = null, min: number = null, tickInterval: number = null, tickAmount: number = null, opposite: boolean = false, lineWidth: number = 1,  reversed: boolean = true){
        this.yAxis.push({
            title: {
                text: text,