大风监测、空间分析调整

src/views/globalMap/RightMenu/RainMonitor/index.vue

@@ -1,189 +1,191 @@
 <template>
   <div class="menu-content">
     <div class="gradient-text title">雨情监测</div>
-    <div class="card-header">
-      <div class="title-box">水利站点降雨分布统计</div>
-      <el-select
-        v-model="timeOption"
-        class="custom-select"
-        popper-class="custom-select-popper"
-        :teleported="false"
-        style="width: 236px"
-        @change="handleTimeChange"
-      >
-        <el-option v-for="item in timeOptions" :key="item.value" :label="item.name" :value="item.value" />
-      </el-select>
-    </div>
-    <Chart :option="chartOption1" style="width: 100%; height: 505px" />
-    <div class="card-header">
-      <div class="title-box">
-        <div>降雨量排行</div>
-        <div class="line"></div>
-        <div class="gradient-text text2">区县排行</div>
-        <div class="text3">（过去{{ timeOption }}小时）</div>
+    <div class="scroll">
+      <div class="card-header">
+        <div class="title-box">水利站点降雨分布统计</div>
+        <el-select
+          v-model="timeOption"
+          class="custom-select"
+          popper-class="custom-select-popper"
+          :teleported="false"
+          style="width: 236px"
+          @change="handleTimeChange"
+        >
+          <el-option v-for="item in timeOptions" :key="item.value" :label="item.name" :value="item.value" />
+        </el-select>
       </div>
-      <div class="btn-box">
-        <div class="btn" @click="handleShowMore">
-          <i class="more-icon"></i>
-          <div class="btn-text">更多</div>
+      <Chart :option="chartOption1" style="width: 100%; height: 505px" />
+      <div class="card-header">
+        <div class="title-box">
+          <div>降雨量排行</div>
+          <div class="line"></div>
+          <div class="gradient-text text2">区县排行</div>
+          <div class="text3">（过去{{ timeOption }}小时）</div>
         </div>
-        <div class="btn" @click="exportData">
-          <i class="export-icon"></i>
-          <div class="btn-text">导出</div>
+        <div class="btn-box">
+          <div class="btn" @click="handleShowMore">
+            <i class="more-icon"></i>
+            <div class="btn-text">更多</div>
+          </div>
+          <div class="btn" @click="exportData">
+            <i class="export-icon"></i>
+            <div class="btn-text">导出</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="table">
-      <div class="table-header">
-        <div class="td">序号</div>
-        <div class="td">
-          <div style="width: 201px">
+      <div class="table">
+        <div class="table-header">
+          <div class="td">序号</div>
+          <div class="td">
+            <div style="width: 201px">
+              <el-select
+                v-model="queryParams.area"
+                placeholder="县区"
+                size="large"
+                class="custom-select2"
+                popper-class="custom-select-popper2"
+                :teleported="false"
+              >
+                <el-option label="县区" value="" />
+                <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </div>
+          <div class="td">
             <el-select
-              v-model="queryParams.area"
-              placeholder="县区"
+              v-model="queryParams.township"
+              placeholder="街镇"
               size="large"
               class="custom-select2"
               popper-class="custom-select-popper2"
               :teleported="false"
+              @change="handleGetRainfallRange"
             >
-              <el-option label="县区" value="" />
-              <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.value" />
+              <el-option label="街镇" value="" />
+              <el-option v-for="item in townshipList" :key="item.area_code" :label="item.area_name" :value="item.area_name" />
             </el-select>
           </div>
+          <div class="td">站址</div>
+          <div class="td td-cursor">
+            <span>雨量(mm)</span>
+            <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
+          </div>
         </div>
