wanda-bm-guide/src/components/menuList.vue

<template>
    <!-- 顶部路由 -->
    <div class='menu'>
        <div class='home' @click='$emit("update:modelNum", 0)'>
            <div class='downright'></div>
            <div class='home-box'>
                <img src='@/assets/imgs/logo.png' alt />
                <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span>
            </div>
        </div>
        <div>
            <div
                v-for='(item, index) in list'
                :key='index'
                :class='{ "is-active": item.state }'
                @click='clickEventAcitve(item, index)'
            >{{ item.name }}</div>
        </div>
        <div class='home-right'>
            <span @click='dumpLegend'>
                <img class='img1' src='../assets/imgs/scj.png' alt />
                <span class='span1'>图例库</span>
            </span>

            <span @click='toDrafts' class='span-out'>
                <img class='img2' src='../assets/imgs/cgx.png' alt />
                <span class='span2'>草稿箱</span>
                <span class='span2-num' v-if='value<=99'>{{value}}</span>
                <span class='span2-num' style='line-height:10px' v-else>...</span>
            </span>
            <span>
                <img class='img3' src='../assets/imgs/clock.png' alt />
                <span class='span3'>{{times}}</span>
            </span>
        </div>
    </div>
</template>

<script>
import { formatTime } from '@/utils/format.js'
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
    data() {
        return {
            state: '',
            list: [
                { name: '首页', state: false, route: 'first' },
                { name: '项目概况', state: false, route: 'overview' },
                { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
                { name: '设备设施', state: false, route: 'equipment' }, //设备设施
                { name: '其他事项', state: false, route: 'other' }, //其他
                { name: '分析 | 报表', state: false, route: 'analysis' }
            ],
            times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
                new Date().getHours()
            )}:${formatTime(new Date().getMinutes())}`,
            value: 190,
            // 路由词典
            dict: {
                first: 1,
                overview: 2,
                floorFunc: 3,
                equipment: 4,
                other: 5,
                analysis: 6
            }
        }
    },
    computed: {
        ...mapGetters(['plazas', 'plazaId', 'fmapID'])
    },
    watch: {
        $route: 'handleRoute'
    },
    created() {
        this.currentTime()
    },
    mounted() {
        window.vm = this
        this.handleRoute(this.$route)
        console.log(this.fmapID)
    },

    methods: {
        //入草稿箱
        toDrafts() {
            const { conf } = window.__systemConf,
                { editerUrl } = conf
            let data = `projectId=${this.plazaId}&fmapID=${this.fmapID}`
            let url = editerUrl + 'drafts?' + encodeURIComponent(data)
            window.open(url, true)
        },
        currentTime() {
            this.times = moment().format('YYYY.MM.DD HH:mm')
            setTimeout(this.currentTime, 1000)
        },
        handleRoute(newRouter) {
            if (!newRouter) {
                return false
            }
            const { path } = newRouter
            let router = path.split('home/')[1]
            this.modelNum(this.dict[router])
        },
        formatter(str, arrv) {
            if (str && arrv) {
                const Objs = arrv.find(e => e && e.plazaid == str)
                return Objs ? Objs.plazaname : '--'
            } else {
                return ''
            }
        },
        modelNum(val) {
            this.list = this.list.map((item, index) => {
                if (val == index + 1) {
                    item.state = true
                } else {
                    item.state = false
                }
                return item
            })
        },
        clickEventAcitve(item) {
            if (item.name == '楼层功能') {
                this.$cookie.set('categoryId', 'LCGN', 3)
            } else {
                this.$cookie.set('categoryId', 'GDXT', 3)
            }
            this.list.forEach(ele => {
                ele.state = false
            })
            item.state = true
            this.state = item.state
            this.$router.push({ path: `/home/${item.route}` })
        },

        dumpLegend() {
            const { conf } = window.__systemConf,
                { wandaBmGuideUrl } = conf
            window.open(`${wandaBmGuideUrl}home/legendLibrary`, true)
        }
    }
}
</script>

<style scoped lang="less">
.menu {
    height: 48px;
    min-width: 1366px;
    color: #1f2429;
    font-size: 16px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
    overflow: hidden;
    .home {
        width: 265px;
        height: 48px;
        // line-height: 48px;
        text-align: center;
        cursor: pointer;
        color: #ffffff;
        float: left;
        margin-right: 83px;
        // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
        position: relative;
        .downright {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-bottom: 48px solid #fff;
            right: 0px;
            top: 0;
        }
        .home-box {
            height: 100%;
            display: flex;
            align-items: center;
            img {
                width: 28px;
                height: 28px;
                margin-left: 20px;
                margin-right: 24px;
                margin-top: -3px;
            }
            span {
                font-size: 20px;
                font-family: MicrosoftYaHei;
                height: 27px;
                line-height: 27px;
                margin-top: -4px;
                &:after {
                    content: '|';
                    position: absolute;
                    left: 60px;
                }
            }
        }
    }
    & > div:nth-of-type(2) {
        & > div {
            line-height: 48px;
            text-align: center;
            //background: url('../assets/images/topbar1.png') no-repeat;
            float: left;
            width: 80px;
            height: 48px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .is-active {
            color: #025baa;
            font-weight: bolder;
            border-bottom: 2px solid #025baa;
            background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
        }
    }
    .home-right {
        float: right;
        margin-right: 20px;
        line-height: 48px;
        color: #646c73;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-content: center;
        img {
            margin-top: -2px;
        }
        .span-out {
            position: relative;
            margin: 0 16px;
            .span2-num {
                position: absolute;
                right: -5px;
                top: 5px;
                display: inline-block;
                width: 18px;
                height: 18px;
                background: red;
                border-radius: 90px;
                font-size: 12px;
                text-align: center;
                line-height: 18px;
                color: #ffffff;
            }
        }
    }
    .span1,
    .span2 {
        padding: 0 6px 0 3px;
    }

    .span3 {
        padding-left: 3px;
    }
}
</style>
<style lang="less">
.menu {
    .el-badge__content.is-fixed {
        top: 10px;
    }
}
</style>