| | |
|---|
| | | <Home> |
|---|
| | | <template slot="menu"> |
|---|
| | | <div class="menu-container"> |
|---|
| | | <ul class=""> |
|---|
| | | <li :class="activeId ==='1' ? 'active' : ''" @click="navigateTo('1')">状态监控</li> |
|---|
| | | <li :class="activeId ==='0' ? 'active' : ''" @click="navigateTo('0')">大屏展示</li> |
|---|
| | | <li :class="activeId ==='2' ? 'active' : ''" @click="navigateTo('2')"> |
|---|
| | | <ul class="nav"> |
|---|
| | | <li v-for="item in navs" :key="item.id" :class="activeId === item.id ? 'active' : ''" @click="goTo(item)"> |
|---|
| | | <span> |
|---|
| | | 车间地图 |
|---|
| | | {{ item.label }} |
|---|
| | | <i class="el-icon-caret-bottom" v-show="item.children && item.children.length > 0"></i> |
|---|
| | | </span> |
|---|
| | | |
|---|
| | | </li> |
|---|
| | | <li :class="activeId ==='3' ? 'active' : ''" @click="navigateTo('3')"> |
|---|
| | | <span> |
|---|
| | | 车间列表<i class="el-icon-caret-bottom"></i> |
|---|
| | | </span> |
|---|
| | | <ul v-if="showSub"> |
|---|
| | | <li v-for="item in workshopList" :key="item.id" @click.stop="navigateTo('workshop',item)">{{ item.name }}</li> |
|---|
| | | </ul> |
|---|
| | | </li> |
|---|
| | | <li :class="activeId ==='4' ? 'active' : ''" @click="navigateTo('4')"> |
|---|
| | | <span> |
|---|
| | | 设备保养<i class="el-icon-caret-bottom"></i> |
|---|
| | | </span> |
|---|
| | | <!-- <ul v-if="showSub"> |
|---|
| | | <li>2厂</li> |
|---|
| | | <li>2厂</li> |
|---|
| | | <li>2厂</li> |
|---|
| | | <li>2厂</li> |
|---|
| | | </ul> --> |
|---|
| | | </li> |
|---|
| | | <li :class="activeId ==='5' ? 'active' : ''" @click="navigateTo('5')"> |
|---|
| | | <span> |
|---|
| | | 报表生成<i class="el-icon-caret-bottom"></i> |
|---|
| | | </span> |
|---|
| | | <!-- <ul v-if="showSub"> |
|---|
| | | <li>2厂</li> |
|---|
| | | <li>2厂</li> |
|---|
| | | <li>2厂</li> |
|---|
| | | <li>2厂</li> |
|---|
| | | </ul> --> |
|---|
| | | </li> |
|---|
| | | <li :class="activeId ==='6' ? 'active' : ''" @click="navigateTo('6')">班次设置</li> |
|---|
| | | <li :class="activeId ==='7' ? 'active' : ''" @click="navigateTo('7')">工件信息</li> |
|---|
| | | <li :class="activeId ==='8' ? 'active' : ''" @click="navigateTo('8')"> |
|---|
| | | <span> |
|---|
| | | 更多菜单<i class="el-icon-caret-bottom"></i> |
|---|
| | | </span> |
|---|
| | | <ul v-if="showSub"> |
|---|
| | | <li @click="navigateTo('ledger')">台账</li> |
|---|
| | | <li @click="navigateTo('deviceType')">设备类型管理</li> |
|---|
| | | <ul class="nav-sub" v-if="item.children && item.children.length > 0 && activeId === item.id && showSub"> |
|---|
| | | <li v-for="child in item.children" @click="goTo(child)">{{ child.label }}</li> |
|---|
| | | </ul> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | |
|---|
| | | }, |
|---|
| | | data () { |
|---|
| | | return { |
|---|
| | | navs: [ |
|---|
| | | { |
|---|
| | | label: '状态监控', |
|---|
| | | pathName: '', |
|---|
| | | id: 1, |
|---|
| | | chilren: [] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '大屏展示', |
|---|
| | | pathName: 'preview', |
|---|
| | | id: 2, |
|---|
| | | chilren: [] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '车间地图', |
|---|
| | | pathName: '', |
|---|
| | | id: 3, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | label: '地图展示', |
|---|
| | | pathName: 'mapPreview' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '地图编辑', |
|---|
| | | pathName: 'map' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '车间列表',// workshop |
|---|
| | | id: 4, |
|---|
| | | children: [] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '设备保养', |
|---|
| | | id: 5, |
|---|
| | | children:[ |
|---|
| | | { |
|---|
| | | label: '日常保养', |
|---|
| | | pathName: 'maintenance', |
|---|
| | | params: {style: 1}, |
|---|
| | | query: {} |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '一级保养', |
|---|
| | | pathName: 'maintenance', |
|---|
| | | params: {style: 2}, |
|---|
| | | query: {} |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '二级保养', |
|---|
| | | pathName: 'maintenance', |
|---|
| | | params: {style: 3}, |
|---|
| | | query: {} |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '三级保养', |
|---|
| | | pathName: 'maintenance', |
|---|
| | | params: {style: 4}, |
|---|
| | | query: {} |
|---|
| | | }, |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '报表生成', |
|---|
| | | id: 6, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | label: '设计器', |
|---|
| | | href: '/mdc/ureport/designer' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '报表生成1' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '报表生成1' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '报表生成1' |
|---|
| | | }, |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '班次设置', |
|---|
| | | id: 7, |
|---|
| | | chilren: [] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '工件信息', |
|---|
| | | pathName: 'component', |
|---|
| | | id: 8, |
|---|
| | | chilren: [] |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '更多菜单', |
|---|
| | | id: 9, |
|---|
| | | children: [ |
|---|
| | | { |
|---|
| | | label: '台账管理', |
|---|
| | | pathName: 'ledger' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '设备类型', |
|---|
| | | pathName: 'deviceType' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: '机床采集', |
|---|
| | | pathName: 'machineList' |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | activeId: '', |
|---|
| | | showSub: false, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | ...mapGetters(['userInfo','workshopList']) |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | workshopList() { |
|---|
| | | this.$set(this.navs,3 ,{ |
|---|
| | | ...this.navs[3], |
|---|
| | | children: this.workshopList.map(item => { |
|---|
| | | return { |
|---|
| | | label: item.name, |
|---|
| | | value: item.id, |
|---|
| | | pathName: 'workshop', |
|---|
| | | params: { |
|---|
| | | id: item.id |
|---|
| | | }, |
|---|
| | | query: { |
|---|
| | | name: item.name |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created () { |
|---|
| | | this.$set(this.navs, 3 ,{ |
|---|
| | | ...this.navs[3], |
|---|
| | | children: this.workshopList.map(item => { |
|---|
| | | return { |
|---|
| | | label: item.name, |
|---|
| | | value: item.id, |
|---|
| | | pathName: 'workshop', |
|---|
| | | params: { |
|---|
| | | id: item.id |
|---|
| | | }, |
|---|
| | | query: { |
|---|
| | | name: item.name |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | // this.navs[3].children = workshopList |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | logout() { |
|---|
| | |
|---|
| | | this.$router.push('/') |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | navigateTo (name,v) { |
|---|
| | | let routers = { |
|---|
| | | 2: 'map', |
|---|
| | | workshop: 'workshop', |
|---|
| | | 4: 'maintenance', |
|---|
| | | 7: 'component', |
|---|
| | | ledger: 'ledger', |
|---|
| | | deviceType: 'deviceType', |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (['3','5','8'].includes(name)) { |
|---|
| | | if (name === this.activeId) { |
|---|
| | | goTo (item) { |
|---|
| | | if (item.id) { |
|---|
| | | if (item.id === this.activeId) { |
|---|
| | | this.showSub = !this.showSub |
|---|
| | | } else { |
|---|
| | | this.showSub = true |
|---|
| | | } |
|---|
| | | this.activeId = name |
|---|
| | | // let param = {} |
|---|
| | | // if (v) { |
|---|
| | | // param.id = v.id |
|---|
| | | // } |
|---|
| | | // this.$router.push({name: routers[name],params: { |
|---|
| | | // id: v.id |
|---|
| | | // },query: { |
|---|
| | | // ...v |
|---|
| | | // }}) |
|---|
| | | // this.$nextTick(() => { |
|---|
| | | // this.showSub = false |
|---|
| | | // }) |
|---|
| | | } else { |
|---|
| | | this.activeId = name |
|---|
| | | console.log(name) |
|---|
| | | let params = {} |
|---|
| | | if ('workshop' === name) { |
|---|
| | | params.id = v.id |
|---|
| | | this.activeId = item.id || this.activeId |
|---|
| | | if(item.pathName) { |
|---|
| | | this.$router.push({name: item.pathName,params: item.params,query: item.query}) |
|---|
| | | } |
|---|
| | | this.$router.push({name: routers[name],params: params}) |
|---|
| | | this.$nextTick(() => { |
|---|
| | | this.showSub = false |
|---|
| | | }) |
|---|
| | | } else if(item.pathName){//二级菜单 |
|---|
| | | this.$router.push({name: item.pathName,params: item.params,query: item.query}) |
|---|
| | | } else if(item.href) { |
|---|
| | | window.open(item.href) |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | |
|---|
| | | list-style: none; |
|---|
| | | display: flex; |
|---|
| | | & > li { |
|---|
| | | width: 112px; |
|---|
| | | height: 40px; |
|---|
| | | line-height: 38px; |
|---|
| | | text-align: center; |
|---|
| | | cursor: pointer; |
|---|
| | | background: #27394E; |
|---|
| | | padding: 0 12px; |
|---|
| | | // background: #27394E; |
|---|
| | | background: url('./nav-li.png') 100% 100% no-repeat; |
|---|
| | | background-size: contain; |
|---|
| | | white-space: nowrap; |
|---|
| | | text-overflow: ellipsis; |
|---|
| | | position: relative; |
|---|
| | | ul { |
|---|
| | | display: none; |
|---|
| | | font-size: 14px; |
|---|
| | | } |
|---|
| | | // user-select:none; |
|---|
| | | } |
|---|
| | | & > li.active { |
|---|
| | | & > ul { |
|---|
| | | background: url('./nav-li-active.png') 100% 100% no-repeat; |
|---|
| | | background-size: contain; |
|---|
| | | & > ul.nav-sub { |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | margin-top: 5px; |
|---|
| | | padding-inline: 0; |
|---|
| | | list-style: none; |
|---|
| | | min-width: 100%; |
|---|
