hb_sis_zhfx/src/views/LightMatrix2/LightMatrix2.vue

<template>
  <div class="light-matrix">
    <Row class="panel-2" type="">
      <Col :span="12" class="left-50-16">
        <div class="panel">
          <div class="dot left top"></div>
          <div class="dot left bottom"></div>
          <div class="dot right top"></div>
          <div class="dot right bottom"></div>
          <div class="item">
            <i :class="panel1Data.first.icon"></i>
          </div>
          <div class="item" :class="data.color" v-for="(data, index) of panel1Data.datas" :key="index">
            <div>{{ data.test }}</div>
            <div>{{ data.num }}</div>
          </div>
        </div>
      </Col>
      <Col :span="12" class="left-50-16">
        <div class="panel">
          <div class="dot left top"></div>
          <div class="dot left bottom"></div>
          <div class="dot right top"></div>
          <div class="dot right bottom"></div>
          <div class="item2" v-for="(data, index) of panel2Data.datas" :key="index">
            <div class="name">{{ data.test }}</div>
            <div class="num2">{{ data.num2 }}</div>
            <div class="num1">×{{ data.num1 }}</div>
            <div class="num3">{{ data.num3 }}</div>
          </div>
        </div>
      </Col>
    </Row>
    <div class="panel-box">
      <div v-for="(table, k) of tables" :key="k">
        <div class="panel-title">
          <div class="panel-title-name">
            <i class="fa fa-send"></i>
            <span>某某某风电场</span>
            <div class="sub-title-item" v-for="(data, index) of table.subTitleDatas" :key="index">
              <span class="sub-title">{{ data.text }}</span>
              <span class="sub-count" :class="data.color">{{ data.num }}</span>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <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">
                    <div class="card-panel">
                      <div class="card-left">
                        <div class="tag">{{ col.tag }}</div>
                      </div>
                      <div class="card-right">
                        <div class="num">{{ col.num1 }}</div>
                        <div class="num">{{ col.num2 }}</div>
                      </div>
                    </div>
                    <div class="card-percent">
                      <div class="split-item"></div>
                      <div class="split-item"></div>
                      <div class="split-item"></div>
                      <div class="split-item"></div>
                      <div class="split-item"></div>
                      <div class="percent" :style="'width: ' + col.percent + '%'"></div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Row from "@/components/coms/grid/row.vue";
