From 7454b9fbf990eccc223bb336485db2dc52e2e354 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <renpy@yuanian.com>
Date: Sun, 8 Oct 2023 14:45:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E7=B3=BB=E7=BB=9F=E4=B8=BB?=
 =?UTF-8?q?=E9=A1=B5=E6=B6=88=E6=81=AF=E6=8F=90=E9=86=92=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E4=B8=AD=E7=9A=84=E6=A0=B7=E5=BC=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/tools/HeaderNotice.vue | 553 +++++++++++++-------------
 1 file changed, 284 insertions(+), 269 deletions(-)

diff --git a/src/components/tools/HeaderNotice.vue b/src/components/tools/HeaderNotice.vue
index 2ac983e..bba217b 100644
--- a/src/components/tools/HeaderNotice.vue
+++ b/src/components/tools/HeaderNotice.vue
@@ -6,7 +6,8 @@
     :arrowPointAtCenter="true"
     overlayClassName="header-notice-wrapper"
     @visibleChange="handleHoverChange"
-    :overlayStyle="{ width: '300px', top: '50px' }">
+    :overlayStyle="{ width: '300px', top: '50px' }"
+  >
     <template slot="content">
       <a-spin :spinning="loadding">
         <a-tabs>
@@ -30,17 +31,21 @@
             </a-list>-->
             <a-list>
               <a-list-item :key="index" v-for="(record, index) in announcement1">
-                <div style="margin-left: 5%;width: 80%">
-                  <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
-                  <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
+                <div style="margin-left: 5%; width: 80%">
+                  <p>
+                    <a @click="showAnnouncement(record)">{{ record.titile }}</a>
+                  </p>
+                  <p style="color: #c9f6f6; margin-bottom: 0px">{{ record.createTime }} 发布</p>
                 </div>
                 <div style="text-align: right">
                   <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
+                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange"
+                    >重要消息</a-tag
+                  >
                   <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
                 </div>
               </a-list-item>
-              <div style="margin-top: 5px;text-align: center">
+              <div style="margin-top: 5px; text-align: center">
                 <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
               </div>
             </a-list>
@@ -48,17 +53,21 @@
           <a-tab-pane :tab="msg2Title" key="2">
             <a-list>
               <a-list-item :key="index" v-for="(record, index) in announcement2">
-                <div style="margin-left: 5%;width: 80%">
-                  <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
-                  <p style="color: rgba(0,0,0,.45);margin-bottom: 0px">{{ record.createTime }} 发布</p>
+                <div style="margin-left: 5%; width: 80%">
+                  <p>
+                    <a @click="showAnnouncement(record)">{{ record.titile }}</a>
+                  </p>
+                  <p style="color: #c9f6f6; margin-bottom: 0px">{{ record.createTime }} 发布</p>
                 </div>
                 <div style="text-align: right">
                   <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
+                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange"
+                    >重要消息</a-tag
+                  >
                   <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
                 </div>
               </a-list-item>
-              <div style="margin-top: 5px;text-align: center">
+              <div style="margin-top: 5px; text-align: center">
                 <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
               </div>
             </a-list>
@@ -68,291 +77,297 @@
     </template>
     <span @click="fetchNotice" class="header-notice">
       <a-badge :count="msgTotal">
-        <img src="@/assets/images/header/notice.png" alt="">
+        <img src="@/assets/images/header/notice.png" alt="" />
       </a-badge>
     </span>
     <show-announcement ref="ShowAnnouncement" @ok="modalFormOk"></show-announcement>
-    <dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData"/>
+    <dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData" />
   </a-popover>
 </template>
 
 <script>
-  import { getAction,putAction } from '@/api/manage'
-  import ShowAnnouncement from './ShowAnnouncement'
-  import store from '@/store/'
-  import DynamicNotice from './DynamicNotice'
-  import Vue from 'vue'
-  import { ACCESS_TOKEN } from '@/store/mutation-types'
+import { getAction, putAction } from '@/api/manage'
+import ShowAnnouncement from './ShowAnnouncement'
+import store from '@/store/'
+import DynamicNotice from './DynamicNotice'
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
 
