sagacloud-sagacare-ipad/src/views/pac/entranceScreen.vue

<template>
  <div class="enter-main">
    <div class="top-box">
      <div class="left">
        <img class="logo" :src="parseImgUrl('pac', 'logo.svg')" />
        <img
          class="weather-icon"
          :src="parseImgUrl('pac', 'weather/' + outWeather.imgname)"
        />
        <div class="wether-info">
          <div class="temp">{{ outWeather.temperature }} ℃</div>
          <div class="text">{{ outWeather.text }}</div>
        </div>
        <div class="line"></div>
        <div class="wether-pm">
          <div class="value-box">
            <span>PM 2.5</span>
            <span>{{ outWeather.pm25 ? outWeather.pm25 : "--" }}</span>
          </div>
          <div class="value-des">
            <span>室外空气质量</span>
            <span>{{ outWeather.quality ? outWeather.quality : "--" }}</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="env-box" v-for="item in envlist">
          <div class="title-box">
            <img class="icon" :src="item.img" />
            <div class="title">{{ item.name }}</div>
          </div>
          <div class="index-box">
            <div class="num">{{ item.num }}</div>
            <div class="text">{{ item.levelTxt }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  onBeforeUnmount,
} from "vue";
import { parseImgUrl, setQueryConfig } from "@/utils";
import { getWeatherNew, getPacSpaceInfo } from "@/apis/envmonitor";
export default defineComponent({
  components: {},
  setup(props) {
    const envlist = [
      {
        id: 1,
        name: "PM 2.5",
        unit: "ug/m³",
        funcid: "PM2d5",
        levelTxt: "",
        value: 10,
        img: parseImgUrl("pac", "pm2.5.svg"),
        showNowData: 0, // 0:loading 1:暂无数据 2：暂无服务定制时间
      },
      {
        id: 2,
        value: 10,
        name: "甲醛",
        unit: "mg/㎡",
        levelTxt: "",
        img: parseImgUrl("pac", "HCHO.svg"),
      },
      {
        id: 3,
        value: 10,
        name: "温度",
        unit: "%",
        levelTxt: "",
        funcid: "Tdb,RH",
        img: parseImgUrl("pac", "Tdb.svg"),
      },
      {
        id: 3,
        value: 10,
        name: "湿度",
        levelTxt: "",
        unit: "%",
        funcid: "Tdb,RH",
        img: parseImgUrl("pac", "RH.svg"),
      },
    ];
    const proxyData = reactive({
      envlist: envlist,
      parseImgUrl: parseImgUrl,
      params: {
        spaceId: "Sp31010600032517f22f3d6a4c71b18cab24c444d362",
        pubname: "sagacarepad",
        projectId: "Pj3101060003",
      },
      outWeather: {},
      getWeatherIconByText(text) {
        let imgname = "晴.png";
        if (text.indexOf("晴") > -1) {
          imgname = "晴.png";
        } else if (text.indexOf("雨") > -1) {
          imgname = "大雨.png";
        } else if (text.indexOf("阴") > -1 || text.indexOf("云") > -1) {
          imgname = "阴.png";
        } else if (text.indexOf("霾") > -1) {
          imgname = "雾.png";
        } else if (text.indexOf("雾") > -1) {
          imgname = "雾.png";
        } else if (text.indexOf("风") > -1) {
          imgname = "风.png";
        } else if (text.indexOf("雷") > -1) {
          imgname = "雷阵雨.png";
        }
        return imgname;
      },
      getWeatherIconByCode(code) {
        let imgname = "";
        if (code <= 3) {
          imgname = "晴.png";
        } else if (code <= 8) {
          imgname = "多云.png";
        } else if (code <= 9) {
          imgname = "阴.png";
        } else if (code <= 10) {
          imgname = "阵雨.png";
        } else if (code <= 12) {
          imgname = "雷阵雨.png";
        } else if (code <= 13) {
          imgname = "小雨.png";
        } else if (code <= 15) {
          imgname = "大雨.png";
        } else if (code <= 18) {
          imgname = "暴雨.png";
        } else if (code <= 19) {
          // 冻雨
          imgname = "小雨.png";
        } else if (code <= 20) {
          imgname = "雨夹雪.png";
        } else if (code <= 25) {
          imgname = "雪.png";
        } else if (code <= 29) {
          imgname = "阴.png";
        } else if (code <= 31) {
          imgname = "雾.png";
        } else if (code <= 35) {
          imgname = "风.png";
        } else if (code <= 36) {
          imgname = "龙卷风.png";
        } else if (code <= 37) {
          // 冷
          imgname = "阴.png";
        } else if (code <= 38) {
          // 热
          imgname = "晴.png";
        }
        return imgname;
      },
      getWeatherInfo() {
        const str = setQueryConfig(proxyData.params);
        getWeatherNew(str).then((res) => {
          console.log(res);
          proxyData.outWeather = res.content ? res.content : {};
          let text = proxyData.outWeather.text || "";
          let code = proxyData.outWeather.code;
          let imgname = proxyData.getWeatherIconByCode(code);
          if (!imgname) {
            imgname = proxyData.getWeatherIconByText(text);
          }
          console.log("imgname==", imgname);

          proxyData.outWeather.imgname = imgname;
        });
      },
      getSpaceInfo() {
        const str = setQueryConfig(proxyData.params);
        getPacSpaceInfo({ criteria: proxyData.params }).then((res) => {
          const content = (res && res.content) || [];
          proxyData.formatSpaceInfo(content);
        });
      },
      formatSpaceInfo(content = []) {
        for (let i = 0; i < content.length; i++) {
          let item = content[i];
          if (item.pm25 || item.pm25 === 0) {
            let obj = proxyData.checkLevel(item.pm25, "pm25");
            // console.log("obj==", obj);
            proxyData.envlist[0].levelTxt = obj ? obj.levelTxt : "--";
            proxyData.envlist[0].num = item.pm25;
          } else {
            proxyData.envlist[0].levelTxt = "";
            proxyData.envlist[0].num = "--";
          }
          if (item.hcho || item.hcho == 0) {
            let obj = proxyData.checkLevel(item.hcho, "hcho");
            // proxyData.envlist[1].levelTxt = obj.levelTxt;
            proxyData.envlist[1].num = item.hcho;
          } else {
            // proxyData.envlist[1].levelTxt = "";
            proxyData.envlist[1].num = "--";
          }
          if (item.temperature || item.temperature == 0) {
            proxyData.envlist[2].num = item.temperature;
          }
          if (item.humidity || item.humidity == 0) {
            let obj = proxyData.checkLevel(item.humidity, "humidity");
            // proxyData.envlist[3].levelTxt = obj.levelTxt;
            proxyData.envlist[3].num = item.humidity;
          } else {
            proxyData.envlist[3].num = "--";
            proxyData.envlist[3].levelTxt = "";
          }
        }
      },
      checkLevel(value, name) {
        let levelTxt = "";
        let valueNum = parseFloat(value);
        if (name == "humidity") {
          if (valueNum < 30) {
            levelTxt = "干燥";
          } else if (valueNum > 70) {
            levelTxt = "潮湿";
          } else {
            levelTxt = "健康";
          }
        } else if (name == "pm25") {
          if (valueNum >= 0 && valueNum < 35) {
            levelTxt = "健康";
          } else if (valueNum >= 35 && valueNum <= 75) {
            levelTxt = "良";
          } else if (valueNum > 75 && valueNum <= 115) {
            levelTxt = "轻度污染";
          } else if (valueNum > 115 && valueNum <= 150) {
            levelTxt = "中度污染";
          } else if (valueNum > 150 && valueNum <= 250) {
            levelTxt = "重度污染";
          } else if (valueNum > 250) {
            levelTxt = "严重污染";
          }
          console.log("levelTxt==", levelTxt);
        } else if (name == "hcho") {
          if (valueNum <= 0.1) {
            levelTxt = "健康";
          } else {
            levelTxt = "超标";
          }
        }

        let obj = {
          levelTxt: levelTxt,
        };
        return obj;
      },
    });
    onBeforeUnmount(() => {});
    onMounted(() => {
      proxyData.getWeatherInfo();
      proxyData.getSpaceInfo();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
// 因为像素转换的单位是96, 大屏的设计图是2160px，
// 所以px大小除/2.25就可自定计算出rem了
.enter-main {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(160, 146, 137, 1);
  .top-box {
    box-sizing: border-box;
    // padding: 14.58vh 28vw;
    padding: 0 2.78vw;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      .logo {
        width: 34.23px;
        // height: 46px;
        margin-right: 26.6px;
      }
      .weather-icon {
        width: 53.4px;
        // height: 58.6px;
        margin-right: 23px;
      }
      .wether-info {
        color: #fff;
        .temp {
          font-family: Montserrat;
          font-size: 25.8px;
          font-weight: 600;
          line-height: 22px;
          text-align: left;
          margin-bottom: 9.8px;
        }
        .text {
          font-family: PingFang SC;
          font-size: 16.88px;
          font-weight: 600;
          line-height: 16.4px;
          text-align: left;
        }
      }
      .line {
        height: 46px;
        width: 1px;
        background: rgba(216, 185, 164, 1);
        margin-left: 17.77px;
        margin-right: 17.77px;
      }
      .wether-pm {
        color: #fff;
        .value-box {
          display: flex;
          align-items: center;
          font-size: 25.77px;
          line-height: 22.22px;
          text-align: left;
          margin-bottom: 8.88px;
          span {
            display: inline-block;
            &:nth-child(1) {
              width: 94px;
              margin-right: 7px;
              font-family: Montserrat;
              font-weight: 400;
            }
            &:nth-child(2) {
              font-family: Montserrat;
              font-weight: 600;
            }
          }
        }
        .value-des {
          display: flex;
          align-items: center;
          span {
            display: inline-block;
            font-family: PingFang SC;
            font-size: 13.33px;
            font-weight: 400;
            line-height: 16.6px;
            text-align: left;
            &:nth-child(1) {
              width: 94px;
              margin-right: 7px;
            }
            &:nth-child(2) {
              font-family: PingFang SC;
              font-size: 16.88px;
              font-weight: 600;
              text-align: left;
            }
          }
        }
      }
    }
    .right {
      width: 52.7vw;
      display: flex;
      justify-content: space-between;
    }
  }

  .env-box {
    width: 11.7vw;
    // height: 70.8vh;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8.88px;
    background: radial-gradient(
      103.15% 78.07% at -3.15% 51.76%,
      #a09289 0%,
      #9c8c82 100%
    );
    .title-box {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px;
      border-radius: 8.4px 8.4px 0 0;
      text-align: center;
      background: radial-gradient(
        100% 100% at 0% 0%,
        rgba(255, 255, 255, 0.4) 0%,
        #a09289 100%
      );
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: -3px -3px 111px 0px rgba(255, 255, 255, 0.02) inset;
      border-bottom: 2px solid rgba(255, 255, 255, 0.2);
      border-image-source: linear-gradient(
        169.15deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(238, 237, 237, 0.2) 96.79%
      );
      .icon {
        width: 13.3px;
        height: 13.3px;
        margin-right: 4px;
      }
      .title {
        font-family: Montserrat;
        font-size: 16px;
        font-weight: 500;
        line-height: 17.78px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
      }
    }

    .index-box {
      padding: 7.55px;
      display: flex;
      justify-content: center;
      align-items: center;
      .num {
        font-family: Montserrat;
        color: #fff;
        font-size: 20.4px;
        font-weight: 600;
        line-height: 26.66px;
        margin-right: 4px;
      }
      .text {
        font-family: PingFang SC;
        color: #fff;
        font-size: 20.4px;
        font-weight: 600;
        line-height: 26.66px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>