sis_zhfx/src/views/WindSite/pages/Home/wind-site-weather.vue

// 天气分析
<template>
  <div class="wind-site-weather">
    <div class="title">风场 {{ nowTime }} 实况</div>
    <div class="weather">
      <div class="weather-info">
        <span class="svg-icon">
          <svg-icon class="weather-icon" svgid="svg-duoyun" />
        </span>
        <div class="temperature-info">
          <div class="temperature">{{ sourceMap.wd }} °</div>
          <div class="other">
            <div>{{ sourceMap.tqmc }}</div>
            <span>{{ sourceMap.fx }}</span>
            <span>{{ sourceMap.fs }}</span>
          </div>
        </div>
      </div>
      <div class="other-info">
        <Row>
          <Col>
            <div class="svg-icon svg-icon-sm svg-icon-green">
              <svg-icon svgid="svg-能见度" />
            </div>
            <div class="value">{{ sourceMap.qxd }}</div>
            <div class="text">能见度</div>
          </Col>
          <Col>
            <div class="svg-icon svg-icon-sm svg-icon-green">
              <svg-icon svgid="svg-湿度" />
            </div>
            <div class="value">{{ sourceMap.sd }}</div>
            <div class="text">湿度</div>
          </Col>
          <Col>
            <div class="svg-icon svg-icon-sm svg-icon-green">
              <svg-icon svgid="svg-气压" />
            </div>
            <div class="value">{{ sourceMap.dqyl }}kPa</div>
            <div class="text">气压</div>
          </Col>
          <Col>
            <div class="svg-icon svg-icon-sm svg-icon-green">
              <svg-icon svgid="svg-日出" />
            </div>
            <div class="value">{{ sunrise }}</div>
            <div class="text">日出时间</div>
          </Col>
          <Col>
            <div class="svg-icon svg-icon-sm svg-icon-green">
              <svg-icon svgid="svg-日落" />
            </div>
            <div class="value">{{ sunset }}</div>
            <div class="text">日落时间</div>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import Col from "@/components/coms/grid/col.vue";
import Row from "@/components/coms/grid/row.vue";
import SvgIcon from "@/components/coms/icon/svg-icon.vue";

export default {
  components: { Row, Col, SvgIcon },
  props:{
    time: String,
    data:{
      type:Object,
      default:() => { }
    }
  },
  data() {
    return {
      sourceMap: {},
      nowTime: "",
      weather: "阴", // 气象法
      temperature: "11", // 温度
      windDirection: "北风", // 风向
      windSpeed: "3-4级", // 风速
      visibility: "20KM", //能见度
      humidity: "75.0%", // 湿度
      pressure: "994kPa", // 气压
      sunrise: "4:06", // 日出
      sunset: "18:50", // 日落
    };
  },
  created(){},
  mounted(){
    this.sourceMap=this.data;
  },

  watch:{
    data(res){
      this.sourceMap=res;
    },
    time(value){
      this.nowTime = value
    }
  }
};
</script>

<style lang="less" scoped>
.wind-site-weather {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px;
  display: inline-block;
  border: 1px solid #536268;
  .title {
    font-size: @fontsize;
    color: @gray;
  }

  .weather {
    display: inline-flex;

    .weather-info {
      display: flex;
      .title {
        display: inline-block;
      }

      .weather-icon {
        width: 50px;
        height: 50px;
        margin-right: 8px;
      }

      .temperature-info {
        display: flex;
        flex-direction: column;
        .temperature {
          font-size: 1.5625vw;
        }
        .other {
          margin-left: -32px;
          margin-right: 8px;
          div {
            text-align: right;
            margin: 8px 0;
          }

          span {
            font-size: 12px;
            margin-left: 24px;
          }
        }
      }
    }

    .other-info {
      text-align: center;
      font-size: 12px;
      .svg-icon {
        margin: auto;
      }

      .text {
        color: @gray;
        width: 50px;
      }

      .value {
        margin: 4px 0;
      }

      .col + .col {
        margin-left: 8px;
      }
    }
  }
}
</style>