xx_sw_dp/src/views/meteorological/components/monitor.vue

<template>
  <div>
    <div class="main" @mouseleave="boxMouseleave" @mouseenter="boxMouseenter">
      <div class="main_in">
        <weatherTitle :title="'气象站监测'" refreshName="monitorRefreshName" />
        <div>
          <div class="re-ul">
            <vue3-seamless-scroll :list="monitoringData.monitoring" class="scroll" :step="0.2" :hover="true" :wheel="true">
              <div
                class="re-list"
                @click="
                  () => {
                    openModal(item.stcd), setActive(item);
                  }
                "
                v-for="(item, index) in monitoringData.monitoring"
                :key="index"
              >
                <div>
                  <div>{{ item.st_name }}</div>
                  <div>{{ item.time }}</div>
                </div>
                <div>
                  <div>
                    <img src="../../../assets/images/weatheHome/mo-icon1.png" />
                    {{ item.temp.v }}℃
                  </div>
                  <div>
                    <img src="../../../assets/images/weatheHome/mo-icon2.png" />
                    {{ item.hum.v }}%</div
                  >
                  <div>
                    <img src="../../../assets/images/weatheHome/mo-icon3.png" />
                    {{ item.ws.v }}m/s {{ setWd(item.wd.v) }}</div
                  >
                </div>
              </div>
            </vue3-seamless-scroll>
          </div>
        </div>
        <div class="main-title" @click="openModal(stcd)">
          <div>
            <span>{{ title }}&nbsp;</span>近24小时气象监测站过程线</div
          >
        </div>
        <monitorEcharts
          :temperatureCharts="monitoringData.temperatureCharts"
          :windSpeeCharts="monitoringData.windSpeeCharts"
          :windDirection="monitoringData.windDirection"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance, onBeforeUnmount, onMounted, reactive } from 'vue';

