549 lines
14 KiB
Plaintext
549 lines
14 KiB
Plaintext
<template>
|
||
<el-container class="padding-0 height100 background-style">
|
||
<el-header class="padding-0">
|
||
<vue-head class="layout-header"></vue-head>
|
||
</el-header>
|
||
<el-main style="padding: 0 5vw; height: 100%">
|
||
<el-row :gutter="10">
|
||
<el-col
|
||
:span="7"
|
||
v-for="(item, key) in systemArray"
|
||
:key="key"
|
||
:offset="1"
|
||
style="margin-top:20px;
|
||
background-color: rgba(23, 104, 120, 0.3);
|
||
border-radius: 5px;
|
||
min-height:35vh;
|
||
z-index:11;
|
||
cursor:pointer"
|
||
:style="{
|
||
backgroundImage: 'url(' + item.src + ') no-repeat',backgroundPosition:'right bottom'
|
||
}"
|
||
@click.native="gotoIndex(item)"
|
||
>
|
||
<el-row class="title-header" @click.native="gotoIndex(item)">
|
||
{{ item.target }}
|
||
</el-row>
|
||
<el-row style="width: 100%" :gutter="10" >
|
||
<el-col
|
||
style="padding: 0.5rem 0"
|
||
:span="7"
|
||
:offset="1"
|
||
v-for="(itm, index) in item.totalTitle"
|
||
:key="index"
|
||
>
|
||
|
||
|
||
<el-button
|
||
:title="itm.meta.title"
|
||
style="width:6rem; height: 36px; overflow: hidden"
|
||
@click.stop="gotoPage(itm,item)"
|
||
>{{ itm.meta.title }}</el-button
|
||
>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</el-main>
|
||
<el-footer>
|
||
<foot></foot>
|
||
</el-footer>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
import vueHead from "@/components/cloud/head.vue";
|
||
|
||
import foot from "@/components/cloud/foot";
|
||
import { getRouters } from "@/api/menu";
|
||
export default {
|
||
components: {
|
||
vueHead,
|
||
foot,
|
||
},
|
||
data() {
|
||
return {
|
||
dvArr: [],
|
||
systemArray: [
|
||
{
|
||
src: require("@/assets/img/main/mes.png"),
|
||
target: "MES",
|
||
totalTitle: [],
|
||
},
|
||
{
|
||
src: require("@/assets/img/main/wms.png"),
|
||
target: "WMS",
|
||
totalTitle: [],
|
||
},
|
||
{
|
||
src: require("@/assets/img/main/mes.png"),
|
||
target: "POD",
|
||
totalTitle: [],
|
||
},
|
||
// {
|
||
// src: require("@/assets/img/main/ecp.png"),
|
||
// target: "OEE",
|
||
// totalTitle: [],
|
||
// },
|
||
|
||
],
|
||
};
|
||
},
|
||
created() {
|
||
let refreshFlag = window.sessionStorage.getItem("refreshFlag");
|
||
//生产模式进入系统默认刷新一次缓存
|
||
if (
|
||
refreshFlag != "true" &&
|
||
[process.env.VUE_APP_BASE_API] == "/prod-api"
|
||
) {
|
||
// this.clickDeleteHeader();
|
||
this.clickRefresh();
|
||
window.sessionStorage.setItem("refreshFlag", "true");
|
||
}
|
||
this.getMes();
|
||
this.getPublic();
|
||
this.getWms();
|
||
this.getPod();
|
||
this.getOee()
|
||
},
|
||
methods: {
|
||
routerGo(data){
|
||
console.log(data,"难受")
|
||
this.$router.push({path:`${data.path}/${data.children[0].path}`})
|
||
// this.$router.push({path:"/401"})
|
||
|
||
},
|
||
getOee()
|
||
{
|
||
this.systemArray[3].totalTitle.push({alwaysShow: true,
|
||
component: "Layout",
|
||
hidden: false,
|
||
meta: {title:'工厂模型'},
|
||
name: "equipmentConfiguration",
|
||
orderNum: "1",
|
||
path: "factoryModel/equipmentConfiguration"
|
||
});
|
||
this.systemArray[3].totalTitle.push({alwaysShow: true,
|
||
component: "Layout",
|
||
hidden: false,
|
||
meta: {title:'设备管理'},
|
||
name: "myEquipment",
|
||
orderNum: "2",
|
||
path: "equipmentMonitoring/myEquipment"
|
||
});
|
||
},
|
||
getMes() {
|
||
getRouters(1).then((resp) => {
|
||
//mes
|
||
if (resp.data.code == 200 && resp.data.data.length > 0) {
|
||
resp.data.data.forEach((e) => {
|
||
this.systemArray[0].totalTitle.push(e);
|
||
});
|
||
console.log( this.systemArray[0],' this.systemArray[0]')
|
||
this.systemArray[0].totalTitle.sort(function (a, b) {
|
||
return a.orderNum - b.orderNum;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
getPublic() {
|
||
getRouters(0).then((resp) => {
|
||
//public
|
||
if (resp.data.code == 200 && resp.data.data.length > 0) {
|
||
resp.data.data.forEach((e) => {
|
||
this.systemArray[0].totalTitle.push(e);
|
||
this.systemArray[1].totalTitle.push(e);
|
||
});
|
||
this.systemArray[0].totalTitle.sort(function (a, b) {
|
||
return a.orderNum - b.orderNum;
|
||
}); this.systemArray[1].totalTitle.sort(function (a, b) {
|
||
return a.orderNum - b.orderNum;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
getWms() {
|
||
//wms
|
||
getRouters(2).then((resp) => {
|
||
//wms
|
||
if (resp.data.code == 200 && resp.data.data.length > 0) {
|
||
resp.data.data.forEach((e) => {
|
||
this.systemArray[1].totalTitle.push(e);
|
||
});
|
||
this.systemArray[1].totalTitle.sort(function (a, b) {
|
||
return a.orderNum - b.orderNum;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
getPod() {
|
||
//pod
|
||
getRouters(3).then((resp) => {
|
||
//wms
|
||
if (resp.data.code == 200 && resp.data.data.length > 0) {
|
||
resp.data.data[0].children.forEach((e) => {
|
||
this.systemArray[2].totalTitle.push(e);
|
||
});
|
||
this.systemArray[2].totalTitle.sort(function (a, b) {
|
||
return a.orderNum - b.orderNum;
|
||
});
|
||
}
|
||
});
|
||
},
|
||
clickDeleteHeader() {
|
||
this.$sys.deleteUserHead().then((data) => {
|
||
if (
|
||
(data.code && data.code == 200) ||
|
||
(data.data && data.data.code && data.data.code == 200)
|
||
) {
|
||
// this.$message.success("用户表头配置初始化成功");
|
||
}
|
||
});
|
||
localStorage.setItem(
|
||
"header",
|
||
JSON.stringify(require("../../api/tableConfig/tableConfig").configure)
|
||
);
|
||
},
|
||
//刷新缓存
|
||
clickRefresh() {
|
||
this.$dictType.getAllDict().then((_data) => {
|
||
let resp = _data.config ? _data.data : _data;
|
||
console.log(resp, "resp");
|
||
if (resp.code == "200") {
|
||
// this.$message.success("刷新成功");
|
||
let temp = JSON.parse(JSON.stringify(resp.data));
|
||
|
||
temp.forEach((item) => {
|
||
item.text = item.groupText;
|
||
item.key = item.groupKey;
|
||
item.group = item.groupCode;
|
||
});
|
||
console.log(temp, "temp");
|
||
localStorage.setItem("dictType", JSON.stringify(temp));
|
||
// this.$dictType.clearKeyCache().then();
|
||
}
|
||
});
|
||
},
|
||
getCookie(name) {},
|
||
gotoPage2(itm)
|
||
{
|
||
//跳转到指定模块
|
||
|
||
let routePath
|
||
console.log(itm.path,itm.path[0])
|
||
if(String(itm.path).indexOf('/')==0){routePath=itm.path+'/'+itm.children[0].path}//如果首字符是'/'就不用加'/'
|
||
else{routePath='/'+itm.path+'/'+itm.children[0].path}//否则前面多加一个'/'
|
||
console.log('地址',routePath)
|
||
this.$router.push({path:'/index',query:{to:routePath}})
|
||
return
|
||
console.log(window.location.href)
|
||
var urlArr = window.location.href.split('/');
|
||
console.log(urlArr)
|
||
|
||
|
||
|
||
|
||
console.log(urlArr[0]+'/'+urlArr[1]+'/'+urlArr[2]+routePath)
|
||
|
||
window.location.href=urlArr[0]+'/'+urlArr[1]+'/'+urlArr[2]+routePath
|
||
},
|
||
//页面跳转
|
||
gotoPage(itm,item) {
|
||
//itm是计划模块，基础模块这一层， item是mes，wms这一层
|
||
let target=item.target
|
||
console.log(itm,"点击跳转",item);
|
||
if (target == "MES") {
|
||
localStorage.setItem("currentModule", 1);
|
||
localStorage.setItem("logoTitle", "MES系统");
|
||
|
||
this.gotoPage2(itm)
|
||
|
||
} else if (target == "WMS") {
|
||
localStorage.setItem("currentModule", 2);
|
||
localStorage.setItem("logoTitle", "WMS系统");
|
||
// this.$router.push({ path: this.redirect || "/index" }).catch(() => {
|
||
// console.log("route error login.vue");
|
||
// });
|
||
this.gotoPage2(itm)
|
||
} else if (target == "OEE") {
|
||
|
||
let _tempUrl = window.location.origin || "";
|
||
_tempUrl = _tempUrl + "/apm-web/#/cloud?to="+itm.path;
|
||
// window.location.href = _tempUrl;
|
||
console.log(_tempUrl ,'1442')
|
||
var openee=window.open(_tempUrl,"_blank");
|
||
} else if (target == "POD") {
|
||
let _tempUrl = window.location.origin || "";
|
||
_tempUrl = _tempUrl + "/prod-station";
|
||
// window.location.href = _tempUrl;
|
||
console.log(_tempUrl ,'1442')
|
||
var openee=window.open(_tempUrl,"_blank");
|
||
}
|
||
},
|
||
gotoIndex(item) {
|
||
console.log(item,'43')
|
||
//跳转到首页（直接点MES或者WMS3个大字 就跳转到首页）
|
||
let target=item.target
|
||
|
||
if (target == "MES") {
|
||
localStorage.setItem("currentModule", 1);
|
||
localStorage.setItem("logoTitle", "MES系统");
|
||
|
||
this.$router.push({ path: "/index" }).catch(() => {
|
||
console.log("route error login.vue");
|
||
});
|
||
|
||
} else if (target == "WMS") {
|
||
localStorage.setItem("currentModule", 2);
|
||
localStorage.setItem("logoTitle", "WMS系统");
|
||
this.$router.push({ path: "/index" }).catch(() => {
|
||
console.log("route error login.vue");
|
||
});
|
||
|
||
} else if (target == "OEE") {
|
||
let _tempUrl = window.location.origin || "";
|
||
_tempUrl = _tempUrl + "/apm-web";
|
||
// window.location.href = _tempUrl;
|
||
console.log(_tempUrl ,'1442')
|
||
var openee=window.open(_tempUrl,"_blank");
|
||
} else if (target == "POD") {
|
||
let _tempUrl = window.location.origin || "";
|
||
_tempUrl = _tempUrl + "/prod-station";
|
||
// window.location.href = _tempUrl;
|
||
console.log(_tempUrl ,'1442')
|
||
var openee=window.open(_tempUrl,"_blank");
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.mes-ImgAndText {
|
||
transition: all 0.5s;
|
||
}
|
||
.title-header {
|
||
font-size: 26px;
|
||
color: white;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
}
|
||
/* .mes-Image {
|
||
|
||
transition: all 0.5s;
|
||
} */
|
||
.mes-ImgAndText:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
>>> .swiper-slide img {
|
||
width: 74%;
|
||
position: absolute;
|
||
right: 0%;
|
||
top: 14%;
|
||
}
|
||
|
||
>>> .swiper-button-prev,
|
||
.swiper-button-next {
|
||
top: 46%;
|
||
}
|
||
|
||
.background-style {
|
||
background: url(../../assets/img/home/home_bg-jpg.jpg) no-repeat;
|
||
background-size: 100% 100%;
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
>>> .swiper-pagination {
|
||
display: none;
|
||
}
|
||
|
||
>>> .cloudLsit {
|
||
color: #ffffff;
|
||
width: 100%;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 130px;
|
||
}
|
||
|
||
>>> .el-carousel__container {
|
||
height: 100%;
|
||
}
|
||
|
||
>>> .ivu-avatar_img {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
float: left;
|
||
margin-right: 8px;
|
||
bottom: 6px;
|
||
position: relative;
|
||
border: 2px solid #ffffff;
|
||
}
|
||
|
||
>>> .cloudLsit:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
>>> .cloudLsit .linkBottom {
|
||
position: absolute;
|
||
height: 16px;
|
||
background: rgba(0, 0, 0, 0.22);
|
||
width: 100%;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
>>> .cloudLsit .xe-img {
|
||
width: 59px;
|
||
height: 67px;
|
||
}
|
||
|
||
>>> .cloudLsit .xe-img img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
>>> .cloudLsit .xe-label {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
>>> .cloudLsit .icons {
|
||
right: 16px;
|
||
position: absolute;
|
||
font-size: 60px;
|
||
top: 8px;
|
||
color: #000000;
|
||
opacity: 0.2;
|
||
}
|
||
|
||
>>> .el-badge__content {
|
||
border: 0;
|
||
}
|
||
|
||
>>> .el-menu-item {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.layout-header-bar .nav-gap {
|
||
position: relative;
|
||
width: 1px;
|
||
height: 100%;
|
||
padding: 0 6px;
|
||
}
|
||
|
||
.layout-header-bar .nav-gap:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: calc(50% - 8px);
|
||
width: 1px;
|
||
height: 16px;
|
||
background: #ebebeb;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 24px;
|
||
line-height: 60px;
|
||
display: block;
|
||
height: 100%;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.el-menu--horizontal {
|
||
border-right: none;
|
||
background-color: transparent;
|
||
}
|
||
|
||
>>> .el-dropdown {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.layout-header {
|
||
/* background: #4064cb; */
|
||
position: relative;
|
||
z-index: 100;
|
||
flex: 0 0 auto;
|
||
height: 60px;
|
||
}
|
||
|
||
.layout-header-bar .align-items-center {
|
||
transform: rotate(0deg);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.layout-header-bar .align-items-center.rotate-90deg {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.layout-header-bar .headertor-con {
|
||
height: 100%;
|
||
padding: 0 12px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.layout-header-bar .headerIcon:hover {
|
||
color: #2d8cf0 !important;
|
||
}
|
||
|
||
>>> .el-menu--horizontal > .el-menu-item {
|
||
float: left;
|
||
line-height: 64px;
|
||
margin: 0;
|
||
border-bottom: 2px solid transparent;
|
||
color: #909399;
|
||
}
|
||
|
||
>>> .el-menu--horizontal > .el-submenu .el-submenu__title {
|
||
line-height: 64px;
|
||
border-bottom: 2px solid transparent;
|
||
color: #909399;
|
||
}
|
||
|
||
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
|
||
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
|
||
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
>>> .el-submenu__title:hover {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
>>> .el-menu--horizontal .el-menu .el-menu-item,
|
||
.el-menu--horizontal .el-menu .el-submenu__title {
|
||
background-color: #fff;
|
||
float: none;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
padding: 0 10px;
|
||
color: #717171 !important;
|
||
}
|
||
|
||
>>> .el-submenu__title i {
|
||
color: #ffffff;
|
||
}
|
||
|
||
>>> .el-dropdown-menu__item:not(.is-disabled):hover {
|
||
color: #3dd15a;
|
||
}
|
||
|
||
>>> .el-carousel__button {
|
||
display: block;
|
||
opacity: 0.48;
|
||
width: 22px;
|
||
height: 5px;
|
||
background-color: rgba(255, 255, 255, 0.7);
|
||
border: none;
|
||
outline: 0;
|
||
padding: 0;
|
||
margin: 0;
|
||
cursor: pointer;
|
||
-webkit-transition: 0.3s;
|
||
transition: 0.3s;
|
||
border-radius: 3px;
|
||
}
|
||
</style>
|