标签栏完善、布局管理、监控系统、信息通知管理跳转

mes/hd/nladmin-system/pom.xml

@@ -15,7 +15,7 @@
     <properties>
         <jjwt.version>0.11.1</jjwt.version>
         <!-- oshi监控需要指定jna版本, 问题详见 https://github.com/oshi/oshi/issues/1040 -->
-        <jna.version>5.5.0</jna.version>
+        <jna.version>5.9.0</jna.version>
         <sa-token.version>1.31.0</sa-token.version>
     </properties>
     <dependencies>

mes/hd/nladmin-system/src/main/java/org/nl/system/controller/monitor/MonitorController.java

@@ -0,0 +1,47 @@
+/*
+ *  Copyright 2019-2020 Zheng Jie
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+package org.nl.system.controller.monitor;
+
+import cn.dev33.satoken.annotation.SaCheckPermission;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import lombok.RequiredArgsConstructor;
+import org.nl.system.service.monitor.MonitorService;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * @author Zheng Jie
+ * @date 2020-05-02
+ */
+@RestController
+@RequiredArgsConstructor
+@Api(tags = "系统-服务监控管理")
+@RequestMapping("/api/monitor")
+public class MonitorController {
+
+    private final MonitorService serverService;
+
+    @GetMapping
+    @ApiOperation("查询服务监控")
+//    @SaCheckPermission("monitor:list")
+    public ResponseEntity<Object> query() {
+        return new ResponseEntity<>(serverService.getServers(),HttpStatus.OK);
+    }
+}

mes/hd/nladmin-system/src/main/java/org/nl/system/controller/param/SysParamController.java

@@ -72,11 +72,11 @@ class SysParamController {
         return new ResponseEntity<>(HttpStatus.OK);
     }
 
-    @PostMapping("/getValueByCode/{code}")
+    @PostMapping("/getValueByCode")
     @Log("根据编码获取值")
     @ApiOperation("根据编码获取值")
     @SaIgnore
