From e0335da516b2c448a02a9a9e0e3522951816c448 Mon Sep 17 00:00:00 2001
From: qq787203167 <787203167@qq.com>
Date: Thu, 3 Mar 2022 13:42:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=91=E7=9A=84=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/common/lang/en-us.js             |   7 +-
 jero-web/src/common/lang/zh-cn.js             |   6 +
 jero-web/src/components/layouts/TabLayout.vue |   5 +-
 .../src/components/tools/HeaderNotice.vue     | 318 ++++++++--------
 jero-web/src/views/system/MessageDetails.vue  |  79 ++++
 .../src/views/system/UserAnnouncementList.vue | 348 +++++++++++-------
 6 files changed, 463 insertions(+), 300 deletions(-)
 create mode 100644 jero-web/src/views/system/MessageDetails.vue

diff --git a/jero-web/src/common/lang/en-us.js b/jero-web/src/common/lang/en-us.js
index 80afea7ab..0575c4429 100644
--- a/jero-web/src/common/lang/en-us.js
+++ b/jero-web/src/common/lang/en-us.js
@@ -400,5 +400,10 @@ module.exports = {
   ExhibitionAreaManagement:'Exhibition area management',
   NewLabelItem:'New label item',
   NodeQuickLookup:'Node quick lookup',
-
+  AreAllLabelsRead:'Are all labels read',
+  AllLabelsRead:'All labels read',
+  SubscriptionNotification:'Subscription notification',
+  warningInformation:'warning information',
+  ForwardPush:'Forward push',
+  PleaseSelectData:'Please select data first',
 }
\ No newline at end of file
diff --git a/jero-web/src/common/lang/zh-cn.js b/jero-web/src/common/lang/zh-cn.js
index 6e8010dbb..684734461 100644
--- a/jero-web/src/common/lang/zh-cn.js
+++ b/jero-web/src/common/lang/zh-cn.js
@@ -404,4 +404,10 @@ module.exports = {
   ExhibitionAreaManagement:'展示区域管理',
   NewLabelItem:'新增标签项',
   NodeQuickLookup:'节点快速查找',
+  AreAllLabelsRead:'是否全部标记已读',
+  AllLabelsRead:'全部标记已读',
+  SubscriptionNotification:'订阅通知',
+  warningInformation:'预警信息',
+  ForwardPush:'转发推送',
+  PleaseSelectData:'请先选择数据',
 }
\ No newline at end of file
diff --git a/jero-web/src/components/layouts/TabLayout.vue b/jero-web/src/components/layouts/TabLayout.vue
index 63313bea9..746280a3f 100644
--- a/jero-web/src/components/layouts/TabLayout.vue
+++ b/jero-web/src/components/layouts/TabLayout.vue
@@ -66,7 +66,7 @@
           { key: '3', icon: 'close', text: '关闭其它' }
         ],
         reloadFlag: true,
-        menuTitle: {},
+        menuTitle: {}
       }
     },
     /* update_begin author:wuxianquan date:20190828 for: 关闭当前tab页，供子页面调用 ->望菜单能配置外链，直接弹出新页面而不是嵌入iframe #428 */
