charts2.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564
  1. 'use strict';
  2. app.controller('charts2Ctrl', ["$scope", "$rootScope", "$state", "$timeout", "$interval", "$http", "$cookieStore", "Restangular", "api_hkreport", function($scope, $rootScope, $state, $timeout, $interval, $http, $cookieStore, Restangular, api_hkreport) {
  3. $scope.ceshi=["110", "105", "84", "125", "110", "92", "98"];
  4. // 来电趋势图
  5. var dom_laidianqushitu = document.getElementById("laidianqushitu");
  6. var myChart_laidianqushitu = echarts.init(dom_laidianqushitu);
  7. var app = {};
  8. var option_laidianqushitu = null;
  9. option_laidianqushitu = {
  10. backgroundColor: "transparent",
  11. tooltip: {
  12. },
  13. grid: {
  14. top: '8%',
  15. left: '1%',
  16. right: '1%',
  17. bottom: '8%',
  18. containLabel: true,
  19. },
  20. xAxis: [{
  21. type: 'category',
  22. boundaryGap: false,
  23. axisLine: { //坐标轴轴线相关设置。数学上的x轴
  24. show: true,
  25. lineStyle: {
  26. color: '#233e64'
  27. },
  28. },
  29. axisLabel: { //坐标轴刻度标签的相关设置
  30. textStyle: {
  31. color: 'white',
  32. margin:15,
  33. align:'right'
  34. },
  35. },
  36. axisTick: { show: false,},
  37. data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
  38. }],
  39. yAxis: [{
  40. type: 'value',
  41. min: 0,
  42. max:16,
  43. splitNumber: 7,
  44. splitLine: {
  45. show: true,
  46. lineStyle: {
  47. color: '#233e64'
  48. }
  49. },
  50. axisLine: {show: false,},
  51. axisLabel: {
  52. margin:20,
  53. textStyle: {
  54. color: 'white',
  55. },
  56. },
  57. axisTick: { show: false,},
  58. }],
  59. series: [{
  60. name: '异常流量',
  61. type: 'line',
  62. smooth: true, //是否平滑曲线显示
  63. // symbol:'circle', // 默认是空心圆(中间是白色的),改成实心圆
  64. symbolSize:0,
  65. lineStyle: {
  66. normal: {
  67. color: "rgb(34,142,215)" // 线条颜色
  68. }
  69. },
  70. areaStyle: { //区域填充样式
  71. normal: {
  72. //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
  73. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  74. { offset: 0, color: 'rgba(34,142,215, 0.6)'},
  75. { offset: 1, color: 'rgba(34,142,215, 0.1)'}
  76. ], false),
  77. shadowColor: 'rgba(34,142,215, 0.9)', //阴影颜色
  78. shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
  79. }
  80. },
  81. // data: [90, 105, 84, 125, 110, 92, 98]
  82. data:$scope.ceshi
  83. }]
  84. };;
  85. // myChart_laidianqushitu.setOption(option_laidianqushitu);
  86. // 报修趋势图
  87. var dom_baoxiuqushitu = document.getElementById("baoxiuqushitu");
  88. var myChart_baoxiuqushitu = echarts.init(dom_baoxiuqushitu);
  89. var app = {};
  90. var option_baoxiuqushitu = null;
  91. option_baoxiuqushitu = {
  92. backgroundColor: "transparent",
  93. tooltip: {
  94. },
  95. grid: {
  96. top: '8%',
  97. left: '1%',
  98. right: '1%',
  99. bottom: '8%',
  100. containLabel: true,
  101. },
  102. xAxis: [{
  103. type: 'category',
  104. boundaryGap: false,
  105. axisLine: { //坐标轴轴线相关设置。数学上的x轴
  106. show: true,
  107. lineStyle: {
  108. color: '#233e64'
  109. },
  110. },
  111. axisLabel: { //坐标轴刻度标签的相关设置
  112. textStyle: {
  113. color: 'white',
  114. margin:15,
  115. align:'right'
  116. },
  117. },
  118. axisTick: { show: false,},
  119. data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
  120. }],
  121. yAxis: [{
  122. type: 'value',
  123. min: 0,
  124. max:16,
  125. splitNumber: 7,
  126. splitLine: {
  127. show: true,
  128. lineStyle: {
  129. color: '#233e64'
  130. }
  131. },
  132. axisLine: {show: false,},
  133. axisLabel: {
  134. margin:20,
  135. textStyle: {
  136. color: 'white',
  137. },
  138. },
  139. axisTick: { show: false,},
  140. }],
  141. series: [{
  142. name: '异常流量',
  143. type: 'line',
  144. smooth: true, //是否平滑曲线显示
  145. // symbol:'circle', // 默认是空心圆(中间是白色的),改成实心圆
  146. symbolSize:0,
  147. lineStyle: {
  148. normal: {
  149. color: "rgb(208,64,47)" // 线条颜色
  150. }
  151. },
  152. areaStyle: { //区域填充样式
  153. normal: {
  154. //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
  155. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  156. { offset: 0, color: 'rgba(208,64,47, 0.6)'},
  157. { offset: 1, color: 'rgba(208,64,47, 0.1)'}
  158. ], false),
  159. shadowColor: 'rgba(208,64,47, 0.9)', //阴影颜色
  160. shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
  161. }
  162. },
  163. data: [90, 105, 84, 125, 110, 92, 98]
  164. }]
  165. };;
  166. // myChart_baoxiuqushitu.setOption(option_baoxiuqushitu);
  167. // 事件工单列表轮播图
  168. // var shijian_index=1;
  169. // setInterval(function(){
  170. // var l='-'+414*shijian_index+'px';
  171. // $('.shijian_tables_box:eq(0)').animate({left:l},1000,function(){
  172. // if(shijian_index == $('.shijian_tables').length-1){
  173. // $(this).css('left',0);
  174. // shijian_index=1;
  175. // }else{
  176. // shijian_index++;
  177. // }
  178. // });
  179. // },5000)
  180. // 报修列表轮播图
  181. // var baoxiu_index=1;
  182. // setInterval(function(){
  183. // var l='-'+414*baoxiu_index+'px';
  184. // $('.baoxiu_tables_box:eq(0)').animate({left:l},1000,function(){
  185. // if(baoxiu_index == $('.baoxiu_tables').length-1){
  186. // $(this).css('left',0);
  187. // baoxiu_index=1;
  188. // }else{
  189. // baoxiu_index++;
  190. // }
  191. // });
  192. // },5000)
  193. // 调用数据
  194. var nowDay=moment(new Date().getTime()+86400000).format("YYYY-MM-DD");
  195. var yesterDay=moment(new Date().getTime()).format("YYYY-MM-DD");
  196. var nowHour=moment(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss");
  197. var sixHourAgo=moment(new Date().getTime()-3600000*6).format("YYYY-MM-DD HH:mm:ss");
  198. console.log(nowHour);
  199. // 获取工单实时总数数据
  200. // 开始
  201. $scope.incident_allData="";
  202. function getIncident_allData(time){
  203. api_hkreport.incidentreport(time, 'large_screen_incident_total').then(function(res) {
  204. console.log(res);
  205. $scope.incident_allData=res.data[0].sum
  206. })
  207. }
  208. getIncident_allData({
  209. })
  210. // 结束
  211. // 获取及时响应数据
  212. // 开始
  213. $scope.incident_responseData="";
  214. function getIncident_responseData(time){
  215. api_hkreport.incidentreport(time, 'large_screen_incident_pending_total').then(function(res) {
  216. console.log(res);
  217. $scope.incident_responseData=res.data[0].sum
  218. })
  219. }
  220. getIncident_responseData({})
  221. // 结束
  222. // 获取解决中数据
  223. // 开始
  224. // $scope.incident_solveNowData="";
  225. // function getIncident_solveNowData(time){
  226. // api_hkreport.incidentreport(time, 'large_screen_incident_handler_total').then(function(res) {
  227. // console.log(res);
  228. // $scope.incident_solveNowData=res.data[0].sum
  229. // })
  230. // }
  231. // getIncident_solveNowData({
  232. // })
  233. // // 结束
  234. // // 获取已解决数据
  235. // // 开始
  236. // $scope.incident_solveData="";
  237. // function getIncident_solveData(time){
  238. // api_hkreport.incidentreport(time, 'large_screen_incident_resolved_total').then(function(res) {
  239. // console.log(res);
  240. // $scope.incident_solveData=res.data[0].sum
  241. // })
  242. // }
  243. // getIncident_solveData({
  244. // })
  245. // 结束
  246. // 获取呼叫中心来电趋势图数据
  247. // 开始
  248. function getCallPitData(time){
  249. api_hkreport.incidentreport(time, 'large_screen_call_trend').then(function(res) {
  250. var timeArr=[];
  251. var time=[];
  252. var value=[];
  253. var time=res.date;
  254. $scope.allIncidentreport=0;
  255. console.log(time);
  256. for(var i=0;i<res.value.length;i++){
  257. $scope.allIncidentreport=$scope.allIncidentreport+Number(res.value[i])
  258. }
  259. for(var i=0;i<time.length;i++){
  260. timeArr.push(time[i].substring(time[i].length-2,time[i].length)+":00");
  261. }
  262. value=res.value;
  263. option_laidianqushitu.xAxis[0].data=timeArr;
  264. option_laidianqushitu.series[0].data=value;
  265. myChart_laidianqushitu.setOption(option_laidianqushitu);
  266. // $scope.incident_solveData=res.data[0].sum
  267. })
  268. }
  269. getCallPitData({
  270. "start":moment(new Date().getTime()).format("YYYY-MM-DD")+" 08:00:00",
  271. // "start":"2019-04-16 00:00:00",
  272. "end":moment(new Date().getTime()).format("YYYY-MM-DD")+" 18:00:00"
  273. });
  274. $interval(function(){
  275. getCallPitData({
  276. "start":moment(new Date().getTime()).format("YYYY-MM-DD")+" 08:00:00",
  277. "end":moment(new Date().getTime()).format("YYYY-MM-DD")+" 18:00:00"
  278. });
  279. },30000)
  280. // 结束
  281. // 呼叫中心来电总数
  282. // 开始
  283. // $scope.callAll=0;
  284. // function getCallPitAllData(time){
  285. // api_hkreport.incidentreport(time, 'service_counter').then(function(res) {
  286. // console.log(res);
  287. // $scope.callAll=res.workCallProportion.sum
  288. // })
  289. // }
  290. // getCallPitAllData({
  291. // "start":moment(new Date().getTime()).format("YYYY-MM-DD"),
  292. // "end":moment(new Date().getTime()+86400000).format("YYYY-MM-DD")
  293. // })
  294. // $interval(function(){
  295. // getCallPitAllData({
  296. // "start":moment(new Date().getTime()).format("YYYY-MM-DD"),
  297. // "end":moment(new Date().getTime()+86400000).format("YYYY-MM-DD")
  298. // })
  299. // },30000)
  300. // 结束
  301. // 微信报修总数
  302. // 开始
  303. $scope.wxAll=0;
  304. function getWxPitAllData(time){
  305. api_hkreport.incidentreport(time, 'large_screen_wx_incident_sum').then(function(res) {
  306. console.log(res);
  307. $scope.wxAll=res.data[0].sum
  308. // $scope.callAll=res.workCallProportion.sum
  309. })
  310. }
  311. getWxPitAllData({
  312. "start":moment(new Date().getTime()).format("YYYY-MM-DD")+" 00:00:00",
  313. "end":moment(new Date().getTime()).format("YYYY-MM-DD")+" 23:59:59"
  314. })
  315. $interval(function(){
  316. getWxPitAllData({
  317. "start":moment(new Date().getTime()).format("YYYY-MM-DD")+" 00:00:00",
  318. "end":moment(new Date().getTime()).format("YYYY-MM-DD")+" 23:59:59"
  319. })
  320. },30000)
  321. // 结束
  322. // 获取微信报修趋势图数据
  323. // 开始
  324. function getWechatPitData(time){
  325. api_hkreport.incidentreport(time, 'large_screen_wx_incident_trend').then(function(res) {
  326. var timeArr=[];
  327. var time=[];
  328. var value=[];
  329. var time=res.date;
  330. for(var i=0;i<time.length;i++){
  331. timeArr.push(time[i].substring(time[i].length-2,time[i].length)+":00");
  332. }
  333. value=res.value;
  334. option_baoxiuqushitu.xAxis[0].data=timeArr;
  335. option_baoxiuqushitu.series[0].data=value;
  336. myChart_baoxiuqushitu.setOption(option_baoxiuqushitu);
  337. })
  338. }
  339. getWechatPitData({
  340. "start":moment(new Date().getTime()).format("YYYY-MM-DD")+" 08:00:00",
  341. "end":moment(new Date().getTime()).format("YYYY-MM-DD")+" 18:00:00"
  342. });
  343. $interval(function(){
  344. getWechatPitData({
  345. "start":moment(new Date().getTime()).format("YYYY-MM-DD")+" 08:00:00",
  346. "end":moment(new Date().getTime()).format("YYYY-MM-DD")+" 18:00:00"
  347. });
  348. },30000)
  349. // 结束
  350. // 获取事件工单处理实时情况数据
  351. // 开始
  352. $scope.incidentHandleList1=[];
  353. $scope.incidentHandleList2=[];
  354. function getIncidentHandleData(time){
  355. api_hkreport.incidentreport(time, 'large_screen_incident_rt_status').then(function(res) {
  356. if(res.data.length>14){
  357. $scope.incidentHandleList1=res.data.slice(0,7);
  358. $scope.incidentHandleList2=res.data.slice(8,15);
  359. }else{
  360. $scope.incidentHandleList1=res.data;
  361. $scope.incidentHandleList2=res.data;
  362. }
  363. })
  364. }
  365. getIncidentHandleData({})
  366. // 结束
  367. // 获取微信报修详情列表数据
  368. // 开始
  369. $scope.weChatList1=[];
  370. $scope.weChatList2=[];
  371. function getWeChatData(time){
  372. api_hkreport.incidentreport(time, 'large_screen_wx_incident_details').then(function(res) {
  373. console.log(res);
  374. for(var i=0;i<res.data.length;i++){
  375. if(res.data[i].name=="咨询"){
  376. // delete res.data[i]
  377. res.data.splice(i,1)
  378. }
  379. }
  380. if(res.data.length>14){
  381. $scope.weChatList1=res.data.slice(0,7);
  382. $scope.weChatList2=res.data.slice(8,15);
  383. }else{
  384. $scope.weChatList1=res.data;
  385. $scope.weChatList2=res.data;
  386. }
  387. })
  388. }
  389. getWeChatData({})
  390. // 结束
  391. // 获取处理地点列表数据
  392. // 开始
  393. $scope.placeList=[];
  394. function getPlaceListData(time){
  395. api_hkreport.incidentreport(time, 'large_screen_incident_area').then(function(res) {
  396. console.log(res);
  397. // res.data=[
  398. // {"area":"主校区","statusid":4,"priority":"重大"},
  399. // {"area":"主校区","statusid":4,"priority":"普通"},
  400. // {"area":"主校区","statusid":4,"priority":"普通"},
  401. // {"area":"同济校区","statusid":4,"priority":"重大"},
  402. // {"area":"同济校区","statusid":4,"priority":"普通"},
  403. // ]
  404. $scope.placeList=res.data;
  405. var shijian_index=0;
  406. $(".map_list_body_poi:eq(0)").scrollTop(0);
  407. $scope.tongjixiaoquSum=0;
  408. $scope.tongjixiaoqu_zhongdaSum=0;
  409. $scope.tongjixiaoqu_gaoSum=0;
  410. $scope.tongjixiaoqu_jiaogaoSum=0;
  411. $scope.tongjixiaoqu_putongSum=0;
  412. $scope.zhuxiaoquSum=0;
  413. $scope.zhuxiaoqu_zhongdaSum=0;
  414. $scope.zhuxiaoqu_gaoSum=0;
  415. $scope.zhuxiaoqu_jiaogaoSum=0;
  416. $scope.zhuxiaoqu_putongSum=0;
  417. $scope.dongxiaoquSum=0;
  418. $scope.dongxiaoqu_zhongdaSum=0;
  419. $scope.dongxiaoqu_gaoSum=0;
  420. $scope.dongxiaoqu_jiaogaoSum=0;
  421. $scope.dongxiaoqu_putongSum=0;
  422. $scope.tongjixiaoqu_chuliguo=0;
  423. $scope.zhuxiaoqu_chuliguo=0;
  424. $scope.dongxiaoqu_chuliguo=0;
  425. for(var i=0;i<res.data.length;i++){
  426. if(res.data[i].area=="主校区"&&res.data[i].statusid==4||res.data[i].statusid==2){
  427. $scope.zhuxiaoquSum++
  428. if(res.data[i].priority=="重大"){
  429. $scope.zhuxiaoqu_zhongdaSum++
  430. }else if(res.data[i].priority=="高"){
  431. $scope.zhuxiaoqu_gaoSum++
  432. }else if(res.data[i].priority=="较高"){
  433. $scope.zhuxiaoqu_jiaogaoSum++
  434. }else{
  435. $scope.zhuxiaoqu_putongSum++
  436. }
  437. }else if(res.data[i].area=="同济校区"&&res.data[i].statusid==4||res.data[i].statusid==2){
  438. $scope.tongjixiaoquSum++
  439. if(res.data[i].priority=="重大"){
  440. $scope.tongjixiaoqu_zhongdaSum++
  441. }else if(res.data[i].priority=="高"){
  442. $scope.tongjixiaoqu_gaoSum++
  443. }else if(res.data[i].priority=="较高"){
  444. $scope.tongjixiaoqu_jiaogaoSum++
  445. }else{
  446. $scope.tongjixiaoqu_putongSum++
  447. }
  448. }else if(res.data[i].area=="东校区"&&res.data[i].statusid==4||res.data[i].statusid==2){
  449. $scope.dongxiaoquSum++
  450. if(res.data[i].priority=="重大"){
  451. $scope.dongxiaoqu_zhongdaSum++
  452. }else if(res.data[i].priority=="高"){
  453. $scope.dongxiaoqu_gaoSum++
  454. }else if(res.data[i].priority=="较高"){
  455. $scope.dongxiaoqu_jiaogaoSum++
  456. }else{
  457. $scope.dongxiaoqu_putongSum++
  458. }
  459. }
  460. }
  461. for(var i=0;i<res.data.length;i++){
  462. if(res.data[i].statusid!=4&&res.data[i].statusid!=2){
  463. if(res.data[i].area=="主校区"){
  464. $scope.zhuxiaoqu_chuliguo++;
  465. $scope.zhuxiaoquSum++;
  466. $scope.zhuxiaoqu_zhongdaSum++
  467. }else if(res.data[i].area=="同济校区"){
  468. $scope.tongjixiaoqu_chuliguo++;
  469. $scope.tongjixiaoquSum++;
  470. $scope.tongjixiaoqu_zhongdaSum++
  471. }else if(res.data[i].area=="东校区"){
  472. $scope.dongxiaoqu_chuliguo++;
  473. $scope.dongxiaoquSum++;
  474. $scope.dongxiaoqu_zhongdaSum++
  475. }
  476. }
  477. }
  478. // console.log("zhongda " + $scope.zhuxiaoqu_zhongdaSum + "; putong" + $scope.zhuxiaoquSum);
  479. if(res.data.length>5){
  480. $scope.listTimerFn=function(){
  481. $scope.listTimer=$interval(function timer(){
  482. $(".map_list_body_poi:eq(0)").scrollTop(shijian_index);
  483. if(shijian_index-2>$(".map_list_body_poi:eq(0)").scrollTop()){
  484. $interval.cancel($scope.listTimer);
  485. $timeout(function(){
  486. $scope.listTimerFn();
  487. $(".map_list_body_poi:eq(0)").scrollTop(0);
  488. shijian_index=0;
  489. },5000)
  490. };
  491. shijian_index++;
  492. },240)
  493. }
  494. $scope.listTimerFn()
  495. }
  496. })
  497. }
  498. getPlaceListData({
  499. "start":moment(new Date().getTime()).format("YYYY-MM-DD")+" 00:00:00",
  500. // "start":"2019-04-18 00:00:00",
  501. "end":moment(new Date().getTime()).format("YYYY-MM-DD")+" 23:59:59"
  502. // "start":"2019-04-17 23:59:59",
  503. })
  504. // 结束
  505. // 事件工单列表状态颜色
  506. $scope.statusColor=function(res){
  507. if(res=="接单"){
  508. return "jiedai"
  509. }else if(res=="事件处理"){
  510. return "chulizhong"
  511. }else if(res=="事件关闭"){
  512. return "guanbi"
  513. }else{
  514. return "qita"
  515. }
  516. }
  517. // 事件工单处理实时情况状态转换
  518. $scope.incident_status=function(res){
  519. if(res=="事件处理"){
  520. return "处理中"
  521. }else if(res=="事件关闭"){
  522. return "已办结"
  523. }else{
  524. return res
  525. }
  526. }
  527. // 列表前点颜色
  528. $scope.liebiao_zhuangtai=function(status,priority){
  529. if(status==4||status==2){
  530. if(priority=="重大"){
  531. return "zhongda"
  532. }else{
  533. return ""
  534. }
  535. }else{
  536. return "chuliguo"
  537. }
  538. }
  539. // 定时刷新
  540. function getDataInter(time){
  541. $interval(function(){
  542. $interval.cancel($scope.listTimer);
  543. getIncidentHandleData({});
  544. getWeChatData({});
  545. getPlaceListData({
  546. "start":moment(new Date().getTime()).format("YYYY-MM-DD")+" 00:00:00",
  547. "end":moment(new Date().getTime()).format("YYYY-MM-DD")+" 23:59:59"
  548. })
  549. getIncident_allData({});
  550. getIncident_responseData({})
  551. },time)
  552. }
  553. getDataInter(300000)
  554. // getDataInter(5000)
  555. }]);