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

<template>
  <div class="box">
    <header>
      <div>
        <p class="panmen">手术室换台情况</p>
      </div>
    </header>
    <main>
      <div class="top">
        <div class="left">
          <div>
            <img src="@/assets/img/pageMonitor/triangle.png">
            <span>总人数</span>
          </div>
          <div>
            <span class="panmen">{{ totalPopulation }}</span>人
          </div>
        </div>
        <div class="right">
          <template v-for="(item, index) in peopleData">
            <div class="numBox" :key="index">
              <div class="leftTextBox">
                <div class="potionBox"></div>
                <span>{{ item['itemName'] }}</span>
              </div>
              <div class="rightTextBox">
                <span class="panmen">{{ item['itemVal'] }}</span>人
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="bottom">
        <template v-for="(item, index) in overviewData">
          <div :key="index">
            <img src="@/assets/img/pageMonitor/trianglePurple.png" />
            <p class="secondRow">
              {{ item['itemName'] }}
            </p>
            <p class="thridRow">
              <span class="panmen">{{ item['itemVal'] }}</span>{{ item['itemUnit'] }}
            </p>
          </div>
        </template>
      </div>
    </main>
  </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() {
      this.isLoading = true;
      let nowDay = dayjs().format('YYYY-MM-DD');
      if (this.$store.getters.isMock) {
        nowDay = '2024-06-06';
      }
      GetMonitorOperationCount(nowDay).then(res => {
        if (!res.data) {
          return;
        }
        let fisrtRate = res['data']['firstPunctualityRate'];
        if (fisrtRate.includes('%')) {
          this.overviewData[0]['itemVal'] = fisrtRate.slice(0, -1);
        } else {
          this.overviewData[0]['itemVal'] = Number(fisrtRate);
        }
        let roomUserRate = res['data']['roomUserRate'];
        if (roomUserRate.includes('%')) {
          this.overviewData[1]['itemVal'] = roomUserRate.slice(0, -1);
        } else {
          this.overviewData[1]['itemVal'] = Number(roomUserRate);
        }
        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();
    setInterval(() => {
      this.onGetPageData();
    }, this.$store.getters.intervalTime);
  },
};
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>