集优化项目阶段代码提交

src/views/integrateOptimization/menuConfig.js

@@ -7,14 +7,16 @@ const menuConfig = [
         title: "首页",
         path: "/main",
         name: "home",
-        role: "all"
+        role: "all",
+        show:true,
     },
     {
         title: "整体概况",
         path: "/whole",
         name: "wholePage",
-        iconType: "icon-caidan",
+        iconType: "icon-paikeguanli",
         role: ["city", "county", "district"],
+        show:true,
         component: () => import("./page/businessPages/pageIndex.vue"),
         children: [
             {
@@ -46,6 +48,7 @@ const menuConfig = [
         name: "resourcesPage",
         role: ["city", "county", "district", "school"],
         iconType: "icon-zichanlvli",
+        show:true,
         component: () => import("./page/businessPages/pageIndex.vue"),
         children: [
             {
@@ -84,6 +87,7 @@ const menuConfig = [
         name: "teamBuildingPage",
         role: ["city", "county", "district", "school"],
         iconType: "icon-wodehuiyi1",
+        show:true,
         component: () => import("./page/businessPages/pageIndex.vue"),
         children: [
             {
@@ -122,6 +126,7 @@ const menuConfig = [
         name: "courseBuildingPage",
         role: ["city", "county", "district", "school"],
         iconType: "icon-wangluoxunke",
+        show:true,
         component: () => import("./page/businessPages/pageIndex.vue"),
     },
     {
@@ -130,6 +135,7 @@ const menuConfig = [
         name: "specialSetPage",
         role: ["city", "county", "district", "school"],
         iconType: "icon-yingyongqingkuang",
+        show:true,
         component: () => import("./page/businessPages/pageIndex.vue"),
         children: [
             {
@@ -168,6 +174,7 @@ const menuConfig = [
         name: "qualityMonitorPage",
         role: ["city", "county", "district", "school"],
         iconType: "icon-gerenhecha",
+        show:true,
         component: () => import("./page/businessPages/pageIndex.vue"),
         children: [
             {
@@ -200,5 +207,59 @@ const menuConfig = [
             }
         ]
     },
+    {
+        title: "政策方针",
+        path: "/policy",
+        name: "policyPage",
+        role: "public",
+        show:true,
+        iconType:"icon-wodegongwen",
+        component: () => import("./page/businessPages/pageIndex.vue"),
+    },
+    {
+        title: "会议动态",
+        path: "/meetingInfo",
+        name: "meetingInfoPage",
+        role: "public",
+        show:true,
+        iconType:"icon-yuyuehuiyishi",
+        component: () => import("./page/businessPages/pageIndex.vue"),
+    },
+    {
+        title: "信息宣传",
+        path: "/info",
+        name: "infoPage",
+        role: "public",
+        show:true,
+        iconType:"icon--tongzhi",
+        component: () => import("./page/businessPages/pageIndex.vue"),
+    },
+    {
+        title: "工作要点",
+        path: "/workPoint",
+        name: "workPointPage",
+        role: "public",
+        show:true,
+        iconType:"icon-quanbuxinwen",
+        component: () => import("./page/businessPages/pageIndex.vue"),
+    },
+    {
+        title: "评估指标",
+        path: "/target",
+        name: "targetPage",
+        role: "public",
+        show:true,
+        iconType:"icon-jihuatongji",
+        component: () => import("./page/businessPages/pageIndex.vue"),
+    },
+    {
+        title: "评估结果",
+        path: "/evaluationResult",
+        name: "evaluationResultPage",
+        role: "public",
+        show:true,
+        iconType:"icon-zongjietongji",
+        component: () => import("./page/businessPages/pageIndex.vue"),
+    },
 ]
 export default menuConfig;

src/views/integrateOptimization/page/businessPages/businessTop.vue

@@ -4,7 +4,7 @@
             <div class="system-title-style">长春市基础教育集优化发展管理服务平台</div>
             <Logout/>
         </div>
-        <TopMenu @replace="toReplace" :pageName="pageName"/>
+        <TopMenu @replace="toReplace" :pageName="pageName" ref="topMenu"/>
     </div>
 </template>
 <script>
@@ -15,6 +15,9 @@
             return {}
         },
         props:['pageName'],
+        mounted(){
+            this.$refs.topMenu.calcMenuWidth();
+        },
         methods:{
             /*
             * 路由跳转

src/views/integrateOptimization/page/businessPages/policy/policy.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+
+政策方针
+    </div>
+</template>
+
+
+<script>
+    export default{
+        data(){
+            return {}
+        }
+    }
+</script>
+
+<style></style>

src/views/integrateOptimization/page/businessPages/topMenu.vue

@@ -1,11 +1,23 @@
 <template>
     <div class="top-menu-style">
         <div class="menu-list-style">
-            <div v-for="menu in menus" :key="menu.name"
+            <template v-for="menu in menus">
-                 :class="'menu-style ' + (menuName === menu.name?' router-menu-style':'')">
+                <div v-if="menu.show"
-                <my-icon :type="menu.iconType" class="icon-style"></my-icon>
+                     :class="'menu-style ' + (menuName === menu.name?' router-menu-style':'') + (menu.role === 'public'?' public-menu-style':'')">
-                <span @click="menuClick(menu)" class="menu-name-style">{{menu.title}}</span>
+                    <my-icon :type="menu.iconType" class="icon-style"></my-icon>
-            </div>
+                    <span @click="menuClick(menu)" class="menu-name-style">{{menu.title}}</span>
+                </div>
+            </template>
+            <a-popover placement="bottom" v-if="showMore" class="show-more-style">
+                <template slot="content" >
+                    <div v-for="hiddenMenu in hiddenMenus" :key="hiddenMenu.name" class="hidden-menu-style" >
+                        <my-icon :type="hiddenMenu.iconType" class="icon-style" ></my-icon>
+                        <span @click="hiddenMenuClick(hiddenMenu)" class="menu-name-style" style="margin-left: 0.5rem;margin-top:0.5rem;cursor: pointer">{{hiddenMenu.title}}</span>
+                    </div>
+                </template>
+                <my-icon :type="showMoreIconType" class="icon-style"></my-icon>
+                <span class="menu-name-style">{{showMoreTitle}}</span>
+            </a-popover>
         </div>
         <div class="children-menu-list-style">
             <template v-if="menuChildren">
@@ -18,13 +30,20 @@
     </div>
 </template>
 <script>
+    import {Popover} from 'ant-design-vue';
+    import _ from 'lodash';
     export default{
         data(){
             return {
-                menus: this.$store.state.userStore.menus,//所有菜单项
+                menus: _.cloneDeep(this.$store.state.userStore.menus),//所有菜单项
                 menuName: "",//选中菜单名称
                 menuChildren: [],//子菜单集合
                 childMenuName: "",//选中子菜单名称
+                windowWidth: document.body.clientWidth,
+                showMore: false,//是否展示更多按钮
+                showMoreTitle: "更多",
+                showMoreIconType:"icon-caidan",
+                hiddenMenus: [],//隐藏的菜单集合
             }
         },
         props: ['pageName'],
@@ -41,16 +60,55 @@
             }
         },
         methods: {
+            /*
+            * 计算菜单宽度和屏幕宽度之间的关系
+            * */
+            calcMenuWidth:function () {
+                this.menus = _.cloneDeep(this.$store.state.userStore.menus);//所有菜单项
+                let menuTotalWidth = 0;
+                let menuDomArr = document.getElementsByClassName("menu-style");
+                if (menuDomArr && menuDomArr.length > 0) {
+                    let len = menuDomArr.length;
+                    for (let i = 0; i < len; i++) {
+                        let menuWidth = menuDomArr[i].clientWidth;
+                        menuTotalWidth += menuWidth;
+                    }
+                    if (menuTotalWidth > this.windowWidth) {
+                        /*
+                         * 隐藏的菜单长度如果超过差异宽度 就隐藏
+                         * */
+                        let neetHiddenWidth = 0;
+                        let hiddenIndex = -1;
+                        for (let i = len - 1; i >= 0; i--) {
+                            let hiddenWidth = menuDomArr[i].clientWidth;
+                            neetHiddenWidth += hiddenWidth;
+                            if (neetHiddenWidth > menuTotalWidth - this.windowWidth) {
+                                hiddenIndex = i;
+                                break;
+                            }
+                        }
+                        //设置隐藏 范围 hiddenIndex-menuDomArr.length
+                        for (let i = hiddenIndex - 1; i < len; i++) {
+                            this.menus[i].show = false;
+                            this.hiddenMenus.push(this.menus[i]);
+                        }
+                        //展示更多
+                        this.showMore = true;
+                    }
+                }
+            },
             /*
              * 一级菜单点击事件
              * */
             menuClick: function (menu) {
                 if (this.menuName !== menu.name) {
+                    this.showMoreTitle = "更多";
+                    this.showMoreIconType = "icon-caidan";
                     this.menuName = menu.name;
                     this.childMenuName = "";
                     this.menuChildren = this.getMenuChildren();
                     let path = menu.path;
-                    if(this.menuChildren && this.menuChildren.length > 0){
+                    if (this.menuChildren && this.menuChildren.length > 0) {
                         path = this.menuChildren[0].path;
                         this.childMenuName = this.menuChildren[0].name;
                     }
@@ -66,6 +124,24 @@
                     this.replacePath(menu.path);
                 }
             },
+            /*
+             * 隐藏菜单点击事件
+             * */
+            hiddenMenuClick:function (menu) {
+                if (this.menuName !== menu.name) {
+                    this.showMoreTitle = menu.title;
+                    this.showMoreIconType = menu.iconType?menu.iconType:"";
+                    this.menuName = menu.name;
+                    this.childMenuName = "";
+                    this.menuChildren = this.getMenuChildren();
+                    let path = menu.path;
+                    if (this.menuChildren && this.menuChildren.length > 0) {
+                        path = this.menuChildren[0].path;
+                        this.childMenuName = this.menuChildren[0].name;
+                    }
+                    this.replacePath(path);
+                }
+            },
             /*
              * 根据当前menuName获取菜单对应的children
              * */
@@ -85,6 +161,9 @@
             replacePath: function (path) {
                 this.$emit("replace", path);
             }
+        },
+        components: {
+            APopover: Popover
         }
     }
 </script>
@@ -108,6 +187,7 @@
                 .menu-name-style {
                     cursor: pointer;
                     margin-left: 0.5rem;
+                    white-space: nowrap;
                 }
             }
             .router-menu-style {
@@ -119,6 +199,36 @@
                     cursor: default;
                 }
             }
+            .public-menu-style{
+                display: flex;
+                flex-direction: column;
+                .icon-style{
+                    font-size: 1rem;
+                }
+                .menu-name-style{
+                    font-size: 0.6rem;
+                    margin-top: 0.2rem;
+                }
+            }
+            .show-more-style {
+                padding: 1.5rem 2rem;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                color: white;
+                font-size: 1.2rem;
+                .icon-style{
+                    font-size: 1rem;
+                }
+                .menu-name-style {
+                    font-size: 0.6rem;
+                    margin-top: 0.2rem;
+                    cursor: pointer;
+                    white-space: nowrap;
+                    text-decoration: underline;
+                }
+            }
         }
         .children-menu-list-style {
             width: 100%;

src/views/integrateOptimization/page/homePage/bannerCarousel.vue

@@ -5,7 +5,8 @@
         </a-carousel>
         <div class="home-page-menu-style">
             <div v-for="menu in menus" :key="menu.name" class="home-menu-style" @click="menuClick(menu)">
-                {{menu.title}}
+                <my-icon :type="menu.iconType" class="icon-style"></my-icon>
+                <span class="menu-title-style">{{menu.title}}</span>
             </div>
         </div>
     </div>
@@ -30,7 +31,7 @@
                 ],
                 menus: this.$store.state.userStore.menus.filter(menu => {
                     //去掉首页项
-                    return menu.name !== 'home';
+                    return menu.name !== 'home' && menu.role !== 'public';
                 })
             }
         },
@@ -101,6 +102,9 @@
                 font-weight: bolder;
                 border-radius: 5px;
                 cursor: pointer;
+                .menu-title-style{
+                    margin-left: 0.5rem;
+                }
             }
             .home-menu-style:hover {
                 opacity: 1;

src/views/integrateOptimization/page/homePage/fixedNavigation.vue

@@ -3,9 +3,9 @@
         <div v-for="menu in menus" :key="menu.iconType" class="menu-style" @mouseenter="mouseenter(menu)"
              @mouseleave="mouseleave(menu)">
             <span v-show="isOpen && !menu.isBigger">{{menu.title}}</span>
-            <a-icon v-show="!isOpen" :type="menu.iconType" :title="menu.title" class="menu-icon-style"></a-icon>
+            <my-icon v-show="!isOpen" :type="menu.iconType" :title="menu.title" class="menu-icon-style"></my-icon>
             <div v-show="isOpen && menu.isBigger" class="menu-bigger-style">
-                <a-icon :type="menu.iconType" class="bigger-menu-icon-style"></a-icon>
+                <my-icon :type="menu.iconType" class="bigger-menu-icon-style"></my-icon>
                 <span>{{menu.title}}</span>
             </div>
         </div>
@@ -28,14 +28,10 @@
             return {
                 windowHeight: document.documentElement.clientHeight,//实时屏幕高度
                 isOpen: false,//是否展开
-                menus: [
+                menus: this.$store.state.userStore.menus.filter(menu => {
-                    {iconType: "read", title: "政策方针"},
+                    //公共信息
-                    {iconType: "solution", title: "会议动态"},
+                    return menu.role === 'public';
-                    {iconType: "notification", title: "信息宣传"},
+                })
-                    {iconType: "profile", title: "工作要点"},
-                    {iconType: "apartment", title: "评估指标"},
-                    {iconType: "line-chart", title: "评估结果"},
-                ]
             }
         },
         methods: {

src/views/integrateOptimization/utils/routerUtils.js

@@ -29,7 +29,7 @@ function loadRoutes(options) {
  * */
 function menuFilter(menuConfig, role) {
     return menuConfig.filter(menu => {
-        return menu.role === "all" || menu.role.indexOf(role) > -1
+        return menu.role === "all" || menu.role.indexOf(role) > -1 || menu.role === "public"
     }).map(route => {
         route = Object.assign({}, route);
         if (route.children) {