import weatherTitle from '../../../components/Title/weatherTitle.vue';
import { useMapStore } from '/@/store/modules/map';
import monitorEcharts from './monitorEcharts.vue';
import { getWeathMonitoring, getMonitorInfo } from '/@/api/swHome/index';
import { useBasicStore } from '/@/store/modules/basicData';
import { obtainingStations, getNowTime, getSensor } from '/@/utils/fnUtils.ts';
// 滚动插件
import { getAppEnvConfig } from '/@/utils/env';
const { VITE_GLOB_UPDATE_TIME } = getAppEnvConfig();
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import eventBus from '/@/utils/eventBus';
eventBus.on('monitorRefreshName', () => {
  getWeathMonitoringData();
});
const basicStore = useBasicStore();
const stcd = ref();
const mapStore = useMapStore();
const openModal = (item) => {
  mapStore.setstInfo({ stcd: item });
};
let monitoringData = reactive({
  monitoring: [],
  stDetailArrStoreData: [],
  activeObtaining: {},
  temperatureCharts: {
    name: [],
    data: [],
  },
  windSpeeCharts: {
    name: [],
    data: [],
  },
  windDirection: {
    name: [],
    data: [],
  },
});
// 鼠标移出
function boxMouseleave() {
  // console.log('鼠标移出');
  circulateData();
}
// 鼠标移入
function boxMouseenter() {
  // console.log('鼠标移入');
  if (circulateFn) {
    clearInterval(circulateFn);
  }
}
// 点击列表
function setActive(item) {
  // console.log(item);
  stcd.value = item.stcd;
  getObtainingStations(item);
}
// 循环轮播数据
let circulateNum = 1;
let circulateFn = null;
function circulateData() {
  circulateFn = setInterval(async () => {
    setActive(monitoringData.monitoring[circulateNum]);
    if (circulateNum == monitoringData.monitoring.length - 1) {
      circulateNum = 0;
    } else {
      circulateNum += 1;
    }
  }, VITE_GLOB_UPDATE_TIME);
}
// 处理风向
function setWd(wds) {
  let wd = wds*1
  if (wd >= 348.76 || wd <= 11.25) {
    return 'N';
  }
  if (wd >= 11.26 && wd <= 33.75) {
    return 'NNE';
  }
  if (wd >= 33.76 && wd <= 56.25) {
    return 'NE';
  }
  if (wd >= 56.26 && wd <= 78.75) {
    return 'ENE';
  }
  if (wd >= 78.76 && wd <= 101.25) {
    return 'E';
  }
  if (wd >= 101.26 && wd <= 123.75) {
    return 'ESE';
  }
  if (wd >= 123.76 && wd <= 146.25) {
    return 'SE';
  }
  if (wd >= 146.26 && wd <= 168.75) {
    return 'SSE';
  }
  if (wd >= 168.76 && wd <= 191.25) {
    return 'S';
  }
  if (wd >= 191.26 && wd <= 213.75) {
    return 'SSW';
  }
  if (wd >= 213.76 && wd <= 236.25) {
    return 'SW';
  }
  if (wd >= 236.26 && wd <= 258.75) {
    return 'WSW';
  }
  if (wd >= 258.76 && wd <= 281.25) {
    return 'W';
  }
  if (wd >= 281.76 && wd <= 303.75) {
    return 'WNW';
  }
  if (wd >= 303.76 && wd <= 326.25) {
    return 'NW';
  }
  if (wd >= 326.26 && wd <= 348.75) {
    return 'NNW';
  }
  return '-'
}
// 获取温度数据
async function setActiveEcharts(activeSensor) {
  let formData = {
    start_time: getNowTime(2),
    senid: activeSensor,
    end_time: getNowTime(1),
  };
  let data = await getMonitorInfo(formData).then((res) => {
    return res.data;
  });
  monitoringData.temperatureCharts.name = [];
  monitoringData.temperatureCharts.data = [];
  let temperatureCharts = {
    name: [],
    data: [],
  };
  data.forEach((element) => {
    temperatureCharts.name.push(element.time);
    temperatureCharts.data.push(element.factv);
  });
  monitoringData.temperatureCharts = temperatureCharts;
}
// 获取风速信息
async function getWindSpeed(activeSensor) {
  let formData = {
    start_time: getNowTime(2),
    senid: activeSensor,
    end_time: getNowTime(1),
  };
  let data = await getMonitorInfo(formData).then((res) => {
    return res.data;
  });
  // windSpeeCharts
  monitoringData.windSpeeCharts.name = [];
  monitoringData.windSpeeCharts.data = [];
  let windSpeeCharts = {
    name: [],
    data: [],
  };
  data.forEach((element) => {
    windSpeeCharts.name.push(element.time);
    windSpeeCharts.data.push(element.factv);
  });
  monitoringData.windSpeeCharts = windSpeeCharts;
}
async function getWindDirection(activeSensor) {
  let formData = {
    start_time: getNowTime(2),
    senid: activeSensor,
    end_time: getNowTime(1),
  };
  let data = await getMonitorInfo(formData).then((res) => {
    return res.data;
  });
  let windDirection = {
    name: [],
    data: [],
  };
  data.forEach((element) => {
    windDirection.name.push(element.time);
    windDirection.data.push(element.factv);
  });
  monitoringData.windDirection.name = [];
  monitoringData.windDirection.data = [];
  monitoringData.windDirection = windDirection;
}
// 获取气象监测列表数据
function getWeathMonitoringData() {
  getWeathMonitoring().then((res) => {
    monitoringData.monitoring = res.data;
    // 筛选当前数据测站信息
    getObtainingStations(res.data[0]);
    stcd.value = res.data[0].stcd;
    circulateData();
  });
}
let title = ref('');
// 筛选测站和传感器数据
function getObtainingStations(data) {
  setActiveEcharts(data.temp.senid);
  getWindSpeed(data.ws.senid);
  getWindDirection(data.wd.senid);
  title.value = data.st_name;
  // if (monitoringData.stDetailArrStoreData.length > 0) {
  //   monitoringData.activeObtaining = obtainingStations(monitoringData.stDetailArrStoreData, data.stcd);
  //   // 根据当前测站获取传感器信息
  //   let activeSensor = getSensor(monitoringData.activeObtaining, '温度');
  //   setActiveEcharts(activeSensor);
  // } else {
  //   setTimeout(() => {
  //     getObtainingStations(data);
  //   }, 500);
  // }
}
// 监听测站基础数据是否请求回来
// const subBasicStore = basicStore.$subscribe((mutation: any, state: any) => {
//   if (Object.keys(state.stDetailArrStore).length != 0) {
//     monitoringData.stDetailArrStoreData = state.stDetailArrStore;
//     // setActiveEcharts();
//     subBasicStore();
//   }
// });
onMounted(() => {
  if (Object.keys(basicStore.getStDetailArrStore).length != 0) {
    monitoringData.stDetailArrStoreData = basicStore.getStDetailArrStore;
  }
  getWeathMonitoringData();
});
onBeforeUnmount(() => {
  if (circulateFn) {
    clearInterval(circulateFn);
  }
});
// 获取气象监测信息
</script>
<style lang="less" scoped>
.main {
  box-sizing: border-box;
  padding: 2px;
  border-radius: 0px 30px 0px 30px;
  background-image: linear-gradient(200deg, rgba(40, 165, 255, 0.9) 9%, rgba(100, 255, 255, 0) 34%, rgba(40, 126, 255, 0) 66%, #28a5ff 100%);
}

.main_in {
  width: 100%;
  height: 100%;
  border-radius: 0px 30px 0px 30px;
  background: rgba(6, 37, 70, 0.9);
}
//
.re-ul {
  // height: 46vh;
  // height: 500px;
  padding: 20px;
  padding-bottom: 0px;
  overflow: auto;
  margin-bottom: 20px;
}
.scroll {
  height: 480px;
  overflow: hidden;
}
.re-list {
  cursor: pointer;
  background-color: rgba(0, 139, 246, 0.1);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  & > div:nth-child(1) {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    div:nth-child(1) {
      font-size: 14px;
      font-weight: 500;
      color: #fff;
    }
    div:nth-child(2) {
      font-size: 12px;
      color: #4d7dc6;
    }
  }
  & > div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    div {
      font-size: 18px;
      background: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      img {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
}
.main-title {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 6px 20px;
  color: #dffeff;
  font-size: 16px;
  background: linear-gradient(90deg, rgba(40, 126, 255, 0.16) 0%, rgba(40, 126, 255, 0) 100%);
  margin-left: 8px;
  span {
    color: linear-gradient(0deg, #00f7ff 0%, #007ff6 100%);
    background: linear-gradient(0deg, #fbf70e 0%, #f4af10 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 16px;
  }
  margin-bottom: 20px;
}
</style>