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

<template>
  <div class="matrix">
    <div class="btn-group-tabs">
      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
    </div>
    <div class="panel-title">
      <div class="panel-title-name" v-if="sourceMap">
        <i class="fa fa-send"></i>
        <span>{{ sourceMap.fczbmap.jczbmap.name }}</span>
        <span class="sub-title">接入台数</span>
        <span class="sub-count">{{ sourceMap.fczbmap.jczbmap.jrts }}</span>
      </div>
    </div>
    <div class="panel-body">
      <div class="card" v-for="(cItem, cIndex) of sourceMap.fjmap[0]" :key="cIndex" :class="cItem.color">
        <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="mapping[cItem.color]"></SvgIcon>
              </span>
            </div>
          </div>
          <div class="card-right">
            <div class="num">{{ cItem.fs }} 
				<block v-if='cItem.wpId.indexOf("FDC") !== -1'>m/s</block>
				<block v-else>W/m²</block>
			</div>
			<div class="num" v-if='cItem.wpId.indexOf("FDC") == -1' style="height:0.25rem;"> </div>
            <div class="num">{{ cItem.gl }} kW</div>
            <div class="num" v-if='cItem.wpId.indexOf("FDC") !== -1'>{{ cItem.fdjzs }} rpm</div>
          </div>
        </div>
        <div class="card-percent">
          <div class="percent" :style="'width: ' + cItem.lyl + '%'"></div>
        </div>
      </div>
      <!-- 站位用 保证卡片布局最后一行不会有问题 -->
      <i class="blank" v-for="i in sourceMap.fjmap[0].length" :key="i"></i>
    </div>
  </div>
</template>

<script>
import util from "@/helper/util.js";
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
  // 名称
  name: "Matrix",
  // 使用组件
  components: {
    BtnGroup2,
    SvgIcon,
  },

  data() {
    return {
      timmer: null, // 计时器
      wpId: "",
      selectIndex: 0,
      rowIndex: 0,
      mapping: {
        green: "svg-standby",
        blue: "svg-normal-power",
        pink: "svg-limit-power",
        red: "svg-gz-downtime",
        orange: "svg-jx-downtime",
        gray: "svg-offline",
        black: "svg-intranet-involvement",
      },
      sourceMap: {
        // 核心数据
        fczbmap: {
          jczbmap: {},
        },
        fjmap: [[]],
      },
      col: 15,
      datas: [
        {
          tag: "SG1",
          num1: "985.97 kw",
          num2: "985.97 kw",
          num3: "6.45 m/s",
          percent: 70,
          color: "blue",
        },
      ],
      btnGroups: [
        {
          icon: "fa fa-fire",
          btns: [],
        },
        {
          icon: "fa fa-fire-extinguisher",
          btns: [],
        },
      ],
    };
  },

  methods: {
    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;
      }
    },

    // 请求服务
    requestData(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "matrix/matrixByWpIdPush",
        data: {
          wpId: that.wpId,
        },
        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.color = that.getColor(cItem.fjzt);
                    cItem.isShow = true;
                  });
                });
              }
            }
            that.sourceMap = sourceMap;
          } else {
            that.sourceMap = {};
          }
        },
      });
    },

    getWp() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAllAjax",
        success(res) {
          let btnGroups = [
            {
              icon: "fa fa-fire",
              btns: [],
            },
            {
              icon: "fa fa-fire-extinguisher",
              btns: [],
            },
          ];

          res.data.forEach((ele, index) => {
            if (ele.id.indexOf("FDC") !== -1) {
              btnGroups[0].btns.push({
                text: ele.name,
                code: ele.id,
              });
            } else {
              btnGroups[1].btns.push({
                text: ele.name,
                code: ele.id,
              });
            }
          });

          that.btnGroups = btnGroups;
          that.renderBtnActiveIndex();
        },
      });
    },

    renderBtnActiveIndex() {
      this.btnGroups.forEach((pEle, pIndex) => {
        pEle.btns.forEach((cEle, cIndex) => {
          if (cEle.code === this.wpId) {
            this.rowIndex = pIndex;
            this.selectIndex = cIndex;
          }
        });
      });
    },

    select(res) {
      this.$router.replace({
        path: `/monitor/windsite/matrix/${res.code}`,
      });
    },
  },

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

  mounted() {},

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },

  watch: {
    $route(res) {
      this.wpId = res.params.wpId;
      this.requestData(false);
      this.renderBtnActiveIndex();
    },
  },
};
</script>

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

.matrix {
  width: 100%;
  height: 100%;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;

    .photovoltaic {
      margin-left: 1.481vh;
    }
  }

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

    .panel-title-name {
      font-size: @fontsize-s;
      color: @green;

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

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

      .sub-count {
        font-size: @fontsize-s;
        color: @write;
        font-weight: 600;
      }
    }
  }

  .panel-body {
    height: calc(100% - 9vh);
    background-color: fade(@darkgray, 20%);
    padding: 0.741vh;
    overflow: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;

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

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

          .icon {
            flex-grow: 1;
            height: calc(100% - 16px);
            display: flex;
            align-items: center;
            justify-content: center;

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

        .card-right {
          width: 60%;

          .num {
            width: 100%;
            font-size: 13px;
            text-align: right;
            padding-right: 0.3704vh;
            margin: 0.1852vh 0;
          }
        }
      }

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

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

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

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

            .tag {
              background-color: @darkBlue;
            }
          }

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

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

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

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

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

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

            .tag {
              background-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;

            .tag {
              background-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 {
              background-color: @darkgray;
            }
          }

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

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