ims-gyee/src/components/headerNavE/index.vue

<template>
  <div>
    <ul>
      <div class="rightTitle">
        <li>
          <el-select
            v-model="tagListNode"
            placeholder="请选择"
            @change="tagListChang"
          >
            <el-option
              v-show="item.flag"
              v-for="(item, indexe) in tagList"
              :key="indexe"
              :label="item.name"
              :value="item.type"
            >
            </el-option>
          </el-select>
        </li>
        <li>
          <el-select
            v-model="checkNode"
            :placeholder="parentNode?.aname"
            clearable
            :multiple="companyMultiple"
            collapse-tags
            @change="dataChang"
          >
            <el-option
              v-for="(item, indexe) in OrganizationLists"
              :key="indexe"
              :label="item.aname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </li>
        <li v-if="hiddenStation && stationList.length > 0">
          <el-select
            v-model="checkStation"
            placeholder="全部场站"
            clearable
            :multiple="stationMultiple"
            collapse-tags
            @change="dataChangs"
          >
            <el-option
              v-for="(item, index) in stationList"
              :key="index"
              :label="item.aname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </li>
        <li v-if="hiddenProject">
          <div class="station">
            项目：
            <el-select
              size="mini"
              v-model="projectObj"
              placeholder="请选择"
              @change="handleProjectChange(projectObj)"
              clearable
            >
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.aname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </li>
        <li v-if="hiddenLine">
          <div class="station">
            线路：
            <el-select
              size="mini"
              v-model="lineObj"
              placeholder="请选择"
              clearable
              @change="typeClick('1')"
            >
              <el-option
                v-for="item in lineList"
                :key="item.id"
                :label="item.aname"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </li>
        <li v-if="hiddenProject">
          <div class="but">
            <el-button
              round
              size="mini"
              class="buttons active"
              @click="getPerformance"
              >搜索</el-button
            >
            <el-button round size="mini" class="buttons" @click="mxClick"
              >明细</el-button
            >
            <!-- <el-button round size="mini" class="buttons">导出</el-button> -->
          </div>
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
import { GetOrganization, GetStationByCompany } from "@/api/headerNav.js";

