src/views/map/Map.vue

@@ -36,6 +36,7 @@
   <!-- <detailsInfo /> -->
 </template>
 <script>
+import moment from 'moment';
 import Dialog from '/@/components/Dialog/index.vue';
 import mapDialog from '/@/components/Dialog/mapDialog.vue';
 import { defineComponent, ref, watch, onBeforeUnmount } from 'vue';
@@ -171,10 +172,11 @@ export default defineComponent({
                   }
                 });
               });
+              let hour=moment(val.end_time).diff(moment(val.start_time), 'hours')
               rainDataRange.value = { max: Math.max(...arr), min: Math.min(...arr) };
-              eventBus.emit('rainLegend2', { max: Math.max(...arr), min: Math.min(...arr) });
+              eventBus.emit('rainLegend2', { max: Math.max(...arr), min: Math.min(...arr),hour });
               // 更新点
-              uprainAreaLayer();
+              uprainAreaLayer(hour);
             }
           });
         } else if (val.maptype == 2) {
@@ -316,27 +318,79 @@ export default defineComponent({
     };
 
     // 更新面雨量分布图
-    const uprainAreaLayer = () => {
+    const uprainAreaLayer = (hour) => { 
       let colors = [];
-      if (rainDataRange.value.max > 0.5) {
-        let level1 = Number(((rainDataRange.value.max - 0.5) / 3 + 0.5).toFixed(2));
-        let level2 = Number((((rainDataRange.value.max - 0.5) / 3) * 2 + 0.5).toFixed(2));
+      if(hour<=1){
         colors = [
-          { min: rainDataRange.value.max, max: 9999, color: 'rgba(0,0,0,0)' },
-          { min: level2, max: rainDataRange.value.max, color: '#3660bd' },
-          { min: level1, max: level2, color: '#638cc9' },
-          { min: 0.5, max: level1, color: '#7d8fbb' },
+          { min: 5000, max: 9999, color: 'rgba(0,0,0,0)' },
+          { min: 100, max: 5000, color: '#fb00ff' },
+          { min: 50, max: 100, color: '#0000f6' },
+          { min: 25, max: 50, color: '#65b7f9' },
+          { min: 10, max: 25, color: '#3fb937' },
+          { min: 5, max: 10, color: '#6cda69' },
+          { min: 2.5, max: 5, color: '#b1f99d' },
+          { min: 0.5, max: 2.5, color: '#d7f9cd' },
           { min: 0, max: 0.5, color: 'rgba(0,0,0,0)' },
         ];
-      } else {
+      }else if(hour>1 && hour<=6){
         colors = [
-          { min: 7, max: 999, color: 'rgba(0,0,0,0)' },
-          { min: 4.83, max: 7, color: '#3660bd' },
-          { min: 2.67, max: 4.83, color: '#638cc9' },
-          { min: 0.5, max: 2.67, color: '#7d8fbb' },
+          { min: 5000, max: 9999, color: 'rgba(0,0,0,0)' },
+          { min: 250, max: 5000, color: '#820041' },
+          { min: 100, max: 250, color: '#ff00ff' },
+          { min: 50, max: 100, color: '#0004fe' },
+          { min: 25, max: 50, color: '#62b6ff' },
+          { min: 10, max: 25, color: '#35bf40' },
+          { min: 5, max: 10, color: '#6cda6e' },
+          { min: 0.5, max: 5, color: '#b2f8a1' },
+          { min: 0, max: 0.5, color: 'rgba(0,0,0,0)' },
+        ];
+      }else if(hour>6 && hour<=24){
+        colors = [
+          { min: 5000, max: 9999, color: 'rgba(0,0,0,0)' },
+          { min: 250, max: 5000, color: '#7e0240' },
+          { min: 100, max: 250, color: '#fa00fb' },
+          { min: 50, max: 100, color: '#0300fe' },
+          { min: 25, max: 50, color: '#5fb8ff' },
+          { min: 10, max: 25, color: '#3abc39' },
+          { min: 0.5, max: 10, color: '#a4f48c' },
+          { min: 0, max: 0.5, color: 'rgba(0,0,0,0)' },
+        ];
+      }else if(hour>24){
+        colors = [
+          { min: 8000, max: 9999, color: 'rgba(0,0,0,0)' },
+          { min: 1500, max: 8000, color: '#980400' },
+          { min: 1000, max: 1500, color: '#e70109' },
+          { min: 600, max: 1000, color: '#ff6700' },
+          { min: 400, max: 600, color: '#ffa603' },
+          { min: 250, max: 400, color: '#7d033d' },
+          { min: 100, max: 250, color: '#ff00f7' },
+          { min: 50, max: 100, color: '#0500ff' },
+          { min: 25, max: 50, color: '#5db8ff' },
+          { min: 10, max: 25, color: '#40b640' },
+          { min: 0.5, max: 10, color: '#a4f391' },
           { min: 0, max: 0.5, color: 'rgba(0,0,0,0)' },
         ];
       }
+      // let colors = [];
+      // if (rainDataRange.value.max > 0.5) {
+      //   let level1 = Number(((rainDataRange.value.max - 0.5) / 3 + 0.5).toFixed(2));
+      //   let level2 = Number((((rainDataRange.value.max - 0.5) / 3) * 2 + 0.5).toFixed(2));
+      //   colors = [
+      //     { min: rainDataRange.value.max, max: 9999, color: 'rgba(0,0,0,0)' },
+      //     { min: level2, max: rainDataRange.value.max, color: '#3660bd' },
+      //     { min: level1, max: level2, color: '#638cc9' },
+      //     { min: 0.5, max: level1, color: '#7d8fbb' },
+      //     { min: 0, max: 0.5, color: 'rgba(0,0,0,0)' },
+      //   ];
+      // } else {
+      //   colors = [
+      //     { min: 7, max: 999, color: 'rgba(0,0,0,0)' },
+      //     { min: 4.83, max: 7, color: '#3660bd' },
+      //     { min: 2.67, max: 4.83, color: '#638cc9' },
+      //     { min: 0.5, max: 2.67, color: '#7d8fbb' },
+      //     { min: 0, max: 0.5, color: 'rgba(0,0,0,0)' },
+      //   ];
+      // }
       // const colors = [
       // { min: 7, max: 999, color: "rgba(0,0,0,0)" },
       // { min: 4.83, max: 7, color: "#3660bd" },
@@ -352,7 +406,6 @@ export default defineComponent({
       // // { min: 1, max: 10, color: "#a6f28e" },
       // // { min: 0, max: 1, color: "rgb(234, 234, 234)" },
       // ]
-      // window.mapConfig.isosurfaceUrl='http://106.12.170.138:4001/isosurface'
       rainData.value.forEach((i) => {
         if (Number(i.value)) {
           i.value = Number(i.value);

src/views/map/changeMap.vue

@@ -92,11 +92,13 @@
         <img src="../../assets/images/changeMap/checktime.png" style="display: inline-block" @click="search" />
       </div>
     </div>
+    <!-- 面雨量分布 -->
     <div class="class-legend" v-show="mapLgendShow3">
       <div style="border-radius: 25px 25px 0 0; background-color: #3f3dbd; color: #fff">mm</div>
-      <div v-for="item in rainLegendNow2" :style="item.style">{{ item.value }}</div>
+      <div v-for="item in rainLegendNow2" :style="`background:${item.color}`">{{ item.min }}~{{ item.max }}</div>
       <div style="border-radius: 0 0 25px 25px; background-color: #fff; color: #000; font-size: 12px">0</div>
     </div>
+    <!-- 站点雨量 -->
     <div class="class-legend" v-show="mapLgendShow">
       <div style="border-radius: 25px 25px 0 0; background-color: #3f3dbd; color: #fff">mm</div>
       <div v-for="item in rainLegendNow" :style="item.style">{{ item.value }}</div>
@@ -135,29 +137,84 @@ const mapLgendShow3 = ref(false);
 
 const rainLegendNow2 = ref();
 eventBus.on('rainLegend2', (e) => {
+  let hour=e.hour
   let colors = [];
-  if (Number(e.max) > 0.5) {
-    let level1 = Number(((e.max - 0.5) / 3 + 0.5).toFixed(2))
-    let level2 = Number((((e.max - 0.5) / 3) * 2 + 0.5).toFixed(2))
-    colors = [
-      {
-        style: 'background:#7d8fbb',
-        value: `0.5~${level1}`,
-      },
-      {
-        style: 'background:#638cc9',
-        value: `${level1}~${level2}`,
-      },
-      {
-        style: 'background:#3660bd',
-        value: `${level2}~${e.max}`,
-      },
-    ];
-  }
+  if(hour<=1){
+        colors = [
+          { min: 100, max: 9999, color: '#fb00ff' },
+          { min: 50, max: 100, color: '#0000f6' },
+          { min: 25, max: 50, color: '#65b7f9' },
+          { min: 10, max: 25, color: '#3fb937' },
+          { min: 5, max: 10, color: '#6cda69' },
+          { min: 2.5, max: 5, color: '#b1f99d' },
+          { min: 0, max: 2.5, color: '#d7f9cd' },
+        ];
+      }else if(hour>1 && hour<=6){
+        colors = [
+          { min: 250, max: 9999, color: '#820041' },
+          { min: 100, max: 250, color: '#ff00ff' },
+          { min: 50, max: 100, color: '#0004fe' },
+          { min: 25, max: 50, color: '#62b6ff' },
+          { min: 10, max: 25, color: '#35bf40' },
+          { min: 5, max: 10, color: '#6cda6e' },
+          { min: 0, max: 5, color: '#b2f8a1' },
+        ];
+      }else if(hour>6 && hour<=24){
+        colors = [
+          { min: 250, max: 9999, color: '#7e0240' },
+          { min: 100, max: 250, color: '#fa00fb' },
+          { min: 50, max: 100, color: '#0300fe' },
+          { min: 25, max: 50, color: '#5fb8ff' },
+          { min: 10, max: 25, color: '#3abc39' },
+          { min: 0, max: 10, color: '#a4f48c' },
+        ];
+      }else if(hour>24){
+        colors = [
+          { min: 1500, max: 9999, color: '#980400' },
+          { min: 1000, max: 1500, color: '#e70109' },
+          { min: 600, max: 1000, color: '#ff6700' },
+          { min: 400, max: 600, color: '#ffa603' },
+          { min: 250, max: 400, color: '#7d033d' },
+          { min: 100, max: 250, color: '#ff00f7' },
+          { min: 50, max: 100, color: '#0500ff' },
+          { min: 25, max: 50, color: '#5db8ff' },
+          { min: 10, max: 25, color: '#40b640' },
+          { min: 0, max: 10, color: '#a4f391' },
+        ];
+      }
+      // 取范围
+      let minIndex=0
+      let maxIndex=0
+      colors.forEach((i,index)=>{
+        if(e.min<i.max&&e.min>=i.min){
+          minIndex=index
+        }
+        if(e.max<i.max&&e.max>=i.min){
+          maxIndex=index
+        }
+      })
+      rainLegendNow2.value = colors
+  // if (Number(e.max) > 0.5) {
+  //   let level1 = Number(((e.max - 0.5) / 3 + 0.5).toFixed(2))
+  //   let level2 = Number((((e.max - 0.5) / 3) * 2 + 0.5).toFixed(2))
+  //   colors = [
+  //     {
+  //       style: 'background:#7d8fbb',
+  //       value: `0.5~${level1}`,
+  //     },
+  //     {
+  //       style: 'background:#638cc9',
+  //       value: `${level1}~${level2}`,
+  //     },
+  //     {
+  //       style: 'background:#3660bd',
+  //       value: `${level2}~${e.max}`,
+  //     },
+  //   ];
+  // }
 
-  // console.log(maxIndex,minIndex,maxcolor,mincolor)
-  rainLegendNow2.value = colors;
-  rainLegendNow2.value.reverse();
+  // rainLegendNow2.value = colors;
+  // rainLegendNow2.value.reverse();
 });
 eventBus.on('rainLegend', (e) => {
   let maxcolor = getColorVal(e.max);