sys-home-hotline.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>热线首页</title>
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <!-- 引入mui样式 -->
  9. <link rel="stylesheet" type="text/css" href="../css/mui.css" />
  10. <!-- 引入弹窗及选择器样式 -->
  11. <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
  12. <link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
  13. <!-- 引入app样式 -->
  14. <link rel="stylesheet" type="text/css" href="../css/app.css" />
  15. <link rel="stylesheet" href="../css/app.new.css">
  16. <!-- 引入字体 -->
  17. <link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
  18. <link rel="stylesheet" type="text/css" href="../fonts/font-time.css" />
  19. </head>
  20. <body>
  21. <!-- 具备侧滑功能 根容器 -->
  22. <div id="offCanvasWrapper" class="mui-off-canvas-wrap">
  23. <aside class="mui-off-canvas-right">
  24. <div class="jt-menu-group">
  25. <div class="jt-menu-row" onclick="rx_open_queryPage()">
  26. <span class="app-icon app-icon-menu-query"></span>
  27. <span>热线数据查询</span>
  28. </div>
  29. </div>
  30. </aside>
  31. <!-- 主要内容 -->
  32. <div class="mui-inner-wrap">
  33. <div class="mui-scroll-wrapper">
  34. <div class="mui-scroll">
  35. <div class="jt-count-echarts-panel">
  36. <div class="jt-title">热线紧急程度占比</div>
  37. <div class="jt-content" id="divCountPie_jjcd"></div>
  38. <div class="jt-title">热线来源占比</div>
  39. <div class="jt-content" id="divCountPie_xxly"></div>
  40. <div class="jt-title">热线类别占比</div>
  41. <div class="jt-content" id="divCountPie_ldlb"></div>
  42. </div>
  43. </div>
  44. </div>
  45. <!-- 蒙版 -->
  46. <div class="mui-off-canvas-backdrop"></div>
  47. </div>
  48. </div>
  49. </body>
  50. </html>
  51. <!-- 引入mui脚本 -->
  52. <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
  53. <!-- 引入jQuery脚本 -->
  54. <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
  55. <!-- 引入通用脚本 -->
  56. <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
  57. <!-- 进入webview脚本 -->
  58. <script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
  59. <!-- 引入存储脚本 -->
  60. <script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
  61. <!-- 引入ajax脚本 -->
  62. <script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
  63. <!-- 图表脚本 -->
  64. <script src="../js/ECharts/echarts.js" type="text/javascript" charset="utf-8"></script>
  65. <!-- 自定义图表脚本 -->
  66. <script src="../js/CRECharts.js" type="text/javascript" charset="utf-8"></script>
  67. <!-- 引入应用中心脚本 -->
  68. <script src="../js/yyzx.open.js"></script>
  69. <!-- 本页独有脚本 -->
  70. <script type="text/javascript">
  71. /* mui初始化 */
  72. mui.init();
  73. /* 必须加 否则将导致数据表无法滚动 */
  74. mui('.mui-scroll-wrapper').scroll({
  75. scrollY: true, //是否竖向滚动
  76. scrollX: true, //是否横向滚动
  77. startX: 0, //初始化时滚动至x
  78. startY: 0, //初始化时滚动至y
  79. indicators: false, //是否显示滚动条
  80. deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
  81. bounce: false, //是否启用回弹
  82. });
  83. /* 页面尺寸 */
  84. var pageSize = getPageSize();
  85. /* 初始化完成 */
  86. plusInit(function() {
  87. /* 增加右侧菜单 */
  88. var wv = plus.webview.currentWebview();
  89. wv.setStyle({
  90. titleNView: {
  91. buttons: [{
  92. type: 'menu',
  93. onclick: openMenu,
  94. }]
  95. }
  96. });
  97. /* 重置图表的尺寸 */
  98. echartsSizeInit();
  99. /* 统计 */
  100. asyncCountHotlineData('jjcd', function(resData) {
  101. showCountPie(resData, 'divCountPie_jjcd', CountPie_JJCD);
  102. asyncCountHotlineData('xxly', function(resData) {
  103. showCountPie(resData, 'divCountPie_xxly', CountPie_XXLY);
  104. asyncCountHotlineData('ldlb', function(resData) {
  105. showCountPie(resData, 'divCountPie_ldlb', CountPie_LDLB);
  106. });
  107. });
  108. });
  109. });
  110. /* 打开右侧侧滑菜单 */
  111. function openMenu() {
  112. mui('.mui-off-canvas-wrap').offCanvas('show');
  113. }
  114. /**
  115. * 统计热线数据
  116. * @param {string} fldName 统计字段名称
  117. * @param {function} callback 回调函数
  118. */
  119. function asyncCountHotlineData(fldName, callback) {
  120. var iData = {
  121. fldName: fldName,
  122. }
  123. sendAjax({
  124. url: 'appCountHotlineByField',
  125. waitMessage: '统计中...',
  126. data: iData,
  127. success: function(resData) {
  128. if (callback) callback(resData);
  129. },
  130. error: function(err) {
  131. muiAlertError(err);
  132. }
  133. })
  134. }
  135. /* 统计组件 */
  136. var CountPie_JJCD = undefined;
  137. var CountPie_XXLY = undefined;
  138. var CountPie_LDLB = undefined;
  139. /**
  140. * 释放图表资源
  141. * @param {Object} obj 图表控件
  142. */
  143. function eChartsDispose(obj) {
  144. if (obj != null && obj != "" && obj != undefined) obj.dispose();
  145. }
  146. /**
  147. * @param {JSON} 数据
  148. * @param {string} domId 图表控件对应的domId
  149. * @param {Object} objEcharts 图表控件
  150. */
  151. function showCountPie(data, domId, objEcharts) {
  152. var countPieData = [];
  153. for (var i in data) {
  154. countPieData.push({
  155. value: data[i].selName,
  156. name: data[i].selCode,
  157. });
  158. }
  159. var pieRadiusWidth = '65%';
  160. if (pageSize.width <= PageSize.smartSize) {
  161. pieRadiusWidth = '55%';
  162. }
  163. eChartsDispose(objEcharts);
  164. objEcharts = new CrCharts({
  165. domId: domId,
  166. });
  167. objEcharts.createPie({
  168. data: countPieData,
  169. isAria: false,
  170. lineColor: 'rgb(133, 215, 253)',
  171. labelColor: 'rgb(255,255,255)',
  172. perLabelColor: 'rgb(129,181,218)',
  173. radius: [5, pieRadiusWidth],
  174. minAngle: 20,
  175. roseType: false,
  176. unit: '件',
  177. }, '占比统计');
  178. }
  179. </script>