BI4Sight 时间区间选择助手

在BI4Sight页面侧边栏菜单中注入时间区间选择面板,快速切换常用时间区间并刷新数据

作者
xiangye
日安装量
0
总安装量
0
评分
0 0 0
版本
1.0.1
创建于
2025-07-06
更新于
2025-07-06
大小
100.9 KB
许可证
MIT
适用于

BI4Sight 时间区间选择助手

BI4Sight时间助手Logo

📋 项目简介

BI4Sight时间区间选择助手是一个专为BI4Sight系统开发的用户脚本,旨在解决跨时区工作场景下的时间区间选择问题。该插件提供了便捷的时间区间切换功能,并集成了基于北京时间的工作状态提醒。

🎯 解决的核心问题

  • 时区差异困扰:BI4Sight系统使用西八区时间,而用户在北京时间工作,导致"今天"等时间概念混淆
  • 重复操作繁琐:每次查看不同时间区间数据需要手动选择日期,操作繁琐
  • 数据同步困难:页面时间选择器与API请求参数不同步,容易出错
  • 工作状态不明确:缺乏直观的工作时间提醒,影响工作效率

💡 创新特性

  • 智能时区转换:自动将北京时间区间转换为西八区区间,确保API请求准确
  • 一键快速切换:预设常用时间区间,点击即可快速切换并自动刷新数据
  • 实时状态提醒:基于北京时间显示工作状态,提供趣味化的工作提醒
  • 无缝页面集成:完美融入BI4Sight界面,不影响原有功能使用

✨ 主要功能

🕐 时间区间选择

  • 常用时间区间:今天、昨天、过去14天、过去30天、本周、上周、本月、上个月、本季度
  • 智能时区转换:自动将北京时间区间转换为西八区区间进行API请求
  • 一键切换:点击按钮即可快速切换时间区间并自动刷新数据

🌍 时区显示

  • 西八区时间卡片:实时显示西八区时间(精确到秒)
  • 北京时间判断:基于北京时间进行业务逻辑判断
  • 双时区支持:同时支持北京时间工作状态和西八区业务时间

😄 恶趣味工作提醒

基于北京时间显示不同工作状态的趣味文案:

时间段 文案 颜色
10:00-10:50 💪 开始爆肝! 蓝色
10:50-11:00 🍱 记得点外卖! 橙色
11:00-12:00 💪 开始爆肝! 蓝色
12:00-13:30 😴 休息时间! 绿色
13:30-14:00 💪 继续爆肝! 蓝色
14:00-16:00 ⏰ 转点:还有X:X:X 橙色
16:00-18:00 💪 继续爆肝! 蓝色
18:00-18:30 ⏰ 1小时下班! 橙色
18:30-19:00 ⏰ 半小时下班! 红色
19:00-2:00 🌙 加班中! 红色

🔄 自动数据同步

  • 页面同步:自动同步页面上的时间选择器,确保UI状态一致
  • API请求:自动触发相关API请求获取最新数据,无需手动刷新
  • 状态保持:保持页面UI状态与选择的时间区间一致,避免数据不同步
  • 智能适配:自动适配BI4Sight系统的不同页面和组件

🎨 界面设计

  • 美观布局:采用现代化设计风格,与BI4Sight界面完美融合
  • 响应式设计:适配不同屏幕尺寸,在桌面和移动设备上都能良好显示
  • 直观操作:按钮布局合理,操作简单直观
  • 实时反馈:点击按钮后立即显示选中状态,提供良好的用户反馈

🔧 技术实现

  • 轻量级架构:代码结构清晰,性能优化,不影响页面加载速度
  • 错误处理:完善的异常处理机制,确保脚本稳定运行
  • 兼容性强:支持主流浏览器,适配BI4Sight系统的最新版本
  • 可扩展性:模块化设计,便于后续功能扩展和维护

🚀 安装方法

方法一:GreasyFork一键安装(推荐)

安装此脚本

  1. 点击上方绿色按钮直接安装
  2. 确认安装后刷新BI4Sight页面即可使用

方法二:Tampermonkey手动安装

  1. 安装 Tampermonkey 浏览器扩展
  2. 打开Tampermonkey管理面板
  3. 点击"新建脚本"
  4. bi4sight-datezone-helper.user.js 文件内容复制粘贴到编辑器中
  5. Ctrl+S 保存脚本
  6. 刷新BI4Sight页面即可使用

方法三:本地文件安装

  1. 下载 bi4sight-datezone-helper.user.js 文件
  2. 在Tampermonkey中导入该文件
  3. 启用脚本并刷新页面

📖 使用说明