import Col from "@/components/coms/grid/col.vue";
import util from "@/helper/util.js";
export default {
  // 名称
  name: "LightMatrix2",
  // 使用组件
  components: {
    Row,
    Col,
  },
  // 数据
  data() {
    return {
      panel1Data: {
        first: {
          icon: "fa fa-user",
        },
        datas: [
          {
            color: "write",
            test: "接入风机",
            num: 256,
          },
          {
            color: "blue",
            test: "· 运行",
            num: 256,
          },
          {
            color: "green",
            test: "· 待机",
            num: 256,
          },
          {
            color: "pink",
            test: "· 限电",
            num: 256,
          },
          {
            color: "red",
            test: "· 故障",
            num: 256,
          },
          {
            color: "orange",
            test: "· 检修",
            num: 256,
          },
          {
            color: "write",
            test: "· 受累",
            num: 256,
          },
          {
            color: "gray",
            test: "· 离线",
            num: 256,
          },
        ],
      },
      panel2Data: {
        datas: [
          {
            test: "欠发电量",
            num1: 5,
            num2: 7.34,
            num3: "0%~5%",
          },
          {
            test: "欠发电量",
            num1: 4,
            num2: 7.34,
            num3: "5%~10%",
          },
          {
            test: "欠发电量",
            num1: 3,
            num2: 7.34,
            num3: "10%~20%",
          },
          {
            test: "欠发电量",
            num1: 2,
            num2: 7.34,
            num3: "20%~40%",
          },
          {
            test: "欠发电量",
            num1: 1,
            num2: 7.34,
            num3: ">40%",
          },
        ],
      },
      tables: [
        {
          col: 15,
          subTitleDatas: [
            {
              text: "接入台数",
              num: 256,
              color: "write",
            },
            {
              text: "待机台数",
              num: 256,
              color: "green",
            },
            {
              text: "并网台数",
              num: 256,
              color: "blue",
            },
            {
              text: "限电台数",
              num: 256,
              color: "pink",
            },
            {
              text: "故障台数",
              num: 256,
              color: "red",
            },
            {
              text: "检修台数",
              num: 256,
              color: "orange",
            },
            {
              text: "受累台数",
              num: 256,
              color: "write",
            },
            {
              text: "离线台数",
              num: 256,
              color: "gray",
            },
            {
              text: "风速",
              num: 256,
              color: "gray",
            },
            {
              text: "预测功率",
              num: 256,
              color: "gray",
            },
            {
              text: "保证功率",
              num: 256,
              color: "gray",
            },
            {
              text: "应发功率",
              num: 256,
              color: "gray",
            },
            {
              text: "实际功率",
              num: 256,
              color: "gray",
            },
            {
              text: "AGC指令",
              num: 256,
              color: "gray",
            },
            {
              text: "出线功率",
              num: 256,
              color: "gray",
            },
          ],
          datas: [
            {
              tag: "01",
              num1: "985.97 kw",
              num2: "6.45 m/s",
              percent: 70,
              color: "blue",
            },
          ],
          groupDatas: [],
        },
      ],
    };
  },
  // 函数
  methods: {
    createGroupDatas: function(table) {
      table.groupDatas = [];
      let tempDatas = [];
      table.datas.forEach((data, index) => {
        if (index % table.col == 0) {
          if (tempDatas.length > 0) {
            table.groupDatas.push(util.copy(tempDatas));
            tempDatas = [];
          }
        }
        tempDatas.push(util.copy(data));
      });
      if (tempDatas.length > 0) {
        table.groupDatas.push(util.copy(tempDatas));
        tempDatas = [];
      }
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
    let tempData = [];
    for (let i = 0; i < 45; i++) {
      tempData.push(util.copy(this.tables[0].datas[0]));
      if (i == 39) {
        tempData[i].color = "green";
      }
      if (i == 40) {
        tempData[i].color = "pink";
      }
      if (i == 41) {
        tempData[i].color = "orange";
      }
      if (i == 42) {
        tempData[i].color = "red";
      }
      if (i == 43) {
        tempData[i].color = "write";
      }
      if (i == 44) {
        tempData[i].color = "gray";
      }
    }
    this.tables[0].datas = util.copy(tempData);
    this.createGroupDatas(this.tables[0]);
    for (let i = 0; i < 5; i++) {
      this.tables.push(util.copy(this.tables[0]));
    }
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

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

.light-matrix {
  width: calc(100% - 1.111vh);
  height: calc(100vh - 7.222vh);
  display: flex;
  flex-direction: column;

  .panel-2 {
    .left-50-16 {
      width: calc(50% - 0.741vh);
    }
  }

  .panel {
    width: 100%;
    border: 0.093vh solid @darkgray;
    position: relative;
    padding: 1.111vh 2.222vh;
    background-color: fade(@darkgray, 20%);
    display: flex;
    height: 6.944vh;

    .dot {
      width: 0.185vh;
      height: 0.185vh;
      border-radius: 50%;
      background-color: @write;
      position: absolute;

      &.left {
        left: 0.37vh;
      }

      &.right {
        right: 0.37vh;
      }

      &.top {
        top: 0.37vh;
      }

      &.bottom {
        bottom: 0.37vh;
      }
    }

    .item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: @write;

      i {
        color: @gray;
        font-size: 2.778vh;
      }

      &.write {
        color: @write;
      }

      &.green {
        color: @green;
      }

      &.blue {
        color: @darkBlue;
      }

      &.pink {
        color: @pink;
      }

      &.red {
        color: @red;
      }

      &.orange {
        color: @orange;
      }

      &.gray {
        color: @gray;
      }

      div {
        line-height: 2.222vh;

        &:first-child {
          font-size: @fontsize-s;
        }

        &:last-child {
          font-size: @fontsize;
          font-family: "Bicubik";
        }
      }
    }

    .item2 {
      flex: 1;
      display: flex;
      width: 20%;
      flex-wrap: wrap;

      .name {
        color: @gray;
        width: 50%;
        text-align: center;
      }

      .num2 {
        width: 50%;
        color: @yellow;
        text-align: left;
      }

      .num1 {
        width: 50%;
        color: @yellow;
        text-align: center;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 1.481vh;
          height: 0.556vh;
          background-color: @yellow;
          left: 1.204vh;
          top: 0.741vh;
        }
      }

      .num3 {
        width: 50%;
        color: @yellow;
        text-align: left;
      }
    }
  }

  .panel-box {
    margin-top: 1.481vh;
    flex-grow: 1;
    overflow: auto;

    .panel-title {
      width: 100%;
      height: @titleHeight;
      line-height: @titleHeight;
      background-color: fade(@darkgray, 40%);

      .panel-title-name {
        font-size: @fontsize-s;
        color: @green;
        display: flex;
        align-items: center;

        i {
          margin: 0 0.556vh 0 1.481vh;
        }

        .sub-title-item {
          .sub-title {
            color: @gray;
            font-size: @fontsize-s;
            margin: 0 0.556vh 0 1.481vh;
          }

          .sub-count {
            font-size: @fontsize-s;
            font-family: "Bicubik";
            font-weight: 500;

            &.write {
              color: @write;
            }

            &.green {
              color: @green;
            }

            &.blue {
              color: @blue;
            }

            &.pink {
              color: @pink;
            }

            &.red {
              color: @red;
            }

            &.orange {
              color: @orange;
            }

            &.gray {
              color: @gray;
            }
          }
        }
      }
    }

    .panel-body {
      height: calc(100% - 7.407vh);
      background-color: fade(@darkgray, 20%);
      padding: 0.741vh;
      overflow: auto;
      margin-bottom: 1.481vh;

      table {
        width: 100%;

        .card {
          border: 0.093vh solid;

          .card-panel {
            display: flex;
            flex-grow: row;

            .card-left {
              width: 40%;
              border-right: 0.093vh dotted;

              .tag {
                color: @write;
                font-size: 14px;
                width: 100%;
                text-align: center;
              }
            }

            .card-right {
              width: 60%;

              .num {
                width: 100%;
                font-size: 13px;
                text-align: right;
                padding-right: 0.278vh;
              }
            }
          }

          .card-percent {
            height: 0.926vh;
            padding: 0.093vh 0.185vh;
            position: relative;
            border-top: 0.093vh solid;
            background-color: transparent;
            display: flex;

            .split-item {
              flex: 1;
              border-right: 0.093vh solid @black;
              z-index: 1;

              &:last-child {
                border: none;
              }
            }

            .percent {
              height: 0.648vh;
              background-color: @yellow;
              position: absolute;
              left: 0.185vh;
              top: 0.093vh;
            }
          }

          &.blue {
            border-color: @darkBlue;
            background-color: fade(@darkBlue, 30%);

            .card-panel {
              .card-left {
                border-color: @darkBlue;
              }

              .card-right {
                .num {
                  color: @darkBlue;
                }
              }
            }

            .card-percent {
              border-color: @darkBlue;
            }
          }

          &.pink {
            border-color: @pink;
            background-color: fade(@pink, 30%);

            .card-panel {
              .card-left {
                border-color: @pink;
              }

              .card-right {
                .num {
                  color: @pink;
                }
              }
            }

            .card-percent {
              border-color: @pink;
            }
          }

          &.orange {
            border-color: @orange;
            background-color: fade(@orange, 30%);

            .card-panel {
              .card-left {
                border-color: @orange;
              }

              .card-right {
                .num {
                  color: @orange;
                }
              }
            }

            .card-percent {
              border-color: @orange;
            }
          }

          &.green {
            border-color: @green;
            background-color: fade(@green, 30%);

            .card-panel {
              .card-left {
                border-color: @green;
              }

              .card-right {
                .num {
                  color: @green;
                }
              }
            }

            .card-percent {
              border-color: @green;
            }
          }

          &.gray {
            border-color: @darkgray;
            background-color: fade(@darkgray, 30%);

            .card-panel {
              .card-left {
                border-color: @darkgray;
              }

              .card-right {
                .num {
                  color: @gray;
                }
              }
            }

            .card-percent {
              border-color: @darkgray;
            }
          }

          &.red {
            border-color: @red;

            .card-panel {
              background-color: @red;

              .card-left {
                border-color: @darkRed;
              }

              .card-right {
                .num {
                  color: @write;
                }
              }
            }

            .card-percent {
              border-color: @red;
            }
          }

          &.write {
            border-color: @write;

            .card-panel {
              background-color: @write;

              .card-left {
                border-color: @black;

                .tag {
                  color: @black;
                }
              }

              .card-right {
                .num {
                  color: @black;
                }
              }
            }

            .card-percent {
              border-color: @write;
            }
          }
        }
      }
    }
  }
}
</style>