indexLongle.html 15 KB

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