web_sh_audit/src/components/layout/Header.vue

<template>
  <div id="layoutHeader">
    <el-row>
      <el-col
        :span="8"
        v-if="$store.state.windowsSize.width >= 1300"
        class="logoBox"
      >
        <div class="logo"></div>
        <div class="title">
          {{
            systemInfo.system_name
              ? systemInfo.system_name
              : "浦东新区资源环境智慧审计平台"
          }}
          <span class="title_version"
            >Version:{{
              systemInfo.version ? systemInfo.version : "版本信息获取失败！"
            }}</span
          >
        </div>
      </el-col>
      <el-col
        :span="2"
        v-if="$store.state.windowsSize.width < 1300"
        class="logoBox"
      >
        <div class="logo"></div>
      </el-col>
      <el-col :span="$store.state.windowsSize.width < 1300 ? 18 : 13">
        <el-menu
          :default-active="ActiveIndex"
          class="el-menu-demo"
          mode="horizontal"
          active-text-color="#74FFFF"
          menu-trigger="hover"
          @select="select"
        >
          <el-menu-item index="1"
            ><i
              class="el-icon-s-home"
              v-show="$store.state.windowsSize.width <= 1700"
            ></i
            ><span v-show="$store.state.windowsSize.width > 1700"
              >首页</span
            ></el-menu-item
          >
          <el-submenu index="2">
            <template slot="title" class="submenu"
              ><i
                class="el-icon-s-order"
                v-show="$store.state.windowsSize.width <= 1700"
              ></i
              ><span v-show="$store.state.windowsSize.width > 1700"
                >疑点筛查</span
              ></template
            >
            <el-menu-item index="2-1">土地资源</el-menu-item>
            <el-menu-item index="2-2">水资源</el-menu-item>
            <el-menu-item index="2-3">林资源</el-menu-item>
            <el-menu-item index="2-4">生态资源</el-menu-item>
            <el-menu-item index="2-5">镇域专题</el-menu-item>
          </el-submenu>
          <el-menu-item index="3"
            ><i
              class="el-icon-s-order"
              v-show="$store.state.windowsSize.width <= 1700"
            ></i
            ><span v-show="$store.state.windowsSize.width > 1700"
              >综合分析</span
            ></el-menu-item
          >
          <el-menu-item index="4"
            ><i
              class="el-icon-s-management"
              v-show="$store.state.windowsSize.width <= 1700"
            ></i
            ><span v-show="$store.state.windowsSize.width > 1700"
              >全流程管理</span
            ></el-menu-item
          >
          <el-submenu index="5">
            <template slot="title"
              ><i
                class="el-icon-s-finance"
                v-show="$store.state.windowsSize.width <= 1700"
              ></i
              ><span v-show="$store.state.windowsSize.width > 1700"
                >智能辅助</span
              ></template
            >
            <el-menu-item index="5-1">法律法规</el-menu-item>
            <el-menu-item index="5-2">频发问题</el-menu-item>
            <el-menu-item index="5-3">指标体系</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col :span="3">
        <div class="user">
          <!-- 我的任务快捷菜单 -->
          <div class="manage-icon" @click="goToMyMission()"></div>
          <!-- <div class="alert-icon">
            <div class="alert-info">12</div>
          </div> -->
          <div class="inner-user">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar
                  size="medium"
                  :src="
                    $store.state.userInfo && $store.state.userInfo.photo
                      ? $store.state.userInfo.photo
                      : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                  "
                ></el-avatar>
                <!-- <div class="inner-user-icon"></div> -->
                <div class="inner-user-text">
                  {{
                    $store.state.userInfo && $store.state.userInfo.username
                      ? $store.state.userInfo.username
                      : userName
                  }}
                </div>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="loginOut">注销登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      systemInfo: {},
      userName: localStorage.getItem("_USER_NAME")
        ? localStorage.getItem("_USER_NAME")
        : "未登录",
      ActiveIndex: "0",
      navData: {
        1: "首页",
        2: "疑点筛查",
        "2-1": "土地资源",
        "2-2": "水资源",
        "2-3": "林资源",
        "2-4": "生态资源",
        "2-5": "镇域专题",
        3: "综合分析",
        4: "全流程管理",
        "5-1": "法律法规",
        "5-2": "频发问题",
        "5-3": "指标体系",
      },
    };
  },
  mounted() {
    this.getActiveIndex(true);
    // 验证是否存在版本更新
    this.getSystemInfo();
  },
  methods: {
    // 请求系统信息
    getSystemInfo() {
      let params = new FormData();
      params.append("columnId", "33");
      params.append("states", "2,3");
      params.append("pageSize", 10);
      params.append("page", 0);
      let sortparam = [{ field: "c_publish_time", orderByType: 2 }];
      params.append("orderBy", JSON.stringify(sortparam));
      this.$Post(this.urlsCollection.selectContentList, params).then(
        (res) => {
          if (res.code === 200 && res.content.data.length > 0) {
            let tableData = res.content.data;
            if (tableData.length > 0) {
              this.systemInfo = tableData[0];
              let systemVersion = localStorage.getItem("SYSTEM_VERSION");
              if (this.systemInfo.c_menus_list) {
                let menus = eval("(" + this.systemInfo.c_menus_list + ")");
                this.$emit("initMenu", menus);
              }

              if (systemVersion) {
                if (systemVersion != this.systemInfo.version) {
                  this.$message.success("新版本已发布！自动更新中！");
                  localStorage.setItem(
                    "SYSTEM_VERSION",
                    this.systemInfo.version
                  );
                  window.location.reload();
                }
              } else {
                localStorage.setItem("SYSTEM_VERSION", this.systemInfo.version);
              }
            }
          } else {
            this.systemInfo = {};
            this.$message.error(res.message);
          }
        },
        (error) => {
          this.systemInfo = {};
          this.$message.error(error);
        }
      );
    },
    // 菜单选择记忆（由于不使用路由，为了防止用户刷新页面后页面丢失，故保存并重新赋值当前页）
    getActiveIndex(status) {
      let _ActiveIndex = "";
      if (this.$store.state.navSelect) {
        if (this.$store.state.navSelect.subIndex) {
          _ActiveIndex =
            this.$store.state.navSelect.index +
            "-" +
            this.$store.state.navSelect.subIndex;
        } else {
          _ActiveIndex = this.$store.state.navSelect.index;
        }
      } else {
        _ActiveIndex = "1";
      }
      if (this.ActiveIndex != _ActiveIndex) {
        this.ActiveIndex = _ActiveIndex;
        if (status) {
          this.select(this.ActiveIndex);
        }
      }
    },
    // 快捷进入我的任务页面
    goToMyMission() {
      this.ActiveIndex = "3";
      this.select(this.ActiveIndex);
      setTimeout(() => {
        this.$bus.$emit("wdrw");
      });
    },
    // 切换菜单事件
    select: function (index) {
      var that = this;
      var name = that.navData[index];
      index = index.split("-");
      that.$emit("navSelect", {
        index: index[0],
        subIndex: index[1],
        name: name,
      });
      // let notFound = ["2-2", "2-3", "2-4", "5-3"];
      // let notFoundState = true;
      // notFound.forEach(item => {
      //   if (item == index) {
      //     this.$message.info("页面开发中，敬请期待！");
      //     notFoundState = false;
      //   }
      // });
      // if (notFoundState) {
      //   index = index.split("-");
      //   that.$emit("navSelect", {
      //     index: index[0],
      //     subIndex: index[1],
      //     name: name
      //   });
      // }
    },
    // 用户菜单
    handleCommand(command) {
      switch (command) {
        case "loginOut":
          this.loginOut();
      }
    },
    // 用户退出操作
    loginOut() {
      this.$store.commit("changeUserInfo", {});
      localStorage.removeItem("TOKEN");
      localStorage.removeItem("USER_ID");
      localStorage.removeItem("USER_NAME");
      this.$router.push("/login");
      const h = this.$createElement;
      this.$notify({
        title: "登出成功",
        message: h("i", { style: "color: teal" }, "用户退出！感谢使用！"),
      });
    },
  },
  watch: {
    "$store.state.navSelect": {
      handler() {
        this.getActiveIndex(false);
      },
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
#layoutHeader {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 60px;
  left: 0px;
  top: 0px;
  // background: url("../../assets/home/header_background.png") no-repeat center;
  background: linear-gradient(180deg, #4279d2 0%, #0942c0 100%);
  background-size: 100% 100%;
  color: #ffffff;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  .logoBox {
    display: flex;
    transform: skew(-45deg);
    position: relative;
    left: -40px;
    height: 60px;
    background: linear-gradient(0deg, #4279d2 0%, #0942c0 100%);
    overflow: hidden;
    flex-wrap: nowrap;
    align-content: center;
  }
  .logo {
    position: relative;
    transform: skew(45deg);
    left: calc(1rem + 40px);
    top: 15px;
    width: 30px;
    height: 30px;
    background: url("../../assets/home/header_title_icon.png") no-repeat center;
  }
  .title {
    position: relative;
    width: 30vw;
    padding-left: 1.5rem;
    transform: skew(45deg);
    line-height: 60px;
    font-size: 32px;
    text-indent: 50px;
    font-weight: 400;
    font-family: YouSheBiaoTiHei;
    letter-spacing: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    &_version {
      position: absolute;
      right: 1.5rem;
      font-size: 12px;
      bottom: 0;
      line-height: 12px;
      padding: 3px 5px;
      border-radius: 2px;
      color: #ffffff;
    }
  }
}

.el-menu-demo /deep/ .el-menu-item,
.el-submenu {
  padding: 0 30px;
  font-size: 24px;
  font-family: pingfangSC;
  font-weight: bold;
  color: #74ffff;
  line-height: 60px;
  border: none !important;
}
.el-menu-demo > .is-active {
  position: relative;
  &::before {
    position: absolute;
    content: "";
    box-sizing: border-box;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #4279d2 0%, #0942c0 100%);
    border-bottom: 4px solid rgb(116, 255, 255);
    transform: skew(-45deg);
    z-index: -1;
  }
}
.el-menu-demo /deep/ .el-menu-item:hover,
.el-menu-demo /deep/ .el-menu-item:focus {
  background: none !important;
}
#layoutHeader /deep/ .el-submenu__title {
  color: #ffffff !important;
  font-size: 24px !important;
}
#layoutHeader
  /deep/
  .el-menu--horizontal
  > .el-submenu
  .el-submenu__title:hover {
  background: none;
}
#layoutHeader /deep/ .el-submenu__title i {
  color: #fff;
}
#layoutHeader /deep/ .el-menu {
  background: transparent;
  border-bottom: 0px;
}
#layoutHeader /deep/ .el-menu-item {
  color: #ffffff;
}
#layoutHeader .user {
  float: right;
  margin-right: 30px;
  cursor: pointer;
  width: 95%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around;
  align-items: center;
  .manage-icon {
    width: 28px;
    height: 28px;
    padding: 15px;
    background: url("../../assets/home/header_manage.png") no-repeat center;
  }
  .alert-icon {
    width: 26px;
    height: 30px;
    position: absolute;
    left: 80px;
    top: 14px;
    background: url("../../assets/home/header_alert.png") no-repeat center;
    .alert-info {
      width: 25px;
      height: 20px;
      position: absolute;
      background: red;
      border-radius: 10px;
      right: -20px;
      top: -10px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .admin-icon {
    width: 41px;
    height: 41px;
    background: #74ffff;
    border: 1px solid #ffffff;
    border-radius: 50%;
    position: absolute;
    left: 80px;
    top: 8px;
  }
  .inner-user {
    width: 46px;
    height: 46px;
    position: absolute;
    right: 15px;
    top: 4px;
    color: #fff;
    &-icon {
      margin: 0 auto;
      width: 35px;
      height: 35px;
      background: #74ffff;
      border: 1px solid #ffffff;
      border-radius: 50%;
    }
    &-text {
      margin: 0 auto;
      width: 39px;
      height: 15px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }
  }
}
</style>