fix：webscoket连接，修改信息中心

src/api/xj/inspection/center.js

@@ -0,0 +1,34 @@
+/*
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-11-28 10:26:24
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-11-28 10:26:24
+ * @FilePath: \znxjxt-ui\src\api\xj\inspection\center.js
+ * @Description: 巡检中心-预警中心接口
+ */
+import request from "@/utils/request";
+
+// 获取预警中心列表
+export function getWarningList(query) {
+  return request({
+    url: "/notice/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 获取预警中心导航栏
+export function getWarningNav() {
+  return request({
+    url: "/notice/unreadCount",
+    method: "get",
+  });
+}
+
+// 根据id标记通知为已读
+export function markNoticeRead(id) {
+  return request({
+    url: `/notice/read/${id}`,
+    method: "post",
+  });
+}

src/main.js

@@ -1,72 +1,83 @@
-import Vue from 'vue'
+import Vue from "vue";
 
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
-import Element from 'element-ui'
+import Element from "element-ui";
-import './assets/styles/element-variables.scss'
+import "./assets/styles/element-variables.scss";
 
-import '@/assets/styles/index.scss' // global css
+import "@/assets/styles/index.scss"; // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
+import "@/assets/styles/ruoyi.scss"; // ruoyi css
-import App from './App'
+import App from "./App";
-import store from './store'
+import store from "./store";
-import router from './router'
+import router from "./router";
-import directive from './directive' // directive
+import directive from "./directive"; // directive
-import plugins from './plugins' // plugins
+import plugins from "./plugins"; // plugins
-import { download } from '@/utils/request'
+import { download } from "@/utils/request";
 
-import './assets/icons' // icon
+import "./assets/icons"; // icon
-import './permission' // permission control
+import "./permission"; // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+import {
+  parseTime,
+  resetForm,
+  addDateRange,
+  selectDictLabel,
+  selectDictLabels,
+  handleTree,
+} from "@/utils/ruoyi";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from "@/components/RightToolbar";
 // 富文本组件
-import Editor from "@/components/Editor"
+import Editor from "@/components/Editor";
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from "@/components/ImageUpload";
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from "@/components/ImagePreview";
 // 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from "@/components/DictTag";
 // 头部标签组件
-import VueMeta from 'vue-meta'
+import VueMeta from "vue-meta";
 // 字典数据组件
-import DictData from '@/components/DictData'
+import DictData from "@/components/DictData";
+import { getToken } from "@/utils/auth.js";
 //工作流
 
-import Tinymce from '@/components/tinymce/index.vue'
+import Tinymce from "@/components/tinymce/index.vue";
-import "./assets/text/font.css"
+import "./assets/text/font.css";
 
+import WebSocketService from "@/plugins/websocket";
+const wsService = new WebSocketService();
 // 全局方法挂载
-Vue.prototype.getDicts = getDicts
+Vue.prototype.getDicts = getDicts;
-Vue.prototype.getConfigKey = getConfigKey
+Vue.prototype.getConfigKey = getConfigKey;
-Vue.prototype.parseTime = parseTime
+Vue.prototype.parseTime = parseTime;
-Vue.prototype.resetForm = resetForm
+Vue.prototype.resetForm = resetForm;
-Vue.prototype.addDateRange = addDateRange
+Vue.prototype.addDateRange = addDateRange;
-Vue.prototype.selectDictLabel = selectDictLabel
+Vue.prototype.selectDictLabel = selectDictLabel;
-Vue.prototype.selectDictLabels = selectDictLabels
+Vue.prototype.selectDictLabels = selectDictLabels;
-Vue.prototype.download = download
+Vue.prototype.download = download;
-Vue.prototype.handleTree = handleTree
+Vue.prototype.handleTree = handleTree;
+Vue.prototype.$ws = wsService;
 
 // 全局组件挂载
-Vue.component('DictTag', DictTag)
+Vue.component("DictTag", DictTag);
-Vue.component('Pagination', Pagination)
+Vue.component("Pagination", Pagination);
-Vue.component('RightToolbar', RightToolbar)
+Vue.component("RightToolbar", RightToolbar);
-Vue.component('Editor', Editor)
+Vue.component("Editor", Editor);
-Vue.component('FileUpload', FileUpload)
+Vue.component("FileUpload", FileUpload);
-Vue.component('ImageUpload', ImageUpload)
+Vue.component("ImageUpload", ImageUpload);
-Vue.component('ImagePreview', ImagePreview)
+Vue.component("ImagePreview", ImagePreview);
-Vue.component('tinymce',Tinymce)
+Vue.component("tinymce", Tinymce);
 
-Vue.use(directive)
+Vue.use(directive);
-Vue.use(plugins)
+Vue.use(plugins);
-Vue.use(VueMeta)
+Vue.use(VueMeta);
-DictData.install()
+DictData.install();
 
 /**
  * If you don't want to use mock-server
@@ -78,14 +89,24 @@ DictData.install()
  */
 
 Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
+  size: Cookies.get("size") || "medium", // set element-ui default size
-})
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
-  render: h => h(App)
+  render: (h) => h(App),
-})
+});
+// 确保WebSocket连接在获取到token时建立
+store.watch(
+  () => store.getters.token,
+  (newToken) => {
+    if (newToken) {
+      wsService.connect(`ws://192.168.1.188:8080/websocket?token=${newToken}`);
+    }
+  },
+  { immediate: true }
+);