-  export default {
-    name: "HeaderNotice",
-    components: {
-      DynamicNotice,
-      ShowAnnouncement,
-    },
-    data () {
-      return {
-        loadding: false,
-        url:{
-          listCementByUser:"/sys/annountCement/listByUser",
-          editCementSend:"/sys/sysAnnouncementSend/editByAnntIdAndUserId",
-          queryById:"/sys/annountCement/queryById",
-        },
-        hovered: false,
-        announcement1:[],
-        announcement2:[],
-        msg1Count:"0",
-        msg2Count:"0",
-        msg1Title:"通知(0)",
-        msg2Title:"",
-        stopTimer:false,
-        websock: null,
-        lockReconnect:false,
-        //websocket错误连接次数
-        wsConnectErrorTime:1,
-        heartCheck:null,
-        formData:{},
-        openPath:''
-      }
-    },
-    computed:{
-      msgTotal () {
-        return parseInt(this.msg1Count)+parseInt(this.msg2Count);
-      }
-    },
-    mounted() {
-      this.loadData();
-      //this.timerFun();
-      this.initWebSocket();
-     // this.heartCheckFun();
-    },
-    destroyed: function () { // 离开页面生命周期函数
-      this.websocketOnclose();
-    },
-    methods: {
-      timerFun() {
-        this.stopTimer = false;
-        let myTimer = setInterval(()=>{
-          // 停止定时器
-          if (this.stopTimer == true) {
-            clearInterval(myTimer);
-            return;
-          }
-          this.loadData()
-        },6000)
+export default {
+  name: 'HeaderNotice',
+  components: {
+    DynamicNotice,
+    ShowAnnouncement,
+  },
+  data() {
+    return {
+      loadding: false,
+      url: {
+        listCementByUser: '/sys/annountCement/listByUser',
+        editCementSend: '/sys/sysAnnouncementSend/editByAnntIdAndUserId',
+        queryById: '/sys/annountCement/queryById',
       },
-      loadData (){
-        try {
-          // 获取系统消息
-          getAction(this.url.listCementByUser).then((res) => {
-            if (res.success) {
-              this.announcement1 = res.result.anntMsgList;
-              this.msg1Count = res.result.anntMsgTotal;
-              this.msg1Title = "通知(" + res.result.anntMsgTotal + ")";
-              this.announcement2 = res.result.sysMsgList;
-              this.msg2Count = res.result.sysMsgTotal;
-              this.msg2Title = "系统消息(" + res.result.sysMsgTotal + ")";
-            }
-          }).catch(error => {
-            console.log("系统消息通知异常",error);//这行打印permissionName is undefined
-            this.stopTimer = true;
-            console.log("清理timer");
-          });
-        } catch (err) {
-          this.stopTimer = true;
-          console.log("通知异常",err);
-        }
-      },
-      fetchNotice () {
-        if (this.loadding) {
-          this.loadding = false
+      hovered: false,
+      announcement1: [],
+      announcement2: [],
+      msg1Count: '0',
+      msg2Count: '0',
+      msg1Title: '通知(0)',
+      msg2Title: '',
+      stopTimer: false,
+      websock: null,
+      lockReconnect: false,
+      //websocket错误连接次数
+      wsConnectErrorTime: 1,
+      heartCheck: null,
+      formData: {},
+      openPath: '',
+    }
+  },
+  computed: {
+    msgTotal() {
+      return parseInt(this.msg1Count) + parseInt(this.msg2Count)
+    },
+  },
+  mounted() {
+    this.loadData()
+    //this.timerFun();
+    this.initWebSocket()
+    // this.heartCheckFun();
+  },
+  destroyed: function () {
+    // 离开页面生命周期函数
+    this.websocketOnclose()
+  },
+  methods: {
+    timerFun() {
+      this.stopTimer = false
+      let myTimer = setInterval(() => {
+        // 停止定时器
+        if (this.stopTimer == true) {
+          clearInterval(myTimer)
           return
         }
-        this.loadding = true
-        setTimeout(() => {
-          this.loadding = false
-        }, 200)
-      },
-      showAnnouncement(record){
-        putAction(this.url.editCementSend,{anntId:record.id}).then((res)=>{
-          if(res.success){
-            this.loadData();
-          }
-        });
-        this.hovered = false;
-        if(record.openType==='component'){
-          this.openPath = record.openPage;
-          this.formData = {id:record.busId};
-          this.$refs.showDynamNotice.detail(record.openPage);
-        }else{
-          this.$refs.ShowAnnouncement.detail(record);
+        this.loadData()
+      }, 6000)
+    },
+    loadData() {
+      try {
+        // 获取系统消息
+        getAction(this.url.listCementByUser)
+          .then((res) => {
+            if (res.success) {
+              this.announcement1 = res.result.anntMsgList
+              this.msg1Count = res.result.anntMsgTotal
+              this.msg1Title = '通知(' + res.result.anntMsgTotal + ')'
+              this.announcement2 = res.result.sysMsgList
+              this.msg2Count = res.result.sysMsgTotal
+              this.msg2Title = '系统消息(' + res.result.sysMsgTotal + ')'
+            }
+          })
+          .catch((error) => {
+            console.log('系统消息通知异常', error) //这行打印permissionName is undefined
+            this.stopTimer = true
+            console.log('清理timer')
+          })
+      } catch (err) {
+        this.stopTimer = true
+        console.log('通知异常', err)
+      }
+    },
+    fetchNotice() {
+      if (this.loadding) {
+        this.loadding = false
+        return
+      }
+      this.loadding = true
+      setTimeout(() => {
+        this.loadding = false
+      }, 200)
+    },
+    showAnnouncement(record) {
+      putAction(this.url.editCementSend, { anntId: record.id }).then((res) => {
+        if (res.success) {
+          this.loadData()
         }
-      },
-      toMyAnnouncement(){
-        this.$router.push({
-          path: '/isps/userAnnouncement'
-        });
-      },
-      modalFormOk(){
-      },
-      handleHoverChange (visible) {
-        this.hovered = visible;
-      },
+      })
+      this.hovered = false
+      if (record.openType === 'component') {
+        this.openPath = record.openPage
+        this.formData = { id: record.busId }
+        this.$refs.showDynamNotice.detail(record.openPage)
+      } else {
+        this.$refs.ShowAnnouncement.detail(record)
+      }
+    },
+    toMyAnnouncement() {
+      this.$router.push({
+        path: '/isps/userAnnouncement',
+      })
+    },
+    modalFormOk() {},
+    handleHoverChange(visible) {
+      this.hovered = visible
+    },
 
-      initWebSocket: function () {
-        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
-        var userId = store.getters.userInfo.id;
-        var url = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
-        //console.log(url);
-        //update-begin-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
-        let token = Vue.ls.get(ACCESS_TOKEN)
-        this.websock = new WebSocket(url, [token]);
-        //update-end-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
-        this.websock.onopen = this.websocketOnopen;
-        this.websock.onerror = this.websocketOnerror;
-        this.websock.onmessage = this.websocketOnmessage;
-        this.websock.onclose = this.websocketOnclose;
-      },
-      websocketOnopen: function () {
-        console.log("WebSocket连接成功");
-        //心跳检测重置
-        //this.heartCheck.reset().start();
-      },
-      websocketOnerror: function (e) {
-        console.log("WebSocket连接发生错误，第%s次",this.wsConnectErrorTime);
+    initWebSocket: function () {
+      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+      var userId = store.getters.userInfo.id
+      var url =
+        window._CONFIG['domianURL'].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId
+      //console.log(url);
+      //update-begin-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
+      let token = Vue.ls.get(ACCESS_TOKEN)
+      this.websock = new WebSocket(url, [token])
+      //update-end-author:taoyan date:2022-4-22 for:  v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
+      this.websock.onopen = this.websocketOnopen
+      this.websock.onerror = this.websocketOnerror
+      this.websock.onmessage = this.websocketOnmessage
+      this.websock.onclose = this.websocketOnclose
+    },
+    websocketOnopen: function () {
+      console.log('WebSocket连接成功')
+      //心跳检测重置
+      //this.heartCheck.reset().start();
+    },
+    websocketOnerror: function (e) {
+      console.log('WebSocket连接发生错误，第%s次', this.wsConnectErrorTime)
 
-        this.wsConnectErrorTime = this.wsConnectErrorTime + 1;
-        if(this.wsConnectErrorTime>5){
-          console.log("WebSocket连接错误超过5次，就不再重新连了！");
-          this.lockReconnect = true
-          return;
-        }
+      this.wsConnectErrorTime = this.wsConnectErrorTime + 1
+      if (this.wsConnectErrorTime > 5) {
+        console.log('WebSocket连接错误超过5次，就不再重新连了！')
+        this.lockReconnect = true
+        return
+      }
 
-        this.reconnect();
-      },
-      websocketOnmessage: function (e) {
-        console.log("-----接收消息-------",e.data);
-        var data = eval("(" + e.data + ")"); //解析对象
-        this.voiceBroadcast(data.msgTxt)
-        if(data.cmd == "topic"){
-            //系统通知
-          this.loadData();
-        }else if(data.cmd == "user"){
-            //用户消息
-          this.loadData();
-        }
-        //心跳检测重置
-        //this.heartCheck.reset().start();
-      },
-      websocketOnclose: function (e) {
-        console.log("connection closed (" + e + ")");
-        if(e){
-          console.log("connection closed (" + e.code + ")");
-        }
-        this.reconnect();
-      },
-      websocketSend(text) { // 数据发送
-        try {
-          this.websock.send(text);
-        } catch (err) {
-          console.log("send failed (" + err.code + ")");
-        }
-      },
-      //语音播报系统通知
-      voiceBroadcast(text){
-        var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(text);        // baidu文字转语音
-        var voiceContent = new Audio(url);
-        voiceContent.src = url;
-        voiceContent.play();
-      },
-      openNotification (data) {
-        var text = data.msgTxt;
-        const key = `open${Date.now()}`;
-        this.$notification.open({
-          message: '消息提醒',
-          placement:'bottomRight',
-          description: text,
-          key,
-          btn: (h)=>{
-            return h('a-button', {
+      this.reconnect()
+    },
+    websocketOnmessage: function (e) {
+      console.log('-----接收消息-------', e.data)
+      var data = eval('(' + e.data + ')') //解析对象
+      this.voiceBroadcast(data.msgTxt)
+      if (data.cmd == 'topic') {
+        //系统通知
+        this.loadData()
+      } else if (data.cmd == 'user') {
+        //用户消息
+        this.loadData()
+      }
+      //心跳检测重置
+      //this.heartCheck.reset().start();
+    },
+    websocketOnclose: function (e) {
+      console.log('connection closed (' + e + ')')
+      if (e) {
+        console.log('connection closed (' + e.code + ')')
+      }
+      this.reconnect()
+    },
+    websocketSend(text) {
+      // 数据发送
+      try {
+        this.websock.send(text)
+      } catch (err) {
+        console.log('send failed (' + err.code + ')')
+      }
+    },
+    //语音播报系统通知
+    voiceBroadcast(text) {
+      var url = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=' + encodeURI(text) // baidu文字转语音
+      var voiceContent = new Audio(url)
+      voiceContent.src = url
+      voiceContent.play()
+    },
+    openNotification(data) {
+      var text = data.msgTxt
+      const key = `open${Date.now()}`
+      this.$notification.open({
+        message: '消息提醒',
+        placement: 'bottomRight',
+        description: text,
+        key,
+        btn: (h) => {
+          return h(
+            'a-button',
+            {
               props: {
                 type: 'primary',
                 size: 'small',
               },
               on: {
-                click: () => this.showDetail(key,data)
-              }
-            }, '查看详情')
-          },
-        });
-      },
+                click: () => this.showDetail(key, data),
+              },
+            },
+            '查看详情'
+          )
+        },
+      })
+    },
 
-      reconnect() {
-        var that = this;
-        if(that.lockReconnect) return;
-        that.lockReconnect = true;
-        //没连接上会一直重连，设置延迟避免请求过多
-        setTimeout(function () {
-          console.info("尝试重连...");
-          that.initWebSocket();
-          that.lockReconnect = false;
-        }, 20000);
-      },
-      heartCheckFun(){
-        var that = this;
-        //心跳检测,每20s心跳一次
-        that.heartCheck = {
-          timeout: 20000,
-          timeoutObj: null,
-          serverTimeoutObj: null,
-          reset: function(){
-            clearTimeout(this.timeoutObj);
-            //clearTimeout(this.serverTimeoutObj);
-            return this;
-          },
-          start: function(){
-            var self = this;
-            this.timeoutObj = setTimeout(function(){
-              //这里发送一个心跳，后端收到后，返回一个心跳消息，
-              //onmessage拿到返回的心跳就说明连接正常
-              that.websocketSend("HeartBeat");
-              console.info("客户端发送心跳");
-              //self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
-              //  that.websock.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
-              //}, self.timeout)
-            }, this.timeout)
-          }
+    reconnect() {
+      var that = this
+      if (that.lockReconnect) return
+      that.lockReconnect = true
+      //没连接上会一直重连，设置延迟避免请求过多
+      setTimeout(function () {
+        console.info('尝试重连...')
+        that.initWebSocket()
+        that.lockReconnect = false
+      }, 20000)
+    },
+    heartCheckFun() {
+      var that = this
+      //心跳检测,每20s心跳一次
+      that.heartCheck = {
+        timeout: 20000,
+        timeoutObj: null,
+        serverTimeoutObj: null,
+        reset: function () {
+          clearTimeout(this.timeoutObj)
+          //clearTimeout(this.serverTimeoutObj);
+          return this
+        },
+        start: function () {
+          var self = this
+          this.timeoutObj = setTimeout(function () {
+            //这里发送一个心跳，后端收到后，返回一个心跳消息，
+            //onmessage拿到返回的心跳就说明连接正常
+            that.websocketSend('HeartBeat')
+            console.info('客户端发送心跳')
+            //self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
+            //  that.websock.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+            //}, self.timeout)
+          }, this.timeout)
+        },
+      }
+    },
+
+    showDetail(key, data) {
+      this.$notification.close(key)
+      var id = data.msgId
+      getAction(this.url.queryById, { id: id }).then((res) => {
+        if (res.success) {
+          var record = res.result
+          this.showAnnouncement(record)
         }
-      },
-
-
-      showDetail(key,data){
-        this.$notification.close(key);
-        var id = data.msgId;
-        getAction(this.url.queryById,{id:id}).then((res) => {
-          if (res.success) {
-            var record = res.result;
-            this.showAnnouncement(record);
-          }
-        })
-
-      },
-    }
-  }
+      })
+    },
+  },
+}
 </script>
 
 <style lang="css">
-  .header-notice-wrapper {
-    top: 50px !important;
-  }
+.header-notice-wrapper {
+  top: 50px !important;
+}
 </style>
 <style lang="less" scoped>
-  .header-notice{
-    display: inline-block;
-    transition: all 0.3s;
+.header-notice {
+  display: inline-block;
+  transition: all 0.3s;
 
-    span {
-      vertical-align: initial;
-    }
+  span {
+    vertical-align: initial;
   }
+}
 </style>
\ No newline at end of file