@@ -86,7 +86,8 @@
         }
       },
       isTrue() {
-        if (this.$route.path == '/docManage/library/detail') {
+        if (this.$route.path == '/docManage/library/detail' ||
+          this.$route.path == '/system/MessageDetails') {
           return false
         } else {
           return true
diff --git a/jero-web/src/components/tools/HeaderNotice.vue b/jero-web/src/components/tools/HeaderNotice.vue
index 799069f11..fab7d3760 100644
--- a/jero-web/src/components/tools/HeaderNotice.vue
+++ b/jero-web/src/components/tools/HeaderNotice.vue
@@ -11,64 +11,47 @@
       <a-spin :spinning="loadding">
         <a-tabs>
           <a-tab-pane :tab="msg1Title" key="1">
-            <!--<a-list>
-              <a-list-item>
-                <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta title="你推荐的 IT大牛 已通过第三轮面试" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-              <a-list-item>
-                <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
-                </a-list-item-meta>
-              </a-list-item>
-            </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>
-                <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 === 'H'" color="red">紧急消息</a-tag>
-                </div>
-              </a-list-item>
-              <div style="margin-top: 5px;text-align: center">
-                <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
-              </div>
-            </a-list>
-          </a-tab-pane>
-          <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>
-                <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 === 'H'" color="red">紧急消息</a-tag>
-                </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 === 'H'" color="red">紧急消息</a-tag>-->
+                <!--                </div>-->
               </a-list-item>
               <div style="margin-top: 5px;text-align: center">
                 <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>
               </div>
             </a-list>
           </a-tab-pane>
+          <!--          <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>-->
+          <!--                <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 === 'H'" color="red">紧急消息</a-tag>-->
+          <!--                </div>-->
+          <!--              </a-list-item>-->
+          <!--              <div style="margin-top: 5px;text-align: center">-->
+          <!--                <a-button @click="toMyAnnouncement()" type="dashed" block>查看更多</a-button>-->
+          <!--              </div>-->
+          <!--            </a-list>-->
+          <!--          </a-tab-pane>-->
         </a-tabs>
       </a-spin>
     </template>
     <span @click="fetchNotice" class="header-notice">
       <a-badge :count="msgTotal">
-        <a-icon style="font-size: 16px; padding: 4px" type="bell" />
+        <a-icon style="font-size: 16px; padding: 4px" type="bell"/>
       </a-badge>
     </span>
     <show-announcement ref="ShowAnnouncement" @ok="modalFormOk"></show-announcement>
@@ -77,90 +60,87 @@
 </template>
 
 <script>
-  import { getAction,putAction } from '@/api/manage'
+  import { getAction, putAction } from '@/api/manage'
   import ShowAnnouncement from './ShowAnnouncement'
   import store from '@/store/'
   import DynamicNotice from './DynamicNotice'
 
 
   export default {
-    name: "HeaderNotice",
+    name: 'HeaderNotice',
     components: {
       DynamicNotice,
-      ShowAnnouncement,
+      ShowAnnouncement
     },
-    data () {
+    data() {
       return {
         loadding: false,
-        url:{
-          listCementByUser:"/sys/annountCement/listByUser",
-          editCementSend:"/sys/sysAnnouncementSend/editByAnntIdAndUserId",
-          queryById:"/sys/annountCement/queryById",
+        url: {
+          listCementByUser: '/sys/sysAnnouncementSend/getMessageUnreadList',
+          editCementSend: '/sys/sysAnnouncementSend/editByAnntIdAndUserId',
+          queryById: '/sys/annountCement/queryById'
         },
         hovered: false,
-        announcement1:[],
-        announcement2:[],
-        msg1Count:"0",
-        msg2Count:"0",
-        msg1Title:"通知(0)",
-        msg2Title:"",
-        stopTimer:false,
+        announcement1: [],
+        announcement2: [],
+        msg1Count: '0',
+        msg2Count: '0',
+        msg1Title: '消息通知(0)',
+        msg2Title: '',
+        stopTimer: false,
         websock: null,
-        lockReconnect:false,
-        heartCheck:null,
-        formData:{},
-        openPath:''
+        lockReconnect: false,
+        heartCheck: null,
+        formData: {},
+        openPath: ''
       }
     },
-    computed:{
-      msgTotal () {
-        return parseInt(this.msg1Count)+parseInt(this.msg2Count);
+    computed: {
+      msgTotal() {
+        return parseInt(this.msg1Count)
       }
     },
     mounted() {
-      this.loadData();
+      this.loadData()
       //this.timerFun();
-      this.initWebSocket();
-     // this.heartCheckFun();
+      this.initWebSocket()
+      // this.heartCheckFun();
     },
-    destroyed: function () { // 离开页面生命周期函数
-      this.websocketOnclose();
+    destroyed: function() { // 离开页面生命周期函数
+      this.websocketOnclose()
     },
     methods: {
       timerFun() {
-        this.stopTimer = false;
-        let myTimer = setInterval(()=>{
+        this.stopTimer = false
+        let myTimer = setInterval(() => {
           // 停止定时器
           if (this.stopTimer == true) {
-            clearInterval(myTimer);
-            return;
+            clearInterval(myTimer)
+            return
           }
           this.loadData()
-        },6000)
+        }, 6000)
       },
-      loadData (){
+      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 + ")";
+              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");
-          });
+            this.stopTimer = true
+          })
         } catch (err) {
-          this.stopTimer = true;
-          console.log("通知异常",err);
+          this.stopTimer = true
         }
       },
-      fetchNotice () {
+      fetchNotice() {
         if (this.loadding) {
           this.loadding = false
           return
@@ -168,134 +148,135 @@
         this.loadding = true
         setTimeout(() => {
           this.loadding = false
+           this.loadData()
         }, 200)
       },
-      showAnnouncement(record){
-        putAction(this.url.editCementSend,{anntId:record.id}).then((res)=>{
-          if(res.success){
-            this.loadData();
+      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.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(){
+      toMyAnnouncement() {
         this.$router.push({
           path: '/isps/userAnnouncement'
-        });
+        })
       },
-      modalFormOk(){
+      modalFormOk() {
       },
-      handleHoverChange (visible) {
-        this.hovered = visible;
+      handleHoverChange(visible) {
+        this.hovered = visible
       },
 
-      initWebSocket: function () {
+      initWebSocket: function() {
         // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
-        var userId = store.getters.userInfo.id;
-        var url = window._CONFIG['domianWebSocketURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
+        var userId = store.getters.userInfo.id
+        var url = window._CONFIG['domianWebSocketURL'].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId
         //console.log(url);
-        this.websock = new WebSocket(url);
-        this.websock.onopen = this.websocketOnopen;
-        this.websock.onerror = this.websocketOnerror;
-        this.websock.onmessage = this.websocketOnmessage;
-        this.websock.onclose = this.websocketOnclose;
+        this.websock = new WebSocket(url)
+        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连接成功");
+      websocketOnopen: function() {
+        console.log('WebSocket连接成功')
         //心跳检测重置
         //this.heartCheck.reset().start();
       },
-      websocketOnerror: function (e) {
-        console.log("WebSocket连接发生错误");
-        this.reconnect();
+      websocketOnerror: function(e) {
+        console.log('WebSocket连接发生错误')
+        this.reconnect()
       },
-      websocketOnmessage: function (e) {
-        console.log("-----接收消息-------",e.data);
-        var data = eval("(" + e.data + ")"); //解析对象
-        if(data.cmd == "topic"){
-            //系统通知
-          this.loadData();
-        }else if(data.cmd == "user"){
-            //用户消息
-          this.loadData();
+      websocketOnmessage: function(e) {
+        console.log('-----接收消息-------', e.data)
+        var data = eval('(' + e.data + ')') //解析对象
+        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 + ")");
+      websocketOnclose: function(e) {
+        console.log('connection closed (' + e + ')')
+        if (e) {
+          console.log('connection closed (' + e.code + ')')
         }
-        this.reconnect();
+        this.reconnect()
       },
       websocketSend(text) { // 数据发送
         try {
-          this.websock.send(text);
+          this.websock.send(text)
         } catch (err) {
-          console.log("send failed (" + err.code + ")");
+          console.log('send failed (' + err.code + ')')
         }
       },
 
-      openNotification (data) {
-        var text = data.msgTxt;
-        const key = `open${Date.now()}`;
+      openNotification(data) {
+        var text = data.msgTxt
+        const key = `open${Date.now()}`
         this.$notification.open({
           message: '消息提醒',
-          placement:'bottomRight',
+          placement: 'bottomRight',
           description: text,
           key,
-          btn: (h)=>{
+          btn: (h) => {
             return h('a-button', {
               props: {
                 type: 'primary',
-                size: 'small',
+                size: 'small'
               },
               on: {
-                click: () => this.showDetail(key,data)
+                click: () => this.showDetail(key, data)
               }
             }, '查看详情')
-          },
-        });
+          }
+        })
       },
 
       reconnect() {
-        var that = this;
-        if(that.lockReconnect) return;
-        that.lockReconnect = true;
+        var that = this
+        if (that.lockReconnect) return
+        that.lockReconnect = true
         //没连接上会一直重连，设置延迟避免请求过多
-        setTimeout(function () {
-          console.info("尝试重连...");
-          that.initWebSocket();
-          that.lockReconnect = false;
-        }, 5000);
+        setTimeout(function() {
+          console.info('尝试重连...')
+          that.initWebSocket()
+          that.lockReconnect = false
+        }, 5000)
       },
-      heartCheckFun(){
-        var that = this;
+      heartCheckFun() {
+        var that = this
         //心跳检测,每20s心跳一次
         that.heartCheck = {
           timeout: 20000,
           timeoutObj: null,
           serverTimeoutObj: null,
-          reset: function(){
-            clearTimeout(this.timeoutObj);
+          reset: function() {
+            clearTimeout(this.timeoutObj)
             //clearTimeout(this.serverTimeoutObj);
-            return this;
+            return this
           },
-          start: function(){
-            var self = this;
-            this.timeoutObj = setTimeout(function(){
+          start: function() {
+            var self = this
+            this.timeoutObj = setTimeout(function() {
               //这里发送一个心跳，后端收到后，返回一个心跳消息，
               //onmessage拿到返回的心跳就说明连接正常
-              that.websocketSend("HeartBeat");
-              console.info("客户端发送心跳");
+              that.websocketSend('HeartBeat')
+              console.info('客户端发送心跳')
               //self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
               //  that.websock.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
               //}, self.timeout)
@@ -305,17 +286,16 @@
       },
 
 
-      showDetail(key,data){
-        this.$notification.close(key);
-        var id = data.msgId;
-        getAction(this.url.queryById,{id:id}).then((res) => {
+      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);
+            var record = res.result
+            this.showAnnouncement(record)
           }
         })
-
-      },
+      }
     }
   }
 </script>
@@ -326,7 +306,7 @@
   }
 </style>
 <style lang="less" scoped>
-  .header-notice{
+  .header-notice {
     display: inline-block;
     transition: all 0.3s;
 
diff --git a/jero-web/src/views/system/MessageDetails.vue b/jero-web/src/views/system/MessageDetails.vue
new file mode 100644
index 000000000..e9a2c8dce
--- /dev/null
+++ b/jero-web/src/views/system/MessageDetails.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="box">
+    <div class="box-header">
+      <a-icon type="left-circle" @click="iconClick" class="icon" theme="filled"/>
+      <span class="box-header-left-text">
+        {{this.$route.query.msgContent}}
+      </span>
+      <span class="box-header-right-text">
+        {{$t('NotificationTime')}}: {{this.$route.query.sendTime}}
+      </span>
+    </div>
+    <div class="box-content">
+      {{this.$route.query.msgContentInfo}}
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'MessageDetails',
+    methods: {
+      iconClick() {
+        this.$router.push({
+          path: '/isps/userAnnouncement'
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .box {
+    width: 100%;
+  }
+
+  .box-header {
+    padding: 0 32px;
+    height: 68px;
+    line-height: 68px;
+    border-bottom: 2px #eff1f3 solid;
+  }
+
+  .icon {
+    font-size: 32px;
+    color: #00A0E9;
+    margin-right: 30px;
+    display: inline-block;
+    float: left;
+    line-height: 75px;
+  }
+
+  .box-header-left-text {
+    width: calc(100% - 420px);
+    font-size: 18px;
+    display: inline-block;
+    color: #040B29;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-header-right-text {
+    font-size: 16px;
+    float: right;
+    display: inline-block;
+    line-height: 88px;
+    color: #040B29;
+    opacity: 0.5;
+  }
+
+  .box-content {
+    padding: 40px 120px;
+    box-sizing: border-box;
+    color: #040B29;
+    font-size: 16px;
+    text-indent: 30px;
+    letter-spacing: 3px
+  }
+</style>
\ No newline at end of file
diff --git a/jero-web/src/views/system/UserAnnouncementList.vue b/jero-web/src/views/system/UserAnnouncementList.vue
index 3b69913d5..f5ecf5bac 100644
--- a/jero-web/src/views/system/UserAnnouncementList.vue
+++ b/jero-web/src/views/system/UserAnnouncementList.vue
@@ -4,45 +4,75 @@
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
-
-          <a-col :span="6">
-            <a-form-item label="标题">
-              <a-input placeholder="请输入标题" v-model="queryParam.titile"></a-input>
-            </a-form-item>
+          <a-col :md="6" :sm="8" style="line-height: 48px">
+            <div class="box-title-text">
+              <div class="title-text" :title="$t('MessageContent')">
+                <span>{{this.$t('MessageContent')}}</span>
+              </div>
+              <a-input class="box-input"
+                       :placeholder="$t('pleaseEnter')+$t('MessageContent')"
+                       v-model="queryParam.msgContent">
+              </a-input>
+            </div>
           </a-col>
-          <a-col :span="6">
-            <a-form-item label="发布人">
-              <a-input placeholder="请输入发布人" v-model="queryParam.sender"></a-input>
-            </a-form-item>
-          </a-col>
-
-          <a-col :span="8" >
-            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
-              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
-            </span>
+          <a-col :md="6" :sm="8" style="line-height: 48px">
+            <div class="box-title-text">
+              <div class="title-text" :title="$t('MessageType')">
+                <span>{{this.$t('MessageType')}}</span>
+              </div>
+              <a-select class="box-input"
+                        :placeholder="$t('pleaseSelect')+$t('MessageType')"
+                        v-model="queryParam.msgCategory">
+                <a-select-option :value="undefined">{{$t('pleaseSelect')}}</a-select-option>
+                <a-select-option v-for="(item, key) in Object.keys(msgCategoryQuery)"
+                                 :key="key" :value="item">
+                  <span style="display: inline-block;width: 100%" :title="msgCategoryQuery[item]">
+                               {{ msgCategoryQuery[item]}}
+                    </span>
+                </a-select-option>
+              </a-select>
+            </div>
           </a-col>
+          <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
+               <a-col :md="6" :sm="24">
+                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
+                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
+               </a-col>
+         </span>
 
         </a-row>
       </a-form>
     </div>
 
     <div class="table-operator">
-      <a-button type="primary" @click="readAll" icon="book">全部标注已读</a-button>
+      <div @click="readAll" class="operator-text" :title="$t('AllLabelsRead')">
+        <a-icon type="eye"/>
+        {{$t('AllLabelsRead')}}
+      </div>
+      <div @click="handleDel" class="operator-text">
+        <a-icon type="delete"/>
+        {{$t('BatchDelete')}}
+      </div>
     </div>
 
     <a-table
       ref="table"
-      size="default"
-      bordered
       rowKey="id"
+      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
       :columns="columns"
       :dataSource="dataSource"
       :pagination="ipagination"
       :loading="loading"
       @change="handleTableChange">
-      <span slot="action" slot-scope="text, record">
-        <a @click="showAnnouncement(record)">查看</a>
+      <span slot="msgContent" slot-scope="text,scope">
+           <a :style="{'color':scope.readFlag == 0 ? 'red':'#00A0E9'}" @click="msgContentClick(scope)">
+             {{text}}
+           </a>
+      </span>
+      <span slot="msgCategory" slot-scope="text,scope">
+           <a :style="{'color':scope.readFlag == 0 ? 'red':'#00A0E9'}" @click="msgContentClick(scope)">
+             {{msgCategoryQuery[text]}}
+           </a>
       </span>
     </a-table>
     <show-announcement ref="ShowAnnouncement"></show-announcement>
@@ -52,141 +82,203 @@
 
 <script>
   import { filterObj } from '@/utils/util'
-  import { getAction,putAction } from '@/api/manage'
+  import { getAction, putAction } from '@/api/manage'
   import ShowAnnouncement from '@/components/tools/ShowAnnouncement'
-  import {JeroListMixin} from '@/mixins/JeroListMixin'
+  import { JeroListMixin } from '@/mixins/JeroListMixin'
   import DynamicNotice from '../../components/tools/DynamicNotice'
 
   export default {
-    name: "UserAnnouncementList",
+    name: 'UserAnnouncementList',
     mixins: [JeroListMixin],
     components: {
       DynamicNotice,
       ShowAnnouncement
     },
-    data () {
+    data() {
       return {
         description: '系统通告表管理页面',
         queryParam: {},
-        columns: [{
-          title: '标题',
-          align:"center",
-          dataIndex: 'titile'
-        },{
-          title: '消息类型',
-          align: "center",
-          dataIndex: 'msgCategory',
-          customRender: function (text) {
-            if (text == '1') {
-              return "通知公告";
-            } else if (text == "2") {
-              return "系统消息";
-            } else {
-              return text;
-            }
-          }
-        },{
-          title: '发布人',
-          align:"center",
-          dataIndex: 'sender'
-        },{
-          title: '发布时间',
-          align:"center",
-          dataIndex: 'sendTime'
-        },{
-          title: '优先级',
-          align:"center",
-          dataIndex: 'priority',
-          customRender:function (text) {
-            if(text=='L'){
-              return "低";
-            }else if(text=="M"){
-              return "中";
-            }else if(text=="H"){
-              return "高";
-            } else {
-              return text;
-            }
-          }
-        },{
-          title: '阅读状态',
-          align:"center",
-          dataIndex: 'readFlag',
-          customRender:function (text) {
-            if(text=='0'){
-              return "未读";
-            }else if(text=="1"){
-              return "已读";
-            } else {
-              return text;
-            }
-          }
-        },{
-          title: '操作',
-          dataIndex: 'action',
-          align:"center",
-          scopedSlots: { customRender: 'action' },
-        }],
-		    url: {
-          list: "/sys/sysAnnouncementSend/getMyAnnouncementSend",
-          editCementSend:"sys/sysAnnouncementSend/editByAnntIdAndUserId",
-          readAllMsg:"sys/sysAnnouncementSend/readAll",
+        selectedRowKeys: [],
+        msgCategoryQuery: {
+          '1': this.$t('SubscriptionNotification'),
+          '2': this.$t('warningInformation'),
+          '3': this.$t('ForwardPush')
         },
-        loading:false,
-        openPath:'',
-        formData:''
+        columns: [
+          {
+            title: this.$t('MessageContent'),
+            align: 'center',
+            dataIndex: 'msgContent',
+            scopedSlots: { customRender: 'msgContent' }
+          },
+          {
+            title: this.$t('MessageType'),
+            align: 'center',
+            dataIndex: 'msgCategory',
+            scopedSlots: { customRender: 'msgCategory' }
+          },
+          {
+            title: this.$t('NotificationTime'),
+            align: 'center',
+            dataIndex: 'sendTime'
+          }
+        ],
+        url: {
+          list: '/sys/sysAnnouncementSend/getMyAnnouncementSend',
+          editCementSend: 'sys/sysAnnouncementSend/editByAnntIdAndUserId',
+          readAllMsg: 'sys/sysAnnouncementSend/read',
+          deleteUrl: ''
+        },
+        loading: false,
+        openPath: '',
+        formData: ''
       }
     },
     methods: {
-      handleDetail: function(record){
-        this.$refs.sysAnnouncementModal.detail(record);
-        this.$refs.sysAnnouncementModal.title="查看";
+      handleDetail: function(record) {
+        this.$refs.sysAnnouncementModal.detail(record)
+        this.$refs.sysAnnouncementModal.title = '查看'
       },
-      showAnnouncement(record){
-        putAction(this.url.editCementSend,{anntId:record.anntId}).then((res)=>{
-          if(res.success){
-            this.loadData();
+      showAnnouncement(record) {
+        putAction(this.url.editCementSend, { anntId: record.anntId }).then((res) => {
+          if (res.success) {
+            this.loadData()
             this.syncHeadNotic(record.anntId)
           }
-        });
-        if(record.openType==='component'){
-          this.openPath = record.openPage;
-          this.formData = {id:record.busId};
-          this.$refs.showDynamNotice.detail();
-        }else{
-          this.$refs.ShowAnnouncement.detail(record);
+        })
+        if (record.openType === 'component') {
+          this.openPath = record.openPage
+          this.formData = { id: record.busId }
+          this.$refs.showDynamNotice.detail()
+        } else {
+          this.$refs.ShowAnnouncement.detail(record)
         }
       },
-      syncHeadNotic(anntId){
-        getAction("sys/annountCement/syncNotic",{anntId:anntId})
+      readAll() {
+        var that = this
+        if (this.selectedRowKeys.length > 0) {
+          that.$confirm({
+            content: that.$t('AreAllLabelsRead'),
+            onOk: function() {
+              let selectedRowKeys = JSON.parse(JSON.stringify(that.selectedRowKeys))
+              getAction(that.url.readAllMsg, { ids: selectedRowKeys.join(',') }).then((res) => {
+                if (res.success) {
+                  that.selectedRowKeys = []
+                  that.$message.success(res.message)
+                  that.loadData()
+                }
+              })
+            }
+          })
+        } else {
+          this.$message.warning(this.$t('PleaseSelectData'))
+        }
       },
-      readAll(){
-        var that = this;
-        that.$confirm({
-          title:"确认操作",
-          content:"是否全部标注已读?",
-          onOk: function(){
-            putAction(that.url.readAllMsg).then((res)=>{
-              if(res.success){
-                that.$message.success(res.message);
-                that.loadData();
-                that.syncHeadNotic();
-              }
-            });
-          }
-        });
+      onSelectChange(value) {
+        this.selectedRowKeys = value
       },
+      msgContentClick(row) {
+        getAction(this.url.readAllMsg, { ids: row.id }).then((res) => {
+        })
+        this.$router.push({
+          path: '/system/MessageDetails',
+          query: row
+        })
+      },
+      handleDel() {
+        var that = this
+        if (this.selectedRowKeys.length > 0) {
+          that.$confirm({
+            content: that.$t('ConfirmBatchDeletion'),
+            onOk: function() {
+              let selectedRowKeys = JSON.parse(JSON.stringify(that.selectedRowKeys))
+              getAction(that.url.deleteUrl, { ids: selectedRowKeys.join(',') }).then((res) => {
+                if (res.success) {
+                  that.selectedRowKeys = []
+                  that.$message.success(res.message)
+                  that.loadData()
+                }
+              })
+            }
+          })
+        } else {
+          this.$message.warning(this.$t('PleaseSelectData'))
+        }
+      }
     }
   }
 </script>
 <style scoped>
-  .ant-card-body .table-operator{
+  @import '~@assets/less/common.less';
+
+  .ant-card-body .table-operator {
     margin-bottom: 18px;
   }
-  .anty-row-operator button{margin: 0 5px}
-  .ant-btn-danger{background-color: #ffffff}z
 
-  .ant-modal-cust-warp{height: 100%}
-  .ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
-  .ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
+  .anty-row-operator button {
+    margin: 0 5px
+  }
+
+  .ant-btn-danger {
+    background-color: #ffffff
+  }
+
+  z
+  .ant-modal-cust-warp {
+    height: 100%
+  }
+
+  .ant-modal-cust-warp .ant-modal-body {
+    height: calc(100% - 110px) !important;
+    overflow-y: auto
+  }
+
+  .ant-modal-cust-warp .ant-modal-content {
+    height: 90% !important;
+    overflow-y: hidden
+  }
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title-text {
+    width: 20%;
+    min-width: 90px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 3px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-input {
+    display: inline-block;
+    width: 70%;
+    height: 38px;
+    margin-top: 2px;
+  }
+
+  .box-button {
+    height: 38px;
+    /*margin-top: 2px;*/
+  }
+</style>
+<style>
+  .box-input .ant-select-selection {
+    height: 38px;
+    line-height: 38px;
+  }
+
+  .box-input .ant-select-selection__rendered {
+    line-height: 38px;
+  }
 </style>
\ No newline at end of file