大风监测、雨情监测调整

src/components/HKVideo/index2.vue

@@ -190,7 +190,7 @@ const getData = (data) => {
   emits('change', data);
 };
 const getData2 = () => {
-  getVideoTagInfo({ video_code: props.dot_data.id }).then((res) => {
+  getVideoTagInfo({ video_code: props.dot_data.video_code }).then((res) => {
     emits('change', res.data);
   });
   showCollectDialog.value = false;

src/types/components.d.ts

@@ -29,10 +29,13 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
     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']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -43,9 +46,8 @@ declare module 'vue' {
     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']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -55,15 +57,17 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
@@ -79,9 +83,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

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

@@ -1,6 +1,6 @@
 <template>
   <div class="menu-content">
-    <div class="gradient-text common-dialog-title2">雨情监控</div>
+    <div class="gradient-text common-dialog-title2">雨情监测</div>
     <div class="card-header">
       <div class="title-box">水利站点降雨分布统计</div>
       <el-select
@@ -37,19 +37,17 @@
       <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>
+          <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 class="td">
           <el-select
@@ -205,7 +203,7 @@ import RainRank from '@/views/globalMap/RightMenu/RainMonitor/RainRank.vue';
 import * as XLSX from 'xlsx';
 import { getNextAreaInfo } from '@/api/common';
 import BigNumber from 'bignumber.js';
-import { useDebounce } from '@vueuse/core';
+import { debounce } from '@/utils';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type } = toRefs<any>(proxy?.useDict('district_type'));
@@ -392,25 +390,29 @@ const handleMouseUp = (event) => {
   mouseStatus.downLeft = 0;
   mouseStatus.left = 0;
 };
-const getRainRange = () => {
-  getRainfallTownNumCount({
-    query: {
-      start_num: rainRange[0],
-      end_num: rainRange[1],
-      timeOption: timeOption.value
-    }
-  }).then((res) => {
-    analyzeData.value = res.rows[0];
-  });
-};
-useDebounce(getRainRange, 1000);
+const getRainRange = debounce(
+  () => {
+    getRainfallTownNumCount({
+      query: {
+        start_num: rainRange[0],
+        end_num: rainRange[1],
+        timeOption: timeOption.value
+      }
+    }).then((res) => {
+      analyzeData.value = res.rows[0];
+    });
+  },
+  1000,
+  false
+);
+getRainRange();
 watch(startLeft, () => {
   getNewRange(0, startLeft.value);
-  useDebounceFn(getRainRange, 1000);
+  getRainRange();
 });
 watch(endLeft, () => {
   getNewRange(1, endLeft.value);
-  useDebounceFn(getRainRange, 1000);
+  getRainRange();
 });
 const getNewRange = (index, value) => {
   if (value >= 0 && value < 192) {
@@ -595,40 +597,39 @@ initData();
     overflow-y: auto;
   }
   .tr {
-    height: 32px;
+    min-height: 32px;
     background: url('@/assets/images/common/tr.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
     align-items: center;
-    margin-top: 10px;
-    .td {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
+    margin-top: 6px;
+    padding: 2px 19px;
   }
   .gradient-text2 {
     color: transparent !important;
   }
-  .td,
-  .td2 {
-    font-size: 14px;
+  .td {
+    font-size: 12px;
+    color: #edfaff;
     display: flex;
     justify-content: center;
     align-items: center;
-    flex: 1;
-    //&:nth-child(6),
-    //&:nth-child(9) {
-    //  width: 193px;
-    //  flex: unset;
-    //}
-  }
-  .td {
-    color: #a7ccdf;
-  }
-  .td2 {
-    color: #edfaff;
-    font-family: BEBAS-1;
+    flex: unset;
+    &:nth-child(1) {
+      width: 45px;
+    }
+    &:nth-child(2) {
+      width: 100px;
+    }
+    &:nth-child(3) {
+      width: 90px;
+    }
+    &:nth-child(4) {
+      flex: 1;
+    }
+    &:nth-child(5) {
+      width: 90px;
+    }
   }
   .down-icon {
     display: inline-block;

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

@@ -9,7 +9,7 @@
       <div style="height: 1400px; overflow: auto">
         <div style="margin-left: 10px; color: #ffffff">
           <span>风流场</span>
-          <img :src="switchStatus ? switchOn : switchOff" style="margin-left: 10px" @click="switchControl" />
+          <img :src="switchStatus ? switchOn : switchOff" style="margin-left: 10px; cursor: pointer" @click="switchControl" />
         </div>
         <div class="box-left">
           <el-select
@@ -26,7 +26,7 @@
         </div>
 
         <div class="forecast—box">
-          <div style="padding: 13px 13px; color: #ffffff">
+          <div class="text-box">
             瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
             瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
             瞬时风站点排行（过去24小时）瞬时风站点排行（过去24小时）
@@ -54,7 +54,7 @@
           <div class="common-table">
             <div class="table-header">
               <div class="td">类型</div>
-              <div class="td" style="margin-left: -40px">
+              <div class="td">
                 <el-select
                   v-model="selectedLevel"
                   placeholder="县区"
@@ -203,26 +203,31 @@
 
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue';
-// import { getHelicopterList } from '@/api/globalMap/Helicopter';
+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 startLeft = ref(0);
-const endLeft = ref(1000);
-const lineRef = ref();
-const containerScale = inject('containerScale');
-let showMore = 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(1351);
+const lineRef = ref();
+const containerScale = inject('containerScale');
+let showMore = ref(false);
 const mouseStatus = reactive({
   move: false,
   type: '',
@@ -308,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;
   }
 };
 
@@ -320,6 +325,54 @@ 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;
 };
@@ -660,7 +713,6 @@ onMounted(() => {
   }
 }
 
-
 //.title {
 //  font-size: 60px;
 //  position: absolute;
@@ -672,7 +724,13 @@ onMounted(() => {
   background-size: 100% 100%;
   height: 114px;
   width: 546px;
-  overflow: scroll;
+  margin-left: 10px;
+  padding: 10px 14px;
+  .text-box {
+    color: #ffffff;
+    height: 94px;
+    overflow: auto;
+  }
 }
 .box-left {
   display: flex;
@@ -709,23 +767,24 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex: unset;
   &:nth-child(1) {
     width: 45px;
   }
   &:nth-child(2) {
-    width: 70px;
+    width: 100px;
   }
   &:nth-child(3) {
-    width: 90px;
-  }
-  &:nth-child(4) {
     flex: 1;
   }
-  &:nth-child(5) {
-    width: 21px;
+  &:nth-child(4) {
+    width: 90px;
   }
 }
 
+.rank1,
+.rank2,
+.rank3,
 .rank-other {
   width: 16px;
   height: 16px;
@@ -751,4 +810,82 @@ onMounted(() => {
 .rank-other {
   background: url('@/assets/images/map/rightMenu/rainMonitor/other.png') no-repeat;
 }
+.data-box2 {
+  width: 550px;
+  height: 90px;
+  background: url('@/assets/images/map/rightMenu/rainMonitor/dataBox.png') no-repeat bottom;
+  background-size: 550px 46px;
+  display: flex;
+  padding: 0 27px;
+  align-items: center;
+  .data-item {
+    display: flex;
+    flex: 1;
+    .item-right {
+      margin-left: 5px;
+      .text-box {
+        display: flex;
+        margin-bottom: 5px;
+        .text1 {
+          font-size: 14px;
+          color: #ffffff;
+        }
+        .text2 {
+          font-size: 12px;
+          color: #a7ccdf;
+          margin-left: 5px;
+        }
+      }
+      .text3,
+      .text4,
+      .text5,
+      .text6 {
+        font-size: 14px;
+        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 {
+      width: 52px !important;
+      height: 47px !important;
+      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;
+    }
+    .icon1,
+    .icon2,
+    .icon3,
+    .icon4 {
+      width: 56px;
+      height: 51px;
+      background-size: 100% 100%;
+    }
+  }
+}
 </style>