Skip to content

M
mes-ui
Commit af778faa authored by luo ying's avatar luo ying
Browse files
Options

引导页

parent eb1d86de
Show whitespace changes
Inline Side-by-side
Showing with 307 additions and 0 deletions
pages/home/router.vue 0 → 100644
View file @ af778faa
<template>
<div class="router-main flex fc-m fa-m">
<div class="bdImg pr" @click="menu = false">
<div
class="one pa cursor"
:class="{ oneHover: oneShow && isIndex == index }"
v-for="(item, index) in arrList"
:key="index"
v-bind:style="item.style"
@mouseenter="getPosition(item, index)"
></div>
<div class="pa menu" v-bind:style="menuPos" v-show="menu">
<ul class="bdTitleBox" @mouseleave="leavePosition">
<li
class="lh40 f14 tc testBtn cursor fw5"
v-for="(v, i) in list"
:key="i"
@click="clickLi(v)"
>
{{ v.name }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import { isInteger } from "lodash";
export default {
layout: "empty",
data() {
return {
list: [],
arrList: [],
// arrList: [
// {
// name: "设计区",
// style: {
// top: "247px",
// left: "280px",
// height: "40px",
// width: "80px",
// // border: " 1px solid red",
// transform: " rotate(-13deg) skew(-74deg, 42deg)",
// },
// list: [
// { name: "物料编码" },
// { name: "物料分类" },
// { name: "物料管理" },
// ],
// },
// {
// name: "工艺区",
// style: {
// top: "319px",
// left: "405px",
// height: "40px",
// width: "80px",
// // border: " 1px solid red",
// transform: " rotate(-13deg) skew(-74deg, 42deg)",
// },
// list: [
// { name: "产品管理" },
// { name: "工艺规程" },
// { name: "工艺设置" },
// ],
// },
// {
// name: "市场处",
// style: {
// top: "570px",
// left: "293px",
// height: "40px",
// width: "80px",
// // border: " 1px solid red",
// transform: " rotate(-13deg) skew(-74deg, 42deg)",
// },
// list: [
// { name: "客户管理" },
// { name: "项目管理" },
// { name: "销售管理" },
// { name: "合同管理" },
// ],
// },
// // {
// // name: "管理区",
// // style: {
// // top: "677px",
// // left: "102px",
// // height: "40px",
// // width: "80px",
// // // border: " 1px solid red",
// // transform: " rotate(-13deg) skew(-74deg, 42deg)",
// // },
// // list: [
// // { name: "设备类型" },
// // { name: "设备管理" },
// // { name: "排产资源" },
// // ],
// // },
// {
// name: "综合生产处",
// style: {
// top: "467px",
// left: "440px",
// height: "33px",
// width: "75px",
// // border: " 1px solid red",
// transform: " rotate(197deg) skew(77deg,134deg)",
// },
// list: [
// { name: "订单管理" },
// { name: "订单监控" },
// { name: "订单报价" },
// ],
// },
// {
// name: "生产班组派工",
// style: {
// top: "513px",
// left: "757px",
// height: "33px",
// width: "75px",
// // border: " 1px solid red",
// transform: " rotate(197deg) skew(77deg,134deg)",
// },
// list: [{ name: "班组派工" }],
// },
// {
// name: "设备管理",
// style: {
// top: "638px",
// left: "947px",
// height: "33px",
// width: "75px",
// // border: " 1px solid red",
// transform: " rotate(197deg) skew(77deg,134deg)",
// },
// list: [
// { name: "设备类型" },
// { name: "设备管理" },
// { name: "排产资源" },
// ],
// },
// {
// name: "质检",
// style: {
// top: "186px",
// left: "1304px",
// height: "33px",
// width: "75px",
// // border: " 1px solid red",
// transform: " rotate(197deg) skew(77deg,134deg)",
// },
// list: [
// { name: "原材料复检" },
// { name: "质量检验" },
// { name: "数据包追溯" },
// { name: "产品合格证" },
// ],
// },
// {
// name: "原料仓库",
// style: {
// top: "216px",
// left: "646px",
// height: "79px",
// width: "175px",
// // border: " 1px solid red",
// transform: " rotate(-11deg) skew(-72deg, 41deg)",
// },
// list: [
// { name: "库房位置" },
// { name: "物料管理" },
// { name: "料单配套" },
// { name: "制造资源" },
// ],
// },
// {
// name: "车间计调",
// style: {
// top: "380px",
// left: "553px",
// height: "33px",
// width: "81px",
// // border: " 1px solid red",
// transform: " rotate(-12deg) skew(-72deg, 41deg)",
// },
// list: [
// { name: "计划管理" },
// { name: "排产结果" },
// ],
// },
// {
// name: "组件区",
// style: {
// top: "293px",
// left: "949px",
// height: "144px",
// width: "232px",
// // border: " 1px solid red",
// transform: " rotate(-11deg) skew(-71deg, 40deg)",
// },
// list: [{ name: "工单执行" }, { name: "转序交接" }],
// },
// ],
isIndex: -1,
oneShow: false,
menu: false,
menuPos: {
top: "0",
left: "0",
},
};
},
mounted() {
this.load();
},
methods: {
load() {
console.log(this.$api, this.$http);
this.$api.get(`${systemUrl}/menu/getusermenu?id=mes_roter`).then((r) => {
if (r.result) {
let arr = r.result[0].children.map((l) => {
if (
!this.$u.isNull(l.description) &&
l.description.indexOf("{") > -1
) {
l.style = eval("(" + l.description + ")");
}
return l;
});
console.log("arr", arr);
this.arrList = arr;
}
});
},
clickLi(v) {
if (v) {
this.$router.push(v.url);
}
this.menu = false;
},
getPosition(item, index) {
if (item) {
this.isIndex = index;
this.oneShow = true;
this.list = item.children;
this.menu = true;
var { left, top } = item.style;
this.menuPos = { left, top };
}
},
leavePosition() {
this.oneShow = false;
this.menu = false;
},
},
};
</script>
<style lang="less" scoped>
.router-main {
height: 100%;
.oneHover {
border: 2px dotted #0868da;
}
.bdImg {
height: 822px;
width: 1700px;
background: url("../../assets/images/home/router/routerMain.png") no-repeat;
}
.menu {
width: 100px;
z-index: 999;
transform: translateX(-100px);
border-radius: 4px;
}
.bdTitleBox {
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
li {
color: #232323;
height: 32px;
line-height: 32px;
width: 100px;
}
li:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
li:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
}
.testBtn {
background: rgba(255, 255, 255, 0.8);
}
.testBtn:hover {
background: rgba(38, 128, 235, 0.4);
}
</style>
\ No newline at end of file
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