sis_zhfx/src/views/LightMatrix/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">
              <div class="loop"></div>
              <span class="svg-icon svg-icon-gray svg-icon-md">
                <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
              </span>
            </div>
            <div class="panel-item-gf-right">
              <div class="panel-item-gf-up">接入光伏</div>
              <div class="panel-item-gf-down">{{ sourceMap[panelData.first.key] || "---" }}</div>
            </div>
          </div>
          <!-- <div class="panel-item-gf-new">
            <div class="panel-left">
              <i class="svg-icon svg-icon-write">
                <SvgIcon :svgid="'svg-photovoltaic'"></SvgIcon>
              </i>
            </div>
            <div class="panel-right">
              <span class="text">接入光伏</span>
              <span class="value">
                {{ sourceMap[panelData.first.key] || "---" }}
                <span class="unit">台</span>
              </span>
            </div>
          </div> -->
        </Col>
        <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
          <div class="panel-item-new" :class="data.color">
            <div class="panel-left">
              <i class="svg-icon" :class="'svg-icon-' + data.color">
                <SvgIcon :svgid="data.nameIcon"></SvgIcon>
              </i>
              <!-- <span class="text">{{ data.text1 }}</span> -->
            </div>
            <div class="panel-right">
              <span class="text">台数</span>
              <span class="value">
                {{ sourceMap[data.key1] || "---" }}
              </span>
              <span class="unit">台</span>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <el-scrollbar>
      <div class="panel-box">
        <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
          <div class="panel-title">
            <div class="panel-title-name">
              <i class="svg-icon svg-icon-sm svg-icon-green">
                <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
              </i>
              <span>{{ sourceMap.fczbmap[pItem[pIndex].wpId].name }}</span>
              <div class="sub-title-item" v-for="(data, index) of tables.subTitleDatas" :key="index">
                <span class="sub-title">{{ data.text }}</span>
                <span class="sub-count" :class="data.color">{{ sourceMap.fczbmap[pItem[pIndex].wpId][data.key] }}</span>
              </div>
            </div>
          </div>
          <div class="panel-body">
            <div class="card" v-for="(cItem, cIndex) in pItem" :key="cIndex" :class="cItem.color" @click="gotoInverter(cItem)">
              <div class="card-panel">
                <div class="card-left">
                  <div class="tag">{{ cItem.wtnum }}</div>
                  <div class="icon">
                    <span class="svg-icon svg-icon-sm" :class="cItem.color == 'black' ? 'svg-icon-black' : cItem.color == 'gray' ? 'svg-icon-gray' : 'svg-icon-write'">
                      <SvgIcon :svgid="cItem.icon"></SvgIcon>
                    </span>
                  </div>
                </div>
                <div class="card-right">
                  <div class="num">
                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
                      <SvgIcon svgid="svg-A"></SvgIcon>
                    </i>
                    <span>{{ cItem.fdl }}</span>
                  </div>
                  <div class="num">
                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
                      <SvgIcon svgid="svg-W"></SvgIcon>
                    </i>
                    <span>{{ cItem.gl }}</span>
                  </div>
                  <div class="num">
                    <i class="svg-icon svg-icon-sm" :class="cItem.color != 'red' ? 'svg-icon-' + cItem.color : 'svg-icon-white'">
                      <SvgIcon svgid="svg-V"></SvgIcon>
                    </i>
                    <span>{{ cItem.fs }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 站位用 保证卡片布局最后一行不会有问题 -->
            <i class="blank" v-for="i in pItem.length" :key="i"></i>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import Row from "@com/coms/grid/row.vue";
import Col from "@com/coms/grid/col.vue";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import util from "@/helper/util.js";

import store from "@store/index.js";

export default {
  // 名称
  name: "LightMatrix",

  // 使用组件
  components: {
    Row,
    Col,
    SvgIcon,
  },

  // 数据
  data() {
    return {
      timmer: null, // 计时器
      sourceMap: {}, // 核心数据
      panelData: {
        first: {
          icon: "svg-photovoltaic",
          text: "接入光伏",
          key: "gfjrnum",
        },
        datas: [
          {
            color: "green",
            name: "待机",
            nameIcon: "svg-standby",
            numIcon: "svg-manual",
            text1: "待风",
            key1: "gfdjts",
            text2: "手动停机",
            key2: "gfsdtjnum",
          },
          {
            color: "purple",
            name: "运行",
            nameIcon: "svg-normal-power",
            numIcon: "svg-drop-output",
            text1: "正常发电",
            key1: "gfyxts",
            text2: "降出力运行",
            key2: "gfqxjclnum",
          },
          {
            color: "pink",
            name: "限电",
            nameIcon: "svg-limit-power",
            numIcon: "svg-downtime",
            text1: "限电降出力",
            key1: "gfxdts",
            text2: "停机",
            key2: "gfxdtjnum",
          },
          {
            color: "red",
            name: "故障",
            nameIcon: "svg-gz-downtime",
            numIcon: "svg-field-involved",
            text1: "故障停机",
            key1: "gfgzts",
            text2: "场内受累",
            key2: "gfcnsltjnum",
          },
          {
            color: "orange",
            name: "检休",
            nameIcon: "svg-jx-downtime",
            numIcon: "svg-field-involved",
            text1: "检修停机",
            key1: "gfwhts",
            text2: "产内受累",
            key2: "gfcnsljxnum",
          },
          {
            color: "write",
            name: "受累",
            nameIcon: "svg-intranet-involvement",
            numIcon: "svg-environment",
            text1: "电网",
            key1: "gfslts",
            text2: "环境",
            key2: "gfhjslnum",
          },
          {
            color: "gray",
            name: "离线",
            nameIcon: "svg-offline",
            key: "gflxnum",
            numIcon: "svg-unknown",
            text1: "离线",
            key1: "gflxts",
            text2: "未知",
            key2: "gfwznum",
          },
        ],
      },
      tables: [
        {
          col: 15,
          subTitleDatas: [
            {
              text: "接入台数",
              color: "write",
              key: "jrts",
            },
            {
              text: "待机台数",
              color: "green",
              key: "djts",
            },
            {
              text: "并网台数",
              color: "blue",
              key: "yxts",
            },
            {
              text: "限电台数",
              color: "purple",
              key: "xdts",
            },
            {
              text: "故障台数",
              color: "red",
              key: "gzts",
            },
            {
              text: "检修台数",
              color: "orange",
              key: "whts",
            },
            {
              text: "受累台数",
              color: "write",
              key: "slts",
            },
            {
              text: "离线台数",
              color: "gray",
              key: "lxts",
            },
            {
              text: "风速",
              color: "gray",
              key: "ssfs",
            },
            {
              text: "预测功率",
              color: "gray",
              key: "ycgl",
            },
            {
              text: "保证功率",
              color: "gray",
              key: "bzgl",
            },
            {
              text: "应发功率",
              color: "gray",
              key: "yfgl",
            },
            {
              text: "实际功率",
              color: "gray",
              key: "sjgl",
            },
            {
              text: "AGC指令",
              color: "gray",
              key: "agcygsd",
            },
            {
              text: "出线功率",
              color: "gray",
              key: "agccxyg",
            },
          ],
          datas: [
            {
              tag: "01#",
              num1: 3262.8,
              num2: 12.6,
              num3: 12.6,
              icon: "svg-photovoltaic",
              color: "blue",
            },
          ],
        },
      ],
    };
  },

  // 函数
  methods: {
    // 根据风机状态码返回对应 class
    getColor(fjzt) {
      switch (fjzt) {
        case 0:
          return "green";
          break;
        case 1:
          return "blue";
          break;
        case 2:
          return "red";
          break;
        case 3:
          return "gray";
          break;
        case 4:
          return "orange";
          break;
        case 5:
          return "pink";
          break;
        case 6:
          return "pink";
          break;
      }
    },

    // 请求服务
    requestData(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "matrix/matrixDetialGfPush",
        success(res) {
          if (res.data) {
            let sourceMap = res.data;
            for (let key in sourceMap) {
              if (key !== "fczbmap" && key !== "fjmap") {
                sourceMap[key] += "";
              } else if (key === "fjmap") {
                sourceMap[key].forEach((pItem) => {
                  pItem.forEach((cItem) => {
                    cItem.icon = "svg-photovoltaic";
                    cItem.color = that.getColor(cItem.fjzt);
                    cItem.isShow = true;
                  });
                });
              }
            }
            that.sourceMap = sourceMap;
          } else {
            that.sourceMap = {};
          }
        },
      });
    },
    gotoInverter(item){
      this.$router.push({
        path: `/monitor/windsite/inverter-info/${item.wpId}/${item.wtId}`,
      });
    }
  },

  created() {
    let that = this;
    that.$nextTick(() => {
      that.requestData(false);
      that.timmer = setInterval(() => {
        that.requestData(false);
      }, that.$store.state.websocketTimeSec);
    });
  },

  mounted() {},

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
};
</script>

