[update] 框架调整

.env

@@ -1,3 +1,3 @@
 NODE_ENV=production
-VUE_APP_PLATFORM_NAME=JeroBoot 企业级快速开发平台
+VUE_APP_PLATFORM_NAME=昆鸿设备管理系统
 VUE_APP_SSO=false

README.md

@@ -1,4 +1,4 @@
-Jero-Web
+kh-device-client
 ====
 
 当前最新版本： 2.5.0
@@ -31,8 +31,7 @@ Jero-boot 的前端UI框架，采用前后端分离方案，提供强大代码
 
 - 拉取项目代码
 ```bash
-git clone http://git.hzwlsoft.com/JeroBoot/jero-boot.git
+git clone http://git.hzwlsoft.com/kh-device/kh-device-client.git
-cd  jero-boot/jero-web
 ```
 
 - 安装依赖

package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "jero-web",
+  "name": "kh-device-client",
-  "version": "2.4.6",
+  "version": "2.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "jero-web",
+  "name": "kh-device-client",
   "version": "2.5.0",
   "private": true,
   "scripts": {

public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <title>JeroBoot平台</title>
+  <title>昆鸿设备管理系统</title>
   <!--<link rel="icon" href="<%= BASE_URL %>logo.png">-->
   <script src="<%= BASE_URL %>cdn/babel-polyfill/polyfill_7_2_5.js"></script>
   <script src="<%= BASE_URL %>api_address_config.js"></script>
@@ -222,22 +222,22 @@
     }
     /* 滚动条优化 start */
     ::-webkit-scrollbar{
-      width:8px;
+      width:6px;
-      height:8px;
+      height:6px;
     }
     ::-webkit-scrollbar-track{
-      background: #f6f6f6;
+      background: transparent;
-      border-radius:2px;
+      border-radius:3px;
     }
     ::-webkit-scrollbar-thumb{
-      background: #cdcdcd;
+      background: linear-gradient(180deg, #0094FF 0%, #2EE4FD 100%);
-      border-radius:2px;
+      border-radius:3px;
     }
     ::-webkit-scrollbar-thumb:hover{
-      background: #747474;
+      background: linear-gradient(180deg, #0094FF 0%, #2EE4FD 100%);
     }
     ::-webkit-scrollbar-corner {
-      background: #f6f6f6;
+      background: pink;
     }
     /* 滚动条优化 end */
   </style>

src/App.vue

@@ -34,6 +34,7 @@ export default {
 }
 </script>
 <style  lang="less">
+  @import "~@assets/less/common.less";
   #app {
     height: 100%;
   }

src/assets/less/common.less

@@ -1,4 +1,4 @@
-
+@import "./modifyLessVars.less";
 /*列表上方操作按钮区域*/
 .ant-card-body .table-operator {
   //margin-bottom: 8px;
@@ -82,3 +82,64 @@
 .ant-tabs-bar {
   margin-bottom: 0px;
 }
+
+/* 表格样式begin */
+.ant-table-thead > tr > th {
+  background: linear-gradient( 180deg, rgba(0,148,255,0.1) 0%, rgba(0,148,255,0.2) 100%) !important;
+}
+/* 表格样式nd */
+
+/* 复选框begin */
+.ant-checkbox-inner,
+.ant-tree-checkbox-inner{
+  background-color: transparent;
+}
+/* 复选框end */
+
+/* 下拉框begin */
+.ant-select-selection--multiple .ant-select-selection__choice {
+  color: @text-color;
+  background-color: @primary-1;
+  border: 1px solid @border-color-base;
+  border-radius: 2px;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove {
+  color: @text-color;
+}
+.ant-select-selection--multiple .ant-select-selection__choice__remove:hover {
+  color: @text-color !important;
+}
+
+.ant-select-dropdown-menu-item-selected,
+.ant-select-dropdown-menu-item-selected:hover {
+  background-color: @primary-2;
+  color: @text-color;
+}
+/* 下拉框end */
+
+/* 表单禁用样式begin */
+.ant-input[disabled],
+.ant-radio-disabled + span,
+.ant-radio-disabled .ant-radio-inner,
+.ant-select-disabled .ant-select-selection,
+.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice
+{
+  color: @text-color-secondary !important;
+  background-color: transparent !important;
+}
+.ant-radio-disabled .ant-radio-inner::after {
+  background-color: @text-color-secondary !important;
+}
+/* 表单禁用样式end */
+
+/* 部分组件begin */
+// 弹出抽屉底部自定义
+.drawer-bootom-button {
+  background-color: @component-background !important;
+  border-top-color: @border-color-split !important;
+}
+.ant-modal-close:focus, .ant-modal-close:hover,
+.ant-drawer-close:focus, .ant-drawer-close:hover{
+  color: #fff;
+}
+/* 部分组件end */

src/assets/less/modifyLessVars.js

@@ -0,0 +1,23 @@
+module.exports = {
+  // 背景色
+  'component-background': '#001B36',
+  'background-color-base': 'rgba(0,27,54,0.67)', // 基础背景色
+  'background-color-light': 'rgba(0, 148, 255, 0.30)', // 基础高亮背景色
+
+  // 边框色
+  'border-color-base': '#0094FF',
+  'border-color-split': '#0094FF',
+
+  // 字体颜色
+  'heading-color': 'rgba(255, 255, 255, 0.96)',
+  'text-color': 'rgba(255, 255, 255, 0.96)',
+  'text-color-secondary': '#A5B8CE',
+
+  // 主题色
+  'primary-1': 'rgba(0, 148, 255, 0.30)',
+  'primary-2': 'rgba(0, 148, 255, 0.10)',
+
+  // 表格相关
+  'table-selected-row-bg': 'rgba(0, 148, 255, 0.30)', // 勾选行背景色
+  'table-expanded-row-bg': 'rgba(0, 148, 255, 0.10)', // 扩展行背景色
+}

src/assets/less/modifyLessVars.less

@@ -0,0 +1,21 @@
+/* 背景色 */
+@component-background: #001B36;
+@background-color-base: #001B36AA;
+@background-color-light: rgba(0, 148, 255, 0.30);
+
+/* 边框色 */
+@border-color-base: #0094FF;
+@border-color-split: #0094FF;
+
+/* 字体颜色 */
+@heading-color: rgba(255, 255, 255, 0.96);
+@text-color: rgba(255, 255, 255, 0.96);
+@text-color-secondary: #A5B8CE;
+
+/* 主题色 */
+@primary-1: rgba(0, 148, 255, 0.30);
+@primary-2: rgba(0, 148, 255, 0.10);
+
+/* 表格相关 */
+@table-selected-row-bg: rgba(0, 148, 255, 0.30);
+@table-expanded-row-bg: rgba(0, 148, 255, 0.10);

src/components/layouts/TabLayout.vue

@@ -21,7 +21,7 @@
       </a-tabs>
     </div>
 
-    <div style="margin: 12px 12px 0;">
+    <div style="margin-left: 24px;">
       <!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
       <keep-alive v-if="multipage">
         <router-view v-if="reloadFlag"/>
@@ -142,7 +142,7 @@ export default {
   methods: {
     // update-begin-author:sunjianlei date:20200120 for: 动态更改页面标题
     changeTitle (title) {
-      const projectTitle = 'Jero-Boot 企业级快速开发平台'
+      const projectTitle = '昆鸿设备管理系统'
       // 首页特殊处理
       if (this.$route.path === indexKey) {
         document.title = projectTitle

src/components/menu/FirstLevelMenu.vue

@@ -0,0 +1,216 @@
+<template>
+  <!--  一级菜单    -->
+  <div class="nav-menu">
+    <ul class="nav-menu-list nav-menu-list-left">
+      <li v-for="menu in showMenu.slice(0, 6)"
+          :key="menu.id"
+          @click="selectMenu(menu)"
+          :class="{ active: openKeys.includes(menu.path)}">
+        <div class="menu-item">
+          <img v-if="menu.meta.icon && menu.meta.icon.includes('custom_menu_image_')"
+               :src="require(`@/assets/images/menu/icon/${menu.meta.icon.replace('custom_menu_image_', '')}.png`)" alt=''>
+        </div>
+        <div class="menu-item-title">{{menu.meta.title}}</div>
+      </li>
+    </ul>
+    <ul class="nav-menu-list nav-menu-list-right">
+      <li v-for="menu in showMenu.slice(6, 12)"
+          :key="menu.id"
+          @click="selectMenu(menu)"
+          :class="{ active: openKeys.includes(menu.path)}">
+        <div class="menu-item">
+          <img v-if="menu.meta.icon && menu.meta.icon.includes('custom_menu_image_')"
+               :src="require(`@/assets/images/menu/icon/${menu.meta.icon.replace('custom_menu_image_', '')}.png`)" alt=''>
+        </div>
+        <div class="menu-item-title">{{menu.meta.title}}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FirstLevelMenu',
+  props: {
+    menu: {
+      type: Array,
+      required: true
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      // 选择的path
+      selectPath: '',
+      openKeys: [],
+      selectedKeys: []
+    }
+  },
+  computed: {
+    // 可以显示的一级菜单
+    showMenu () {
+      return this.menu.filter((item) => {
+        if (item.hidden) {
+          return false
+        }
+        return true
+      })
+    }
+  },
+  watch: {
+    $route () {
+      this.updateMenu()
+      this.$emit('select', this.showMenu.find(item => item.path === this.openKeys[this.openKeys.length - 1]))
+    }
+  },
+  mounted () {
+    this.updateMenu()
+    this.$emit('select', this.showMenu.find(item => item.path === this.openKeys[this.openKeys.length - 1]))
+  },
+  methods: {
+    // 选择菜单
+    selectMenu (menu) {
+      this.selectPath = menu.path
+      if (menu.children && menu.children.length > 0) {
+        this.$router.push({ path: menu.children[0].path })
+      } else {
+        this.$router.push({ name: menu.name })
+      }
+      this.$emit('select', menu)
+    },
+    updateMenu () {
+      const routes = this.$route.matched.concat()
+      const { hidden } = this.$route.meta
+      if (routes.length >= 3 && hidden) {
+        routes.pop()
+        this.selectedKeys = [routes[routes.length - 1].path]
+      } else {
+        this.selectedKeys = [routes.pop().path]
+      }
+      let openKeys = []
+      routes.forEach(item => {
+        openKeys.push(item.path)
+      })
+
+      // update-begin-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
+      // 包含冒号的是动态菜单
+      if (this.selectedKeys[0].includes(':')) {
+        const selectedKey = this.$route.fullPath
+        this.selectedKeys = [selectedKey]
+        const newOpenKeys = []
+        this.fullOpenKeys(this.menu, selectedKey, newOpenKeys)
+        if (newOpenKeys.length > 0) {
+          openKeys = newOpenKeys.reverse()
+        }
+      }
+      // update-end-author:sunjianlei date:20210409 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
+
+      // update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
+      if (!this.selectedKeys || this.selectedKeys[0].indexOf(':') < 0) {
+        this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
+      }
+      // update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对
+    },
+    fullOpenKeys (menus, selectedKey, openKeys) {
+      for (const item of menus) {
+        if (item.path === selectedKey) {
+          openKeys.push(item.path)
+          this.$emit('updateMenuTitle', item)
+          return true
+        } else if (Array.isArray(item.children)) {
+          if (this.fullOpenKeys(item.children, selectedKey, openKeys)) {
+            openKeys.push(item.path)
+            return true
+          }
+        }
+      }
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+//  一级导航样式
+.nav-menu {
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+
+  .nav-menu-list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      cursor: pointer;
+      box-sizing: border-box;
+      margin: 0 20px;
+      max-width: 68px;
+
+      .menu-item {
+        position: relative;
+        width: 68px;
+        height: 68px;
+        background-image: url("~@/assets/images/menu/top-menu.png");
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: center center;
+        font-size: 0;
+
+        img {
+          width: 28px;
+          height: 28px;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+
+      .menu-item-title {
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-align: center;
+        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+        font-weight: bold;
+        font-size: 16px;
+        color: rgba(255,255,255,0.96);
+        line-height: 19px;
+        text-shadow: 0 4px 4px rgba(0,0,0,0.25);
+        font-style: normal;
+        text-transform: none;
+        transform: translateY(-10px);
+      }
+
+      // 选中的样式
+      &.active {
+
+        .menu-item {
+          background-image: url("~@/assets/images/menu/top-menu-act.png");
+        }
+        .menu-item-title {
+          font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+          font-weight: bold;
+          font-size: 16px;
+          color: #FFC97A;
+          line-height: 19px;
+          text-shadow: 0 4px 4px rgba(0,0,0,0.25);
+          text-align: left;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/page/GlobalHeader.vue

@@ -2,35 +2,19 @@
   <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
   <a-layout-header
     v-if="!headerBarFixed"
+    class="global-header"
     :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
     :style="{ padding: '0' }">
 
     <div v-if="mode === 'sidemenu'" class="header" :class="theme">
-      <a-icon
+      <span class="system-title">昆鸿设备管理平台</span>
-        v-if="device==='mobile'"
+      <span class="system-page-title">{{$route.meta.title}}</span>
-        class="trigger"
+      <span class="system-time">{{ systemTime }}</span>
-        :type="collapsed ? 'menu-fold' : 'menu-unfold'"
-        @click="toggle"></a-icon>
-      <a-icon
-        v-else
-        class="trigger"
-        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
-        @click="toggle"/>
-
-<!--      <span v-if="device === 'desktop'">欢迎进入 Jero-Boot 平台</span>-->
-<!--      <span v-else>Jero-Boot</span>-->
-      <span class='bread'>
-        <a-breadcrumb class="breadcrumb">
-        <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
-          <router-link v-if="item.name !== name" :to="{ path: item.path }">
-            {{ item.meta.title }}
-          </router-link>
-          <span v-else>{{ item.meta.title }}</span>
-        </a-breadcrumb-item>
-      </a-breadcrumb>
-      </span>
-
       <user-menu :theme="theme"/>
+      <!--  头部一级菜单    -->
+      <first-level-menu :menu="menus"
+                        :collapsed="collapsed"
+                        @select="selectFirstLevelMenu"/>
     </div>
     <!-- 顶部导航栏模式 -->
     <div v-else :class="['top-nav-header-index', theme]">
@@ -55,7 +39,6 @@
         <user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight"/>
       </div>
     </div>
-
   </a-layout-header>
 </template>
 
@@ -64,10 +47,13 @@ import UserMenu from '../tools/UserMenu'
 import SMenu from '../menu/'
 import Logo from '../tools/Logo'
 import { mixin } from '@/utils/mixin.js'
+import moment from 'dayjs'
+import FirstLevelMenu from '@comp/menu/FirstLevelMenu'
 
 export default {
   name: 'GlobalHeader',
   components: {
+    FirstLevelMenu,
     UserMenu,
     SMenu,
     Logo
@@ -110,7 +96,9 @@ export default {
         headerIndexRight: {},
         topSmenuStyle: {}
       },
-      chatStatus: ''
+      chatStatus: '',
+      systemTime: '', // 当前时间
+      updateTimer: null // 更新当前时间定时器
     }
   },
   watch: {
@@ -130,6 +118,15 @@ export default {
       this.getBreadcrumb()
     }
   },
+  created () {
+    /* 先设置当前时间，如果没有定时器，就添加一个定时器更新当前时间 */
+    this.systemTime = moment().format('YYYY-MM-DD HH:mm:ss')
+    if (!this.updateTimer) {
+      this.updateTimer = setInterval(() => {
+        this.systemTime = moment().format('YYYY-MM-DD HH:mm:ss')
+      }, 1000)
+    }
+  },
   // update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
   mounted () {
     window.addEventListener('scroll', this.handleScroll)
@@ -142,6 +139,9 @@ export default {
   },
 
   methods: {
+    selectFirstLevelMenu (...arg) {
+      this.$emit('selectFirstLevelMenu', ...arg)
+    },
     getBreadcrumb () {
       this.breadList = []
       // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
@@ -195,8 +195,59 @@ export default {
 <style lang="less" scoped>
   /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/
 
-  @height: 56px;
+  @height: 48px;
-
+  @font-face {
+    font-family: 'UnidreamLED';
+    src: url('~@assets/font/UnidreamLED.ttf') format('truetype');
+  }
+  .system-title {
+    user-select: none;
+    position: absolute;
+    left: 50%;
+    top: 10px;
+    transform: translateX(-50%);
+    font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+    font-weight: bold;
+    font-size: 30px;
+    line-height: 35px;
+    text-shadow: 1px 2px 1px rgba(0,0,0,0.25);
+    text-align: center;
+    font-style: normal;
+    text-transform: none;
+    background: linear-gradient(180deg, #FFFFFF 0%, #A6D1FF 100%);
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+  .system-page-title {
+    user-select: none;
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+    font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+    font-weight: bold;
+    font-size: 28px;
+    line-height: 33px;
+    text-shadow: 1px 2px 1px rgba(0,0,0,0.25);
+    text-align: left;
+    font-style: normal;
+    color: #eee;
+    //text-transform: none;
+    //background: linear-gradient(180deg, #FFFFFF 0%, #A6D1FF 100%);
+    //-webkit-background-clip: text;
+    //color: transparent;
+  }
+  .system-time {
+    user-select: none;
+    font-family: UniDreamLED, UniDreamLED, sans-serif;
+    font-weight: 400;
+    font-size: 22px;
+    color: @primary-color;
+    line-height: 28px;
+    letter-spacing: 2px;
+    font-style: normal;
+    text-transform: none;
+  }
   .layout {
     .bread {
       display: inline-block;
@@ -230,17 +281,17 @@ export default {
 
     .header {
       z-index: 2;
-      color: #333;
+      //color: #333;
-      height: @height;
+      height: 158px;
       //background-color: @primary-color;
-      background-color: #fff;
+      background-color: transparent;
       transition: background 300ms;
 
       /* dark 样式 */
       &.dark {
         color: #000000;
-        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+        //box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-        background-color: white !important;
+        //background-color: white !important;
       }
     }
 
@@ -250,12 +301,19 @@ export default {
       }
     }
   }
-
   .ant-layout-header {
-    height: @height;
+    height: 158px;
     line-height: @height;
+    background-color: transparent;
   }
 
   /* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/
-
+  .global-header {
+    position: relative;
+    background-color: #001125;
+    background-image: url("~@/assets/images/header/header-bg.png");
+    background-position: center top;
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+  }
 </style>

src/components/page/GlobalLayout.vue

@@ -1,59 +1,6 @@
 <template>
   <a-layout class="layout" :class="[device]">
 
-    <template v-if="layoutMode === 'sidemenu'">
-      <a-drawer
-        v-if="device === 'mobile'"
-        :wrapClassName="'drawer-sider ' + navTheme"
-        placement="left"
-        @close="() => this.collapsed = false"
-        :closable="false"
-        :visible="collapsed"
-        width="200px"
-      >
-        <side-menu
-          mode="inline"
-          v-if="device === 'mobile'"
-          :menus="menus"
-          @menuSelect="menuSelect"
-          @updateMenuTitle="handleUpdateMenuTitle"
-          :theme="navTheme"
-          :collapsed="false"
-          :collapsible="true"></side-menu>
-      </a-drawer>
-
-      <side-menu
-        v-show="device === 'desktop'"
-        mode="inline"
-        :menus="menus"
-        @menuSelect="myMenuSelect"
-        @updateMenuTitle="handleUpdateMenuTitle"
-        :theme="navTheme"
-        :collapsed="collapsed"
-        :collapsible="true"></side-menu>
-    </template>
-    <!-- 下次优化这些代码 -->
-    <template v-else>
-      <a-drawer
-        v-if="device === 'mobile'"
-        :wrapClassName="'drawer-sider ' + navTheme"
-        placement="left"
-        @close="() => this.collapsed = false"
-        :closable="false"
-        :visible="collapsed"
-        width="200px"
-      >
-        <side-menu
-          mode="inline"
-          :menus="menus"
-          @menuSelect="menuSelect"
-          @updateMenuTitle="handleUpdateMenuTitle"
-          :theme="navTheme"
-          :collapsed="false"
-          :collapsible="true"></side-menu>
-      </a-drawer>
-    </template>
-
     <a-layout
       :class="[layoutMode, `content-width-${contentWidth}`]"
       :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
@@ -66,17 +13,32 @@
         :device="device"
         @toggle="toggle"
         @updateMenuTitle="handleUpdateMenuTitle"
+        @selectFirstLevelMenu="selectFirstLevelMenu"
       />
+      <!--   内容布局   -->
+      <a-layout :style="{backgroundColor: '#001125', padding: '24px 24px 0'}">
+        <!--  左侧二级菜单    -->
+        <a-layout-sider class="layout-sider" v-if="menuChildren" width="174">
+          <s-menu
+            :collapsed="collapsed"
+            :menu="menuChildren"
+            :theme="navTheme"
+            @select="menuSelect"
+            @updateMenuTitle="handleUpdateMenuTitle"
+            mode="inline">
+          </s-menu>
+        </a-layout-sider>
 
         <!-- layout content -->
         <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
           <slot></slot>
         </a-layout-content>
+      </a-layout>
 
         <!-- layout footer -->
-      <a-layout-footer style="padding: 0">
+<!--      <a-layout-footer style="padding: 0">-->
-        <global-footer/>
+<!--        <global-footer/>-->
-      </a-layout-footer>
+<!--      </a-layout-footer>-->
     </a-layout>
 
     <!-- update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ---- -->
@@ -86,12 +48,13 @@
 </template>
 
 <script>
-import SideMenu from '@/components/menu/SideMenu'
+import SMenu from '@/components/menu/index'
 import GlobalHeader from '@/components/page/GlobalHeader'
 import GlobalFooter from '@/components/page/GlobalFooter'
 import { triggerWindowResizeEvent } from '@/utils/util'
 import { mapActions, mapState } from 'vuex'
 import { mixin, mixinDevice } from '@/utils/mixin.js'
+import FirstLevelMenu from '@comp/menu/FirstLevelMenu'
 // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
 // import SettingDrawer from '@/components/setting/SettingDrawer'
 // 注释这个因为在个人设置模块已经加载了SettingDrawer页面
@@ -100,7 +63,8 @@ import { mixin, mixinDevice } from '@/utils/mixin.js'
 export default {
   name: 'GlobalLayout',
   components: {
-    SideMenu,
+    FirstLevelMenu,
+    SMenu,
     GlobalHeader,
     GlobalFooter
     // update-start---- author:os_chengtgen -- date:20190830 --  for:issues/463 -编译主题颜色已生效，但还一直转圈，显示主题 正在编译 ------
@@ -114,7 +78,8 @@ export default {
     return {
       collapsed: false,
       activeMenu: {},
-      menus: []
+      menus: [],
+      menuChildren: []
     }
   },
   computed: {
@@ -158,6 +123,11 @@ export default {
         this.collapsed = false
       }
     },
+    // 选择一级标题
+    selectFirstLevelMenu (menu) {
+      this.activeFirstMenu = menu
+      this.menuChildren = menu.children || []
+    },
     // update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
     myMenuSelect (value) {
       // 此处触发动态路由被点击事件
@@ -317,9 +287,9 @@ export default {
 
     .header {
       height: 64px;
-      padding: 0 12px 0 0;
+      padding: 0 12px;
       background: #fff;
-      box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+      //box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
       position: relative;
     }
 
@@ -334,7 +304,7 @@ export default {
           display: inline-block;
           transition: all .3s;
 
-          height: 70%;
+          //height: 70%;
           line-height: 46px;
 
           &.action-full {
@@ -367,7 +337,7 @@ export default {
           display: inline-block;
           transition: all .3s;
 
-          height: 70%;
+          //height: 70%;
           line-height: 46px;
 
           &.action-full {
@@ -565,7 +535,8 @@ export default {
     .layout-content {
       margin: 24px 24px 0;
       height: 64px;
-      padding: 0 12px 0 0;
+      padding: 0 12px;
+      background-color: #001125 !important;
     }
 
   }
@@ -743,4 +714,66 @@ export default {
     padding: 9px 16px !important;
     overflow-wrap: break-word;
   }
+
+  // 左侧菜单
+  .layout-sider {
+    background-color: transparent !important;
+    .ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
+      display: none;
+    }
+    .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+      border-right: none;
+    }
+    .ant-menu-item {
+      margin-bottom: 24px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      background-color: transparent;
+      background-image: url("~@assets/images/menu/menu.png");
+      background-size: 100%;
+      background-repeat: no-repeat;
+      background-position: center right;
+
+      & > a, &:hover > a {
+        font-style: italic;
+        font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+        font-weight: bold;
+        font-size: 16px;
+        color: rgba(255,255,255,0.96);
+        line-height: 24px;
+        text-shadow: 0 0 2px rgba(0,0,0,0.6);
+        text-align: left;
+        text-transform: none;
+        color: #fff;
+        letter-spacing: 1px;
+      }
+      &:active {
+        background-color: transparent;
+        background-image: url("~@assets/images/menu/menu.png");
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: center right;
+      }
+      &.ant-menu-item-selected {
+        background-image: url("~@assets/images/menu/menu-act.png");
+      }
+    }
+    .ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
+      display: none;
+    }
+    .ant-menu-vertical > .ant-menu-item, .ant-menu-vertical-left > .ant-menu-item, .ant-menu-vertical-right > .ant-menu-item, .ant-menu-inline > .ant-menu-item, .ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title, .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
+      height: 46px;
+      line-height: 46px;
+    }
+    // 背景色设置透明
+    .ant-menu, .ant-menu-submenu > .ant-menu {
+      background-color: transparent;
+      color: #fff;
+    }
+    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+      background-color: transparent;
+    }
+  }
 </style>

src/components/tools/UserMenu.vue

@@ -1,80 +1,50 @@
 <template>
   <div class="user-wrapper" :class="theme">
-    <!-- update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
-    <!-- update-begin author:sunjianlei date:20191@20 for: 解决全局样式冲突的问题 -->
-<!--    <span class="action" @click="showClick">-->
-<!--      <a-icon type="search"></a-icon>-->
-<!--    </span>-->
-    <!-- update-begin author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框 -->
-<!--    <component :is="searchMenuComp" v-show="searchMenuVisible || isMobile()" class="borders" :visible="searchMenuVisible" title="搜索菜单" :footer="null" @cancel="searchMenuVisible=false">-->
-    <span class='search-box'>
-        <a-icon  type='search'   />
-    </span>
-    <a-select
-        class="search-input"
-        showSearch
-        :showArrow="false"
-        placeholder="请输入搜索内容"
-        optionFilterProp="children"
-        :filterOption="filterOption"
-        :open="isMobile()?true:null"
-        :getPopupContainer="(node) => node.parentNode"
-        :style="isMobile()?{width: '100%',marginBottom:'50px'}:{}"
-        @change="searchMethods"
-        @blur="hiddenClick"
-      >
-
-        <a-select-option v-for="(site,index) in searchMenuOptions" :key="index" :value="site.id">{{site.meta.title}}</a-select-option>
-      </a-select>
-<!--    </component>-->
-    <!-- update-end author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框 -->
-    <!-- update-end author:sunjianlei date:20191220 for: 解决全局样式冲突的问题 -->
-    <!-- update_end  author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
     <span class="action">
       <a class="logout_title" target="_blank" href="#">
-        <a-icon type="question-circle-o"></a-icon>
+        <a-icon type="question-circle-o"></a-icon> 帮助
       </a>
     </span>
-    <header-notice class="action"/>
+<!--    <header-notice class="action"/>-->
-    <span style="display:inline-block;padding: 0 0 0 16px">
+<!--    <span style="display:inline-block;padding: 0 0 0 16px">-->
-      <template v-if='getAvatar()'>
+<!--      <template v-if='getAvatar()'>-->
-         <a-avatar class="avatar" size="small" :src="getAvatar()"/>
+<!--         <a-avatar class="avatar" size="small" :src="getAvatar()"/>-->
-      </template>
+<!--      </template>-->
-       <template v-else>
+<!--       <template v-else>-->
-         <a-avatar :size="20">
+<!--         <a-avatar :size="20">-->
-          <template #icon>  <a-icon type="user"></a-icon></template>
+<!--          <template #icon>  <a-icon type="user"></a-icon></template>-->
-        </a-avatar>
+<!--        </a-avatar>-->
-      </template>
+<!--      </template>-->
-    </span>
+<!--    </span>-->
     <a-dropdown>
       <span class=" small-action">
-        <span v-if="isDesktop()">欢迎您，{{ nickname() }}</span>
+        <a-icon type="user"></a-icon><span v-if="isDesktop()"> {{ nickname() }}</span>
       </span>
       <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
-        <a-menu-item key="0">
+<!--        <a-menu-item key="0">-->
-          <router-link :to="{ name: 'account-center' }">
+<!--          <router-link :to="{ name: 'account-center' }">-->
-            <a-icon type="user"/>
+<!--            <a-icon type="user"/>-->
-            <span>个人中心</span>
+<!--            <span>个人中心</span>-->
-          </router-link>
+<!--          </router-link>-->
-        </a-menu-item>
+<!--        </a-menu-item>-->
-        <a-menu-item key="1">
+<!--        <a-menu-item key="1">-->
-          <router-link :to="{ name: 'account-settings-base' }">
+<!--          <router-link :to="{ name: 'account-settings-base' }">-->
-            <a-icon type="setting"/>
+<!--            <a-icon type="setting"/>-->
-            <span>账户设置</span>
+<!--            <span>账户设置</span>-->
-          </router-link>
+<!--          </router-link>-->
-        </a-menu-item>
+<!--        </a-menu-item>-->
-        <a-menu-item key="3"  @click="systemSetting">
+<!--        <a-menu-item key="3"  @click="systemSetting">-->
-           <a-icon type="tool"/>
+<!--           <a-icon type="tool"/>-->
-           <span>系统设置</span>
+<!--           <span>系统设置</span>-->
-        </a-menu-item>
+<!--        </a-menu-item>-->
-        <a-menu-item key="4" @click="updatePassword">
+<!--        <a-menu-item key="4" @click="updatePassword">-->
-          <a-icon type="setting"/>
+<!--          <a-icon type="setting"/>-->
-          <span>密码修改</span>
+<!--          <span>密码修改</span>-->
-        </a-menu-item>
+<!--        </a-menu-item>-->
-        <a-menu-item key="5" @click="updateCurrentDepart">
+<!--        <a-menu-item key="5" @click="updateCurrentDepart">-->
-          <a-icon type="cluster"/>
+<!--          <a-icon type="cluster"/>-->
-          <span>切换部门</span>
+<!--          <span>切换部门</span>-->
-        </a-menu-item>
+<!--        </a-menu-item>-->
         <a-menu-item key="6" @click="clearCache">
           <a-icon type="sync"/>
           <span>清理缓存</span>
@@ -83,21 +53,15 @@
           <a-icon type="setting"/>
           <span>测试</span>
         </a-menu-item>
-        <a-menu-divider/>
+        <a-menu-divider/>-->
         <a-menu-item key="3">
           <a href="javascript:;" @click="handleLogout">
             <a-icon type="logout"/>
             <span>退出登录</span>
           </a>
-        </a-menu-item>-->
+        </a-menu-item>
       </a-menu>
     </a-dropdown>
-    <span class="action">
-      <a class="logout_title" href="javascript:;" @click="handleLogout">
-        <a-icon type="logout"/>
-        <span v-if="isDesktop()">&nbsp;退出登录</span>
-      </a>
-    </span>
     <user-password ref="userPassword"></user-password>
     <depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>
     <setting-drawer ref="settingDrawer" :closable="true" title="系统设置"></setting-drawer>
@@ -289,6 +253,10 @@ export default {
   }
   /* update_begin author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
   /* update-begin author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
+
+  .user-wrapper {
+    color: @primary-color;
+  }
   .user-wrapper .search-input {
     width: 210px;
     color: inherit;
@@ -311,7 +279,7 @@ export default {
 <style lang="less" scoped>
   .ant-avatar {
     background-color: #fff;
-    color: #333 !important;
+    color: #fff !important;
     border: 1px solid #333;
     vertical-align: sub;
   }

src/defaultSettings.js

@@ -22,7 +22,7 @@ export default {
   fixSiderbar: false, // sticky siderbar
   autoHideHeader: false, //  auto hide header
   colorWeak: false,
-  multipage: true, // 默认多页签模式
+  multipage: false, // 默认多页签模式
   // vue-ls options
   storageOptions: {
     namespace: 'pro__', // key prefix

src/views/system/DepartList.vue

@@ -14,7 +14,7 @@
           <a-button title="删除多条数据" @click="batchDel" type="default">批量删除</a-button>
           <!--<a-button @click="refresh" type="default" icon="reload" :loading="loading">刷新</a-button>-->
         </a-row>
-        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
+        <div style="padding-left:16px;height: 100%; margin-top: 5px">
 <!--          <a-alert type="info" :showIcon="true">-->
 <!--            <div slot="message">-->
 <!--              当前选择：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>-->

src/views/system/DepartUserList.vue

@@ -2,7 +2,7 @@
   <a-row :gutter="10">
     <a-col :md="8" :sm="24">
       <a-card :bordered="false">
-        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
+        <div style="padding-left:16px;height: 100%; margin-top: 5px">
           <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
           <!-- 树-->
 

src/views/system/DictItemList.vue

@@ -11,8 +11,6 @@
       <div
         :style="{
           padding:'10px',
-          border: '1px solid #e9e9e9',
-          background: '#fff',
         }">
 
         <div class="table-page-search-wrapper">

src/views/systemOverview/equipmentManagement/EquipmentManagement.vue

@@ -0,0 +1,13 @@
+<template>
+<div>1</div>
+</template>
+
+<script>
+export default {
+  name: 'EquipmentManagement'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/systemOverview/systemSettings/SystemSettings.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>1</div>
+</template>
+
+<script>
+export default {
+  name: 'SystemSettings'
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>1</div>
+</template>
+
+<script>
+export default {
+  name: 'WellheadDataMonitoring'
+}
+</script>
+
+<style scoped>
+
+</style>

vue.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const CompressionPlugin = require('compression-webpack-plugin')
-
+const modifyLessVars = require('./src/assets/less/modifyLessVars')
 function resolve (dir) {
   return path.join(__dirname, dir)
 }
@@ -65,9 +65,10 @@ module.exports = {
       less: {
         modifyVars: {
           /* less 变量覆盖，用于自定义 ant design 主题 */
-          'primary-color': '#1890FF',
+          'primary-color': '#0094FF',
-          'link-color': '#1890FF',
+          'link-color': '#0094FF',
-          'border-radius-base': '4px'
+          'border-radius-base': '4px',
+          ...modifyLessVars
         },
         javascriptEnabled: true
       }
@@ -75,7 +76,7 @@ module.exports = {
   },
 
   devServer: {
-    port: 3000,
+    port: 4242,
     proxy: {
       /* '/api': {
         target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
@@ -86,7 +87,7 @@ module.exports = {
         }
       }, */
       '/jero-boot': {
-        target: 'http://localhost:8080', // 请求本地 jero-boot后台项目
+        target: 'http://localhost:9393', // 请求本地 jero-boot后台项目
         ws: false,
         changeOrigin: true,
         pathRewrite: {