hb_sis_zhfx/src/views/WindSite/pages/Home/light-matrix.vue

<template>
  <div class="light-matrix-small">
    <table>
      <tbody>
        <tr v-for="(row, i) of table.groupDatas" :key="i">
          <td v-for="(col, j) of row" :key="j">
            <div class="card" :class="col.color">
              {{ col.tag }}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import util from "@/helper/util.js";
export default {
  // 名称
  name: "LightMatrix1",
  // 使用组件
  components: {},
  // 数据
  data() {
    return {
      table: {
        col: 42,
        datas: [
          {
            tag: "A01",
            color: "gray",
          },
        ],
        groupDatas: [
          [
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
          ],
          [
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "red",
            },
            {
              tag: "A01",
              color: "red",
            },
            {
              tag: "A01",
              color: "orange",
            },
            {
              tag: "A01",
              color: "orange",
            },
            {
              tag: "A01",
              color: "green",
            },
            {
              tag: "A01",
              color: "yellow",
            },
            {
              tag: "A01",
              color: "yellow",
            },
            {
              tag: "A01",
              color: "blue",
            },
          ],
          [
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
          ],
          [
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
          ],
          [
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
          ],
          [
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
          ],
          [
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
            {
              tag: "A01",
              color: "gray",
            },
          ],
        ],
      },
    };
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less">
@panelHeight: 6.481vh;
@titleHeight: 3.704vh;

.light-matrix-small {
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: fade(@gray, 20);

  .card {
    border-radius: 0.37vh;
    padding: 0.185vh 0;
    text-align: center;
    border: 0.093vh solid;
    font-size: 14px;

    &.write {
      color: @black;
      border-color: @write;
      background-color: @write;
    }

    &.green {
      color: @green;
      border-color: @green;
    }

    &.blue {
      color: @darkBlue;
      border-color: @darkBlue;
    }

    &.pink {
      color: @pink;
      border-color: @pink;
    }

    &.red {
      color: @write;
      border-color: @red;
      background-color: @red;
    }

    &.orange {
      color: @orange;
      border-color: @orange;
    }

    &.gray {
      color: @gray;
      border-color: @gray;
      background-color: transparent;
    }
  }
}
</style>