src/plugins/websocket.js

@@ -1,229 +1,61 @@
-/*
+// WebSocketService.js
- * @Author: SunTao 328867980@qq.com
+class WebSocketService {
- * @Date: 2024-11-13 17:13:54
+  constructor() {
- * @LastEditors: SunTao 328867980@qq.com
+    this.ws = null;
- * @LastEditTime: 2024-11-13 17:14:13
+    this.reconnectInterval = 3000;
- * @FilePath: \znxjxt-ui\src\plugins\websocket.js
+    this.eventListeners = {};
- * @Description: websocket传输
- */
-
-// websocket实例
-let wsObj = null;
-// ws连接地址
-let wsUrl = null;
-// let userId = null;
-// 是否执行重连 true/不执行 ； false/执行
-let lockReconnect = false;
-// 重连定时器
-let wsCreateHandler = null;
-// 连接成功，执行回调函数
-let messageCallback = null;
-// 连接失败，执行回调函数
-let errorCallback = null;
-// 发送给后台的数据
-let sendDatas = {};
- 
-/**
- * 发起websocket请求函数
- * @param {string} url ws连接地址
- * @param {Object} agentData 传给后台的参数
- * @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
- * @param {function} errCallback ws连接错误的回调函数
- */
-export const connectWebsocket = (url, agentData, successCallback, errCallback) => {
-  wsUrl = url;
-  createWebSoket();
-  messageCallback = successCallback;
-  errorCallback = errCallback;
-  sendDatas = agentData;
-};
- 
-// 手动关闭websocket （这里手动关闭会执行onclose事件）
-export const closeWebsocket = () => {
-  if (wsObj) {
-    writeToScreen("手动关闭websocket");
-    wsObj.close(); // 关闭websocket
-    // wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
-    // 关闭重连
-    lockReconnect = true;
-    wsCreateHandler && clearTimeout(wsCreateHandler);
-    // 关闭心跳检查
-    heartCheck.stop();
-  }
-};
- 
-//向服务器端发送消息
-export const sendMsg = value => {
-  wsObj.send(JSON.stringify(value));
-};
- 
-// 创建ws函数
-const createWebSoket = () => {
-  //判断浏览器是否支持websocket
-  if (typeof WebSocket === "undefined") {
-    writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
-    return false;
   }
 
-  // const host = window.location.host; //获取端口
+  connect(url) {
-  // userId = GetQueryString("userId");
+    this.ws = new WebSocket(url);
-  // wsUrl = "ws://" + host + "/websoket" + userId;
 
-  try {
+    this.ws.onopen = () => {
-    wsObj = new WebSocket(wsUrl);
+      console.log('WebSocket connected');
-    initWsEventHandle();
+      this.emit('open');
-  } catch (e) {
+    };
-    writeToScreen("连接异常，开始重连");
+
-    reconnect();
+    this.ws.onmessage = (event) => {
+      this.emit('message', JSON.parse(event.data));
+    };
+
+    this.ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+      this.emit('error', error);
+    };
+
+    this.ws.onclose = () => {
+      console.log('WebSocket closed');
+      this.emit('close');
+      setTimeout(() => this.connect(url), this.reconnectInterval);
+    };
   }
-};
 