export default {
  name: "HomeNav", //首页标题栏
  props: {
    type: {
      type: Number,
      default: -2,
    },
    handType: String,
    codeRight: String,
    codeNums: String, // 公司Code
    stationCode: String, // 场站Code
    shangeColor: String,
    hiddenStation: {
      type: Boolean,
      default: true,
    },
    hiddenProject: {
      type: Boolean,
      default: false,
    },
    hiddenLine: {
      type: Boolean,
      default: false,
    },
    hiddenSearch: {
      type: Boolean,
      default: false,
    },
    stationMultiple: {
      type: Boolean,
      default: false,
    },
    companyMultiple: {
      type: Boolean,
      default: false,
    },
    intoCheckNode: {
      // 是否需要默认选中公司，将codeRight(公司code)传给checkNode，
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      OrganizationLists: [{ id: "JS_RGN", aname: "江苏区域" }], //公司列表
      stationList: [], //场站列表
      checkStation: "", //场站值
      checkNode: "JS_RGN", //公司值
      tagList: [
        { type: -1, flag: true, id: "F", name: "风电" },
        { type: -2, flag: true, id: "G", name: "光伏" }, //类型
      ],
      tagListNode: -2, //类型值
      projectObj: "",
      projectList: [],
      lineObj: "",
      lineList: [],
    };
  },
  async created() {
    await this.getOrganizationLists(this.tagListNode, true);

    if (this.shangeColor != "") {
      this.s = this.shangeColor;
    } else {
      this.s = "all";
    }
  },
  methods: {
    //获取区域公司
    async getOrganizationLists(val, flag) {
      const { data } = await GetOrganization({ type: val });
      this.OrganizationLists = data;
      if (!flag) {
        this.tagList.forEach((item) => {
          if (item.id != val) {
            item.flag = false;
          }
        });
      }
      if (this.checkNode != "") {
        this.getPowerStation(this.checkNode);
      } else {
        this.stationList = "";
      }
      this.$emit("firstRender", this.tagListNode, this.checkNode);
    },
    deepClone(ob) {
      var obj = JSON.stringify(ob);
      var objClone = JSON.parse(obj);
      return objClone;
    },
    // 切换风光水
    tagListChang(val) {
      //   this.tagListNode = val;
      //   if (this.checkNode == "JS_RGN") {
      // this.getOrganizationLists(val, true);
      //   } else {
      // this.getOrganizationLists(val);
      //   }
      if (val == -1) {
        this.$router.push({ path: "/economicsOperation/homePage" });
      } else if (val == -2) {
        this.$router.push({ path: "/economicsOperation/homePageGf" });
      }
    },

    //区域切换
    dataChang(id) {
      //根据区域公司编码获取场站信息
      this.checkStation = "";
      this.checkNode = id;
      if (id != "JS_RGN") {
        let comp = this.OrganizationLists.find((item) => item.id == id);
        this.tagList.forEach((item) => {
          if (item.id != comp.eleType) {
            item.flag = false;
          } else {
            item.flag = true;
          }
        });
        this.tagListNode = comp.eleType == "F" ? -1 : -2;
      } else {
        this.tagList = [
          { type: -1, flag: true, id: "F", name: "风电" },
          { type: -2, flag: true, id: "G", name: "光伏" },
        ];
        this.tagListNode = this.tagList[0].type;
      }
      if (id.length > 0) {
        this.getPowerStation(id);
      } else {
        this.stationList = "";
      }

      this.$emit("firstRender", this.tagListNode, id, "");
    },

    //获取场站信息
    async getPowerStation(val) {
      const { data } = await GetStationByCompany({
        companyids: val,
        type: this.tagListNode,
      });
      this.stationList = data;
    },
    //区域切换
    async dataChangs(val) {
      //根据区域公司编码获取场站信息
      if (val.length == 0) {
        this.checkStation = "";
      }
      this.$emit("firstRender", this.tagListNode, this.checkNode, val);
    },
  },
  watch: {
    type: {
      handler(val) {
        if (val == -1) {
          this.tagListNode = -1;
        } else if (val == -2) {
          this.tagListNode = -2;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .el-input__suffix {
  display: inline-block;
  right: 0 !important;
  width: 80px !important;
}

::v-deep .el-input__suffix .el-icon-circle-close {
  position: absolute;
  top: -7px !important;
  right: 18px !important;
}

::v-deep .el-input__suffix .el-icon-arrow-up {
  display: block !important;

  right: -52px !important;
}

ul {
  user-select: none;
  display: flex;

  .headerRight {
    padding: 0 14px;
    height: 25px;
    line-height: 25px;
    background: rgba(0, 70, 199, 0.2);
    border-radius: 16px;
    text-align: center;
    margin-right: 15px;
    cursor: pointer;

    span {
      width: 29px;
      height: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b3b3b3;
    }

    i {
      font-size: 16px;
      color: #b3b3b3;
      position: relative;
      margin-right: 9px;
      vertical-align: -9%;
    }
  }

  .forbidden {
    background: #666666;
    opacity: 0.5;

    span {
      color: #b3b3b3;
    }
  }

  .active {
    background: rgba(0, 70, 199, 0.4);

    .active_icon {
      color: rgba(28, 153, 255, 1);
    }

    span {
      color: #ffffff;
    }
  }

  .nav_right {
    transition: 0.3s;
  }

  .nav_right:first-of-type {
    margin-left: 30px;
  }

  p {
    width: 60px;
  }

  .rightTitle {
    display: flex;
  }
}

.active.light {
  background: rgba(255, 131, 0, 0.2);

  i {
    color: rgba(255, 131, 0, 1);
  }
}

.active.wind {
  background-color: rgba(0, 70, 199, 0.4);

  i {
    color: #1c99ff;
  }
}

.active.hydraulic {
  background-color: rgba(0, 252, 255, 0.2);

  i {
    color: #00fcff;
  }
}

.active.energy {
  background-color: rgba(230, 59, 13, 0.2);

  i {
    color: #e63b0d;
  }
}
.station {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #b3b3b3;
  margin-right: 10px;
}

.but {
  display: flex;
  flex-direction: row;
  align-content: center;
  margin-left: 20px;
}

.buttons {
  background-color: rgba(0, 70, 199, 0.2);
  border: 1px solid #3b4c6c;
  color: #b3b3b3;
  font-size: 14px;

  &:hover,
  &.active {
    background-color: rgba(0, 70, 199, 0.5);
    color: #ffffff;
  }
}
</style>