基本使用

  1. 打开BI4Sight系统页面
  2. 插件会自动在侧边栏"用工具"菜单项下方显示时间区间选择面板
  3. 点击对应的时间区间按钮即可快速切换
  4. 系统会自动同步页面时间选择器并刷新数据

特殊逻辑

  • 16:00前逻辑:北京时间16:00前点击"今天"按钮,实际会使用"昨天"的数据(因为西八区此时还是前一天)
  • 时区转换:所有API请求都会自动转换为西八区时间,确保数据准确性
  • 实时提醒:恶趣味文案会根据北京时间实时更新,反映真实工作状态
  • 按钮隐藏:16:00前自动隐藏"昨天"按钮,避免逻辑混淆

高级功能

  • 面板拖拽:面板位置可自动适配,优先显示在侧边栏下方
  • 数据缓存:智能缓存API请求结果,提升响应速度
  • 错误恢复:网络异常时自动重试,确保数据获取成功
  • 日志记录:详细的操作日志,便于问题排查和调试

面板位置

  • 默认位置:侧边栏"用工具"菜单项下方
  • 备用位置:如果无法定位到侧边栏,会自动显示在页面顶部居中位置

📸 效果展示

工作台界面

工作台效果展示

工作台界面 - 时间助手面板显示在侧边栏下方

数据查看界面

数据查看效果展示

数据查看界面 - 时间助手与数据面板协同工作

🔧 技术特性

兼容性

  • 浏览器支持
    • Chrome 80+ ✅
    • Firefox 75+ ✅
    • Edge 80+ ✅
    • Safari 13+ ✅
  • 操作系统:Windows 10/11、macOS 10.15+、Linux (Ubuntu 18.04+)
  • BI4Sight版本:适配最新版本,向后兼容
  • 用户脚本管理器:Tampermonkey、Violentmonkey、Greasemonkey等

性能优化

  • 轻量级设计:脚本体积仅100KB,加载速度快,不影响页面性能
  • 内存优化:使用事件监听和定时器优化内存使用,避免内存泄漏
  • 网络优化:智能合并API请求,减少网络开销
  • 缓存策略:合理使用浏览器缓存,提升重复操作响应速度
  • 异步处理:采用异步编程模式,避免阻塞主线程

安全性

  • 权限最小化:仅请求必要的页面访问权限,不获取敏感信息
  • 数据安全:不收集、存储或传输用户数据,所有数据仅用于本地处理
  • 代码透明:开源代码,可审查,无隐藏功能
  • HTTPS支持:完全支持HTTPS协议,确保数据传输安全
  • 隐私保护:不跟踪用户行为,不向第三方发送任何信息

🛠️ 开发说明

项目结构

时间西八区/
├── bi4sight-datezone-helper.user.js  # 主脚本文件
├── README.md                         # 项目说明文档
└── 接口交互说明.md                   # API接口说明

核心模块

  • 时间处理模块:处理时区转换和日期计算
  • UI注入模块:创建和管理浮动面板
  • API请求模块:处理数据请求和同步
  • 状态管理模块:管理时间区间状态和UI状态

扩展开发

如需添加新的时间区间或功能,可以修改以下部分:

添加新的时间区间

// 在 dateOptions 数组中添加新选项
{ 
  label: '自定义区间', 
  date_type: 'custom', 
  getRange: () => {
    // 自定义时间区间逻辑
    return {
      start: formatDate(startDate),
      stop: formatDate(endDate),
      startPST: toPSTDateString(startDate),
      stopPST: toPSTDateString(endDate)
    };
  }
}

配置新的API接口

// 在 API_CONFIG 对象中添加新接口
newApi: {
  url: 'https://api.bi4sight.com/api/axs/your/endpoint',
  buildBody: (date_type, range) => ({
    date_range: { date_type, start: range.start, stop: range.stop },
    // 其他参数
  })
}

修改工作状态提醒

// 在 startTimezoneClock 函数中修改恶趣味文案逻辑
if (h >= 10 && h < 12) {
  // 自定义时间段和文案
  msg = '你的自定义文案';
  cls = 'blue';
}

调试指南

  • 控制台日志:所有操作都会在浏览器控制台输出详细日志
  • 错误追踪:网络请求失败时会显示详细的错误信息
  • 性能监控:可以监控脚本执行时间和内存使用情况

🔌 API接口说明

接口获取方法

