sis_zhfx/src/views/NewPages/Matrix-Detail.vue

<template>
  <div class="matrix-detail">
    <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">
            <div class="loop"></div>
            <span class="svg-icon svg-icon-gray svg-icon-md">
              <SvgIcon svgid="svg-wind-site"></SvgIcon>
            </span>
          </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="item">
            <div class="loop"></div>
            <span class="svg-icon svg-icon-gray svg-icon-md">
              <SvgIcon :svgid="'svg-photovoltaic'" style="margin: 3px 0px -3px 1px;"></SvgIcon>
            </span>
          </div>
          <div class="item" :class="data.color" v-for="(data, index) of panel2Data.datas" :key="index">
            <div>{{ data.test }}</div>
            <div>{{ data.num }}</div>
          </div>
        </div>
      </Col>
    </Row>
    <div class="panel-box">
      <div v-for="(table, k) of newTables" :key="k">
        <div class="panel-title">
          <div class="panel-title-name">
            <i class="svg-icon svg-icon-sm svg-icon-green">
              <SvgIcon :svgid="'svg-wind-site'"></SvgIcon>
            </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">
          <div class="card" v-for="j of table.count" :key="j" :class="'green'">
            {{ "A" + j }}
          </div>
          <!-- 站位用 保证卡片布局最后一行不会有问题 -->
          <i class="blank" v-for="i in table.count" :key="i"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Row from "@/components/coms/grid/row.vue";
import Col from "@/components/coms/grid/col.vue";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import util from "@/helper/util.js";
export default {
  // 名称
  name: "LightMatrix1",
  // 使用组件
  components: {
    Row,
    Col,
    SvgIcon,
  },
  // 数据
  data() {
    return {
      panel1Data: {
        first: {
          icon: "svg-wind-site",
        },
        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: {
        first: {
          icon: "svg-photovoltaic",
        },
        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,
          },
        ],
      },
      tables: [
        {
          col: 42,
          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: "A01",
              color: "blue",
            },
          ],
        },
      ],
      newTables: [
        {
          count: 43,
        },
        {
          count: 43 * 3,
        },
        {
          count: 43 * 3,
        },
        {
          count: 43 * 3,
        },
        {
          count: 43 * 2,
        },
        {
          count: 43,
        },
        {
          count: 43 * 3,
        },
        {
          count: 43,
        },
        {
          count: 43,
        },
        {
          count: 43 * 6,
        },
      ],
    };
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
    let tempData = [];
    for (let i = 0; i < 200; i++) {
      tempData.push(util.copy(this.tables[0].datas[0]));
      if (i % 13 == 0) {
        tempData[i].color = "green";
      }
      if (i % 17 == 0) {
        tempData[i].color = "pink";
      }
      if (i % 23 == 0) {
        tempData[i].color = "orange";
      }
      if (i % 29 == 0) {
        tempData[i].color = "red";
      }
      if (i % 31 == 0) {
        tempData[i].color = "write";
      }
      if (i % 37 == 0) {
        tempData[i].color = "gray";
      }
    }
    this.tables[0].datas = util.copy(tempData);
    for (let i = 0; i < 5; i++) {
      this.tables.push(util.copy(this.tables[0]));
    }

    this.newTables.forEach((value) => {
      value.subTitleDatas = util.copy(this.tables[0].subTitleDatas);
    });
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

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

.matrix-detail {
  .panel-2 {
    .left-50-16 {
      width: calc(50% - 8px);
    }
  }

  .panel {
    width: 100%;
    border: 1px solid @darkgray;
    position: relative;
    padding: 8px 16px;
    background-color: fade(@darkgray, 20%);
    display: flex;

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

      &.left {
        left: 4px;
      }

      &.right {
        right: 4px;
      }

      &.top {
        top: 4px;
      }

      &.bottom {
        bottom: 4px;
      }
    }

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

      .loop {
        position: absolute;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid @darkgray;
        background-color: fade(@darkgray, 20);
        left: calc(50% - 21px);
        top: calc(50% - 21px);
      }

      &.write {
        color: @write;
      }

      &.green {
        color: @green;
      }

      &.blue {
        color: @darkBlue;
      }

      &.pink {
        color: @pink;
      }

      &.red {
        color: @red;
      }

      &.orange {
        color: @orange;
      }

      &.gray {
        color: @gray;
      }

      div {
        &:first-child {
          font-size: 12px;
        }
        &:last-child {
          font-size: 16px;
          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: 8px;
    flex-grow: 1;

    & > div {
      margin: 4px 0;
    }

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

      .panel-title-name {
        font-size: 12px;
        color: @green;
        display: flex;
        align-items: center;
        padding: 0 16px;

        i {
          margin-right: 8px;
        }

        .sub-title-item {
          display: flex;
          flex: 1;

          .sub-title {
            flex: 0 0 auto;
            color: @gray;
            font-size: 12px;
            margin: 0 8px 0 12px;
          }

          .sub-count {
            flex: 1 0 auto;
            font-size: 14px;
            font-family: "Bicubik";
            font-weight: 500;

            &.write {
              color: @write;
            }

            &.green {
              color: @green;
            }

            &.blue {
              color: @darkBlue;
            }

            &.pink {
              color: @pink;
            }

            &.red {
              color: @red;
            }

            &.orange {
              color: @orange;
            }

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

    .panel-body {
      height: calc(100% - 7.407vh);
      padding: 0;
    //   margin: 4px 0;
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      justify-content: flex-start;

      .blank {
        margin-right: 3px;
        flex: 1 0 40px;
      }

      .card {
        margin-right: 3px;
        margin-top: 2px;
        flex: 1 0 40px;
      }

      .card {
        border-radius: 4px;
        text-align: center;
        border: 1px solid;
        font-size: 12px;
        height: 20px;
        line-height: 20px;

        &.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: @write;
          border-color: @darkgray;
          background-color: @darkgray;
        }
      }
    }
  }
}
</style>