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

<template>
  <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" @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>
        <el-col :span="16" class="pd-r-16" style="text-align: center;">
          <!-- 基本信息 使用 v-if 每次点击重新加载  -->
          <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
          <base-info v-show="InfoBtns.activeIndex == 0" :data="sourceMap" />
          <!-- <base-info v-if="InfoBtns.activeIndex == 2" /> -->
          <StandAloneImg class="sai" v-show="InfoBtns.activeIndex != 0" :activeIndex="InfoBtns.activeIndex" @selectSvg="selectSvg"></StandAloneImg>
          <generator class="saig" v-show="InfoBtns.activeIndex == 1"></generator>
          <gearbox class="saig" v-show="InfoBtns.activeIndex == 2"></gearbox>
        </el-col>
        <el-col :span="8">
          <warning :data="WarnData" />
        </el-col>
      </el-row>
    </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 gearbox from "./pages/gear-box.vue";
export default {
  components: { collapseList, BaseInfo, Warning, StandAloneImg, generator, gearbox },
  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";
          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) {
      this.getSimpleMatrixAll(showLoading);
    },

    // 获取场列表
    getSimpleMatrixAll (showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "matrix/findSimpleMatrixAll",
        data: {
          wpId: "MHS_FDC"
        },
        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,
                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) {
          that.sourceMap = res.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.getWtInfo();
    }
  },

  created () {
    let that = this;
    that.$nextTick(() => {
      that.requestData(false);
      that.timmer = setInterval(() => {
        that.requestData(false);
      }, that.$store.state.websocketTimeSec);
    });
  },

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

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

  .sai {
    width: 70%;
  }

  .saig {
    margin-top: -100px;
  }

  .wind-site-menu {
    flex: 0 0 13.889vh;
    color: @gray;
    background: fade(@darkgray, 10);
    height: calc(100vh - 8.519vh);

    .wind-site-title {
      font-size: 1.667vh;
      font-weight: 600;
      padding: 1.481vh;
    }
  }

  .wind-site-info-body {
    flex: auto;
    padding-left: 1.481vh;

    .info-menu {
      .info-menu-item {
        display: inline-block;
        padding: 0.741vh 1.481vh;
        border: 1px solid fade(@darkgray, 80);
        border-radius: 4px;
        color: @gray;
        font-size: @fontsize-s;
        font-weight: 600;
        letter-spacing: 1px;
        cursor: pointer;

        &.active {
          color: @white;
          background: fade(@purple, 80);
        }

        & + .info-menu-item {
          margin-left: 0.741vh;
        }
      }
    }
  }
}
</style>