hb_sis_zhfx/src/views/WindSite/pages/Inverter-Info.vue

<template>
  <div class="Inverter-Info">
    <!-- <div class="btn-group-tabs">
      <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
    </div>-->
    <div class="box-main">
      <!-- <List class="list" :title="list.title" :list="list.datas" @select="selectList"></List> -->
      <div class="wind-site-menu">
        <div class="wind-site-title">选择逆变器</div>
        <div class="wind-site-body">
          <collapse-list
            :list="WindSites"
            :allowScroll="true"
            scrollHeight="calc(100vh - 175px)"
            @click="clickMenu"
          />
        </div>
      </div>
      <div class="Inverter-Info-body">
        <div class="Inverter-Info-title">
          <div class="title">{{info.name}}</div>

          <div class="title-tools-left">
            <div class="other">逆变器型号：{{info.modelid}}</div>
            <div class="state">
              状态：
              <div class="dot" :class="stateColor"></div>
            </div>
          </div>
          <!-- <div class="title-tools">
            <div class="previous">上一页</div>
            <div class="next">上一页</div>
            <div class="return">返回</div>
          </div>-->
        </div>
        <div class="inverter-datas">
          <div class="inverter-item">
            <div class="inverter-item-info">
              <div class="form">
                <div>
                  <table class="table-form mg-b-8" height="60%">
                    <tr v-for="(aiarr) in aiData" :key="aiarr">
                      <td class="text gray">{{aiarr[0].name}}</td>
                      <td class="value green">{{aiarr[0].value}}</td>
                      <td class="unit gray">{{aiarr[0].unit}}</td>
                      <td class="text gray" v-if="aiarr.length>1">{{aiarr[1].name}}</td>
                      <td class="value green" v-if="aiarr.length>1">{{aiarr[1].value}}</td>
                      <td class="unit gray" v-if="aiarr.length>1">{{aiarr[1].unit}}</td>
                    </tr>
                  </table>
                </div>
                <div>
                  <panel class="line-panel" :title="'开网频率'">
                    <multiple-line-chart :list="lineValue" :units="['']" height="100%" />
                  </panel>
                </div>
              </div>
              <div class="states">
                <div class="counts">
                  <div class="all">
                    <span class="text">全部状态</span>
                    <span class="value">30</span>
                  </div>
                  <div class="error">
                    <span class="text">报警状态</span>
                    <span class="value">30</span>
                  </div>
                </div>
                <div class="state-list">
                  <el-scrollbar>
                    <div class="list-body">
                      <div v-for="item of diAll" :key="item" class="list-item">
                        <div class="text">{{item.name}}</div>
                        <div class="state">
                          <div :class="{ red: item.value == 1, green: item.value != 1 }"></div>
                        </div>
                      </div>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
