platform_largeScreen/src/components/headerNavSta/index.vue

<template>
  <div class="heeaderNav">
    <div class="tab-box">
      <div
        class="tab-item"
        :data-type="$store.state.moreSty"
        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: "HeaderNavSta", //全景监视标题栏
  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: -1,
      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[data-type~="greenSty"] {
        &.active1 {
            color: @green;
            background: rgba(84, 183, 90, 0.16);
        }
    }
    .tab-item[data-type~="blueSty"] {
        &.active1 {
            color: @darkBlue !important;
            background: rgba(84, 130, 183, 0.16);
        }
    }
  .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 {
      position: relative;
      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>