日志添加socket

public/config.js

@@ -1,7 +1,7 @@
 var PLATFROM_CONFIG = {};
 // PLATFROM_CONFIG.baseUrl = "http://106.14.243.117:9001/"
 PLATFROM_CONFIG.baseUrl = "https://authgateway.fsjtkj.cn/" // http请求地址
-PLATFROM_CONFIG.socketUrl = "ws://192.168.3.239:8998/websocket" // websocket请求地址
+PLATFROM_CONFIG.socketUrl = "wss://192.168.3.239:8998/websocket" // websocket请求地址
 PLATFROM_CONFIG.appSecret = "40t7vcbi5bc1twyihd2dum82yn1mt1kj" //appSecret
 PLATFROM_CONFIG.appId = "unsk1w37910olf8j" //appid
 // does job show yes/no 显示/不显示职务

src/App.vue

@@ -159,8 +159,8 @@ export default {
       if (oldViews) {
         this.handleInit();
       }
-      // wsSocketClose()
-      // wsSocket()
+      wsSocketClose();
+      wsSocket();
     },
     /**
      * @description: 定时器方法

src/store/modules/app.js

@@ -62,7 +62,7 @@ const mutations = {
     Cookies.set('errorNum', systemSet)
   },
   WS_DATA: (state, data) => {
-    state.wsData = data
+    state.wsData.unshift(data)
   },
 }
 

src/utils/socket.js

@@ -1,6 +1,6 @@
 import store from '@/store'
 let ws = null
-
+let nums = 0
 export function wsSocket () {
 
   ws = new WebSocket(`${PLATFROM_CONFIG.socketUrl}`)
@@ -11,8 +11,8 @@ export function wsSocket () {
 
   ws.onmessage = function (res) {
     const datas = JSON.parse(res.data)
+    datas['isSocket'] = true
     store.dispatch('app/getWsData', datas)
-    console.log('ws数据', datas)
   }
 
   ws.onerror = function (err) {
@@ -20,7 +20,14 @@ export function wsSocket () {
   }
 
   ws.onclose = function () {
+    nums++
     console.log('ws关闭')
+    console.log('自动重连次数', nums)
+    if (nums < 10) {
+      wsSocket()
+    } else {
+      console.log('ws连接超时')
+    }
   }
 }
 

src/views/dashboard/components/journal.vue

@@ -12,55 +12,34 @@
       <div class="title">个人日志</div>
       <div class="search flex-wrap">
         <div class="j-date">
-          <el-date-picker
-            v-model="value1"
-            size="small"
-            @change="pickerChange"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            class="j-date-input"
-            type="datetimerange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
+          <el-date-picker v-model="value1" size="small" @change="pickerChange" value-format="yyyy-MM-dd HH:mm:ss" class="j-date-input" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
           </el-date-picker>
         </div>
-        <Search
-          @getSearchData="getSearchData"
-          @clearSearchData="clearSearch"
-          :isTitle="false"
-          :isSlot="false"
-        />
+        <Search @getSearchData="getSearchData" @clearSearchData="clearSearch" :isTitle="false" :isSlot="false" />
       </div>
     </div>
     <div class="journal-content">
-      <el-table
-        :data="tableData"
-        :row-class-name="tableRowClassName"
-        class="table scrollbar"
-        height="450"
-        style="width: 100%"
-      >
+      <el-table :data="tableData" :row-class-name="tableRowClassName" class="table scrollbar" height="450" style="width: 100%">
         <el-table-column label="应用名称">
           <template slot-scope="scope">
-            <div>{{ scope.row.AppName ? scope.row.AppName : "暂无数据" }}</div>
+            <div :class="scope.row.isSocket ? 'red' : ''">{{ scope.row.AppName ? scope.row.AppName : "暂无数据" }}</div>
           </template>
         </el-table-column>
         <el-table-column label="IP">
           <template slot-scope="scope">
-            <div>
+            <div :class="scope.row.isSocket ? 'red' : ''">
               {{ scope.row.OperateIP ? scope.row.OperateIP : "暂无数据" }}
             </div>
           </template>
         </el-table-column>
         <el-table-column label="内容">
           <template slot-scope="scope">
-            <div>{{ scope.row.Msg ? scope.row.Msg : "暂无数据" }}</div>
+            <div :class="scope.row.isSocket ? 'red' : ''">{{ scope.row.Msg ? scope.row.Msg : "暂无数据" }}</div>
           </template>
         </el-table-column>
         <el-table-column label="结果">
           <template slot-scope="scope">
-            <div>
+            <div :class="scope.row.isSocket ? 'red' : ''">
               {{
                 scope.row.OperateResult ? scope.row.OperateResult : "暂无数据"
               }}
@@ -69,7 +48,7 @@
         </el-table-column>
         <el-table-column label="日志时间">
           <template slot-scope="scope">
-            <div>
+            <div :class="scope.row.isSocket ? 'red' : ''">
               {{ scope.row.BeginTime ? scope.row.BeginTime : "暂无数据" }}
             </div>
           </template>
@@ -86,9 +65,10 @@ import { parseTime } from "@/utils/index";
 export default {
   name: "Journal",
   components: { Search },
-  data() {
+  data () {
     return {
       tableData: [],
+      tableCopy: [],
       value1: [
         parseTime(new Date(), "{y}-{m}-{d} 00:00:00"),
         parseTime(
@@ -101,7 +81,16 @@ export default {
       EndTime: "",
     };
   },
-  created() {
+  watch: {
+    "$store.state.app.wsData": {
+      handler (arr) {
+        const datas = arr.concat(this.tableCopy);
+        this.tableData = datas;
+      },
+      deep: true,
+    },
+  },
+  created () {
     this.getLogList({
       Msg: "",
       BeginTime: "",
@@ -109,18 +98,20 @@ export default {
     });
   },
   methods: {
-    tableRowClassName({ row, rowIndex }) {
+    tableRowClassName ({ row, rowIndex }) {
       if (rowIndex % 2 === 0) {
         return "warning-row";
       } else {
         return "success-row";
       }
     },
-    async getLogList(params) {
+    async getLogList (params) {
       try {
         const res = await GetLogList(params);
         if (res.code == 0) {
-          this.tableData = res.returnData;
+          const datas = this.$store.state.app.wsData
+          this.tableData = datas.concat(res.returnData);
+          this.tableCopy = res.returnData;
         } else {
           this.tableData = [];
           this.$message.error(res.message);
@@ -129,7 +120,7 @@ export default {
         console.log(error);
       }
     },
-    getSearchData(val) {
+    getSearchData (val) {
       const dates = this.value1;
       if (dates && dates.length) {
         this.BeginTime = dates[0];
@@ -142,14 +133,14 @@ export default {
         EndTime: this.EndTime,
       });
     },
-    clearSearch() {
+    clearSearch () {
       this.getLogList({
         Msg: "",
         BeginTime: this.BeginTime,
         EndTime: this.EndTime,
       });
     },
-    pickerChange(val) {
+    pickerChange (val) {
       if (val) {
         if (val && val.length) {
           this.BeginTime = val[0];
@@ -247,6 +238,9 @@ export default {
           border-radius: 2px;
         }
       }
+      .red {
+        color: red;
+      }
     }
   }
 }

src/views/login/index.vue

@@ -167,7 +167,7 @@ export default {
                       this.$store.dispatch('user/setPowerList', []);
                       this.$router.push('/');
                     }
-                    // wsSocket();
+                    wsSocket();
                   } else {
                     this.loading = false;
                     this.$store.dispatch("user/logout");