更新样式

gaosp

2024-01-16 e48137c53bd78960f98434436cd2de3303ccf9e8

 src/container/home/index.vue

@@ -2,55 +2,14 @@
    <Home>
        <template slot="menu">
            <div class="menu-container">
                <ul class="">
                    <!-- <li :class="activeId ==='1' ? 'active' : ''" @click="navigateTo('1')">状态监控</li> -->
                    <li :class="activeId ==='preview' ? 'active' : ''" @click="navigateTo('preview')">大屏展示</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" 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>
                            <!-- <li @click="navigateTo('devicemaintenance')">机床维护</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>
@@ -74,12 +33,163 @@
    },
    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() {
@@ -88,43 +198,23 @@
                this.$router.push('/')
            })
        },
        navigateTo (name,v) {
            let routers = {
                2: 'map',
                workshop: 'workshop',
                maintenance: 'maintenance',
                7: 'component',
                ledger: 'ledger',
                deviceType: 'deviceType',
                preview: 'preview',
                devicemaintenance: 'devicemaintenance'
            }
            
            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>
@@ -142,9 +232,14 @@
        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;
@@ -155,9 +250,12 @@
            // 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%;