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

<template>
  <div class="rightMiddle">
    <dv-border-box-13>
      <dv-loading v-if="isLoding">Loading...</dv-loading>
      <section v-else>
        <dv-charts :option="option"></dv-charts>
      </section>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoding: true,
      option: {
        xAxis: {
          type: 'category',
          position: 'top',
          data: 'value',
          min: 0,
          max: 24,
          minInterval: 1,
          splitNumber: 25,
          axisLabel: {
            style: {
              stroke: '#fff',
              fontSize: 14,
            },
            formatter: dataItem => `${String(dataItem.value).padStart(2, '0')}:00`,
          },
        },
        yAxis: {
          data: [],
          splitLine: { show: false },
          axisLabel: {
            style: {
              stroke: '#fff',
              fontSize: 14,
            },
          },
        },
        series: [],
      },
    };
  },
  mounted() {
    setTimeout(() => {
      // 手术间数量
      const num = 12;
      // 生成手术间
      for (let index = num; index >= 1; index--) {
        this.option.yAxis.data.push(`手术间${String(index).padStart(2, '0')}`);
      }
      // 生成对应的使用率数据
      for (let index = 1; index <= 24; index++) {
        let seriesData = {
          name: `bar${String(index).padStart(2, '0')}`,
          type: 'bar',
          stack: 'bar',
          data: [],
          independentColor: true,
          independentColors: [],
          barWidth: '40%',
          barStyle: {
            stroke: 'rgb(128,128,128)',
          },
        };
        for (let sunIndex = 0; sunIndex < num; sunIndex++) {
          const isUse = Math.random() < 0.7;
          seriesData.data.push(1);
          if (isUse) {
            seriesData.independentColors.push('#87ceeb');
          } else {
            seriesData.independentColors.push('rgb(128,128,128)');
          }
        }
        this.option.series.push(seriesData);
      }
      this.option = { ...this.option };
      this.isLoding = false;
    }, 500);
  },
};
</script>

<style lang="scss" scoped>
.rightMiddle {
  height: 100%;
  :deep(.dv-border-box-13) {
    padding: 2vh;
    box-sizing: border-box;
    section {
      height: 100%;
      background-color: gray;
      .dv-charts-container {
        height: 100%;
      }
    }
  }
}
</style>