bigScreen/src/views/pageRoom/leftMiddle/index.vue

<template>
  <div class="leftMiddle">
    <dv-border-box-13>
      <dv-border-box-2 class="item">
        <dv-charts :option="option"></dv-charts>
        <section class="dataSection">
          <p>手术间数<span class="numFont">60</span></p>
        </section>
      </dv-border-box-2>
      <dv-decoration-2 />
      <dv-border-box-2 class="item">
        <dv-charts :option="option1" />
        <section class="dataSection">
          <p>平均接台时间<span class="numFont">45</span> min</p>
        </section>
      </dv-border-box-2>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        series: [
          {
            type: 'gauge',
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 35,
            center: ['50%', '45%'],
            data: [{ name: 'itemA', value: 86, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: 'round',
            },
            details: {
              show: true,
              formatter: '手术间利用率 {value}%',
              style: {
                fill: 'aqua',
                fontSize: 24,
              },
            },
            backgroundArc: {
              style: {
                stroke: '#4F518C',
              },
            },
          },
        ],
      },
      option1: {
        grid: {
          left: '0%',
          top: '10%',
        },
        series: [
          {
            type: 'gauge',
            data: [{ name: 'itemA', value: 45, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }],
            center: ['50%', '45%'],
            arcLineWidth: 25,
            max: 120,
            splitNum: 6,
            axisLabel: {
              formatter: '{value} min',
              style: {
                fill: '#fff',
                fontSize: 14,
              },
            },
            axisTick: {
              style: {
                stroke: '#fff',
              },
            },
            dataItemStyle: {
              lineCap: 'round',
            },
            backgroundArc: {
              style: {
                stroke: '#4F518C',
              },
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.leftMiddle {
  height: 100%;
  :deep(.dv-border-box-13) {
    padding: 2vh;
    box-sizing: border-box;
    > div {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      position: relative;
      .dv-decoration-2 {
        height: 2%;
      }
      .dataSection {
        width: 100%;
        position: absolute;
        bottom: 4vh;
        p {
          color: #fff;
          font-size: 2.4vh;
          text-align: center;
          letter-spacing: 0.2vh;
          line-height: 4vh;
          span {
            font-size: 2.6vh;
            color: aqua;
            letter-spacing: 0.1vh;
            margin-left: 1vh;
          }
        }
      }
    }
  }
}
</style>