import List from "@com/coms/list/list.vue";
import Panel from "../../../components/coms/panel/panel.vue";
import MultipleLineChart from "../../../components/chart/line/multiple-line-chart.vue";
import collapseList from "@/components/coms/collapse/collapse-list.vue";
export default {
  // 名称
  name: "Box",
  // 使用组件
  components: {
    // BtnGroup2,
    List,
    Panel,
    MultipleLineChart,
    collapseList
  },
  // 数据
  data() {
    return {
      timmer: null,
      timmer1: null,
      WindSites: [],
      diAll: [],
      diOn: [],
      info: {},
      stateColor: "blue",
      list: {
        title: "逆变器列表",
        datas: [
          {
            text: "1#逆变室",
            color: "blue"
          }
        ]
      },
      wtId: "PL01_01",
      aiData: [],
      lineValue: [
        {
          title: "功率",
          value: [
            {
              text: "00:00",
              value: 0
            }
          ]
        }
      ]
    };
  },
  // 函数
  methods: {
    selectList: function(item) {
      console.log(item);
    },
    select: function(item) {
      console.log(item);
    },
    onReturn: function() {
      console.log("return");
    },
    // 点击左侧菜单
    clickMenu(res) {
      // console.log(res);
      this.wpId = res.wpId;
      this.wtId = res.wtId;
      this.$router.replace(`/monitor/windsite/inverter-info/${res.wpId}/${res.wtId}`);
      this.getData();
      this.getLineChart();
    },
    async buildSelectList() {
      let res = await this.API.requestData({
        method: "POST",
        // baseURL: "http://localhost:8082/",
        subUrl: "matrix/findPVSimpleMatrixAll"
      });
      let WindSites = [];
      res.data.data.forEach((ele, index) => {
        ele.inverterls.forEach(function(inver) {
          // inver["text"] = inver["wtnum"];
          inver["text"] = inver["wtnum"];
          inver["color"] = "blue";
          inver["id"] = inver["wtId"];
          
        });
        WindSites.push({
          id: String(index),
          text: ele.wpName,
          children: ele.inverterls
        });
      });
      this.WindSites = WindSites;
    },
    async getData() {
      let res = await this.API.requestData({
        method: "POST",
        // baseURL: "http://localhost:8082/",
        subUrl: "monitorinverter/findInverterInfo",
        data: {
          wtId: this.wtId
        }
      });
      const aiData = [];
      if (res.data.data.listAI) {
        const arr = res.data.data.listAI;
        for (let index = 0; index < arr.length; index = index + 2) {
          const elem1 = arr[index];
          const elem2 = arr[index + 1];
          aiData.push([elem1, elem2]);
        }
        if (arr.length % 2 == 1) {
          aiData.push([arr[arr.length - 1]]);
        }
      }
      this.aiData = aiData;
      // di
      if (res.data.data.listDI) {
        this.diAll = res.data.data.listDI.allList;
        this.diOn = res.data.data.listDI.onList;
      }
      this.info = res.data.data.info;
    },
    async getLineChart() {
      let res = await this.API.requestData({
        method: "POST",
        // baseURL: "http://localhost:8082/",
        subUrl: "monitorinverter/findInverterPowerLine",
        data: {
          wtId: this.wtId
        }
      });
      let date = new Date();
      date.setHours(0);
      date.setMinutes(0);
      let timt = date.getTime();
      const result = [];
      for (let i = 0; i <= 48; i++) {
        date.setMinutes(i * 30);
        result.push({
          text: new Date(timt + i * 1000 * 60 * 30).formatDate("hh:mm"),
          value: res.data.data[i]
        });
      }
      this.lineValue = [
        {
          title: "功率",
          value: result
        }
      ];
    },
    async getTurbinesState() {
      let that = this;
      let res = await this.API.requestData({
        method: "POST",
        subUrl: "matrix/matrixDetialGfPush"
      });
      const ztmap = {};
      if (res && res.data && res.data.data && res.data.data.fjmap) {
        res.data.data.fjmap.forEach(function(fcList) {
          fcList.forEach(function(fjItem) {
            ztmap[fjItem["wtId"]] = fjItem["fjzt"];
          });
        });
      }
      that.stateColor = that.getColor(ztmap[that.wtId]);
      if (this.WindSites) {
        this.WindSites.forEach(function(ws) {
          if (ws.children) {
            ws.children.forEach(function(fj) {
              fj["color"] = that.getColor(ztmap[fj.wtId]);
            });
          }
        });
      }
    },
    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;
      }
    }
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // debugger;
    let that = this;
    this.wtId = that.$route.params.wtId;
    this.buildSelectList();
    this.getTurbinesState();
    this.getData();
    // this.getDIData();
    this.getLineChart();
    that.timmer = setInterval(() => {
      that.getData();
      // that.getDIData();
      that.getTurbinesState();
    }, 2000);
    that.timmer1 = setInterval(() => {
      that.getLineChart();
    }, 60 * 1000);
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
    clearInterval(this.timmer1);
    this.timmer1 = null;
  }
};
</script>

<style lang="less">
.state-green {
  width: 0.741vh;
  height: 0.741vh;
  background-color: @green;
}

