windLifecontrolPro/src/components/commonHeaders.vue

<template>
  <div class="proheader" :class="!switchTheme ? 'themeDarks' : 'themeLights'">
    <el-container>
      <el-header :class="getStyle()">
        <div class="logoSty">
          <img src="../assets/logoGuo_DB1.png" alt="" />
        </div>
        <div class="proMenu">
          <div class="proButton">
            <div
              class="buttonItem"
              v-for="(item, index) in menuData"
              :key="index"
              :class="getColor(item.showBac)"
              @click="changeRoute(item)"
            >
              <img :src="headerMenuImg" alt="" v-if="item.showBac" />
              <span>{{ item.name }}</span>
            </div>
          </div>
          <div class="proSet">
            <div class="settingStop">
              <el-switch v-model="switchTheme" @change="changSwith">
                <template #active-action>
                  <!-- <span class="custom-active-action">T</span> -->
                  <img :src="moon_B" alt="" v-if="!switchTheme" />
                  <img :src="sun_W" alt="" v-else />
                </template>
                <template #inactive-action>
                  <!-- <span class="custom-inactive-action">F</span> -->
                  <img :src="moon_B" alt="" v-if="!switchTheme" />
                  <img :src="sun_B" alt="" v-else />
                </template>
              </el-switch>

              <el-tooltip
                class="box-item"
                effect="light"
                content="自动填报工具"
              >
                <!-- <a href="http://10.127.7.196:9001/script/download"> -->
                <!-- <a href="http://172.16.12.101:9001/script/download"> -->
                <a :href="`${headerReportUrl}:9001/script/download`">
                  <img :src="header_wendang" class="Settingitem downItem" />
                </a>
              </el-tooltip>
              <!-- <el-tooltip class="box-item" effect="light" content="系统设置">
                                <img :src="header_shezhi" class="Settingitem">
                            </el-tooltip> -->
              <el-tooltip class="box-item" effect="light" content="退出">
                <img
                  :src="header_dianyuan"
                  class="Settingitem rightIm"
                  @click="backLogin"
                />
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-header>
    </el-container>
  </div>
</template>