-        <div class="td">
-          <el-select
-            v-model="queryParams.township"
-            placeholder="街镇"
-            size="large"
-            class="custom-select2"
-            popper-class="custom-select-popper2"
-            :teleported="false"
-            @change="handleGetRainfallRange"
-          >
-            <el-option label="街镇" value="" />
-            <el-option v-for="item in townshipList" :key="item.area_code" :label="item.area_name" :value="item.area_name" />
-          </el-select>
-        </div>
-        <div class="td">站址</div>
-        <div class="td td-cursor">
-          <span>雨量(mm)</span>
-          <i :class="queryParams.sort === 'desc' ? 'desc-icon' : 'asc-icon'" @click="handleSort" />
+        <div v-for="(item, index) in rangeData" :key="index" class="tr">
+          <div class="td">
+            <div :class="getRankClass(item.rn)">{{ item.rn }}</div>
+          </div>
+          <div class="td">{{ item.area }}</div>
+          <div class="td">{{ item.township }}</div>
+          <div class="td">{{ item.address }}</div>
+          <div class="gradient-text2 td">{{ item.rainfall }}</div>
         </div>
       </div>
-      <div v-for="(item, index) in rangeData" :key="index" class="tr">
-        <div class="td">
-          <div :class="getRankClass(item.rn)">{{ item.rn }}</div>
+      <div class="card-header">
+        <div class="title-box">
+          <div>影响分析</div>
         </div>
-        <div class="td">{{ item.area }}</div>
-        <div class="td">{{ item.township }}</div>
-        <div class="td">{{ item.address }}</div>
-        <div class="gradient-text2 td">{{ item.rainfall }}</div>
-      </div>
-    </div>
-    <div class="card-header">
-      <div class="title-box">
-        <div>影响分析</div>
-      </div>
-      <div class="btn-box">
-        <div class="btn" @click="exportData2">
-          <i class="export-icon"></i>
-          <div class="btn-text">导出</div>
+        <div class="btn-box">
+          <div class="btn" @click="exportData2">
+            <i class="export-icon"></i>
+            <div class="btn-text">导出</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="data-box">
-      <div>
-        <div class="line1">
-          <div class="line-item">小雨</div>
-          <div class="line-item">中雨</div>
-          <div class="line-item">大雨</div>
-          <div class="line-item">暴雨</div>
-          <div class="line-item">大暴雨</div>
-          <div class="line-item">特大暴雨</div>
-        </div>
-        <div ref="lineRef" class="line2" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
-          <div class="line-item"></div>
-          <div class="line-item"></div>
-          <div class="line-item"></div>
-          <div class="line-item"></div>
-          <div class="line-item"></div>
-          <div class="line-item"></div>
-          <div
-            class="dot"
-            :style="{ left: startLeft + 'px' }"
-            @mousedown="
+      <div class="data-box">
+        <div>
+          <div class="line1">
+            <div class="line-item">小雨</div>
+            <div class="line-item">中雨</div>
+            <div class="line-item">大雨</div>
+            <div class="line-item">暴雨</div>
+            <div class="line-item">大暴雨</div>
+            <div class="line-item">特大暴雨</div>
+          </div>
+          <div ref="lineRef" class="line2" @mousemove="handleMouseMove" @mouseup="handleMouseUp" @mouseleave="handleMouseUp">
+            <div class="line-item"></div>
+            <div class="line-item"></div>
+            <div class="line-item"></div>
+            <div class="line-item"></div>
+            <div class="line-item"></div>
+            <div class="line-item"></div>
+            <div
+              class="dot"
+              :style="{ left: startLeft + 'px' }"
+              @mousedown="
               (e) => {
                 handleMouseDown(e, 'start');
               }
             "
-          ></div>
-          <div
-            class="dot"
-            :style="{ left: endLeft + 'px' }"
-            @mousedown="
+            ></div>
+            <div
+              class="dot"
+              :style="{ left: endLeft + 'px' }"
+              @mousedown="
               (e) => {
                 handleMouseDown(e, 'end');
               }
             "
-          ></div>
-        </div>
-        <div class="line3">
-          <div class="line-item">1</div>
-          <div class="line-item">10</div>
-          <div class="line-item">25</div>
-          <div class="line-item">50</div>
-          <div class="line-item">100</div>
-          <div class="line-item">
-            <div>250</div>
-            <div>(mm)</div>
+            ></div>
+          </div>
+          <div class="line3">
+            <div class="line-item">1</div>
+            <div class="line-item">10</div>
+            <div class="line-item">25</div>
+            <div class="line-item">50</div>
+            <div class="line-item">100</div>
+            <div class="line-item">
+              <div>250</div>
+              <div>(mm)</div>
+            </div>
           </div>
         </div>
