<template> <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> </div> </template> <script> import SvgIcon from "@/components/coms/icon/svg-icon.vue"; import { headerCompany } from "@/api/headerNav/header.js"; export default { name: "HomeNav", //首页标题栏 props: { isAll: { type: Boolean, default: false, }, wpId: { type: String, default: "", }, companyid: { type: String, default: "SXJ_RGN" }, currents: { type: Number, default: 0 }, }, components: { SvgIcon }, data() { return { OrganizationList: [], activeTab: 0, headerIndexs: -1, 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", childNode: [], regionList: [ { name: "全国", key: "KGDL_FGS" }, { name: "山西", key: "SXJ_RGN" }, { name: "内蒙", key: "NMM_RGN" }, ], }; }, created() { this.$nextTick(() => { this.$emit("firstRender", this.activeTab, this.showType, this.wpId); }); }, watch: { wpId: { handler(val) { let region = this.regionList.find((item) => item.key == val); if ((val && (region || this.currents == 1)) || this.isAll) { this.getOrganizationList(); } }, immediate: true, }, }, methods: { getOrganizationList() { if (this.currents == 1 && this.wpId.includes("SXJ")) { headerCompany({ regionid: "SXJ_RGN" }).then(({ data }) => { this.childNode = data.data; }); } else { headerCompany({ regionid: this.wpId }).then(({ data }) => { this.childNode = data.data; }); } }, 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) { this.activeTab = index; this.showType = showType; this.$emit( "firstRender", this.activeTab, this.showType, this.wpId, this.wpId == "KGDL_FGS" ? "" : this.companyName ); this.$emit("typeFlag", this.showType, this.enterpriseIndex); }, }, }; </script> <style lang="less" scoped> .heeaderNav { height: 35px; display: flex; align-items: center; margin: 16px 0 16px 20px; } .tab-box { display: inline-block; z-index: 2; display: flex; .tab-item { display: flex; align-items: center; justify-content: center; font-size: 14px; font-family: Microsoft YaHei; cursor: pointer; padding: 3px 14px; 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>