subject_gxj/projects/src/main/webapp/vmodules/leftMenu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!-- 左侧导航区域 -->
<div id="leftMenu" class="layui-side left_menu" :class="{close: collapse}">
    <!-- <div class="top_menu" @click="changeSide" v-if="collapse"></div> -->
    <div class="header_content_left">
        <div class="header_code"></div>
        <div class="header_text">哈密市工业项目智慧平台</div>
    </div>
    <div class="expand_collapse_btn" @click="changeSide"></div>
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li :class="['layui-nav-item', {'layui-nav-itemed layui-nav-itemed-hand': Number(active) === index}]"
                v-for="(item, index) in navLs" :key="index" v-if="menuCode.indexOf(item.code) >= 0"
            >
                <a :title="item.txt" @click="onSelectItem(index)" href="javascript:;">
                    <div class="left">
                        <i class='icon'
                           :class="Number(active) === index ? item.activeIcon : item.icon"
                        ></i>{{item.txt}}
                    </div>
                    <i class="layui-icon layui-icon-down"></i>
                </a>
                <!-- <a v-else :title="item.txt" @click="onSelectItem(index)" :class="['icon', ]" href="javascript:;">{{item.txt}}</a> -->

                <dl class="layui-nav-child" v-if="item.child != null">
                    <dd v-if="menuCode.indexOf(it.code) >= 0"
                        v-for="(it,ind) in item.child" :key="'inner_' + ind"
                        :class="{'layui-this': it.code === curSelectedMenu}"
                    >
                        <a :title="it.txt" href="javascript:;"
                           @click="onSelectItem(index,ind)"
                        >{{it.txt}}</a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    var year = new Date().getFullYear();
    new Vue({
        el: "#leftMenu",
        data: {
            winH: 0,
            collapse: false,
            tabActive: 1,
            curSelectedMenu: '',
            isDialog: '${isDialog}',
            active: 0, // 左侧菜单选中项
            buttonActive: 1,
            buttonActive2: 1,
            menuCode: "${menuCode}".split(","),
            topBreadcrumb: '',
            navLs: [
                {
                    icon: 'icon_big_screen_active',
                    activeIcon: 'icon_big_screen_active',
                    code: '101',
                    txt: '智慧分析大屏',
                    url: 'statics/analysisScreenTwo'
                },
                {
                    icon: 'icon_project_active',
                    activeIcon: 'icon_project_active',
                    code: '4',
                    txt: '项目四库管理',
                    child: [

                        {
                            txt: '储备库',
                            code: '402',
                            url: 'subject/subInfo/projTz?type=3',
                            before: function () {
                                window.localStorage.removeItem("TzQueryParam_cb_${loginUserId}")
                            }
                        },
                        {
                            txt: '新建库',
                            code: '408',
                            url: 'subject/subInfo/projTz?type=0',
                            before: function () {
                                window.localStorage.removeItem("TzQueryParam_xj_${loginUserId}")
                            }
                        },
                        {
                            txt: '在建库',
                            code: '401',
                            url: 'subject/subInfo/projTz?type=1',
                            before: function () {
                                window.localStorage.removeItem("TzQueryParam_main_${loginUserId}")
                            }
                        },
                        {
                            txt: '投产库',
                            code: '403',
                            url: 'subject/subInfo/projTz?type=4',
                            before: function () {
                                window.localStorage.removeItem("TzQueryParam_end_${loginUserId}")
                            }
                        }
                        ,
                        {
                            txt: '项目总库',
                            code: '404',
                            url: 'subject/subInfo/projTz?type=5',
                            before: function () {
                                window.localStorage.removeItem("TzQueryParam_end_${loginUserId}")
                            }
                        }
                    ]
                },
                {
                    icon: 'icon_work_bench_active',
                    activeIcon: 'icon_work_bench_active',
                    code: '201',
                    txt: '互动工作台',
                    url: 'workBench/zrWorkBench',
                    kind: ["1", "4"]
                },
                {
                    icon: 'icon_organ_manage_active',
                    activeIcon: 'icon_organ_manage_active',
                    code: '3',
                    txt: '项目前期管理',
                    child: [
                        {
                            txt: '项目信息申报',
                            code: '301',
                            url: 'subject/subInfo/report'
                        },
                        {
                            txt: '前期手续办理情况',
                            code: '303',
                            url: 'subject/subInfo/pre'/* ?type=qx */
                        }
                    ]
                },
                {
                    icon: 'icon_project_active',
                    activeIcon: 'icon_project_active',
                    code: '1999',
                    txt: '重点项目调度',
                    child: [
                        {
                            txt: '储备项目',
                            code: '1103',
                            url: 'subject/subInfo/projTz?type=yearReserve',
                            before: function () {
                                window.localStorage.removeItem("TzQueryParam_yearReserve_${loginUserId}")
                            }
                        },
                        {
                            txt: '新建项目',
                            code: '1101',
                            url: 'subject/subInfo/projTz?type=yearNew',
                            before: function () {
                                window.localStorage.removeItem("TzQueryParam_yearNew_${loginUserId}")
                            }
                        },
                        {
                            txt: '在建项目',
                            code: '1102',
                            url: 'subject/subInfo/projTz?type=yearExtend',
                            before: function () {
                                window.localStorage.removeItem("TzQueryParam_yearExtend_${loginUserId}")
                            }
                        },
                        {
                            txt: '投产项目',
                            code: '1104',
                            url: 'subject/subInfo/projTz?type=yearSum',
                            before: function () {
                                window.localStorage.removeItem("TzQueryParam_yearSum_${loginUserId}")
                            }
                        },
                    ]
                },
                {
                    icon: 'icon_over_time_active', activeIcon: 'icon_over_time_active',
                    code: '5',
                    txt: '统计分析',
                    url: 'tjfx/index'
                    // url: 'register/underConstruction'
                },
                {
                    icon: 'icon_over_time_active',
                    activeIcon: 'icon_over_time_active',
                    code: '6',
                    txt: '预警问题督办',
                    child: [
                        {
                            txt: '问题统计分析',
                            code: '602',
                            icon: 'icon_question_gz',
                            url: 'problem/info/index'
                            // url: 'register/underConstruction'
                        },
                        {
                            txt: '问题推送处理',
                            code: '603',
                            url: "problemtrack/index"
                            // url: 'register/underConstruction'

                        }
                    ]
                },
                {
                    icon: 'icon_zjfwk_active',
                    activeIcon: 'icon_zjfwk_active',
                    txt: '智联工地',
                    code: '7',
                    child: [
                        {
                            code: '702',
                            txt: '项目地图',
                            url: 'smart/query'
                            //url: 'register/underConstruction'
                        },
                        {
                            code: '703',
                            txt: '实时视频',
                            url: 'smart/vedio'
                            //url: 'register/underConstruction'
                        },
                        {
                            txt: '周调度图片',
                            code: '706',
                            url: 'graphicProgress/list'
                            // url: 'register/underConstruction'
                        },
                        {
                            txt: '月航拍全景',
                            code: '707',
                            url: 'aerial/list'
                            // url: 'register/underConstruction'
                        }

                    ]
                },
                {
                    icon: 'icon_project_xtgl_active',
                    activeIcon: 'icon_project_xtgl_active',
                    code: '9',
                    txt: '系统管理',
                    child: [
                        {
                            txt: '项目单位信息',
                            code: '904',
                            url: 'register/query'
                        },
                        {
                            txt: '行业部门信息',
                            code: '906',
                            url: 'junit/index'
                        },
                        {
                            txt: '字典管理',
                            code: '909',
                            url: 'dicsystable/index',
                        },
                        {
                            txt: '行业设置',
                            code: '918',
                            url: 'subIndu/index',
                        },
                        {
                            txt: '公告管理',
                            code: '910',
                            url: 'notice/index'
                        },
                        {
                            txt: '系统参数设置',
                            code: '911',
                            url: 'sysTable/index'
                        },
                        // {
                        //     txt: '操作日志查询',
                        //     code: '913',
                        //     url: 'subDataLog/index'
                        // },
                        {
                            txt: '登录日志',
                            code: '920',
                            url: 'loginlog/index'
                        },
                        {
                            txt: '审计日志',
                            code: '408',
                            url: 'auditLog/index'
                        },
                        {
                            txt: '短信日志查询',
                            code: '915',
                            url: 'msgLog/index'
                        },
                        {
                            code: '917',
                            txt: 'A项目年度计划',
                            // url: 'annualPlan/index'
                            url: 'annualPlan/index'
                        },
                        {
                            txt: 'B项目周报',
                            code: '406',
                            // url: 'weekReport/view'
                            url: 'weekReport/view'
                        },
                        {
                            txt: 'C项目月报',
                            code: '407',
                            // url: 'monthReport/view'
                            url: 'monthReport/view'
                        },
                        {
                            txt: 'D每个月项目转换情况',
                            code: '450',
                            url: 'tjfx/xmzhtj'
                            // url: 'register/underConstruction'
                        },
                    ]
                }
            ],
            imgLs: 10
        },
        mounted: function () {
            const self = this
            const si = setInterval(() => {
                if (document.querySelector('#rightContent')) {
                    self.init();
                    clearInterval(si)
                }
            }, 100)
            window.addEventListener("message", e => {
                console.log('leftMenu receive message：', e.data)
                this.changeSide(e.data.collapse ?? false)
            });
            window.toWorkBench = this.toWorkBench;
            window.toTask = this.toTask;
        },
        methods: {
            init: function () {
                if (this.isDialog === '1') {
                    this.toTask();
                }
                const $ = layui.jquery
                // $('#rightContent').width(document.body.clientWidth - 190).height(document.body.clientHeight - 50);
                // window.addEventListener('resize', function () {
                //     $('#rightContent').height(document.body.clientHeight - 50);
                // })

                //通过hash值的索引定位应该加载哪个页面
                var href = window.location.href;
                var toUrl = href.replace(App.getUrl("index"), "");
                if (toUrl.indexOf("#") == 0 && toUrl.length >= 2) {
                    var hashIndex = toUrl.replace("#", "").split("_");
                    for (var i = 0; i < hashIndex.length; i++) {
                        if (!isNumber(hashIndex[i])) {
                            return;
                        }
                    }
                    if (hashIndex.length > 1) {
                        this.onSelectItem(hashIndex[0], hashIndex[1]);
                    } else {
                        this.onSelectItem(hashIndex[0]);
                    }
                    //页面选中
                    /* for(var i =0;i<this.navLs.length;i++){
                        if (this.navLs[i].child != null){
                            //再次循环
                            for (var j=0;j<this.navLs[i].child.length;j++){
                                if(toUrl.indexOf(this.navLs[i].child[j].url) >= 0){
                                    $("#rightContent").attr("src",App.getUrl(toUrl.substring(2,toUrl.length)));
                                    this.active = i;
                                    break;
                                }
                            }
                        }else{
                            if(toUrl.indexOf(this.navLs[i].url) >= 0){
                                $("#rightContent").attr("src",App.getUrl(toUrl.substring(2,toUrl.length)));
                                this.active = i;
                                break;
                            }
                        }

                    } */

                } else {
                    //初始化选中第一个菜单
                    for (var i = 0; i < this.navLs.length; i++) {
                        if (this.menuCode.indexOf(this.navLs[i].code) >= 0) {
                            if (this.navLs[i].child) {
                                var child = this.navLs[i].child;
                                for (var j = 0; j < child.length; j++) {
                                    if (this.menuCode.indexOf(child[j].code) >= 0) {
                                        this.onSelectItem(i, j);
                                        return;
                                    }
                                }
                            } else {
                                this.onSelectItem(i);
                                return;
                            }
                        }
                    }
                }

            },

            changeSide: function (status) {
                if (typeof status === 'boolean') {
                    this.collapse = status
                } else {
                    this.collapse = !this.collapse
                }
                const iframeObj =  $("#rightContent")
                iframeObj[0].contentWindow.postMessage({
                    collapse: this.collapse,
                    topBreadcrumb: this.topBreadcrumb,
                });
            },
            toWorkBench: function () {
                var index = this.navLs.findIndex(item => {
                    return item.txt === '工作台';
                });
                this.onSelectItem(index)
            },
            toTask: function () {
                /*       top.App.openLayer({
                           title : "项目调度情况",
                           content : App.getUrl("meetingRecords/show"),
                           height : "700",
                           width : "90%"
                       });*/
                //详情
                var index = top.layer.open({
                    type: 2,
                    area: ['95%', '100%'],
                    content: App.getUrl("taskRecords/show"),
                    shade: 0.5,
                    shadeClose: true
                });
                //top.layer.full(index);
            },
            onSelectItem: function (index, ind) {
                this.active = index;
                if (ind != undefined) {
                    var chooseNode = this.navLs[index]["child"][ind];
                    if (chooseNode.url) {
                        if (chooseNode.before && typeof (chooseNode.before) == 'function') {
                            chooseNode.before();
                        }
                        window.location.hash = index + "_" + ind;
                        var parentNodeText = this.navLs[index].txt;
                        this.curSelectedMenu = this.navLs[index].child?.[ind].code ?? ''
                        $("#rightContent").attr("src", App.getUrl(chooseNode.url));
                        const htmlStr = '<span style="margin-right: 5px; color: #dde1e6;">' + parentNodeText + ' /</span>' + chooseNode.txt
                        this.topBreadcrumb = htmlStr
                    } else {
                        App.msg.warn("正在建设中");
                    }
                } else if (this.navLs[index].url) {
                    var chooseNode = this.navLs[index];
                    if (chooseNode.before && typeof (chooseNode.before) == 'function') {
                        chooseNode.before();
                    }
                    window.location.hash = index;
                    $("#rightContent").attr("src", App.getUrl(this.navLs[index].url));
                    this.topBreadcrumb = this.navLs[index].txt
                }
            },
            onChangeActive: function (index) {
                this.tabActive = index
            },
            onButtonActive: function (index) {
                this.buttonActive = index
            },
            onView: function () {
                const $ = layui.jquery
                layer.open({
                    type: 1,
                    title: '确认信息',
                    skin: 'pop_info_class',
                    id: 'layerPop1', //防止重复弹出
                    content: $('#popInfo'),
                    btn: ['取消', '提交'],
                    btnAlign: 'c', //按钮居中
                    yes: function () {
                        layer.closeAll();
                    },
                    btn2: function () {
                    },
                    cancel: function () {
                        layer.closeAll();
                    }
                })
            }
        }
    });
    window.onresize = function () {
        $("#rightContent").css("width", "100%");
    }
</script>
<style>
    #rightContent {
        width: 100%;
        border: none;
        height: calc(100% - 6px);
    }

    .left_menu {
        width: 200px;
    }
</style>