+        <div class="box">
+          <div class="text1">雨量范围</div>
+          <div class="text2">{{ rainRange[0] }}-{{ rainRange[1] }}</div>
+        </div>
       </div>
-      <div class="box">
-        <div class="text1">雨量范围</div>
-        <div class="text2">{{ rainRange[0] }}-{{ rainRange[1] }}</div>
-      </div>
-    </div>
-    <div class="data-box2">
-      <div class="data-item">
-        <div class="icon1"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">行政镇</div>
-            <div class="text2">(个)</div>
+      <div class="data-box2">
+        <div class="data-item">
+          <div class="icon1"></div>
+          <div class="item-right">
+            <div class="text-box">
+              <div class="text1">行政镇</div>
+              <div class="text2">(个)</div>
+            </div>
+            <div class="text3">{{ analyzeData.town_num }}</div>
           </div>
-          <div class="text3">{{ analyzeData.town_num }}</div>
         </div>
-      </div>
-      <div class="data-item">
-        <div class="icon2"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">人口</div>
-            <div class="text2">(万)</div>
+        <div class="data-item">
+          <div class="icon2"></div>
+          <div class="item-right">
+            <div class="text-box">
+              <div class="text1">人口</div>
+              <div class="text2">(万)</div>
+            </div>
+            <div class="text4">{{ analyzeData.populationSize }}</div>
           </div>
-          <div class="text4">{{ analyzeData.populationSize }}</div>
         </div>
-      </div>
-      <div class="data-item">
-        <div class="icon3"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">面积</div>
-            <div class="text2">(km²)</div>
+        <div class="data-item">
+          <div class="icon3"></div>
+          <div class="item-right">
+            <div class="text-box">
+              <div class="text1">面积</div>
+              <div class="text2">(km²)</div>
+            </div>
+            <div class="text5">{{ analyzeData.areaSize }}</div>
           </div>
-          <div class="text5">{{ analyzeData.areaSize }}</div>
         </div>
-      </div>
-      <div class="data-item">
-        <div class="icon4"></div>
-        <div class="item-right">
-          <div class="text-box">
-            <div class="text1">GDP</div>
-            <div class="text2">(亿)</div>
+        <div class="data-item">
+          <div class="icon4"></div>
+          <div class="item-right">
+            <div class="text-box">
+              <div class="text1">GDP</div>
+              <div class="text2">(亿)</div>
+            </div>
+            <div class="text6">{{ analyzeData.GDP }}</div>
           </div>
-          <div class="text6">{{ analyzeData.GDP }}</div>
         </div>
       </div>
     </div>
@@ -418,7 +420,7 @@ watch(endLeft, () => {
 });
 const getNewRange = (index, value) => {
   if (value >= 0 && value < 192) {
-    const data = new BigNumber(value).dividedBy(new BigNumber(19.2)).toFixed(0);
+    const data = new BigNumber(value).dividedBy(new BigNumber(19.2)).plus(new BigNumber(1)).toFixed(0);
     rainRange[index] = data;
   } else if (value >= 192 && value < 384) {
     const data = new BigNumber(value).minus(new BigNumber(192)).dividedBy(new BigNumber(12.8)).plus(new BigNumber(10)).toFixed(0);
@@ -512,6 +514,10 @@ initData();
   padding: 130px 20px 20px 20px;
   font-size: 36px;
   position: relative;
+  .scroll {
+    height: 1890px;
+    overflow: auto;
+  }
   .card-header {
     display: flex;
     justify-content: space-between;
@@ -588,6 +594,7 @@ initData();
     width: 1487px;
     min-height: 88px;
     background: url('@/assets/images/common/tr.png') no-repeat;
+    background-size: 100% 100%;
     display: flex;
     align-items: center;
     margin-top: 10px;

src/views/globalMap/RightMenu/WindMonitor/index.vue

@@ -594,7 +594,6 @@ onBeforeUnmount(() => {
   font-size: 36px;
   position: relative;
   color: #ffffff;
-  overflow: scroll;
 }
 .title {
   font-size: 60px;