消息日志

api/warn/message.js

@@ -34,6 +34,13 @@ export function updateMessage(data) {
     data: data
   })
 }
+export function updateRead(data) {
+  return request({
+    url: '/warn/message/updateRead',
+    method: 'put',
+    data: data
+  })
+}
 
 // 删除系统消息中心
 export function delMessage(id) {
@@ -42,6 +49,14 @@ export function delMessage(id) {
     method: 'delete'
   })
 }
+// 删除系统消息中心
+export function removeBatch(data) {
+  return request({
+    url: '/warn/message/removeBatch',
+    method: 'delete',
+    data: data
+  })
+}
 export function getMessages(query) {
   return request({
     url: '/warn/message/getMessage',
@@ -49,3 +64,11 @@ export function getMessages(query) {
     params: query
   })
 }
+
+export function getMsgOverview(query) {
+  return request({
+    url: '/warn/message/getMsgOverview',
+    method: 'get',
+    params: query
+  })
+}

pages/news/index.vue

@@ -56,7 +56,7 @@
 
     <uni-swipe-action ref="swipeAction" class="message-list">
       <uni-swipe-action-item
-          v-for="(item, index) in messageList"
+          v-for="(item, index) in msgList"
           :right-options="options"
           :key="index"
           @click="deleteItem($event, item)"
@@ -71,12 +71,12 @@
           </view>
           <view class="item-content">
             <view class="item-title">{{ item.title }}</view>
-            <view class="item-desc">{{ item.desc }}</view>
+            <view class="item-desc">{{ item.content }}</view>
           </view>
           <!-- 右侧时间+角标列 -->
           <view class="item-right">
             <view class="item-time">
-              <uni-dateformat :date="item.time" :format="isTodayDate(item.time)?'hh:mm':'yyyy-MM-dd hh:mm:ss'"
+              <uni-dateformat :date="item.createTime" :format="isTodayDate(item.createTime)?'hh:mm':'yyyy-MM-dd hh:mm:ss'"
                               :threshold="[60000, 3600000]"></uni-dateformat>
             </view>
             <view v-if="item.numBadge">
@@ -98,6 +98,7 @@
 <script>
 import UniDividerText from "../../components/uni-divider/uni-divider-text.vue";
 import {isTodayDate} from "@/utils/agri";
+import {getMsgOverview, removeBatch, updateRead} from "@/api/warn/message";
 export default {
   components: {
     UniDividerText
@@ -107,13 +108,13 @@ export default {
       title: '消息中心',
       isShowTips: true,
       isShowNumBadge: true,
-      messageList: [
+      messageList: [],
+      msgList: [
         {
           // video111 / camera_
           imgUrl: 'https://img.xiaoces.com/photos/news/camera_.png', // 对应视频中心
           title: '视频中心',
-          desc: '[画面变化] DS-2DE4423DW-D/GLT/XM(FW116231321313123123123132312dgvbdfg7...',
+          msgType: 'video',
-          time: Date.now(),
           badge: true,
           numBadge: null, // 有值则显示角标
           width: '60rpx'
@@ -122,9 +123,8 @@ export default {
           // device imei1 device_status3
           imgUrl: 'https://img.xiaoces.com/photos/news/device_status3.png', // 对应设备状态
           // iconBg: '#4285F4',
+          msgType: 'status',
           title: '设备状态',
-          desc: '[设备在线] 十方',
-          time: Date.now()-3200000,
           badge: true,
           numBadge: null,
           width: '60rpx'
@@ -133,9 +133,8 @@ export default {
           // notice_1 notice_2  notice_
           imgUrl: 'https://img.xiaoces.com/photos/news/notice_.png', // 对应系统通知
           iconBg: '#FFA726',
+          msgType: 'notice',
           title: '系统通知',
-          desc: '没有新的消息',
-          time: Date.now()-3900000,
           badge: false,
           numBadge: 5, // 无值则不显示
           width: '40rpx'
@@ -145,8 +144,7 @@ export default {
           imgUrl: 'https://img.xiaoces.com/photos/news/play1.png',
           // iconBg: '#FFA726',
           title: '活动中心',
-          desc: '没有新的消息',
+          msgType: 'event',
-          time: Date.now()-119900000,
           badge: false,
           numBadge: 25, // 无值则不显示
           width: '100rpx'
@@ -162,6 +160,9 @@ export default {
       ],
     }
   },
+  onShow() {
+    this.getMsgOverview();
+  },
   methods: {
     isTodayDate,
     navBack() {
@@ -177,7 +178,11 @@ export default {
         cancelText: '取消',
         confirmText: '确定',
         success: (res) => {
-
+          updateRead().then(response => {
+            if (response.code === 200) {
+              this.getMsgOverview();
+            }
+          })
         }
       })
       console.log('清除未读：当前页面全部已读')
@@ -204,6 +209,22 @@ export default {
       this.$modal.showToast('模块建设中~')
       console.log('进入AI识别：暂未开发')
     },
+    getMsgOverview() {
+      getMsgOverview().then(response => {
+        if (response.code === 200) {
+          this.messageList = response.data;
+          this.msgList.forEach((item, index) => {
+            this.messageList.forEach((msgItem, msgIndex) => {
+              if (msgItem.msgType === item.msgType) {
+                item.numBadge = msgItem.unreadCount
+                item.content = msgItem.content
+                item.createTime = msgItem.createTime
+              }
+            })
+          })
+        }
+      })
+    },
     handleItemClick(item) {
       this.$modal.showToast('敬请期待~')
       console.log('点击消息:', item.title)
@@ -225,7 +246,11 @@ export default {
         cancelText: '取消',
         confirmText: '确定',
         success: (res) => {
-
+          removeBatch({msgType:"status"}).then(response => {
+            if (response.code === 200) {
+              this.getMsgOverview()
+            }
+          })
         }
       })
     },

pages/news/subpages/deviceCenter/index.vue

@@ -31,7 +31,8 @@
           </view>
         </view>
       </view>
-      <uni-load-more  iconType="auto" :status="status" :content-text="contentText" />
+      <uni-load-more  iconType="auto"  v-if="messageList.length >=10"
+                      :status="status" :content-text="contentText" />
     </scroll-view>
     <view class="empty__item tn-margin-top empty__view" v-else>
       <tn-empty icon="https://resource.tuniaokj.com/images/empty/alien/2.png"
@@ -42,7 +43,7 @@
 </template>
 
 <script>
-import {listMessage} from "@/api/warn/message";
+import {listMessage, updateRead} from "@/api/warn/message";
 import * as mqttUtil from "@/utils/mqtt";
 
 export default {
@@ -68,9 +69,10 @@ export default {
   onLoad() {
     // 只允许查询七天以内消息默认展示今天
     // this.getSortDate();
-    this.getList()
+    this.getList();
   },
   onShow() {
+    this.updateRead();
     console.info("消息日志监听")
     mqttUtil.setOnMessageCallback(this.ackAlarm);
   },
@@ -164,15 +166,24 @@ export default {
           this.isHaveOldData = false;
         }
       }).finally(()=>{
+        if (this.messageList.length>10) {
           // 在数据更新后设置 scrollId
           this.$nextTick(() => {
             // 更新数据的长度
             this.scrollId = "item"+this.messageList[9].id;
           });
+        }
         // 结束刷新状态
         this.refreshing = false;
       })
     },
+    updateRead() {
+      updateRead({msgType: "status"}).then(response => {
+        if (response.code === 200) {
+          console.info("更新已读成功")
+        }
+      })
+    },
     onLoadMore() {
       if (!this.sortNewId) {
         this.sortNewId = this.msgList[this.msgList.length - 1].id;