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

<template>
  <div class="topLeft">
    <dv-border-box-13>
      <div class="box">
        <dv-border-box-2 class="item">
          <p>首台准点率</p>
          <p>
            <dv-digital-flop :config="config1" />
          </p>
        </dv-border-box-2>
        <dv-border-box-2 class="item">
          <p>手术间利用率</p>
          <p>
            <dv-digital-flop :config="config2" />
          </p>
        </dv-border-box-2>
        <dv-border-box-2 class="item">
          <p>总人数 <span>400</span></p>
          <p>进行中 <span>180</span></p>
          <p>待进行 <span>220</span></p>
        </dv-border-box-2>
        <dv-border-box-2 class="item">
          <p>急症患者</p>
          <p>
            <dv-digital-flop :config="config6" />
          </p>
        </dv-border-box-2>
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config1: {
        number: [0],
        content: '{nt} %',
        animationFrame: 150,
        animationCurve: 'easeOutCubic',
        style: {
          fontSize: 30,
        },
      },
      config2: {
        number: [0],
        content: '{nt} %',
        animationFrame: 150,
        animationCurve: 'easeOutCubic',
        style: {
          fontSize: 30,
        },
      },
      config6: {
        number: [0],
        content: '{nt} 个',
        animationFrame: 150,
        animationCurve: 'easeOutCubic',
        style: {
          fontSize: 30,
        },
      },
    };
  },
  mounted() {
    const { config1, config2, config6 } = this;
    config1.number = [80];
    config2.number = [86];
    config6.number = [180];
    this.config1 = { ...this.config1 };
    this.config2 = { ...this.config2 };
    this.config6 = { ...this.config6 };
  },
};
</script>

<style lang="scss" scoped>
.topLeft {
  flex-basis: 32%;
  .box {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    .item {
      flex-basis: 45%;
      flex-shrink: 0;
      height: 40%;
      box-sizing: border-box;
      padding: 3%;
      :deep(.border-box-content) {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        font-size: 20px;
        p {
          height: 30%;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          span {
            margin-left: 10px;
          }
          .dv-digital-flop {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>