|
|
@@ -0,0 +1,237 @@
|
|
|
+<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: "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 {
|
|
|
+ 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>
|
baiyanting