fuxin-header-isart v0.4.8

本npm包作用 统一各个系统顶部菜单样式 适应keycloak单点登录

组件使用

<template>
  <div id="app">
    // menuId 废弃
    <fuxinHeader :avatar="avatar" :orgName="orgName" :topMenuList="topMenuList" :username="username" id-token="XXX" sysType="GZT"/>
  </div>
</template>

参数

data() {
    return {
      orgName: '管委会',
      roleName: '超级管理员',
      avatar: require('/src/assets/logo.png'),
      username: 'XXX',
      topMenuList: [
        {
          'name': '工作台',
          id: '0',
          icon: require('/src/assets/navbar/index.png'),
          src: 'http://mhweb.isart.me',
          sysType: 'GZT',
        },
        {
          'name': '精准招商',
          id: '1',
          icon: require('/src/assets/navbar/jingzhun@2x.png'),
          src: 'http://zhaoshangweb.isart.me',
          sysType: 'JZZS',
        },
        {
          'name': '智慧办公',
          id: '2',
          icon: require('/src/assets/navbar/zhihui@2x.png'),
          src: 'http://39.105.145.19:9103',
          sysType: 'ZZBG',
        },
        {
          'name': '项目动态监管',
          id: '3',
          icon: require('/src/assets/navbar/dongtai@2x.png'),
          src: false,
          sysType: 'XMDTJG',
        },
        {
          'name': '环保监测',
          id: '4',
          icon: require('/src/assets/navbar/huanbao@2x.png'),
          src: 'http://main.fxcyy.isart.me',
          sysType: 'HBJC',
        },
        {
          'name': 'AI视频分析',
           id: '5',
           icon: require('/src/assets/navbar/ai@2x.png'),
           src: false,
           sysType: 'ZZBG',
        },
        {
          'name': '安全生产',
          id: '6',
          icon: require('/src/assets/navbar/anquan@2x.png'),
          src: 'http://aqscweb.isart.me',
          sysType: 'AASC',
        },
        {
          'name': '疫情防护',
          id: '7',
          icon: require('/src/assets/navbar/yiqing@2x.png'),
          src: 'http://yqfkweb.isart.me',
          sysType: 'YYFH',
        },
        {
          'name': '党建党宣',
          id: '2089',
          icon: 'http://fxcyy.isart.me/navbar/dangjian.png',
          src: false,
          sysType: 'DJDJ',
        },
      ],
    }
  }

参数含义

isDev:       环境表示    (默认为0)  必传   1=测试环境  0=正式环境
avatar:      头像    (getUserInfo接口中获得)  必传
username:    用户名  (getUserInfo接口中获得)  必传
roleName:    角色名  (getUserInfo接口中获得)  必传
orgName:     公司名  必传
topMenuList: 头部菜单数组(从门户接口中获得)  必传

             生产环境 http://81.69.42.125:8080/
             测试环境 http://10.1.1.18:8080
             接口:  menhu/api/admin/menu/oneMenu
             参数:  {menuPlatform : "ADMIN",roleId:'从getUserInfo接口获得'}
             可以参考门户子系统调用此接口
             
id-token:    keycloak登录时获得的id-token   用于退出登录
已废弃！！！  menuId:      当前系统id(后续可能改为常量)      
                
             2081: 门户
             2082: 招商
             2083: 办公
             2084: 动态监管
             2085: 环保监测
             2086: AI智慧分析
             2087: 安全生产
             2088: 疫情防护
             2089: 党建党宣
             
sysType:     必传  以下仅为参考 具体请查看oneMenu接口返回
             GZT: 门户
             JZZS: 招商
             ZZBG: 办公
             XMDTJG: 动态监管
             HBJC: 环保监测
             ZZBG: AI智慧分析
             AASC: 安全生产
             YYFH: 疫情防护
             DJDJ: 党建党宣

接入准备

1  npm install fuxin-header-isart

2  main.js 全局引入 
import fuxinHeaderIsart from 'fuxin-header-isart'
Vue.use(fuxinHeaderIsart)

3  布局文件(一般为layout)  调整整体业务高度  顶部header 目前是固定高度100px  也就是整体要下沉100px;

如有疑问 请联系佟子青