Commit e6b0bf0e authored by “yiyousong”'s avatar “yiyousong”

pref:修改title和logo获取

parent 74025df0
......@@ -10,4 +10,6 @@ VUE_APP_PORTAL_URL = http://192.168.0.98:11072
# 站点请求地址
VUE_APP_SITETREE_URL = http://192.168.0.98:11078/base/site/siteTree
# 系统名称
VUE_APP_sysName = "设备物联网"
......@@ -2,3 +2,5 @@
NODE_ENV = "development"
VUE_APP_BASE_API= http://192.168.0.98:11091/m
#VUE_APP_BASE_API= /basics_api/m
#图片地址拼接
VUE_APP_API_IMG_URL=http://192.168.0.98:11078/
\ No newline at end of file
......@@ -12,3 +12,5 @@ VUE_APP_PORTAL_URL =/portal_home
# 站点请求地址
VUE_APP_SITETREE_URL = /basics_api/base/site/siteTree
#图片地址拼接
VUE_APP_API_IMG_URL=
......@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>sbgl.ico" />
<title>设备管理平台</title>
<title><%= process.env.VUE_APP_sysName %></title>
<link
rel="stylesheet"
href="https://unpkg.zhimg.com/element-ui@2.15.5/lib/theme-chalk/index.css"
......
<template>
<div id="app">
<router-view/>
<router-view />
</div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
</style>
......@@ -6,19 +6,17 @@
<div class="layout-menu flex flex-1">
<!-- logo -->
<div class="layout-logo flex">
<i class="el-icon-menu" @click="showMobileMenu = !showMobileMenu">
</i>
<router-link to="/">
<img
src="../assets/images/logo2.png"
style="margin-bottom: 5px"
height="27"
width="27"
/>
<b style="color: white; font-size: 20px; font-weight: bold; margin-right: 20px">
AIOT智慧边缘物联网系统</b
>
</router-link>
<!-- <i class="el-icon-menu" @click="showMobileMenu = !showMobileMenu">
</i> -->
<img
class="logo"
:src="
sysLogo ? api + sysLogo : require('../assets/images/logo2.png')
"
/>
<h1 class="title">
{{ sysName ? sysName : systemName }}
</h1>
</div>
<!-- 站点选择 -->
<div>
......@@ -96,11 +94,19 @@
<script>
import HeaderSite from "./HeaderSite.vue";
import { mapState } from "vuex";
export default {
name: "Header",
components: {
HeaderSite,
},
data() {
return {
api: process.env.VUE_APP_API_IMG_URL,
systemName: process.env.VUE_APP_sysName,
showMobileMenu: false,
};
},
methods: {
handleCommand(key) {
if (key === "update") {
......@@ -122,11 +128,10 @@ export default {
});
},
},
beforeDestroy() {
},
mounted() {
},
beforeDestroy() {},
mounted() {},
computed: {
...mapState(["sysName", "sysLogo"]),
activeMenu() {
return this.$route.path;
},
......@@ -202,11 +207,6 @@ export default {
return this.$store.state.userData;
},
},
data() {
return {
showMobileMenu: false,
};
},
};
</script>
......@@ -215,23 +215,35 @@ export default {
.mobile-menu-list {
display: none;
}
.title {
font-size: 18px;
max-width: 200px;
color: #fff;
line-height: normal;
}
.layout-menu-wrapper {
height: 66px;
line-height: 66px;
height: 64px;
line-height: 64px;
font-size: 14px;
color: #eee;
background: linear-gradient(90deg, #1845c6 0%, #2999ff 100%);
.layout-menu {
align-items: center;
}
.layout-logo {
height: 50px;
padding-left: 23px;
align-items: center;
.el-icon-menu {
display: none;
}
a {
margin: auto;
}
img {
vertical-align: middle;
.logo {
width: 32px;
margin-right: 10px;
}
}
......
<template>
<div>
<div class="profile" :class="{close: isOpen}">
<p class="menu-switch">
<i @click="toogle" :class="`el-icon-s-${isOpen?'unfold':'fold'}`" />
</p>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
{{currentUserName}}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="update">修改密码</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="sidebar" :class="{close: isOpen}">
<div class="logo">
<router-link to="/">
<img src="../assets/images/logo.png" height="20" alt />
{{isOpen ? '' : 'xxx系统' }}
</router-link>
</div>
<el-menu :default-active="defaultActive" background-color="#222333" text-color="#fff" active-text-color="#409eff" :collapse="isOpen" :collapse-transition="false" router unique-opened>
<el-menu-item index="/index" key="home">
<i class="el-icon-s-home"></i>
<span>首页</span>
</el-menu-item>
<div>
<div class="profile" :class="{ close: isOpen }">
<p class="menu-switch">
<i @click="toogle" :class="`el-icon-s-${isOpen ? 'unfold' : 'fold'}`" />
</p>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
{{ currentUserName }}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="update">修改密码</el-dropdown-item>
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="sidebar" :class="{ close: isOpen }">
<div class="logo">
<router-link to="/">
<img src="../assets/images/logo.png" height="20" alt />
{{ isOpen ? "" : "xxx系统" }}
</router-link>
</div>
<el-menu
:default-active="defaultActive"
background-color="#222333"
text-color="#fff"
active-text-color="#409eff"
:collapse="isOpen"
:collapse-transition="false"
router
unique-opened
>
<el-menu-item index="/index" key="home">
<i class="el-icon-s-home"></i>
<span>首页</span>
</el-menu-item>
<el-submenu v-for="item in menu" :key="item.id" :index="item.name">
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{item.name}}</span>
</template>
<el-menu-item v-for="val in item.children" :index="val.path" :key="val.id">
<i :class="`el-icon-${val.icon}`"></i>
<span>{{val.name}}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</div>
<el-submenu v-for="item in menu" :key="item.id" :index="item.name">
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{{ item.name }}</span>
</template>
<el-menu-item
v-for="val in item.children"
:index="val.path"
:key="val.id"
>
<i :class="`el-icon-${val.icon}`"></i>
<span>{{ val.name }}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</div>
</div>
</template>
<script>
export default {
props: {
isOpen: {
type: Boolean,
default: false,
},
props: {
isOpen: {
type: Boolean,
default: false,
},
},
methods: {
handleCommand(key) {
if (key === "update") {
this.$router.push("/login/updatePwd");
}
if (key === "logout") {
this.logout();
}
},
toogle() {
this.$emit("toggle");
},
// 退出登录
logout() {
this.$post("/login/logout")
.then((data) => {})
.catch((error) => {})
.then(() => {
this.$message.success("已退出登录");
this.$store.commit("logout");
this.$router.replace("/login");
});
},
},
computed: {
currentUserName() {
const { currUserName } = this.$store.state.userData;
return currUserName;
},
group() {
const relativeGroup = this.$store.state.group;
if (relativeGroup) {
return relativeGroup;
}
let groupArray = this.$route.path.split("/");
let group = this.$route.path;
let type = groupArray.pop();
if (["add", "edit", "view", "new"].indexOf(type) > -1) {
groupArray.push("list");
group = groupArray.join("/");
}
return group;
},
methods: {
handleCommand(key) {
if (key === "update") {
this.$router.push("/login/updatePwd");
}
if (key === "logout") {
this.logout();
}
},
toogle() {
this.$emit("toggle");
},
// 退出登录
logout() {
this.$post("/login/logout")
.then((data) => {})
.catch((error) => {})
.then(() => {
this.$message.success("已退出登录");
this.$store.commit("logout");
this.$router.replace("/login");
});
},
relativeGroup() {
return this.$store.state.group;
},
computed: {
currentUserName() {
const { currUserName } = this.$store.state.userData;
return currUserName;
},
group() {
const relativeGroup = this.$store.state.group;
if (relativeGroup) {
return relativeGroup;
}
let groupArray = this.$route.path.split("/");
let group = this.$route.path;
let type = groupArray.pop();
if (["add", "edit", "view", "new"].indexOf(type) > -1) {
groupArray.push("list");
group = groupArray.join("/");
}
return group;
},
relativeGroup() {
return this.$store.state.group;
},
flat() {
return this.userData.flat;
},
menu() {
if (!this.userData.barList) return [];
return this.userData.barList.map((item) => {
const url = item.url
? item.url
: item.childList[0]
? item.childList[0].url || ""
: "";
return {
name: item.name,
path: url,
id: item.id,
icon: item.imgPath,
children: item.childList.map((sub) => {
return {
name: sub.name,
path: sub.url
? sub.url
: sub.childList[0]
? sub.childList[0].url || 0
: "",
id: sub.id,
parentId: sub.parentId,
icon: sub.imgPath,
isOut: /^https?\:\/\//.test(sub.url),
};
}),
};
});
},
defaultActive() {
this.search = "";
// this.$route.path;
return this.group;
},
submenu() {
if (!this.menu.length) return {};
let matchMenu = {};
this.menu.forEach((item) => {
const menu = item;
item.children.forEach((item) => {
if (item.path === this.group) {
matchMenu = menu;
return;
}
});
});
return matchMenu;
},
userData() {
return this.$store.state.userData;
},
flat() {
return this.userData.flat;
},
data() {
return {};
menu() {
if (!this.userData.barList) return [];
return this.userData.barList.map((item) => {
const url = item.url
? item.url
: item.childList[0]
? item.childList[0].url || ""
: "";
return {
name: item.name,
path: url,
id: item.id,
icon: item.imgPath,
children: item.childList.map((sub) => {
return {
name: sub.name,
path: sub.url
? sub.url
: sub.childList[0]
? sub.childList[0].url || 0
: "",
id: sub.id,
parentId: sub.parentId,
icon: sub.imgPath,
isOut: /^https?\:\/\//.test(sub.url),
};
}),
};
});
},
defaultActive() {
this.search = "";
// this.$route.path;
return this.group;
},
submenu() {
if (!this.menu.length) return {};
let matchMenu = {};
this.menu.forEach((item) => {
const menu = item;
item.children.forEach((item) => {
if (item.path === this.group) {
matchMenu = menu;
return;
}
});
});
return matchMenu;
},
userData() {
return this.$store.state.userData;
},
},
data() {
return {};
},
};
</script>
<style lang="less">
.profile {
height: 50px;
background-color: #222333;
text-align: right;
position: fixed;
right: 0;
width: calc(100% - 200px);
z-index: 999;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
&.close {
width: calc(100% - 64px);
}
.menu-switch {
cursor: pointer;
i {
font-size: 20px;
color: #999;
font-weight: normal;
}
height: 50px;
background-color: #222333;
text-align: right;
position: fixed;
right: 0;
width: calc(100% - 200px);
z-index: 999;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
&.close {
width: calc(100% - 64px);
}
.menu-switch {
cursor: pointer;
i {
font-size: 20px;
color: #999;
font-weight: normal;
}
}
}
.sidebar {
width: 200px;
height: 100%;
background-color: #222333;
position: fixed;
top: 0;
z-index: 1000;
.el-menu {
border-right: 0 none;
height: calc(100% - 50px);
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 17px;
height: 17px;
background-color: transparent;
border-radius: 9px;
}
&::-webkit-scrollbar-thumb {
background-color: #40425a;
border-radius: 9px;
background-clip: content-box;
border: 5px solid transparent;
}
i {
&.el-icon-folder {
font-size: 18px;
margin-right: 3px;
}
&.el-icon-tickets {
font-size: 16px;
margin-right: 0;
}
}
width: 200px;
height: 100%;
background-color: #222333;
position: fixed;
top: 0;
z-index: 1000;
.el-menu {
border-right: 0 none;
height: calc(100% - 50px);
overflow-y: auto;
overflow-x: hidden;
&::-webkit-scrollbar {
width: 17px;
height: 17px;
background-color: transparent;
border-radius: 9px;
}
&.close {
width: 64px;
.logo {
img {
margin-right: 0;
}
a {
padding: 0;
}
}
&::-webkit-scrollbar-thumb {
background-color: #40425a;
border-radius: 9px;
background-clip: content-box;
border: 5px solid transparent;
}
i {
&.el-icon-folder {
font-size: 18px;
margin-right: 3px;
}
&.el-icon-tickets {
font-size: 16px;
margin-right: 0;
}
}
}
&.close {
width: 64px;
.logo {
height: 50px;
line-height: 50px;
text-align: center;
background-color: #222333;
display: flex;
align-items: center;
justify-content: center;
.el-icon-menu {
display: none;
}
a {
margin: auto;
color: #fff;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding-left: 20px;
}
img {
margin-right: 5px;
}
img {
margin-right: 0;
}
a {
padding: 0;
}
}
}
.logo {
height: 50px;
line-height: 50px;
text-align: center;
background-color: #222333;
display: flex;
align-items: center;
justify-content: center;
.el-icon-menu {
display: none;
}
a {
margin: auto;
color: #fff;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding-left: 20px;
}
img {
margin-right: 5px;
}
}
}
</style>
\ No newline at end of file
import Vue from 'vue'
import Vuex from 'vuex'
import { normalCallPost } from './assets/utils';
import Vue from "vue";
import Vuex from "vuex";
import { normalCallPost } from "./assets/utils";
Vue.use(Vuex)
Vue.use(Vuex);
let userData = {};
try {
userData = JSON.parse(window.sessionStorage.userData || '{}');
userData = JSON.parse(window.sessionStorage.userData || "{}");
} catch (error) {
console.log('未从session中获取到userData')
console.log("未从session中获取到userData");
}
function convertTreeToList(root, array) {
if(!root || !root.length) return array;
root.forEach(item=>{
if (!root || !root.length) return array;
root.forEach((item) => {
let data = JSON.parse(JSON.stringify(item));
const url = data.url ? data.url : (item.childList[0] ? (item.childList[0].url || '') : '');
const url = data.url
? data.url
: item.childList[0]
? item.childList[0].url || ""
: "";
delete data.childList;
array.push({
name: data.name,
......@@ -25,20 +29,30 @@ function convertTreeToList(root, array) {
parentId: data.parentId,
icon: data.imgPath,
});
if(item.childList){
if (item.childList) {
convertTreeToList(item.childList, array);
}
})
});
return array;
}
function isPc() {
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
var userAgentInfo = navigator.userAgent;
var Agents = new Array(
"Android",
"iPhone",
"SymbianOS",
"Windows Phone",
"iPad",
"iPod"
);
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
......@@ -47,7 +61,9 @@ export default new Vuex.Store({
isLogin: false,
isMobile: !isPc(),
userData,
group: '',
group: "",
sysName: "", // 系统名称
sysLogo: "", // 系统logo
},
mutations: {
setUserData(state, data) {
......@@ -60,25 +76,34 @@ export default new Vuex.Store({
logout(state) {
state.userData = {};
state.isLogin = false;
window.sessionStorage.userData = '';
window.sessionStorage.token = '';
window.sessionStorage.userData = "";
window.sessionStorage.token = "";
},
setGroup(state, data) {
state.group = data;
},
SET_sysName(state, sysName) {
state.sysName = sysName;
},
SET_sysLogo(state, sysLogo) {
state.sysLogo = sysLogo;
},
},
actions: {
login({commit}) {
normalCallPost('/login/index').then(({data})=>{
commit('setUserData', data)
}).catch(error=>{
})
login({ commit }) {
normalCallPost("/login/index")
.then(({ data }) => {
commit("setUserData", data);
})
.catch((error) => {});
},
logout({commit}) {
normalCallPost('/login/logout').then(data=>{}).catch(error=>{}).then(()=>{
commit('logout')
})
logout({ commit }) {
normalCallPost("/login/logout")
.then((data) => {})
.catch((error) => {})
.then(() => {
commit("logout");
});
},
}
})
},
});
......@@ -5,27 +5,40 @@
</template>
<script>
import { mapMutations } from "vuex";
export default {
mounted() {
let token = this.$route.query.token;
let siteid = this.$route.query.siteid;
if (token) {
window.sessionStorage.setItem("token", token);
window.sessionStorage.setItem("siteid", siteid);
this.$router.push("/index"); // 有token直接跳转首页
} else {
this.$message({
message: "没有权限,正在跳转登录页面...",
center: true,
});
setTimeout(function () {
window.location.href =
process.env.VUE_APP_PORTAL_URL == "undefined"
? "http://192.168.0.98:11072"
: process.env.VUE_APP_PORTAL_URL;
//this.$router.push('/login')
}, 1000);
}
data() {
return {};
},
created() {
this.getInfo();
},
mounted() {},
methods: {
...mapMutations(["SET_sysName", "SET_sysLogo"]),
// 获取token和站点信息
async getInfo() {
let { token, siteid, sysName, sysLogo } = this.$route.query;
if (token) {
window.sessionStorage.setItem("token", token);
window.sessionStorage.setItem("siteid", siteid);
this.SET_sysName(sysName);
this.SET_sysLogo(sysLogo);
this.$router.push("/index"); // 有token直接跳转首页
} else {
this.$message({
message: "没有权限,正在跳转登录页面...",
center: true,
});
setTimeout(function () {
window.location.href =
process.env.VUE_APP_PORTAL_URL == "undefined"
? "http://192.168.0.98:11072"
: process.env.VUE_APP_PORTAL_URL;
//this.$router.push('/login')
}, 1000);
}
},
},
};
</script>
......
......@@ -10,7 +10,7 @@
label-width="80px"
size="small"
>
<h1>设备管理平台</h1>
<h1>{{ sysName ? sysName : systemName }}</h1>
<el-form-item label="用户名">
<el-input v-model="form.loginName"></el-input>
</el-form-item>
......@@ -31,18 +31,44 @@
</div>
<div class="footer">
登陆 &copy; <a href="">信宏翔网络科技有限公司</a> 出品
<!-- 登陆 &copy; <a href="">信宏翔网络科技有限公司</a> 出品 -->
</div>
</div>
</template>
<script>
import { createSocket } from "@/assets/utils/websocket";
// import { createSocket } from "@/assets/utils/websocket";
import { mapMutations, mapState } from "vuex";
export default {
name: "login",
created() {},
data() {
return {
systemName: process.env.VUE_APP_sysName,
originData: [],
loading: false,
form: {
loginName: "",
password: "",
},
};
},
computed: {
...mapState(["sysName"]),
},
created() {
this.getInfo();
},
methods: {
...mapMutations(["SET_sysName", "SET_sysLogo"]),
// 获取token和站点信息
getInfo() {
let { sysName, sysLogo, siteid } = this.$route.query;
if (siteid && sysName && sysLogo) {
sessionStorage.setItem("siteid", siteid);
this.SET_sysName(sysName);
this.SET_sysLogo(sysLogo);
}
},
login() {
this.loading = true;
this.$post("/login/login", this.form)
......@@ -51,10 +77,9 @@ export default {
},
loginSuccess({ data }) {
this.$store.commit("setUserData", data);
this.$router.replace({
path: this.redirect,
});
let { token } = data;
sessionStorage.setItem("token", token);
this.$router.push("/index");
//成功 创建websocket连接 process.env.VUE_WEBSOCKET_BASE_API +
// createSocket("ws://"+process.env.VUE_APP_BASE_API +"/ws?accessToken="+data.id)
},
......@@ -80,17 +105,6 @@ export default {
this.login();
},
},
data() {
return {
originData: [],
loading: false,
redirect: this.$route.query.redirect || "/",
form: {
loginName: "",
password: "",
},
};
},
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment