门户框架搭建

liufan9527

2024-11-22 7ed3f40b4e8feaac97e90008649fcf047eabe1f9

门户框架搭建

 se-index/src/assets/img/home/door_bg.png

 se-index/src/assets/img/home/door_icon.png

 se-index/src/assets/img/home/door_item.png

 se-index/src/assets/img/home/header_bg.png

 se-index/src/assets/img/home/home.png

 se-index/src/assets/img/home/return.png

 se-index/src/assets/img/home/tab.png

 se-index/src/assets/img/home/tab_height.png

 se-index/src/components/door.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,123 @@
<template>
  <div class="door">
    <div class="item" v-for="(item, index) in doorList" :key="index">
      <div class="title">
        <span>
          <img src="../assets/img/home/door_icon.png" alt="" />
        </span>
        <span>{{ item.name }}</span>
      </div>
      <div
        class="ele"
        v-for="(ele, i) in item.child"
        :key="i"
        @click="routerJump(item.child, ele)"
      >
        {{ ele.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      doorList: [
        {
          name: "分系统运行控制",
          child: [
            {
              name: "分系统软件控制",
              url: ""
            },
            {
              name: "推演任务控制",
              url: ""
            },
            {
              name: "分系统状态监控",
              url: ""
            }
          ]
        },
        {
          name: "系统交互管理",
          child: [
            {
              name: "分系统交互管理",
              url: "/home/interactive"
            },
            {
              name: "外部系统接入",
              url: ""
            },
            {
              name: "系统接口管理",
              url: ""
            }
          ]
        },
        {
          name: "系统资源配置",
          child: [
            {
              name: "硬件资源管理",
              url: ""
            },
            {
              name: "软件资源管理",
              url: ""
            }
          ]
        }
      ]
    };
  },
  methods: {
    routerJump(arr, e) {
      if (e.url) {
        this.$router.push(e.url);
        this.$store.dispatch("Tab", arr);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.door {
  padding: 0 60px;
  display: flex;
  justify-content: space-between;
  .item {
    width: 554px;
    height: 830px;
    background: url("../assets/img/home/door_bg.png");
    .title {
      position: relative;
      font-family: Source Han Sans SC;
      font-weight: 400;
      font-size: 36px;
      color: #4b96dd;
      :nth-child(2) {
        position: absolute;
        top: 4px;
        left: 50px;
      }
    }
    .ele {
      margin: 100px auto;
      width: 456px;
      height: 75px;
      text-align: center;
      line-height: 75px;
      background: url("../assets/img/home/door_item.png");
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 28px;
      color: #ffffff;
    }
  }
}
</style>

 se-index/src/components/home.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,122 @@
<template>
  <div class="home">
    <div class="header">作战实验条件建设</div>
    <div class="tab" v-if="name != '门户'">
      <div
        :class="name == item.name ? 'item-height' : 'item'"
        v-for="(item, index) in tab"
        :key="index"
        @click="tabChange(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="btn">
      <img src="../assets/img/home/home.png" alt="" />
      <img
        src="../assets/img/home/return.png"
        alt=""
        v-show="name != '门户'"
        @click="toDoor"
      />
    </div>
    <div class="content">
      <router-view :key="key" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    tab() {
      return this.$store.state.user.tab;
    },

    key() {
      return this.$route.path;
    }
  },
  mounted() {
    this.$watch("$route", (to, from) => {
      this.name = to.name;
    });
  },
  data() {
    return {
      name: "门户"
    };
  },
  methods: {
    tabChange(e) {
      this.$router.push(e.url);
    },
    toDoor() {
      this.$router.push("/home/door");
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
  background: #091631;
  .header {
    width: 100%;
    height: 87px;
    line-height: 87px;
    background: url("../assets/img/home/header_bg.png");
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 48px;
    color: #00e7fb;
    text-align: center;
  }
  .btn {
    position: absolute;
    top: 60px;
    right: 60px;
    img {
      margin-left: 10px;
    }
  }
  .tab {
    position: absolute;
    top: 60px;
    left: 200px;
    display: flex;
    :nth-child(3) {
      margin-left: 480px;
    }
    .item {
      width: 256px;
      height: 75px;
      line-height: 75px;
      text-align: center;
      background: url("../assets/img/home/tab.png");
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 28px;
      color: #ffffff;
    }
    .item-height {
      width: 256px;
      height: 75px;
      line-height: 75px;
      text-align: center;
      background: url("../assets/img/home/tab_height.png");
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 28px;
      color: #ffffff;
    }
  }
  .content {
    margin-top: 60px;
  }
}
</style>

 se-index/src/components/interactive.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
<template>
  <div class="interactive">
    <h1>1111111111</h1>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scope></style>

 se-index/src/components/login.vue

@@ -124,7 +124,7 @@
    },
    // è´¦å·å¯†ç ç™»å½•
    submitForm(formName) {
      this.$router.push("/index");
      this.$router.push("/home/door");
      // this.$refs[formName].validate(valid => {
      //   if (valid) {
        

 se-index/src/router/index.js

@@ -1,34 +1,51 @@
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
import login from '@/components/login'
import Vue from "vue";
import Router from "vue-router";
import index from "@/components/index";
import login from "@/components/login";
import URLconfig from "../../static/URLconfig";
import home from "@/components/home";

Vue.use(Router)
Vue.use(Router);
const routes = [
  {
    path: '/',
    redirect: "login",
    path: "/",
    redirect: "login"
  },
  {
    path: '/login',
    name: 'login',
    component: login,
    path: "/login",
    name: "login",
    component: login
  },
  {
    path: '/index',
    name: 'index',
    path: "/index",
    name: "index",
    component: index
  },
  {
    path: "/home",
    component: home,
    redirect: "home",
    hidden: true,
    children: [
      {
        path: "door",
        name:'门户',
        component: () => import("@/components/door.vue")
      },
      {
        path: "interactive",
        name:'分系统交互管理',
        component: () => import("@/components/interactive.vue")
      }
    ]
  }
];
const router = new Router({
  mode: "history",
  // base: URLconfig.routerBase,
  routes,
  routes
});
// router.beforeEach((to, from, next) => {
//   next();
// })
export default router;



 se-index/src/store/modules/user.js

@@ -1,62 +1,71 @@
import { login, logout, getInfo, refreshToken } from '@/api/login'
import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
import { login, logout, getInfo, refreshToken } from "@/api/login";
import { getToken, setToken, setExpiresIn, removeToken } from "@/utils/auth";
import { encr } from "@/utils/jsencrypt";

const user = {
  state: {
    token: getToken(),
    id: '',
    name: '',
    avatar: '',
    id: "",
    name: "",
    avatar: "",
    roles: [],
    permissions: []
    permissions: [],
    tab: []
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
      state.token = token;
    },
    SET_EXPIRES_IN: (state, time) => {
      state.expires_in = time
      state.expires_in = time;
    },
    SET_ID: (state, id) => {
      state.id = id
      state.id = id;
    },
    SET_NAME: (state, name) => {
      state.name = name
      state.name = name;
    },
    SET_AVATAR: (state, avatar) => {
      state.avatar = avatar
      state.avatar = avatar;
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
      state.roles = roles;
    },
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions
    }
      state.permissions = permissions;
    },
    SET_TAB: (state, tab) => {
      state.tab = tab; 
    },
  },

  actions: {
    Tab({ commit }, state) {
      commit("SET_TAB", state);
    },
    // ç™»å½•
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      const username = userInfo.username.trim();
      let pwd = encr(userInfo.password);
      const password = pwd;
      // const password = userInfo.password
      const code = userInfo.code
      const uuid = userInfo.uuid
      const code = userInfo.code;
      const uuid = userInfo.uuid;
      return new Promise((resolve, reject) => {
        login(username, password).then(res => {
          let data = res.data
          setToken(data.access_token)
          commit('SET_TOKEN', data.access_token)
          setExpiresIn(data.expires_in)
          commit('SET_EXPIRES_IN', data.expires_in)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
        login(username, password)
          .then(res => {
            let data = res.data;
            setToken(data.access_token);
            commit("SET_TOKEN", data.access_token);
            setExpiresIn(data.expires_in);
            commit("SET_EXPIRES_IN", data.expires_in);
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },

    // // èŽ·å–用户信息
@@ -84,40 +93,44 @@
    // åˆ·æ–°token
    RefreshToken({ commit, state }) {
      return new Promise((resolve, reject) => {
        refreshToken(state.token).then(res => {
          setExpiresIn(res.data)
          commit('SET_EXPIRES_IN', res.data)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
        refreshToken(state.token)
          .then(res => {
            setExpiresIn(res.data);
            commit("SET_EXPIRES_IN", res.data);
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },

    // é€€å‡ºç³»ç»Ÿ
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          commit('SET_PERMISSIONS', [])
          removeToken()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
        logout(state.token)
          .then(() => {
            commit("SET_TOKEN", "");
            commit("SET_ROLES", []);
            commit("SET_PERMISSIONS", []);
            removeToken();
            resolve();
          })
          .catch(error => {
            reject(error);
          });
      });
    },

    // å‰ç«¯ ç™»å‡º
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        commit('SET_TOKEN', '')
        removeToken()
        resolve()
      })
        commit("SET_TOKEN", "");
        removeToken();
        resolve();
      });
    }
  }
}
};

export default user
export default user;