PC_FiveFollowing/src/views/site/components/Overview/modelStaticTop.vue

<template>
  <div class="modelStaticTop">
    <ul>
      <li>
        <div>
          <p>今日用电量</p>
          <p>
            <span class="num static">{{ data.dayCount }}</span
            >kWh
          </p>
          <p>
            昨日同期 {{ data.lastDayCount }}
            <span class="text-red">{{ data.dayRadio }}% ↑</span>
          </p>
        </div>
      </li>
      <li>
        <div>
          <p>实时负载</p>
          <p>
            <span class="num text-yellow" style="margin-bottom: 0">{{
              exception
            }}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import api from "@/api/Overview/index";
import { ElMessage } from "element-plus";
export default {
  name: "modelStaticTop",
  props: {
    dayMonthData: Object,
  },
  components: {},
  data() {
    return {
      data: [],
      exception: "",
    };
  },
  mounted() {},
  methods: {},
  watch: {
    dayMonthData() {
      this.data = this.dayMonthData;
      api
        .epLoad({
          siteId: this.$store.state.siteId,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            this.exception = requset.data;
          } else {
            ElMessage.success({
              message: requset.msg,
              type: "success",
            });
          }
        });
    },
  },
};
</script>
<style lang="scss">
.modelStaticTop {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  ul {
    text-align: center;
    li {
      padding: 0.125rem 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #081f2f;
      box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253, 0.6);
      p {
        font-size: 0.2rem;
      }
      .num {
        margin: 0.0625rem;
        display: inline-block;
        font-size: 0.3rem;
      }
    }
  }
}
</style>