雨情监测 影响分析

src/api/globalMap/rainMonitor.ts

@@ -13,6 +13,23 @@ export const getRainfallStatisticsCount = (params) => {
 export const getRainfallRange = (params) => {
   return request({
     url: '/api/gateway/v2/get_rainfall_range',
+    method: 'post',
+    data: params
+  });
+};
+
+// 降雨量排行
+export const getRainfallcodeDetails = (params) => {
+  return request({
+    url: '/api/gateway/v2/get_rainfall_code_details',
+    method: 'get',
+    params: params
+  });
+};
+// 影响分析
+export const getRainfallTownNumCount = (params) => {
+  return request({
+    url: '/api/gateway/v2/get_rainfall_town_num_count',
     method: 'get',
     params: params
   });

src/assets/styles/index.scss

@@ -240,7 +240,8 @@ aside {
   /* 设置字体透明 */
   color: transparent;
   /* 设置线性渐变，从红色渐变到蓝色 */
-  background-image: linear-gradient(to bottom, #fff 40%, #5CC4FA 50%, #40A2E7 100%);
+  //background-image: linear-gradient(to bottom, #fff 40%, #5CC4FA 50%, #40A2E7 100%);
+  background-image: linear-gradient(to bottom, #ffffff 30%, #edf7fe 50%, #5cc4fa 70%, #40a2e7 100%);
   /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
   -webkit-background-clip: text;
   /* 非Webkit内核浏览器需要使用标准前缀 */
@@ -264,6 +265,20 @@ aside {
   font-family: 'YouSheBiaoTiHei';
 }
 
+.gradient-text3 {
+  /* 设置字体透明 */
+  color: transparent;
+  /* 设置线性渐变，从红色渐变到蓝色 */
+  background-image: linear-gradient(to bottom, #ffffff 30%, #edf7fe 50%, #5cc4fa 70%, #40a2e7 100%);
+  /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+  -webkit-background-clip: text;
+  /* 非Webkit内核浏览器需要使用标准前缀 */
+  background-clip: text;
+  /* 把当前元素设置为行内块，以便能够应用背景 */
+  display: inline-block;
+  font-family: 'YouSheBiaoTiHei';
+}
+
 ::-webkit-scrollbar-thumb {
   background-color: #227dfe !important;
 }

src/views/globalMap/RightMenu/RainMonitor.vue

@@ -71,19 +71,115 @@
         </div>
       </div>
     </div>
-    <div class="data-box"></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">
+          <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="
+              (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>
+      <div class="box">
+        <div class="text1">雨量范围</div>
+        <div class="text2">25-50</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>
+          <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>
+          <div class="text3">{{ 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>
+          <div class="text3">{{ 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>
+          <div class="text3">{{ analyzeData.GDP }}</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { option6 } from './echartOptions';
 import { graphic } from 'echarts';
-import { getRainfallRange, getRainfallStatisticsCount } from '@/api/globalMap/rainMonitor';
+import { getRainfallRange, getRainfallStatisticsCount, getRainfallTownNumCount } from '@/api/globalMap/rainMonitor';
 
 const timeOptions = reactive([
-  { name: '24小时', value: '24' },
-  { name: '36小时', value: '36' },
-  { name: '48小时', value: '48' }
+  { name: '1小时', value: '1' },
+  { name: '3小时', value: '3' },
+  { name: '6小时', value: '6' },
+  { name: '12小时', value: '12' },
+  { name: '24小时', value: '24' }
 ]);
 // 水利站点降雨分布统计
 let timeValue = ref('24');
@@ -142,8 +238,8 @@ const handleGetRainfallStatisticsCount = () => {
 // true 降序
 const rangeData = ref([]);
 const queryParams = reactive({
-  pageNum: 1,
-  pageSize: 5,
+  current: 1,
+  size: 5,
   sort: 'desc'
 });
 const getRankClass = (rank) => {
@@ -159,7 +255,6 @@ const getRankClass = (rank) => {
 };
 const handleGetRainfallRange = () => {
   getRainfallRange(queryParams).then((res) => {
-    res.rows.splice(5, res.rows.length - 5);
     rangeData.value = res.rows;
   });
 };
@@ -171,9 +266,70 @@ const handleSort = () => {
   }
   handleGetRainfallRange();
 };
+// 影响分析
+const rainRange = reactive([25, 50]);
+const analyzeData = ref({
+  GDP: 0,
+  areaSize: 0,
+  populationSize: 0,
+  town_num: 0
+});
+const lineRef = ref();
+const startLeft = ref(351.5);
+const endLeft = ref(543.5);
+const mouseStatus = reactive({
+  move: false,
+  type: '',
+  downLeft: 0,
+  left: 0
+});
+const handleMouseDown = (event, type) => {
+  // 获取目标元素的边界框
+  const rect = lineRef.value.getBoundingClientRect();
+  // 获取鼠标位置
+  const mouseX = event.clientX;
+  mouseStatus.move = true;
+  mouseStatus.type = type;
+  // mouseStatus.downLeft = mouseX - rect.left;
+  mouseStatus.downLeft = mouseX;
+  if (type === 'start') {
+    mouseStatus.left = startLeft.value;
+  } else {
+    mouseStatus.left = endLeft.value;
+  }
+  console.log('按下', mouseStatus.downLeft);
+};
+const handleMouseMove = (event) => {
+  if (!mouseStatus.move) return;
+  // 获取鼠标位置
+  const mouseX = event.clientX;
+  console.log(mouseX);
+  let distance = mouseX - mouseStatus.downLeft;
+  console.log(distance);
+  if (mouseStatus.type === 'start') {
+    startLeft.value = mouseStatus.left + distance;
+  } else {
+    endLeft.value = mouseStatus.left + distance;
+  }
+};
+const handleMouseUp = () => {
+  mouseStatus.move = false;
+  mouseStatus.type = '';
+  mouseStatus.downLeft = 0;
+  mouseStatus.left = 0;
+};
+const getRainRange = () => {
+  getRainfallTownNumCount({
+    start_num: rainRange[0],
+    end_num: rainRange[1]
+  }).then((res) => {
+    analyzeData.value = res.rows[0];
+  });
+};
 const initData = () => {
   handleGetRainfallStatisticsCount();
   handleGetRainfallRange();
+  getRainRange();
 };
 initData();
 </script>
@@ -344,6 +500,141 @@ initData();
     background: url('@/assets/images/map/rightMenu/rainMonitor/other.png') no-repeat;
   }
 }
+.data-box {
+  width: 1495px;
+  height: 172px;
+  background: url('@/assets/images/map/rightMenu/rainMonitor/box1.png') no-repeat;
+  margin-left: 28px;
+  color: #a7ccdf;
+  padding-left: 50px;
+  padding-top: 20px;
+  font-size: 32px;
+  display: flex;
+  .line1 {
+    display: flex;
+    .line-item {
+      width: 192.46px;
+    }
+  }
+  .line2 {
+    display: flex;
+    margin: 10px 0;
+    position: relative;
+    .dot {
+      width: 65px;
+      height: 65px;
+      background: url('@/assets/images/map/rightMenu/rainMonitor/dot.png') no-repeat;
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .line-item {
+      width: 192px;
+      height: 30px;
+      &:nth-child(1) {
+        border-bottom-left-radius: 30px;
+        border-top-left-radius: 30px;
+        background-color: #a8ccdd;
+      }
+      &:nth-child(2) {
+        background-color: #2b81ff;
+      }
+      &:nth-child(3) {
+        background-color: #00fce6;
+      }
+      &:nth-child(4) {
+        background-color: #97d664;
+      }
+      &:nth-child(5) {
+        background-color: #ffaf00;
+      }
+      &:nth-child(6) {
+        border-bottom-right-radius: 30px;
+        border-top-right-radius: 30px;
+        background-color: #ff2e3b;
+      }
+    }
+  }
+  .line3 {
+    display: flex;
+    .line-item {
+      width: 192.46px;
+      &:last-child {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+  .box {
+    width: 203px;
+    height: 119px;
+    background: url('@/assets/images/map/rightMenu/rainMonitor/box2.png') no-repeat;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: 40px;
+    margin-top: 5px;
+    .text1 {
+      font-size: 32px;
+      color: #a7ccdf;
+    }
+    .text2 {
+      font-size: 38px;
+      font-family: BEBAS-1;
+      color: transparent;
+      background-image: linear-gradient(to bottom, #ffffff 20%, #d2fff8 50%, #6bffec 70%, #00fde8 100%);
+      /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+      -webkit-background-clip: text;
+      /* 非Webkit内核浏览器需要使用标准前缀 */
+      background-clip: text;
+      /* 把当前元素设置为行内块，以便能够应用背景 */
+      display: inline-block;
+    }
+  }
+}
+.data-box2 {
+  width: 1492px;
+  height: 200px;
+  background: url('@/assets/images/map/rightMenu/rainMonitor/dataBox.png') no-repeat;
+  background-size: 1492px 123px;
+  background-position: bottom;
+  margin-left: 28px;
+  display: flex;
+  padding: 0 70px;
+  align-items: center;
+  .data-item {
+    display: flex;
+    flex: 1;
+    .item-right {
+      .text-box {
+
+      }
+    }
+    .icon1,
+    .icon2,
+    .icon3,
+    .icon4 {
+      width: 152px;
+      height: 138px;
+    }
+    .icon1 {
+      width: 141px;
+      height: 126px;
+      background: url('@/assets/images/map/rightMenu/rainMonitor/icon1.png') no-repeat;
+    }
+    .icon2 {
+      background: url('@/assets/images/map/rightMenu/rainMonitor/icon2.png') no-repeat;
+    }
+    .icon3 {
+      background: url('@/assets/images/map/rightMenu/rainMonitor/icon3.png') no-repeat;
+    }
+    .icon4 {
+      background: url('@/assets/images/map/rightMenu/rainMonitor/icon4.png') no-repeat;
+    }
+  }
+}
 .title {
   font-size: 60px;
   position: absolute;

src/views/globalMap/RightMenu/index.vue

@@ -10,7 +10,7 @@
             @click="clickMenu(index)"
           >
             <div :class="item.meta?.icon + ' ' + item.meta?.icon + '_checked'"></div>
-            <div class="gradient-text text">{{ item.name }}</div>
+            <div class="gradient-text3 text">{{ item.name }}</div>
           </div>
         </div>
         <div v-show="menuState.menuData.length > 0" :class="menuState.showMenu ? 'right-btn' : 'left-btn'" @click="clickContractMenu"></div>

src/views/globalMap/index.vue

@@ -3,7 +3,7 @@
     <div :class="isComponent ? 'global-map' : 'global-map bg'">
       <MapLogical v-if="activeMap === 'logical'" :map-data="mapData" />
 <!--      <YMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" :activeMap="activeMap" />-->
-<!--      <YztMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :pointType="pointType" />-->
+      <YztMap v-else-if="['satellite2', 'satellite3'].includes(activeMap)" ref="map2Ref" :active-map="activeMap" :pointType="pointType" />
       <Map v-else ref="mapRef" :active-map="activeMap" :pointType="pointType" />
       <!--左侧菜单-->
       <LeftMenu style="position: absolute; top: 20px; left: 20px" @click-menu="clickMenu" @select-search-marker="selectSearchMarker" />