sis_zhfx/src/views/LightMatrix2/LightMatrix2.vue

<template>
  <div class="light-matrix">
    <Row class="panel-2" type="">
      <Col :span="12" class="left-50-16">
      <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>
        <div class="item">
          <i :class="panel1Data.first.icon"></i>
        </div>
        <div class="item" :class="data.color" v-for="(data, index) of panel1Data.datas" :key="index">
          <div>{{ data.test }}</div>
          <div>{{ sourceMap[data.key] }}</div>
        </div>
      </div>
      </Col>
      <Col :span="12" class="left-50-16">
      <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>
        <div class="item2" v-for="(data, index) of panel2Data.datas" :key="index">
          <div class="name">{{ data.test }}</div>
          <div class="num2">{{ sourceMap[data.key] }}</div>
          <!-- <div class="num1">×{{ data.num1 }}</div> -->
          <div class="num3">{{ data.num3 }}</div>
        </div>
      </div>
      </Col>
    </Row>
    <div class="panel-box">
      <div v-for="(pItem, pIndex) of sourceMap.fjmap" :key="pIndex">
        <div>
          <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) in 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">
                      <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>
                      </div>
                      <div class="card-percent">
                        <div class="split-item"></div>
                        <div class="split-item"></div>
                        <div class="split-item"></div>
                        <div class="split-item"></div>
                        <div class="split-item"></div>
                        <div class="percent" :style="'width: ' + cItem.lyl + '%'"></div>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Row from "@/components/coms/grid/row.vue";
import Col from "@/components/coms/grid/col.vue";
import util from "@/helper/util.js";

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

export default {
  // 名称
  name: "LightMatrix2",
  // 使用组件
  components: {
    Row,
    Col,
  },
  // 数据
  data () {
    return {
      loadingFlg: false, // 遮罩开关
      websocketServe: null, // websocket 服务实例
      sourceMap: {}, // 核心数据
      panel1Data: {
        first: {
          icon: "fa fa-user",
        },
        datas: [
          {
            color: "write",
            test: "接入风机",
            key: "fcjrnum"
          },
          {
            color: "blue",
            test: "· 运行",
            key: "fcyxnum"
          },
          {
            color: "green",
            test: "· 待机",
            key: "fcdjnum"
          },
          {
            color: "purple",
            test: "· 限电",
            key: "fcxdnum"
          },
          {
            color: "red",
            test: "· 故障",
            key: "fcgznum"
          },
          {
            color: "orange",
            test: "· 检修",
            key: "fcwhnum"
          },
          {
            color: "write",
            test: "· 受累",
            key: "fcslnum"
          },
          {
            color: "gray",
            test: "· 离线",
            key: "fclxnum"
          },
        ],
      },
      panel2Data: {
        datas: [
          {
            test: "欠发电量",
            num1: 5,
            key: "r0qf",
            num3: "0%~5%",
          },
          {
            test: "欠发电量",
            num1: 4,
            key: "r1qf",
            num3: "5%~10%",
          },
          {
            test: "欠发电量",
            num1: 3,
            key: "r2qf",
            num3: "10%~20%",
          },
          {
            test: "欠发电量",
            num1: 2,
            key: "r3qf",
            num3: "20%~40%",
          },
          {
            test: "欠发电量",
            num1: 1,
            key: "r4qf",
            num3: ">40%",
          },
        ],
      },
      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: "985.97 kw",
              num2: "6.45 m/s",
              percent: 70,
              color: "blue",
            },
          ],
          groupDatas: [],
        },
      ],
    };
  },
  // 函数
  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;
      }
    },

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

    createGroupDatas: function (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/matrixqfpushtask");
        }
      });
    });
  },

  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-2 {
    .left-50-16 {
      width: calc(50% - 0.741vh);
    }
  }

  .panel {
    width: 100%;
    border: 1px solid @gray;
    position: relative;
    padding: 1.111vh 2.222vh;
    background-color: fade(@gray, 20%);
    display: flex;
    height: 6.944vh;

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

    .item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: @write;

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

      &.write {
        color: @write;
      }

      &.green {
        color: @green;
      }

      &.blue {
        color: @darkBlue;
      }

      &.purple {
        color: @purple;
      }

      &.red {
        color: @red;
      }

      &.orange {
        color: @orange;
      }

      &.gray {
        color: @gray;
      }

      div {
        line-height: 2.222vh;

        &:first-child {
          font-size: @fontsize;
        }

        &:last-child {
          font-size: @fontsize-l;
          font-family: 'Bicubik';
        }
      }
    }

    .item2 {
      flex: 1;
      display: flex;
      width: 20%;
      flex-wrap: wrap;

      .name {
        color: @gray;
        width: 50%;
        text-align: center;
      }

      .num2 {
        width: 50%;
        color: @yellow;
        text-align: left;
      }

      .num1 {
        width: 50%;
        color: @yellow;
        text-align: center;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          width: 1.481vh;
          height: 0.556vh;
          background-color: @yellow;
          left: 1.204vh;
          top: 0.741vh;
        }
      }

      .num3 {
        width: 50%;
        color: @yellow;
        text-align: left;
      }
    }
  }

  .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 {
      height: calc(100% - 7.407vh);
      background-color: fade(@gray, 20%);
      padding: 0.741vh;
      overflow: auto;
      margin-bottom: 1.481vh;

      table {
        width: 100%;

        .card {
          border: 1px solid;

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

            .card-left {
              width: 40%;
              border-right: 1px dotted;

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

            .card-right {
              width: 60%;

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

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

            .split-item {
              flex: 1;
              border-right: 1px solid @black;
              z-index: 1;

              &:last-child {
                border: none;
              }
            }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          &.red {
            border-color: @red;

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

              .card-left {
                border-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 {
                  color: @black;
                }
              }

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

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