1、前端预警提示内容以及单个预警处理实现

ruoyi-ui/src/api/business/warning/apiwarning.js

@@ -35,3 +35,11 @@ export function listApiwarning(query) {
     params: query
   })
 }
+
+// 处理单个预警
+export function handleWarning(id) {
+  return request({
+    url: '/warning/apiwarning/handle/'+id,
+    method: 'put',
+  })
+}

ruoyi-ui/src/layout/components/Navbar.vue

@@ -8,10 +8,26 @@
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
 
     <div class="right-menu">
+
       <el-badge :value="warnData.count" class=" hover-effect share-button">
-        <el-button type="warning" icon="el-icon-check" circle style="max-width: 22px;max-height: 22px;"></el-button>
+        <el-popover
+          placement="bottom"
+          width="220"
+          v-model="visible">
+          <p>{{ append() }}</p>
+          <div style="text-align: right; margin: 0">
+            <el-button type="primary" size="mini" @click="haveRead">已读</el-button>
+          </div>
+          <el-button type="warning" icon="el-icon-check"
+                     circle style="max-width: 22px;max-height: 22px;"
+                     @click=""
+                     slot="reference"
+          ></el-button>
+        </el-popover>
+
       </el-badge>
 
+
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item"/>
 
@@ -24,7 +40,6 @@
       </template>
 
 
-
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar">
@@ -56,6 +71,8 @@ import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 import RuoYiGit from '@/components/RuoYi/Git'
 import RuoYiDoc from '@/components/RuoYi/Doc'
+import {handleWarning} from "@/api/business/warning/apiwarning";
+
 
 export default {
   components: {
@@ -72,6 +89,8 @@ export default {
   data() {
     return {
       warnData: {},
+
+      visible: false,
     }
   },
 
@@ -108,6 +127,38 @@ export default {
   },
 
   methods: {
+
+    //已读操作
+    haveRead() {
+      this.visible = false
+      if (this.warnData) {
+        let str = this.warnData.data;
+        if (str) {
+          var json = eval("(" + str + ")");
+          if (json.id !== undefined) {
+            handleWarning(json.id).then(res => {
+              this.$modal.msgSuccess("处理成功");
+              this.warnData.data= "{}"
+            });
+          }
+        }
+      }
+
+
+    },
+
+    append() {
+      let str = this.warnData.data;
+      if (str != null) {
+        var json = eval("(" + str + ")");
+        if (json.apiName !== undefined && json.warningMessage !== undefined) {
+          let data = json.apiName + "-" + json.warningMessage;
+          this.visible = true
+          return data
+        }
+      }
+    },
+
     getData(data) {
       if (data) {
         this.warnData = data

ruoyi-ui/src/views/business/warning/apiwarning/index.vue

@@ -54,7 +54,7 @@
       <el-table-column label="预警时间" align="center" prop="createTime" width="180"/>
       <el-table-column label="是否处理" align="center" prop="handle" width="100px">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.handle==='1'?'success':'danger'" size="small">
+          <el-tag :type="scope.row.handle===1?'success':'danger'" size="small">
             {{ scope.row.handle === 1 ? '是' : '否' }}
           </el-tag>
         </template>

xjs-business/xjs-business-warning/src/main/java/com/xjs/controller/ApiWarningController.java

@@ -25,6 +25,8 @@ import java.util.List;
 import java.util.Objects;
 import java.util.Set;
 
+import static com.xjs.consts.ApiWarnHandleConst.NO;
+import static com.xjs.consts.ApiWarnHandleConst.YES;
 import static com.xjs.consts.RedisConst.WEBSOCKET;
 
 /**
@@ -75,6 +77,20 @@ public class ApiWarningController extends BaseController {
         return R.ok(apiRecords);
     }
 
+    /**
+     * 处理预警单个预警
+     * @param id 预警id
+     * @return R
+     */
+    @PutMapping("handle/{id}")
+    //@RequiresPermissions("warning:apiwarning:list")
+    public R<Object> handleWarning(@PathVariable("id") Long id) {
+        ApiWarning apiWarning = new ApiWarning();
+        apiWarning.setId(id);
+        apiWarning.setHandle(YES);
+        return apiWarningService.updateById(apiWarning)?R.ok():R.fail();
+    }
+
     /**
      * 远程保存api预警信息并websocket推送
      *
@@ -95,10 +111,12 @@ public class ApiWarningController extends BaseController {
      *  websocket推送
      */
     private void websocketPush(ApiWarning apiWarning) {
-        long count = apiWarningService.count();
+        long count = apiWarningService.count(new QueryWrapper<ApiWarning>().eq("handle",NO));
         Set<String> cacheSet = redisService.getCacheSet(WEBSOCKET);
         JSONObject jsonData =new JSONObject();
         JSONObject jsonObject = (JSONObject) JSONObject.toJSON(apiWarning);
+        //把id设置成字符串防止前端精度丢失
+        jsonObject.put("id", apiWarning.getId().toString());
         jsonData.put("count", count);
         jsonData.put("data", jsonObject.toJSONString());
         jsonData.put("socketType", "apiWarning");

xjs-business/xjs-business-warning/src/main/java/com/xjs/server/WebSocketServer.java

@@ -1,7 +1,9 @@
 package com.xjs.server;
 
 import com.alibaba.fastjson.JSONObject;
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.ruoyi.common.redis.service.RedisService;
+import com.xjs.domain.ApiWarning;
 import com.xjs.service.ApiWarningService;
 import lombok.extern.log4j.Log4j2;
 import org.apache.commons.lang3.StringUtils;
@@ -16,6 +18,7 @@ import java.util.HashSet;
 import java.util.Set;
 import java.util.concurrent.ConcurrentHashMap;
 
+import static com.xjs.consts.ApiWarnHandleConst.NO;
 import static com.xjs.consts.RedisConst.WEBSOCKET;
 
 /**
@@ -84,7 +87,7 @@ public class WebSocketServer {
         set.add(userId);
         redisService.setCacheSet(WEBSOCKET, set);
 
-        long count = apiWarningService.count();
+        long count = apiWarningService.count(new QueryWrapper<ApiWarning>().eq("handle",NO));
         JSONObject jsonData =new JSONObject();
         jsonData.put("count", count);
         jsonData.put("socketType", "apiWarning");