大风监测、雨情监测调整

src/types/components.d.ts

@@ -13,10 +13,29 @@ declare module 'vue' {
     Dialog: typeof import('./../components/Dialog/index.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElText: typeof import('element-plus/es')['ElText']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FlvVideo: typeof import('./../components/FlvVideo/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -48,4 +67,7 @@ declare module 'vue' {
     VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div class="menu-content">
-    <div class="gradient-text title">雨情监控</div>
+    <div class="gradient-text title">雨情监测</div>
     <div class="card-header">
       <div class="title-box">水利站点降雨分布统计</div>
       <el-select

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

@@ -7,9 +7,9 @@
       </div>
 
       <div style="height: 1200px; overflow: auto">
-        <div style="margin-left: 30px">
+        <div style="margin-left: 30px;">
           <span>风流场</span>
-          <img :src="switchStatus ? switchOn : switchOff" style="margin-left: 30px" @click="switchControl" />
+          <img :src="switchStatus ? switchOn : switchOff" style="margin-left: 30px; cursor: pointer;" @click="switchControl" />
         </div>
         <div class="box-left">
           <el-select
@@ -26,7 +26,7 @@
         </div>
 
         <div class="forecast—box">
-          <div style="padding: 40px 40px">
+          <div class="text-box">
             瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
             瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
             瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
@@ -153,6 +153,48 @@
             </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="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>
+              <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>
+              <div class="text6">{{ analyzeData.GDP }}</div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -165,13 +207,24 @@ import { getHelicopterList } from '@/api/globalMap/Helicopter';
 import switchOff from '@/assets/images/map/rightMenu/windMonitor/switch-off.png';
 import switchOn from '@/assets/images/map/rightMenu/windMonitor/switch-on.png';
 import WindSpeedRank from '@/views/globalMap/RightMenu/WindMonitor/windSpeedRank.vue';
+import { getRainfallTownNumCount } from '@/api/globalMap/rainMonitor';
+import { useDebounce } from '@vueuse/core';
+import BigNumber from 'bignumber.js';
+import { debounce } from '@/utils';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { wind_time } = toRefs<any>(proxy?.useDict('wind_time'));
 const selectedTime = ref();
 const switchStatus = ref(false);
+const rainRange = reactive(['1.6', '50']);
+const analyzeData = ref({
+  GDP: 0,
+  areaSize: 0,
+  populationSize: 0,
+  town_num: 0
+});
 const startLeft = ref(0);
-const endLeft = ref(1000);
+const endLeft = ref(1351);
 const lineRef = ref();
 const containerScale = inject('containerScale');
 let showMore = ref(false);
@@ -260,7 +313,7 @@ const handleMouseMove = (event) => {
   if (mouseStatus.type === 'start') {
     startLeft.value = value >= 0 ? value : 0;
   } else {
-    endLeft.value = value <= 1152 ? value : 1152;
+    endLeft.value = value <= 1351 ? value : 1351;
   }
 };
 
@@ -272,6 +325,55 @@ const handleMouseUp = (event) => {
   mouseStatus.left = 0;
 };
 
+const getRainRange = debounce(
+  () => {
+    getRainfallTownNumCount({
+      query: {
+        start_num: rainRange[0],
+        end_num: rainRange[1]
+      }
+    }).then((res) => {
+      analyzeData.value = res.rows[0];
+    });
+  },
+  1000,
+  false
+);
+getRainRange();
+watch(startLeft, () => {
+  getNewRange(0, startLeft.value);
+  getRainRange();
+});
+watch(endLeft, () => {
+  getNewRange(1, endLeft.value);
+  getRainRange();
+});
+const getNewRange = (index, value) => {
+
+  if (value >= 0 && value < 193) {
+    const data = new BigNumber(value).dividedBy(new BigNumber(49.4)).toFixed(1.6);
+    rainRange[index] = data;
+  } else if (value >= 193 && value < 386) {
+    const data = new BigNumber(value).minus(new BigNumber(193)).dividedBy(new BigNumber(36.4)).plus(new BigNumber(5.5)).toFixed(1);
+    rainRange[index] = data;
+  } else if (value >= 386 && value < 579) {
+    const data = new BigNumber(value).minus(new BigNumber(386)).dividedBy(new BigNumber(25.3)).plus(new BigNumber(10.8)).toFixed(1);
+    rainRange[index] = data;
+  } else if (value >= 579 && value < 772) {
+    const data = new BigNumber(value).minus(new BigNumber(579)).dividedBy(new BigNumber(26.4)).plus(new BigNumber(17.2)).toFixed(1);
+    rainRange[index] = data;
+  } else if (value >= 772 && value < 965) {
+    const data = new BigNumber(value).minus(new BigNumber(772)).dividedBy(new BigNumber(23.5)).plus(new BigNumber(24.5)).toFixed(1);
+    rainRange[index] = data;
+  } else if (value >= 965 && value < 1158) {
+    const data = new BigNumber(value).minus(new BigNumber(965)).dividedBy(new BigNumber(21.9)).plus(new BigNumber(32.7)).toFixed(1);
+    rainRange[index] = data;
+  } else if (value >= 1158 && value < 1351) {
+    const data = new BigNumber(value).minus(new BigNumber(1158)).dividedBy(new BigNumber(22.7)).plus(new BigNumber(41.5)).toFixed(1);
+    rainRange[index] = data;
+  }
+};
+
 const handleShowMore = () => {
   showMore.value = true;
 };
@@ -341,7 +443,12 @@ onMounted(() => {
   background-size: 100% 100%;
   height: 312px;
   width: 1497px;
-  overflow: scroll;
+  margin-left: 30px;
+  padding: 20px 40px;
+  .text-box {
+    height: 272px;
+    overflow: auto;
+  }
 }
 .box-left {
   display: flex;
@@ -521,6 +628,9 @@ onMounted(() => {
     width: 230px;
   }
 }
+.rank1,
+.rank2,
+.rank3,
 .rank-other {
   width: 50px;
   height: 48px;
@@ -546,4 +656,83 @@ onMounted(() => {
 .rank-other {
   background: url('@/assets/images/map/rightMenu/rainMonitor/other.png') no-repeat;
 }
+.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 {
+      margin-left: 20px;
+      .text-box {
+        display: flex;
+        margin-bottom: 20px;
+        .text1 {
+          font-size: 32px;
+          color: #ffffff;
+        }
+        .text2 {
+          font-size: 32px;
+          color: #a7ccdf;
+          margin-left: 5px;
+        }
+      }
+      .text3,
+      .text4,
+      .text5,
+      .text6 {
+        font-size: 38px;
+        font-family: BEBAS-1;
+        /* 设置字体透明 */
+        color: transparent;
+        /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+        -webkit-background-clip: text;
+        /* 非Webkit内核浏览器需要使用标准前缀 */
+        background-clip: text;
+        /* 把当前元素设置为行内块，以便能够应用背景 */
+        display: inline-block;
+      }
+      .text3 {
+        background-image: linear-gradient(to bottom, #ffffff 25%, #e58400 100%);
+      }
+      .text4 {
+        background-image: linear-gradient(to bottom, #ffffff 25%, #6fe695 100%);
+      }
+      .text5 {
+        background-image: linear-gradient(to bottom, #ffffff 25%, #00fde8 100%);
+      }
+      .text6 {
+        background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
+      }
+    }
+    .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;
+    }
+  }
+}
 </style>