zjyzt_gis_master_web_ui/src/views/Home.vue

<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="banner">
          <div class="login_content">
            <div class="before_login" v-if="!loginStatus">
              用户名：<el-input
                v-model="username"
                placeholder="请输入用户名"
              ></el-input>
              密码：<el-input
                v-model="password"
                placeholder="请输入密码"
                show-password
              ></el-input>
              <el-button @click="loginFunc">登录</el-button>
            </div>
            <div class="after_login" v-if="loginStatus">
              {{ userInfo.username }}
              <el-button @click="logoutFunc">退出</el-button>
            </div>
          </div>
        </div>
        <div class="func">
          <div>
            <el-menu
              :default-active="showMenuIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleMenuSelect"
            >
              <el-menu-item
                v-for="(item, index) in funcArr"
                :key="index"
                :index="item.index"
                >{{ item.label }}</el-menu-item
              >
            </el-menu>
          </div>
        </div>
      </el-header>
      <el-container class="router_container">
        <el-main>
          <ComprehensiveDisplay
            v-if="showIndex == '1'"
            v-bind="{
              index: 1,
            }"
          ></ComprehensiveDisplay>
          <DataLayer
            v-if="showIndex == '2'"
            v-bind="{
              index: 2,
            }"
          ></DataLayer>
          <DataQualityInspection
            v-if="showIndex == '3'"
            v-bind="{
              index: 3,
            }"
          ></DataQualityInspection>
          <DataAccess
            v-if="showIndex == '4'"
            v-bind="{
              index: 4,
            }"
          ></DataAccess>
          <DataDisplay
            v-if="showIndex == '5'"
            v-bind="{
              index: 5,
            }"
          ></DataDisplay>
          <DataServices
            v-if="showIndex == '6'"
            v-bind="{
              index: 6,
            }"
          ></DataServices>
          <Utilities
            v-if="showIndex == '7'"
            v-bind="{
              index: 7,
            }"
          ></Utilities>
          <SecondaryDevelopment
            v-if="showIndex == '8'"
            v-bind="{
              index: 8,
            }"
          ></SecondaryDevelopment>
          <SystemManagement
            v-if="showIndex == '9'"
            v-bind="{
              index: 9,
            }"
          ></SystemManagement>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import login from "@/utils/login";
