菜单修改

whyczyk

2021-05-11 3f0f4766230b502d093c5d4381525b93f7eee72f

菜单修改

 src/components/PageMenu.vue

@@ -1,5 +1,5 @@
<template>
    <el-menu :default-active="acTabs" class="pageMenu" :collapse="true">
    <!-- <el-menu :default-active="acTabs" class="pageMenu" :collapse="false">
        <template v-for="menu in menus">
            <el-submenu v-if="menu.subMenus" :key="menu.id" :index="menu.id.toString()">
                <template slot="title">
@@ -9,8 +9,6 @@
                    </div>
                </template>
                <div v-for="child in menu.subMenus" :key="child.id" :index="child.id.toString()">
                    <!-- <i v-if="child.icon" :class="child.icon"></i>
                    <span class="text">{{ child.name }}</span> -->
                    <el-submenu v-if="child.subMenus" :key="child.id" :index="child.id.toString()" class="el-submenu">
                        <template slot="title">
                            <i v-if="child.icon" :class="child.icon"></i>
@@ -39,7 +37,42 @@
                </template>
            </el-submenu>
        </template>
    </el-menu>
    </el-menu> -->
    <div class="zykMenu pageMenu">
        <div class="menu-one" v-for="(oneMenu,i) in menus" :key="i">
            <div class="menu-title" @click="select(oneMenu)">
                <div class="left">
                    <i v-if="oneMenu.icon" :class="oneMenu.icon"></i>
                    <span class="text">{{ oneMenu.name }}</span>
                </div>
                <i class="el-icon-arrow-up" v-if="oneMenu.subMenus"></i>
            </div>
            <div class="menu-two-con" v-if="oneMenu.subMenus">
                <div class="menu-two" :class="{'active':twoMenu.show}" v-for="(twoMenu,j) in oneMenu.subMenus" :key="j">
                    <div class="menu-title" @click="select(twoMenu)">
                        <div class="left">
                            <i v-if="twoMenu.icon" :class="twoMenu.icon"></i>
                            <span class="text">{{ twoMenu.name }}</span>
                        </div>
                        <i class="el-icon-arrow-right" v-if="twoMenu.subMenus"></i>
                    </div>
                    <transition name="el-zoom-in-center">
                        <div class="menu-three-con" v-if="twoMenu.subMenus">
                            <div class="menu-three" v-for="(threeMenu,j) in twoMenu.subMenus" :key="j">
                                <div class="menu-title">
                                    <div class="left">
                                        <i v-if="threeMenu.icon" :class="threeMenu.icon"></i>
                                        <span class="text">{{ threeMenu.name }}</span>
                                    </div>
                                    <i class="el-icon-arrow-right" v-if="threeMenu.subMenus"></i>
                                </div>
                            </div>
                        </div>
                    </transition>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
@@ -52,7 +85,6 @@
        },
        methods: {
            select(data) {
                console.log(data)
                if (data.url) {
                    this.$router.push({
                        path: `/index/${data.url}`,
@@ -61,6 +93,12 @@
                    });
                }
            },
            mouseoverTwoMenu(twoMenu) {
                twoMenu['show'] = true;
            },
            mouseleaveTwoMenu(twoMenu) {
                twoMenu['show'] = false;
            }
        },
        mounted() {
            let pageMenu = JSON.parse(sessionStorage.getItem('pageMenu'));
@@ -80,8 +118,6 @@
                    })
                })
            })
            console.log(pageMenu)
            console.log(this.menus)
        },
    }
</script>
@@ -92,4 +128,109 @@
        width: 100%;
        white-space: normal;
    }

    .zykMenu {
        width: 100%;
    }

    .zykMenu .menu-title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        cursor: pointer;
        color: #d2cccc;
        transition: 0.3s;
    }

    .zykMenu .menu-title:hover {
        color: #ffffff;
    }

    .zykMenu .menu-one .menu-title .left {
        display: flex;
        align-items: center;
    }

    .zykMenu .menu-one .menu-title .left i {
        font-size: 14px;
    }

    .zykMenu .menu-one .menu-title .text {
        font-size: 12px;
        margin-left: 8px;
    }

    .zykMenu .menu-one>.menu-title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: rgba(82, 87, 177, 1);
        padding: 8px 14px;
        border-bottom: 1px solid #818181;
        color: #ffffff;
    }

    .zykMenu .menu-one:last-of-type>.menu-title {
        border-bottom: none;
    }

    .zykMenu .menu-one>.menu-title .left i {
        font-size: 16px;
    }

    .zykMenu .menu-one>.menu-title .text {
        font-size: 14px;
        margin-left: 8px;
    }

    .zykMenu .el-icon-arrow-up,
    .zykMenu .el-icon-arrow-right {
        font-weight: bold;
        font-size: 12px;
    }

    .zykMenu .menu-two {
        position: relative;
    }

    .zykMenu .menu-two-con {
        padding: 6px 0;
    }

    .zykMenu .menu-two .menu-three-con {
        width: 220px;
        position: absolute;
        right: -220px;
        top: 0;
        z-index: 9;
        background-image: linear-gradient(#2a3879, #222767);
        display: none;
        padding: 6px 0;
        border-radius: 4px;
        border-top: 4px solid rgba(82, 87, 177, 1);
        box-shadow: 0 0 4px rgb(255 255 255 / 30%);
    }

    .zykMenu .menu-two .menu-three-con:before {
        position: absolute;
        content: '';
        border-top: 10px transparent dashed;
        border-left: 10px transparent dashed;
        border-bottom: 10px transparent dashed;
        border-right: 10px #d2cccc solid;
    }

    .zykMenu .menu-two .menu-three-con:before {
        top: 4px;
        left: -20px;
        /*覆盖并错开1px*/
        border-right: 10px #d2cccc solid;
    }

    .zykMenu .menu-two:hover .menu-three-con {
        display: block;
    }
</style>

 src/pages/home/topoGraph.vue

@@ -676,8 +676,7 @@
                    .dynamometer == 1 && this.AFEcabinet == 1 && this.transformer == 1) {
                    this.axis1 = diagram.getZoomLineInfo('line10');
                    this.axis2 = diagram.getZoomLineInfo('line11');
                    this.axis2[0][0] = this.axis2[0][0] - 30;
                    this.axis2[1][0] = this.axis2[1][0] - 40;
                    this.axis2[0][0] = this.axis2[0][0] - 15;
                }
            },
            setDiagramByType() {
@@ -767,8 +766,7 @@
                    this.axis1 = diagram.getZoomLineInfo('line10');
                    setTimeout(() => {
                        this.axis2 = diagram.getZoomLineInfo('line11');
                        this.axis2[0][0] = this.axis2[0][0] - 30;
                        this.axis2[1][0] = this.axis2[1][0] - 40;
                        this.axis2[0][0] = this.axis2[0][0] - 15;
                    }, 100);
                }
                diagramStates(diagram, this.run);

 src/pages/index.vue

@@ -40,14 +40,17 @@
  }

  .pageSlideMenu {
    padding-left: 5px;
    padding-bottom: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    z-index: 12;
    left: 0;
    top: 0;
    bottom: 0;
    width: 220px;
  }

  .pageConten {
    flex: 1;
    width: 100%;
    padding-left: 220px;
  }

  .viewCon {