颜色修改

src/utils/getcolor.js

@@ -9,24 +9,31 @@
 const getColorVal = (val)=>{
     let color;
     switch (true) {
-        case val >= 0 && val < 0.5:
-            color = "#fff";
+        case val >= 0 && val < 1:
+            color = "#fffdff";
             break;
-        case val >= 0.5 && val <= 2.67:
-            color = "#7d8fbb";
+        case val >= 1 && val <= 9.9:
+            color = "#a6f28e";
             break;
-        case val >= 2.67 && val <= 4.83:
-            color = "#638cc9";
+        case val >= 10 && val <= 24.9:
+            color = "#3db93d";
             break;
-        case val >= 4.83 && val <= 7:
-            color = "#3660bd";
+        case val >= 25 && val <= 49.9:
+            color = "#61b8ff";
+            break;
+        case val >=50&&val<=99.9:
+            color = "#0000fe";
+            break;
+        case val >=100&&val<=250:
+            color = "#f900fb";
             break;
         case val >250:
-            color = "#fff";
+            color = "#81013d";
             break;
         default:
-            color = "#fff";
+            color = "#eaeaea";
             break;
+
     }
     return color
 }

src/views/map/Map.vue

@@ -99,6 +99,7 @@ export default defineComponent({
       dialogvisable.value = i;
     };
     const rainData = ref([]);
+    const rainDataRange = ref({});
     const rainDatafq = ref([
       { name: '羊村—米林', value: 0 },
       { name: '米林—尼西—玉松', value: 0 },
@@ -166,7 +167,8 @@ export default defineComponent({
                   }
                 });
               });
-              eventBus.emit('rainLegend', {max:Math.max(...arr),min:Math.min(...arr)});
+              rainDataRange.value={max:Math.max(...arr),min:Math.min(...arr)}
+              eventBus.emit('rainLegend2', {max:Math.max(...arr),min:Math.min(...arr)});
               // 更新点
               uprainAreaLayer()
             }
@@ -308,23 +310,44 @@ export default defineComponent({
         }
       });
     };