.Inverter-Info {
  width: 100%;
  height: auto;
  .box-main {
    width: 100%;
    height: calc(100vh - 12.963vh);
    display: flex;
    flex-direction: row;
    margin-top: 1.481vh;
    .wind-site-menu {
      flex: 0 0 15vh;
      color: @gray;
      background: fade(@darkgray, 10);
      height: calc(100vh - 122px);
      .wind-site-title {
        font-size: 14px;
        font-weight: 600;
        padding: 16px;
      }
    }
    .wind-site-info-body {
      flex: auto;
      padding-left: 1.481vh;
      .info-menu {
        .info-menu-item {
          display: inline-block;
          border: 1px solid fade(@darkgray, 80);
          border-radius: 2px;
          color: @gray;
          font-size: @fontsize-s;
          letter-spacing: 1px;
          cursor: pointer;
          width: 85px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          &.active {
            color: @white;
            background: fade(@purple, 60);
            border-color: fade(@purple, 60);
          }
          & + .info-menu-item {
            margin-left: 0.741vh;
          }
        }
      }
    }
    .list {
      margin-right: 1.481vh;
      flex: 0 0 auto;
    }

    .Inverter-Info-body {
      flex: 1 0 auto;

      .Inverter-Info-title {
        position: relative;
        background: fade(@darkgray, 40);
        padding: 16px 20px;
        .title {
          font-size: @fontsize;
          color: @green;
        }

        .title-tools {
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          color: @gray-l;
          & > div {
            padding: 16px;
          }
          .return {
            padding-left: 40px;
          }
        }
        .title-tools-left {
          position: absolute;
          top: 0;
          left: 150px;
          // margin-left: 10px;
          display: flex;
          color: @gray-l;

          & > div {
            padding: 16px;
          }

          .return {
            padding-left: 40px;
          }
          .state {
            display: flex;
            align-items: center;
            .dot {
              width: 8px;
              height: 8px;

              &.green {
                background: @green;
              }

              &.yellow {
                background: @yellow;
              }

              &.orange {
                background: @orange;
              }

              &.red {
                background: @red;
              }
              &.blue {
                background: @blue;
              }
            }
          }
        }
      }
      .inverter-datas {
        display: flex;
        height: calc(100% - 53px);
        .inverter-item {
          flex: 0 0 calc(100% - 4px);
          margin: 8px 0;
          .inverter-item-header {
            color: @gray-l;
            background: fade(@gray, 40);
            display: flex;
            height: 37px;
            line-height: 37px;
            padding: 0 16px;
            .name {
              flex: 1 0 auto;
            }
            .other {
              margin-right: 32px;
            }
            .state {
              display: flex;
              align-items: center;
              .dot {
                width: 8px;
                height: 8px;

                &.green {
                  background: @green;
                }

                &.yellow {
                  background: @yellow;
                }

                &.orange {
                  background: @orange;
                }

                &.red {
                  background: @red;
                }
              }
            }
          }
          .inverter-item-info {
            display: flex;
            margin-top: 8px;
            height: calc(100%);

            .form {
              // flex: 0 0 calc(50% -4px);
              flex-basis: 60%;
              position: relative;
              display: flex;
              flex-flow: column;
              // & > div{
              //   flex-basis: 40%;
              // }
              .table-form {
                outline: 1px solid fade(@gray, 40);
                tr td.text {
                  text-align: left;
                  line-height: 37px;
                  padding: 0;
                  padding-left: 32px;
                }
              }
              .line-panel {
                position: absolute;
                bottom: 0;
                width: 100%;
                .panel-body {
                  height: 216px;
                }
              }
            }
            .states {
              // flex: 0 0 calc(50% -4px);
              flex-basis: 40%;
              margin-left: 8px;

              .counts {
                display: flex;
                & > div {
                  flex: 0 0 calc(50% - 4px);
                  height: 37px;
                  line-height: 37px;
                  text-align: center;
                  display: flex;
                  justify-content: space-evenly;
                  font-size: 12px;

                  .value {
                    font-family: @font-family-num;
                    font-size: 16px;
                  }
                }

                .all {
                  background: fade(@gray, 40);
                }

                .error {
                  background: @red;
                  margin-left: 8px;
                }
              }

              .state-list {
                outline: 1px solid fade(@gray, 40);
                margin-top: 8px;
                height: calc(100% - 42px);

                .list-item {
                  display: flex;
                  line-height: 37px;
                  padding: 0 16px;
                  color: @gray;
                  background: fade(@gray, 20);
                  font-size: @fontsize-s;
                  align-items: center;

                  &:nth-child(2n) {
                    background: transparent;
                  }

                  .text {
                    flex: 1 0 auto;
                  }

                  .state {
                    width: 22px;
                    height: 22px;
                    margin-right: 16px;
                    background: #010b0a;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    & > div {
                      width: 14px;
                      height: 14px;
                      border-radius: 50%;

                      &.green {
                        background: @green;
                      }

                      &.red {
                        background: @red;
                      }
                    }
                  }
                }
              }
            }
          }

          & + .inverter-item {
            margin-left: 8px;
          }
        }
        .chart {
          width: 100%;
          height: 100%;
          display: inline-block;
        }
      }
    }
  }
}
</style>