可视化消息列表

src/components/vBottomMenu.vue

@@ -154,43 +154,24 @@
 					<el-button size="small" icon="el-icon-bank-card" @click="refreshTaskList">任务</el-button>
 				</el-badge>
 			</el-popover>
-			<el-popover placement="top" trigger="click">
-				<div class="btm-r-pop-info">
-					<div class="btm-r-pop-info-box" v-for="(item,index) in 0">
-						<div class="btm-r-pop-info-tit">
-							<h3>火险任务</h3>
-						</div>
-						<div class="btm-r-pop-info-con">
-							<div class="btm-r-pop-info-list">
-								<div class="btm-r-pop-info-list-name">标题</div>
-								<div class="btm-r-pop-info-list-text">四平阿斯利康大姐夫啊路上的风景可丽金啊水电分离家</div>
-							</div>
-							<div class="btm-r-pop-info-list">
-								<div class="btm-r-pop-info-list-name">发起人</div>
-								<div class="btm-r-pop-info-list-text">张三</div>
-							</div>
-							<div class="btm-r-pop-info-list">
-								<div class="btm-r-pop-info-list-name">发起时间</div>
-								<div class="btm-r-pop-info-list-text">2022-09-05 12:12:15</div>
-							</div>
-							<div class="btm-r-pop-info-list">
-								<div class="btm-r-pop-info-list-name">关联事件</div>
-								<div class="btm-r-pop-info-list-text">啊萨杜拉副科级啊萨杜拉副科级</div>
-							</div>
-						</div>
-						<div class="btm-r-pop-info-btm">
-							<el-link type="success">查看详情</el-link>
-							<div class="btm-r-pop-info-btm-btn">
-								<el-button type="danger">拒绝</el-button>
-								<el-button type="primary">领取</el-button>
-							</div>
-						</div>
-					</div>
-				</div>
-				<el-badge :value="0" slot="reference">
-					<el-button size="small" icon="el-icon-chat-line-round">消息</el-button>
-				</el-badge>
-			</el-popover>
+      <el-popover placement="top" trigger="click">
+        <div class="btm-r-pop-info">
+          <div class="btm-r-pop-info-box" v-for="(item,index) in messageList">
+            <div class="btm-r-pop-info-con">
+              <div class="btm-r-pop-info-list">
+                <div class="btm-r-pop-info-list-name">{{item.title}}</div>
+                <div class="btm-r-pop-info-list-text">{{item.content}}</div>
+              </div>
+            </div>
+            <div class="btm-r-pop-info-btm">
+              <el-link type="success" @click="selectMessageById(item.id)">标记已读</el-link>
+            </div>
+          </div>
+        </div>
+        <el-badge :value="messageCount" slot="reference">
+          <el-button size="small" icon="el-icon-chat-line-round">消息</el-button>
+        </el-badge>
+      </el-popover>
 			<!-- 警报铃 必须放在这,放在别处不好使 -->
 			<div class="bell" v-if="eventWarn" @click="updateAlertFalse">
 				<div class="dot"></div>
@@ -371,7 +352,10 @@
 		getEventDetail,
 		selectTaskDtpts,
 		receiveTask,
-		refusedTask
+		refusedTask,
+    selectMessageCount,
+    selectMessageList,
+    selectMessageById
 	} from '@/api/forest'
 	import {
 		selectFarmByDeptId
@@ -381,6 +365,7 @@
 	} from '@/api/system/dept'
 	import supermapTaskDialog from '@/components/supermap' //超图
 	import TcPlayer from '@/components/TcPlayer' //视频预览
+  import Cookies from 'js-cookie';
 
 	export default {
 		components: {
@@ -427,6 +412,9 @@
 				taskCount: 0, //任务数量
 				taskList: 0, //任务列表
 
+        messageCount: 0, //消息数量
+        messageList: 0, //消息列表
+
 				btmTipIndent: '', //图例收起弹出
 				eventLocationVisible: false,
 				showChild: false,
@@ -519,6 +507,12 @@
 			deptTreeselect().then(response => {
 				this.deptOptionsLiandong = response.data
 			})
+      //任务列表
+      this.selectTaskList()
+      /** 获取消息个数 */
+      this.selectMessageCount();
+      /** 获取消息列表 */
+      this.selectMessageList();
 		},
 		methods: {
 			filterbanNode(value, data) {
@@ -715,7 +709,29 @@
 					this.taskCount = res.data.length
 				})
 			},
-			handleCheckedCitiesChangeBan(value) {
+
+      selectMessageById(id) {
+        selectMessageById(id).then(response => {
+          /** 获取消息个数 */
+          this.selectMessageCount();
+          /** 获取消息列表 */
+          this.selectMessageList();
+        });
+      },
+      /** 获取消息个数 */
+      selectMessageCount(){
+        selectMessageCount(Cookies.get("userId")).then(response => {
+          this.messageCount = response.data
+        });
+      },
+      /** 获取消息列表 */
+      selectMessageList(){
+        selectMessageList(Cookies.get("userId")).then(response => {
+          this.messageList = response.data
+        });
+      },
+
+      handleCheckedCitiesChangeBan(value) {
 				this.choseLayerSwitchingList(this.banCheckList)
 			},
 			handleCheckedCitiesChangeChang(value) {