123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>热线首页</title>
- <meta name="viewport"
- content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <!-- 引入mui样式 -->
- <link rel="stylesheet" type="text/css" href="../css/mui.css" />
- <!-- 引入弹窗及选择器样式 -->
- <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
- <link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
- <!-- 引入app样式 -->
- <link rel="stylesheet" type="text/css" href="../css/app.css" />
- <link rel="stylesheet" href="../css/app.new.css">
- <!-- 引入字体 -->
- <link rel="stylesheet" type="text/css" href="../fonts/TTTGB-Medium.css" />
- <link rel="stylesheet" type="text/css" href="../fonts/font-time.css" />
- </head>
- <body>
- <!-- 具备侧滑功能 根容器 -->
- <div id="offCanvasWrapper" class="mui-off-canvas-wrap">
- <aside class="mui-off-canvas-right">
- <div class="jt-menu-group">
- <div class="jt-menu-row" onclick="rx_open_queryPage()">
- <span class="app-icon app-icon-menu-query"></span>
- <span>热线数据查询</span>
- </div>
- </div>
- </aside>
- <!-- 主要内容 -->
- <div class="mui-inner-wrap">
- <div class="mui-scroll-wrapper">
- <div class="mui-scroll">
- <div class="jt-count-echarts-panel">
- <div class="jt-title">热线紧急程度占比</div>
- <div class="jt-content" id="divCountPie_jjcd"></div>
- <div class="jt-title">热线来源占比</div>
- <div class="jt-content" id="divCountPie_xxly"></div>
- <div class="jt-title">热线类别占比</div>
- <div class="jt-content" id="divCountPie_ldlb"></div>
- </div>
- </div>
- </div>
- <!-- 蒙版 -->
- <div class="mui-off-canvas-backdrop"></div>
- </div>
- </div>
- </body>
- </html>
- <!-- 引入mui脚本 -->
- <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
- <!-- 引入jQuery脚本 -->
- <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
- <!-- 引入通用脚本 -->
- <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
- <!-- 进入webview脚本 -->
- <script src="../js/webview.js" type="text/javascript" charset="utf-8"></script>
- <!-- 引入存储脚本 -->
- <script src="../js/save.js" type="text/javascript" charset="utf-8"></script>
- <!-- 引入ajax脚本 -->
- <script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
- <!-- 图表脚本 -->
- <script src="../js/ECharts/echarts.js" type="text/javascript" charset="utf-8"></script>
- <!-- 自定义图表脚本 -->
- <script src="../js/CRECharts.js" type="text/javascript" charset="utf-8"></script>
- <!-- 引入应用中心脚本 -->
- <script src="../js/yyzx.open.js"></script>
- <!-- 本页独有脚本 -->
- <script type="text/javascript">
- /* mui初始化 */
- mui.init();
- /* 必须加 否则将导致数据表无法滚动 */
- mui('.mui-scroll-wrapper').scroll({
- scrollY: true, //是否竖向滚动
- scrollX: true, //是否横向滚动
- startX: 0, //初始化时滚动至x
- startY: 0, //初始化时滚动至y
- indicators: false, //是否显示滚动条
- deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
- bounce: false, //是否启用回弹
- });
- /* 页面尺寸 */
- var pageSize = getPageSize();
- /* 初始化完成 */
- plusInit(function() {
- /* 增加右侧菜单 */
- var wv = plus.webview.currentWebview();
- wv.setStyle({
- titleNView: {
- buttons: [{
- type: 'menu',
- onclick: openMenu,
- }]
- }
- });
- /* 重置图表的尺寸 */
- echartsSizeInit();
- /* 统计 */
- asyncCountHotlineData('jjcd', function(resData) {
- showCountPie(resData, 'divCountPie_jjcd', CountPie_JJCD);
- asyncCountHotlineData('xxly', function(resData) {
- showCountPie(resData, 'divCountPie_xxly', CountPie_XXLY);
- asyncCountHotlineData('ldlb', function(resData) {
- showCountPie(resData, 'divCountPie_ldlb', CountPie_LDLB);
- });
- });
- });
- });
- /* 打开右侧侧滑菜单 */
- function openMenu() {
- mui('.mui-off-canvas-wrap').offCanvas('show');
- }
- /**
- * 统计热线数据
- * @param {string} fldName 统计字段名称
- * @param {function} callback 回调函数
- */
- function asyncCountHotlineData(fldName, callback) {
- var iData = {
- fldName: fldName,
- }
- sendAjax({
- url: 'appCountHotlineByField',
- waitMessage: '统计中...',
- data: iData,
- success: function(resData) {
- if (callback) callback(resData);
- },
- error: function(err) {
- muiAlertError(err);
- }
- })
- }
- /* 统计组件 */
- var CountPie_JJCD = undefined;
- var CountPie_XXLY = undefined;
- var CountPie_LDLB = undefined;
- /**
- * 释放图表资源
- * @param {Object} obj 图表控件
- */
- function eChartsDispose(obj) {
- if (obj != null && obj != "" && obj != undefined) obj.dispose();
- }
- /**
- * @param {JSON} 数据
- * @param {string} domId 图表控件对应的domId
- * @param {Object} objEcharts 图表控件
- */
- function showCountPie(data, domId, objEcharts) {
- var countPieData = [];
- for (var i in data) {
- countPieData.push({
- value: data[i].selName,
- name: data[i].selCode,
- });
- }
- var pieRadiusWidth = '65%';
- if (pageSize.width <= PageSize.smartSize) {
- pieRadiusWidth = '55%';
- }
- eChartsDispose(objEcharts);
- objEcharts = new CrCharts({
- domId: domId,
- });
- objEcharts.createPie({
- data: countPieData,
- isAria: false,
- lineColor: 'rgb(133, 215, 253)',
- labelColor: 'rgb(255,255,255)',
- perLabelColor: 'rgb(129,181,218)',
- radius: [5, pieRadiusWidth],
- minAngle: 20,
- roseType: false,
- unit: '件',
- }, '占比统计');
- }
- </script>
|