互联网数据监控面板数据监控页面

转载

我是数据分析师 2024-06-08 08:06:56

文章标签 互联网数据监控面板前端 javascript electron 数据 文章分类 运维

前言

小f搞了个Electron桌面应用的开源项目，最近在找人给他提PR，然而我前天半夜摸鱼，正好逛github逛到他仓库了，突然发现，欸，好像可以嵌进去一个掘金数据监控的插件，于是，在我的不懈（努力）摸鱼下，它完成了~

预览

这是掘金数据监控插件

互联网数据监控面板数据监控页面_前端

当然，还有许多其他的功能，预览效果如下（位置可变，可拖拽）

互联网数据监控面板数据监控页面_javascript_02

项目地址：Monit: 用于展示各种信息的桌面小组件

项目文档：Monit

大家喜欢的可以给个star⭐呀~

主要功能与大致实现过程

配置用户

在首次使用的时候会让大家输入自己的id用于获取数据信息，至于id在哪，大家去掘金自己主页就能看见啦，消息通知是可选项，具体情况可看下文介绍。

互联网数据监控面板数据监控页面_javascript_03

数据来源

我是使用个人页面中的两个接口来分别获取文章信息和个人信息数据的。

async getJuejinData() { 
     const { data } = await request.get(`user_api/v1/user/get?user_id=${this.config.user}`) 
     if (!data) { 
         alert('用户ID错误') 
     } 
     this.name = data.user_name 
     this.newFollower = data.follower_count 
     this.newLike = data.got_digg_count 
     this.newView = data.got_view_count 
     this.newPower = data.power 
     const { data: list } = await request.post(`content_api/v1/article/query_list`, { 
         cursor: '0', 
         sort_type: 2, 
         user_id: this.config.user, 
     }) 
     let articleInfo = [] 
     list.forEach((e) => { 
         articleInfo.push({ title: e.article_info.title, id: e.article_id }) 
     }) 
     this.newArticleInfo = articleInfo 
 },

数据更新

首先是在mounted中设置了每六十秒去获取最新的数据，并使用计算属性将增加/减少的数据显示出来，用户也可以点击增加/减少的数据加/减到前面的总数中。

setInterval(() => { 
     this.getJuejinData() 
 }, 60000)

viewChange() { 
     const changeNum = this.newView - this.view 
     if (changeNum >= 0) { 
         return '+' + changeNum 
     } else { 
         return changeNum 
     } 
 },

互联网数据监控面板数据监控页面_数据_04