xt-ems-front/src/components/main.vue

<template>
    <div class="main mainVueIndex">
        <header class="sl-header">
            <div
                v-if="showIframe"
                class="sl-header-ul"
            >
                <img
                    class="sl-header-li-logo"
                    src="../assets/img/login/xintai_log.png"
                    alt="能源管控系统"
                >
                <div class="sl-header-li-name">能源管控系统</div>
                <!-- <div class="hnstLogo">
                    <img
                        src="../assets/img/hnst_logo.png"
                        alt=""
                    >
                </div> -->
                <timeLED style="position: absolute; right: 250px; top: 15px;"></timeLED>
                <div class="oa-header-user">
                    <div class="oa-header-upt">
                        <a>
                            <template>
                                <img
                                    v-if="userInfo.photoType"
                                    class="oa-sign-tul-ui"
                                    :src="'data:image/'+ userInfo.photoType +';base64,' + userInfo.photo"
                                    alt="头像"
                                >
                                <img
                                    v-else
                                    class="oa-sign-tul-ui"
                                    src="../../static/img/photo-default.png"
                                    alt="头像"
                                >
                            </template>
                        </a>
                    </div>
                    <div class="oa-header-ucon">
                        <div class="oa-header-ulist">
                            <div class="oa-header-uin">
                                <template>
                                    <img
                                        v-if="userInfo.photoType"
                                        class="oa-sign-tul-ui"
                                        :src="'data:image/'+ userInfo.photoType +';base64,' + userInfo.photo"
                                        alt="头像"
                                        @click="photoModal=true"
                                    >
                                    <img
                                        v-else
                                        class="oa-sign-tul-ui"
                                        src="../../static/img/photo-default.png"
                                        alt="头像"
                                        @click="photoModal=true"
                                    >
                                </template>
                                <h3>{{ store.state.userInfo ? store.state.userInfo.userName : '' }}</h3>
                            </div>
                            <ul class="oa-header-uul">
                                <li @click="showPersonInfo()">
                                    <span class="st-icons st-icons-user"></span>个人信息
                                </li>
                                <li @click="pwdModal.show = true">
                                    <span class="st-icons st-icons-pwd"></span>修改密码
                                </li>
                                <li @click="signOut">
                                    <span class="st-icons st-icons-out"></span>退出登录
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="sl-header-li-lgbc">
                    <span class="xs-icons xs-icons-right-arrow am-xz"></span>
                    <span class="sl-breadcrumb-text">当前位置：</span>
                    <el-breadcrumb
                        separator-class="el-icon-arrow-right"
                        class="sl-breadcrumb-list"
                    >
                        <el-breadcrumb-item
                            v-for="item in pageBreadcrumb"
                            :key="'bdb' + item.menuId"
                        >{{item.menuLabel}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </div>
            <!--<div class="sl-breadcrumb">
            <span class="sl-breadcrumb-text">当前位置：</span>
        </div>-->
        </header>
        <div
            class="menu-filter"
            v-if="showIframe"
        >
            <div style="padding: 4px;">
                <el-input clearable
                    size="mini"
                    style="width: 100%;"
                    placeholder="输入关键字进行过滤"
                    v-model="menuDataFilter.val"
                    :disabled="menuType === '1'"
                ></el-input>
            </div>
        </div>
        <div
            v-show="showIframe"
            class="sl-menu-main overFlowSet"
            :class="{'sl-menu-main2': menuType === '2'}"
            @scroll="getMenuScrollTop"
        >
            <div
                style="text-align: center; padding-top: 10px; padding-bottom: 5px;position: absolute;z-index: 999;right: 0px;"
                :style="{ top: 'calc(39% + ' + menuScrollTop + 'px )' }"
            >
                <span
                    class="el-icon-d-arrow-right sl-menu-ops"
                    style="cursor: pointer;"
                    @click="changeMenuType"
                ></span>
            </div>
            <div
                id="menuDrag"
                v-if="menuType === '2'"
                class="menuDrag"
                :style="{ top: menuScrollTop + 'px' }"
            >
            </div>
            <el-menu
                ref="menuDom"
                default-active="0"
                :collapse="menuType === '1'"
                class="el-menu-vertical-demo sl-menu ytg-menu-level1"
                v-if="menuDataFilter.show"
            >
                <template
                    v-for="(item, index) in menuData"
                >
                    <el-submenu
                        :index="index + ''"
                        :key="item.id"
                        v-if="item.menuType && Number(item.status)"
                        v-show="!item.menu_filter_noShow"
                    >
                        <template slot="title">
                            <i
                                class="sl-menu-lic xs-menu-icons"
                                :class="item.menuIcon ? item.menuIcon : 'xs-icons-menu' + (index + 1)"
                            ></i>
                            <div class="sl-menu-lit marignL38">{{item.name}}</div>
                        </template>
                        <template v-for="(sitem, sindex) in item.children">
                            <el-submenu
                                :index="index + '-' + sindex"
                                class="ytg-menu-level2"
                                v-if="sitem.children && sitem.children.length > 0 && allNoMenu(sitem.children) && Number(sitem.status)"
                                v-show="!sitem.menu_filter_noShow"
                                :key="sitem.id"
                                @click.native="selectMenu(sitem,
                                    [{menuId: 1, menuLabel: item.name},
                                    {menuId: 2, menuLabel: sitem.name}])"
                            >
                                <template slot="title">
                                    <span>{{sitem.name}}</span>
                                </template>
                                <template v-for="(ssitem, ssindex) in sitem.children">
                                    <el-submenu
                                        :index="index + '-' + sindex + '-' + ssindex"
                                        class="ytg-menu-level3"
                                        v-if="ssitem.children && ssitem.children.length > 0 && allNoMenu(ssitem.children) && Number(ssitem.status)"
                                        v-show="!ssitem.menu_filter_noShow"
                                        :key="ssitem.id"
                                        @click.native="selectMenu(sitem,
                                            [{menuId: 1, menuLabel: item.name},
                                            {menuId: 2, menuLabel: sitem.name},
                                            {menuId: 3, menuLabel: ssitem.name}])"
                                    >
                                        <template slot="title">
                                            <span>{{ssitem.name}}</span>
                                        </template>
                                        <template v-for="(sssitem, sssindex) in ssitem.children">
                                            <!-- 新增加五级菜单 2021/7/17 from shadow bengin -->
                                            <el-submenu
                                            :index="index + '-' + sindex + '-' + ssindex + '-' + sssindex"
                                            class="ytg-menu-level4"
                                            v-if="sssitem.children && sssitem.children.length > 0 && allNoMenu(sssitem.children) && Number(sssitem.status)"
                                            v-show="!sssitem.menu_filter_noShow"
                                            :key="sssitem.id"
                                            >
                                                <template slot="title">
                                                <span>{{sssitem.name}}</span>
                                                </template>
                                                <template v-for="(ssssitem, ssssindex) in sssitem.children">
                                                <el-menu-item
                                                    @click.native="selectMenu(ssssitem,
                                                [{menuId: 1, menuLabel: item.name},
                                                {menuId: 2, menuLabel: sitem.name},
                                                {menuId: 3, menuLabel: ssitem.name},
                                                {menuId: 4, menuLabel: sssitem.name},
                                                {menuId: 5, menuLabel: ssssitem.name}])"
                                                    v-if="(ssssitem.menuType ==='1' || ssssitem.menuType ==='4') && Number(ssssitem.status)"
                                                    v-show="!ssssitem.menu_filter_noShow"
                                                    :index="index + '-' + sindex + '-' + ssindex + '-' + sssindex + '-' + ssssindex"
                                                    :key="ssssitem.id"
                                                >{{ssssitem.name}}</el-menu-item>
                                                <!-- 分割线 -->
                                                <el-menu-item
                                                    class="nav_menu"
                                                    v-if="ssssitem.menuType ==='3' && Number(ssssitem.status)"
                                                    v-show="!ssssitem.menu_filter_noShow"
                                                    :index="index + '-' + sindex + '-' + ssindex + '-' + sssindex + '-' + ssssindex"
                                                    :key="ssssitem.id"
                                                >
                                                    <template>
                                                        <div></div>
                                                    </template>
                                                </el-menu-item>
                                                </template>
                                            </el-submenu>
                                            <!-- 新增加五级菜单 2021/7/17 from shadow end -->
                                            <!-- 分割线2021/7/17 from shadow begin 重写四级菜单 -->
                                            <el-menu-item
                                                class="nav_menu"
                                                :index="index + '-' + sindex + '-' + ssindex + '-' + sssindex"
                                                v-if="(!sssitem.children || sssitem.children.length === 0 || !allNoMenu(sssitem.children)) && sssitem.menuType ==='3' && Number(sssitem.status)"
                                                v-show="!sssitem.menu_filter_noShow"
                                                :key="sssitem.id"
                                            >
                                                <template>
                                                    <div></div>
                                                </template>
                                            </el-menu-item>
                                            <!-- 分割线 END -->
                                            <el-menu-item
                                                @click.native="selectMenu(sssitem,
                                                [{menuId: 1, menuLabel: item.name},
                                                    {menuId: 2, menuLabel: sitem.name},
                                                    {menuId: 3, menuLabel: ssitem.name},
                                                    {menuId: 4, menuLabel: sssitem.name}])"
                                                :index="index + '-' + sindex + '-' + ssindex + '-' + sssindex"
                                                v-if="(!sssitem.children || sssitem.children.length === 0 || !allNoMenu(sssitem.children)) && (sssitem.menuType ==='1' || sssitem.menuType ==='4') && Number(sssitem.status)"
                                                v-show="!sssitem.menu_filter_noShow"
                                                :key="sssitem.id"
                                            >{{sssitem.name}}</el-menu-item>
                                            <!-- <el-menu-item
                                                @click.native="selectMenu(sssitem,
                                            [{menuId: 1, menuLabel: item.name},
                                            {menuId: 2, menuLabel: sitem.name},
                                            {menuId: 3, menuLabel: ssitem.name},
                                            {menuId: 4, menuLabel: sssitem.name}])"
                                                v-if="(sssitem.menuType ==='1' || sssitem.menuType ==='4') && Number(sssitem.status)"
                                                v-show="!sssitem.menu_filter_noShow"
                                                :index="index + '-' + sindex + '-' + ssindex + '-' + sssindex"
                                                :key="sssitem.id"
                                            >{{sssitem.name}}</el-menu-item>-->
                                            <!-- 分割线 -->
                                            <!--<el-menu-item
                                                class="nav_menu"
                                                v-if="sssitem.menuType ==='3' && Number(sssitem.status)"
                                                v-show="!sssitem.menu_filter_noShow"
                                                :index="index + '-' + sindex + '-' + ssindex + '-' + sssindex"
                                                :key="sssitem.id"
                                            >
                                                <template>
                                                    <div></div>
                                                </template>
                                            </el-menu-item> -->
                                            <!-- 分割线2021/7/17 from shadow end-->
                                            <!-- 停用菜单 -->
                                            <!-- <el-menu-item
                                                v-if="Number(sssitem.status) === 0"
                                                v-show="sssitem.menu_filter_noShow"
                                                :index="index + '-' + sindex + '-' + ssindex + '-' + sssindex"
                                                :key="sssitem.id"
                                            >{{sssitem.name}}</el-menu-item> -->
                                        </template>
                                    </el-submenu>
                                    <!-- 停用菜单 -->
                                    <!-- <el-menu-item
                                        :index="index + '-' + sindex + '-' + ssindex"
                                        class="ytg-menu-level3 closeMenu"
                                        v-if="Number(ssitem.status) === 0"
                                        v-show="!ssitem.menu_filter_noShow"
                                        :key="ssitem.id"
                                    >
                                        {{ssitem.name}}
                                    </el-menu-item> -->
                                    <!-- 分割线 -->
                                    <!-- 2021/7/17 from shadow 注释三级菜单 bengin -->
                                    <!--<el-menu-item
                                        class="nav_menu"
                                        :index="index + '-' + sindex + '-' + ssindex"
                                        v-if="(!ssitem.children || ssitem.children.length === 0 || !allNoMenu(ssitem.children)) && ssitem.menuType ==='3' && Number(ssitem.status)"
                                        v-show="!ssitem.menu_filter_noShow"
                                        :key="ssitem.id"
                                    >
                                        <template>
                                            <div></div>
                                        </template>
                                    </el-menu-item>-->
                                    <!-- 2021/7/17 from shadow 注释三级菜单 end -->
                                    <!-- 分割线 END -->
                                    <el-menu-item
                                        @click.native="selectMenu(ssitem,
                                        [{menuId: 1, menuLabel: item.name},
                                            {menuId: 2, menuLabel: sitem.name},
                                            {menuId: 3, menuLabel: ssitem.name}])"
                                        :index="index + '-' + sindex + '-' + ssindex"
                                        v-if="(!ssitem.children || ssitem.children.length === 0 || !allNoMenu(ssitem.children)) && (ssitem.menuType ==='1' || ssitem.menuType ==='4') && Number(ssitem.status)"
                                        v-show="!ssitem.menu_filter_noShow"
                                        :key="ssitem.id"
                                    >{{ssitem.name}}</el-menu-item>
                                </template>
                            </el-submenu>
                            <!-- 停用菜单 -->
                            <!-- <el-menu-item
                                :index="index + '-' + sindex"
                                class="ytg-menu-level2 closeMenu"
                                v-if="Number(sitem.status) === 0"
                                v-show="!sitem.menu_filter_noShow"
                                :key="sitem.id"
                            >
                                {{sitem.name}}
                            </el-menu-item> -->
                            <el-menu-item
                                @click.native="selectMenu(sitem,
                                [{menuId: 1, menuLabel: item.name},
                                            {menuId: 2, menuLabel: sitem.name}])"
                                :index="index + '-' + sindex"
                                v-if="(!sitem.children || sitem.children.length === 0 || !allNoMenu(sitem.children)) && (sitem.menuType ==='1' || sitem.menuType ==='4') && Number(sitem.status)"
                                v-show="!sitem.menu_filter_noShow"
                                :key="sitem.id"
                            >{{sitem.name}}</el-menu-item>
                        </template>
                    </el-submenu>
                </template>
            </el-menu>
        </div>
        <section
            :class="{'sl-container': showIframe, 'sl-container2': showIframe && menuType === '2' }"
            id="mainContainer"
            style="height:100%;width:100%"
        >
            <div class="sl-content-main">
                <template v-if="showIframe">
                    <default-vue
                        :menuData="menuData"
                        @gotoSetPage="gotoSetPage"
                        v-if="tabsData.length === 0"
                    ></default-vue>
                    <el-tabs
                        id="menuTabId"
                        v-show="tabsData.length > 0"
                        v-model="selectedMenu"
                        type="card"
                        closable
                        @tab-remove="removeTab"
                        @tab-click="handleClick"
                        style="padding: 10px 0px 0px;height:100%"
                    >
                        <el-tab-pane
                            :label="item.name"
                            :name="item.menuId"
                            :key="item.menuId"
                            v-for="(item, index) in tabsData"
                        >
                            <span
                                @contextmenu="rightShow($event, index, item)"
                                slot="label"
                                style="display: inline-block;height: 100%;"
                            >
                                {{item.name}}
                            </span>
                            <div class="pageBreadcrumb">{{JSON.stringify(item.pageBreadcrumb)}}</div>
                            <iframe
                                :src="item.menuUrl"
                                :style="minHeight"
                            ></iframe>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="contextmenu">
                        <el-dropdown
                            trigger="click"
                            @visible-change="visibleChange"
                            @command="handleCommand"
                        >
                            <span
                                class="el-dropdown-link"
                                v-show=false
                            >
                                下拉菜单<i
                                    id="setClick"
                                    class="el-icon-arrow-down el-icon--right"
                                ></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="a">关闭标签页</el-dropdown-item>
                                <el-dropdown-item
                                    :disabled="tabsData.length === 1"
                                    command="b"
                                >关闭其他标签页</el-dropdown-item>
                                <el-dropdown-item
                                    :disabled="tabsData.length - menuTabIndex === 1"
                                    command="c"
                                >关闭右侧标签页</el-dropdown-item>
                                <el-dropdown-item command="d">刷新当前标签页</el-dropdown-item>
                                <el-dropdown-item
                                    command="e"
                                    divided
                                    v-show="PEButShow"
                                >下载表格数据</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </template>
                <!-- <iframe v-if="showIframe" id="frameArea" name="showPP" style="display:none;width: 100%; height: calc(100% - 70px);border: 0px;"></iframe> -->
                <transition
                    v-if="!showIframe"
                    enter-active-class="fade-in"
                    leave-active-class="leave-immediately"
                    :duration="{ enter: 400, leave: 100 }"
                >
                    <router-view></router-view>
                </transition>
            </div>
        </section>
        <!--  -->
        <div
            is='usersAddAndEdit'
            v-if="userModal.show"
            :operate="'edit'"
            :operate1="'index'"
            :item="userInfo"
            @on-then="userModalThen"
            @on-close="userModalClose"
            @editFinish="updataUserInfo"
        ></div>
        <!--  -->
        <!-- 修改密码 -->
        <el-dialog
            ref="pwdModal"
            :visible.sync="pwdModal.show"
            class="oa-pwd-modal"
            title="修改密码"
            width="500px"
            @open="openPwd"
        >
            <el-form
                ref="pwdModal"
                :model="pwdModal.form"
                :rules="pwdModal.ruleValidate"
                label-width="120px"
                style="padding-right: 40px;"
            >
                <el-form-item
                    label="原密码"
                    prop="userid"
                    v-show="false"
                >
                    <el-input
                        size="small"
                        type="text"
                        v-model="pwdModal.form.userid"
                        :maxlength="64"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="原密码"
                    prop="prepassword"
                >
                    <el-input
                        size="small"
                        type="password"
                        v-model="pwdModal.form.prepassword"
                        :maxlength="64"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="新密码"
                    prop="newpassword"
                >
                    <el-input
                        size="small"
                        type="password"
                        v-model="pwdModal.form.newpassword"
                        :maxlength="64"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="确认密码"
                    prop="againNewpassword"
                >
                    <el-input
                        size="small"
                        type="password"
                        v-model="pwdModal.form.againNewpassword"
                        :maxlength="64"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="small"
                    @click="pwdModal.show = false"
                >取 消</el-button>
                <el-button
                    size="small"
                    :loading="pwdModal.loading"
                    type="primary"
                    @click="pwdSubmit('pwdModal')"
                >确 定</el-button>
            </div>
        </el-dialog>
        <!-- /修改密码 -->
        
        <el-dialog
            title="请选择需要导出的表格"
            :visible.sync="downloadExcelDialog.show"
            width="390px"
        >
            <div>
                <el-row :gutter="20">
                    <el-col
                        :span="12"
                        v-for="item of downloadExcelDialog.data"
                        :key="item.id"
                    >
                        <el-button
                            size="mini"
                            type="primary"
                            style="width: 100%;margin-bottom: 10px;"
                            @click="downloadExcelDialogFoo({id: item.id, name: item.name})"
                        >{{ item.name }}</el-button>        
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    @click="downloadExcelDialog.show = false"
                >取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import usersAddAndEdit from '@/views/systemConfig/components/usersAddAndEdit.vue';