import general from "@/api/general";
import icon from "@/api/icon";
export default {
  name: "Home",
  data() {
    return {
      username: "",
      password: "",
      loginStatus: false,
      userInfo: null,
      requestCode: systemConfig.requestCode,
      permissionUnlogin: [
        10, 
        20, 21, 22, 
        30, 31, 32, 
        40, 41, 42, 43, 44, 
        50, 51, 52, 
        60, 61, 62,63, 64, 
        70, 71, 72, 73, 74, 75, 
        80, 81, 82, 83, 
        90, 91, 92,
      ],
      funcArr: null,
      showMenuIndex: "1",
      showIndex: "1",
    };
  },
  components: {
    ComprehensiveDisplay: () => import("@/views/ComprehensiveDisplay.vue"),
    DataLayer: () => import("@/views/DataLayer.vue"),
    DataQualityInspection: () => import("@/views/DataQualityInspection.vue"),
    DataAccess: () => import("@/views/DataAccess.vue"),
    DataDisplay: () => import("@/views/DataDisplay.vue"),
    DataServices: () => import("@/views/DataServices.vue"),
    Utilities: () => import("@/views/Utilities.vue"),
    SecondaryDevelopment: () => import("@/views/SecondaryDevelopment.vue"),
    SystemManagement: () => import("@/views/SystemManagement.vue"),
    // 综合展示
    // ComprehensiveDisplay
    // 数据图层
    // DataLayer
    // 数据质检
    // DataQualityInspection
    // 数据接入
    // DataAccess
    // 数据展示
    // DataDisplay
    // 数据服务
    // DataServices
    // 实用工具
    // Utilities
    // 二次开发
    // SecondaryDevelopment
    // 系统管理
    // SystemManagement
  },
  beforeCreate() {
    window.loginFunc = this.loginFunc;
    window.checkRequestCode = this.checkRequestCode;
    window.getMenu = this.getMenu;
    window.getIcon = this.getIcon;
  },
  created() {
    if (this.$store.getters.getUserState) {
      this.userInfo = this.$store.getters.getUserInfo;
      this.loginStatus = true;
      this.permissionFiltering([
        10, 20, 21, 30, 31, 32, 40, 41, 42, 43, 44, 50, 51, 52, 60, 61, 62, 63,
        64, 70, 71, 72, 73, 74, 75, 80, 81, 82, 83, 90, 91, 92,
      ]);
    } else {
      this.permissionFilteringUnlogin();
    }

    this.getMenu();
    this.getIcon();
  },
  mounted() {
    this.funcArr = this.$store.getters.getMenuListTotal;
  },
  methods: {
    handleMenuSelect(index) {
      this.showIndex = index;
    },
    // 登录
    loginFunc() {
      let that = this;
      login(this.username, this.password)
        .then((result) => {
          that.loginStatus = true;
          that.userInfo = result.content;
          that.$store.commit("setUserInfo", result.content);
          that.$store.commit("setToken", result.message);
          that.$store.commit("setUserState", true);
          // 页面刷新
          location.reload();
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },
    // 退出
    logoutFunc() {
      this.loginStatus = false;
      this.userInfo = null;
      this.$store.commit("setUserInfo", []);
      this.$store.commit("setToken", "");
      this.$store.commit("setUserState", false);
      // 页面刷新
      location.reload();
    },
    // 权限筛选
    permissionFiltering(permissionArr) {
      let list = JSON.parse(
        JSON.stringify(this.$store.getters.getMenuListTotal)
      );
      list = list.filter(function (item) {
        if (permissionArr.indexOf(item.permission) > -1) {
          let children = null;
          if (item.children) {
            children = item.children.filter(function (_item) {
              if (!_item.permission) {
                return true; // 未有权限字段，不做判断
              }
              if (permissionArr.indexOf(_item.permission) > -1) {
                return true;
              } else {
                return false;
              }
            });
            item.children = children;
            return true;
          } else {
            return true;
          }
        } else {
          return false;
        }
      });
      this.$store.commit("setMenuListTotal", list);
    },
    //
    permissionFilteringUnlogin() {
      this.permissionFiltering(this.permissionUnlogin);
    },
    // 访问接口反馈
    checkRequestCode(result) {
      let that = this;
      return new Promise((resolve, reject) => {
        if (result.code == 212) {
          let obj = that.getParams();
          let autologin1 = obj.autologin;
          let autologin2 = localStorage.getItem("autologin");
          if (
            autologin1 == 1 ||
            autologin2 != null ||
            autologin2 != undefined
          ) {
            that.loginFunc();
          } else {
            that.$store.commit("setToken", "");
            that.$store.commit("setUserState", false);
          }
        } else {
          let code = that.requestCode[result.code];
          if (code == 206 || code == 207 || code == 208) {
            this.$router.push({
              path: "/error",
            });
          } else {
            that.$message({
              type: "warning",
              message: that.requestCode[result.code],
            });
          }
        }
      });
    },
    // 获取url参数
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 获取图层
    getMenu() {
      let that = this;
      general
        .getLayerList()
        .then(function (result) {
          if (result.code == 200) {
            that.$store.commit("setLayerList", result.content);
          } else {
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },
    // 获取icon
    getIcon() {
      let that = this;
      icon
        .getIcon()
        .then((result) => {
          if (result.code == 200) {
            that.$store.commit("setIconList", result.content);
          } else {
            result.message = "标注图片获取失败，请重试！";
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  width: 100%;
}

.el-container {
  height: 100%;
}

.router_container {
  height: calc(100% - @header_height);
}

.el-header {
  padding: 0 0;
  height: @header_height !important;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.12);
  z-index: 1;
  .banner {
    height: 200px;
    width: 100%;
    position: relative;
    background: url(~@/assets/images/banner.png);
    .login_content {
      position: absolute;
      top: 20px;
      right: 50px;
      font-size: 16px;
      color: #ffffff;
      .before_login {
        .el-input {
          width: 150px;
          height: 30px;
          line-height: 30px;
          margin-right: 10px;
          /deep/ .el-input__inner {
            height: 30px;
            line-height: 30px;
            background: #ffffff33;
            border: 0px;
            color: #ffffff;
            &::-webkit-input-placeholder {
              color: #ffffff;
            }
            &::-moz-placeholder {
              color: #ffffff;
            }
            &:-ms-input-placeholder {
              color: #ffffff;
            }
            &::-webkit-input-placeholder {
              color: #ffffff;
            }
            &::placeholder {
              color: #ffffff;
            } 
          }
          /deep/ .el-input__clear {
            line-height: 30px;
            color: #e3e3e3;
            &:hover {
              color: #ffffff;
            }
          }
        }
        .el-button {
          height: 30px;
          width: 60px;
          padding: 0 10px;
          background: #ffcc42; //#ffcc42
          color: #ffffff;
          border: 0px;
          font-size: 16px;
          vertical-align: bottom;
          &:hover {
            background: #ffc21c;
          }
        }
      }
      .after_login {
        .el-button {
          height: 30px;
          width: 60px;
          padding: 0 10px;
          background: #ffcc42; //#ffcc42
          color: #ffffff;
          border: 0px;
          font-size: 16px;
          margin-left: 20px;
          &:hover {
            background: #ffc21c;
          }
        }
      }
    }
  }
  .func {
    height: 60px;
    background: #40a2ff;
    .el-menu {
      background: transparent;
      width: fit-content;
      margin: 0 auto;
      border-bottom: 0px;
      .el-menu-item {
        font-family: Source Han Sans CN VF;
        font-size: 20px;
        color: #ffffff;
        width: 180px;
        text-align: center;
        border-bottom-color: transparent;
        &.is-active {
          font-weight: bold;
          background: transparent;
        }
        &:hover {
          font-weight: bold;
          background: transparent;
        }
      }
    }
  }
}

.el-main {
  padding: 0 0;
  background: #f9f9f9;
  padding: 30px 200px;
}
</style>