- 
+  send(data) {
-const initWsEventHandle = () => {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-  try {
+      this.ws.send(JSON.stringify(data));
-    // 连接成功
+    } else {
-    wsObj.onopen = event => {
+      console.error('WebSocket is not connected');
-    //   heartCheck.start(); //开启心跳
-      onWsOpen(event); //客户端与服务器端通信
-    };
- 
-    // 监听服务器端返回的信息
-    wsObj.onmessage = event => {
-      onWsMessage(event); //接收数据，抛出
-    //   heartCheck.reset(); //重置心跳
-    };
- 
-    wsObj.onclose = event => {
-      writeToScreen("onclose执行关闭事件");
-      onWsClose(event); //关闭事件
-    };
- 
-    wsObj.onerror = event => {
-      writeToScreen("onerror执行error事件，开始重连");
-      onWsError(event); //error事件
-      reconnect(); //重连
-    };
-  } catch (err) {
-    writeToScreen("绑定事件没有成功，开始重连");
-    reconnect();
     }
-};
- 
-//open事件 WebSocket连接成功时触发
-const onWsOpen = event => {
-  //  客户端与服务器端通信
-  // wsObj.send('我发送消息给服务端');
-  // 添加状态判断，当为OPEN时，发送消息
-  if (wsObj.readyState === wsObj.OPEN) {
-    // wsObj.OPEN = 1
-    // 发给后端的数据需要字符串化
-    wsObj.send(JSON.stringify(sendDatas));
   }
-  if (wsObj.readyState === wsObj.CLOSED) {
+
-    // wsObj.CLOSED = 3
+  on(event, callback) {
-    writeToScreen("wsObj.readyState=3, ws连接异常，开始重连");
+    if (!this.eventListeners[event]) {
-    reconnect();
+      this.eventListeners[event] = [];
-    errorCallback(event);
     }
-};
+    this.eventListeners[event].push(callback);
- 
-//message事件  接收到WebSocket服务器发送的消息时触发
-const onWsMessage = event => {
-  const jsonStr = event.data;
-  // writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
-  messageCallback(jsonStr);
-};
- 
-//close事件 WebSocket连接关闭时触发
-const onWsClose = event => {
-  writeToScreen("DISCONNECT");
-  // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
-  // e.code !== 1000  表示非正常关闭。
-  console.log("onclose event: ", event);
-  if (event && event.code !== 1000) {
-    writeToScreen("非正常关闭");
-    errorCallback(event);
-    // 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
-    reconnect();
   }
-};
 
-//error事件 WebSocket连接出错时触发
+  emit(event, data) {
-const onWsError = event => {
+    if (this.eventListeners[event]) {
-  writeToScreen("onWsError: ", event.data);
+      this.eventListeners[event].forEach(callback => callback(data));
-  errorCallback(event);//抛出错误
-};
- 
-//封装console.log()
-const writeToScreen = massage => {
-  console.log(massage);
-};
- 
-// 重连函数
-const reconnect = () => {
-  if (lockReconnect) {
-    return;
     }
-  writeToScreen("3秒后重连");
-  lockReconnect = true;
-  // 没连接上会一直重连，设置延迟避免请求过多
-  wsCreateHandler && clearTimeout(wsCreateHandler);
-  wsCreateHandler = setTimeout(() => {
-    writeToScreen("重连..." + wsUrl);
-    createWebSoket();
-    lockReconnect = false;
-    writeToScreen("重连完成");
-  }, 5000);
-};
- 
-// 从浏览器地址中获取对应参数
-const GetQueryString = name => {
-  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
-  // 获取url中 ? 符后的字符串并正则匹配
-  let r = window.location.search.substr(1).match(reg);
-  let context = "";
-  r && (context = r[2]);
-  reg = null;
-  r = null;
-  return context;
-};
- 
-// 心跳检查（看看websocket是否还在正常连接中）
-let heartCheck = {
-  timeout: 15 * 1000,
-  timeoutObj: null,
-  serverTimeoutObj: null,
-  // 重启
-  reset() {
-    clearTimeout(this.timeoutObj);
-    clearTimeout(this.serverTimeoutObj);
-    this.start();
-  },
-  // 停止
-  stop() {
-    clearTimeout(this.timeoutObj);
-    clearTimeout(this.serverTimeoutObj);
-  },
-  // 开启定时器
-  start() {
-    this.timeoutObj && clearTimeout(this.timeoutObj);
-    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
-    // 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
-    this.timeoutObj = setTimeout(() => {
-      writeToScreen("心跳检查，发送ping到后台");
-      try {
-        const datas = { content: "心跳检测" };
-        wsObj.send(JSON.stringify(datas));
-      } catch (err) {
-        writeToScreen("发送ping异常,重连");
-        reconnect();
   }
-      // console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
+
-      // 内嵌定时器
+  close() {
-      this.serverTimeoutObj = setTimeout(() => {
+    if (this.ws) {
-        writeToScreen("没有收到后台的数据，重新连接");
+      this.ws.close();
-        reconnect();
+    }
-      }, this.timeout);
+  }
-    }, this.timeout);
+}
-  },
+
-};
+export default WebSocketService;

src/views/big-screen/index.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-17 11:34:00
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-21 09:12:52
+ * @LastEditTime: 2024-11-29 15:31:24
  * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
  * @Description: 大屏首页
 -->
@@ -508,9 +508,20 @@ export default {
     this.getRoadList();
     this.getDieaseTypeList();
     this.getMessageList();
-    // this.initWebSocket();
+    this.handleMessage();
   },
+  mounted() {},
   methods: {
+    /**
+     * @description: 处理websocket消息
+     * @return {*}
+     */
+    handleMessage() {
+      this.$ws.on("message", (data) => {
+        console.log("收到xxxxxxxx消息:", data);
+      });
+    },
+
     /**
      * @description: 获取当前时间
      * @return {*}
@@ -1098,6 +1109,9 @@ export default {
               class: "twe",
             },
           ];
+          // 不接收小车位置消息
+          const data = { type: "carLocation", status: false };
+          this.$ws.send(data);
           // 地图右上角多选按钮隐藏
           this.showIconList = false;
           // 图层恢复
@@ -1141,6 +1155,10 @@ export default {
               class: "twe",
             },
           ];
+          // 发送小车位置消息
+          const data = { type: "carLocation", status: true };
+          this.$ws.send(data);
+          // 将地图层级初始化
           this.$nextTick(() => {
             const map = this.$refs.roadMap.instance.get("map");
             map.getView().setZoom(10);
@@ -1191,6 +1209,9 @@ export default {
               class: "one",
             },
           ];
+          // 发送小车位置消息
+          const data = { type: "carLocation", status: true };
+          this.$ws.send(data);
           // 地图右上角多选按钮隐藏
           this.showIconList = false;
           // 图层恢复
@@ -1202,11 +1223,6 @@ export default {
             map.getView().setZoom(10);
             map.getView().setCenter([123.30297096718999, 41.87942945541742]);
           });
-          // 地图右上角多选按钮显示
-          // this.getIconType();
-          // this.showIconList = true;
-          // 进行地图打点
-          // this.getCenterPiont();
           this.getLinePoint();
         }
       }
@@ -1272,39 +1288,10 @@ export default {
         boxSizing: "border-box",
       };
     },
-
-    /**
-     * @description: 初始化websocket
-     * @return {void} 
-     */
-    initWebSocket() {
-      const url = `ws://192.168.1.188:8080/websocket?token=${getToken()}`;
-      const data = { type: "carLocation", status: true };
-      connectWebsocket(
-        url,
-        data,
-        (res) => {
-          // console.log("onWsMessage接收到服务器的数据: ", res);
-          console.log(JSON.parse(res));
-        },
-        (err) => {
-          console.log("断开重连");
-        }
-      );
-    },
-
-    /**
-     * @description: 发送消息
-     * @return {void} 
-     */
-    sendMsg() {
-      sendMsg(5555); //value是发送的值
-      // this.value = "";
-    },
   },
   beforeDestroy() {
     clearInterval(this.timeFlag);
-    closeWebsocket();
+    this.$ws.close();
   },
 };
 </script>

src/views/xj/inspection-warn/warning-center/index.vue

@@ -17,17 +17,10 @@
       :inline="true"
       label-width="5rem"
     >
-      <el-form-item label="车牌号" prop="carNo">
+      <el-form-item label="消息类型" prop="type">
-        <el-input
-          v-model="warnForm.carNo"
-          placeholder="请输入车牌号"
-          clearable
-        />
-      </el-form-item>
-      <el-form-item label="设备ID" prop="deviceId">
         <el-select
-          v-model="warnForm.deviceId"
+          v-model="warnForm.type"
-          placeholder="请选择校验状态"
+          placeholder="请选择消息类型"
           filterable
           clearable
         >
@@ -42,17 +35,17 @@
       <el-form-item label="时间" prop="dateTime">
         <el-date-picker
           v-model="dateTime"
-          type="daterange"
+          type="datetimerange"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
-          format="yyyy-MM-dd"
+          format="yyyy-MM-dd HH:mm:ss"
-          value-format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd HH:mm:ss"
           clearable
         />
       </el-form-item>
-      <el-form-item label="阅读状态" prop="readStatus">
+      <el-form-item label="阅读状态" prop="read">
         <el-select
-          v-model="warnForm.readStatus"
+          v-model="warnForm.read"
           placeholder="请选择阅读状态"
           clearable
         >
@@ -108,27 +101,27 @@
         v-for="(item, index) in editableTabs"
         :key="`tabs-${index}`"
         :label="item.title"
-        :name="item.value"
+        :name="item.code"
       >
         <!-- 标签页头 -->
         <span slot="label"
           ><i
-            v-if="item.status === '1'"
+            v-if="item.title === '成功'"
             style="color: #67c23a"
             class="el-icon-success"
           ></i>
           <i
-            v-if="item.status === '2'"
+            v-if="item.title === '提醒'"
             style="color: #e6a23c"
             class="el-icon-info"
           ></i>
           <i
-            v-if="item.status === '3'"
+            v-if="item.title === '告警'"
             style="color: #909399"
             class="el-icon-warning"
           ></i>
           <i
-            v-if="item.status === '4'"
+            v-if="item.title === '错误'"
             style="color: #f56c6c"
             class="el-icon-error"
           ></i
@@ -146,23 +139,33 @@
           <el-table-column type="selection" width="55" align="center" />
 
           <el-table-column
-            width="200"
+            width="180"
             label="时间"
             align="center"
-            prop="segmentName"
+            prop="createdTime"
           >
             <template slot-scope="scope">
-              <span class="table-index">asd</span>
+              <span
-              {{ scope.row.segmentName }}
+                :class="`${scope.row.readStatus === 1 ? 'table-index' : ''}`"
+                >{{ scope.row.createdTime }}</span
+              >
             </template>
           </el-table-column>
           <el-table-column
-            label="消息内容"
+            show-overflow-tooltip
+            label="消息标题"
+            width="150"
             align="center"
-            prop="stakeStart"
+            prop="title"
-          />
+          >
-          <el-table-column label="车牌号" align="center" prop="stakeEnd" />
+          </el-table-column>
-          <el-table-column label="设备id" align="center" prop="stakeEnd" />
+          <el-table-column
+            show-overflow-tooltip
+            label="消息内容"
+            align="left"
+            prop="content"
+          >
+          </el-table-column>
         </el-table>
         <!-- 分页组件 -->
         <div class="pagination-part">
@@ -184,18 +187,21 @@
 </template>
 
 <script>
+import {
+  getWarningList,
+  getWarningNav,
+  markNoticeRead,
+} from "@/api/xj/inspection/center";
 export default {
   name: "WarningCenter",
   data() {
     return {
       // 查询表单绑定
       warnForm: {
-        // 车牌号
-        carNo: "",
         // 设备id
-        deviceId: "",
+        type: "",
         // 阅读状态
-        readStatus: "",
+        read: "",
       },
       // 设备列表
       deviceList: [],
@@ -203,18 +209,13 @@ export default {
       dateTime: [],
       // 阅读状态列表
       readStatusList: [
-        { label: "已读", value: "1" },
+        { label: "已读", value: 2 },
-        { label: "未读", value: "2" },
+        { label: "未读", value: 1 },
       ],
       // 导航栏选择绑定
-      activeName: "1",
+      activeName: "WARNING",
       // 导航栏列表
-      editableTabs: [
+      editableTabs: [],
-        { title: "成功", value: "1", count: 10, status: "1" },
-        { title: "提醒", value: "2", count: 10, status: "2" },
-        { title: "告警", value: "3", count: 10, status: "3" },
-        { title: "错误", value: "4", count: 10, status: "4" },
-      ],
       // 预警列表
       warningList: [],
       // 列表勾选数据
@@ -244,9 +245,22 @@ export default {
     },
   },
   created() {
+    this.getNav();
     this.getList();
   },
   methods: {
+    /**
+     * @description: 获取导航栏数据
+     * @return {*}
+     */
+    getNav() {
+      getWarningNav().then(({ code, data }) => {
+        if (code === 200) {
+          this.editableTabs = data;
+        }
+      });
+    },
+
     /**
      * @description: 点击搜索事件
      * @return {*}
@@ -262,12 +276,10 @@ export default {
      */
     resetQuery() {
       this.warnForm = {
-        // 车牌号
-        carNo: "",
         // 设备id
-        deviceId: "",
+        type: "",
         // 阅读状态
-        readStatus: "",
+        read: "",
       };
       this.dateTime = [];
       this.getList();
@@ -291,14 +303,20 @@ export default {
       const data = {
         ...this.pagination,
         ...this.warnForm,
-        activeName: this.activeName,
+        notificationType: this.activeName,
         startTime: this.dateTime ? this.dateTime[0] : "",
         endTime: this.dateTime ? this.dateTime[1] : "",
       };
-      setTimeout(() => {
+      getWarningList(data)
-        this.warningList = [{id:"1", segmentName: "sSSSSSS" }];
+        .then(({ code, rows, total }) => {
+          if (code === 200) {
+            this.warningList = rows;
+            this.tableTotal = total;
+          }
+        })
+        .finally(() => {
           this.loading = false;
-      }, 100);
+        });
     },
 
     /**
@@ -308,9 +326,12 @@ export default {
      */
     handleTableChange(val) {
       if (val) {
-        console.log(val, "ddd");
+        markNoticeRead(val.id).then(({ code }) => {
+          if (code === 200) {
             this.getList();
           }
+        });
+      }
     },
 
     /**
@@ -382,6 +403,7 @@ export default {
   width: 100%;
   height: calc(100vh - 5.4rem);
   padding: 1rem;
+  overflow-y: auto;
 }
 
 .el-table {

vue.config.js

@@ -35,8 +35,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://192.168.1.188:8080`,
+        target: `http://192.168.1.188:8080`,
-        target: `http://localhost:8080`,
+        // target: `http://localhost:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''