indexLongle.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. <!-- include 'header' -->
  2. <script src="<?= WEB_SITE_GLOBAL ?>js/echarts.min.js"></script>
  3. <link href="<?= WEB_SITE_GLOBAL ?>gridManager/common.css" rel="stylesheet" type="text/css">
  4. <link href="<?= WEB_SITE_GLOBAL ?>gridManager/gm.css" rel="stylesheet" type="text/css">
  5. <script src="<?= WEB_SITE_GLOBAL ?>gridManager/gm.js"></script>
  6. <body>
  7. <div class="mainLayout">
  8. <div class="mainMenu">
  9. <div class="menuItem">
  10. <a href="#" class="mLogo">CLD</a>
  11. <ul>
  12. <!-- include 'menu' -->
  13. </ul>
  14. </div>
  15. </div>
  16. <div class="warpContent">
  17. <div class="infoCenter">
  18. <div class="centerPanel">
  19. <div class="bigAddup" data-placement="bottom" data-toggle="ctooltip" data-original-title="客户总数">客户:{{sum}}</div>
  20. <ul class="sortAddup" data-placement="right" data-toggle="ctooltip" data-original-title="创建客户数">
  21. <!-- if !empty({{max}}) -->
  22. <li>
  23. <!-- if isset({{max.0}}) -->
  24. <span>{{max.0.1}}:</span>{{max.0.0}}
  25. <!-- endif -->
  26. </li>
  27. <li>
  28. <!-- if isset({{max.1}}) -->
  29. <span>{{max.1.1}}:</span>{{max.1.0}}
  30. <!-- endif -->
  31. </li>
  32. <li>
  33. <!-- if isset({{max.2}}) -->
  34. <span>{{max.2.1}}:</span>{{max.2.0}}
  35. <!-- endif -->
  36. </li>
  37. <!-- endif -->
  38. <dl class="hide sec use">
  39. <!-- loop max2 -->
  40. <dd><span>{{max2' value.1}}:</span>{{max2' value.0}}</dd>
  41. <!-- endloop -->
  42. </dl>
  43. </ul>
  44. <div class="bigAddup" data-placement="bottom" data-toggle="ctooltip" data-original-title="锁总数(使用率)">锁:{{Rsum}}({{Ssum}})</div>
  45. <ul class="sortAddup" data-placement="right" data-toggle="ctooltip" data-original-title="锁使用率">
  46. <li>
  47. <!-- if isset({{useL.0}}) -->
  48. <span>{{useL.0.1}}:</span>{{useL.0.0}}
  49. <!-- endif -->
  50. </li>
  51. <li>
  52. <!-- if isset({{useL.1}}) -->
  53. <span>{{useL.1.1}}:</span>{{useL.1.0}}
  54. <!-- endif -->
  55. </li>
  56. <li>
  57. <!-- if isset({{useL.2}}) -->
  58. <span>{{useL.2.1}}:</span>{{useL.2.0}}
  59. <!-- endif -->
  60. </li>
  61. <dl class="hide sec">
  62. <!-- loop useL2 -->
  63. <dd><span>{{useL2' value.1}}:</span>{{useL2' value.0}}</dd>
  64. <!-- endloop -->
  65. </dl>
  66. </ul>
  67. </div>
  68. <div class="centerRecord">
  69. <div class="sideBar">
  70. <div class="mostTab"></div>
  71. <div class="mostList autoHeightI1" data-placement="top" data-toggle="ctooltip" data-original-title="滚动条隐藏了,用鼠标滚轮下拉吧">
  72. <ul class="item">
  73. <li class="select <!-- if empty({{sid}}) -->now<!-- endif -->">
  74. <select id="cateselect">
  75. <!-- loop categorylist2 -->
  76. <!-- if isset({{categorylist2' value.did}}) -->
  77. <option value="{{categorylist2' value.cid}}-{{categorylist2' value.did}}" <!-- if {{categorylist2' value.cid}} == {{cid}} &&{{categorylist2' value.did}} == {{did}} -->selected<!-- endif -->>{{categorylist2' value.title}}-{{categorylist2' value.departmentName}}</option>
  78. <!-- else -->
  79. <option value="{{categorylist2' value.cid}}" <!-- if {{categorylist2' value.cid}} == {{cid}} -->selected<!-- endif -->>{{categorylist2' value.title}}</option>
  80. <!-- endif -->
  81. <!-- endloop -->
  82. </select>
  83. </li>
  84. <!-- loop staffList -->
  85. <li <!-- if {{staffList' value.sid}}=={{sid}} -->class="now" <!-- endif -->>
  86. <!-- if !empty({{staffList' value.departmentID}}) -->
  87. <a href="/longleStatistics?cid={{staffList' value.cid}}-{{staffList' value.departmentID}}&sid={{staffList' value.sid}}"><div class="avtra"><img src="{{staffList' value.avatar}}_2.jpg"></div>
  88. <h2>{{staffList' value.username}}<p>{{staffList' value.category}}</p></h2>
  89. </a>
  90. <!-- else -->
  91. <a href="/longleStatistics?cid={{staffList' value.cid}}&sid={{staffList' value.sid}}"><div class="avtra"><img src="{{staffList' value.avatar}}_2.jpg"></div>
  92. <h2>{{staffList' value.username}}<p>{{staffList' value.category}}</p></h2>
  93. </a>
  94. <!-- endif -->
  95. </li>
  96. <!-- endloop -->
  97. </ul>
  98. </div>
  99. </div>
  100. <div class="dateRecord">
  101. <div class="dateTab"><a href="/logStatistics" class="now">统计</a><a href="/index">记录</a></div>
  102. <div class="dateList autoHeightI1">
  103. <div class="chartTab"><ul class="tButton"><li >
  104. <!-- if empty({{did}}) -->
  105. <a href="/logStatistics?cid={{cid}}">通信录</a>
  106. <!-- else -->
  107. <a href="/logStatistics?cid={{cid}}-{{did}}">通信录</a>
  108. <!-- endif -->
  109. </li><li class="now"><a >锁</a></li></ul></div>
  110. <div class="warpCharts">
  111. <!--图表1-->
  112. <div id="chartContainer1" style="height: 300px; width: 100%;">
  113. </div>
  114. <!--图表1-->
  115. <div style="text-align:center" >
  116. <select class="search-action">
  117. {{dateHtml}}
  118. </select>
  119. </div>
  120. <section class="grid-main">
  121. <table id="feeList"></table>
  122. </section>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. <script type="text/javascript">
  131. var sid={{sid}};
  132. </script>
  133. <script src="<?= WEB_SITE_GLOBAL ?>gridManager/dashboard/longle.js"></script>
  134. <script type="text/javascript">autoFlashHeight();</script>
  135. <script type="text/javascript">
  136. // // 路径配置
  137. // require.config({
  138. // paths:{
  139. // 'echarts' : 'http://echarts.baidu.com/build/echarts'
  140. // }
  141. // });
  142. // // 使用
  143. // require(
  144. // [
  145. // 'echarts',
  146. // 'echarts/chart/pie', // 使用柱状图就加载bar模块,按需加载
  147. // 'echarts/chart/bar'
  148. // ],
  149. // function(ec) {
  150. //1 最近30天客户数量与记录趋势//
  151. // 基于准备好的dom,初始化echarts图表
  152. var myChart = echarts.init(document.getElementById('chartContainer1'));
  153. //var myChart = ec.init(document.getElementById('chartContainer1'));
  154. var option = {
  155. color:['#e9af68','#57b7b6','#e4575a','#959eac','#ffa500',
  156. '#d38b70','#8fb7cf','#cd5c5c','#5c616b','#40e0d0',
  157. '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
  158. '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
  159. tooltip : {
  160. trigger: 'axis',
  161. formatter: "{b} <br/>{a}:{c} 位<br/>{a1}:{c1} 条"
  162. },
  163. legend: {
  164. data:['借出','销售','赠送']
  165. },
  166. toolbox: {
  167. show : true,
  168. feature : {
  169. magicType : {show: true, type: ['line', 'bar']}
  170. }
  171. },
  172. calculable : true,
  173. xAxis : [
  174. {
  175. type : 'category',
  176. boundaryGap : false,
  177. data : {{statisticsDay}}
  178. }
  179. ],
  180. yAxis : [
  181. { color:'#000',
  182. type : 'value',
  183. axisLabel : {
  184. formatter: '{value}'
  185. },
  186. itemStyle: {
  187. normal: {
  188. lineStyle: {
  189. color:'#000000'
  190. }
  191. }
  192. },
  193. splitArea : {show : true}
  194. }
  195. ],
  196. series : [
  197. {
  198. name:'借出',
  199. type:'line',
  200. data:{{statisticsClient}},
  201. markPoint : {
  202. data : [
  203. {type : 'max', name: '最大值'},
  204. {type : 'min', name: '最小值'}
  205. ]
  206. },
  207. },
  208. {
  209. name:'销售',
  210. type:'line',
  211. data:{{statisticsLongle}},
  212. markPoint : {
  213. data : [
  214. {type : 'max', name: '最大值'},
  215. {type : 'min', name: '最小值'}
  216. ]
  217. },
  218. },
  219. {
  220. name:'赠送',
  221. type:'line',
  222. data:{{statisticsGet}},
  223. markPoint : {
  224. data : [
  225. {type : 'max', name: '最大值'},
  226. {type : 'min', name: '最小值'}
  227. ]
  228. },
  229. },
  230. ]
  231. };
  232. // 为echarts对象加载数据
  233. myChart.setOption(option);
  234. //1 最近30天客户数量与记录趋势//
  235. //2 最近30天客户数量地域//
  236. // 基于准备好的dom,初始化echarts图表
  237. /* var myChart = echarts.init(document.getElementById('chartContainer2'));
  238. // var myChart = ec.init(document.getElementById('chartContainer2'));
  239. var option = {
  240. color:['#e9af68','#57b7b6','#e4575a','#959eac','#ffa500',
  241. '#d38b70','#8fb7cf','#cd5c5c','#5c616b','#40e0d0',
  242. '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
  243. '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
  244. title : {
  245. text: '30天锁地区分布',
  246. textAlign:"left",
  247. textStyle:{
  248. fontSize: 12,
  249. color:"#666",
  250. fontWeight:"normal"
  251. }
  252. },
  253. tooltip : {
  254. trigger: 'item',
  255. formatter: "{a} <br/>{b} : {c} ({d}%)"
  256. },
  257. toolbox: {
  258. show : true,
  259. feature : {
  260. dataView : {show: true, readOnly:true},
  261. }
  262. },
  263. series : [
  264. {
  265. name:'锁所在地区',
  266. type:'pie',
  267. radius : '80%',
  268. center: ['50%', '50%'],
  269. data:{{statisticsLend}}
  270. }
  271. ]
  272. }; */
  273. // 为echarts对象加载数据
  274. /* myChart.setOption(option); */
  275. //2 客户地区分布//
  276. //3 最近30天客户数量地域//
  277. // 基于准备好的dom,初始化echarts图表
  278. /* var myChart = ec.init(document.getElementById('chartContainer3'));
  279. var option = {
  280. title : {
  281. text: '30天锁单位分布',
  282. textAlign:"left",
  283. textStyle:{
  284. fontSize: 12,
  285. color:"#666",
  286. fontWeight:"normal"
  287. }
  288. },
  289. tooltip : {
  290. trigger: 'item',
  291. formatter: "{a} <br/>{b} : {c} ({d}%)"
  292. },
  293. toolbox: {
  294. show : true,
  295. feature : {
  296. dataView : {show: true, readOnly:true},
  297. }
  298. },
  299. series : [
  300. {
  301. name:'锁所在单位',
  302. type:'pie',
  303. radius : '80%',
  304. center: ['50%', '50%'],
  305. data:{{statisticsNature}}
  306. }
  307. ]
  308. };
  309. var ecConfig = require('echarts/config');
  310. myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param){
  311. var selected = param.selected;
  312. var serie;
  313. var str = '当前选择: ';
  314. for (var idx in selected) {
  315. serie = option.series[idx];
  316. for (var i = 0, l = serie.data.length; i < l; i++) {
  317. if (selected[idx][i]) {
  318. str += '【系列' + idx + '】' + serie.name + ' : ' +
  319. '【数据' + i + '】' + serie.data[i].name + ' ';
  320. }
  321. }
  322. }
  323. document.getElementById('wrong-message').innerHTML = str;
  324. })
  325. // 为echarts对象加载数据
  326. myChart.setOption(option); */
  327. //3 单位地区分布//
  328. // }
  329. // );
  330. /* function longleSt(){
  331. var form = $('#LST');
  332. // $('#districtLv').val(2);
  333. form.submit();
  334. }
  335. function longleDi(){
  336. var form = $('#LST');
  337. form.submit();
  338. } */
  339. </script>
  340. <script>
  341. $('#cateselect').change(function(){
  342. window.location.href = "/longleStatistics?cid="+$(this).val();
  343. })
  344. </script>
  345. </body>