xx_sw_dp/src/views/map/changeMap.vue

<template>
  <div>
    <div class="toolmap" :style="mapStore.sideMenu? `right:${windowRight}px`:`right:20px`">
      <div @click="setClass(0)" @mouseover="getTip('面雨量分布图')" @mouseout="closetip"
        :class="bkclick[0] ? 'divclick' : ''">
        <img src="../../assets/images/changeMap/mianyuliang.png" />
      </div>
      <div @click="setClass(1)" @mouseover="getTip('站点雨量图')" @mouseout="closetip" :class="bkclick[1] ? 'divclick' : ''">
        <img src="../../assets/images/changeMap/zhandian.png" />
      </div>
      <!-- <div @click="setClass(2)" @mouseover="getTip('分区雨量图')" @mouseout="closetip" :class="bkclick[2] ? 'divclick' : ''">
        <img src="../../assets/images/changeMap/fenqu.png" />
      </div> -->
      <div @click="setClass(3)" @mouseover="getTip('站点温度图')" @mouseout="closetip" :class="bkclick[3] ? 'divclick' : ''">
        <img src="../../assets/images/changeMap/wendu.png" />
      </div>
      <div @click="setClass(4)" @mouseover="getTip('站点风速风向图')" @mouseout="closetip"
        :class="bkclick[4] ? 'divclick' : ''">
        <img src="../../assets/images/changeMap/feng.png" />
      </div>
    </div>
    <div class="hover-info" :style="px" v-show="infoShow">
      {{ info }}
    </div>
    <div class="head-span" v-if="headInfoShow">
      <div style="font-size: 24px; font-weight: bold; color: #fff; text-align: center">{{ headInfo }} </div>
      <div style="
          color: #ffffff;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          margin-top: 9px;
          height: 30px;
          line-height: 30px;
          position: relative;
        " v-if="searchID != 3 && searchID != 4">
        <a-date-picker v-model:value="startData" :allowClear="false" format="MM月DD日" valueFormat="YYYY-MM-DD"
          :disabled-date="disabledDate" />
        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastDay"> </div>
          <div class="sanjiao-btn2" @click="nextDay"> </div>
        </div>

        <TimePicker v-model:value="startTime" format="H时" valueFormat="HH" :allowClear="false" @change="changeTime"
          :disabledHours="disabledHour" />

        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastTime"> </div>
          <div class="sanjiao-btn2" @click="nextTime"> </div>
        </div>
        <span style="margin-right: 20px">至</span>

        <a-date-picker v-model:value="endData" :allowClear="false" :disabled-date="disabledDate2" format="MM月DD日"
          valueFormat="YYYY-MM-DD" />

        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastDay2"> </div>
          <div class="sanjiao-btn2" @click="nextDay2"> </div>
        </div>

        <TimePicker v-model:value="endTime" format="H时" valueFormat="HH" :allowClear="false"
          :disabledHours="disabledHour2" />

        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastTime2"> </div>
          <div class="sanjiao-btn2" @click="nextTime2"> </div>
        </div>
        <img src="../../assets/images/changeMap/checktime.png" style="display: inline-block" @click="search" />
      </div>
      <div style="
          color: #ffffff;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          margin-top: 9px;
          height: 30px;
          line-height: 30px;
          position: relative;
        " v-if="searchID == 3 || searchID == 4">
        <a-date-picker v-model:value="endData" :allowClear="false" format="MM月DD日" valueFormat="YYYY-MM-DD" />
        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastDay3"> </div>
          <div class="sanjiao-btn2" @click="nextDay3"> </div>
        </div>

        <TimePicker v-model:value="endTime" format="H时" valueFormat="HH" :allowClear="false" />

        <div class="sanjiao-box">
          <div class="sanjiao-btn" @click="lastTime3"> </div>
          <div class="sanjiao-btn2" @click="nextTime3"> </div>
        </div>
        <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="`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>
      <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 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>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import moment from 'moment';
