hb_sis_zhfx/src/views/LightMatrix3/LightMatrix3.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">{{ sourceMap[panelData.first.key] || '---' }}</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 v-if="data.calcStr && sourceMap">{{calcGfStr(data.calcStr) || '---'}}</span>
              <span v-else>{{sourceMap[data.key] || '---'}}</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>{{ sourceMap[data.key1] || '---' }}</span>
            </div>
            <div class="panel-item-ri">
              <span>{{ data.text2 }}</span>
              <span>{{ sourceMap[data.key2] || '---' }}</span>
            </div>
          </div>
        </div>
        </Col>
      </Row>
    </div>
    <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="fa fa-send"></i>
            <span>{{sourceMap.fczbmap[pItem[pIndex].wpId].name}}</span>
            <div class="sub-title-item" v-for="(data, index) of tables[0].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">
          <table>
            <tbody>
              <tr>
                <td v-for="(cItem, cIndex) in pItem" :key="cIndex">
                  <div class="card" :class="cItem.color">
                    <span class="center-icon svg-icon svg-icon-md" :class="cItem.color == 'write' ? 'svg-icon-black' : 'svg-icon-write'">
                      <SvgIcon :svgid="mapping[cItem.color]"></SvgIcon>
                    </span>
                    <div class="card-panel">
                      <div class="card-left">
                        <div class="tag">{{ cItem.wtnum }}</div>
                        <div class="num">
                          <i class="fa fa-user"></i>
                          <span>{{ cItem.fdl }}</span>
                        </div>
                      </div>
                      <div class="card-right">
                        <div class="num">
                          <i class="fa fa-user"></i>
                          <span>{{ cItem.gl }}</span>
                        </div>
                        <div class="num">
                          <i class="fa fa-user"></i>
                          <span>{{ cItem.fs }}</span>
                        </div>
                      </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 SvgIcon from "@com/coms/icon/svg-icon.vue";
import util from "@/helper/util.js";

import { datainit, webtest } from "@tools/websocket.js";
import store from "@store/index.js";

