hb_sis_zhfx/src/views/WindSite/pages/LightMatrix.vue

<template>
  <div class="light-matrix">
    <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>
      <Row>
        <Col :span="3">
          <div class="panel-item-gf">
            <div class="panel-item-gf-left">
              <span class="svg-icon svg-icon-write svg-icon-md">
                <SvgIcon :svgid="panelData.first.icon"></SvgIcon>
              </span>
            </div>
            <div class="panel-item-gf-right">
              <div class="panel-item-gf-up">{{ panelData.first.text }}</div>
              <div class="panel-item-gf-down">{{ panelData.first.num }}</div>
            </div>
          </div>
        </Col>
        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
          <div class="panel-item" :class="data.color">
            <div class="panel-item-left">
              <div class="panel-item-li">
                <span>{{ data.name }}</span>
                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
                  <SvgIcon :svgid="data.nameIcon"></SvgIcon>
                </span>
              </div>
              <div class="panel-item-li">
                <span>{{ data.num }}</span>
                <span class="svg-icon svg-icon-sm" :class="'svg-icon-' + data.color">
                  <SvgIcon :svgid="data.numIcon"></SvgIcon>
                </span>
              </div>
            </div>
            <div class="panel-item-right">
              <div class="panel-item-ri">
                <span>{{ data.text1 }}</span>
                <span>{{ data.num1 }}</span>
              </div>
              <div class="panel-item-ri">
                <span>{{ data.text2 }}</span>
                <span>{{ data.num2 }}</span>
              </div>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <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 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="(col, j) of datas" :key="j" :class="col.color">
        <div class="card-panel">
          <div class="card-left">
            <div class="tag">{{ col.tag }}</div>
            <div class="icon">
              <span class="svg-icon svg-icon-sm" :class="col.color == 'black' ? 'svg-icon-black' : col.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
                <SvgIcon :svgid="col.icon"></SvgIcon>
              </span>
            </div>
          </div>
          <div class="card-right">
            <div class="num">
              <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
                <SvgIcon svgid="svg-A"></SvgIcon>
              </i>
              <span>{{ col.num1 }}</span>
            </div>
            <div class="num">
              <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
                <SvgIcon svgid="svg-W"></SvgIcon>
              </i>
              <span>{{ col.num2 }}</span>
            </div>
            <div class="num">
              <i class="svg-icon svg-icon-sm" :class="'svg-icon-' + col.color">
                <SvgIcon svgid="svg-V"></SvgIcon>
              </i>
              <span>{{ col.num3 }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 站位用 保证卡片布局最后一行不会有问题 -->
      <i class="blank" v-for="i in datas.length" :key="i"></i>
    </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: "LightMatrix",
  // 使用组件
  components: {
    Row,
    Col,
    SvgIcon,
  },
  // 数据
  data() {
    return {
      panelData: {
        first: {
          icon: "svg-photovoltaic",
          text: "接入光伏",
          num: 256,
        },
        datas: [
          {
            color: "green",
            name: "待机",
            nameIcon: "svg-standby",
            num: 50,
            numIcon: "svg-manual",
            text1: "待风",
            num1: 30,
            text2: "手动停机",
            num2: 30,
          },
          {
            color: "blue",
            name: "运行",
            nameIcon: "svg-normal-power",
            num: 50,
            numIcon: "svg-drop-output",
            text1: "正常发电",
            num1: 30,
            text2: "降出力",
            num2: 30,
          },
          {
            color: "pink",
            name: "限电",
            nameIcon: "svg-limit-power",
            num: 50,
            numIcon: "svg-downtime",
            text1: "降出力",
            num1: 30,
            text2: "停机",
            num2: 30,
          },
          {
            color: "red",
            name: "故障",
            nameIcon: "svg-gz-downtime",
            num: 50,
            numIcon: "svg-field-involved",
            text1: "故障停机",
            num1: 30,
            text2: "场内受累",
            num2: 30,
          },
          {
            color: "orange",
            name: "检测",
            nameIcon: "svg-jx-downtime",
            num: 50,
            numIcon: "svg-field-involved",
            text1: "检修停机",
            num1: 30,
            text2: "产内受累",
            num2: 30,
          },
          {
            color: "gray",
            name: "离线",
            nameIcon: "svg-offline",
            num: 50,
            numIcon: "svg-unknown",
            text1: "离线",
            num1: 30,
            text2: "未知",
            num2: 30,
          },
          {
            color: "write",
            name: "受累",
            nameIcon: "svg-intranet-involvement",
            num: 50,
            numIcon: "svg-environment",
            text1: "电网",
            num1: 30,
            text2: "环境",
            num2: 30,
          },
        ],
      },
      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: 3262.8,
          num2: 12.6,
          num3: 12.6,
          icon: "svg-photovoltaic",
          color: "blue",
        },
      ],
    };
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
    let tempData = [];
    for (let i = 0; i < 195; i++) {
      tempData.push(util.copy(this.datas[0]));
      if (i == 114) {
        tempData[i].color = "green";
      }
      if (i == 115) {
        tempData[i].color = "pink";
      }
      if (i == 116) {
        tempData[i].color = "orange";
      }
      if (i == 117) {
        tempData[i].color = "red";
      }
      if (i == 118) {
        tempData[i].color = "black";
      }
      if (i == 119) {
        tempData[i].color = "gray";
      }
    }
    this.datas = util.copy(tempData);
  },
  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 {
    width: 100%;
    border: 0.093vh solid @darkgray;
    position: relative;
    padding: 1.111vh 2.222vh;
    background-color: fade(@darkgray, 15%);

    .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;
      }
    }

    .panel-item-gf {
      width: 100%;
      background-color: fade(@darkgray, 15%);
      display: flex;
      height: @panelHeight;

      .panel-item-gf-left {
        width: @panelHeight;
        height: @panelHeight;
        background-color: fade(@darkgray, 40%);
        display: flex;
        align-items: center;
        justify-content: center;

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

      .panel-item-gf-right {
        flex-grow: 1;
        color: @write;
        text-align: right;

        .panel-item-gf-up {
          height: @panelHeight / 2;
          border-bottom: 0.093vh solid fade(@darkgray, 40%);
          line-height: @panelHeight / 2;
          padding-right: 1.111vh;
          font-size: @fontsize;
        }

        .panel-item-gf-down {
          height: @panelHeight / 2;
          line-height: @panelHeight / 2;
          padding-right: 1.111vh;
          font-weight: 600;
          font-size: @fontsize;
        }
      }
    }

    .panel-item {
      width: 100%;
      height: @panelHeight;
      display: flex;
      font-size: @fontsize-s;

      .panel-item-left {
        width: @panelHeight;
        height: @panelHeight;

        .panel-item-li {
          width: 100%;
          height: @panelHeight / 2;
          line-height: @panelHeight / 2;
          padding: 0 1.111vh;
          display: flex;
          align-items: center;
          font-size: @fontsize-s;

          .svg-icon {
            margin-left: auto;
          }
        }
      }

      .panel-item-right {
        flex-grow: 1;
        height: @panelHeight;

        .panel-item-ri {
          height: @panelHeight / 2;
          line-height: @panelHeight / 2;
          padding: 0 1.111vh;

          &:first-child {
            border-bottom: 0.093vh solid;
          }

          span {
            &:first-child {
              float: left;
            }

            &:last-child {
              float: right;
              color: @write;
            }
          }
        }
      }

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

        .panel-item-left {
          background-color: fade(@green, 15%);
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: @green;
            }
          }
        }
      }

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

        .panel-item-left {
          background-color: fade(@darkBlue, 15%);
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: @darkBlue;
            }
          }
        }
      }

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

        .panel-item-left {
          background-color: fade(@pink, 15%);
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: @pink;
            }
          }
        }
      }

      &.red {
        background-color: fade(@red, 15%);
        color: @red;

        .panel-item-left {
          background-color: fade(@red, 15%);
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: @red;
            }
          }
        }
      }

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

        .panel-item-left {
          background-color: fade(@orange, 15%);
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: @orange;
            }
          }
        }
      }

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

        .panel-item-left {
          background-color: fade(@darkgray, 15%);
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: @darkgray;
            }
          }
        }
      }

      &.write {
        background-color: fade(@write, 15%);
        color: @write;

        .panel-item-left {
          background-color: fade(@write, 15%);
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: @write;
            }
          }
        }
      }
    }
  }

  .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 {
        display: flex;

        .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 {
    background-color: fade(@darkgray, 20%);
    padding: 0.741vh;
    margin-bottom: 1.481vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .blank {
      margin-right: 4px;
      flex: 1 0 125px;
    }

    .card {
      margin-right: 4px;
      margin-top: 4px;
      flex: 1 0 125px;
    }

    .card {
      border: 1px solid;

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

        .card-left {
          width: 40%;
          border-right: 0.093vh dotted;
          display: flex;
          flex-direction: column;

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

          .icon {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
              font-size: 14px;
            }
          }
        }

        .card-right {
          width: 60%;
          margin-top: 2px;

          .num {
            width: 100%;
            font-size: 14px;
            text-align: left;
            padding-right: 0.278vh;
            display: flex;
            align-items: center;
            justify-content: space-around;

            i {
              margin: 0 0.37vh;
            }
            span {
              flex: 1;
            }
          }
        }
      }

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

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

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

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

            .tag {
              background-color: @darkBlue;
            }

            .icon {
              svg {
                use {
                  fill: @write;
                }
              }
            }
          }

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

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

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

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

            .tag {
              background-color: @pink;
            }

            .icon {
              svg {
                use {
                  fill: @write;
                }
              }
            }
          }

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

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

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

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

            .tag {
              background-color: @orange;
            }

            .icon {
              use {
                fill: @write;
              }
            }
          }

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

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

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

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

            .tag {
              background-color: @green;
            }

            .icon {
              use {
                fill: @write;
              }
            }
          }

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

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

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

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

            .tag {
              background-color: @darkgray;
            }

            .icon {
              use {
                fill: @black;
              }
            }
          }

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

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

      &.red {
        border-color: @red;

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

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

            .tag {
              background-color: @darkRed;
            }

            .icon {
              use {
                fill: @write;
              }
            }
          }

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

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

      &.black {
        border-color: @write;

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

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

            .tag {
              background-color: @darkgray;
            }

            .icon {
              .svg-icon {
                svg {
                  use {
                    fill: @black;
                  }
                }
              }
            }
          }

          .card-right {
            .num {
              color: @black;
            }
          }
        }
      }
    }
  }
}
</style>