import { setCookie, getCookie, formatDate } from '@/utils/util.js'
import { checkCharLength } from '@/utils/validator.js';
import store from '@/store/index.js';
import timeLED from '@/components/zg/timeLED.vue'
//  字典数据
import dataDictionary from '@/store/dataDictionary.js';
import defaultVue from './default.vue'
import { proPath } from '@/config/config.js';
import { PEhandleDownloadExcelForElTable } from '@/utils/personalExtension.js';
export default {
    components: {
        usersAddAndEdit, defaultVue, timeLED
    },
    data () {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else {
                let reg = /^[A-Za-z0-9]+$/
                if (!reg.test(value)) {
                    return callback(new Error('请输入英文和数字'));
                }
                if (this.pwdModal.form.againNewpassword !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.pwdModal.validateField('againNewpassword');
                }
                callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入新密码'));
            } else if (value !== this.pwdModal.form.newpassword) {
                callback(new Error('两次输入密码不一致'));
            } else {
                callback();
            }
        };
        return {
            websocket: '',
            interval: '',
            userInfo: {}, // 用户信息
            qrRole: [], //角色信息
            roleList: {
                obj: {},
                arr: []
            }, // 角色信息
            userRoles: [],
            leaveFlag: true,
            PEButShow: false,
            PEhandleDownloadExcelForElTable,
            minHeight: 'width: 100%;height: calc(100% - 10px);border: 0px;min-height: 777px',
            menuTabIndex: 0,
            pageBreadcrumb: [{ menuId: 1, menuLabel: '首页' }],
            widthLog: '',
            leftLog: '',
            dragFlag: false,
            store,
            dataDictionary,
            showIframe: false,
            selectedMenu: '',
            menuType: '2',
            menuData: store.state.routes,
            menuDataFilter: {
                show: true,
                val: '',
                timId: null
            },
            tabsData: [],
            // pwdForm: {
            //   oldPwd: '',
            //   newPwd: '',
            //   newPwdCheck: ''
            // },
            //  modal
            userInfo: {},
            userModal: {
                show: false
            },
            //  修改密码
            pwdModal: {
                loading: false,
                show: false,
                form: {
                    userid: '',
                    prepassword: '',
                    newpassword: '',
                    //  重复密码
                    againNewpassword: ''
                },
                ruleValidate: {
                    prepassword: [
                        { required: true, message: '原密码不能为空', trigger: 'blur' }
                    ],
                    newpassword: [
                        { required: true, message: '新密码不能为空', trigger: 'blur' },
                        { type: 'string', max: 64, message: '密码不能多于64个字符', trigger: 'blur' },
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    againNewpassword: [
                        { required: true, message: '确认密码不能为空', trigger: 'blur' },
                        { type: 'string', max: 64, message: '密码不能多于64个字符', trigger: 'blur' },
                        { validator: validatePassCheck, trigger: 'blur' }
                    ]
                }
            },
            menuScrollTop: 0,
            downloadExcelDialog: {
                show: false,
                data: [
                    // {
                    //     id: '',
                    //     name: ''
                    // }
                ],
                iframeWindow: null
            }
        }
    },
    computed: {
    },
    created(){
    	//绑定事件
    	window.addEventListener('beforeunload', e => this.websocket.close())
    },
    beforeDestroy() { 
    	//卸载事件
     	window.removeEventListener('beforeunload', e => this.websocket.close())
    },
    beforeCreate () {
        // 前期无后台测试用
        // /*
        let companyId = window.top.localStorage.getItem('companyId');
        store.dispatch('getOwnMenuUrl', { companyId: companyId }).then(res => {
            if (res.code === '0') {
                localStorage.setItem('ownPrivilege', JSON.stringify(res.data))
            }
        });
        // */
    },
    watch: {
        menuType: function (newV, oldV) {
            let that = this;
            if (newV === '2') {
                that.$nextTick(function () {
                    $('.sl-menu-main2').css({
                        'width': that.widthLog
                    });
                    $('.sl-container2').css({
                        'padding-left': that.leftLog
                    });
                    $('.menu-filter').css({
                        'width': that.widthLog
                    });
                    that.setDrag();
                })
            } else {
                that.widthLog = $('.sl-menu-main2').css('width');
                that.leftLog = $('.sl-container2').css('padding-left');
                $('.sl-menu-main2').css({
                    'width': ''
                });
                $('.sl-container2').css({
                    'padding-left': ''
                });
                $('.menu-filter').css({
                    'width': '80px'
                });
                that.menuDataFilter.val = '';
            }
        },
        'menuDataFilter.val': function (newV, oldV) {
            let reg = new RegExp(newV);
            let index = [];
            clearTimeout(this.menuDataFilter.timId);
            this.menuDataFilter.timId = setTimeout(() => {
                for (let i = 0; i< this.menuData.length; i++) {
                    filterFoo (this.menuData[i], newV, i);
                }
                this.menuDataFilter.show = false;
                setTimeout(() => {
                    this.menuDataFilter.show = true;
                    this.$nextTick(() => {
                        if (newV !== '') {
                            for (let item of index) {
                                this.$refs.menuDom.open(item);
                            }
                        }
                    });
                }, 50);
            }, 400);
            function filterFoo (fItem, val, iIndex) {
                let show = false;
                if (fItem.children && fItem.children.length > 0) {
                    for (let i = 0; i< fItem.children.length; i++) {
                        let zShow = filterFoo(fItem.children[i], val, iIndex + '-' + i);
                        if (zShow && !show) {
                            index.push(iIndex)
                        }
                        show = zShow || show;
                    }    
                }
                if (val === '') {
                    show = true;
                } else {
                    show = reg.test(fItem.name) || show;
                }
                fItem.menu_filter_noShow = !show;
                return show;
            }
        }
    },
    destroyed() {
        if (this.showIframe) {
            window.top.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
            window.top.removeEventListener('unload', e => this.unloadHandler(e))
            window.top.removeEventListener('onunload', e => this.onunloadHandler(e))
        }
        this.websocket.close();
    },
    mounted () {
        //  取字典
        this.dataDictionary.dispatch('list').then(() => {
            // console.log(this.dataDictionary.state.dict)
        });
        this.showIframeEvent();
        this.$nextTick(() => {
            this.minHeight = 'width: 100%;height: calc(100% - 10px);border: 0px;min-height: ' + ($('#menuTabId').height() - 113) + 'px'
            this.leaveFlag = false;
        });
        this.getRoles();
    },
    methods: {
        logoutAwait: async function(){
            var that = this;
            await that.axios.get(proPath + 'logout').then((res) => {
                setCookie('accessToken', '', -1, '/');
                setCookie('refreshToken', '', -1, '/');
                setCookie('workDate', '', -1);
            })
        },
        beforeunloadHandler (){
            this.leaveFlag = true;
        },
        unloadHandler(e){
            if (this.leaveFlag) {
                this.logoutAwait()
            }
        },
        onunloadHandler(e) {
            // TODO
        },
        visibleChange (f) {
            let that = this;
            if (!f) {
                $('.contextmenu').css({
                    'display': 'none'
                });
            }
        },

        handleCommand (command) {
            let that = this;
            switch (command) {
                case 'a'://关闭当前标签
                    $('#menuTabId .el-icon-close').eq(that.menuTabIndex).click();
                    break;
                case 'b'://关闭其他标签
                    var removeTarget = [];
                    var len = that.tabsData.length - that.menuTabIndex - 1;
                    for (let i = 0; i < len; i++) {
                        removeTarget.push($('#menuTabId .el-icon-close').eq(that.menuTabIndex + i + 1));
                    }
                    for (let i = 0; i < that.menuTabIndex; i++) {
                        removeTarget.push($('#menuTabId .el-icon-close').eq(i));
                    }
                    for (let i = 0; i < removeTarget.length; i++) {
                        $(removeTarget[i]).click();
                    }
                    break;
                case 'c'://关闭右侧标签
                    var removeTarget = [];
                    var len = that.tabsData.length - that.menuTabIndex - 1;
                    for (let i = 0; i < len; i++) {
                        removeTarget.push($('#menuTabId .el-icon-close').eq(that.menuTabIndex + i + 1));
                    }
                    for (let i = 0; i < removeTarget.length; i++) {
                        $(removeTarget[i]).click();
                    }
                    break;
                case 'd'://刷新标签
                    $('#menuTabId .el-tabs__item').eq(that.menuTabIndex).click();
                    $('#menuTabId iframe').eq(that.menuTabIndex)[0].contentWindow.location.reload(true);
                    break;
                case 'e'://下载表格数据
                    let iframeWindow = $('#menuTabId iframe').eq(that.menuTabIndex)[0].contentWindow;
                    let PEDataObj = iframeWindow.PEDataObj || {};
                    if (PEDataObj.tableArr && PEDataObj.tableArr.length > 0) {
                        if (PEDataObj.tableArr.length === 1) {
                            $('#menuTabId .el-tabs__item').eq(that.menuTabIndex).click();
                            PEhandleDownloadExcelForElTable(
                                PEDataObj.tableArr[0].id,
                                (that.pageBreadcrumb[that.pageBreadcrumb.length - 1].menuLabel) + (PEDataObj.tableArr[0].name ? ( '(' + PEDataObj.tableArr[0].name + ')' ) : '') + '_' + formatDate(new Date(), 'yyyy-MM-dd'),
                                {
                                    tableDocument: iframeWindow.document
                                }
                            );
                        } else {
                            let dataArr = [];
                            for (let i = 0; i < PEDataObj.tableArr.length; i++) {
                                dataArr.push(
                                    {
                                        id: PEDataObj.tableArr[i].id,
                                        name: PEDataObj.tableArr[i].name || ('表格' + (i + 1))
                                    }
                                )
                            }
                            that.downloadExcelDialog.data = dataArr;
                            that.downloadExcelDialog.iframeWindow = iframeWindow;
                            that.downloadExcelDialog.show = true;
                        }
                    } else {
                        that.$message({
                            message: '当前窗口没有允许导出数据的表格！',
                            type: 'warning'
                        });
                    }
                    break;
            }
        },
        downloadExcelDialogFoo ({id, name}) {
            let that = this;
            PEhandleDownloadExcelForElTable(
                id,
                (that.pageBreadcrumb[that.pageBreadcrumb.length - 1].menuLabel) + (name ? ( '(' + name + ')' ) : '') + '_' + formatDate(new Date(), 'yyyy-MM-dd'),
                {
                    tableDocument: that.downloadExcelDialog.iframeWindow.document
                }
            );
        },
        // 右键菜单
        rightShow ($event, index, item) {
            let that = this;
            that.menuTabIndex = index;
            $('.contextmenu').css({
                'left': ($event.pageX + 120) + 'px',
                'top': $event.pageY + 'px',
                'display': 'block'
            })
            $('#setClick').click();
            $event.preventDefault();
            // 控制下载表格数据按钮是否显示
            let iframeWindow = $('#menuTabId iframe').eq(that.menuTabIndex)[0].contentWindow;
            let PEDataObj = iframeWindow.PEDataObj || {};
            if (PEDataObj.tableArr && PEDataObj.tableArr.length > 0) {
                that.PEButShow = true;
            } else {
                that.PEButShow = false;
            }
        },

        gotoSetPage (item) {
            let that = this;
            let menuData = item.preTarget;
            that.tabsData.push(menuData);
            that.selectedMenu = menuData.menuId;
            that.pageBreadcrumb = item.pageBreadcrumb;
            that.axios.post(proPath + 'v1/sysmenus/accessOwnAdd',
                {
                    userId: that.$store.state.userInfo.userId,
                    menuId: menuData.menuId
                }
            ).then(function (response) {
            }).catch(function () {
            });
        },
        //  判断是否在iframe下
        showIframeEvent () {
            var that = this;
            var thisDocument = document;
            if (thisDocument.domain.indexOf('hnshituo.com') > -1) {
                thisDocument.domain = 'hnshituo.com';
            }
            try {
                var topDocument = window.top.document;
            }
            catch (err) {

                thisDocument.getElementsByClassName('sl-menu-main')[0].style.display = 'none';
                thisDocument.getElementsByClassName('sl-header')[0].style.display = 'none';
                thisDocument.getElementById('mainContainer').style.padding = '0px';
                return;
            }
            var routerCover = this.$router.history.current.query;
            var routerParams = this.$router.history.current.params;
            var routerFlag = 0;
            var routerFlagP = 0;
            for (var i in routerCover) {
                routerFlag = routerFlag + 1
            }
            for (var j in routerParams) {
                routerFlagP = routerFlagP + 1
            }

            that.showIframe = thisDocument === topDocument && routerFlag === 0 && routerFlagP === 0;
            if (that.showIframe) {
                that.getUserInfo();
                thisDocument.getElementById('mainContainer').style['padding-left'] = '179px';
                window.top.addEventListener('beforeunload', e => that.beforeunloadHandler(e))
                window.top.addEventListener('unload', e => that.unloadHandler(e))
                window.top.addEventListener('onunload', e => that.onunloadHandler(e))
                // websocket初始化
                let token = getCookie('accessToken');
                if (token) {
                   this.initWebSocket();
                }
            }

            if (routerFlag > 0 || routerFlagP > 0) {
                that.menuType = '1';
            }
            var setShowIframe = setInterval(function () {
                for (let i = 0; i < window.top.document.getElementsByTagName('iframe').length; i++) {
                    if (window.top.document.getElementsByTagName('iframe')[i].contentDocument !== null && window.top.document.getElementsByTagName('iframe')[i].contentDocument.getElementsByClassName('sl-menu-main').length > 0) {
                        $(window.top.document.getElementsByTagName('iframe')[i].parentNode.parentNode).css({ 'height': 'calc(100% - 35px)' });
                        $(window.top.document.getElementsByTagName('iframe')[i].parentNode).css({ 'height': '100%' });
                        window.top.document.getElementsByTagName('iframe')[i].contentDocument.getElementsByClassName('sl-menu-main')[0].style.display = 'none';
                        window.top.document.getElementsByTagName('iframe')[i].contentDocument.getElementsByClassName('sl-header')[0].style.display = 'none';
                        window.top.document.getElementsByTagName('iframe')[i].contentDocument.getElementsByClassName('sl-content-main')[0].style.height = '100%';
                        window.top.document.getElementsByTagName('iframe')[i].contentDocument.getElementById('mainContainer').style.padding = '0px';
                        if (i === window.top.document.getElementsByTagName('iframe').length - 1) {
                            clearInterval(setShowIframe);
                        }
                    }
                }
            }, 20);
            that.setDrag();
        },
        setDrag () {
            let that = this;
            $('#menuDrag').unbind();
            $('#menuDrag').mousedown(function (event) {
                that.dragFlag = true;
                $(event.target).data('dragStart', event.pageX)
                $(event.target).data('dragWidth', $('.sl-menu-main2').outerWidth());
                $('body').css({
                    'cursor': 'col-resize'
                });
                let _html = '<div id="dragsc" style="height: 100%;width: 100%;position: absolute;top: 0;z-index: 888;"></div>';
                $('body').append(_html);
                $('body').mousemove(function (e) {
                    if (!that.dragFlag) {
                        $(this).css({
                            'cursor': ''
                        });
                        $('#dragsc').remove();
                        $(this).unbind(e);
                    } else {
                        var startX = $('#menuDrag').data('dragStart');
                        var endX = e.pageX;
                        var change = endX - startX;
                        var containerWidth = $('#menuDrag').data('dragWidth');
                        // console.log('containerWidth + change = ' + (containerWidth + change))
                        if (containerWidth + change < 180) {
                            $('.sl-menu-main2').css({
                                'width': '180px'
                            });
                            $('.menu-filter').css({
                                'width': ''
                            });
                            $('.sl-container2').css({
                                'padding-left': '179px'
                            });
                        } else if (containerWidth + change <= 1200) {
                            $('.sl-menu-main2').css({
                                'width': containerWidth + change + 'px'
                            });
                            $('.sl-container2').css({
                                'padding-left': containerWidth + change - 1 + 'px'
                            });
                            $('.menu-filter').css({
                                'width': containerWidth + change + 'px'
                            });
                        }
                    }
                });
                $('body').mouseup(function (ev) {
                    that.dragFlag = false;
                    $(this).unbind(ev);
                });
            });
        },
        getMenuScrollTop (event) {
            this.menuScrollTop = $(event.target).scrollTop();
        },
        //  tabs选项选择
        handleClick (tab, event) {
            let that = this;
            let pageBreadcrumb = $($('.pageBreadcrumb')[parseInt(tab.index)]).html();
            that.pageBreadcrumb = JSON.parse(pageBreadcrumb);
            window.localStorage.setItem('activeMenu', tab.name)
        },
        removeTab (targetName) {
            var that = this;
            var spliceIndex = null;
            var temp = [];
            for (var i = 0; i < that.tabsData.length; i++) {
                temp.push(that.tabsData[i]);
                if (targetName === that.tabsData[i].menuId) {
                    spliceIndex = i;
                }
            }
            if (spliceIndex !== null) {
                temp.splice(spliceIndex, 1);
            }
            if (that.selectedMenu === that.tabsData[spliceIndex].menuId) {
                if (temp.length !== 0) {
                    var showIndex = spliceIndex;
                    if (showIndex > (temp.length - 1)) {
                        showIndex = temp.length - 1;
                    }
                    that.selectedMenu = temp[showIndex].menuId;
                    window.localStorage.setItem('activeMenu', that.selectedMenu);
                    that.pageBreadcrumb = temp[showIndex].pageBreadcrumb;
                } else {
                    that.pageBreadcrumb = [{ menuId: 1, menuLabel: '首页' }];
                }
            }
            that.tabsData = temp;
        },
        //  菜单选择
        selectMenu (menuData, pageBreadcrumb) {
            var that = this;
            if (menuData.menuUrl !== null && menuData.menuUrl !== '' && typeof (menuData.menuUrl) !== 'undefined') {
                window.localStorage.setItem('activeMenu', menuData.menuId)
                var temp = [];
                menuData.pageBreadcrumb = pageBreadcrumb;
                var setTabsFlag = true;
                for (var i = 0; i < that.tabsData.length; i++) {
                    if (menuData.menuId === that.tabsData[i].menuId) {
                        setTabsFlag = false;
                        break;
                    }
                }
                if (setTabsFlag) {
                    for (var j = 0; j < that.tabsData.length; j++) {
                        temp.push(that.tabsData[j]);
                    }
                    temp.push(menuData);
                    that.tabsData.push(menuData);
                }
                that.selectedMenu = menuData.menuId;
                that.pageBreadcrumb = pageBreadcrumb;
                // 前期无后台测试用
                // /*
                that.axios.post(proPath + 'v1/sysmenus/accessOwnAdd',
                    {
                        userId: that.$store.state.userInfo.userId,
                        menuId: menuData.menuId
                    }
                ).then(function (response) {
                }).catch(function () {
                });
                // */
            }
            //   console.log('目录', that.selectedMenu, that.tabsData)
        },
        //  是否合部都不是菜单就不用显示
        allNoMenu (items) {
            let bol = false;
            for (let item of items) {
                if (item.menuType === '1' || item.menuType === '4') {
                    //  有菜单
                    bol = true;
                    break;
                }
            }
            return bol;
        },
        //
        signOut () {
            let _this = this;
            _this.$msgbox({
                title: '退出提示',
                message: '确定退出登录吗？',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        // 前期无后台测试用
                        // setCookie('accessToken', '', -1, '/');
                        // setCookie('refreshToken', '', -1, '/');
                        // setCookie('workDate', '', -1);
                        // done();
                        // window.location.href = './index.html';
                        // /*
                        // ajax
                        if (getCookie('ticket')) {
                            let res = this.axios.get('pass/logout', {
                                params: {
                                    authorization: getCookie('accessToken')
                                }
                                });
                                res.then(function (res) {
                                    console.log(111)
                                    instance.confirmButtonText = "确定";
                                    instance.confirmButtonLoading = false;
                                    done();
                                    window.location.href = "./index.html";
                                    })
                            }
                            else {
                            this.store.dispatch('loginOut').then(function (res) {
                                instance.confirmButtonText = '确定';
                                instance.confirmButtonLoading = false;
                                done();
                                window.location.href = './index.html';
                            }).catch(function () {
                                instance.confirmButtonText = '确定';
                                instance.confirmButtonLoading = false;
                                done();
                            });                                
                            }
                        // */
                    } else {
                        done();
                    }
                }
            }).then(action => {
            });
        },
        //  查看个人信息
        showPersonInfo () {
            //  打开查看
            this.userModal.show = true;
            let userId = this.$store.state.userInfo.userId;

        },
        getUserInfo () {
            let that = this;
            if (that.$store.state.userInfo) {
                that.axios.get(proPath + 'v1/sysusers/' + that.$store.state.userInfo.userId).then(function (response) {
                    if (response) {
                        that.userInfo = response.data;
                    }
                });
            }
        },
        //  隐藏侧边栏
        changeMenuType () {
            if (this.menuType === '2') {
                this.menuType = '1';
            } else {
                this.menuType = '2';
            }
        },
        //  菜单选中
        thisMenu (item) {
            for (let b of this.pageBreadcrumb) {
                if (b.menuId === item.menuId) {
                    return true;
                }
            }
            return false;
        },
        //  弹窗完成
        userModalThen (str, item) {
            //   console.log('代码执行了')
            switch (str) {
                case 'close':
                    this.userModal.show = false;
                    break;
                case 'success':
                    this.userModal.show = false;
                    //  刷新
                    this.store.dispatch('getUserInfo');
                    break;
            }
        },
        //  修改密码
        pwdSubmit () {
            this.$refs['pwdModal'].validate((valid) => {
                if (valid) {
                    this.pwdModal.loading = true;
                    this.pwdModal.form.userid = this.store.state.userInfo.id;
                    this.store.dispatch('system/usersManage/updpsw', this.pwdModal.form).then((res) => {
                        this.pwdModal.loading = false;
                        if (res.code === '0') {
                            this.$message.success('设置成功');
                            this.pwdModal.show = false;
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                }
            });
        },
        //  打开修改密码弹窗
        openPwd () {
            this.$refs['pwdModal'].resetFields && this.$refs['pwdModal'].resetFields();
        },
        //  弹窗完成
        userModalThen (str, item) {
            let that = this;
            switch (str) {
                case 'close':
                    that.userModal.show = false;
                    break;
                case 'success':
                    that.userModal.show = false;
                    //  刷新
                    that.getUser(that.tableParams.form);
                    break;
            }
        },
        //  关闭弹窗
        userModalClose () {

        },
        // 修改完毕重新请求数据
        updataUserInfo (data) {
            this.getUserInfo();
            this.$store.commit('userInfo', data)
        },
        initWebSocket () {
          let that = this;
          // websocket初始化
          let token = getCookie('accessToken');
          // WebSocket
          if ('WebSocket' in window) {
            // this.websocket = new WebSocket('ws://localhost:8086/websocket/123?token=' + token,[token])
            // this.websocket = new WebSocket('ws:'+window.location.host+'/websocket/' + token);
            that.websocket = new WebSocket('ws:'+window.location.host+'/zhongsteel.pass.web/pass/ems/websocket/' + token);
                // 连接错误
                that.websocket.onerror = that.setErrorMessage
        
                // 连接成功
                that.websocket.onopen = that.setOnopenMessage
        
                // 收到消息的回调
                that.websocket.onmessage = that.setOnmessageMessage
        
                // 连接关闭的回调
                that.websocket.onclose = that.setOncloseMessage
        
                // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                window.onbeforeunload = that.onbeforeunload
                //每隔30秒钟发送一次心跳，避免websocket连接因超时而自动断开
                  that.interval = window.setTimeout(function(){ // bug：每次都会触发init，用setInterval导致定时器不断叠加
                      console.log('websoket 轮询');
                      if(that.websocket !== null){
                          if (that.websocket.readyState !== that.websocket.OPEN) {
                              if (token) {
                                  console.log('websocket again')
                                  that.initWebSocket()
                              }
                          }
                      }
                  },30000);
                } else {
                  alert('当前浏览器 Not support websocket');
                }
              },
              setErrorMessage () {
                console.log('WebSocket连接发生错误   状态码：' + this.websocket.readyState)
              },
              setOnopenMessage () {
                console.log('WebSocket连接成功    状态码：' + this.websocket.readyState)
              },
              setOnmessageMessage (event) {
                // 根据服务器推送的消息做自己的业务处理
                let data = JSON.parse(event.data);
                let show = false;
                if(this.qrRole.length > 0){
                    for(let item of data.role) {
                      let roleId = this.roleList.obj[item].id;
                      if(this.qrRole.includes(roleId)) {
                        show = true;
                        break;
                      }
                    }
                } else{
                     show = true;
                }
                
                if(show) {
                this.$notify({
                          title: data.title,
                          message: data.message,
                          position: 'bottom-right',
                          duration: 0,
                          onClose() {
                            console.log('关闭啦', event);
                          }
                        });
                // let audio = new Audio()
                // audio.src = '/static/img/14430.wav';
                // // 开启自动播放
                //     // this.audio.autoplay = true;
                // audio.play();
                this.handleSpeak(data.tips);
                console.log('服务端返回：' + event.data);
                console.log( document.visibilityState );
                console.log( document.hidden);
                if (document.visibilityState != 'visible' || document.hidden) {
                  let myWindow = window.open('','','width=200,height=100,left=800,top=500');
                  // let myWindow = window.open(location.href,'_parent','');
                   myWindow.document.write('<p>'+data.message+'</p>');
                   myWindow.focus();
                }
                }
              },
              setOncloseMessage () {
                console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState);
                if(this.interval){
                    window.clearInterval(this.interval);
                    // console.log("清除定时器");
                }
              },
              onbeforeunload () {
                this.closeWebSocket()
              },
              closeWebSocket () {
                this.websocket.close()
              },
              // 语音播报的函数
               handleSpeak(text='你好啊!'){
                   if(window.speechSynthesis){
                       const synth = window.speechSynthesis;
                       const msg = new SpeechSynthesisUtterance();
                       msg.text = text;     // 文字内容
                       msg.lang = "zh-CN";  // 使用的语言:中文
                       msg.volume = 20;      // 声音音量：1
                       msg.rate = 1;        // 语速：1
                       msg.pitch = 1;       // 音高：1
                       msg.voice = this.getWindowVoice()  // 使用本地服务合成语音(若是获取不到 请异步获取, 加一个setTimeout)
                       synth.speak(msg);    // 播放
                   }
               },
              getWindowVoice(){  // 获取浏览器中语音 (中文 + 本地服务)
                 return window.speechSynthesis.getVoices().find(item => item.localService && item.lang === 'zh-CN')
              },
              getRoles () {
                  let that = this;
                  // 获取用户信息
                  this.store.dispatch('getUserInfo').then((res) => {
                      that.axios.get('pass/v1/sysuserroles/?userId=' + res.data.userId + '&pageNum=1&pageSize=100').then(rest => {
                        if (rest) {
                          for (let i = 0; i < rest.data.list.length; i++) {
                            that.qrRole.push(rest.data.list[i].roleId)
                          }
                          that.userRoles = rest.data.list; // 获取用户角色关联信息
                        }
                      })
                  });
                  // 获取角色信息
                  this.store.dispatch('system/rolesManage/list').then(res => {
                    if (res.code === '0') {
                      this.roleList.arr = res.data;
                      for (let obj of res.data) {
                          this.roleList.obj[obj.roleName] = {
                              name: obj.roleName,
                              id: obj.id
                          };
                      }
                      } else {
                    this.$message.error(res.message);
                  }
                  });
              }
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-menu--collapse {
    width: 100% !important;
}
.contextmenu {
    width: 150px;
    height: 150px;
    top: 0px;
    position: absolute;
    display: none;
}
.main {
    height: 100%;
}

.sl-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1002;
    width: 100%;
    /* min-width: 1150px; */
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
}

.sl-container {
    height: 100%;
    position: relative;
    padding-top: 60px;
    padding-left: 79px;
    /* transition: padding-left .3s ease-out; */
}

.sl-container2 {
    padding-left: 179px;
}

.sl-content-main {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.sl-menu-main {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 80px;
    height: calc(100% - 97px);
    margin-top: 97px;
    border-right: 1px solid #ccc;
    background-color: #fff;
    /* transition: width .25s ease-out;*/
}

.sl-menu-main2 {
    width: 180px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sl-content {
    transition: margin-left 0.2s linear;
}

.sl-header-ul {
    height: 60px;
    border-bottom: 1px solid #ccc;
    /* background-image: url(../assets/img/ytg_tab.png);
   */
    background-color: #409eff;
}

.sl-header-li-logo {
    float: left;
    margin-top: 13px;
    margin-left: 20px;
    width: 20%;
    height: 80%;
}
.sl-header-li-name {
    float: left;
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    color: #fff;
    font-size: 20px;
}

.sl-header-li-line {
    float: left;
    margin-top: 5px;
    height: 26px;
}

.sl-header-li-lgo {
    float: right;
    margin-top: 21px;
    width: 120px;
}

.sl-header-li-lgob {
    display: inline-block;
    padding-left: 25px;
    position: relative;
    color: white;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
}

.sl-header-li-lgob > .xs-icons {
    position: absolute;
    top: -8px;
    left: -18px;
}

.sl-menu-ops {
    font-size: 16px;
    color: #666;
    transition: transform 0.3s ease-out;
}

.sl-menu-main2 .sl-menu-ops {
    transform: rotate(180deg);
}

/* header menu style --> begin */
.sl-menu {
    border-right: solid 0px #e6e6e6;
}

.sl-menu-a {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-left: 54px;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    cursor: pointer;
    border-right: 2px solid #fff;
}

.sl-menu-tip-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sl-menu-a-noc {
    padding-right: 2px;
}

.sl-menu-lit {
    opacity: 0;
    display: inline-block;
    margin-top: 4px;
    height: 36px;
    line-height: 36px;
    vertical-align: middle;
    overflow: hidden;
    transition: opacity 0.3s ease-out;
}

.sl-menu-main2 .sl-menu-lit {
    opacity: 1;
}

.sl-menu-main2 .sl-menu-tip-cover {
    display: none;
}

.sl-menu-lic {
    position: absolute;
    top: 50%;
    left: 30px;
    margin-top: -10px;
}

.sl-menu-ric {
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -3px;
    font-family: element-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    color: #999;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-transition: transform 0.3s;
    transition: transform 0.3s;
}

/* .sl-menu-ric:before{
     content: "\E603";
   }*/
.sl-menu-ricr {
    color: #999;
}

.sl-menu-s {
    position: absolute;
    top: -7px;
    left: 100%;
    z-index: 1004;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px #999;
    border-radius: 2px;
    background-color: #fff;
    min-width: 130px;
    padding: 10px 0;
}

.sl-menu-sham {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: transform, display 0.4s;
    transition: transform 0.4s;
    -webkit-transform-origin: center top;
    transform-origin: center top;
}

.sl-menu-a:hover > .sl-menu-sham,
.sl-menu-sa:hover > .sl-menu-sham {
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.sl-menu-s.sl-menu-s-right {
    left: auto;
    right: 15px;
}

.main-upload_text_logo {
    display: block;
    text-align: center;
    position: relative;
    margin: 0px -20px;
    top: -35px;
    border-bottom: 1px solid #cccccc;
}

.main-file_upload {
    width: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.main-file_con .hide {
    width: 120px;
    position: absolute;
    height: 30px;
    left: 58px;
    margin-top: -8px;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 22;
}

.main-file_con .main-file_uploader,
.upload_bt {
    left: 0;
    top: -5px;
    position: relative;
    color: #fff;
    display: inline-block;
    padding: 0px 20px;
    background: #2ecc71;
    text-align: center;
    z-index: 11;
    border-radius: 15px;
    cursor: pointer;
}

.upload_bt {
    left: 130px;
}

.main-file_con .hide:hover {
    box-shadow: 1px 2px #44795b;
}

.main-img_holder,
.m_main-img_holder {
    height: 100px;
    line-height: 70px;
}

.main-img_holder img,
.m_main-img_holder img {
    max-width: 200px;
}

.main-file_btn_upload {
    margin-top: -20px;
    margin-bottom: 20px;
}

.sl-menu-sa {
    display: block;
    min-width: 120px;
    white-space: nowrap;
    padding: 0 20px;
    line-height: 32px;
    position: relative;
}

.sl-menu-a:hover {
    color: #2391e5;
    background-color: #e2f1fc;
    border-right-color: #e2f1fc;
}

.sl-menu-a:hover > .sl-menu-ric {
    color: #2391e5;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.sl-menu-sa:hover {
    background-color: #e2f1fc;
    color: #2391e5;
}

.sl-menu-sa:hover > .sl-menu-ricr {
    color: #2391e5;
}

.sl-menu-ss {
    opacity: 0;
    position: absolute;
    left: 100%;
    top: -11px;
    z-index: 1005;
    padding: 10px 0;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px #999;
    border-radius: 2px;
    background-color: #fff;
}

.sl-menu-sed {
    border-right-color: #2391e5;
}

.sl-menu-sed,
.sl-menu-ssed,
.sl-menu-sssed {
    color: #2391e5;
}

.sl-menu-sed > .sl-menu-ricr,
.sl-menu-ssed > .sl-menu-ricr,
.sl-menu-sed > .sl-menu-ric {
    color: #2391e5;
}

.sl-menu-sdis {
    cursor: default !important;
    cursor: not-allowed !important;
    color: #999 !important;
    background-color: #fff !important;
}

.sl-menu-reverse > .sl-menu-s,
.sl-menu-reverse > .sl-menu-ss {
    top: auto;
    bottom: -11px;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

/* header menu style --> end */
.sl-breadcrumb {
    overflow: hidden;
    background-color: #fff;
    height: 30px;
    padding: 7px 0 0 20px;
}

.sl-header-li-lgbc {
    position: absolute;
    right: 395px;
    top: 20px;
}

.sl-breadcrumb-text {
    float: left;
    color: white;
}

.sl-breadcrumb-list {
    float: left;
    padding-left: 10px;
    font-size: 12px;
    position: relative;
    top: 6px;
}

.sl-footer {
    padding: 20px 0 0px;
}

.sl-footer > p {
    text-align: center;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
}

.am-xz {
    float: left;
    margin-right: 7px;
    margin-top: 2px;
    animation: amXuanzhuan 4s linear infinite;
}

@keyframes amXuanzhuan {
    0% {
        transform: rotate3d(1, 0, 0, 360deg);
    }
    100% {
        transform: rotate3d(1, 0, 0, 0);
    }
}

.oa-header-photo-uld {
    width: 200px;
    height: 200px;
    line-height: 200px;
    vertical-align: middle;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer;
}

.oa-header-photo-uld > img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

/*.oa-header-content {*/
/*background: url("../../static/img/top_bgimg.png") left center no-repeat rgb(60,207,255);*/
/*height: 60px;*/
/*}*/

.oa-header-logo {
    float: left;
    padding: 15px 0 0 30px;
    height: 50px;
    overflow: hidden;
}

.oa-header-logo > img {
    animation: fadeInLeft 0.5s ease-out 0s both;
}

.menu-filter {
    height: 37px;
    width: 180px;
    left: 0px;
    position: absolute;
    top: 60px;
    z-index: 1024;
    /* background-color: rgba(26,21,51); */
    background-color: #ccf1ff;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.oa-header-upt {
    width: 60px;
    height: 60px;
    overflow: hidden;
    text-align: center;
}

.oa-header-upt > a {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-top: 10px;
    animation: fadeInRight 0.5s ease-out 0s both;
}

.oa-header-upt > a > img {
    width: 40px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
    color: #333;
    border-radius: 20px;
    box-shadow: 0 0 10px #6a6464;
}

.oa-header-user {
    position: absolute;
    right: 180px;
    top: 0;
    width: 60px;
    height: 60px;
}

.oa-header-user:hover .oa-header-upt > a > img {
    animation: circle 4s linear 0s infinite;
}

.oa-header-ucon {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 50px;
    left: -27px;
    z-index: 18000;
    padding: 10px 0 10px 10px;
    font-size: 15px;
}

.oa-header-ulist {
    position: relative;
    width: 215px;
    border: 1px solid #ddd;
    box-shadow: 0 0 8px #999;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.95);
}

.oa-header-user:hover .oa-header-ucon {
    display: block;
}

.oa-header-user:hover .oa-header-ulist {
    animation: fadeInRight 0.4s ease-out 0s both;
}

.oa-header-uin {
    text-align: center;
    overflow: hidden;
    padding: 20px 0 15px 0;
}

.oa-header-uin > img {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    cursor: pointer;
}

.oa-header-uin > img:hover {
    animation: largen2 0.6s ease-out 0s both;
}

.oa-header-uin > h3 {
    padding-top: 10px;
    color: #666;
}

.oa-header-uul {
    padding-bottom: 10px;
}

.oa-header-uul > li {
    height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.3s linear 0s;
}

.oa-header-uul .st-icons {
    position: relative;
    top: 6px;
    margin-right: 8px;
    transition: all 0.3s linear;
}

.st-icons-out {
    margin-right: 4px;
}

.oa-header-uul > li:hover {
    background-color: #ebebeb;
}

.oa-header-uul::before,
.oa-header-uul::after {
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: "";
    display: inline-block;
    position: absolute;
}

.oa-header-uul::after {
    left: 41px;
    top: -6px;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.oa-header-uul::before {
    left: 40px;
    top: -7px;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.hnstLogo {
    position: absolute;
    right: 20px;
    top: 14px;
}

.hnstLogo > img {
    height: 32px;
}
.marignL38 {
    margin-left: 38px;
}
.menuDrag {
    height: calc(100% - 120px);
    width: 18px;
    position: absolute;
    right: -6px;
    cursor: col-resize;
    z-index: 22;
}
.overFlowSet {
    overflow-x: hidden;
    overflow-y: auto;
    background: #0080ff;
}
.pageBreadcrumb {
    display: none;
}
</style>