sagaclound-sagacare-sk/src/views/weather/index.vue

<template>
  <div class="weather-box">
    <template v-if="weatherKey == 'sunny'">
      <sunny></sunny>
    </template>
    <template v-if="weatherKey == 'ran'">
      <ran></ran>
    </template>
    <template v-if="weatherKey == 'snow'">
      <snow></snow>
    </template>
    <template v-if="weatherKey == 'clound'">
      <clound></clound>
    </template>

    <div class="weather">
      <div class="weather-top">
        <div class="logo">
          <img src="/skImage/weather/logo.png" alt="" />
        </div>
        <div class="weather-left">
          <div class="b-time">
            <span>北京时间</span>
            <span>{{ nowTime }}</span>
          </div>
          <div class="b-time">
            <span>首尔时间</span>
            <span>{{ sTime }}</span>
          </div>
          <div class="weather-detail">
            <div class="d-top">
              <img :src="'/skImage/weather/' + logonIcon" alt="" />
              <span>{{ temperature }} ℃</span>
            </div>
            <div class="d-bottom">
              <span>{{ nowDate }}</span>
              <span>{{ week }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="env-box">
        <div class="env-item env-box-bg">
          <div class="env-icon">
            <img
              :src="
                weatherKey == 'sunny'
                  ? '/skImage/weather/温度.png'
                  : '/skImage/weather/温度.png'
              "
              alt=""
            />
            <span>温度</span>
          </div>
          <div class="env-text">{{ envObj.Tdb }}</div>
          <div class="env-rate">℃</div>
        </div>
        <div class="env-item env-box-bg">
          <div class="env-icon">
            <img
              :src="
                weatherKey == 'sunny'
                  ? '/skImage/weather/湿度.png'
                  : '/skImage/weather/湿度.png'
              "
              alt=""
            />
            <span>湿度</span>
          </div>
          <div class="env-text">{{ envObj.RH }}</div>
          <div class="env-rate">%</div>
        </div>
        <div class="env-item env-box-bg">
          <div class="env-icon">
            <img
              :src="
                weatherKey == 'sunny'
                  ? '/skImage/weather/甲醛.png'
                  : '/skImage/weather/甲醛.png'
              "
              alt=""
            />
            <span>甲醛</span>
          </div>
          <div class="env-text">{{ envObj.HCHO }}</div>
          <div class="env-rate">mg/m³</div>
        </div>
        <div class="env-item env-box-bg">
          <div class="env-icon">
            <img
              :src="
                weatherKey == 'sunny'
                  ? '/skImage/weather/pm.png'
                  : '/skImage/weather/pm.png'
              "
              alt=""
            />
            <span>PM2.5</span>
          </div>
          <div class="env-text">{{ envObj.PM2d5 }}</div>
          <div class="env-rate">ug/m³</div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script lang="ts">
import $ from "jquery";
import { nextTick } from "vue";
// import { getWeather } from "@/apis/envmonitor.ts";
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
} from "vue";
import ran from "./rain.vue"; // 雨
import clound from "./cloud.vue"; //  云
import snow from "./snow.vue"; //  雪
import sunny from "./sunny.vue"; //  晴
import { getWeather, queryEnvCurrent } from "@/apis/envmonitor";
import { formatEnergyDate, getWeek } from "@/utils";
import { useRouter } from "vue-router";
export default defineComponent({
  components: {
    ran,
    clound,
    snow,
    sunny,
  },
  setup(props) {
    const router = useRouter();
    let weatherData: any = [
      {
        text: "云",
        type: "clound",
        logonIcon: "阴.png",
      },
      {
        text: "雨",
        type: "rain",
        logonIcon: "雨.png",
      },
      {
        text: "雪",
        type: "snow",
        logonIcon: "雪.png",
      },
      {
        text: "晴",
        type: "sunny",
        logonIcon: "晴.png",
      },
    ];
    let currentData: any = [];
    let envObj: any = {
      Tdb: "0", // 温度
      RH: "0", //湿度
      HCHO: "0", //甲醛
      PM2d5: "0",
    };
    let intevell: any = null;
    let timer: any = null;
    const proxyData = reactive({
      weatherData: weatherData,
      envObj: envObj,
      temperature: "",
      weatherKey: "sunny",
      logonIcon: "阴.png",
      currentData: currentData,
      nowTime: formatEnergyDate()[2],
      sTime: formatEnergyDate(2)[2],
      nowDate: formatEnergyDate()[0],
      intevell: intevell,
      week: getWeek(),
      // 设置现在时间
      setNowDate() {
        proxyData.intevell = setInterval(() => {
          let timeArr: any = formatEnergyDate();
          proxyData.nowTime = timeArr[2];
          proxyData.nowDate = timeArr[0];
          let timeArr1: any = formatEnergyDate(2);
          proxyData.sTime = timeArr1[2];
          proxyData.week = getWeek();
        }, 1000);
      },
      // 设置天气key的值
      setWeatherKey(content: any) {
        if (content.code <= 3) {
          proxyData.weatherKey = "sunny";
          proxyData.logonIcon = "晴.png";
        } else if (content.code >= 10 && content.code <= 19) {
          proxyData.weatherKey = "rain";
          proxyData.logonIcon = "雨.png";
        } else if (content.code >= 20 && content.code <= 25) {
          proxyData.weatherKey = "snow";
          proxyData.logonIcon = "雪.png";
        } else {
          if (content.code == "38") {
            proxyData.weatherKey = "sunny";
            proxyData.logonIcon = "晴.png";
          } else {
            proxyData.weatherKey = "clound";
            proxyData.logonIcon = "阴.png";
          }
        }
      },
      // 获取天气数据
      getWeatherData() {
        getWeather().then((res) => {
          let resResult: any = res;
          let content: any = resResult.content;
          proxyData.temperature = content.temperature;
          proxyData.setWeatherKey(content);
        });
      },
      timer: timer,
      setTimer(timeLen: any = 600000) {
        proxyData.timer = setInterval(() => {
          proxyData.setEnvData();
          proxyData.queryEnvCurrent();
        }, timeLen);
      },
      // 设置环境数据
      setEnvData() {
        proxyData.envObj = {
          Tdb: "0", // 温度
          RH: "0", //湿度
          HCHO: "0", //甲醛
          PM2d5: "0",
        };
        proxyData.currentData.map((item: any) => {
          if (item.code == "Tdb") {
            item.data = item.data ? item.data.toFixed(1) : "--";
          } else if (item.code == "RH") {
            item.data = item.data ? item.data.toFixed(0) : "--";
          } else if (item.code == "PM2d5") {
            item.data = item.data ? item.data.toFixed(0) : "--";
          } else {
            item.data = item.data ? item.data.toFixed(2) : "--";
          }

          proxyData.envObj[item.code] = item.data;
        });
      },
      // 获取环境数据
      queryEnvCurrent() {
        queryEnvCurrent()
          .then((res) => {
            let resResult: any = res;
            if (resResult.result == "success") {
              proxyData.currentData = resResult.data || [];
            } else {
              proxyData.currentData = [];
            }
            proxyData.setEnvData();
          })
          .catch((error: any) => {
            proxyData.currentData = [];
          });
      },
      changePage() {
        let times: any = setTimeout(() => {
          clearTimeout(times);
          router.push({ path: "/home" });
        }, 300000);
      },
    });
    onBeforeUnmount(() => {
      clearInterval(proxyData.intevell);
      clearInterval(proxyData.timer);
    });
    onMounted(() => {
      proxyData.setNowDate();
      // 获取天气数据
      proxyData.getWeatherData();
      // 获取环境数据
      proxyData.queryEnvCurrent();
      // proxyData.setTimer();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
  
<style lang="scss" scoped>
.weather-box {
  position: relative;
  width: 100%;
  height: 100%;
  .weather {
    position: absolute;
    box-sizing: border-box;
    padding: 80px 40px;
    padding-bottom: 0;
    width: 100%;
    left: 0;
    top: 0;
  }
  .env-box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 7.8vh;
    .env-item {
      box-sizing: border-box;
      padding: 9.2vh 4.4vw 14vh 4.4vw;
      width: 24%;
      // opacity: 0.3;
      border-radius: 32px;
      background: rgba(255, 255, 255, 0.5);
      .env-icon {
        text-align: center;
        padding-bottom: 50px;
        img {
          width: 100px;
          display: inline-block;
          vertical-align: middle;
        }
        span {
          display: inline-block;
          margin-left: 20px;
          vertical-align: middle;
          font-size: 60px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 60px;
          color: rgba(255, 255, 255, 1);
        }
      }
      .env-text {
        text-align: center;
        font-size: 130px;
        line-height: 160px;
        font-weight: 700;
        letter-spacing: 0px;
        color: rgba(255, 255, 255, 1);
      }
      .env-rate {
        padding-top: 80px;
        font-size: 60px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 0px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
      }
      &:nth-child(2) {
        img {
          width: 72px;
        }
      }
      &:nth-child(3) {
        img {
          width: 102px;
        }
      }
      &:nth-child(4) {
        img {
          width: 62px;
        }
      }
    }
    .env-box-bg {
      background: rgba(255, 255, 255, 0.1);
    }
  }
  .weather-top {
    display: flex;
    overflow: hidden;
    justify-content: space-between;
    .logo {
      width: 150px;
      img {
        width: 150px;
      }
    }
    .weather-left {
      // text-align: right;
      width: 72%;
      overflow: hidden;
      .b-time {
        display: inline-block;
        vertical-align: middle;
        margin-right: 180px;
        width: 270px;
        border-bottom: 1px solid rgba(255, 255, 255, 1);
        span {
          display: block;
          text-align: center;
          &:nth-child(1) {
            opacity: 1;
            padding-bottom: 20px;
            /** 文本1 */
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 1);
          }
          &:nth-child(2) {
            font-size: 64px;
            font-weight: 700;
            letter-spacing: 0px;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 1);
          }
        }
        &:nth-child(2) {
          margin-right: 10px;
        }
      }
    }
    .weather-detail {
      // position: relative;
      // box-sizing: border-box;
      float: right;
      // padding-right: 73px;
      .d-top {
        text-align: right;
        padding-bottom: 12px;
        img {
          width: 73px;
          display: inline-block;
          vertical-align: middle;
        }
        span {
          display: inline-block;
          padding-left: 10px;
          font-size: 24px;
          font-weight: 400;
          color: rgba(242, 244, 246, 1);
          vertical-align: middle;
        }
      }
      .d-bottom {
        font-size: 24px;
        font-weight: 400;
        color: rgba(242, 244, 246, 1);
        span {
          &:nth-child(2) {
            padding-left: 10px;
          }
        }
      }
    }
  }
}
</style>