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

<template>
  <div class="matrix">
    <div class="btn-group-tabs">
      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @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.yxts}}</span>
      </div>
    </div>
    <div class="panel-body" v-for="(pItem, pIndex) of sourceMap.fjmap" :key="pIndex">
      <div class="card" v-for="(cItem, cIndex) of pItem" :key="cIndex" :class="cItem.color">
        <div class="card-panel">
          <div class="card-left">
            <div class="tag">{{ cItem.wtnum }}</div>
          </div>
          <div class="card-right">
            <div class="num">{{ cItem.gl }}</div>
            <div class="num">{{ cItem.fs }}</div>
            <div class="num">{{ cItem.fdjzs }}</div>
          </div>
        </div>
        <div class="card-percent">
          <div class="percent" :style="'width: ' + cItem.lyl + '%'"></div>
        </div>
      </div>
      <!-- 站位用 保证卡片布局最后一行不会有问题 -->
      <i class="blank" v-for="i in pItem.length" :key="i"></i>
    </div>
  </div>
</template>

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

  data () {
    return {
      timmer: null, // 遮罩开关
      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: [
            {
              text: "某某风场",
              code: "mmfdc1",
            },
            {
              text: "某某风场",
              code: "mhsfc",
            },
            {
              text: "某某风场",
              code: "mmfdc2",
            },
            {
              text: "某某风场",
              code: "mmfdc3",
            },
            {
              text: "某某风场",
              code: "mmfdc4",
            },
          ],
        },
        {
          icon: "fa fa-fire-extinguisher",
          btns: [
            {
              text: "某某风场",
              code: "mmgf1",
            },
            {
              text: "某某风场",
              code: "mmgf2",
            },
            {
              text: "某某风场",
              code: "mmgf3",
            },
            {
              text: "某某风场",
              code: "mmgf4",
            },
          ],
        },
      ],
    };
  },

  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: "MHS_FDC"
        },
        success (res) {
          console.log(123123, res.data);
          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 = {};
          }

        },
      });
    },

    select (res) {
      // console.log("res", res);
    }
  },

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

        .card-right {
          width: 60%;

          .num {
            width: 100%;
            font-size: 13px;
            text-align: right;
            padding-right: 0.278vh;
          }
        }
      }

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

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

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

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

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