jn_sis_zhfx/src/components/headerNav/index.vue

<template>
  <!-- <div>
    <ul>
      <li
        @click="headerCheck(0)"
        :class="{ active: headerIndex == 0 }"
        :style="remove ? 'margin-top: 16px;' : ''"
      >
        <i class="active_icon icon-menu"></i>
        <span>全部</span>
      </li>
      <li
        @click="headerCheck(-1)"
        class="wind"
        :class="{
          active: headerIndex == -1,
          forbidden: parentNode?.ZFJTS == 0,
        }"
        :style="remove ? 'margin-top: 16px;' : ''"
      >
        <i class="icon-wind-logo1"></i>
        <span>风电</span>
      </li>
      <li
        @click="headerCheck(-2)"
        class="light"
        :class="{
          active: headerIndex == -2,
          forbidden: parentNode?.ZGFTS == 0,
        }"
        :style="remove ? 'margin-top: 16px;' : ''"
      >
        <i class="icon-photovoltaic"></i>
        <span>光伏</span>
      </li>
      <div class="rightTitle">
        <li
          class="nav_right"
          :class="{ active: headerIndexs == -1 }"
          @click="headerChecks(-1, parentNode.code)"
          @dblclick="hideChild()"
          :style="remove ? 'margin-top: 16px;' : ''"
        >
          <i class="active_icon icon-enterprise"></i>
          <span>{{ parentNode && parentNode.aname }}</span>
        </li>
        <li
          v-for="(item, index) in childNode"
          :key="index"
          class="nav_right"
          @click="headerChecks(index, item.code)"
          :class="{ active: headerIndexs === index }"
          v-show="isShows"
          :style="remove ? 'margin-top: 16px;' : ''"
        >
          <span>{{ parentNode && item.aname }}</span>
        </li>
      </div>
    </ul>
  </div> -->
  <div class="heeaderNav">
    <div class="tab-box">
      <div
        class="tab-item"
        v-for="(tab, index) of tabs"
        :key="index"
        :class="{ active1: activeTab == tab.id }"
        @click.stop="headerCheck(tab.id, tab.show)"
      >
        <span
          class="svg-icon svg-icon-sm"
          :class="activeTab == tab.id ? 'svg-icon-green' : 'svg-icon-write'"
        >
          <SvgIcon :svgid="tab.icon"></SvgIcon>
        </span>
        <span>{{ tab.text }}</span>
      </div>
    </div>
    <div class="rightTitle" v-if="wpId != 'KGDL_FGS'">
      <div
        class="all-enterprise"
        :class="{ active1: enterpriseIndex == 'all' }"
        @click="handleClickEnterprise('all', '清洁能源')"
      >
        <i
          class="svg-icon svg-icon-sm"
          :class="
            $store.state.themeName === 'dark'
              ? enterpriseIndex == 'all'
                ? 'svg-icon-green'
                : 'svg-icon-write'
              : 'svg-icon-black'
          "
        >
          <SvgIcon svgid="svg-enterprise"></SvgIcon>
        </i>
        <span>清洁能源</span>
      </div>
      <div
        :class="{ active1: enterpriseIndex == item.nemCode }"
        class="enterprise-item"
        v-for="(item, index) in childNode"
        :key="index"
        @click="handleClickEnterprise(item.nemCode, item.aname)"
      >
        <span>{{ item.aname }}</span>
      </div>
      <!-- <div
        :class="{ active: enterpriseIndex == 0 }"
        class="enterprise-item"
        @click="handleClickEnterprise(0)"
      >
        <span>清洁能源111</span>
      </div>
      <div
        :class="{ active: enterpriseIndex == 1 }"
        class="enterprise-item"
        @click="handleClickEnterprise(1)"
      >
        <span>清洁能源222</span>
      </div> -->
    </div>
  </div>
</template>

