RM: 基于页面结构化数据生成报表,一键导出图片,生成定制图表 文末有效果图 , 开放部分代码

// ==UserScript==
// @name         RM
// @namespace    https://fizzz.blog.csdn.net/
// @version      0.1
// @description  Report Maker: 基于页面结构化数据生成报表
// @author       Fizz
// @match        https://**/**
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @require      https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js
// @resource bootstrapcss https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css

// ==/UserScript==

(function() {
  'use strict';
  let pageTitle = ''
  let groupTotalPerson = {'第一组':37,'第二组':37,'第三组': 39} // 各组总人数

  // 获取页面表格数据
  function getPageTableData () {
    let pageTableData = []
    let allTr = document.querySelectorAll('#main-content .confluenceTable tbody [role="row"]'); // 获取所有行
    [...allTr].forEach(trItem => {
        let allTrInnerTd = trItem.querySelectorAll('td')
        let name = allTrInnerTd[0].innerHTML.trim()
        if (name !== '<br>' && name) {
          let groupName = allTrInnerTd[1].innerText
          let date = allTrInnerTd[2].innerText
          let distance = allTrInnerTd[3].innerText
          let integral = allTrInnerTd[4].innerText
          let img = allTrInnerTd[5].innerText
          let remark = allTrInnerTd[6].innerText
          let trDataItem = {name,date,distance,integral,img,remark, groupName}
          pageTableData.push(trDataItem)
        }
    })
    return pageTableData
  }

  // 添加样式
  function addStyle () {
    let bootstrapcss = GM_getResourceText('bootstrapcss')
    bootstrapcss = bootstrapcss + `
      .fizz_inject_wrap_div{position: fixed;font-size: 14px !important;width: 100%;display: flex;justify-content: center;height: 100%;z-index: 100;z-index: 999;top:0;background: #fff;padding-top:20px;background-image:url('https://cf.qizhidao.com/download/attachments/63810224/1hikedr.png?version=1&modificationDate=1576220765550&api=v2')}
      .text-danger.import-info{color: #CC9900;font-weight: 700;font-size:16px}
      .myinject{position: fixed;bottom: 20px;right: 20px;vertical-align: middle;text-align: center;cursor: pointer;z-index: 999;padding: 5px 14px;border-radius: 4px;background-color: #2e6da4;border-color: #2e6da4;opacity: .2;color: #fff;}
      .myinject:hover{opacity: 1;color: #fff;}
      .fizz_operation_div{position: fixed;right: 30px;bottom: 50px;}
      .fizz_operation_div * {margin: 0;padding: 0;border: 0;outline: 0;font-size: 14px;box-sizing: content-box;}
      .fizz_operation_div ul,.fizz_operation_div li{list-style: none;border-left: 1px solid #2e6da4;border-right: 1px solid #2e6da4;margin: 0;padding: 0;outline: 0;font-size: 14px;box-sizing: content-box;}
      .fizz_operation_div li{padding: 6px 0px;text-align: center;cursor: pointer;vertical-align: middle;line-height: 20px;height: 20px;}
      .fizz_operation_div li:hover{background-color: #337ab7;color: #fff;}
      .fizz_operation_div .fizz_main_btn {border: none;outline: none;padding: 8px 14px;border-radius: 4px;background-color: #2e6da4;border-color: #2e6da4;opacity: .5;color: #fff;vertical-align: middle;text-align: center;cursor: pointer;line-height: 16px;vertical-align: middle;}
      .fizz_operation_div .fizz_main_btn:hover{opacity: 1;}
      .fizz_operation_div .fizz_menu_ul{display: none;}
      .fizz_operation_div:hover .fizz_menu_ul{display: block;}
      .hidden{display:none}
    `
    GM_addStyle(bootstrapcss)
  }

  // 处理表格数据,返回Map
  function showRes (pageTableData) {
    const resMap = new Map();
    // ...
    let groupHtmlStringObj = ceateResTableDiv(resMap)
    dataRender(groupHtmlStringObj)
  }

  // 创建显示结果的Div resMap:{'A': {},'B': {}}
  function ceateResTableDiv (resMap) {
    let groupHtmlStringObj = {
      '第一组': {groupTotalIntegral: 0, groupTotalDistance: 0, groupTotalJoinNum: 0, finalTotalIntegral: 0, joinPersonData: []},
      '第二组': {groupTotalIntegral: 0, groupTotalDistance: 0, groupTotalJoinNum: 0, finalTotalIntegral: 0, joinPersonData: []},
      '第三组': {groupTotalIntegral: 0, groupTotalDistance: 0, groupTotalJoinNum: 0, finalTotalIntegral: 0, joinPersonData: []}
    }
    // ...
    return groupHtmlStringObj
  }

  // 表格数据渲染到页面 {'第一组':{groupTotalIntegral: 0, groupTotalDistance: 0, groupTotalJoinNum: 0, joinPersonData: []},'第二组': [], '第三组': []}
  function dataRender (groupObjData) {
    console.log(groupObjData)
    for(let [key,value] of Object.entries(groupObjData)) {
     // ...
    }
  }

  // 关闭报表页面,视图
  function closeReportView () {
    document.querySelector('.fizz_inject_wrap_div').classList.add('hidden')
  }

  // 导出报表为图片
  function exportReportImg () {
    // ...
  }

  // 创建报表页面
  function creatReportWrapDiv () {
    let reportWrapDiv = document.createElement('div')
    let htmlString = `
      <div>
        ....
      </div>
    `
    reportWrapDiv.innerHTML = htmlString
    reportWrapDiv.classList.add('fizz_inject_wrap_div')
    reportWrapDiv.classList.add('hidden')
    return reportWrapDiv
  }

  // 显示报表图标视图
  function showReportChatView () {
    alert('此功能仅限高级会员使用,请使用星巴克咖啡充值解锁')
  }

  // 显示个人维度图标视图
  function showPersonView () {
    alert('此功能仅限高级会员使用,请使用星巴克咖啡充值解锁')
  }

  // 页面初始化函数
  function initFun () {
    pageTitle = document.querySelector('#title-text').innerText
    let body = document.querySelector('body')
    let injectDiv = document.createElement('div')
    injectDiv.classList.add('myinject')
    injectDiv.title = '生成报表'
    injectDiv.innerHTML = `R  M`
    injectDiv.onclick = function (e) {
      document.querySelector('.fizz_inject_wrap_div').classList.remove('hidden')
      let pageTableData = getPageTableData()
      showRes(pageTableData)
    }
    addStyle()
    body.appendChild(injectDiv)
    let reportWrapDiv = creatReportWrapDiv()
    body.appendChild(reportWrapDiv)

    document.querySelector('#fizz_rm_close_report').addEventListener('click', closeReportView, false)
    document.querySelector('#fizz_rm_export_report_img').addEventListener('click', exportReportImg, false)
    document.querySelector('#fizz_rm_report_chart_img').addEventListener('click', showReportChatView, false)
    document.querySelector('#fizz_rm_person_rank_img').addEventListener('click', showPersonView, false)
  }

  initFun()

})();