hb_sis_zhfx/src/views/HealthControl/Health5.vue

<template>
  <div class="health-5">
    <!-- 当内容超出页面时 添加 scroll 即可自动添加滚动条 -->
    <div class="health-matrix scroll">
      <div class="health-matrix-panel" v-for="index of 6" :key="index">
        <div class="header">
          <i class="svg-icon svg-icon-sm svg-icon-white">
            <svg-icon :svgid="'svg-wind-site'" />
          </i>
          <span class="title">某某某风机厂</span>
          <div class="tools">
            <div class="tool-block">
              <div class="legend bg-green"></div>
              <div class="legend-text green">良好数量</div>
              <div class="legend-value">123</div>
            </div>
            <div class="tool-block">
              <div class="legend bg-purple"></div>
              <div class="legend-text purple">正常数量</div>
              <div class="legend-value">123</div>
            </div>
            <div class="tool-block">
              <div class="legend bg-yellow"></div>
              <div class="legend-text yellow">注意数量</div>
              <div class="legend-value">123</div>
            </div>
            <div class="tool-block">
              <div class="legend bg-orange"></div>
              <div class="legend-text orange">严重数量</div>
              <div class="legend-value">123</div>
            </div>
          </div>
        </div>
        <div class="body">
          <div class="matrix">
            <div class="item green">1号</div>
            <div class="item purple">2号</div>
            <div class="item orange">3号</div>
            <div class="item" v-for="index of 100" :key="index">{{ index + 3 }}号</div>
            <div class="blank" v-for="index of 25" :key="index"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
export default {
  setup() {},
  components: { SvgIcon },
  data() {
    return {};
  },
};
</script>

<style lang="less">
.health-5 {
  .health-matrix {
    height: calc(100vh - 7vh);

    .health-matrix-panel {
      margin-bottom: 8px;
      .header {
        background: fade(@gray, 20);
        line-height: 37px;
        margin-bottom: 8px;
        padding: 0 16px;

        display: flex;
        align-items: center;

        i {
          margin-right: 8px;
        }

        .title {
          font-size: @fontsize-s;
        }

        .tools {
          display: flex;

          .tool-block {
            display: flex;
            align-items: center;
            margin-left: 36px;

            .legend {
              flex: auto;
              width: 0.741vh;
              height: 0.741vh;
              margin-right: 0.741vh;

              &.long {
                width: 2.963vh;
                height: 0.37vh;
              }
            }

            .legend-value {
              color: @white;
              margin-left: 16px;
            }
          }
        }
      }
    }

    .matrix {
      display: flex;
      flex-wrap: wrap;

      .item {
        flex: 1 0 calc(100% / 25 - 4px);
        line-height: 26px;
        background: fade(@gray, 20);
        color: @gray-l;
        font-size: 12px;
        margin-bottom: 4px;
        text-align: center;
        border: 1px solid transparent;

        & + .item {
          margin-left: 4px;
        }

        &:nth-child(25n + 1) {
          margin-left: 0px;
        }

        &.green {
          color: @green;
          background: fade(@green, 20);
          border-color: @green;
        }

        &.purple {
          color: @purple;
          background: fade(@purple, 20);
          border-color: @purple;
        }

        &.orange {
          color: @orange;
          background: fade(@orange, 20);
          border-color: @orange;
        }
      }

      .blank {
        flex: 1 0 calc(100% / 25 - 4px);
        margin-left: 4px;
      }
    }
  }
}
</style>