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" />
      </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" />
          <!-- <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 />
        </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 {
      WindSites: [
        {
          id: "1",
          text: "某某风电场",
          children: [
            {
              id: "1",
              text: "2E01",
              color: "green",
            },
            {
              id: "2",
              text: "2E01",
              color: "red",
            },
            {
              id: "3",
              text: "2E01",
              color: "blue",
            },
          ],
        },
        {
          id: "2",
          text: "某某风电场",
          children: [
            {
              id: "1",
              text: "2E01",
              color: "green",
            },
            {
              id: "2",
              text: "2E01",
              color: "green",
            },
            {
              id: "3",
              text: "2E01",
              color: "green",
            },
          ],
        },
        {
          id: "2",
          text: "某某风电场",
          children: [
            {
              id: "1",
              text: "2E01",
              color: "green",
            },
            {
              id: "2",
              text: "2E01",
              color: "green",
            },
            {
              id: "3",
              text: "2E01",
              color: "green",
            },
          ],
        },
      ],
      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: function(index) {
      this.InfoBtns.activeIndex = index;
    },
  },
};
</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>