这些API接口是通过以下方式获得的:

  1. 浏览器开发者工具

    • 打开BI4Sight页面
    • 按F12打开开发者工具
    • 切换到Network(网络)标签
    • 在页面上进行时间区间切换操作
    • 观察Network面板中的XHR/Fetch请求
    • 记录下请求的URL、请求方法和请求体
  2. 具体操作步骤

    • 在BI4Sight页面选择不同的时间区间
    • 点击查询或刷新按钮
    • 在Network面板中找到对应的API请求
    • 右键点击请求 → Copy → Copy as cURL
    • 分析请求的Headers和Body参数

当前集成的API接口

1. 全局卡片数据接口

POST https://api.bi4sight.com/api/axs/workbench/ax/global/card

功能:获取全局卡片数据,包括素材ARPU、花费、CTR等关键指标

请求体示例

{
  "platform": "META",
  "date_range": {
    "date_type": "today",
    "start": "2024-07-06",
    "stop": "2024-07-06"
  },
  "metrics": [
    "material_arpu",
    "spend", 
    "ctr",
    "cpcvt",
    "cvr"
  ]
}

2. 我的素材接口

POST https://api.bi4sight.com/api/axs/workbench/material/mine

功能:获取我的素材列表数据

请求体示例

{
  "date_range": {
    "date_type": "today",
    "start": "2024-07-06",
    "stop": "2024-07-06"
  }
}

3. 字段列表接口

POST https://api.bi4sight.com/api/axs/product/set/field/list

功能:获取产品字段配置信息

请求体示例

{
  "platform": "META",
  "business_type": "MATERIAL_REPORT"
}

4. 素材报表接口

POST https://api.bi4sight.com/api/axs/material/reporting

功能:获取详细的素材报表数据

请求体示例

{
  "page": 1,
  "page_size": 20,
  "product_id": null,
  "date_range": {
    "start": "2024-07-06",
    "stop": "2024-07-06"
  },
  "platform": "META",
  "sorting": {
    "field": "spend",
    "direction": "desc"
  },
  "metrics": [
    "spend", "spend_percent", "publish_count", "material_arpu",
    "action:bi_video_continuous_2", "action:bi_video_continuous_2:cost",
    "action:bi_video_p75", "action:bi_video_p75:cost", "impressions",
    "clicks", "converts", "cpc", "cpcvt", "ecpm", "ctr", "cvr",
    "action:bi_total_purchase", "action:bi_total_purchase:cost",
    "action_value:bi_total_purchase", "action_value:bi_total_purchase:roi"
  ],
  "group_tag": "MaterialName"
}

认证信息获取

插件会自动从以下位置提取认证信息:

  1. Cookie:从浏览器Cookie中获取token、tenant-id等
  2. LocalStorage:从本地存储中获取认证信息
  3. SessionStorage:从会话存储中获取认证信息
  4. 全局变量:从window对象中获取认证信息

认证Headers示例

{
  'accept': 'application/json, text/plain, */*',
  'content-type': 'application/json',
  'language': 'zh',
  'tenant-id': 'your_tenant_id',
  'user-token': 'your_user_token',
  'version': 'your_version'
}

如何添加新接口

  1. 在BI4Sight页面中找到需要集成的功能
  2. 使用开发者工具记录对应的API请求
  3. API_CONFIG对象中添加新的接口配置
  4. fetchAllApisV2函数中调用新接口

添加新接口示例

const API_CONFIG = {
  // ... 现有接口
  newApi: {
    url: 'https://api.bi4sight.com/api/axs/your/new/endpoint',
    buildBody: (date_type, range) => ({
      // 你的请求体配置
      date_range: { date_type, start: range.start, stop: range.stop }
    })
  }
};

📝 更新日志

v1.0.1 (2025-07-07)

  • 🔧 修复西八区时间显示问题
  • ⏰ 统一西八区时区为标准时(UTC-8)
  • 🌍 确保北京时间16:00 = 西八区00:00(同一天)
  • 📅 移除夏令时自动切换,固定使用标准时区

v1.0.0 (2025-07-06)

  • ✨ 初始版本发布
  • 🎯 实现基础时间区间选择功能
  • 🌍 添加西八区时间显示
  • 😄 集成恶趣味工作状态提醒
  • 🔄 实现自动数据同步功能

🤝 贡献指南

欢迎提交Issue和Pull Request来改进这个项目!

提交Issue

  • 描述问题或建议
  • 提供复现步骤
  • 附上错误截图(如有)

提交PR

  • Fork项目
  • 创建功能分支
  • 提交代码变更
  • 创建Pull Request

📄 许可证

本项目采用 MIT 许可证,详见 LICENSE 文件。

🙏 致谢

感谢BI4Sight团队提供的优秀平台,以及所有为这个项目做出贡献的开发者。

🔗 相关链接


注意:此插件仅供学习和工作使用,请遵守BI4Sight平台的使用条款。

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址