<script>
// import {getOrganization} from "@api/home";
import SvgIcon from "@/components/coms/icon/svg-icon.vue";
import { headerCompany } from "@/api/headerNav/header.js";
import store from "@store/index.js";
export default {
  name: "HomeNav", //首页标题栏
  props: {
    remove: {
      type: Boolean,
      default: true,
    },
    isShows: {
      type: Boolean,
      default: true,
    },
    wpId: {
      type: String,
      default: "",
    },
    companyid: { type: String, default: "SXJ_RGN" },
  },
  components: { SvgIcon },
  data() {
    return {
      OrganizationList: [],
      activeTab: 0,
      headerIndexs: -1,
      isShow: true,
      //   isShows: true,
      nodeCode: "",
      activeNode: "",
      currentMode: "QG",
      wpIds: "",
      tabs: [
        {
          icon: "svg-all",
          text: "全部",
          show: "all",
          id: 0,
        },
        {
          icon: "svg-wind-site",
          text: "风电",
          show: "fc",
          id: -1,
        },
        {
          icon: "svg-photovoltaic",
          text: "光伏",
          show: "gf",
          id: -2,
        },
      ],
      enterpriseIndex: "all",
      companyName: "清洁能源",
      showType: "all",
      safeDay: "",
      childNode: [],
    };
  },
  created() {
    this.getOrganizationList();
    this.$nextTick(() => {
      this.$emit("firstRender", this.activeTab, this.showType, this.wpId);
    });
  },
  methods: {
    getOrganizationList() {
      headerCompany().then(({ data }) => {
        this.childNode = data.data;
      });
      //   this.OrganizationList = data;
      //   this.nodeCode = data[0].code;
      //   this.activeNode = this.nodeCode + this.headerIndex;
    },
    handleClickEnterprise(enterprise, name) {
      this.companyName = name;
      this.enterpriseIndex = enterprise;
      this.$emit("typeFlag", this.showType, this.enterpriseIndex);
      this.$emit(
        "firstRender",
        this.activeTab,
        this.showType,
        enterprise == "all" ? "SXJ_RGN" : enterprise,
        enterprise == "all" ? "清洁能源" : name
      );
    },
    headerCheck(index, showType) {
      //   let wpId =
      //     this.wpId.includes("FDC") || this.wpId.includes("GDC")
      //       ? "SXJ_RGN"
      //       : this.wpId;
      //   let flag = wpId == "SXJ_RGN" ? true : false;
      this.activeTab = index;
      this.showType = showType;
      this.$emit(
        "firstRender",
        this.activeTab,
        this.showType,
        this.wpId,
        this.companyName
      );
      this.$emit("typeFlag", this.showType, this.enterpriseIndex);
    },
    hideChild() {
      //   this.isShows = !this.isShows;
    },
  },
  watch: {
    wpId(val) {
      if (val) {
        if (this.companyidval == "") {
          this.wpIds = val;
        } else {
          this.wpIds = this.companyidval;
        }
      }
    },
  },
  computed: {
    parentNode() {
      const datas = this.OrganizationList.filter((item) => {
        return item.preCode == "";
      });
      return datas[0];
    },
    // childNode() {
    //   const datas = this.OrganizationList.filter((item) => {
    //     return item.preCode != "";
    //   });
    //   return datas;
    // },
  },
};
</script>

<style lang="less" scoped>
.heeaderNav {
  height: 35px;
  display: flex;
  align-items: center;
  margin: 16px 0 16px 20px;
}
.tab-box {
  //   margin: 1.852vh 2.778vh;
  display: inline-block;
  z-index: 2;
  //   position: absolute;
  display: flex;
  //   flex-direction: row;

  .tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    cursor: pointer;
    // width: 9vh;
    padding: 3px 14px;
    // margin-bottom: 1.4815vh;
    margin-right: 5px;

    &.active1 {
      color: @green;
      position: relative;
      background: rgba(84, 183, 90, 0.16);
      border-radius: 16px;

      &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 0.463vh;
        border-top: 0;
        left: 0;
        bottom: 0;
        box-sizing: border-box;
      }
    }

    .svg-icon {
      margin-right: 12px;
      margin-top: 2px;
    }
  }
}

.rightTitle {
  display: flex;
  margin-left: 72px;
  z-index: 5;
  .active1 {
    // background: rgba(84, 183, 90, 0.4);
    color: #05bb4c;
  }
  div {
    display: flex;
    padding: 0 14px;
    align-items: center;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    background: rgba(84, 183, 90, 0.16);
    border-radius: 16px;
    text-align: center;
    margin-right: 15px;
    cursor: pointer;
    .svg-icon {
      margin-right: 12px;
    }
  }
}
</style>