import { TimePicker } from 'ant-design-vue';
import eventBus from '/@/utils/eventBus';
import { useMapStore } from '/@/store/modules/map';
import { getColorVal, getWdColorVal } from '/@/utils/getcolor.js';
let windowRight = ref(440)
// eventBus.on('setWindowRight', (e) => {
//   windowRight.value = e
// });
const mapStore = useMapStore();
const emit = defineEmits(['changeMap']);
const bkclick = reactive([false, false, false, false, false]);
const info = ref('');
const infoShow = ref(false);
const px = ref('');
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 hour=e.hour
  let colors = [];
  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}`,
  //     },
  //   ];
  // }

  // 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;
    }
    if (i.style.split(':')[1] == mincolor) {
      minIndex = index;
    }
  });
  // console.log(maxIndex,minIndex,maxcolor,mincolor)
  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;
    }
    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();
const rainLegend = reactive([
  {
    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:#fa00fa',
    value: '100~250',
  },
  {
    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 disabledDate = (current) => {
  return current > moment(endData.value).valueOf();
};
const disabledDate2 = (current) => {
  return current < moment(startData.value).valueOf();
};
const disabledDate3 = (current) => {
  return current > moment().valueOf();
};
const disabledHour = () => {
  if (startData.value == endData.value) {
    let arr = [];
    for (let i = 0; i <= 23; i++) {
      if (i > endTime.value) {
        arr.push(i);
      }
    }
    return arr;
  }
};
const disabledHour2 = () => {
  if (startData.value == endData.value) {
    let arr = [];
    for (let i = 0; i <= 23; i++) {
      if (i < startTime.value) {
        arr.push(i);
      }
    }
    return arr;
  }
};
const disabledHour3 = () => {
  if (moment().format('YYYY-MM-DD') == endData.value) {
    let arr = [];
    for (let i = 0; i <= 23; i++) {
      if (i > moment().format('HH')) {
        arr.push(i);
      }
    }
    return arr;
  }
};
const lastDay = () => {
  startData.value = moment(startData.value).subtract(1, 'days').format('YYYY-MM-DD');
};
const nextDay = () => {
  if (moment(startData.value).format('YYYY-MM-DD').valueOf() < moment(endData.value).format('YYYY-MM-DD').valueOf()) {
    startData.value = moment(startData.value).add(1, 'days').format('YYYY-MM-DD');
  }
};
const lastDay2 = () => {
  if (moment(startData.value).format('YYYY-MM-DD').valueOf() < moment(endData.value).format('YYYY-MM-DD').valueOf()) {
    endData.value = moment(endData.value).subtract(1, 'days').format('YYYY-MM-DD');
  }
};
const nextDay3 = () => {
  // if(moment().format('YYYY-MM-DD').valueOf()!= moment(endData.value).format('YYYY-MM-DD').valueOf()){
  endData.value = moment(endData.value).add(1, 'days').format('YYYY-MM-DD');
  // }
};
const lastDay3 = () => {
  endData.value = moment(endData.value).subtract(1, 'days').format('YYYY-MM-DD');
};
const nextDay2 = () => {
  endData.value = moment(endData.value).add(1, 'days').format('YYYY-MM-DD');
};
const lastTime = () => {
  startTime.value = moment(startData.value + ' ' + startTime.value)
    .subtract(1, 'hours')
    .format('HH');
};
const nextTime = () => {
  if (
    moment(startData.value).format('YYYY-MM-DD').valueOf() == moment(endData.value).format('YYYY-MM-DD').valueOf() &&
    startTime.value == endTime.value
  ) {
  } else {
    startTime.value = moment(startData.value + ' ' + startTime.value)
      .add(1, 'hours')
      .format('HH');
  }
};
const lastTime2 = () => {
  if (
    moment(startData.value).format('YYYY-MM-DD').valueOf() == moment(endData.value).format('YYYY-MM-DD').valueOf() &&
    startTime.value == endTime.value
  ) {
  } else {
    endTime.value = moment(endData.value + ' ' + endTime.value)
      .subtract(1, 'hours')
      .format('HH');
  }
};
const nextTime2 = () => {
  endTime.value = moment(endData.value + ' ' + endTime.value)
    .add(1, 'hours')
    .format('HH');
};
const lastTime3 = () => {
  endTime.value = moment(endData.value + ' ' + endTime.value)
    .subtract(1, 'hours')
    .format('HH');
};
const nextTime3 = () => {
  // if( moment().format('YYYY-MM-DD').valueOf()== moment(endData.value).format('YYYY-MM-DD').valueOf()
  // &&moment().format('HH')== endTime.value){
  // }else{
  endTime.value = moment(endData.value + ' ' + endTime.value)
    .add(1, 'hours')
    .format('HH');
  // }
};

const startData = ref(moment().format('YYYY-MM-DD'));
const startTime = ref('08');
const endData = ref(moment().format('YYYY-MM-DD'));
const endTime = ref(moment().format('HH'));

const search = () => {
  // console.log(startData.value,startTime.value,endData.value,endTime.value,89)
  emit('changeMap', {
    flag: bkclick[searchID.value],
    maptype: searchID.value,
    start_time: startData.value + ' ' + startTime.value + ':00:00',
    end_time: endData.value + ' ' + endTime.value + ':00:00',
  });
};

onMounted(() => {
  // startData.value = moment().format('MM-DD')
  // endData.value = moment().format('MM-DD')
  // endTime.value=moment().format('hh')
  // console.log(endTime.value,)
});

const changeTime = (i) => {
  console.log(i, 7);
};
const searchID = ref();

const setClass = (i) => {
  // 初始时间
  startData.value = moment().format('YYYY-MM-DD');
  startTime.value = '08';
  endData.value = moment().format('YYYY-MM-DD');
  endTime.value = moment().format('HH');

  searchID.value = i;
  bkclick.forEach((item, index) => {
    if (i === index) {
      bkclick[i] = !bkclick[i];
    } else {
      bkclick[index] = 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', {
    flag: bkclick[searchID.value],
    maptype: searchID.value,
    start_time: startData.value + ' ' + startTime.value + ':00:00',
    end_time: endData.value + ' ' + endTime.value + ':00:00',
  });

  if (i == 0) {
    headInfo.value = '面雨量分布图';
  } else if (i == 1) {
    headInfo.value = '站点雨量图';
  } else if (i == 2) {
    headInfo.value = '分区雨量图';
  } else if (i == 3) {
    headInfo.value = '站点温度图';
  } else if (i == 4) {
    headInfo.value = '站点风速风向图';
  }
  if (bkclick.includes(true)) {
    headInfoShow.value = true;
  } else {
    headInfoShow.value = false;
  }
};
const getTip = (i) => {
  info.value = i;
  infoShow.value = true;
  if (mapStore.sideMenu) {
    if (i == '面雨量分布图') {
      px.value = ` right: ${windowRight.value+50}px;top: 400px;`;
    } else if (i == '站点雨量图') {
      px.value = ` right: ${windowRight.value+50}px;top: 430px;`;
    } else if (i == '分区雨量图') {
      px.value = ` right: ${windowRight.value+50}px;top: 450px;`;
    } else if (i == '站点温度图') {
      px.value = ` right: ${windowRight.value+50}px;top: 460px;`;
    } else if (i == '站点风速风向图') {
      px.value = ` right: ${windowRight.value+50}px;top: 490px;`;
    }
  } else {
    if (i == '面雨量分布图') {
      px.value = ` right: 70px;top: 400px;`;
    } else if (i == '站点雨量图') {
      px.value = ` right: 70px;top: 430px;`;
    } else if (i == '分区雨量图') {
      px.value = ` right: 70px;top: 450px;`;
    } else if (i == '站点温度图') {
      px.value = ` right: 70px;top: 460px;`;
    } else if (i == '站点风速风向图') {
      px.value = ` right: 70px;top: 490px;`;
    }
  }
};
const closetip = () => {
  infoShow.value = false;
};
</script>
<style lang="less" scoped>
.toolmap {
  position: absolute;
  right: 370px;
  top: 400px;
  width: 36px;
  // height: 140px;
  height: 125px;
  border-radius: 149px;
  opacity: 1;
  z-index: 10;

  /* 工具栏背景色 */
  background: rgba(10, 80, 110, 0.9);
  padding: 11px 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;

  div {
    width: 100%;
    text-align: center;

    img {
      display: inline-block;
      width: 20px;
      height: 20px;
    }
  }

  .line {
    width: 20px;
    height: 1px;
    transform: rotate(0deg);
    opacity: 1;

    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(42, 207, 240, 0) 0%, #27ceef 52%, rgba(49, 209, 240, 0) 100%);
  }
}

.divclick {
  background: #103357;
}

.hover-info {
  position: absolute;
  width: 120px;
  height: 30px;
  line-height: 30px;
  border-radius: 473px;
  opacity: 1;

  background: rgba(21, 50, 76, 0.7);
  font-family: Source Han Sans CN;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0em;

  color: #ffffff;
  z-index: 11;
}

.head-span {
  width: 427px;
  height: 92px;
  border-radius: 8px;
  opacity: 1;

  background: rgba(21, 50, 76, 0.7);
  position: absolute;
  top: 100px;
  right: 50%;
  transform: translateX(50%);
  z-index: 11;
  padding: 6px 10px;
  box-sizing: border-box;
}

.sanjiao-box {
  display: inline-block;
  height: 20px;
  margin-right: 15px;
  margin-left: 4px;

  .sanjiao-btn {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 5px;
    margin-top: 5px;

    cursor: pointer;
  }

  .sanjiao-btn2 {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
  }
}

:deep(.ant-input) {
  padding: 0;
  border: none;
  width: 70px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

:deep(.ant-time-picker) {
  padding: 0;
  border: none;
  width: 35px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

:deep(.ant-time-picker-input.ant-input) {
  width: 35px !important;
}

:deep(.ant-time-picker-icon) {
  visibility: hidden;
}

.class-legend {
  position: absolute;
  left: 470px;
  bottom: 50px;
  z-index: 10;
  box-shadow: 5px rgba(53, 53, 52, 0.5);

  div {
    min-width: 50px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #222;
    padding: 0 4px;
  }
}

.class-legendtwo {
  position: absolute;
  left: 470px;
  bottom: 50px;
  z-index: 10;
  box-shadow: 5px rgba(53, 53, 52, 0.5);

  div {
    min-width: 50px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #222;
  }

  &>div:last-child {
    border-radius: 0 0 25px 25px;
  }
}
</style>