rt-sim-training-client/src/views/iscs/iscsSystem/menuBar.vue

<template>
  <div id="menuBar">
    <div class="nav">
      <template v-for="(item,i) in menu">
        <template v-if="noShowingChildren(item.children)">
          <li :id="getDomId(item)" :key="i" class="nav-li" @click="hookClick(item)">
            <span class="nav-li-text">{{ item.title }}</span>
          </li>
        </template>
        <template v-else>
          <li
            v-if="handleShow(item)"
            :id="getDomId(item)"
            :key="i"
            :class="i==classA?'nav-li nav-active':'nav-li'"
            @click.stop="selectedClassA(item,i)"
          >
            <span class="nav-li-text">{{ item.title }}</span>
            <ul class="nav-ul" :class="{'active' :i==classA}">
              <template v-for="(child,j) in item.children">
                <template v-if="child.children && child.children.length > 0">
                  <li
                    :id="getDomId(child)"
                    :key="j"
                    class="menu-li"
                    @click.stop="selectedClassB(child, j)"
                  >
                    <div class="menu-li-block">
                      <span class="menu-li-text">
                        <span class="status">&ensp;</span>
                        <span class="label">{{ child.title }}</span>
                      </span>
                    </div>
                    <ul class="menu-ul" :class="{'active' :j==classB}">
                      <template v-for="(grandchild,k) in child.children">
                        <li
                          :id="getDomId(grandchild)"
                          :key="k"
                          class="menu-li"
                          @click.stop="hookClick(grandchild)"
                        >
                          <div class="menu-li-block">
                            <span class="menu-li-text">
                              <span class="status">&ensp;</span>
                              <span class="label">{{ grandchild.title }}</span>
                            </span>
                          </div>
                        </li>
                      </template>
                    </ul>
                  </li>
                </template>
                <template v-else>
                  <li
                    :id="getDomId(child)"
                    :key="j"
                    class="menu-li"
                    @click.stop="hookClick(child)"
                  >
                    <div class="menu-li-block">
                      <span class="menu-li-text">
                        <span class="status">&ensp;</span>
                        <span class="label">{{ child.title }}</span>
                      </span>
                    </div>
                  </li>
                </template>
              </template>
            </ul>
          </li>
        </template>
      </template>
    </div>
  </div>
