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

<template>
<div>
  <div class="mg-b-8">
    <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
  </div>
  <div class="wind-site-info">
    <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="wind-site-info-body">
      <div class="info-menu mg-b-16">
        <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }" @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
      </div>
      <el-row style="height: calc(100% - 45px);">
        <el-col :span="16" style="position:relative;">
          <!-- 基本信息 使用 v-if 每次点击重新加载  -->
          <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
          <base-info v-show="InfoBtns.activeIndex == 0" :data="sourceMap" />
          <!-- <base-info v-if="InfoBtns.activeIndex == 2" /> -->
          <div style="text-align:center;">
            <StandAloneImg class="sai" v-show="InfoBtns.activeIndex != 0" :activeIndex="InfoBtns.activeIndex" @selectSvg="selectSvg"></StandAloneImg>
          </div>
          <generator class="saig" v-show="InfoBtns.activeIndex != 0" :index="InfoBtns.activeIndex" :data="sourceMap"></generator>
        </el-col>
        <el-col :span="8">
          <warning :data="WarnData" />
        </el-col>
      </el-row>
    </div>
  </div>
</div>
  
  
</template>

<script>
import collapseList from "@/components/coms/collapse/collapse-list.vue";
import BaseInfo from "./Base-Info.vue";
import Warning from "./Warning.vue";
import StandAloneImg from "./StandAloneImg.vue";
import generator from "./pages/generator.vue";
import BtnGroupDouble from "../../../../components/coms/btn/btn-group-double.vue";
export default {
  components: { collapseList, BaseInfo, Warning, StandAloneImg, generator, BtnGroupDouble },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      timmer: null, // 计时器
      wtId: "", // 风机ID
      sourceMap: {},
      WarnData: {},
      WindSites: [],
      InfoBtns: {
        activeIndex: 0,
        data: [
          {
            id: "base-info",
            text: "基本信息",
          },
          {
            id: "generator",
            text: "发电机",
          },
          {
            id: "gear-box",
            text: "齿轮箱",
          },
          {
            id: "pitch",
            text: "变桨",
          },
          {
            id: "yaw",
            text: "偏航",
          },
          {
            id: "hydraulic-pressure",
            text: "液压",
          },
          {
            id: "cabin-info",
            text: "机舱信息",
          },
          // {
          //   id: "principal-axis",
          //   text: "主轴",
          // },
        ],
      },
    };
  },

  methods: {
    onInfoMenuItemClick(item, index) {
      this.InfoBtns.activeIndex = index;
    },

    selectSvg(index) {
      this.InfoBtns.activeIndex = index;
    },

    // 根据风机状态码返回对应 class
    getColor(fjzt) {
      switch (fjzt) {
        case 0:
          return "green";
        case 1:
          return "blue";
        case 2:
          return "red";
        case 3:
          return "gray";
        case 4:
          return "orange";
        case 5:
          return "purple";
        case 6:
          return "write";
      }
    },

    // 请求服务
    requestData(showLoading) {
      this.getSimpleMatrixAll(showLoading);
    },

    // 获取场列表
    getSimpleMatrixAll(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "matrix/findSimpleMatrixAll",
        data: {
          wpId: that.wpId,
        },
        success(res) {
          let WindSites = [];

          res.data.forEach((ele, index) => {
            WindSites.push({
              id: String(index),
              text: ele.wpName,
              children: [],
            });
          });

          res.data.forEach((pEle, pIndex) => {
            pEle.fjls[0].forEach((cEle) => {
              WindSites[pIndex].children.push({
                id: cEle.wtId,
                wpId: cEle.wpId,
                text: cEle.wtnum,
                color: that.getColor(cEle.fjzt),
              });
            });
          });

          that.WindSites = WindSites;

          if (res.data.length) {
            that.wtId = that.wtId || res.data[0].fjls[0][0].wtId;
            that.getWtInfo();
          }
        },
      });
    },

    // 获取风机信息
    getWtInfo() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "monitorwt/findWtInfo",
        data: {
          wtId: that.wtId,
        },
        success(res) {
          let map = ['bjmap','fdjmap','clxmap','yymap','phmap','jcmap'];
          let data = res.data;
          for(var key in data){
            if(map.includes(key) && key.endsWith("map")){
              let json = data[key];
              let arrayai = [];
              let arraydi = [];
              for(var i = 0; i < json.length; i++){
                let obj = {
                  name: json[i][0],
                  unit: json[i][1],
                  value: json[i][3]
                }
                if(json[i][2] == "ai") arrayai.push(obj);
                else arraydi.push(obj);
              }
              data[key] = {ai: arrayai, di: arraydi}
            } 
          } 
          that.sourceMap = data;
          that.getWarnInfo();
        },
      });
    },

    // 获取报警信息
    getWarnInfo() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "monitorwt/findWtWarnInfo",
        data: {
          wtId: that.wtId,
        },
        success(res) {
          that.WarnData = res.data;
        },
      });
    },
    // 点击左侧菜单
    clickMenu(res) {
      this.wtId = res.id;
      this.$router.replace(`/monitor/windsite/info/${this.wpId}/${res.id}`);
      this.getWtInfo();
    },
  },

  created() {
    let that = this;
    that.wpId = that.$route.params.wpId;
	that.wtId = that.$route.params.wtId;
	this.$router.replace(`/monitor/windsite/info/${that.wpId}/${that.wtId}`);
    that.$nextTick(() => {
      that.requestData(false);
      // that.timmer = setInterval(() => {
      //   that.requestData(false);
      // }, that.$store.state.websocketTimeSec);
    });
  },

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

  watch:{
    // "$route"(res){
    //   clearInterval(this.timmer);
    //   this.timmer = null;
    //   this.wpId = res.params.wpId;
    //   this.requestData(false);
    //   this.timmer = setInterval(() => {
    //     this.requestData(false);
    //   }, this.$store.state.websocketTimeSec);
    // }
	sourceMap(res){
		console.log(res)
		this.sourceMap = res;
	}
  }
};
</script>

<style lang="less" scoped>
.wind-site-info {
  display: flex;

  .sai {
    width: 65%;
  }

  .saig {
    position: absolute;
    width: 100%;
    bottom: 0;
  }

  .wind-site-menu {
    flex: 0 0 13.889vh;
    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;
        }
      }
    }
  }
}
</style>