export default {
  // 名称
  name: "LightMatrix3",
  // 使用组件
  components: {
    Row,
    Col,
    SvgIcon,
  },
  // 数据
  data () {
    return {
      loadingFlg: false, // 遮罩开关
      websocketServe: null, // websocket 服务实例
      sourceMap: {}, // 核心数据
      mapping: {
        green: "svg-standby",
        blue: "svg-normal-power",
        purple: "svg-limit-power",
        red: "svg-gz-downtime",
        orange: "svg-jx-downtime",
        gray: "svg-offline",
        write: "svg-intranet-involvement",
      },
      panelData: {
        first: {
          icon: "svg-photovoltaic",
          text: "接入风场",
          key: "fcjrnum",
        },
        datas: [
          {
            color: "green",
            name: "待机",
            nameIcon: "svg-standby",
            calcStr: ["fcdjnum", "fcsdtjnum"],
            numIcon: "svg-manual",
            text1: "待风",
            key1: "fcdjnum",
            text2: "手动停机",
            key2: "fcsdtjnum",
          },
          {
            color: "blue",
            name: "运行",
            nameIcon: "svg-normal-power",
            calcStr: ["fczcfdnum", "fcqxjclnum"],
            numIcon: "svg-drop-output",
            text1: "正常发电",
            key1: "fczcfdnum",
            text2: "降出力运行",
            key2: "fcqxjclnum",
          },
          {
            color: "purple",
            name: "限电",
            nameIcon: "svg-limit-power",
            calcStr: ["fcxdjclnum", "fcxdtjnum"],
            numIcon: "svg-downtime",
            text1: "限电降出力",
            key1: "fcxdjclnum",
            text2: "停机",
            key2: "fcxdtjnum",
          },
          {
            color: "red",
            name: "故障",
            nameIcon: "svg-gz-downtime",
            calcStr: ["fcgztjnum", "fccnsltjnum"],
            numIcon: "svg-field-involved",
            text1: "故障停机",
            key1: "fcgztjnum",
            text2: "场内受累",
            key2: "fccnsltjnum",
          },
          {
            color: "orange",
            name: "检休",
            nameIcon: "svg-jx-downtime",
            calcStr: ["fcjcnum", "fccnsljxnum"],
            numIcon: "svg-field-involved",
            text1: "检修停机",
            key1: "fcjxtjnum",
            text2: "产内受累",
            key2: "fccnsljxnum",
          },
          {
            color: "write",
            name: "受累",
            calcStr: ["fcdwslnum", "fchjslnum"],
            nameIcon: "svg-intranet-involvement",
            numIcon: "svg-environment",
            text1: "电网",
            key1: "fcdwslnum",
            text2: "环境",
            key2: "fchjslnum",
          },
          {
            color: "gray",
            name: "离线",
            nameIcon: "svg-offline",
            key: "fclxnum",
            numIcon: "svg-unknown",
            text1: "离线",
            key1: "fclxnum",
            text2: "未知",
            key2: "fcwznum",
          }
        ],
      },
      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: "A-11",
              num1: 12.6,
              num2: 12.6,
              num3: 12.6,
              color: "blue",
            },
          ],
          groupDatas: [],
        },
      ],
    };
  },
  // 函数
  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 'purple';
          break;
        case 6:
          return 'write';
          break;
      }
    },

    calcGfStr (calcStr) {
      return (parseInt(this.sourceMap[calcStr[0]]) + parseInt(this.sourceMap[calcStr[1]])) + "";
    },

    createGroupDatas (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 = [];
      }
    },
  },

  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 = "purple";
      }
      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]));
    }
  },

  mounted () {
    // 渲染后
    let that = this;
    that.loadingFlg = true;
    that.BASE.showLoading();
    that.$nextTick(() => {
      that.websocketServe && that.websocketServe.disconnect();
      that.API.requestData({
        method: "POST",
        subUrl: "admin/websocketdisconnect",
        success () {
          that.websocketServe = datainit("/topic/matrixdetialpushtask");
        }
      });
    });
  },

  watch: {
    // 监听 websocket 回调并包装数据用于展示
    '$store.state.windturbineMap': function (res) {
      this.loadingFlg && this.BASE.closeLoading();
      this.loadingFlg = false;
      if (res) {
        let sourceMap = JSON.parse(res);
        for (let key in sourceMap) {
          if (key !== 'fczbmap' && key !== 'fjmap') {
            sourceMap[key] += '';
          } else if (key === 'fjmap') {
            sourceMap[key].forEach(pItem => {
              pItem.forEach(cItem => {
                cItem.color = this.getColor(cItem.fjzt);
                cItem.isShow = true;
              });
            });
          }
        }
        this.sourceMap = sourceMap;
      } else {
        this.sourceMap = {};
      }
    }
  }

};
</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: 1px solid @gray;
    position: relative;
    padding: 1.111vh 2.222vh;
    background-color: fade(@gray, 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 {
      width: 100%;
      background-color: fade(@gray, 20%);
      display: flex;
      height: @panelHeight;

      .panel-item-gf-left {
        width: @panelHeight;
        height: @panelHeight;
        background-color: fade(@gray, 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: 1px solid fade(@gray, 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-l;
        }
      }
    }

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

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

          .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, 20%);
        color: @green;

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

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

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

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

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

      &.purple {
        background-color: fade(@purple, 20%);
        color: @purple;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          .sub-count {
            font-size: 1.296vh;
            font-family: 'Bicubik';
            font-weight: 500;

            &.write {
              color: @write;
            }

            &.green {
              color: @green;
            }

            &.blue {
              color: @blue;
            }

            &.purple {
              color: @purple;
            }

            &.red {
              color: @red;
            }

            &.orange {
              color: @orange;
            }

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

    .panel-body {
      background-color: fade(@gray, 20%);
      padding: 0.741vh;
      margin-bottom: 1.481vh;

      table {
        width: 100%;

        .card {
          border: 1px solid;
          position: relative;

          .center-icon {
            font-size: 2.222vh;
            position: absolute;
            left: calc(50% - 1.111vh);
            top: calc(50% - 1.111vh);
          }

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

            .card-left {
              width: 50%;
              border-right: 1px solid;

              .tag {
                color: @write;
                font-size: 1.111vh;
                width: 100%;
                text-align: center;
                border-bottom: 1px solid;
                padding: 0.37vh 0;
              }

              .num {
                width: 100%;
                font-size: 1.019vh;
                text-align: left;
                padding-right: 0.278vh;
                padding: 0.37vh 0;

                i {
                  margin: 0 0.37vh;
                }
              }
            }

            .card-right {
              width: 50%;

              .num {
                width: 100%;
                font-size: 1.019vh;
                text-align: left;
                padding-right: 0.278vh;
                padding: 0.37vh 0;

                &:first-child {
                  border-bottom: 1px solid;
                }

                i {
                  margin: 0 0.37vh;
                }
              }
            }
          }

          .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, 30%);

            .center-icon {
              color: @write;
            }

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

                .tag {
                  border-color: @darkBlue;
                }

                .num {
                  color: @darkBlue;
                }
              }

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

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

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

            .center-icon {
              color: @write;
            }

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

                .tag {
                  border-color: @purple;
                }

                .num {
                  color: @purple;
                }
              }

              .card-right {
                .num {
                  color: @purple;
                  border-color: @purple;
                }
              }
            }

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

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

            .center-icon {
              color: @write;
            }

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

                .tag {
                  border-color: @orange;
                }

                .num {
                  color: @orange;
                }
              }

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

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

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

            .center-icon {
              color: @write;
            }

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

                .tag {
                  border-color: @green;
                }

                .num {
                  color: @green;
                }
              }

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

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

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

            .center-icon {
              color: @write;
            }

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

                .tag {
                  border-color: @gray;
                }

                .num {
                  color: @gray;
                }
              }

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

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

          &.red {
            border-color: @red;

            .center-icon {
              color: @write;
            }

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

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

                .tag {
                  border-color: @darkRed;
                }

                .num {
                  color: @write;
                }
              }

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

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

          &.write {
            border-color: @write;

            .center-icon {
              color: @black;
            }

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

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

                .tag {
                  color: @black;
                  border-color: @black;
                }

                .num {
                  color: @black;
                }
              }

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