Avue实现消息的实时展示

雄雄
评论:0 阅读:45
时间:2021-12-5 12:55:26 分类: 编程技术

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂

前言

一个功能写了大半天,主要是数据表设计的有点复杂,且这个项目是10月份就写的放那的,里面有些东西都忘记了……先看数据库结构,然后理思路,最后实现功能。

效果如下:

image-20211205202627021

其实现在看看,也不是很难。

实现思路

  1. 项目背景:大致就是给教练用的系统,这个消息功能就是XXX运动员完成了XX方案时,该系统就会实时通知(对了,忘记加定时了,,,发完文章之后就去加…)。
  2. 方案表有一个方案的完成状态,通过该字段做判断,在前台展示消息。
  3. 方案表新加了个更改时间字段,为了在前台展示完成该方案的时间。
  4. 实现思路是将完成了的方案,封装成消息公告对象,最后添加在消息表中,展示在前台。每次去查询方案表中已完成了的方案时,都会执行添加消息的方法,这样就会造成添加重复,不管完成了的方案有没有被添加过,都会重新添加一次,所以又在方案表中新加了个作为区分的字段。
  5. 在前台实现遍历消息公告表,遍历展示在指定位置。

代码实现

项目中用的是avue,HTML中的代码如下:

<avue-notice @click="handleClick"
            :data="noticeList"
                       :option="option"
                       @page-change="pageChange">

          </avue-notice>

methods中的代码如下:(主要是用来遍历消息)

getNoticeList(){
      getNoticeStsteByDeptId().then(res => {
        const data  = res.data.data;
        for (let i = 0; i < data.length; i++) {
          let listInfo =
          {
            title'',
            subtitle'',
            tag'',
            status0,
            id:0,
          };
          listInfo.subtitle = data[i].createTime;
          listInfo.tag = "查看";
          listInfo.title = data[i].title+"已经完成了"+data[i].content+"训练方案";
          listInfo.status = data[i].status;
          listInfo.id = data[i].id;
          if(data[i].status===1) {
            this.weiduNoticeCount += 1;
          }
          this.noticeList.push(listInfo);
        }
        this.xiaoxiLabel = "消息("+this.weiduNoticeCount+")";
      });

    },

声明的变量:

data () {
    return {
      activeName'second',
      option: {
        props: {
          img'img',
          title'title',
          subtitle'subtitle',
          tag'tag',
          status'status',
          id:'id'
        },
      },
      //公告信息
      noticeList: [],
      //未读的公告
      weiduNoticeCount:0,
      //消息的文本
      xiaoxiLabel:"",

    }
  },

单击公告时,将状态修改为已读

//单击时,修改状态为已完成
    handleClick(item){
      var id = item.id;
      //根据编号修改信息
      updateNew(id).then(() => {
        this.$message({
          type"success",
          message"已读!"
        });
        done();
        this.getNoticeList();
      }, error => {
        window.console.log(error);
        loading();
      });
    },

notice.js中的方法如下:

/**
 * 获取消息(已完成的,根据机构编号)
 * @param id
 * @returns {*}
 */

export const getNoticeStsteByDeptId = () => {
  return request({
    url'/api/blade-desk/notice/getNoticeStsteByDeptId',
    method'get',
  })
}

/**
 * 修改状态,原来的那个看不懂……
 * @returns {*}
 * @param id
 */

export const updateNew = (id) => {
  return request({
    url'/api/blade-desk/notice/updateNew',
    method'get',
    params: {
      id
    }
  })
}

最后就是后台控制器中的代码:

/**
  * 获取已完成的消息
  */

 @GetMapping("/getNoticeStsteByDeptId")
 @ApiOperationSupport(order = 1)
 @ApiOperation(value = "详情", notes = "传入notice")
 public R<List<Notice>> getNoticeStsteByDeptId() {
  //获取当前用户所在的部门
  Long deptId = Long.parseLong(WebUtil.getCookieVal("dept_id"));
  //根据部门和状态查询信息
  List<Programme> programmeList = programmeService.getPaogramStateBydeptId(2,deptId,0);
  //遍历方案集合,得到方案的修改时间、方案名称,完成方案的人,添加到公告表中
  for(Programme programme : programmeList){
   //方案民称
   String programName = programme.getPnme();
   //时间
   Date updatetime = programme.getUpdateTime();
   Athletes athletes = new Athletes();
   athletes.setId(programme.getPaid());
   Athletes detail = athletesService.getOne(Condition.getQueryWrapper(athletes));
   String athName = detail.getAname();
   //调用添加公告的方法
   Notice notice = new Notice();
   notice.setContent(programName);
   notice.setCreateTime(updatetime);
   notice.setTitle(athName);
   //公告状态,4已读.1未读,
   notice.setStatus(1);
   //添加
   noticeService.save(notice);
  }
  //查询公告里面的信息
  List<Notice> noticeList = noticeService.list();
  return R.data(noticeList);
 }


 /**
  * 修改信息
  */

 @GetMapping("/updateNew")
 @ApiOperation(value = "修改", notes = "传入notice")
 public R updateNew(Long id) {
  Notice notice = noticeService.getById(id);
  notice.setStatus(4);
  return R.status(noticeService.updateById(notice));
 }

OK,今天记录完毕!

标签: avue 消息实时展示