hb_sis_zhfx/src/views/SandTable/component/weather.vue

<template>
  <div class="weather">
    <div class="weather-info">
      <span class="svg-icon">
        <svg-icon class="weather-icon" :svgid="'svg-' + sourceData.tqtp" />
      </span>
      <div>
        <div class="temperature">{{ sourceData.wd }} °</div>
        <div class="other">
          <span>{{ sourceData.tqmc }}</span>
          <span>{{ sourceData.fx }}</span>
          <span>{{ sourceData.fs }}</span>
        </div>
      </div>
    </div>
    <div class="other-info">
      <Row>
        <Col>
          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
            <svg-icon svgid="svg-能见度" />
          </div>
          <div class="value">{{ sourceData.qxd }}</div>
          <div class="text">能见度</div>
        </Col>
        <Col>
          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
            <svg-icon svgid="svg-湿度" />
          </div>
          <div class="value">{{ sourceData.sd }}</div>
          <div class="text">湿度</div>
        </Col>
        <Col>
          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
            <svg-icon svgid="svg-气压" />
          </div>
          <div class="value">{{ sourceData.dqyl }}</div>
          <div class="text">气压</div>
        </Col>
        <Col>
          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
            <svg-icon svgid="svg-日出" />
          </div>
          <div class="value">{{ sourceData.richushijian }}</div>
          <div class="text">日出时间</div>
        </Col>
        <Col>
          <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
            <svg-icon svgid="svg-日落" />
          </div>
          <div class="value">{{ sourceData.riluoshijian }}</div>
          <div class="text">日落时间</div>
        </Col>
      </Row>
    </div>
  </div>
</template>

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

export default {
  components: { Row, Col, SvgIcon },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  // 数据自己获取天气情况
  data() {
    return {
      weather: "阴", // 气象
      temperature: "11", // 温度
      windDirection: "北风", // 风向
      windSpeed: "3-4级", // 风速
      visibility: "20KM", //能见度
      humidity: "75.0%", // 湿度
      pressure: "994kPa", // 气压
      sunrise: "04:06", // 日出
      sunset: "18:50", // 日落

      sourceData: {},
    };
  },

  mounted() {
    this.sourceData = this.data;
  },

  watch: {
    data(res) {
      this.sourceData = res;
    },
  },
};
</script>

<style lang="less" scoped>
.weather {
  .weather-info {
    display: flex;
    margin-bottom: 0.741vh;

    .weather-icon {
      width: 4.63vh;
      height: 4.63vh;
      margin: 0 1.481vh;
    }
    .temperature {
      font-size: 2.407vh;
    }
    .other span {
      font-size: @fontsize-s;
      margin-right: 2.222vh;
    }
  }

  .other-info {
    text-align: center;
    font-size: @fontsize-s;

    .text {
      color: @font-color;
      font-size: 12px;
      // margin-bottom: 0.741vh;
    }

    .value {
      margin: 0.741vh 0 0 0;
    }

    .other-icon {
      margin: 0 auto;
    }
  }
}
</style>