-    public ResponseEntity<Object> getValueByCode(@PathVariable String code) {
+    public ResponseEntity<Object> getValueByCode(@RequestBody String code) {
         return new ResponseEntity<>(paramService.findByCode(code), HttpStatus.CREATED);
     }
 

mes/hd/nladmin-system/src/main/java/org/nl/system/service/monitor/MonitorService.java

@@ -0,0 +1,31 @@
+/*
+ *  Copyright 2019-2020 Zheng Jie
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+package org.nl.system.service.monitor;
+
+import java.util.Map;
+
+/**
+ * @author Zheng Jie
+ * @date 2020-05-02
+ */
+public interface MonitorService {
+
+    /**
+    * 查询数据分页
+    * @return Map<String,Object>
+    */
+    Map<String,Object> getServers();
+}

mes/hd/nladmin-system/src/main/java/org/nl/system/service/monitor/impl/MonitorServiceImpl.java

@@ -0,0 +1,189 @@
+/*
+ *  Copyright 2019-2020 Zheng Jie
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+package org.nl.system.service.monitor.impl;
+
+import cn.hutool.core.date.BetweenFormatter;
+import cn.hutool.core.date.DateUtil;
+import org.nl.modules.common.utils.ElAdminConstant;
+import org.nl.modules.common.utils.FileUtil;
+import org.nl.modules.common.utils.StringUtils;
+import org.nl.system.service.monitor.MonitorService;
+import org.springframework.stereotype.Service;
+import oshi.SystemInfo;
+import oshi.hardware.CentralProcessor;
+import oshi.hardware.GlobalMemory;
+import oshi.hardware.HardwareAbstractionLayer;
+import oshi.hardware.VirtualMemory;
+import oshi.software.os.FileSystem;
+import oshi.software.os.OSFileStore;
+import oshi.software.os.OperatingSystem;
+import oshi.util.FormatUtil;
+import oshi.util.Util;
+
+import java.lang.management.ManagementFactory;
+import java.text.DecimalFormat;
+import java.util.Date;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Map;
+
+/**
+ * @author Zheng Jie
+ * @date 2020-05-02
+ */
+@Service
+public class MonitorServiceImpl implements MonitorService {
+
+    private final DecimalFormat df = new DecimalFormat("0.00");
+
+    @Override
+    public Map<String,Object> getServers(){
+        Map<String, Object> resultMap = new LinkedHashMap<>(8);
+        try {
+            SystemInfo si = new SystemInfo();
+            OperatingSystem os = si.getOperatingSystem();
+            HardwareAbstractionLayer hal = si.getHardware();
+            // 系统信息
+            resultMap.put("sys", getSystemInfo(os));
+            // cpu 信息
+            resultMap.put("cpu", getCpuInfo(hal.getProcessor()));
+            // 内存信息
+            resultMap.put("memory", getMemoryInfo(hal.getMemory()));
+            // 交换区信息
+            resultMap.put("swap", getSwapInfo(hal.getMemory()));
+            // 磁盘
+            resultMap.put("disk", getDiskInfo(os));
+            resultMap.put("time", DateUtil.format(new Date(), "HH:mm:ss"));
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return resultMap;
+    }
+
+    /**
+     * 获取磁盘信息
+     * @return /
+     */
+    private Map<String,Object> getDiskInfo(OperatingSystem os) {
+        Map<String,Object> diskInfo = new LinkedHashMap<>();
+        FileSystem fileSystem = os.getFileSystem();
+        List<OSFileStore> fsArray = fileSystem.getFileStores();
+        String osName = System.getProperty("os.name");
+        long available = 0, total = 0;
+        for (OSFileStore fs : fsArray){
+            // windows 需要将所有磁盘分区累加，linux 和 mac 直接累加会出现磁盘重复的问题，待修复
+            if(osName.toLowerCase().startsWith(ElAdminConstant.WIN)) {
+                available += fs.getUsableSpace();
+                total += fs.getTotalSpace();
+            } else {
+                available = fs.getUsableSpace();
+                total = fs.getTotalSpace();
+                break;
+            }
+        }
+        long used = total - available;
+        diskInfo.put("total", total > 0 ? FileUtil.getSize(total) : "?");
+        diskInfo.put("available", FileUtil.getSize(available));
+        diskInfo.put("used", FileUtil.getSize(used));
+        diskInfo.put("usageRate", df.format(used/(double)total * 100));
+        return diskInfo;
+    }
+
+    /**
+     * 获取交换区信息
+     * @param memory /
+     * @return /
+     */
+    private Map<String,Object> getSwapInfo(GlobalMemory memory) {
+        Map<String,Object> swapInfo = new LinkedHashMap<>();
+        VirtualMemory virtualMemory = memory.getVirtualMemory();
+        long total = virtualMemory.getSwapTotal();
+        long used = virtualMemory.getSwapUsed();
+        swapInfo.put("total", FormatUtil.formatBytes(total));
+        swapInfo.put("used", FormatUtil.formatBytes(used));
+        swapInfo.put("available", FormatUtil.formatBytes(total - used));
+        if(used == 0){
+            swapInfo.put("usageRate", 0);
+        } else {
+            swapInfo.put("usageRate", df.format(used/(double)total * 100));
+        }
+        return swapInfo;
+    }
+
+    /**
+     * 获取内存信息
+     * @param memory /
+     * @return /
+     */
+    private Map<String,Object> getMemoryInfo(GlobalMemory memory) {
+        Map<String,Object> memoryInfo = new LinkedHashMap<>();
+        memoryInfo.put("total", FormatUtil.formatBytes(memory.getTotal()));
+        memoryInfo.put("available", FormatUtil.formatBytes(memory.getAvailable()));
+        memoryInfo.put("used", FormatUtil.formatBytes(memory.getTotal() - memory.getAvailable()));
+        memoryInfo.put("usageRate", df.format((memory.getTotal() - memory.getAvailable())/(double)memory.getTotal() * 100));
+        return memoryInfo;
+    }
+
+    /**
+     * 获取Cpu相关信息
+     * @param processor /
+     * @return /
+     */
+    private Map<String,Object> getCpuInfo(CentralProcessor processor) {
+        Map<String,Object> cpuInfo = new LinkedHashMap<>();
+        cpuInfo.put("name", processor.getProcessorIdentifier().getName());
+        cpuInfo.put("package", processor.getPhysicalPackageCount() + "个物理CPU");
+        cpuInfo.put("core", processor.getPhysicalProcessorCount() + "个物理核心");
+        cpuInfo.put("coreNumber", processor.getPhysicalProcessorCount());
+        cpuInfo.put("logic", processor.getLogicalProcessorCount() + "个逻辑CPU");
+        // CPU信息
+        long[] prevTicks = processor.getSystemCpuLoadTicks();
+        // 等待1秒...
+        Util.sleep(1000);
+        long[] ticks = processor.getSystemCpuLoadTicks();
+        long user = ticks[CentralProcessor.TickType.USER.getIndex()] - prevTicks[CentralProcessor.TickType.USER.getIndex()];
+        long nice = ticks[CentralProcessor.TickType.NICE.getIndex()] - prevTicks[CentralProcessor.TickType.NICE.getIndex()];
+        long sys = ticks[CentralProcessor.TickType.SYSTEM.getIndex()] - prevTicks[CentralProcessor.TickType.SYSTEM.getIndex()];
+        long idle = ticks[CentralProcessor.TickType.IDLE.getIndex()] - prevTicks[CentralProcessor.TickType.IDLE.getIndex()];
+        long iowait = ticks[CentralProcessor.TickType.IOWAIT.getIndex()] - prevTicks[CentralProcessor.TickType.IOWAIT.getIndex()];
+        long irq = ticks[CentralProcessor.TickType.IRQ.getIndex()] - prevTicks[CentralProcessor.TickType.IRQ.getIndex()];
+        long softirq = ticks[CentralProcessor.TickType.SOFTIRQ.getIndex()] - prevTicks[CentralProcessor.TickType.SOFTIRQ.getIndex()];
+        long steal = ticks[CentralProcessor.TickType.STEAL.getIndex()] - prevTicks[CentralProcessor.TickType.STEAL.getIndex()];
+        long totalCpu = user + nice + sys + idle + iowait + irq + softirq + steal;
+        cpuInfo.put("used", df.format(100d * user / totalCpu + 100d * sys / totalCpu));
+        cpuInfo.put("idle", df.format(100d * idle / totalCpu));
+        return cpuInfo;
+    }
+
+    /**
+     * 获取系统相关信息,系统、运行天数、系统IP
+     * @param os /
+     * @return /
+     */
+    private Map<String,Object> getSystemInfo(OperatingSystem os){
+        Map<String,Object> systemInfo = new LinkedHashMap<>();
+        // jvm 运行时间
+        long time = ManagementFactory.getRuntimeMXBean().getStartTime();
+        Date date = new Date(time);
+        // 计算项目运行时间 5.4.3:BetweenFormater, 5.7.14改名为BetweenFormatter
+        String formatBetween = DateUtil.formatBetween(date, new Date(), BetweenFormatter.Level.HOUR);
+        // 系统信息
+        systemInfo.put("os", os.toString());
+        systemInfo.put("day", formatBetween);
+        systemInfo.put("ip", StringUtils.getLocalIp());
+        return systemInfo;
+    }
+}

mes/qd/src/assets/images/dark.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" width="48" height="40" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" width="48" height="40" transform="translate(-1190.000000, -136.000000)">
+            <g id="Group-8" width="48" height="40" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5-Copy-5" filter="url(#filter-1)" transform="translate(25.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                    <rect id="Rectangle-18" fill="#303648" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

mes/qd/src/assets/images/light.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="45px" viewBox="0 0 52 45" version="1.1" 
+    xmlns="http://www.w3.org/2000/svg" 
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <filter x="-9.4%" y="-6.2%" width="118.8%" height="122.5%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <rect id="path-2" x="0" y="0" width="48" height="40" rx="4"></rect>
+        <filter x="-4.2%" y="-2.5%" width="108.3%" height="110.0%" filterUnits="objectBoundingBox" id="filter-4">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="配置面板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="setting-copy-2" transform="translate(-1254.000000, -136.000000)">
+            <g id="Group-8" transform="translate(1167.000000, 0.000000)">
+                <g id="Group-5" filter="url(#filter-1)" transform="translate(89.000000, 137.000000)">
+                    <mask id="mask-3" fill="white">
+                        <use xlink:href="#path-2"></use>
+                    </mask>
+                    <g id="Rectangle-18">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-2"></use>
+                        <use fill="#F0F2F5" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    </g>
+                    <rect id="Rectangle-18" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="16" height="40"></rect>
+                    <rect id="Rectangle-11" fill="#FFFFFF" mask="url(#mask-3)" x="0" y="0" width="48" height="10"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

mes/qd/src/components/TopNav/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <el-menu
+    :default-active="activeMenu"
+    mode="horizontal"
+    style="background: #ffffff"
+    @select="handleSelect"
+  >
+    <template v-for="(item, index) in topMenus">
+      <el-menu-item
+        v-if="index < visibleNumber"
+        :key="index"
+        :style="{'--theme': theme}"
+        :index="item.path"
+      ><svg-icon :icon-class="item.meta.icon" />
+        {{ item.meta.title }}</el-menu-item>
+    </template>
+
+    <!-- 顶部菜单超出数量折叠 -->
+    <el-submenu v-if="topMenus.length > visibleNumber" :style="{'--theme': theme}" index="more">
+      <template slot="title">更多菜单</template>
+      <template v-for="(item, index) in topMenus">
+        <el-menu-item
+          v-if="index >= visibleNumber"
+          :key="index"
+          :index="item.path"
+        ><svg-icon :icon-class="item.meta.icon" />
+          {{ item.meta.title }}</el-menu-item>
+      </template>
+    </el-submenu>
+  </el-menu>
+</template>
+
+<script>
+import { constantRouterMap } from '@/router/routers'
+
+export default {
+  data() {
+    return {
+      // 顶部栏初始数
+      visibleNumber: 5,
+      // 是否为首次加载
+      isFrist: false,
+      // 当前激活菜单的 index
+      currentIndex: undefined
+    }
+  },
+  computed: {
+    theme() {
+      return this.$store.state.settings.theme
+    },
+    // 顶部显示菜单
+    topMenus() {
+      const topMenus = []
+      this.routers.map((menu) => {
+        if (menu.hidden !== true) {
+          // 兼容顶部栏一级菜单内部跳转
+          if (menu.path === '/') {
+            topMenus.push(menu.children[0])
+          } else {
+            topMenus.push(menu)
+          }
+        }
+      })
+      return topMenus
+    },
+    // 所有的路由信息
+    routers() {
+      return this.$store.state.permission.topbarRouters
+    },
+    // 设置子路由
+    childrenMenus() {
+      var childrenMenus = []
+      this.routers.map((router) => {
+        for (var item in router.children) {
+          if (router.children[item].parentPath === undefined) {
+            if (router.path === '/') {
+              router.children[item].path = '/redirect/' + router.children[item].path
+            } else {
+              if (!this.ishttp(router.children[item].path)) {
+                router.children[item].path = router.path + '/' + router.children[item].path
+              }
+            }
+            router.children[item].parentPath = router.path
+          }
+          childrenMenus.push(router.children[item])
+        }
+      })
+      return constantRouterMap.concat(childrenMenus)
+    },
+    // 默认激活的菜单
+    activeMenu() {
+      const path = this.$route.path
+      let activePath = this.defaultRouter()
+      if (path.lastIndexOf('/') > 0) {
+        const tmpPath = path.substring(1, path.length)
+        activePath = '/' + tmpPath.substring(0, tmpPath.indexOf('/'))
+      } else if (path === '/index' || path === '') {
+        if (!this.isFrist) {
+          this.isFrist = true
+        } else {
+          activePath = 'index'
+        }
+      }
+      var routes = this.activeRoutes(activePath)
+      if (routes.length === 0) {
+        activePath = this.currentIndex || this.defaultRouter()
+        this.activeRoutes(activePath)
+      }
+      return activePath
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.setVisibleNumber)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.setVisibleNumber)
+  },
+  mounted() {
+    this.setVisibleNumber()
+  },
+  methods: {
+    // 根据宽度计算设置显示栏数
+    setVisibleNumber() {
+      const width = document.body.getBoundingClientRect().width / 3
+      this.visibleNumber = parseInt(width / 85)
+    },
+    // 默认激活的路由
+    defaultRouter() {
+      let router
+      Object.keys(this.routers).some((key) => {
+        if (!this.routers[key].hidden) {
+          router = this.routers[key].path
+          return true
+        }
+      })
+      return router
+    },
+    // 菜单选择事件
+    handleSelect(key, keyPath) {
+      this.currentIndex = key
+      if (this.ishttp(key)) {
+        // http(s):// 路径新窗口打开
+        window.open(key, '_blank')
+      } else if (key.indexOf('/redirect') !== -1) {
+        // /redirect 路径内部打开
+        this.$router.push({ path: key.replace('/redirect', '') })
+      } else {
+        // 显示左侧联动菜单
+        this.activeRoutes(key)
+      }
+    },
+    // 当前激活的路由
+    activeRoutes(key) {
+      var routes = []
+      if (this.childrenMenus && this.childrenMenus.length > 0) {
+        this.childrenMenus.map((item) => {
+          if (key === item.parentPath || (key === 'index' && item.path === '')) {
+            routes.push(item)
+          }
+        })
+      }
+      if (routes.length > 0) {
+        this.$store.commit('SET_SIDEBAR_ROUTERS', routes)
+      }
+      return routes
+    },
+    ishttp(url) {
+      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.topmenu-container.el-menu--horizontal > .el-menu-item {
+  float: left;
+  height: 50px !important;
+  line-height: 50px !important;
+  color: #999093 !important;
+  padding: 0 5px !important;
+  margin: 0 10px !important;
+}
+
+.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  border-bottom: 2px solid #{'var(--theme)'} !important;
+  color: #303133;
+}
+
+/* submenu item */
+.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
+  float: left;
+  height: 50px !important;
+  line-height: 50px !important;
+  color: #999093 !important;
+  padding: 0 5px !important;
+  margin: 0 10px !important;
+}
+</style>

mes/qd/src/layout/components/Navbar.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
-        <el-tooltip content="项目文档" effect="dark" placement="bottom">
+        <!--        <el-tooltip content="项目文档" effect="dark" placement="bottom">
-          <Doc class="right-menu-item hover-effect" />
+                  <Doc class="right-menu-item hover-effect" />
-        </el-tooltip>
+                </el-tooltip>-->
 
         <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -18,16 +18,16 @@
         <notice-icon class="right-menu-item"/>
         <notice-icon-reader ref="noticeIconReader"/>
 
-        <el-tooltip content="布局设置" effect="dark" placement="bottom">
+        <!--        <el-tooltip content="布局设置" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
+                  <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+                </el-tooltip>-->
 
       </template>
-
+      <img :src="Avatar" class="user-avatar">
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
         <div class="avatar-wrapper">
-          <img :src="Avatar" class="user-avatar">
+          <!--          <img :src="Avatar" class="user-avatar" style="border: #f5141e 1px solid">-->
-          <i class="el-icon-caret-bottom" />
+          <span class="user-nickname">{{ user.personName }}</span>
         </div>
         <el-dropdown-menu slot="dropdown">
           <span style="display:block;" @click="show = true">
@@ -55,6 +55,8 @@
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
+import TopNav from '@/components/TopNav'
+
 import Doc from '@/components/Doc'
 import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
@@ -72,7 +74,8 @@ export default {
     Screenfull,
     SizeSelect,
     Search,
-    Doc
+    Doc,
+    TopNav
   },
   data() {
     return {
@@ -97,6 +100,11 @@ export default {
           value: val
         })
       }
+    },
+    topNav: {
+      get() {
+        return this.$store.state.settings.topNav
+      }
     }
   },
   methods: {
@@ -146,6 +154,11 @@ export default {
     float: left;
   }
 
+  .topmenu-container {
+    position: absolute;
+    left: 50px;
+  }
+
   .errLog-container {
     display: inline-block;
     vertical-align: top;
@@ -177,27 +190,22 @@ export default {
         }
       }
     }
+    .user-avatar {
+      cursor: pointer;
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+    }
 
     .avatar-container {
-      margin-right: 30px;
+      //margin-right: 10px;
-
       .avatar-wrapper {
-        margin-top: 5px;
+        //margin-top: 5px;
         position: relative;
-
+        .user-nickname {
-        .user-avatar {
           cursor: pointer;
-          width: 40px;
+          font-size: 18px;
-          height: 40px;
+          margin-left: -10px;
-          border-radius: 10px;
-        }
-
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
         }
       }
     }

mes/qd/src/layout/components/Settings/index.vue

@@ -1,33 +1,94 @@
 <template>
   <div class="drawer-container">
     <div>
-      <h3 class="drawer-title">系统布局设置</h3>
+      <div class="setting-drawer-content">
+        <div class="setting-drawer-title">
+          <h3 class="drawer-title">主题风格设置</h3>
+        </div>
+        <div class="setting-drawer-block-checbox">
+          <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
+            <img src="@/assets/images/dark.svg" alt="dark">
+            <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+              <i aria-label="图标: check" class="anticon anticon-check">
+                <svg
+                  viewBox="64 64 896 896"
+                  data-icon="check"
+                  width="1em"
+                  height="1em"
+                  :fill="theme"
+                  aria-hidden="true"
+                  focusable="false"
+                  class=""
+                >
+                  <path
+                    d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                  />
+                </svg>
+              </i>
+            </div>
+          </div>
+          <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-light')">
+            <img src="@/assets/images/light.svg" alt="light">
+            <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block;">
+              <i aria-label="图标: check" class="anticon anticon-check">
+                <svg
+                  viewBox="64 64 896 896"
+                  data-icon="check"
+                  width="1em"
+                  height="1em"
+                  :fill="theme"
+                  aria-hidden="true"
+                  focusable="false"
+                  class=""
+                >
+                  <path
+                    d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+                  />
+                </svg>
+              </i>
+            </div>
+          </div>
+        </div>
+
+        <div class="drawer-item">
+          <span>主题颜色</span>
+          <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+        </div>
+      </div>
+
+      <el-divider />
+
+      <h3 class="drawer-title">系统布局配置</h3>
 
       <div class="drawer-item">
-        <span>主题颜色</span>
+        <span>开启 TopNav</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
+        <el-switch v-model="topNav" class="drawer-switch" />
       </div>
 
       <div class="drawer-item">
-        <span>显示标签</span>
+        <span>开启 Tags-Views</span>
         <el-switch v-model="tagsView" class="drawer-switch" />
       </div>
 
       <div class="drawer-item">
-        <span>固定头部</span>
+        <span>固定 Header</span>
         <el-switch v-model="fixedHeader" class="drawer-switch" />
       </div>
 
       <div class="drawer-item">
-        <span>显示LOGO</span>
+        <span>显示 Logo</span>
         <el-switch v-model="sidebarLogo" class="drawer-switch" />
       </div>
 
       <div class="drawer-item">
-        <span>菜单UniqueOpened</span>
+        <span>动态标题</span>
-        <el-switch v-model="uniqueOpened" class="drawer-switch" />
+        <el-switch v-model="dynamicTitle" class="drawer-switch" />
       </div>
 
+      <el-divider />
+
+      <el-button size="mini" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>
+      <el-button size="mini" plain icon="el-icon-refresh" @click="resetSetting">重置配置</el-button>
     </div>
   </div>
 </template>
@@ -38,7 +99,10 @@ import ThemePicker from '@/components/ThemePicker'
 export default {
   components: { ThemePicker },
   data() {
-    return {}
+    return {
+      theme: this.$store.state.settings.theme,
+      sideTheme: this.$store.state.settings.sideTheme
+    }
   },
   computed: {
     fixedHeader: {
@@ -52,6 +116,20 @@ export default {
         })
       }
     },
+    topNav: {
+      get() {
+        return this.$store.state.settings.topNav
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'topNav',
+          value: val
+        })
+        if (!val) {
+          this.$store.commit('SET_SIDEBAR_ROUTERS', this.$store.state.permission.defaultRoutes)
+        }
+      }
+    },
     tagsView: {
       get() {
         return this.$store.state.settings.tagsView
@@ -74,13 +152,13 @@ export default {
         })
       }
     },