-    const 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)" },
-    // { min: 2000, max: 99999, color: "#ffffff" },
-    // { min: 250, max: 2000, color: "#84003f" },
-    // { min: 100, max: 250, color: "#fa00fa" },
-    // { min: 50, max: 100, color: "#0000fe" },
-    // { min: 25, max: 50, color: "#61b8ff" },
-    // { min: 10, max: 25, color: "#3db93d" },
-    // { min: 1, max: 10, color: "#a6f28e" },
-    // { min: 0, max: 1, color: "rgb(234, 234, 234)" },
-    ]
+    
     // 更新面雨量分布图
     const uprainAreaLayer = () => {
+      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" },
+      // { 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)" },
+      // // { min: 2000, max: 99999, color: "#ffffff" },
+      // // { min: 250, max: 2000, color: "#84003f" },
+      // // { min: 100, max: 250, color: "#fa00fa" },
+      // // { min: 50, max: 100, color: "#0000fe" },
+      // // { min: 25, max: 50, color: "#61b8ff" },
+      // // { min: 10, max: 25, color: "#3db93d" },
+      // // { 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)){

src/views/map/changeMap.vue

@@ -92,13 +92,18 @@
         <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 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 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>
-      <div style="border-radius: 0 0 25px 25px ;background-color: #fff;color: #000;font-size: 12px;">0</div>
+      <div style="border-radius: 0 0 25px 25px; background-color: #eaeaea; color: #000; font-size: 12px">无数据</div>
     </div>
     <div class="class-legendtwo" v-show="mapLgendShow2">
-      <div style="border-radius: 25px 25px 0 0;background-color: #3f3dbd;color: #fff;">℃</div>
+      <div style="border-radius: 25px 25px 0 0; background-color: #3f3dbd; color: #fff">℃</div>
       <div v-for="item in wdLegendNow" :style="item.style">{{ item.value }}</div>
       <!-- <div style="border-radius: 0 0 25px 25px ;background-color: #3f3dbd;color: #fff;">0</div> -->
     </div>
@@ -123,124 +128,167 @@ const headInfo = ref('');
 const headInfoShow = ref(false);
 const mapLgendShow = ref(false);
 const mapLgendShow2 = ref(false);
+const mapLgendShow3 = ref(false);
+
+const rainLegendNow2 = ref();
+eventBus.on('rainLegend2', (e) => {
+  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}`,
+      },
+    ];
+  }
 
+  // console.log(maxIndex,minIndex,maxcolor,mincolor)
+  rainLegendNow2.value = colors;
+  rainLegendNow2.value.reverse();
+});
 eventBus.on('rainLegend', (e) => {
-  let maxcolor= getColorVal(e.max)
-  let mincolor= getColorVal(e.min)
-  let maxIndex=0
-  let minIndex=0
-  rainLegend.forEach((i,index)=>{
-    if(i.style.split(':')[1]==maxcolor){
-      maxIndex=index
+  let maxcolor = getColorVal(e.max);
+  let mincolor = getColorVal(e.min);
+  let maxIndex = 0;
+  let minIndex = 0;
+  rainLegend.forEach((i, index) => {
+    if (i.style.split(':')[1] == maxcolor) {
+      maxIndex = index;
     }
-    if(i.style.split(':')[1]==mincolor){
-      minIndex=index
+    if (i.style.split(':')[1] == mincolor) {
+      minIndex = index;
     }
-  })
+  });
   // console.log(maxIndex,minIndex,maxcolor,mincolor)
-  rainLegendNow.value=rainLegend.slice(minIndex,maxIndex+1)
-  rainLegendNow.value.reverse()
-    });
+  rainLegendNow.value = rainLegend.slice(minIndex, maxIndex + 1);
+  rainLegendNow.value.reverse();
+});
 eventBus.on('wdLegend', (e) => {
-  let maxcolor= getWdColorVal(e.max)
-  let mincolor= getWdColorVal(e.min)
-  let maxIndex=0
-  let minIndex=0
-  wdLegend.forEach((i,index)=>{
-    if(i.style.split(':')[1]==maxcolor){
-      maxIndex=index
+  let maxcolor = getWdColorVal(e.max);
+  let mincolor = getWdColorVal(e.min);
+  let maxIndex = 0;
+  let minIndex = 0;
+  wdLegend.forEach((i, index) => {
+    if (i.style.split(':')[1] == maxcolor) {
+      maxIndex = index;
     }
-    if(i.style.split(':')[1]==mincolor){
-      minIndex=index
+    if (i.style.split(':')[1] == mincolor) {
+      minIndex = index;
     }
-  })
-  console.log(maxIndex,minIndex,maxcolor,mincolor)
-  wdLegendNow.value=wdLegend.slice(minIndex,maxIndex+1)
-  console.log(wdLegendNow.value,908)
-  wdLegendNow.value.reverse()
-    });
-const rainLegendNow=ref()
+  });
+  console.log(maxIndex, minIndex, maxcolor, mincolor);
+  wdLegendNow.value = wdLegend.slice(minIndex, maxIndex + 1);
+  console.log(wdLegendNow.value, 908);
+  wdLegendNow.value.reverse();
+});
+const rainLegendNow = ref();
 const rainLegend = reactive([
   {
-    style: 'background:#7d8fbb',
-    value: '0.5~2.67',
+    style: 'background:#fffdff',
+    value: '0~1',
+  },
+  {
+    style: 'background:#a6f28e',
+    value: '1~9.9',
+  },
+  {
+    style: 'background:#3db93d',
+    value: '10~24.9',
+  },
+  {
+    style: 'background:#61b8ff',
+    value: '25~49.9',
+  },
+  {
+    style: 'background:#0000fe',
+    value: '50~99.9',
   },
   {
-    style: 'background:#638cc9',
-    value: '2.67~4.83',
+    style: 'background:#fa00fa',
+    value: '100~250',
   },
   {
-    style: 'background:#3660bd',
-    value: '4.83~7',
+    style: 'background:#810041',
+    value: '>250',
+  },
+]);
+const wdLegendNow = ref([]);
+const wdLegend = reactive([
+  {
+    style: 'background:#032b8b',
+    value: '<-12',
+  },
+  {
+    style: 'background:#195da7',
+    value: '-12~-8',
+  },
+  {
+    style: 'background:#1d75d4',
+    value: '-8~-4',
+  },
+  {
+    style: 'background:#3f9fe9',
+    value: '-4~0',
+  },
+  {
+    style: 'background:#82d1ff',
+    value: '0~4',
+  },
+  {
+    style: 'background:#abe9f8',
+    value: '4~8',
+  },
+  {
+    style: 'background:#cffcff',
+    value: '8~12',
+  },
+  {
+    style: 'background:#f3fdee',
+    value: '12~16',
+  },
+  {
+    style: 'background:#ccffcc',
+    value: '16~20',
+  },
+  {
+    style: 'background:#bffb91',
+    value: '20~24',
+  },
+  {
+    style: 'background:#fdfb96',
+    value: '24~28',
+  },
+  {
+    style: 'background:#fef2c2',
+    value: '28~32',
+  },
+  {
+    style: 'background:#fecda1',
+    value: '32~35',
+  },
+  {
+    style: 'background:#f99782',
+    value: '35~37',
+  },
+  {
+    style: 'background:#f55900',
+    value: '37~40',
+  },
+  {
+    style: 'background:#e60101',
+    value: '>40',
   },
 ]);
-const wdLegendNow=ref([])
-const wdLegend=reactive([
-    {
-        "style": "background:#032b8b",
-        "value": "<-12"
-    },
-    {
-        "style": "background:#195da7",
-        "value": "-12~-8"
-    },
-    {
-        "style": "background:#1d75d4",
-        "value": "-8~-4"
-    },
-    {
-        "style": "background:#3f9fe9",
-        "value": "-4~0"
-    },
-    {
-        "style": "background:#82d1ff",
-        "value": "0~4"
-    },
-    {
-        "style": "background:#abe9f8",
-        "value": "4~8"
-    },
-    {
-        "style": "background:#cffcff",
-        "value": "8~12"
-    },
-    {
-        "style": "background:#f3fdee",
-        "value": "12~16"
-    },
-    {
-        "style": "background:#ccffcc",
-        "value": "16~20"
-    },
-    {
-        "style": "background:#bffb91",
-        "value": "20~24"
-    },
-    {
-        "style": "background:#fdfb96",
-        "value": "24~28"
-    },
-    {
-        "style": "background:#fef2c2",
-        "value": "28~32"
-    },
-    {
-        "style": "background:#fecda1",
-        "value": "32~35"
-    },
-    {
-        "style": "background:#f99782",
-        "value": "35~37"
-    },
-    {
-        "style": "background:#f55900",
-        "value": "37~40"
-    },
-    {
-        "style": "background:#e60101",
-        "value": ">40"
-    }
-])
 
 const disabledDate = (current) => {
   return current > moment(endData.value).valueOf();
@@ -383,7 +431,6 @@ const changeTime = (i) => {
 const searchID = ref();
 
 const setClass = (i) => {
-
   // 初始时间
   startData.value = moment().format('YYYY-MM-DD');
   startTime.value = '08';
@@ -398,25 +445,42 @@ const setClass = (i) => {
       bkclick[index] = false;
     }
   });
-  if(i==0||i==1||i==2){
-    mapLgendShow.value=true
-    mapLgendShow2.value=false
-  if(bkclick[i]){
-    mapLgendShow.value=true
-  }else{
-    mapLgendShow.value=false
-  }}else if(i==3){
-    mapLgendShow.value=false
-    mapLgendShow2.value=true
-    if(bkclick[i]){
-    mapLgendShow2.value=true
-  }else{
-    mapLgendShow.value=false
-    mapLgendShow2.value=false
-  }
-  }else{
-    mapLgendShow.value=false
-    mapLgendShow2.value=false
+
+  if (i == 0 || i == 1 || i == 2) {
+    if (i == 0) {
+      mapLgendShow3.value = true;
+      mapLgendShow.value = false;
+      mapLgendShow2.value = false;
+      if (bkclick[i]) {
+        mapLgendShow3.value = true;
+      } else {
+        mapLgendShow3.value = false;
+      }
+    } else {
+      mapLgendShow.value = true;
+      mapLgendShow2.value = false;
+      mapLgendShow3.value = false;
+      if (bkclick[i]) {
+        mapLgendShow.value = true;
+      } else {
+        mapLgendShow.value = false;
+      }
+    }
+  } else if (i == 3) {
+    mapLgendShow3.value = false;
+    mapLgendShow.value = false;
+    mapLgendShow2.value = true;
+    if (bkclick[i]) {
+      mapLgendShow2.value = true;
+    } else {
+      mapLgendShow.value = false;
+      mapLgendShow2.value = false;
+      mapLgendShow3.value = false;
+    }
+  } else {
+    mapLgendShow.value = false;
+    mapLgendShow2.value = false;
+    mapLgendShow3.value = false;
   }
   // eventBus.emit('legendColor', { maptype: searchID.value, flag: bkclick[searchID.value] });
   emit('changeMap', {
@@ -448,30 +512,29 @@ const getTip = (i) => {
   infoShow.value = true;
   if (mapStore.sideMenu) {
     if (i == '面雨量分布图') {
-    px.value = ' right: 500px;top: 370px;';
-  } else if (i == '站点雨量图') {
-    px.value = ' right: 500px;top: 400px;';
-  } else if (i == '分区雨量图') {
-    px.value = ' right: 500px;top: 420px;';
-  } else if (i == '站点温度图') {
-    px.value = ' right: 500px;top: 450px;';
-  } else if (i == '站点风速风向图') {
-    px.value = ' right: 500px;top: 480px;';
-  }
-  }else{
+      px.value = ' right: 500px;top: 370px;';
+    } else if (i == '站点雨量图') {
+      px.value = ' right: 500px;top: 400px;';
+    } else if (i == '分区雨量图') {
+      px.value = ' right: 500px;top: 420px;';
+    } else if (i == '站点温度图') {
+      px.value = ' right: 500px;top: 450px;';
+    } else if (i == '站点风速风向图') {
+      px.value = ' right: 500px;top: 480px;';
+    }
+  } else {
     if (i == '面雨量分布图') {
-    px.value = ' right: 70px;top: 370px;';
-  } else if (i == '站点雨量图') {
-    px.value = ' right: 70px;top: 400px;';
-  } else if (i == '分区雨量图') {
-    px.value = ' right: 70px;top: 420px;';
-  } else if (i == '站点温度图') {
-    px.value = ' right: 70px;top: 450px;';
-  } else if (i == '站点风速风向图') {
-    px.value = ' right: 70px;top: 480px;';
-  }
+      px.value = ' right: 70px;top: 370px;';
+    } else if (i == '站点雨量图') {
+      px.value = ' right: 70px;top: 400px;';
+    } else if (i == '分区雨量图') {
+      px.value = ' right: 70px;top: 420px;';
+    } else if (i == '站点温度图') {
+      px.value = ' right: 70px;top: 450px;';
+    } else if (i == '站点风速风向图') {
+      px.value = ' right: 70px;top: 480px;';
+    }
   }
-
 };
 const closetip = () => {
   infoShow.value = false;
@@ -609,6 +672,7 @@ const closetip = () => {
     line-height: 25px;
     text-align: center;
     color: #222;
+    padding: 0 4px;
   }
 }
 .class-legendtwo {
@@ -624,8 +688,8 @@ const closetip = () => {
     text-align: center;
     color: #222;
   }
-  &>div:last-child{
-    border-radius:0 0 25px 25px;
+  & > div:last-child {
+    border-radius: 0 0 25px 25px;
   }
 }
 </style>