hb_sis_zhfx/src/views/LightMatrix1/LightMatrix1.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">
          <div class="loop"></div>
          <span class="svg-icon svg-icon-gray svg-icon-md">
            <SvgIcon svgid="svg-wind-site"></SvgIcon>
          </span>
        </div>
        <div class="item write" @click="changeShow('jrfj_FDC')">
          <div>接入风机</div>
          <div>{{sourceMap.fcjrnum || '---'}}</div>
        </div>
        <div class="item blue" @click="changeShow('yx_FDC', 1)">
          <div>· 运行</div>
          <div>{{sourceMap.fcyxnum || '---'}}</div>
        </div>
        <div class="item green" @click="changeShow('dj_FDC', 0)">
          <div>· 待机</div>
          <div>{{sourceMap.fcdjnum || '---'}}</div>
        </div>
        <div class="item purple" @click="changeShow('xd_FDC', 5)">
          <div>· 限电</div>
          <div>{{sourceMap.fcxdnum || '---'}}</div>
        </div>
        <div class="item red" @click="changeShow('gz_FDC', 2)">
          <div>· 故障</div>
          <div>{{sourceMap.fcgznum || '---'}}</div>
        </div>
        <div class="item orange" @click="changeShow('jx_FDC', 4)">
          <div>· 检修</div>
          <div>{{sourceMap.fcwhnum || '---'}}</div>
        </div>
        <div class="item write" @click="changeShow('sl_FDC', 6)">
          <div>· 受累</div>
          <div>{{sourceMap.fcslnum || '---'}}</div>
        </div>
        <div class="item gray" @click="changeShow('lx_FDC', 3)">
          <div>· 离线</div>
          <div>{{sourceMap.fclxnum || '---'}}</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="item">
          <div class="loop"></div>
          <span class="svg-icon svg-icon-gray svg-icon-md">
            <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
          </span>
        </div>
        <div class="item write" @click="changeShow('jrfj1_GDC')">
          <div>接入风机</div>
          <div>{{sourceMap.gfjrnum || '---'}}</div>
        </div>
        <div class="item blue" @click="changeShow('yx1_GDC', 1)">
          <div>· 运行</div>
          <div>{{sourceMap.gfyxnum || '---'}}</div>
        </div>
        <div class="item green" @click="changeShow('dj1_GDC', 0)">
          <div>· 待机</div>
          <div>{{sourceMap.gfdjnum || '---'}}</div>
        </div>
        <div class="item purple" @click="changeShow('xd1_GDC', 5)">
          <div>· 限电</div>
          <div>{{sourceMap.gfxdnum || '---'}}</div>
        </div>
        <div class="item red" @click="changeShow('gz1_GDC', 2)">
          <div>· 故障</div>
          <div>{{sourceMap.gfgznum || '---'}}</div>
        </div>
        <div class="item orange" @click="changeShow('jx1_GDC', 4)">
          <div>· 检修</div>
          <div>{{sourceMap.gfwhnum || '---'}}</div>
        </div>
        <div class="item write" @click="changeShow('sl1_GDC', 6)">
          <div>· 受累</div>
          <div>{{sourceMap.gfslnum || '---'}}</div>
        </div>
        <div class="item gray" @click="changeShow('lx1_GDC', 3)">
          <div>· 离线</div>
          <div>{{sourceMap.gflxnum || '---'}}</div>
        </div>
      </div>
      </Col>
    </Row>
    <div class="panel-box">
      <div v-for="(pItem, pIndex) in sourceMap.fjmap" :key="pIndex">
        <div>
          <div class="panel-title">
            <div class="panel-title-name">
              <i class="fa fa-send"></i>
              <span>{{sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId].name || '------'}}</span>
              <div class="sub-title-item" v-for="(fcItem, fcIndex) in fcStateArray" :key="fcIndex">
                <span class="sub-title">{{fcItem.text}}</span>
                <span class="sub-count" :class="fcItem.color">{{sourceMap.fczbmap[sourceMap.fjmap[pIndex][0].wpId][fcItem.key]}}</span>
              </div>
            </div>
          </div>
          <div class="panel-body">
            <table>
              <tbody>
                <tr>
                  <td v-for="(cItem, cIndex) of pItem" :key="cIndex" v-show="cItem.isShow">
                    <div class="card" :class="cItem.color">
                      {{cItem.wtnum}}
                    </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 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";
import { isNumber } from 'util';

export default {
  // 名称
  name: "LightMatrix1",
  // 使用组件
  components: {
    Row,
    Col,
    SvgIcon
  },
  // 数据
  data () {
    return {
      loadingFlg: false, // 遮罩开关
      websocketServe: null, // websocket 服务实例
      sourceMap: {}, // 核心数据
      fillCategory: null, // 过滤条件
      fillFjzt: null, // 过滤条件
      fcStateArray: [{
        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"
      }]
    }
  },
  // 函数
  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;
      }
    },

    // 切换显示种类
    changeShow (category, fjzt, skipFill) {
      if (!skipFill) {
        if (this.fillCategory === category) {
          this.fillCategory = null;
          this.fillFjzt = null;
        } else {
          this.fillCategory = category;
          this.fillFjzt = fjzt;
        }
      }

      let fjmap = this.BASE.deepCopy(this.sourceMap.fjmap);

      fjmap.forEach(pEle => {
        pEle.forEach(cEle => {
          cEle.isShow = true;
          if (!this.fillCategory) {
            cEle.isShow = true;
          } else if (cEle.wpId.indexOf(category.split('_')[1]) !== -1) {
            if (isNumber(fjzt)) {
              cEle.fjzt === fjzt ? (cEle.isShow = true) : (cEle.isShow = false);
            } else {
              cEle.isShow = true;
            }
          } else {
            cEle.isShow = true;
          }
        });
      });
      this.sourceMap.fjmap = fjmap;
    },
  },

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

  beforeDestroy () {
    // 离开页面，销毁 websocket 实例
    this.websocketServe && this.websocketServe.disconnect();
  },

  watch: {
    // 监听 websocket 回调并包装数据用于展示
    '$store.state.windturbineMap': function (res) {

      this.loadingFlg && this.BASE.closeLoading();
      this.loadingFlg = false;
      if (res) {
        let sourceMap = JSON.parse(res);
        let fjmap = [];
        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;
        if (this.fillCategory) {
          this.changeShow(this.fillCategory, this.fillFjzt, true);
        }
      } else {
        this.sourceMap = {};
      }
      console.log(333, JSON.parse(res));
    }
  }
}
</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;

    .item {
      cursor: pointer;
    }

    .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;
      position: relative;

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

      &.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: @fontsize-s;
        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-radius: 4px;
          padding: 0.185vh 0;
          text-align: center;
          border: 1px solid;
          font-size: @fontsize-s;

          &.write {
            color: @black;
            border-color: @write;
            background-color: @write;
          }

          &.green {
            color: @green;
            border-color: @green;
          }

          &.blue {
            color: @darkBlue;
            border-color: @darkBlue;
          }

          &.purple {
            color: @purple;
            border-color: @purple;
          }

          &.red {
            color: @write;
            border-color: @red;
            background-color: @red;
          }

          &.orange {
            color: @orange;
            border-color: @orange;
          }

          &.gray {
            color: @write;
            border-color: @gray;
            background-color: @gray;
          }
        }
      }
    }
  }
}
</style>