-    uniqueOpened: {
+    dynamicTitle: {
       get() {
-        return this.$store.state.settings.uniqueOpened
+        return this.$store.state.settings.dynamicTitle
       },
       set(val) {
         this.$store.dispatch('settings/changeSetting', {
-          key: 'uniqueOpened',
+          key: 'dynamicTitle',
           value: val
         })
       }
@@ -92,12 +170,84 @@ export default {
         key: 'theme',
         value: val
       })
+      this.theme = val
+    },
+    handleTheme(val) {
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'sideTheme',
+        value: val
+      })
+      this.sideTheme = val
+    },
+    saveSetting() {
+      this.$modal.loading('正在保存到本地，请稍候...')
+      this.$cache.local.set(
+        'layout-setting',
+        `{
+            "topNav":${this.topNav},
+            "tagsView":${this.tagsView},
+            "fixedHeader":${this.fixedHeader},
+            "sidebarLogo":${this.sidebarLogo},
+            "dynamicTitle":${this.dynamicTitle},
+            "sideTheme":"${this.sideTheme}",
+            "theme":"${this.theme}"
+          }`
+      )
+      setTimeout(this.$modal.closeLoading(), 1000)
+    },
+    resetSetting() {
+      this.$modal.loading('正在清除设置缓存并刷新，请稍候...')
+      this.$cache.local.remove('layout-setting')
+      setTimeout('window.location.reload()', 1000)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.setting-drawer-content {
+  .setting-drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+    font-weight: bold;
+  }
+
+  .setting-drawer-block-checbox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 20px;
+
+    .setting-drawer-block-checbox-item {
+      position: relative;
+      margin-right: 16px;
+      border-radius: 2px;
+      cursor: pointer;
+
+      img {
+        width: 48px;
+        height: 48px;
+      }
+
+      .setting-drawer-block-checbox-selectIcon {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        padding-top: 15px;
+        padding-left: 24px;
+        color: #1890ff;
+        font-weight: 700;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
 .drawer-container {
   padding: 24px;
   font-size: 14px;

mes/qd/src/layout/components/Sidebar/Logo.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title">{{ title }} </h1>
+        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
       </router-link>
     </transition>
   </div>
@@ -15,6 +15,7 @@
 
 <script>
 import Logo from '@/assets/images/logo.png'
+import variables from '@/assets/styles/variables.scss'
 export default {
   name: 'SidebarLogo',
   props: {
@@ -23,11 +24,25 @@ export default {
       required: true
     }
   },
+  computed: {
+    variables() {
+      return variables
+    },
+    sideTheme() {
+      return this.$store.state.settings.sideTheme
+    }
+  },
   data() {
     return {
-      title: '诺力mes系统',
+      title: '诺力mes平台',
-      logo: Logo
+      logo: Logo,
+      title_param: 'platform'
     }
+  },
+  created() {
+    this.getValueByCode(this.title_param).then(res => {
+      this.title = res.value
+    })
   }
 }
 </script>

mes/qd/src/layout/components/Sidebar/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div :class="{'has-logo':showLogo}">
+  <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : '#ffffff' }">
     <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
-        :background-color="variables.menuBg"
+        :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBackground"
-        :text-color="variables.menuText"
+        :text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : variables.menuText"
         :unique-opened="$store.state.settings.uniqueOpened"
         :active-text-color="variables.menuActiveText"
         :collapse-transition="false"
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/assets/styles/variables.scss'
@@ -27,6 +27,7 @@ import variables from '@/assets/styles/variables.scss'
 export default {
   components: { SidebarItem, Logo },
   computed: {
+    ...mapState(['settings']),
     ...mapGetters([
       'sidebarRouters',
       'sidebar'

mes/qd/src/layout/components/TagsView/index.vue

@@ -19,6 +19,8 @@
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">刷新</li>
       <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭</li>
+      <li v-if="!isFirstView()" @click="closeLeftTags()">关闭左侧</li>
+      <li v-if="!isLastView()" @click="closeRightTags">关闭右侧</li>
       <li @click="closeOthersTags">关闭其他</li>
       <li @click="closeAllTags(selectedTag)">关闭全部</li>
     </ul>
@@ -132,7 +134,9 @@ export default {
       })
     },
     closeSelectedTag(view) {
+      // console.log(view)
       this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        // console.log(visitedViews)
         if (this.isActive(view)) {
           this.toLastView(visitedViews, view)
         }
@@ -152,6 +156,30 @@ export default {
         this.toLastView(visitedViews, view)
       })
     },
+    closeLeftTags() {
+      this.$router.push(this.selectedTag)
+      let flag = 0
+      for (let i = (this.$store.state.tagsView.visitedViews.length - 1); i >= 0; i--) {
+        if (this.$store.state.tagsView.visitedViews[i].fullPath === this.selectedTag.fullPath) {
+          flag = 1
+        } else if (flag === 1 && this.$store.state.tagsView.visitedViews[i].fullPath !== '/dashboard') { //
+          this.$store.dispatch('tagsView/delView', this.$store.state.tagsView.visitedViews[i]).then(({ visitedViews }) => {
+          })
+        }
+      }
+    },
+    closeRightTags() {
+      let flag = 1
+      for (let i = (this.$store.state.tagsView.visitedViews.length - 1); i >= 0; i--) {
+        if (this.$store.state.tagsView.visitedViews[i].fullPath === this.selectedTag.fullPath) {
+          flag = 0
+        } else if (flag === 1 && this.$store.state.tagsView.visitedViews[i].fullPath !== '/dashboard') { //
+          this.$store.dispatch('tagsView/delView', this.$store.state.tagsView.visitedViews[i]).then(({ visitedViews }) => {
+          })
+        }
+      }
+      this.$router.push(this.selectedTag)
+    },
     toLastView(visitedViews, view) {
       const latestView = visitedViews.slice(-1)[0]
       if (latestView) {
@@ -186,6 +214,20 @@ export default {
     },
     closeMenu() {
       this.visible = false
+    },
+    isFirstView() {
+      try {
+        return this.selectedTag.fullPath === this.visitedViews[1].fullPath || this.selectedTag.fullPath === '/dashboard'
+      } catch (err) {
+        return false
+      }
+    },
+    isLastView() {
+      try {
+        return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath
+      } catch (err) {
+        return false
+      }
     }
   }
 }

mes/qd/src/router/routers.js

@@ -45,7 +45,7 @@ export const constantRouterMap = [
     children: [
       {
         path: 'dashboard',
-        component: (resolve) => require(['@/views/home'], resolve),
+        component: (resolve) => require(['@/views/monitor/server/index'], resolve),
         name: 'Dashboard',
         meta: { title: '首页', icon: 'index', affix: true, noCache: true }
       }

mes/qd/src/settings.js

@@ -1,4 +1,18 @@
 module.exports = {
+  /**
+   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
+   */
+  sideTheme: 'theme-dark',
+
+  /**
+   * 是否系统布局配置
+   */
+  showSettings: false,
+
+  /**
+   * 是否显示顶部导航
+   */
+  topNav: false,
   /**
    * @description 网站标题
    */

mes/qd/src/store/modules/permission.js

@@ -6,6 +6,7 @@ const permission = {
   state: {
     routers: constantRouterMap,
     addRouters: [],
+    topbarRouters: [],
     sidebarRouters: []
   },
   mutations: {
@@ -13,6 +14,14 @@ const permission = {
       state.addRouters = routers
       state.routers = constantRouterMap.concat(routers)
     },
+    SET_TOPBAR_ROUTES: (state, routes) => {
+      // 顶部导航菜单默认添加统计报表栏指向首页
+      const index = [{
+        path: 'index',
+        meta: { title: '统计报表', icon: 'dashboard' }
+      }]
+      state.topbarRouters = routes.concat(index)
+    },
     SET_SIDEBAR_ROUTERS: (state, routers) => {
       state.sidebarRouters = constantRouterMap.concat(routers)
     }
@@ -22,6 +31,7 @@ const permission = {
       commit('SET_ROUTERS', asyncRouter)
     },
     SetSidebarRouters({ commit }, sidebarRouter) {
+      commit('SET_TOPBAR_ROUTES', sidebarRouter)
       commit('SET_SIDEBAR_ROUTERS', sidebarRouter)
     }
   }

mes/qd/src/store/modules/settings.js

@@ -1,10 +1,15 @@
-import variables from '@/assets/styles/element-variables.scss'
 import defaultSettings from '@/settings'
-const { tagsView, fixedHeader, sidebarLogo, uniqueOpened, showFooter, footerTxt, caseNumber } = defaultSettings
 
+const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, uniqueOpened, showFooter, footerTxt, caseNumber } = defaultSettings
+
+// const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
+const storageSetting = JSON.stringify(localStorage.getItem('layout-setting')) || ''
 const state = {
-  theme: variables.theme,
+  title: '',
-  showSettings: false,
+  theme: storageSetting.theme || '#409EFF',
+  sideTheme: storageSetting.sideTheme || sideTheme,
+  showSettings: showSettings,
+  topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
   tagsView: tagsView,
   fixedHeader: fixedHeader,
   sidebarLogo: sidebarLogo,
@@ -12,6 +17,7 @@ const state = {
   showFooter: showFooter,
   footerTxt: footerTxt,
   caseNumber: caseNumber
+
 }
 
 const mutations = {
@@ -25,6 +31,10 @@ const mutations = {
 const actions = {
   changeSetting({ commit }, data) {
     commit('CHANGE_SETTING', data)
+  },
+  // 设置网页标题
+  setTitle({ commit }, title) {
+    state.title = title
   }
 }
 

mes/qd/src/views/system/notice/NoticeIcon.vue

@@ -7,7 +7,7 @@
     <div style="margin: 5px" v-loading="loading">
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane :label="d.label" :name="d.value" v-for="d in dict.notice_type" :key="d.id">
-<!--          <el-empty v-show="notReadMsgList[d.value-1].length == 0" description="暂无信息" ></el-empty>-->
+          <el-empty v-show="notReadMsgList[d.value-1].length == 0" description="暂无信息" :image-size="40"></el-empty>
           <div v-for="o in notReadMsgList[d.value-1]" :key="o.notice_id">
             <a href="javascript:" @click="showMessage(o)">
               <el-row @click="showMessage">
@@ -96,7 +96,7 @@ export default {
      */
     toSiteMessage() {
       this.$router.push({
-        path: '/monitor/notice'
+        path: '/sys-tools/notice'
       })
       this.visible = false
     },