h5-cool-statistics-master.zip资源-CSDN文库

共24个文件

png：8个

psd：6个

js：4个

Echarts

html5

数据监控

15 浏览量 2023-01-01 09:52:56 上传评论收藏 3.55MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

h5-cool-statistics-master.zip （24个子文件）

h5-cool-statistics-master

lib

jquery.pagination.min.js 6KB

echarts.min.js 727KB

jquery.min.js 84KB

image

bg-p4.png 62KB

psd

bg-header.psd 367KB

bg-p3.psd 4.92MB

bg-body.psd 24KB

bg-p4.psd 3.88MB

bg-p1.psd 694KB

bg-p2.psd 484KB

bg-body.png 3KB

bg-p1.png 31KB

bg-p2.png 26KB

bg-p3.png 277KB

bg-header.png 63KB

data.js 6KB

screenshot

02.png 480KB

01.png 513KB

LICENSE 11KB

index2.html 20KB

.gitee

ISSUE_TEMPLATE.zh-CN.md 79B

PULL_REQUEST_TEMPLATE.zh-CN.md 138B

css

main.css 8KB

index.html 17KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <title>统计页面B（点标题切换统计）</title> <link rel="stylesheet" href="./css/main.css"> </head> <body> <div id="app2" class="container"> <div class="header"> <a href="./index.html" title="点击切换统计"><span class="title">∞ XX数据统计 ∞</span></a>  </div> <div class="content"> <div class="left"> <div class="left-1"> <div class="title"><span>XX对象统计</span></div> <div class="body"> <div class="time-wrapper"> <div class="item active" group="L1" val="1">月</div> <div class="item" group="L1" val="2">季</div> <div class="item" group="L1" val="3">年</div> </div> <div class="r1"><span id="p2-left1-total">0</span><span class="small">人</span></div> <div id="p2-ss-sex1" class="r2"></div> <div class="r3"> <div id="p2-ss-sex2" class="r3"></div> </div> </div>  </div> <div class="left-2"> <div class="title"><span>XX职级TOP5</span></div> <div class="body"> <div class="time-wrapper"> <div class="item active" group="L2" val="1">月</div> <div class="item" group="L2" val="2">季</div> <div class="item" group="L2" val="3">年</div> </div> <div class="r1"> <div id="p2-ss-l2-r1" class="r1"></div> </div> </div>  </div>  </div> <div class="center center-p2"> <div class="title"><span>XX次数统计</span></div> <div class="body"> <div class="time-wrapper"> <div class="item active" group="C" val="1">月</div> <div class="item" group="C" val="2">季</div> <div class="item" group="C" val="3">年</div> </div> <div class="r0"><span id="p2-center-total">0</span><span class="small">次</span></div> <div class="r-title-1"><div class="txt">XX类型分布统计</div></div> <div class="r1"> <div id="p2-ss-c-r1-c1" class="c1"></div> <div id="p2-ss-c-r1-c2" class="c2"></div> <div id="p2-ss-c-r1-c3" class="c3"></div> </div> <div class="r-title-1"><div class="txt">XX次数汇总趋势</div></div> <div class="r2"> <div id="p2-ss-c-r2"></div> </div> </div>  </div> <div class="right"> <div class="right-1"> <div class="title"><span>当年XX时长统计</span></div> <div class="body"> <div class="r1"> <div class="r-title-2"><div class="txt">XX总时长</div></div> <div class="number number-1"><span id="p2-r1-total">0</span><span class="small">小时</span></div> <div class="r-title-2"><div class="txt">平均时长</div></div> <div class="number"><span id="p2-r1-avg">0</span><span class="small">小时</span></div> <div class="r-title-2"><div class="txt">最长时间</div></div> <div class="number"><span id="p2-r1-max">0</span><span class="small">小时</span></div> <div class="r-title-2"><div class="txt">最短时间</div></div> <div class="number"><span id="p2-r1-min">0</span><span class="small">分钟</span></div> </div> </div>  </div> <div class="right-2"> <div class="title"><span>XX部门TOP5</span></div> <div class="body"> <div class="r1"> <div class="time-wrapper"> <div class="item active" group="R2" val="1">月</div> <div class="item" group="R2" val="2">季</div> <div class="item" group="R2" val="3">年</div> </div> <div class="r1"> <div id="p2-ss-r2-r1" class="r1"></div> </div> </div> </div>  </div>  </div> </div>  </div>  <script src="./lib/echarts.min.js"></script> <script src="./lib/jquery.min.js"></script> <script src="./lib/jquery.pagination.min.js"></script> <script src="./js/data.js"></script> <script> $(function () { initPage2(); // 绑定事件：月、季、年 $(".time-wrapper .item").click(function () { // 切换按钮样式 $(this).parent().find(".item").removeClass("active"); $(this).addClass("active"); var group = $(this).attr("group"); var val = $(this).attr("val"); // 点击[月、季、年]按钮时触发此事件（本地演示版代码） switch (group) { case "L1": initPage2Left1(val); break; case "L2": initPage2Left2(val); break; case "C": initPage2Center(val); break; case "R1": // Nothing. break; case "R2": initPage2Right2(val); break; default: break; } // 点击[月、季、年]按钮时触发此事件（从服务端获取数据版代码） // $.ajax({ // url: "/home/statistics2/single", // data: {group: group, type: val}, // type: "GET", // dataType: "json", // success: function (result) { // // console.log(result); // switch (group) { // case "L1": // data2.left1 = result; // initPage2Left1(val); // break; // case "L2": // data2.left2 = result; // initPage2Left2(val); // break; // case "C": // data2.center = result; // initPage2Center(val); // break; // case "R1": // // Nothing. // break; // case "R2": // data2.right2 = result; // initPage2Right2(val); // break; // default: // break; // } // }, // error: function (xhr, textStatus, errorThrown) { // // session失效 // if (xhr.status === 401

评论收藏

内容反馈