</template>
<script>
import { EventBus } from '@/scripts/event-bus';
export default {
    name: 'MenuBar',
    data() {
        return {
            classA: -1,
            classB: -1,
            tempClassA: -1,
            tempClassB: -1,
            menu: [
                {
                    title: '系统',
                    operate:{
                        id:'system'
                    },
                    children: [
                        {
                            title: '显示索引',
                            operate:{
                                id:'displayIndex'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '工具箱',
                            operate:{
                                id:'toolBox'
                            },
                            children: [
                                {
                                    title: '终端',
                                    operate:{
                                        id:'history'
                                    },
                                    click: this.undeveloped
                                },
                                {
                                    title: '列点查询',
                                    operate:{
                                        id:'history'
                                    },
                                    click: this.undeveloped
                                },
                                {
                                    title: '缩放',
                                    operate:{
                                        id:'history'
                                    },
                                    click: this.undeveloped
                                },
                                {
                                    title: '修改密码',
                                    operate:{
                                        id:'history'
                                    },
                                    click: this.undeveloped
                                },
                                {
                                    title: '事件导出工具',
                                    operate:{
                                        id:'history'
                                    },
                                    click: this.undeveloped
                                }
                            ]
                        },
                        {
                            title: '历史',
                            operate:{
                                id:'history'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '注销',
                            operate:{
                                id:'cancellation'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '最小化',
                            operate:{
                                id:'minimum'
                            },
                            click: this.undeveloped
                        }
                    ]
                },
                {
                    title: '摘要',
                    operate:{
                        id:'detail'
                    },
                    children: [
                        {
                            title: '报警停用',
                            operate:{
                                id:'alamStop'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '故障设备',
                            operate:{
                                id:'falutEquipment'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '人工置救',
                            operate:{
                                id:'humanSetting'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '检修挂牌',
                            operate:{
                                id:'maintenance'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '标记',
                            operate:{
                                id:'sign'
                            },
                            click: this.undeveloped
                        }
                    ]
                },
                {
                    title: '帮助',
                    operate:{
                        id:'help'
                    },
                    children: [
                        {
                            title: '综合监控用户指南',
                            operate:{
                                id:'alamStop'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '电力用户指南',
                            operate:{
                                id:'alamStop'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '机电用户指南',
                            operate:{
                                id:'alamStop'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '闭路电视用户指南',
                            operate:{
                                id:'alamStop'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '火警报警用户指南',
                            operate:{
                                id:'alamStop'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '屏蔽门用户指南',
                            operate:{
                                id:'alamStop'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '售检票用户指南',
                            operate:{
                                id:'alamStop'
                            },
                            click: this.undeveloped
                        },
                        {
                            title: '门禁用户指南',
                            operate:{
                                id:'alamStop'
                            },
                            click: this.undeveloped
                        }
                    ]
                }
            ]
        };
    },
    watch: {
        tempClassA() {
            this.classA = this.tempClassA;
        },
        tempClassB() {
            this.classB = this.tempClassB;
        }
    },
    methods:{
        noShowingChildren(children) {
            if (!children || children.length <= 0) {
                return true;
            }
            return false;
        },
        getDomId(item) {
            if (item && item.operate) {
                return item.operate.domId;
            }
            return '';
        },
        hookClick(item, event) {
            // this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
            if (item && typeof item.click == 'function') {
                item.click(item.operate);
            }
        },
        handleShow(item) {
            if (item.hide) {
                return false;
            }
            return true;
        },
        undeveloped() {
            this.doClose();
            this.$alert('实现中......', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                }
            });
        },
        selectedClassA(item, index) {
            // const order = this.order || 0;
            this.popupMenuA(item, index);
        },
        selectedClassB(item, index) {
            // const order = this.order || 0;
            this.popupMenuB(item, index);
        },
        popupMenuB(item, index) {
            if (item.children) {
                this.tempClassB = index;
            } else {
                this.tempClassB = -1;
            }

        },
        // 弹出顶部菜单操作
        popupMenuA(item, index) {
            // this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
            this.clickEvent();
            // const operate = {
            //     type: 'bar',
            //     operation: item.operate.operation
            // };
            this.tempClassA = index;
            this.tempClassB = -1;
            // this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
            //     if (valid) {
            //         this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
            //     }
            // });
        },
        clickEvent() {
            const self = this;
            window.onclick = function (e) {
                if (document.getElementById('menuBar')) {
                    self.closeMenu(false);
                }
            };
        },
        closeMenu(flag) {
            this.classA = this.tempClassA = -1;
            this.classB = this.tempClassB = -1;
        },
        doClose() {
            this.$nextTick(() => {
                EventBus.$emit('closeMenu');
            });
        }
    }
};
</script>
<style lang="scss" scoped>
$width: 30px;
$height: 30px;
$menuPadding: 20px;
$menuItemHeight: 30px;
$menuItemWidth: 130px;
$menuItemPadding: 5px;
#menuBar {
    z-index: 10;
    position: absolute;
    width: inherit;
    height: $height;
    line-height: $height;
    background-color: #ACACAC;
    width:100%;
    top:0;
    left:0;
}

.nav {
    display: block;
    cursor: pointer;
    color: #4C4B6B;
    background-color: #ACACAC;
    border-bottom: 2px solid #5d5d5d !important;
    list-style: none;
}

.nav-li {
    position: relative;
    display: inline-block;
    padding-left: $menuPadding;
    height: 30px;
    line-height: 26px;
    padding-right: 40px;
    background-color: #ACACAC;
    border-top: 2px solid #d4d4d4;
    border-left: 2px solid #d4d4d4;
    border-right: 2px solid #5d5d5d !important;
    border-bottom: 2px solid #ACACAC !important;
}

.nav-li::after{
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #4C4B6B;
    position: absolute;
    right:10px;
    top: 13px;
}

.nav-li:active,.nav-active {
    background: #ACACAC;
    border-left: 2px solid #565557;
    border-top: 2px solid #565557;
    border-right: 2px solid #d4d4d4 !important;
    border-bottom: 2px solid #d4d4d4 !important;
}

.nav-li-text {
    font-size: 13px;
    color: #4C4B6B;
    text-align: center;
    text-decoration: none;
}
.nav-ul {
    display: none;
    position: absolute;
    list-style: none;
    line-height: $menuItemHeight;
    background: #ACACAC;
    padding: 0px 40px 0px 10px;
    margin: 0px;
    max-height: 550px;
    // overflow-y: scroll;
    font-size:13px;
    left: -2px;
    top: 30px;
    border: 2px #f1f1f1 solid;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #ACACAC;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
        background: #ACACAC;

    }
}
.active {
    position: absolute;
    display: block !important;
}
.nav-li:active {
    background: #ACACAC;
    border-radius: 4px;
}
.menu-li {
    text-align: left;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    position: relative;
}
.menu-li-block:hover{
    color:#fff;
}

.menu-li-block {
    display: flex;
    letter-spacing: 0;
    height: $menuItemHeight;
    line-height: $menuItemHeight;
}

.menu-ul {
    line-height: $menuItemHeight;
    display: none;
    list-style: none;
    background: #ACACAC;
    line-height: 30px;
    padding: 0px 40px 0px 10px;
    border: 2px #f1f1f1 solid;
    top: 0;
    left: 100px;
    box-shadow: 3px 3px 2px #6d6b6b;
}
</style>