gaosp
2024-01-16 07907a65daef5f8b624a8b081eebe6fbc1abcbb5
src/container/home/index.vue
@@ -2,54 +2,14 @@
    <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>
                    <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" class="sub">
                            <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 @click="navigateTo('maintenance', {style: 1})">日常保养</li>
                            <li @click="navigateTo('maintenance', {style: 2})">一级</li>
                            <li @click="navigateTo('maintenance', {style: 3})">二级</li>
                            <li @click="navigateTo('maintenance', {style: 4})">三级</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 v-if="activeId === item.id && showSub">
                            <li v-for="child in item.children" @click="goTo(child)">{{ child.label }}</li>
                        </ul>
                    </li>
                </ul>
@@ -73,6 +33,114 @@
    },
    data () {
        return {
            navs: [
                {
                    label: '状态监控',
                    pathName: '',
                    id: 1
                },
                {
                    label: '大屏展示',
                    pathName: 'preview',
                    id: 2,
                },
                {
                    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,
                },
                {
                    label: '工件信息',
                    pathName: 'component',
                    id: 8,
                },
                {
                    label: '更多菜单',
                    id: 9,
                    children: [
                        {
                            label: '台账管理',
                            pathName: 'ledger'
                        },
                        {
                            label: '设备类型',
                            pathName: 'deviceType'
                        },
                        {
                            label: '机床采集',
                            pathName: 'machineList'
                        }
                    ]
                },
            ],
            activeId: '',
            showSub: false,
        }
@@ -87,41 +155,23 @@
                this.$router.push('/')
            })
        },
        navigateTo (name,v) {
            let routers = {
                2: 'map',
                workshop: 'workshop',
                maintenance: 'maintenance',
                7: 'component',
                ledger: 'ledger',
                deviceType: 'deviceType',
            }
            if (['3','4','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
            } else {
                this.activeId = name
                let params = {}
                let query = {}
                if ('workshop' === name) {
                    params.id = v.id
                    query.name = v.name
                this.activeId = item.id || this.activeId
                if(item.pathName) {
                    this.$router.push({name: item.pathName,params: item.params,query: item.query})
                }
                if (name === 'maintenance') {
                    params.style = v.style
                }
                this.$router.push({name: routers[name],params: params,query: query})
                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>