<script>
import httpRequest from "@/utils/request.js";
import header_wendang from "@/assets/images/headerCom/zidongtianbao.png";
import header_shezhi from "@/assets/images/headerCom/shezhi.png";
import header_dianyuan from "@/assets/images/headerCom/guanji.png";
import sun_W from "@/assets/images/headerCom/sun_W.png";
import moon_B from "@/assets/images/headerCom/moon_B.png";
import sun_B from "@/assets/images/headerCom/sun_B.png";
import moon_W from "@/assets/images/headerCom/moon_W.png";
import headerMenuImg from "@/assets/images/headerCom/headerMenu.png";
import { Sunny, Moon } from "@element-plus/icons-vue";
import { apiGetpersonalInformation } from "@/api/api";
import { removeToken } from "@/utils/auth";
export default {
  name: "headerCom",
  data() {
    return {
      SunnyIcon: Sunny,
      MoonIcon: Moon,
      sun_W: sun_W,
      sun_B: sun_B,
      moon_B: moon_B,
      moon_W: moon_W,
      headerMenuImg: headerMenuImg,
      header_wendang: header_wendang,
      header_shezhi: header_shezhi,
      header_dianyuan: header_dianyuan,
      leftIndex: "1",
      currentTime: "",
      showRole: true,
      menuData: [],
      rainW: false,
      userName: "",
      switchTheme: false,
      headerReportUrl: "",
    };
  },
  created() {
    this.headerReportUrl = this.baseReportUrl;
    this.menuData = [
      {
        index: "/home",
        icon: "Menu",
        name: "首页",
        showBac: true,
      },
      {
        index: "/generatingCap/dataFilter/prepare",
        icon: "Histogram",
        name: "发电能力分析",
      },
      {
        index: "/integratedAlarm/realwarning",
        icon: "Histogram",
        name: "综合报警",
      },
      {
        index: "/intelligentReport/gkjlb?name=xinzhuang",
        icon: "PictureFilled",
        name: "智能报表",
      },
      {
        index: "/powerPrediction/index",
        icon: "TrendCharts",
        name: "功率预测",
      },
    ];
  },
  mounted() {
    let that = this;
    this.switchTheme = JSON.parse(window.sessionStorage.getItem("theme"));
    this.$store.commit("changeTheme", this.switchTheme);
    this.$emit("swichFn", this.switchTheme);
    this.getThemeClass(this.switchTheme);
    let userMes = JSON.parse(window.sessionStorage.getItem("userMessage"));
    that.userName = userMes ? userMes.role : "administrator";
    if (this.$route.query.markKey) {
      that.userName = that.$route.query.userid;
    }
    if (userMes && userMes.role === "ordinaryUser") {
      that.showRole = false;
    }
    that.showHeader(that.$route);
  },
  watch: {
    $route: {
      handler: function (route) {
        this.showHeader(route);
      },
      immediate: true,
    },
  },
  methods: {
    changSwith(bool) {
      this.getThemeClass(bool);
      this.$emit("swichFn", bool);
      window.sessionStorage.setItem("theme", JSON.stringify(bool));
      this.$store.commit("changeTheme", bool);
    },
    getThemeClass(bool) {
      if (bool) {
        document.body.classList.remove("nsfStyle");
        if (!document.body.classList.contains("blueStyle")) {
          document.body.classList.add("blueStyle");
        }
      } else {
        document.body.classList.remove("blueStyle");
        if (!document.body.classList.contains("nsfStyle")) {
          document.body.classList.add("nsfStyle");
        }
      }
    },
    showHeader(route) {
      this.menuData.forEach((it) => {
        if (route.path.indexOf("powerPrediction") > -1) {
          if (it.name === "功率预测") {
            it.showBac = true;
          } else {
            it.showBac = false;
          }
        } else if (route.path.indexOf("intelligentReport") > -1) {
          if (it.name === "智能报表") {
            it.showBac = true;
          } else {
            it.showBac = false;
          }
        } else if (route.path.indexOf("generatingCap") > -1) {
          if (it.name === "发电能力分析") {
            it.showBac = true;
          } else {
            it.showBac = false;
          }
        } else if (route.path.indexOf("integratedAlarm") > -1) {
          if (it.name === "综合报警") {
            it.showBac = true;
          } else {
            it.showBac = false;
          }
        } else if (route.path === "/home") {
          if (it.name === "首页") {
            it.showBac = true;
          } else {
            it.showBac = false;
          }
        } else {
          it.showBac = false;
        }
      });
    },
    changeRoute(item) {
      window.sessionStorage.setItem("headerRoute", item.index);
      let params = {};
      if (item.index.indexOf("intelligentReport") > -1) {
        params = {
          name: "xinzhuang",
        };
      }
      this.$router.push({
        path: item.index,
        query: params,
      });
      this.$emit("headerName", item.name);
    },
    // async backLogin() {
    //     let loginName = this.userName
    //     if (loginName) {
    //         await this.LogoutInfor(loginName)
    //     }
    // },
    backLogin() {
      window.sessionStorage.clear();
      this.$router.push({
        path: "/login",
      });
    },
    // 插入登出信息
    LogoutInfor(name) {
      let that = this;
      let onlyData = JSON.parse(window.sessionStorage.getItem("userDatamsg"));
      let loginData = JSON.parse(window.sessionStorage.getItem("loginMsg"));
      if (onlyData) {
        let paramsLogin = onlyData ? onlyData.identifier : loginData.identific;
        let params = {
          identifier: paramsLogin,
          loginName: name,
        };
        apiGetinsertLogoutInformation(params).then((datas) => {
          if (datas) {
            let url = location.origin + "/#/login";
            window.open(url, "_self");
            location.reload();
            removeToken();
          }
        });
      } else {
        let url = location.origin + "/#/login";
        window.open(url, "_self");
        location.reload();
        removeToken();
      }
    },
    getStyle() {
      if (this.$route.path === "/weather") {
        if (this.rainW) {
          return "weatherSty";
        } else {
          return "headerSty";
        }
      }
    },
    getColor(val) {
      let strWea = "";
      if (val) {
        strWea = "changeBacksty";
      } else {
        strWea = "defaultBacksty";
      }
      return strWea;
    },
    //获取个人信息
    getUserMes(id) {
      let params = {
        userId: id,
      };
      apiGetpersonalInformation(params).then((datas) => {
        window.sessionStorage.setItem(
          "userInfo",
          JSON.stringify(datas.data.user)
        );
      });
    },
    changeDate(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    nowTime() {
      let that = this;
      let date = new Date();
      this.statusTimer = setInterval(function () {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        minute = minute < 10 ? "0" + minute : minute;
        var second = date.getSeconds();
        second = second < 10 ? "0" + second : second;
        that.currentTime =
          y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
      }, 1000);
    },
    handleSelect(index) {
      if (this.leftIndex === index) return;
      this.leftIndex = index;
      // this.$router.push({path: index})
      console.log(index);
    },
  },
};
</script>

<style lang="less">
.proheader {
  position: relative;
  width: 100%;
  z-index: 1000;
  height: 50px;

  .weatherSty {
    background: rgb(74, 87, 100);
  }

  .el-header {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    // background: rgb(13, 104, 188);
    // background: rgba(96,103,105,.75);
    color: #fff;
    line-height: 50px;
    height: 50px !important;

    .logoSty {
      padding: 8px 0 0 0;

      img {
        width: 310px;
      }
    }

    .proMenu {
      .proButton {
        display: flex;

        .buttonItem {
          cursor: pointer;
          width: 130px;
          height: 52px;
          line-height: 52px;
          font-size: 14px;
          text-align: center;
          position: relative;

          img {
            position: absolute;
            left: 0;
          }
        }
      }

      .proSet {
        display: flex;
        justify-content: center;
        // width: 260px;

        .settingStop {
          display: flex;
          // width: 260px;
          align-items: center;
          justify-content: center;

          .el-switch {
            margin-left: 26px;
            width: 88px;
            height: 25px;

            .el-switch__input {
              width: 88px;
              height: 25px;
            }

            .el-switch__core {
              width: 88px;
              height: 25px;
              border-radius: 13px;

              .el-switch__action {
                width: 41px;
                height: 21px;
                border-radius: 11px;

                img {
                  width: 15px;
                  height: 15px;
                }
              }
            }
          }

          .el-switch--small.is-checked .el-switch__core .el-switch__action {
            width: 41px;
            height: 21px;
            border-radius: 10px;
            left: calc(100% - 41px) !important;
          }

          .Settingitem {
            color: #fff;
            margin-left: 30px;
            width: 25px;
            height: 25px;
            cursor: pointer;
          }

          .rightIm {
            margin-right: 30px;
          }

          .downItem {
            position: relative;
            top: 7px;
          }
        }
      }
    }
  }
}

.themeDarks {
  border-bottom: 1px solid #3a3a3a;

  .proMenu {
    display: flex;
    align-items: center;

    .proButton {
      border-right: 1px solid #3a3a3a !important;

      .buttonItem {
        border-left: 1px solid #3a3a3a !important;
      }

      .changeBacksty {
        border-bottom: 3px solid #1c99ff !important;
        color: #1c99ff !important;
      }

      .defaultBacksty {
        color: #a2a3a4 !important;
      }

      .defaultweathersty {
        background-color: #0d68bc !important;
      }

      .defaultweatherRainsty {
        background-color: #4a5764 !important;
      }
    }

    .el-switch {
      .el-switch__core {
        background: #000;
        background-image: url("@/assets/images/headerCom/sun_B.png");
        background-repeat: no-repeat;
        background-position: 58px 2px;
        background-size: 20px;

        .el-switch__action {
          background: #1c99ff;
        }
      }
    }
  }
}

.themeLights {
  background: linear-gradient(90deg, #1f53b1, #6962b1) !important;
  border-bottom: 1px solid #7899ff;

  .proMenu {
    display: flex;
    align-items: center;

    .proButton {
      border-right: 1px solid #7899ff !important;

      .buttonItem {
        border-left: 1px solid #7899ff !important;
      }

      .changeBacksty {
        border-bottom: 3px solid #3dc2d3 !important;
        color: #fff !important;
      }

      .defaultBacksty {
        color: #b7c6ff !important;
      }

      .defaultweathersty {
        background-color: #0d68bc !important;
      }

      .defaultweatherRainsty {
        background-color: #4a5764 !important;
      }
    }

    .el-switch {
      .el-switch__core {
        background: #1e3f9a;
        background-image: url("@/assets/images/headerCom/moon_W.png");
        background-repeat: no-repeat;
        background-position: 8px 2px;
        background-size: 20px;

        .el-switch__action {
          background: #fff;
        }
      }
    }
  }
}
</style>