VideoDevice.js 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129
  1. /**
  2. *
  3. */
  4. Ext.Loader.setConfig({
  5. enabled: true
  6. });
  7. Ext.Loader.setPath('Ext.ux', '../../res/extjs/examples/ux');
  8. Ext.require([
  9. 'Ext.grid.*',
  10. 'Ext.data.*',
  11. 'Ext.ux.RowExpander',
  12. 'Ext.selection.CheckboxModel'
  13. ]);
  14. var StatusStore;
  15. var baseUrl;
  16. var centerLng;
  17. var centerLat;
  18. var company_code;
  19. var theme;
  20. var ConfirmStore
  21. var pieWidth;
  22. var showAlarm=null;
  23. var pieMask;
  24. var V_LOGINNAME='',V_PASSWORD='';
  25. var maxHeight = 10000;
  26. var maxWidth = 10000;
  27. var companyName = null;
  28. var sm = Ext.create('Ext.selection.CheckboxModel');
  29. Ext.define('VRtuOption',{
  30. extend: 'Ext.data.Model',
  31. fields: [
  32. { name:'id', type:'int'},
  33. { name:'orderIdx', type:'int'},
  34. { name:'device_code', type:'string' },
  35. { name:'company_code', type:'string' },
  36. { name:'company_name', type:'string' },
  37. { name:'fullname', type:'string' },
  38. { name:'time', type:'string' },
  39. { name:'name', type:'string' },
  40. { name:'status', type:'string' },
  41. { name:'data', type:'string' },
  42. { name:'clzt', type:'string' },
  43. { name:'clr_name', type:'string' },
  44. { name:'clsj', type:'string' },
  45. { name:'clnr', type:'string'},
  46. { name:'clwb', type:'string'}
  47. ]
  48. });
  49. Ext.define('CompanyComboStore',{
  50. extend:'Ext.data.Model',
  51. fields: [
  52. {name:'owner_name', type:'string'},
  53. {name:'owner_id',type:'string'}
  54. ]
  55. });
  56. var drawDevices = function(){
  57. // alert('get device info');
  58. if(StatusStore.length>0){
  59. var current_device_id='';
  60. var device_count=0;
  61. var fire_device_count=0;
  62. var water_device_count=0;
  63. var rtu_device_count=0;
  64. var other_device_count=0;
  65. var fire_device_out=0;
  66. var water_device_out=0;
  67. var rtu_device_out=0;
  68. var other_device_out=0;
  69. var fire_device_alarm=0;
  70. var water_device_alarm=0;
  71. var rtu_device_alarm=0;
  72. var other_device_alarm=0;
  73. var fire_device_normal=0;
  74. var water_device_normal=0;
  75. var rtu_device_normal=0;
  76. var other_device_normal=0;
  77. var total_normal=0;
  78. var mark_array = new Array();
  79. for(var i=0;i<StatusStore.length;i++){
  80. if((StatusStore[i].point_list!=null)
  81. &&(StatusStore[i].point_list!=undefined)
  82. &&(StatusStore[i].point_list.length>0)){
  83. for(var j=0;j<StatusStore[i].point_list.length;j++){
  84. if(StatusStore[i].point_list[j].device_id!=current_device_id){
  85. current_device_id=StatusStore[i].point_list[j].device_id;
  86. device_count++;
  87. if((StatusStore[i].point_list[j].dwtype=='1')
  88. ||(StatusStore[i].point_list[j].dwtype==1))
  89. fire_device_count++;
  90. else if((StatusStore[i].point_list[j].dwtype=='2')
  91. ||(StatusStore[i].point_list[j].dwtype==2))
  92. water_device_count++;
  93. else if((StatusStore[i].point_list[j].dwtype=='3')
  94. ||(StatusStore[i].point_list[j].dwtype==3))
  95. other_device_count++;
  96. else if((StatusStore[i].point_list[j].dwtype=='4')
  97. ||(StatusStore[i].point_list[j].dwtype==4))
  98. water_device_count++;
  99. else if((StatusStore[i].point_list[j].dwtype=='5')
  100. ||(StatusStore[i].point_list[j].dwtype==5))
  101. water_device_count++;
  102. else if((StatusStore[i].point_list[j].dwtype=='6')
  103. ||(StatusStore[i].point_list[j].dwtype==6))
  104. rtu_device_count++;
  105. else
  106. other_device_count++;
  107. }
  108. if((StatusStore[i].point_list[j].point_code=='0')
  109. ||(StatusStore[i].point_list[j].point_code==0)){
  110. if((StatusStore[i].point_list[j].point_data!='0')
  111. &&(StatusStore[i].point_list[j].point_data!=0)){
  112. if((StatusStore[i].point_list[j].dwtype=='1')
  113. ||(StatusStore[i].point_list[j].dwtype==1))
  114. fire_device_alarm++;
  115. else if((StatusStore[i].point_list[j].dwtype=='2')
  116. ||(StatusStore[i].point_list[j].dwtype==2)){
  117. if((StatusStore[i].point_list[j].point_data=='4')
  118. ||(StatusStore[i].point_list[j].point_data==4))
  119. water_device_out++;
  120. else
  121. water_device_alarm++;
  122. }
  123. else if((StatusStore[i].point_list[j].dwtype=='3')
  124. ||(StatusStore[i].point_list[j].dwtype==3))
  125. other_device_out++;
  126. else if((StatusStore[i].point_list[j].dwtype=='4')
  127. ||(StatusStore[i].point_list[j].dwtype==4))
  128. if((StatusStore[i].point_list[j].point_data=='4')
  129. ||(StatusStore[i].point_list[j].point_data==4))
  130. water_device_out++;
  131. else
  132. water_device_alarm++;
  133. else if((StatusStore[i].point_list[j].dwtype=='5')
  134. ||(StatusStore[i].point_list[j].dwtype==5))
  135. if((StatusStore[i].point_list[j].point_data=='4')
  136. ||(StatusStore[i].point_list[j].point_data==4))
  137. water_device_out++;
  138. else
  139. water_device_alarm++;
  140. else if((StatusStore[i].point_list[j].dwtype=='6')
  141. ||(StatusStore[i].point_list[j].dwtype==6))
  142. rtu_device_out++;
  143. else
  144. other_device_out++;
  145. }
  146. }
  147. }
  148. }
  149. }
  150. fire_device_normal = fire_device_count-fire_device_out-fire_device_alarm;
  151. water_device_normal = water_device_count-water_device_out-water_device_alarm;
  152. rtu_device_normal = rtu_device_count-rtu_device_out-rtu_device_alarm;
  153. other_device_normal = other_device_count-other_device_out-other_device_alarm;
  154. total_normal = fire_device_normal+water_device_normal+rtu_device_normal+other_device_normal;
  155. var themecolor = ((theme=='')||(theme=='access'))?'#ffffff':'#000000';
  156. draw_cycle_icon('firePie1','设备在线<br/> ' +
  157. '<br/>监控总数:<span style="color:#DDDF0D;text-shadow: 1px 1px 2px #888, 0 0 0 #000">'+fire_device_count+'</span>' +
  158. '<br/>在线总数:<span style="color:#34abf5;text-shadow: 1px 1px 2px #888, 0 0 0 #000">'+(fire_device_count-fire_device_out)+'</span>' +
  159. '<br/>离线线总数:<span style="color:#DF5353;text-shadow: 1px 1px 2px #888, 0 0 0 #000">'+fire_device_out+'</span>' +
  160. '<br/>在线率:',fire_device_count,(fire_device_count-fire_device_out),themecolor);
  161. draw_cycle_icon('firePie2','状态正常<br/> ' +
  162. '<br/>在线总数:<span style="color:#DDDF0D;text-shadow: 1px 1px 2px #888, 0 0 0 #000">'+(fire_device_count-fire_device_out)+'</span>' +
  163. '<br/>正常总数:<span style="color:#34abf5;text-shadow: 1px 1px 2px #888, 0 0 0 #000">'+fire_device_normal+'</span>' +
  164. '<br/>告警总数:<span style="color:#DF5353;text-shadow: 1px 1px 2px #888, 0 0 0 #000">'+fire_device_alarm+'</span>' +
  165. '<br/>正常率:',(fire_device_count-fire_device_out),fire_device_normal,themecolor);
  166. }
  167. }
  168. var draw_confirm = function(){
  169. var themecolor = ((theme=='')||(theme=='access'))?'#ffffff':'#000000';
  170. if(companyName!=null)
  171. $("#RtuPiePanel_title_string").html(companyName+'.离线报告列表');
  172. else
  173. $("#RtuPiePanel_title_string").html('离线报告列表');
  174. for(var i=0;i<ConfirmStore.length;i++){
  175. if(ConfirmStore[i].id=='rtu_alarm'){
  176. var mColor= '#34abf5';//[ '#DDDF0D','#f66167', '#34abf5']
  177. var percent = 100;
  178. if(ConfirmStore[i].count>0)
  179. percent = Number(((ConfirmStore[i].sum*100)/ConfirmStore[i].count).toString().match(/^\d+(?:\.\d{0,2})?/));
  180. if(percent<60)
  181. mColor = '#f66167';
  182. else if(percent<80)
  183. mColor = '#DDDF0D';
  184. $("#operation_num_1").html(ConfirmStore[i].count);
  185. $("#operation_num_2").html(ConfirmStore[i].sum);
  186. $("#operation_num_3").html(ConfirmStore[i].count-ConfirmStore[i].sum);
  187. $("#operation_num_4").html(percent);
  188. // draw_cycle_icon('firePie3','告警处理情况<br/>告警总数:<span style="color:#DDDF0D;text-shadow: 1px 1px 2px #888, 0 0 0 #000">'+ConfirmStore[i].count+'</span><br/>已处理:<span style="color:#34abf5;text-shadow: 1px 1px 2px #888, 0 0 0 #000">'+ConfirmStore[i].sum+'</span><br/>未处理:<span style="color:#DF5353;text-shadow: 1px 1px 2px #888, 0 0 0 #000">'+(ConfirmStore[i].count-ConfirmStore[i].sum)+'</span><br/>处理率:',ConfirmStore[i].count,ConfirmStore[i].sum,themecolor);
  189. Highcharts.getOptions().colors = Highcharts.map(['#DDDF0D',mColor], function (color) {
  190. return {
  191. radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
  192. stops: [
  193. [0, color],
  194. [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
  195. ]
  196. };
  197. });
  198. Highcharts.chart('operation_pie',{
  199. chart: {
  200. type: 'solidgauge',
  201. height: '100%',
  202. backgroundColor: 'rgba(0,0,0,0)',
  203. animation: false
  204. },
  205. title:{
  206. text:percent+'%',
  207. floating:true,
  208. y:90,
  209. style:{fontSize:'16px',color:themecolor,fontWeight:'bold'}
  210. },
  211. exporting: {
  212. enabled: false
  213. },
  214. credits: {
  215. enabled: false
  216. },
  217. tooltip: {
  218. enabled: false
  219. },
  220. pane: {
  221. startAngle: 0,
  222. background: [{
  223. outerRadius: '110%',
  224. innerRadius: '55%',
  225. backgroundColor: 'rgba(0,0,0,0)',
  226. borderWidth: 0
  227. }]
  228. },
  229. yAxis: {
  230. min: 0,
  231. max: 100,
  232. lineWidth: 0,
  233. tickPositions: []
  234. },
  235. plotOptions: {
  236. solidgauge: {
  237. dataLabels: {
  238. enabled: false
  239. },
  240. linecap: 'square',
  241. stickyTracking: false,
  242. rounded: false,
  243. warp: false
  244. },
  245. series:{
  246. animation: false
  247. }
  248. },
  249. series:[{
  250. name:name,
  251. data:[{
  252. color: 'rgba(0,0,0,0.3)',
  253. radius: '110%',
  254. innerRadius: '60%',
  255. y: 100
  256. },{
  257. color: (Highcharts.theme && Highcharts.theme.contrastTextColor),
  258. radius: '110%',
  259. innerRadius: '60%',
  260. y: percent
  261. }]
  262. }]
  263. });
  264. Highcharts.getOptions().colors = Highcharts.map(['#f66167', '#34abf5'], function (color) {
  265. return {
  266. linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
  267. stops: [
  268. [0, color],
  269. [1, Highcharts.Color(color).setOpacity(0).get('rgb')] // darken
  270. ]
  271. };
  272. });
  273. Highcharts.chart('operation_area',{
  274. chart:{
  275. type:'area',
  276. // zoomType: 'x',
  277. backgroundColor: 'rgba(0,0,0,0)'
  278. },
  279. color:['#f66167', '#34abf5'],
  280. title:{
  281. text:(companyName==null)?'视频监控离线处理情况跟踪':companyName+'.视频监控离线处理情况跟踪',
  282. float:true,
  283. style:{fontSize:'14px',color:themecolor,fontWeight:'bold'},
  284. enabled:false
  285. },
  286. legend:{
  287. // enabled:false,
  288. floating:true,
  289. x:410,
  290. y:-210,
  291. itemStyle:{fontSize:'12px',color:themecolor,fontWeight:'bold'}
  292. },
  293. // colors:['#f66167', '#34abf5'],
  294. exporting: {
  295. enabled: false
  296. },
  297. credits: {
  298. enabled: false
  299. },
  300. xAxis:{
  301. categories:ConfirmStore[i].day_list,
  302. tickmarkPlacement:'on',
  303. gridLineWidth:0,
  304. labels:{
  305. enabled:false,
  306. style:{fontSize:'10px',color:themecolor,fontWeight:'bold'}
  307. },
  308. title:{
  309. enabled:false
  310. }
  311. },
  312. yAxis:{
  313. title:{
  314. enabled:false,
  315. text:'次',
  316. style:{fontSize:'10px',color:themecolor,fontWeight:'bold'}
  317. },
  318. gridLineWidth:1,
  319. gridLineColor:'rgba(0,0,0,0.2)',
  320. labels:{
  321. // enabled:false,
  322. formatter:this.value,
  323. style:{fontSize:'10px',color:themecolor,fontWeight:'bold'}
  324. }
  325. },
  326. plotOptions:{
  327. area:{
  328. stackiung:'normal',
  329. // fillOpacity:0.1,
  330. // lineColor:'#666666',
  331. // lineWidth:1,
  332. marker:{
  333. lineWidth:0,
  334. enabled:false,
  335. radius:0
  336. // lineColor:'#666666'
  337. }
  338. }
  339. },
  340. series:[
  341. {
  342. name:'离线次数',
  343. data:ConfirmStore[i].count_list,
  344. lineWidth:1,
  345. lineColor:'#f66167',
  346. fillColor: {
  347. linearGradient: {
  348. x1: 0,
  349. y1: 0,
  350. x2: 0,
  351. y2: 1
  352. },
  353. stops: [
  354. [0, '#f66167'],
  355. [1, Highcharts.Color('#f66167').setOpacity(0.3).get('rgba')]
  356. ]
  357. }
  358. },{
  359. name:'处理次数',
  360. data:ConfirmStore[i].sum_list,
  361. lineWidth:1,
  362. lineColor:'#34abf5',
  363. fillColor: {
  364. linearGradient: {
  365. x1: 0,
  366. y1: 0,
  367. x2: 0,
  368. y2: 1
  369. },
  370. stops: [
  371. [0, '#34abf5'],
  372. [1, Highcharts.Color('#34abf5').setOpacity(0.3).get('rgba')]
  373. ]
  374. },
  375. }
  376. ]
  377. });
  378. }
  379. }
  380. }
  381. var draw_cycle_icon = function(icon_id,name, total, num, themecolor){
  382. var mColor= '#34abf5';//[ '#DDDF0D','#f66167', '#34abf5']
  383. var percent = 100;
  384. if(total>0)
  385. percent = Number(((num*100)/total).toString().match(/^\d+(?:\.\d{0,2})?/));
  386. if(percent<60)
  387. mColor = '#f66167';
  388. else if(percent<80)
  389. mColor = '#DDDF0D';
  390. $("#"+icon_id+"Title").html('<br/><br/>'+name+percent+'%');
  391. Highcharts.getOptions().colors = Highcharts.map([ '#000000',mColor, mColor], function (color) {
  392. return {
  393. radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
  394. stops: [
  395. [0, color],
  396. [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
  397. ]
  398. };
  399. });
  400. Highcharts.chart(icon_id,{
  401. chart: {
  402. type: 'solidgauge',
  403. height: '85%',
  404. backgroundColor: 'rgba(0,0,0,0)',
  405. reflow:true,
  406. marginTop:0
  407. },
  408. title:{
  409. text:percent+'%',
  410. floating:true,
  411. y:(pieWidth*2/5),
  412. style:{fontSize:'21px',color:themecolor,fontWeight:'bold'}
  413. },
  414. exporting: {
  415. enabled: false
  416. },
  417. credits: {
  418. enabled: false
  419. },
  420. tooltip: {
  421. enabled: false
  422. },
  423. pane: {
  424. startAngle: -90,
  425. endAngle: 270,
  426. background: [{
  427. outerRadius: '90%',
  428. innerRadius: '60%',
  429. backgroundColor: 'rgba(0,0,0,0)',
  430. borderWidth: 0
  431. }]
  432. },
  433. yAxis: {
  434. min: 0,
  435. max: 100,
  436. lineWidth: 0,
  437. tickPositions: []
  438. },
  439. plotOptions: {
  440. solidgauge: {
  441. dataLabels: {
  442. enabled: false
  443. },
  444. linecap: 'square',
  445. stickyTracking: false,
  446. rounded: false,
  447. warp: false
  448. }
  449. },
  450. series:[{
  451. name:'',
  452. data:[{
  453. color: Highcharts.Color(mColor)
  454. .setOpacity(0.2)
  455. .get(),
  456. radius: '110%',
  457. innerRadius: '80%',
  458. y: 100
  459. },{
  460. color: (Highcharts.theme && Highcharts.theme.contrastTextColor) ,
  461. radius: '110%',
  462. innerRadius: '80%',
  463. y: percent
  464. },{
  465. color: (Highcharts.theme && Highcharts.theme.contrastTextColor) ,
  466. radius: '60%',
  467. innerRadius: '0%',
  468. y: 100
  469. }]
  470. }]
  471. });
  472. if((theme=='access')||(theme=='')){
  473. $('#'+icon_id).addClass('shadow_black');
  474. }else{
  475. $('#'+icon_id).addClass('shadow_white');
  476. }
  477. }
  478. var getCurrentData = function(){
  479. var query = new Object();
  480. // query.V_LOGINNAME = V_LOGINNAME;
  481. // query.V_PASSWORD = V_PASSWORD;
  482. query.dwtype='18';
  483. query.COMMSTATUS = 'ONLY';
  484. pieMask.show();
  485. if((company_code!=null)&&(company_code!='null')&&(company_code.length>0))
  486. query.company_code = company_code;
  487. $.ajax({
  488. type:'POST',
  489. url: baseUrl+"iot/alarm/view/getConfirmStatusByDays",
  490. data: {
  491. queryJson : Ext.JSON.encode(query)
  492. },
  493. success: function(result){
  494. var json = eval('(' + result + ')');
  495. if(json.action=='getConfirmStatusByDays'){
  496. if(json.check=='true'){
  497. ConfirmStore = json.RESULT;
  498. if(json.company_name!=null)
  499. companyName = json.company_name;
  500. else
  501. companyName = null;
  502. draw_confirm();
  503. }else{
  504. Ext.Msg.alert('错误信息', '访问权限错误,请重新登录', function(){
  505. window.parent.document.location=baseUrl;
  506. });
  507. }
  508. }
  509. pieMask.hide();
  510. }
  511. });
  512. }
  513. var body_resize = function(){
  514. maxHeight = document.documentElement.clientHeight;
  515. maxWidth = document.documentElement.clientWidth;
  516. Ext.getCmp('RtuAlarmPanel').setHeight(maxHeight);
  517. Ext.getCmp('RtuAlarmPanel').setWidth(maxWidth);
  518. }
  519. function exportbtn_click(){
  520. // V_LOGINNAME = $("#V_LOGINNAME").val();
  521. company_code = document.getElementById('company_code').value;
  522. clzt = document.getElementById('clzt').value;
  523. time_start = document.getElementById('time_start').value;
  524. time_end = document.getElementById('time_end').value;
  525. var fields = '';
  526. var array = ['id','company_name','device_code','name','data2','clr','clnr','clwb','clzt','time','clsj'];
  527. var name = ['编号','公司名称','设备编号','设备名称','报警类型','处理人','处理内容','是否误报','处理状态','报警时间','处理时间'];
  528. for(var i=0;i<11;i++){
  529. if(i>0)
  530. fields += ',';
  531. fields += '{id:"'+array[i]+'",title:"'+name[i]+'",shown:"'+true+'"}';
  532. }
  533. var query = new Object();
  534. // query.V_LOGINNAME = V_LOGINNAME;
  535. query.company_code = company_code;
  536. query.clzt = clzt;
  537. query.time_start = time_start;
  538. query.time_end = time_end;
  539. query.COMMSTATUS = 'ONLY';
  540. query.EXPORT_FILE = 'RTU离线数据列表';
  541. query.fields = '['+fields+']';
  542. $.ajax({
  543. type:'POST',
  544. url: baseUrl+"iot/excel/view/RTUAlarmExcel",
  545. data: {
  546. queryJson : Ext.JSON.encode(query)
  547. },
  548. success: function(result){
  549. var json = eval('(' + result + ')');
  550. if(json.action=='dormExport'){
  551. ConfirmStore = json.RESULT;
  552. var elemIF = document.createElement("iframe");
  553. elemIF.src = baseUrl+json.filename;
  554. elemIF.style.display = "none";
  555. document.body.appendChild(elemIF);
  556. }
  557. }
  558. });
  559. }
  560. Ext.onReady(function(){
  561. baseUrl = document.getElementById('basePath').value;
  562. theme = document.getElementById('theme').value;
  563. company_code = document.getElementById('company_code').value;
  564. $("#V_LOGINNAME").val(sessionStorage.getItem('V_LOGINNAME'));
  565. $("#V_PASSWORD").val(sessionStorage.getItem('V_PASSWORD'));
  566. V_LOGINNAME = $("#V_LOGINNAME").val();
  567. V_PASSWORD = $("#V_PASSWORD").val();
  568. var currentWidth = document.documentElement.clientWidth;
  569. pieWidth = currentWidth/7;
  570. var chkIcon = '<img src="'+baseUrl+'res/img/common/check.gif"/>'
  571. var unchkIcon = '<img src="'+baseUrl+'res/img/common/uncheck.gif"/>'
  572. var countPerPage = 20;
  573. var chkBoolean = function(flag) {
  574. if(flag)
  575. return chkIcon;
  576. return unchkIcon;
  577. }
  578. var queryJson = new Object();
  579. queryJson.V_LOGINNAME = V_LOGINNAME;
  580. // queryJson.V_PASSWORD = V_PASSWORD;
  581. queryJson.COMMSTATUS = 'ONLY';
  582. if((company_code!=null)&&(company_code!='null')&&(company_code.length>0))
  583. queryJson.company_code = company_code;
  584. var myStore = Ext.create('Ext.data.Store', {
  585. model: 'VRtuOption',
  586. pageSize: countPerPage,
  587. proxy: {
  588. type: 'ajax',
  589. actionMethods: {
  590. create : 'POST',
  591. read : 'POST', // by default GET
  592. update : 'POST',
  593. destroy: 'POST'
  594. },
  595. url: baseUrl+'iot/alarm/view/getVideoOfflineList',
  596. reader: {
  597. type: 'json',
  598. root: 'RESULT',
  599. totalProperty: 'totalCount'
  600. },
  601. extraParams:{
  602. queryJson:Ext.JSON.encode(queryJson)
  603. }
  604. },
  605. sorters:[{
  606. property:'time',
  607. direction:'DESC'
  608. }],
  609. remoteSort: true
  610. });
  611. myStore.on("load",function(myStore){
  612. getCurrentData();
  613. //do something
  614. });
  615. var CompanyStory = Ext.create('Ext.data.Store',{
  616. model: 'CompanyComboStore',
  617. proxy: {
  618. type: 'ajax',
  619. actionMethods: {
  620. create : 'POST',
  621. read : 'POST', // by default GET
  622. update : 'POST',
  623. destroy: 'POST'
  624. },
  625. url: baseUrl+'iot/company/view/getNameList',
  626. reader: {
  627. type: 'json',
  628. root: 'RESULT',
  629. totalProperty: 'totalCount'
  630. },
  631. extraParams:{
  632. queryJson:Ext.JSON.encode(queryJson)
  633. }
  634. }
  635. });
  636. var ClztStory = Ext.create('Ext.data.Store',{
  637. fields:['abbr','name'],
  638. data:[
  639. {'abbr':'0','name':'未处理'},
  640. {'abbr':'1','name':'已处理'}
  641. ]
  642. });
  643. var FilterForm = Ext.create('Ext.form.Panel', {
  644. id: 'VRtuOptionFilterForm',
  645. labelWidth: 55,
  646. defaultType: 'textfield',
  647. bodyPadding: 15,
  648. items: [{
  649. xtype:'combo',
  650. fieldLabel:'单位名称',
  651. id: 'ff_company_code',
  652. name:'ff_company_code',
  653. displayField : 'owner_name',
  654. valueField : 'owner_id',
  655. editable : false,
  656. width:330,
  657. store:CompanyStory
  658. },{
  659. xtype:'datefield',
  660. fieldLabel:"开始日期",
  661. minValue:'07/07/2017',
  662. minText:"当前日期选择应大于当天日期",
  663. format:"Y-m-d",
  664. columnWidth:0.5,
  665. id: 'ff_start_data',
  666. name:"ff_start_data",
  667. editable:false,//只读约束
  668. width:330
  669. },{
  670. xtype:'datefield',
  671. fieldLabel:"结束日期",
  672. minValue:'07/07/2017',
  673. minText:"当前日期选择应大于当天日期",
  674. format:"Y-m-d",
  675. columnWidth:0.5,
  676. id: 'ff_end_data',
  677. name:"ff_end_data",
  678. editable:false,//只读约束
  679. width:330,
  680. listeners: {
  681. //添加日期选择事件
  682. "select": function (time) {
  683. var start = Ext.getCmp('ff_start_data').getValue()
  684. var end = Ext.getCmp('ff_end_data').getValue()
  685. if(start === null || start === ""){
  686. Ext.Msg.alert('操作失败', '请选择开始时间后再次选择!' , function(btn,txt){
  687. Ext.getCmp('ff_end_data').setValue('');
  688. });
  689. }else{
  690. if((end.valueOf() - start.valueOf()) < 0){
  691. Ext.Msg.alert('操作失败', '开始日期不能选择在结束日期后!' , function(btn,txt){
  692. Ext.getCmp('ff_end_data').setValue('');
  693. });
  694. }
  695. }
  696. },
  697. }
  698. },{
  699. xtype:'combo',
  700. fieldLabel:'处理状态',
  701. id: 'ff_clzt',
  702. name: 'ff_clzt',
  703. displayField : 'name',
  704. valueField : 'abbr',
  705. editable : false,
  706. width:330,
  707. store:ClztStory
  708. }],
  709. buttons: [{
  710. text: '筛选',
  711. iconCls:'ok_btn',
  712. handler: function() {
  713. var form = this.up('form').getForm();
  714. if (form.isValid()) {
  715. var query = new Object();
  716. // var tmp = Ext.getCmp('ff_company_code');
  717. if(Ext.getCmp('ff_company_code').getValue()){
  718. query.company_code = Ext.getCmp('ff_company_code').getValue();
  719. $("#company_code").val(query.company_code);
  720. company_code = query.company_code;
  721. $("#RtuPiePanel_title_string").html(Ext.getCmp('ff_company_code').getRawValue( )+'.离线报告列表');
  722. }else{
  723. $("#company_code").val('');
  724. $("#RtuPiePanel_title_string").html('离线报告列表');
  725. company_code = null;
  726. }
  727. if(Ext.getCmp('ff_clzt').getValue()){
  728. query.clzt = Ext.getCmp('ff_clzt').getValue();
  729. $("#clzt").val(query.clzt);
  730. }else{
  731. $("#clzt").val('');
  732. }
  733. if(Ext.getCmp('ff_start_data').getValue()){
  734. query.time_start = Ext.getCmp('ff_start_data').getValue();
  735. var datetime=query.time_start.getFullYear() + '-' + (query.time_start.getMonth() + 1) + '-' + query.time_start.getDate() + ' ' + query.time_start.getHours() + ':' + query.time_start.getMinutes() + ':' + query.time_start.getSeconds();
  736. $("#time_start").val(datetime);
  737. }else{
  738. $("#time_start").val('');
  739. }
  740. if(Ext.getCmp('ff_end_data').getValue()){
  741. query.time_end = Ext.getCmp('ff_end_data').getValue();
  742. var datetime1=query.time_end.getFullYear() + '-' + (query.time_end.getMonth() + 1) + '-' + query.time_end.getDate() + ' ' + query.time_end.getHours() + ':' + query.time_end.getMinutes() + ':' + query.time_end.getSeconds();
  743. $("#time_end").val(datetime1);
  744. }else{
  745. $("#time_end").val('');
  746. }
  747. // query.clzt = Ext.getCmp('ff_clzt').getValue()==null?"":Ext.getCmp('ff_clzt').getValue();
  748. // query.V_LOGINNAME = V_LOGINNAME;
  749. // query.V_PASSWORD = V_PASSWORD;
  750. query.COMMSTATUS = 'ONLY';
  751. var jsonstr = Ext.JSON.encode(query);
  752. myStore.getProxy().extraParams = {
  753. queryJson : jsonstr
  754. };
  755. Ext.getCmp('VRtuOptionListPageToolbar').moveFirst();
  756. Ext.getCmp('ff_company_code').setValue('');
  757. Ext.getCmp('ff_clzt').setValue('');
  758. Ext.getCmp('ff_start_data').setValue('');
  759. Ext.getCmp('ff_end_data').setValue('');
  760. Ext.getCmp('VRtuOptionFilterWin').hide();
  761. // getCurrentData();
  762. }
  763. }
  764. },{
  765. text: '关闭',
  766. iconCls: 'cancel_btn',
  767. handler: function() {
  768. Ext.getCmp('VRtuOptionFilterWin').hide();
  769. }
  770. }]
  771. });
  772. var filterwin = function() {
  773. Ext.create('Ext.window.Window',{
  774. id: 'VRtuOptionFilterWin',
  775. title: '离线报告筛选',
  776. height: 210,
  777. width: 400,
  778. layout: 'fit',
  779. items: FilterForm,
  780. closable:false,
  781. modal:true,
  782. closeAction: 'hide'
  783. }).show();
  784. CompanyStory.reload();
  785. }
  786. var radiogroup = new Ext.create('Ext.form.RadioGroup',{
  787. fieldLabel:'误报',
  788. id:'uf_r_clwb',
  789. width:300,
  790. items:[{
  791. name:'uf_r_clwb',
  792. inputValue:'1',
  793. boxLabel:'是'
  794. },{
  795. name:'uf_r_clwb',
  796. inputValue:'0',
  797. boxLabel:'否',
  798. checked:true
  799. }]
  800. });
  801. var radiogroup2 = new Ext.create('Ext.form.RadioGroup',{
  802. fieldLabel:'处理范围',
  803. id:'uf_r_clfw',
  804. width:300,
  805. items:[{
  806. name:'uf_r_clfw',
  807. inputValue:'1',
  808. boxLabel:'批量'
  809. },{
  810. name:'uf_r_clfw',
  811. inputValue:'0',
  812. boxLabel:'单一',
  813. checked:true
  814. }]
  815. });
  816. var clear_modify_form = function(){
  817. Ext.getCmp('uf_company_name').setValue('');
  818. Ext.getCmp('uf_name').setValue('');
  819. Ext.getCmp('uf_device_code').setValue('');
  820. Ext.getCmp('uf_id').setValue('');
  821. Ext.getCmp('uf_status').setValue('');
  822. Ext.getCmp('uf_fullname').setValue('');
  823. Ext.getCmp('uf_clwb').setValue('');
  824. Ext.getCmp('uf_clr').setValue('');
  825. Ext.getCmp('uf_clsj').setValue('');
  826. Ext.getCmp('uf_clnr').setValue('');
  827. }
  828. var rtuInfoForm = Ext.create('Ext.form.Panel', {
  829. id: 'rtuInfoForm',
  830. labelWidth: 55,
  831. url: baseUrl+'iot/alarm/view/updateVideoOffline',
  832. defaultType: 'textfield',
  833. bodyPadding: 15,
  834. items: [{
  835. fieldLabel:'单位名称',
  836. id: 'uf_company_name',
  837. name: 'uf_company_name',
  838. anchor:'90%'
  839. },{
  840. fieldLabel:'监控设备',
  841. id:'uf_name',
  842. name:'uf_name',
  843. anchor:'100%'
  844. },{
  845. fieldLabel:'设备编号',
  846. id:'uf_device_code',
  847. name:'uf_device_code',
  848. hidden: true
  849. },{
  850. fieldLabel:'记录编号',
  851. id:'uf_id',
  852. name:'uf_id',
  853. hidden: true
  854. },{
  855. fieldLabel:'设备编号',
  856. id:'uf_status',
  857. name:'uf_status',
  858. hidden: true
  859. },{
  860. fieldLabel:'报告信息',
  861. id: 'uf_fullname',
  862. name:'uf_fullname',
  863. xtype: 'textareafield',
  864. maxLength: 250,
  865. cols:4,
  866. anchor:'100%'
  867. },{
  868. fieldLabel:'误报',
  869. id: 'uf_clwb',
  870. name:'uf_clwb',
  871. maxLength: 200,
  872. anchor:'65%'
  873. },radiogroup,radiogroup2,{
  874. fieldLabel:'处理人',
  875. id: 'uf_clr',
  876. name:'uf_clr',
  877. maxLength: 120,
  878. anchor:'65%'
  879. },{
  880. fieldLabel:'处理时间',
  881. id: 'uf_clsj',
  882. name:'uf_clsj',
  883. maxLength: 200,
  884. anchor:'80%'
  885. },{
  886. fieldLabel:'处理内容',
  887. id: 'uf_clnr',
  888. name:'uf_clnr',
  889. xtype: 'textareafield',
  890. maxLength: 250,
  891. cols:4,
  892. anchor:'100%'
  893. },{
  894. id:'fm_queryJson',
  895. name:'queryJson',
  896. hidden:true
  897. }],
  898. buttons: [{
  899. text: '处理',
  900. id:'confirmBtn',
  901. iconCls:'ok_btn',
  902. handler: function() {
  903. var form = this.up('form').getForm();
  904. if (form.isValid()) {
  905. var queryJson = new Object();
  906. // queryJson.V_LOGINNAME = V_LOGINNAME;
  907. // queryJson.V_PASSWORD = V_PASSWORD;
  908. queryJson.id = Ext.getCmp('uf_id').getValue();
  909. queryJson.status = Ext.getCmp('uf_status').getValue();
  910. queryJson.name = Ext.getCmp('uf_name').getValue();
  911. queryJson.device_code = Ext.getCmp('uf_device_code').getValue();
  912. queryJson.confirmAll = Ext.getCmp('uf_r_clfw').getChecked()[0].boxLabel=='单一'?'0':'1';
  913. queryJson.clwb = Ext.getCmp('uf_r_clwb').getChecked()[0].boxLabel=='否'?'0':'1';
  914. queryJson.clnr = Ext.getCmp('uf_clnr').getValue();
  915. var jsonstr = Ext.JSON.encode(queryJson);
  916. Ext.getCmp('fm_queryJson').setValue(jsonstr);
  917. form.submit({
  918. method:'post',
  919. success: function(form, action) {
  920. Ext.Msg.alert('操作成功', '已确认'+action.result.activerow+'条记录', function(btn,txt){
  921. clear_modify_form();
  922. myStore.reload();
  923. // getCurrentData();
  924. });
  925. },
  926. failure: function(form, action) {
  927. Ext.Msg.alert('操作失败', action.Msg , function(btn,txt){
  928. clear_modify_form();
  929. myStore.reload();
  930. // getCurrentData();
  931. });
  932. }
  933. });
  934. this.up('window').close();
  935. }
  936. }
  937. },{
  938. text: '关闭',
  939. iconCls: 'cancel_btn',
  940. handler: function() {
  941. this.up('window').close();
  942. }
  943. }]
  944. });
  945. var vFileInfoWin = Ext.create('Ext.window.Window',{
  946. id:'VFileInfoWin',
  947. title:'详细信息: <span id="VInfoWin_Title"></span>',
  948. width:400,
  949. layout:'fit',
  950. closable:false,
  951. modal:true,
  952. closeAction:'hide',
  953. items:rtuInfoForm
  954. });
  955. var showRtuInfoWin = function(record){
  956. vFileInfoWin.show();
  957. $("#VInfoWin_Title").html(record.get('data'));
  958. Ext.getCmp('uf_company_name').setValue(record.get('company_name'));
  959. Ext.getCmp('uf_name').setValue(record.get('name'));
  960. Ext.getCmp('uf_device_code').setValue(record.get('device_code'));
  961. Ext.getCmp('uf_fullname').setValue(record.get('fullname'));
  962. Ext.getCmp('uf_clr').setValue(record.get('clr_name'));
  963. Ext.getCmp('uf_clsj').setValue(record.get('clsj'));
  964. Ext.getCmp('uf_clnr').setValue(record.get('clnr'));
  965. Ext.getCmp('uf_id').setValue(record.get('id'));
  966. Ext.getCmp('uf_clwb').setValue(record.get('clwb')=='1'?'误报':'离线');
  967. Ext.getCmp('uf_status').setValue(record.get('status'));
  968. if(record.get('clzt')=='已处理'){
  969. Ext.getCmp('uf_clwb').setVisible(true);
  970. Ext.getCmp('uf_r_clwb').setVisible(false);
  971. Ext.getCmp('uf_r_clfw').setVisible(false);
  972. Ext.getCmp('confirmBtn').setVisible(false);
  973. Ext.getCmp('uf_clr').setVisible(true);
  974. Ext.getCmp('uf_clsj').setVisible(true);
  975. }else{
  976. Ext.getCmp('uf_clwb').setVisible(false);
  977. Ext.getCmp('uf_r_clwb').setVisible(true);
  978. Ext.getCmp('uf_r_clfw').setVisible(true);
  979. Ext.getCmp('confirmBtn').setVisible(true);
  980. Ext.getCmp('uf_clr').setVisible(false);
  981. Ext.getCmp('uf_clsj').setVisible(false);
  982. }
  983. }
  984. var RtuOptionPanel = Ext.create('Ext.grid.Panel', {
  985. // title: '离线报告列表',
  986. header :{
  987. height:0,
  988. border:'0px solid #000000'
  989. },
  990. titleCollapse:true,
  991. id: 'VRtuOptionListPanel',
  992. region:'center',
  993. store: myStore,
  994. // selModel: sm,
  995. columns: [
  996. { header: 'id', dataIndex:'id',hidden:true, menuDisabled:true},
  997. { header: '序号', dataIndex: 'orderIdx',width:50, menuDisabled:true },
  998. { header: '单位名称', dataIndex: 'company_name',width:240, menuDisabled:true },
  999. { header: '报告时间', dataIndex: 'time', width:160, menuDisabled:true },
  1000. { header: '报告数据', dataIndex: 'status', width:140, menuDisabled:true },
  1001. { header: '报告内容', dataIndex: 'name', width:900,minWidth:400, maxWidth:1600,menuDisabled:true },
  1002. { header: '处理状态', dataIndex: 'clzt', width:100, menuDisabled:true },
  1003. { header: '处理人', dataIndex: 'clr_name',width:150, menuDisabled:true },
  1004. { header: '处理时间', dataIndex: 'clsj', width:160, menuDisabled:true }
  1005. ],
  1006. columnLines: true,
  1007. height: maxHeight,
  1008. width: '100%',
  1009. tbar: new Ext.create('Ext.toolbar.Toolbar',{
  1010. items:[{
  1011. html:'<span id="RtuPiePanel_title_string" style="color:#ffffff;background-color:rgba(0,0,0,0)">离线报告列表</span>'
  1012. },'->',{
  1013. xtype: 'button',
  1014. iconCls:'back_btn',
  1015. text: '<span style="color:#ffffff;background-color:rgba(0,0,0,0)">返回</span>',
  1016. listeners: {
  1017. click: function(){
  1018. window.parent.document.location=baseUrl+'view/frontpage/map.jsp?&theme='+theme+'&company_code='+company_code;
  1019. }
  1020. }
  1021. },'-',{
  1022. xtype: 'button',
  1023. iconCls:'filter_btn',
  1024. text: '<span style="color:#ffffff;background-color:rgba(0,0,0,0)">筛选</span>',
  1025. listeners: {
  1026. click: filterwin
  1027. }
  1028. },'-',
  1029. {
  1030. xtype: 'button',
  1031. iconCls:'filter_btn',
  1032. text: '<span style="color:#ffffff;background-color:rgba(0,0,0,0)">导出</span>',
  1033. listeners: {
  1034. click: exportbtn_click
  1035. }
  1036. },'-']
  1037. }),
  1038. bbar: new Ext.PagingToolbar({
  1039. store: myStore,
  1040. id:'VRtuOptionListPageToolbar',
  1041. displayInfo: true,
  1042. pageSize: countPerPage,
  1043. prependButtons: true,
  1044. displayMsg : '显示第 {0}条到 {1}条记录,总共 {2}条',
  1045. emptyMsg : "没有记录",
  1046. firstText: '第一页',
  1047. prevText: '前一页',
  1048. nextText: '后一页',
  1049. lastText: '最后一页',
  1050. refreshText: '刷新'
  1051. }),
  1052. frame: true,
  1053. border:false,
  1054. iconCls: 'icon-grid',
  1055. listeners:{
  1056. 'celldblclick' : function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts){
  1057. showRtuInfoWin(record);
  1058. }
  1059. }
  1060. });
  1061. var piebar = Ext.create('Ext.panel.Panel',{
  1062. id:'FirePiePanel',
  1063. width:'100%',
  1064. height:498,
  1065. region:'north',
  1066. layout:'border',
  1067. defaults:{
  1068. border:false
  1069. },
  1070. html:'<div id="operation_body" class="operation_body">' +
  1071. '<div id="operation_dock_l" class="operation_dock_l">' +
  1072. '</div><div id="operation_dock_r" class="operation_dock_r">' +
  1073. '</div><img id="operation_title_icon" class="operation_title_icon" width="48" height="48" src="../../res/img/icons/video_03.png"/>' +
  1074. '<div id="operation_title_text" class="operation_title_text">视频设备离线处理情况</div>' +
  1075. '<div id="operation_label_1" class="operation_label_1">总数</div>' +
  1076. '<div id="operation_label_2" class="operation_label_2">已处理</div>' +
  1077. '<div id="operation_label_3" class="operation_label_3">未处理</div>' +
  1078. '<div id="operation_label_4" class="operation_label_4">处置率</div>' +
  1079. '<div id="operation_num_1" class="operation_num_1"></div>' +
  1080. '<div id="operation_num_2" class="operation_num_2"></div>' +
  1081. '<div id="operation_num_3" class="operation_num_3"></div>' +
  1082. '<div id="operation_num_4" class="operation_num_4"></div>' +
  1083. '<div id="operation_pie_bg" class="operation_pie_bg"></div>' +
  1084. '<div id="operation_pie" class="operation_pie"></div>' +
  1085. '<div id="operation_pie_title" class="operation_pie_title">处置率</div>' +
  1086. '<div id="operation_area_bg" class="operation_area_bg"></div>' +
  1087. '<div id="operation_area" class="operation_area"></div></div>'
  1088. });
  1089. pieMask = new Ext.LoadMask(piebar,{msg:"Loading..."});
  1090. new Ext.create('Ext.panel.Panel',{
  1091. width:'100%',
  1092. id: 'RtuAlarmPanel',
  1093. layout:'border',
  1094. items:[
  1095. piebar,RtuOptionPanel
  1096. ],
  1097. renderTo: Ext.getBody()
  1098. });
  1099. myStore.reload();
  1100. // getCurrentData();
  1101. $(window).resize(function(){
  1102. body_resize();
  1103. });
  1104. body_resize();
  1105. });