bigScreen/src/views/pageMonitor/topLeft/index.vue

<template>
  <div
    class="w-[51.29vh] h-[39.62vh] bgTopLeftBox bg-contain bg-center bg-no-repeat p-[3vh] box-border"
    v-loading="isLoading"
  >
    <section class="flex justify-between">
      <template v-for="(item, index) in overviewData">
        <div
          class="w-[12.96vh] h-[14.81vh] bgTopLeftItemBox bg-contain bg-no-repeat pl-[1.48vh] py-[0.92vh]"
          :key="index"
        >
          <img src="@/assets/svg/Monitor/TopLeft/TriangleBlue.svg" />
          <p
            class="tracking-[0.27vh] text-[1.48vh] leading-none mt-[2vh] mb-[2vh] opacity-80"
          >
            {{ item["itemName"] }}
          </p>
          <p class="">
            <span class="text-[4.25vh] youshe text-[#733FF3] leading-none">{{
              item["itemVal"]
            }}</span>
            <span class="text-[2.22vh] youshe text-[#733FF3] leading-none">{{
              item["itemUnit"]
            }}</span>
          </p>
        </div>
      </template>
    </section>
    <div
      class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBoxPurple bg-contain bg-no-repeat mt-[3.7vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center"
    >
      <section>
        <div class="flex">
          <img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
          <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80"
            >总人数</span
          >
        </div>
        <p class="text-[#B53FDF] text-[4.07vh] mt-[1.4vh] youshe leading-none">
          {{ totalPopulation }}
        </p>
      </section>
      <section>
        <template v-for="(item, index) in peopleData">
          <div
            class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center"
            :class="!index && 'mb-[1.85vh]'"
            :key="index"
          >
            <div class="flex items-end">
              <img src="@/assets/svg/Monitor/TopLeft/PointPurple.svg" />
              <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{
                item["itemName"]
              }}</span>
            </div>
            <div class="flex items-center">
              <span class="text-[#B53FDF] text-[2.4vh] youshe">{{
                item["itemVal"]
              }}</span>
              <span class="text-[1.11vh] opacity-65 ml-[0.74vh]">人</span>
            </div>
          </div>
        </template>
      </section>
    </div>
  </div>
</template>

<script>
import { GetMonitorOperationCount } from "@/api/monitor";
import dayjs from "dayjs";
export default {
  data() {
    return {
      overviewData: [
        {
          itemName: "首台准点率",
          itemVal: "0",
          itemUnit: "%",
        },
        {
          itemName: "手术间利用率",
          itemVal: "0",
          itemUnit: "%",
        },
        {
          itemName: "急诊患者",
          itemVal: "0",
          itemUnit: "个",
        },
      ],
      peopleData: [
        {
          itemName: "进行中",
          itemVal: "50",
        },
        {
          itemName: "待进行",
          itemVal: "300",
        },
      ],
      totalPopulation: 0,
      isLoading: true,
    };
  },
  methods: {
    onGetPageData() {
      let nowDay = dayjs().format("YYYY-MM-DD");
      if (this.$store.getters.isMock) {
        nowDay = "2024-06-06";
      }
      GetMonitorOperationCount(nowDay).then((res) => {
        if (!res.data) {
          return;
        }
        this.overviewData[0]["itemVal"] = res["data"][
          "firstPunctualityRate"
        ].slice(0, -1);
        this.overviewData[1]["itemVal"] = res["data"]["roomUserRate"].slice(
          0,
          -1
        );
        this.overviewData[2]["itemVal"] = res["data"]["patEmergencyCount"];
        this.totalPopulation = res["data"]["patCount"];
        this.peopleData[0]["itemVal"] = res["data"]["patOperationing"];
        this.peopleData[1]["itemVal"] = res["data"]["patWating"];
        this.isLoading = false;
      });
    },
  },
  mounted() {
    this.onGetPageData();
  },
};
</script>

<style>
.bgTopLeftBox {
  background-image: url("@/assets/svg/Monitor/TopLeft/Box.svg");
}
.bgTopLeftItemBox {
  background-image: url("@/assets/svg/Monitor/TopLeft/ItemBox.svg");
}
.bgTopLeftItemBoxPurple {
  background-image: url("@/assets/svg/Monitor/TopLeft/ItemBoxPurple.svg");
}
.peopleItemBox {
  background: linear-gradient(
    271deg,
    rgba(85, 255, 212, 0.045) 2%,
    rgba(35, 150, 121, 0.066) 99%
  );
  border: 1.5px solid;
  border-image: linear-gradient(
      159deg,
      rgba(169, 213, 255, 0.4) -8%,
      rgba(169, 213, 255, 0) 38%
    )
    1.5;
}
</style>