<style lang="less" scoped>
@panelHeight: 60px;
@titleHeight: 26px;

.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: 8px 16px;
    background-color: fade(@darkgray, 20%);

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

      &.left {
        left: 4px;
      }

      &.right {
        right: 4px;
      }

      &.top {
        top: 4px;
      }

      &.bottom {
        bottom: 4px;
      }
    }

    .panel-item-gf {
      flex: 0 0 auto;
      margin: 0 24px;
      display: flex;
      height: @panelHeight;

      .panel-item-gf-left {
        width: @panelHeight;
        height: @panelHeight;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .loop {
          position: absolute;
          width: 4.444vh;
          height: 4.444vh;
          border-radius: 50%;
          border: 0.093vh solid @darkgray;
          background-color: fade(@darkgray, 20);
          left: calc(50% - 2.222vh);
          top: calc(50% - 2.222vh);
        }
      }

      .panel-item-gf-right {
        color: @write;
        text-align: right;
        margin-left: 24px;

        .panel-item-gf-up {
          color: @gray;
          height: @panelHeight / 2;
          line-height: @panelHeight / 2;
          font-size: 14px;
        }

        .panel-item-gf-down {
          height: @panelHeight / 2;
          line-height: @panelHeight / 2;
          font-weight: 600;
          font-size: 16px;
        }
      }
    }

    .panel-item-gf-new {
      display: flex;
      height: @panelHeight;
      align-items: center;
      justify-content: center;

      .panel-left {
        i {
          width: 100%;
          height: 100%;
          display: block;
          padding: 10px 15px;
          border-radius: 50%;
          box-shadow: inset 1.5px -1px 1px 0px @green;

          svg {
            margin-top: 0.7407vh;
          }
        }
      }

      .panel-right {
        display: flex;
        flex-direction: column;
        padding-left: 2.2222vh;

        .text {
          color: @green;
          font-size: @fontsize-s;
          padding-bottom: 0.7407vh;
        }

        .value {
          font-size: 2.2222vh;
          .unit {
            font-size: @fontsize-s;
            padding-left: 0.7407vh;
          }
        }
      }
    }

    .panel-item-new {
      display: flex;
      height: 60px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid;

      .panel-left {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 30px;
        line-height: 30px;
        flex: 1 0 auto;

        i svg {
          width: 16px;
          height: 16px;
        }

        .text {
          font-size: 12px;
          line-height: 1;
          margin-top: 4px;
        }
      }

      .panel-right {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        line-height: 30px;
        padding: 0 8px;

        .text {
          font-size: 14px;
        }

        .value {
          color: @white;
          font-size: 16px;
        }
        .unit {
        }
      }

      &.green {
        border-color: fade(@green, 50);

        i svg {
          margin-left: 8px;
        }

        .panel-left {
          background-color: fade(@green, 25);
          border-color: fade(@green, 50);
        }

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

      &.purple {
        border-color: fade(@purple, 50);
        .panel-left {
          background-color: fade(@purple, 25);
          border-color: fade(@purple, 50);
        }

        .panel-right {
          background-color: fade(@purple, 15);
        }
      }

      &.pink {
        border-color: fade(@pink, 50);
        .panel-left {
          background-color: fade(@pink, 25);
          border-color: fade(@pink, 50);
        }

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

      &.red {
        border-color: fade(@red, 50);
        .panel-left {
          background-color: fade(@red, 25);
          border-color: fade(@red, 50);
        }

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

      &.orange {
        border-color: fade(@orange, 50);
        .panel-left {
          background-color: fade(@orange, 25);
          border-color: fade(@orange, 50);
        }

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

      &.gray {
        border-color: fade(@gray, 50);
        .panel-left {
          background-color: fade(@gray, 25);
          border-color: fade(@gray, 50);
        }

        .panel-right {
          background-color: fade(@gray, 15);
        }
      }

      &.white {
        border-color: fade(@white, 50);
        .panel-left {
          background-color: fade(@white, 25);
          border-color: fade(@white, 50);
        }

        .panel-right {
          background-color: fade(@white, 15);
        }
      }
    }
  }

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

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

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

        i {
          margin-right: 0.7407vh;
        }

        .sub-title-item {
          display: flex;
          flex: 0 0 110px;

          .sub-title {
            flex: 0 0 auto;
            font-size: 12px;
            color: @gray;
            margin: 0 0.556vh 0 1.481vh;
            padding-top: 1px;
          }

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

            &.write {
              color: @write;
            }

            &.green {
              color: @green;
            }

            &.blue {
              color: @darkBlue;
            }

            &.pink {
              color: @pink;
            }

            &.red {
              color: @red;
            }

            &.orange {
              color: @orange;
            }

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

    .panel-body {
      background-color: fade(@darkgray, 20%);
      padding: 4px 8px 8px 8px;
      margin-bottom: 8px;
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

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

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

      .card {
        border: 1px solid;
        cursor: pointer;
        .card-panel {
          display: flex;
          flex-grow: row;

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

            .tag {
              color: @write;
              font-size: 12px;
              width: 100%;
              text-align: center;
              line-height: 1.5;
            }

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

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

          .card-right {
            margin-top: 2px;

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

              i {
                margin: 0 2px 0 4px;
              }
              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: fade(@darkBlue, 30);
              }

              .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: fade(@pink, 30);
              }

              .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: fade(@orange, 30);
              }

              .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: fade(@green, 30);
              }

              .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: fade(@darkgray, 30%);
              }

              .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: fade(@darkRed, 50%);
              }

              .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: fade(@darkgray, 80%);
              }

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

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