office_efficiency_index.js 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894
  1. //全局客户类型(1:公众;2:政企)
  2. /*大屏*/
  3. var g_custType="1";
  4. //数据日期
  5. var g_dataDate="20191231"
  6. //全局渠道信息
  7. var g_channelInfo={};
  8. var g_channelCode="";
  9. var g_channelName="";
  10. //门店基本信息
  11. function loadChannelBaseInfo(data){
  12. //获取渠道积分数据
  13. var staffHandleInfo=data.staffHandleInfo;
  14. //获取渠道总积分
  15. var channelJfMap=staffHandleInfo.channelJfMap || {};
  16. //获取渠道总积分
  17. var channelSum=channelJfMap.channelSum || 0;
  18. //获取渠道排名
  19. var channelOrder=channelJfMap.channelOrder || 1;
  20. var channelTotal=channelJfMap.channelTotal || 1
  21. var popval=String(parseFloat(channelOrder/channelTotal));
  22. //获取台席健康度得分
  23. var channelDeviceInfo=data.channelDeviceInfo;
  24. var finalDeviceScore=channelDeviceInfo.finalDeviceScore || 0;
  25. if(finalDeviceScore<=0){
  26. $("#base-info .device-score").find("img").attr("src","../static/images/star3.png");
  27. }else if(finalDeviceScore<0.95){
  28. $("#base-info .device-score").find("img").attr("src","../static/images/star2.png");
  29. }else{
  30. $("#base-info .device-score").find("img").attr("src","../static/images/star1.png");
  31. }
  32. $("#base-info .device-score").find(".score-val").text(finalDeviceScore+"分");
  33. //设置渠道当日客流量、订单量
  34. $("#base-info").find("div[type='dingdanVal']").text(channelDeviceInfo.channelOrderNum || "--");
  35. $("#base-info").find("div[type='custNumVal']").text(channelDeviceInfo.channelCustNum || "--");
  36. //设置门店基本信息-违规行为
  37. var channelStartWeiGui=staffHandleInfo.channelStartWeiGui || 0;
  38. if(channelStartWeiGui==1){
  39. $("#base-info .weigui").find("img").attr("src","../static/images/star1.png");
  40. }else{
  41. $("#base-info .weigui").find("img").attr("src","../static/images/star3.png");
  42. }
  43. $("#base-info .weigui").find(".score-val").text(channelStartWeiGui+"分");
  44. //设置门店基本信息-营销评级
  45. var yingxiaoval=1-popval;
  46. yingxiaoval=keepTwoDecimal(yingxiaoval);
  47. if(yingxiaoval<=0){
  48. $("#base-info .yingxiao").find("img").attr("src","../static/images/star3.png");
  49. }else if(yingxiaoval<0.95){
  50. $("#base-info .yingxiao").find("img").attr("src","../static/images/star2.png");
  51. }else{
  52. $("#base-info .yingxiao").find("img").attr("src","../static/images/star1.png");
  53. }
  54. $("#base-info .yingxiao").find(".score-val").text(yingxiaoval+"分");
  55. //设置门店基本信息-受理速度
  56. var avgTimeScore=0;
  57. var timeStepAnalysis=data.timeStepAnalysis;
  58. if(timeStepAnalysis.channelTime.length>0){
  59. avgTimeScore=timeStepAnalysis.channelTime[4]/timeStepAnalysis.provinceTime[4];
  60. if(avgTimeScore>1){
  61. avgTimeScore=avgTimeScore*0.335;
  62. }
  63. }
  64. avgTimeScore=keepTwoDecimal(avgTimeScore*0.5+0.5);
  65. avgTimeScore=avgTimeScore>1?1:avgTimeScore;
  66. if(avgTimeScore<=0){
  67. $("#base-info .avgtime").find("img").attr("src","../static/images/star3.png");
  68. }else if(avgTimeScore<0.95){
  69. $("#base-info .avgtime").find("img").attr("src","../static/images/star2.png");
  70. }else{
  71. $("#base-info .avgtime").find("img").attr("src","../static/images/star1.png");
  72. }
  73. $("#base-info .avgtime").find(".score-val").text(avgTimeScore+"分");
  74. //设置门店基本信息-业务量
  75. var yewuliangVal=0;
  76. var channelHandleInfo=data.channelHandleInfo;
  77. var orderNumData=channelHandleInfo.orderNumData;
  78. if(orderNumData.length>2){
  79. var t1=orderNumData[orderNumData.length-1];
  80. var t2=orderNumData[orderNumData.length-2];
  81. if(t1!=0 && t2!=0){
  82. yewuliangVal=t1>t2?t2/t1:t1/t2;
  83. }else{
  84. yewuliangVal=0.45;
  85. }
  86. if(yewuliangVal>1){
  87. yewuliangVal=yewuliangVal*0.335;
  88. }
  89. }
  90. yewuliangVal=keepTwoDecimal(yewuliangVal*0.5+0.5);
  91. yewuliangVal=yewuliangVal>1?1:yewuliangVal;
  92. if(yewuliangVal<=0){
  93. $("#base-info .yewuliang").find("img").attr("src","../static/images/star3.png");
  94. }else if(yewuliangVal<0.95){
  95. $("#base-info .yewuliang").find("img").attr("src","../static/images/star2.png");
  96. }else{
  97. $("#base-info .yewuliang").find("img").attr("src","../static/images/star1.png");
  98. }
  99. $("#base-info .yewuliang").find(".score-val").text(yewuliangVal+"分");
  100. //设置门店基本信息-排队机耗时
  101. var channelHandleInfo=data.channelHandleInfo;
  102. var callTime=channelHandleInfo.lineUpData[channelHandleInfo.lineUpData.length-1];
  103. $("#base-info").find("div[type='lineUpVal']").text(callTime|| "无");
  104. //开始计算门店星级
  105. var channelTotalScore=parseFloat(finalDeviceScore)+parseFloat(channelStartWeiGui)+parseFloat(yingxiaoval)+parseFloat(avgTimeScore)+parseFloat(yewuliangVal);
  106. channelTotalScore=String(channelTotalScore);
  107. channelTotalScore=keepTwoDecimal(channelTotalScore);
  108. $("#base-info").find(".channel-total-score").text(channelTotalScore+"分" || "--分");
  109. $("#base-info").find(".chanenl-star").empty();
  110. var starLen=Math.floor(channelTotalScore);
  111. for(var idx=0;idx<starLen;idx++){
  112. var img='<img src="../static/images/star1.png"/>';
  113. $("#base-info").find(".chanenl-star").append(img);
  114. }
  115. $("#base-info").find(".chanenl-star").append('<div>'+channelTotalScore+'分</div>');
  116. if(starLen<channelTotalScore){
  117. var img='<img src="../static/images/star2.png" style="width:21px;height:20px;"/>';
  118. $("#base-info").find("#chanenl-star").append(img);
  119. }
  120. var unit="";
  121. if(channelSum>90000){
  122. unit="万";
  123. channelSum=keepTwoDecimal(channelSum/10000);
  124. }
  125. var maxval=channelSum-channelSum*(1-popval),currval=channelSum;
  126. //特殊处理,优化饼图数据美观
  127. if(0==channelSum ){
  128. maxval=1000;
  129. }
  130. //
  131. //
  132. //
  133. var option = {
  134. series: [{
  135. type: 'pie',radius: ['65%', '80%'],color: '#E63F19',label: {normal: {position: 'center'}},
  136. data: [{
  137. value: currval,//当前值
  138. name: '积分',
  139. label: {normal: {formatter: currval + unit,textStyle: {fontSize: 16,color: '#FED546'}}}
  140. },{
  141. value: maxval,//比对值
  142. name: '积分',
  143. label: {normal: {formatter: function (params) {return '\n积分' },textStyle: {color: '#fff',fontSize: 13}}},
  144. itemStyle: {normal: {color: 'rgba(255,255,255,.2)'},emphasis: {color: '#fff'}},
  145. }]
  146. }]
  147. };
  148. var myChart= echarts.init(document.getElementById('integral_echart'));
  149. myChart.clear();
  150. myChart.setOption(option);
  151. $("#base-info").find(".channel-name").text(g_channelName || "XXXX");
  152. var popval2=keepTwoDecimal(popval);
  153. $("#base-info").find(".popval").text("全省前"+(popval2*100)+"%" || "全省前0%");
  154. var rePortData={};
  155. //厅办理业务平均耗时
  156. rePortData.channelAvgTime=staffHandleInfo.channelAvgTime;
  157. //厅排队机
  158. rePortData.lineUpData=channelHandleInfo.lineUpData
  159. //渠道积分排名占比
  160. rePortData.popval=popval;
  161. rePortData.custNumData=channelHandleInfo.custNumData;
  162. channelReportContent(rePortData);
  163. }
  164. //渠道报告内容建议说明
  165. function channelReportContent(rePortData){
  166. var reportContent="很抱歉,目前暂无可分析的数据";
  167. if(undefined!=rePortData.channelAvgTime && ""!=rePortData.channelAvgTime){
  168. if(rePortData.channelAvgTime>20){
  169. if(rePortData.popval<=0.3){
  170. reportContent="业绩很棒,受理偏慢,请适当加快受理";
  171. }else{
  172. reportContent="受理速度偏慢,影响客户感知,请加强受理技能培训";
  173. }
  174. }else{
  175. //判断厅是否有排队机
  176. if(rePortData.lineUpData.length>0){
  177. var callTime=rePortData.lineUpData[rePortData.lineUpData.length-1];
  178. var t1=rePortData.channelAvgTime-callTime;
  179. if(t1>=3){
  180. if(rePortData.popval<=0.3){
  181. reportContent="门店运营良好,可适当提升受理速度";
  182. }else{
  183. reportContent="门店运营良好,建议加强营销";
  184. }
  185. }else if(callTime>rePortData.channelAvgTime){
  186. reportContent="门店台席规划不合理,存在客户积压,请按业务类型分流";
  187. }else if(0<=t1 && t1<3){
  188. if(rePortData.popval<=0.3){
  189. reportContent="门店运营状态良好,台席规划合理,请继续保持";
  190. }else{
  191. reportContent="台席规划合理,建议适当加强营销";
  192. }
  193. }
  194. }else{
  195. var custNum=rePortData.custNumData[rePortData.custNumData.length-1] || 0;
  196. if(custNum<=50){
  197. if(rePortData.popval<=0.3){
  198. reportContent="营业效能规划合理,厅内客流量仍有上升空间";
  199. }else{
  200. reportContent="客流较小,请加强营销手段";
  201. }
  202. }else{
  203. if(rePortData.popval<=0.3){
  204. reportContent="厅店客流量大,营业效能规划合理,请继续保持";
  205. }else{
  206. reportContent="厅店客流量大,请把握机会加强营销";
  207. }
  208. }
  209. }
  210. }
  211. }
  212. $(".analysis-info").text(reportContent);
  213. }
  214. //门店受理详情
  215. function loadChannelHandleDetail(data){
  216. var option = {
  217. tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: '#fff'}}},
  218. legend: {
  219. icon: 'rect',
  220. itemWidth: 14,itemHeight: 5,itemGap:10,
  221. data: ['受理时长', '排队时长', '订单量','客流量'],
  222. right: '10px',top: '0px',
  223. textStyle: {fontSize: 12,color: '#fff'}
  224. },
  225. grid: {x:40,y:50,x2:45,y2:40},
  226. xAxis: [{
  227. type: 'category',boundaryGap: false,axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {textStyle: {color:'#fff'}},
  228. data: data.dataDateArr
  229. }],
  230. yAxis: [{
  231. type: 'value',
  232. axisTick: {
  233. show: false
  234. },
  235. axisLine: {lineStyle: {color: '#57617B'}},
  236. axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}分'},
  237. splitLine: {lineStyle: {color: '#57617B'}}
  238. },{
  239. type: 'value',
  240. axisTick: {
  241. show: false
  242. },
  243. axisLine: {lineStyle: {color: '#57617B'}},
  244. axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}个'},
  245. splitLine: {show: false,lineStyle: {color: '#57617B'}}
  246. }],
  247. series: [{
  248. name: '受理时长',type: 'line',smooth: true,lineStyle: {normal: {width: 2}},
  249. yAxisIndex:0,
  250. areaStyle: {
  251. normal: {
  252. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  253. offset: 0,
  254. color: 'rgba(185,150,248,0.3)'
  255. }, {
  256. offset: 0.8,
  257. color: 'rgba(185,150,248,0)'
  258. }], false),
  259. shadowColor: 'rgba(0, 0, 0, 0.1)',
  260. shadowBlur: 10
  261. }
  262. },
  263. itemStyle: {normal: { color: '#B996F8'}},
  264. data: data.handleTimeData
  265. }, {
  266. name: '排队时长',type: 'line',smooth: true,lineStyle: { normal: {width: 2}},
  267. yAxisIndex:0,
  268. areaStyle: {
  269. normal: {
  270. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  271. offset: 0,
  272. color: 'rgba(3, 194, 236, 0.3)'
  273. }, {
  274. offset: 0.8,
  275. color: 'rgba(3, 194, 236, 0)'
  276. }], false),
  277. shadowColor: 'rgba(0, 0, 0, 0.1)',
  278. shadowBlur: 10
  279. }
  280. },
  281. itemStyle: {normal: {color: '#03C2EC'}},
  282. data: data.lineUpData
  283. }, {
  284. name: '订单量',type: 'line',smooth: true,lineStyle: {normal: {width: 2}},
  285. yAxisIndex:1,
  286. areaStyle: {
  287. normal: {
  288. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  289. offset: 0,
  290. color: 'rgba(218, 57, 20, 0.3)'
  291. }, {
  292. offset: 0.8,
  293. color: 'rgba(218, 57, 20, 0)'
  294. }], false),
  295. shadowColor: 'rgba(0, 0, 0, 0.1)',
  296. shadowBlur: 10
  297. }
  298. },
  299. itemStyle: {normal: {color: '#DA3914'}},
  300. data: data.orderNumData
  301. },{
  302. name: '客流量',type: 'line',smooth: true,lineStyle: {normal: {width: 2}},
  303. yAxisIndex:1,
  304. areaStyle: {
  305. normal: {
  306. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  307. offset: 0,
  308. color: 'rgba(232, 190, 49, 0.3)'
  309. }, {
  310. offset: 0.8,
  311. color: 'rgba(232, 190, 49, 0)'
  312. }], false),
  313. shadowColor: 'rgba(0, 0, 0, 0.1)',
  314. shadowBlur: 10
  315. }
  316. },
  317. itemStyle: {normal: {color: '#E8BE31'}},
  318. data:data.custNumData
  319. }]
  320. };
  321. var myChart = echarts.init(document.getElementById('channel_handle_detail'));
  322. myChart.clear();
  323. if(data.handleTimeData.length>0){
  324. myChart.setOption(option);
  325. }else{
  326. noDataTip($("#channel_handle_detail"));
  327. }
  328. }
  329. //加载营业员受理详情
  330. function loadStaffHandleDetail(data){
  331. //获取员工违规信息
  332. var staffWgInfo=data.staffWgInfo;
  333. //获取员工积分信息
  334. var channelJfMap=data.channelJfMap;
  335. var channelStaffLen=data.channelStaffLen;
  336. var staffHandleInfo=data.staffHandleInfo || [],staffHandleInfoLen=staffHandleInfo.length;
  337. var html=[],index=0;
  338. for(var key in staffHandleInfo){
  339. var itemArr=staffHandleInfo[key];
  340. index++;
  341. var indexClass=(1==index)?"first":"";
  342. var wgCount=staffWgInfo[itemArr[0].staffCode] || "0";
  343. var tr1=[
  344. '<tr class="td-avg-time">',
  345. '<td colspan="3">',
  346. '<div class="index '+indexClass+'">'+itemArr[0].index+'</div>',
  347. '<div class="staff-name">'+itemArr[0].staffName+'</div>',
  348. '<div class="avg-time-label">|&nbsp;&nbsp;厅排名</div>',
  349. '<div class="avg-time-value">'+itemArr[0].index+'/'+channelStaffLen+'</div>',
  350. '</td>',
  351. '</tr>',
  352. '<tr>',
  353. '<td> ',
  354. '<div class="staff-cust-time">',
  355. '<span style="font-size:15px;">订单耗时</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+itemArr[0].avgTime+'分</span>',
  356. '</div>',
  357. '</td>',
  358. '<td>',
  359. '<div class="staff-order-count">',
  360. '<span style="font-size:15px;">订单量</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+itemArr[0].orderNum+'笔</span>',
  361. '</div>',
  362. '</td>',
  363. '<td>',
  364. '<div class="staff-alarm">',
  365. '<span style="font-size:15px;">违规告警</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+wgCount+'次</span>',
  366. '</div>',
  367. '</td>',
  368. '</tr> ',
  369. '<tr class="td-integral"> ',
  370. '<td colspan="3"> ',
  371. '<div class="integral-label">个人积分:</div> ',
  372. '<div class="integral-value">'+(channelJfMap[itemArr[0].staffCode+'_charge'] || 0)+'分</div> ',
  373. '<div class="integral-label" style="width:60px;">|厅排名</div>',
  374. '<div class="integral-value" style="width:100px;">'+(channelJfMap[itemArr[0].staffCode+"_index"] || 0)+'/'+(channelJfMap["channelLength"] || 0)+'</div>',
  375. '</td> ',
  376. '</tr> ',
  377. ];
  378. var tr2=[];
  379. if(itemArr.length>1){
  380. index++;
  381. var indexClass=(2==index)?"second":"";
  382. var wgCount=staffWgInfo[itemArr[1].staffCode] || "0";
  383. tr2=[
  384. '<tr><td colspan="3"><div class="split-line"></div></td></tr>',
  385. '<tr class="td-avg-time"> ',
  386. '<td colspan="3"> ',
  387. '<div class="index '+indexClass+'">'+itemArr[1].index+'</div>',
  388. '<div class="staff-name">'+itemArr[1].staffName+'</div>',
  389. '<div class="avg-time-label">|&nbsp;&nbsp;厅排名</div>',
  390. '<div class="avg-time-value">'+itemArr[1].index+'|'+channelStaffLen+'</div>',
  391. '</td>',
  392. '</tr>',
  393. '<tr>',
  394. '<td> ',
  395. '<div class="staff-cust-time">',
  396. '<span style="font-size:15px;">订单耗时</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+itemArr[1].avgTime+'分</span>',
  397. '</div>',
  398. '</td>',
  399. '<td>',
  400. '<div class="staff-order-count">',
  401. '<span style="font-size:15px;">订单量</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+itemArr[1].orderNum+'笔</span>',
  402. '</div>',
  403. '</td>',
  404. '<td>',
  405. '<div class="staff-alarm">',
  406. '<span style="font-size:15px;">违规告警</span><br/><span style="color:#00A8FE;font-size:18px;font-weight:600;">'+wgCount+'次</span>',
  407. '</div>',
  408. '</td>',
  409. '</tr> ',
  410. '<tr class="td-integral"> ',
  411. '<td colspan="3"> ',
  412. '<div class="integral-label">个人积分:</div> ',
  413. '<div class="integral-value">'+(channelJfMap[itemArr[1].staffCode+'_charge'] || 0)+'分</div> ',
  414. '<div class="integral-label" style="width:60px;">|厅排名</div>',
  415. '<div class="integral-value" style="width:100px;">'+(channelJfMap[itemArr[1].staffCode+"_index"] || 0)+'/'+(channelJfMap["channelLength"] || 0)+'</div>',
  416. '</td> ',
  417. '</tr> ',
  418. ]
  419. }
  420. var staffHtml=[
  421. '<div class="swiper-slide">',
  422. '<table>',
  423. tr1.join(""),
  424. tr2.join(""),
  425. '</table>',
  426. '</div> '
  427. ];
  428. html.push(staffHtml.join(""));
  429. }
  430. $("#staff-info").html("");
  431. if(html.length>0){
  432. var dataHtml="<div class='swiper-container visual_swiper_staffInfo'><div class='swiper-wrapper'>"+html.join("")+"</div>"
  433. $("#staff-info").html(dataHtml);
  434. var mySwiper1 = new Swiper('.visual_swiper_staffInfo', {
  435. autoplay: true,//可选选项,自动滑动
  436. speed:1500,//可选选项,滑动速度
  437. autoplay: {
  438. delay: 15000,//毫秒
  439. }
  440. });
  441. }else{
  442. noDataTip($("#staff-info"));
  443. }
  444. }
  445. //加载门店台席健康度详情
  446. function loadChannelDeviceDetail(data){
  447. var html=[];
  448. //设置台席灯
  449. $(".device-alarm").eq(2).find("span[type='greenGrade']").text(data.greenGrade || "0");
  450. $(".device-alarm").eq(1).find("span[type='redGrade']").text(data.redGrade || "0");
  451. $(".device-alarm").eq(0).find("span[type='grayGrade']").text(data.grayGrade || "0");
  452. var deviceInfo=data.deviceInfo;
  453. for(var key in deviceInfo){
  454. var itemArr=deviceInfo[key];
  455. itemArr[0].up=itemArr[0].up || "--";
  456. itemArr[0].down=itemArr[0].down || "--";
  457. var gradeImg="";
  458. if(1==itemArr[0].healthGrade){
  459. gradeImg="device-green.png";
  460. }else if(2==itemArr[0].healthGrade){
  461. gradeImg="device-red.png";
  462. }else{
  463. gradeImg="device-gray.png";
  464. }
  465. var tr1=[
  466. '<tr> ',
  467. '<td rowspan="3" class="device-img">',
  468. '<img src="../static/images/'+gradeImg+'"/>',
  469. '</td> ',
  470. '<td><div class="label-name">台席分数</div></td> ',
  471. '<td rowspan="3" colspan="2" class="kuan-dai"> ',
  472. '<div class="progress-label">上行宽度速率 '+itemArr[0].up+'</div>',
  473. '<div style="width:180px;height:15px;"> ',
  474. '<div class="progress" style="float:left;height:8px;width:180px;background-color:#383E60;">',
  475. '<div class="progress-bar progress-bar-striped" style="min-width:0;width:'+itemArr[0].up.replace("Mbps","")+'%"></div>',
  476. '</div>',
  477. '</div> ',
  478. '<div class="progress-label">下行宽度速率 '+itemArr[0].down+'</div>',
  479. '<div style="width:180px;height:15px;">',
  480. '<div class="progress" style="float:left;height:8px;width:180px;background-color:#383E60;">',
  481. '<div class="progress-bar progress-bar-striped" style="min-width:0;width:'+itemArr[0].down.replace("Mbps","")+'%"></div>',
  482. '</div>',
  483. '</div>',
  484. '</td>',
  485. '</tr>',
  486. '<tr>',
  487. '<td class="label-name score">'+itemArr[0].score+'分</td>',
  488. '</tr>',
  489. '<tr>',
  490. '<td class="label-name"><div class="os-name" title="'+(itemArr[0].osName || "--")+'">'+(itemArr[0].osName || "--")+'</div></td>',
  491. '</tr>',
  492. '<tr class="device-use">',
  493. '<td></td>',
  494. '<td><div class="nei-cun-size"><span>'+(itemArr[0].memory || 0)+'</span></div></td>',
  495. '<td><div class="cpu-use"><span>'+itemArr[0].cpuUsageAvg+'</span></div></td>',
  496. '<td><div class="nei-cun-use"><span>'+itemArr[0].memUsageAvg+'</span></div></td>',
  497. '</tr>',
  498. '<tr>',
  499. '<td></td>',
  500. '<td><div class="labe-value">内存大小</div></td>',
  501. '<td><div class="labe-value">cpu占用率</div></td>',
  502. '<td><div class="labe-value">内存使用率</div></td>',
  503. '</tr>'
  504. ];
  505. var tr2=[];
  506. if(itemArr.length>1){
  507. itemArr[1].up=itemArr[1].up || "--";
  508. itemArr[1].down=itemArr[1].down || "--";
  509. var gradeImg="";
  510. if(1==itemArr[1].healthGrade){
  511. gradeImg="device-green.png";
  512. }else if(2==itemArr[1].healthGrade){
  513. gradeImg="device-red.png";
  514. }else{
  515. gradeImg="device-gray.png";
  516. }
  517. tr2=[
  518. '<tr><td colspan="4"><div class="split-line"></div></td></tr>',
  519. '<tr> ',
  520. '<td rowspan="3" class="device-img">',
  521. '<img src="../static/images/'+gradeImg+'"/>',
  522. '</td> ',
  523. '<td><div class="label-name">台席分数</div></td> ',
  524. '<td rowspan="3" colspan="2" class="kuan-dai"> ',
  525. '<div class="progress-label">上行宽度速率 '+itemArr[1].up+'</div>',
  526. '<div style="width:180px;height:15px;"> ',
  527. '<div class="progress" style="float:left;height:8px;width:180px;background-color:#383E60;">',
  528. '<div class="progress-bar progress-bar-striped" style="min-width:0;width:'+itemArr[1].up.replace("Mbps","")+'%"></div>',
  529. '</div>',
  530. '</div> ',
  531. '<div class="progress-label">下行宽度速率 '+itemArr[1].down+'</div>',
  532. '<div style="width:180px;height:15px;">',
  533. '<div class="progress" style="float:left;height:8px;width:180px;background-color:#383E60;">',
  534. '<div class="progress-bar progress-bar-striped" style="min-width:0;width:'+itemArr[1].down.replace("Mbps","")+'%"></div>',
  535. '</div>',
  536. '</div>',
  537. '</td>',
  538. '</tr>',
  539. '<tr>',
  540. '<td class="label-name score">'+itemArr[1].score+'分</td>',
  541. '</tr>',
  542. '<tr>',
  543. '<td class="label-name"><div class="os-name" title="'+(itemArr[0].osName || "--")+'">'+(itemArr[0].osName || "--")+'</div></td>',
  544. '</tr>',
  545. '<tr class="device-use">',
  546. '<td></td>',
  547. '<td><div class="nei-cun-size"><span>'+(itemArr[1].memory || 0)+'</span></div></td>',
  548. '<td><div class="cpu-use"><span>'+itemArr[1].cpuUsageAvg+'</span></div></td>',
  549. '<td><div class="nei-cun-use"><span>'+itemArr[1].memUsageAvg+'</span></div></td>',
  550. '</tr>',
  551. '<tr>',
  552. '<td></td>',
  553. '<td><div class="labe-value">内存大小</div></td>',
  554. '<td><div class="labe-value">cpu占用率</div></td>',
  555. '<td><div class="labe-value">内存使用率</div></td>',
  556. '</tr>'
  557. ]
  558. }
  559. var deviceHtml=[
  560. '<div class="swiper-slide">',
  561. '<table>',
  562. tr1.join(""),
  563. tr2.join(""),
  564. '</table>',
  565. '</div> '
  566. ];
  567. html.push(deviceHtml.join(""));
  568. }
  569. $("#device-info").html("");
  570. if(html.length>0){
  571. var dataHtml="<div class='swiper-container visual_swiper_deviceInfo'><div class='swiper-wrapper'>"+html.join("")+"</div>"
  572. $("#device-info").html(dataHtml);
  573. var mySwiper1 = new Swiper('.visual_swiper_deviceInfo', {
  574. autoplay: true,//可选选项,自动滑动
  575. speed:1500,//可选选项,滑动速度
  576. autoplay: {
  577. delay: 15000,//毫秒
  578. }
  579. });
  580. }else{
  581. noDataTip($("#device-info"));
  582. }
  583. }
  584. //加载耗时步骤详情
  585. function loadTimeStepDetail(data){
  586. var option = {
  587. tooltip: {trigger: 'axis',},
  588. grid: {left:'6%',right: '5%',bottom:'10%'},
  589. legend: {
  590. icon: 'rect',
  591. itemWidth: 14,itemHeight: 5,itemGap:10,
  592. data:data.legendArr,
  593. left: '10px',top: '0px',
  594. textStyle: {fontSize: 12,color: '#fff'}
  595. },
  596. xAxis: [
  597. {
  598. type: 'category',
  599. axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {interval:0,textStyle: {color:'#fff',}},
  600. data:data.categoryArr
  601. }
  602. ],
  603. yAxis: [{
  604. type: 'value',
  605. axisTick: {
  606. show: false
  607. },
  608. axisLine: {lineStyle: {color: '#57617B'}},
  609. axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}秒'},
  610. splitLine: {
  611. show: true,
  612. lineStyle:{
  613. type:'dashed',
  614. color: ['#25CEF3']
  615. }
  616. }
  617. }],
  618. series: [
  619. {
  620. name:'厅耗时',
  621. type:'bar',
  622. barWidth:8,
  623. itemStyle : {
  624. normal: {
  625. barBorderRadius:[10, 10, 0, 0],
  626. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
  627. offset: 0,
  628. color: "#009AFD"
  629. }, {
  630. offset: 0.8,
  631. color: "#33DAFF"
  632. }], false),
  633. shadowColor: 'rgba(0, 0, 0, 0.1)',
  634. }
  635. },
  636. data:data.channelTime
  637. },
  638. {
  639. name:'省耗时',
  640. type:'bar',
  641. barWidth:8,
  642. barGap:2,
  643. itemStyle : {
  644. normal: {
  645. barBorderRadius:[10, 10, 0, 0],
  646. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
  647. offset: 0,
  648. color: "#E57230"
  649. }, {
  650. offset: 0.8,
  651. color: "#D8AE22"
  652. }], false),
  653. shadowColor: 'rgba(0, 0, 0, 0.1)',
  654. }
  655. },
  656. data:data.provinceTime
  657. }
  658. ]
  659. };
  660. var myChart = echarts.init(document.getElementById('time-step-detial'));
  661. myChart.clear();
  662. if(data.channelTime.length>0){
  663. myChart.setOption(option);
  664. }else{
  665. noDataTip($("#time-step-detial"));
  666. }
  667. }
  668. //加载业务类型耗时详情
  669. function loadBusinessTypeTimeDetail(data){
  670. var maxOrder=Math.max.apply(null,data.orderNum);
  671. var option = {
  672. title : {text:'',subtext:'',top:'3',right:'0'},
  673. tooltip: {trigger: 'axis'},
  674. grid: {left: '8%',right: '8%',bottom: '10%'},
  675. xAxis: {type: 'category',axisLine: {lineStyle: {color: '#57617B'}},axisLabel: {interval:0,textStyle: {color:'#fff',}},data: data.categoryArr},
  676. yAxis:[
  677. {
  678. type: 'value',name: '',
  679. axisLine: {lineStyle: {color: '#57617B'}},
  680. axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}分'},
  681. splitLine: {show: false}
  682. },
  683. {
  684. type: 'value',name: '',max:maxOrder+parseInt(maxOrder*0.2),
  685. axisLabel: {margin: 10,textStyle: {fontSize: 12},textStyle: {color:'#fff'},formatter:'{value}笔'},
  686. splitLine: {
  687. show: true,
  688. lineStyle:{
  689. type:'dashed',
  690. color: ['#25CEF3']
  691. }
  692. }
  693. }
  694. ],
  695. series: [
  696. {
  697. name:'耗时时间',
  698. type:'line',
  699. yAxisIndex:0,
  700. smooth: false,
  701. symbolSize:5,
  702. lineStyle: { normal: {width: 2}},
  703. areaStyle: {
  704. normal: {
  705. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  706. offset: 0,
  707. color: 'rgba(230, 48, 123, 0.8)'
  708. }, {
  709. offset: 0.8,
  710. color: 'rgba(230, 48, 123, 0)'
  711. }], false),
  712. shadowColor: 'rgba(0, 0, 0, 0.1)',
  713. shadowBlur: 10
  714. }
  715. },
  716. itemStyle: {normal: { color: '#DA2F78'}},
  717. data:data.avgTime
  718. },
  719. {
  720. name:'订单量',
  721. type:'bar',
  722. barWidth:12,
  723. yAxisIndex:1,
  724. itemStyle : {
  725. normal: {
  726. barBorderRadius:[10, 10, 0, 0],
  727. color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
  728. offset: 0,
  729. color: "#4033F9"
  730. }, {
  731. offset: 0.8,
  732. color: "#BA97F9"
  733. }], false),
  734. shadowColor: 'rgba(0, 0, 0, 0.1)',
  735. }
  736. },
  737. data:data.orderNum
  738. }
  739. ]
  740. };
  741. var myChart = echarts.init(document.getElementById('business-type-time-detial'));
  742. myChart.clear();
  743. if(data.orderNum.length>0){
  744. myChart.setOption(option);
  745. }else{
  746. noDataTip($("#business-type-time-detial"));
  747. }
  748. }
  749. //初始化基础信息
  750. function initBaseInfo(){
  751. //初始化日期
  752. /*$("#data-date").my97({
  753. dateFmt:'yyyyMMdd',
  754. minDate:"%y-{%M}-{%d-30}",
  755. maxDate:"%y-%M-{%d}",
  756. startDate: [{
  757. doubleCalendar: false,
  758. isShowWeek: false,
  759. isShowClear: false,
  760. readOnly: true
  761. }],
  762. onpicked:function(dp){
  763. g_dataDate=$('#data-date').val();
  764. $("#query-page-data").trigger("click");
  765. }
  766. });*/
  767. var dataDate="2019年12月31日";
  768. $("#td-data-date").text(dataDate);
  769. $(".cust-type-default").on("click",function(){
  770. $(this).addClass("active").siblings().removeClass("active");
  771. g_custType=$(this).attr("type");
  772. $("#query-page-data").trigger("click");
  773. });
  774. }
  775. //获取渠道参数
  776. function getGroupChannelParam(){
  777. var areaCode="";
  778. try{
  779. var cityId=$('#selectCity').combobox("getValue");
  780. var countyId=$('#selectCounty').combobox("getValue");
  781. if(""==areaCode && ""!=countyId){
  782. areaCode=countyId;
  783. }else if(""==areaCode && ""!=cityId){
  784. areaCode=cityId;
  785. }
  786. }catch(e){
  787. }
  788. var channelName=$.trim($("#channel_name").val());
  789. var channelParam={'areaCode':areaCode,"channelName":channelName};
  790. return channelParam;
  791. }
  792. function noDataTip($selector){
  793. var currModH=$selector.height();
  794. var top=currModH>180?"35%":"13%";
  795. var $li=[
  796. "<div class='no-data' style='width:90%;position: absolute;top:"+top+";text-align:center;color:#a59999;'>",
  797. "<img src='../static/images/no-data.png' style='width:200px;height:200px;'/>",
  798. "<div style='font-size:16px;opacity:0.7;color:#fff;'>暂无数据</div>",
  799. "</div>"
  800. ]
  801. $selector.append($li.join(""));
  802. }
  803. function keepTwoDecimal(currVal){
  804. var result = parseFloat(currVal);
  805. if (isNaN(result)) {
  806. return false;
  807. }
  808. result = Math.round(currVal *100) / 100;
  809. return result;
  810. }
  811. //初始化页面
  812. function loadPageData(){
  813. //获取渠道信息
  814. var groupChannelInfo=g_channelInfo;
  815. //第一步:优先判断url请求参数里面
  816. let param=JSON.parse(gDataGather.param);
  817. if(Object.keys(param).length>0){
  818. groupChannelInfo=param;
  819. gDataGather.param="{}";
  820. }
  821. if(Object.keys(groupChannelInfo).length==0){
  822. groupChannelInfo=window.localStorage.getItem("group-channel-info");
  823. if(undefined==groupChannelInfo || null==groupChannelInfo){
  824. groupChannelInfo={"channelCode":"11228790","groupChannelCode":"3201001965930","channelName":"中国电信南京分公司@玄武大钟亭营业厅"};
  825. }else{
  826. groupChannelInfo=JSON.parse(groupChannelInfo);
  827. }
  828. }else{
  829. window.localStorage.setItem("group-channel-info",JSON.stringify(groupChannelInfo));
  830. }
  831. //设置全局渠道编码、渠道名称
  832. g_channelCode=groupChannelInfo.channelCode;
  833. g_channelName=groupChannelInfo.channelName;
  834. //开始动画特效
  835. $('#load').show();
  836. $('#load').fadeOut(500,function(){
  837. });
  838. //引入office_efficiency_data.js缓存假数据
  839. if(data.code==0){
  840. $(".no-data").remove();
  841. //加载门店基本信息
  842. loadChannelBaseInfo(data);
  843. //加载门店历史受理详情
  844. loadChannelHandleDetail(data.channelHandleInfo);
  845. //加载营业员受理详情
  846. loadStaffHandleDetail(data.staffHandleInfo);
  847. //加载门店台席健康度详情
  848. loadChannelDeviceDetail(data.channelDeviceInfo);
  849. //加载耗时步骤分析
  850. loadTimeStepDetail(data.timeStepAnalysis);
  851. //加载业务类型耗时详情
  852. loadBusinessTypeTimeDetail(data.businessTypeAnalysis);
  853. }
  854. }
  855. $(function(){
  856. //加载基础信息
  857. initBaseInfo();
  858. //加载页面数据
  859. loadPageData();
  860. })