frame3.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>生产数据</title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  9. <!--<link rel="stylesheet" type="text/css" href="../../css/aui.css"/>-->
  10. <link rel="stylesheet" type="text/css" href="../../css/popoPicker.css"/>
  11. <link rel="stylesheet" href="../../css/apiToast.css">
  12. <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
  13. <link rel="stylesheet" href="../../css/projeck.css">
  14. <style>
  15. body,html{
  16. background: #F3F3F3;
  17. }
  18. .api_layout{
  19. /*border-top: 1px solid #37b0e9;*/
  20. padding: 13px 10px;
  21. -webkit-box-sizing: border-box;
  22. -moz-box-sizing: border-box;
  23. box-sizing: border-box;
  24. }
  25. .navs_item{
  26. padding:0;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div class="api_layout">
  32. <!-- 公告 -->
  33. <div class="Notice1 borderRa">
  34. <p class="Stitle">公告:</p>
  35. <p class="Scontent Stitle"></p>
  36. </div>
  37. <!-- 导航 -->
  38. <div class="navs Notice borderRa">
  39. <ul class="navs_item flex-space">
  40. <li onclick="videoMonitor()">
  41. <div class="icon_p">
  42. <i class="icon"></i>
  43. </div>
  44. <span>视频监控</span>
  45. </li>
  46. <li onclick="personalLocationJu()">
  47. <div class="icon_p">
  48. <i class="icon"></i>
  49. </div>
  50. <span>人员定位</span>
  51. </li>
  52. <li onclick="securityMonitor()">
  53. <div class="icon_p">
  54. <i class="icon"></i>
  55. </div>
  56. <span>安全监测</span>
  57. </li>
  58. <li onclick="effectControl()">
  59. <div class="icon_p">
  60. <i class="icon"></i>
  61. </div>
  62. <span>生产统计</span>
  63. </li>
  64. </ul>
  65. </div>
  66. <!-- 报警 -->
  67. <div class="Notice navs borderRa police beforS hide">
  68. <p class="Stitle centertT" style="padding-bottom:5px">安全监测报警</p>
  69. <ul class="navs_item flex-space">
  70. <li>
  71. <span>二级报警</span>
  72. <div class="circular alarmNum1" onclick="securityMonitor()">0个</div>
  73. </li>
  74. <li>
  75. <span>三级报警</span>
  76. <div class="circular alarmNum2" onclick="securityMonitor()">0个</div>
  77. </li>
  78. <li>
  79. <span>四级报警</span>
  80. <div class="circular alarmNum3" onclick="securityMonitor()">0个</div>
  81. </li>
  82. </ul>
  83. </div>
  84. <!-- 瓦斯报警异常 -->
  85. <div class="Notice borderRa beforS hide">
  86. <p class="Stitle centertT">瓦斯异常情况</p>
  87. <ul class="items flex-space centertT">
  88. <li class="item" onclick="securityMonitor()">
  89. <span>报警</span>
  90. <p class="num Gasalarm">0个</p>
  91. <i class="imgIco"></i>
  92. </li>
  93. <li class="item" onclick="securityMonitor()">
  94. <span>断电</span>
  95. <p class="num duanDian">0个</p>
  96. <i class="imgIco"></i>
  97. </li>
  98. <li class="item" onclick="securityMonitor()">
  99. <span>故障</span>
  100. <p class="num guZhang">0个</p>
  101. <i class="imgIco"></i>
  102. </li>
  103. </ul>
  104. </div>
  105. <!-- 产量 进尺 -->
  106. <div class="Notice borderRa beforS hide">
  107. <p class="Stitle centertT">产量 进尺</p>
  108. <div class="Chart flex-space">
  109. <div style="width:50%" class="canvasParent centertT">
  110. <canvas id="yield" style="width: 100%;height:140px"></canvas>
  111. <span class="canvasTitle">今日产量</span>
  112. </div>
  113. <div class="centertT" style="width:50%">
  114. <canvas id="Footage" style="width: 100%;height:140px"></canvas>
  115. <span class="canvasTitle">今日掘进进尺</span>
  116. </div>
  117. </div>
  118. </div>
  119. <!-- 皮带秤 产量 -->
  120. <div class="Notice borderRa beforS hide">
  121. <p class="Stitle centertT">皮带秤小时产量</p>
  122. <div class="" style="width:100%">
  123. <canvas id="Belt" style="width: 100%;margin-top:10px;height:210px"></canvas>
  124. </div>
  125. </div>
  126. <!-- 销量 能耗 -->
  127. <div class="Notice borderRa beforS hide">
  128. <p class="Stitle centertT">销量 能耗</p>
  129. <div class="Chart flex-space">
  130. <div style="width:50%" class="canvasParent centertT">
  131. <canvas id="sales" style="width: 100%;height:140px"></canvas>
  132. <span class="canvasTitle">销量</span>
  133. </div>
  134. <div class="centertT" style="width:50%">
  135. <canvas id="energy" style="width: 100%;height:140px"></canvas>
  136. <span class="canvasTitle">能耗</span>
  137. </div>
  138. </div>
  139. </div>
  140. <!-- 隐患整治 三违 -->
  141. <div class="Notice borderRa beforS hide">
  142. <p class="Stitle centertT">隐患整治 三违</p>
  143. <div class="Chart flex-space">
  144. <div style="width:50%" class="canvasParent centertT">
  145. <canvas id="danger" style="width: 100%;height:140px"></canvas>
  146. <span class="canvasTitle">隐患整治</span>
  147. </div>
  148. <div class="centertT" style="width:50%">
  149. <canvas id="violation" style="width: 100%;height:140px"></canvas>
  150. <span class="canvasTitle">三违</span>
  151. </div>
  152. </div>
  153. </div>
  154. <!-- 一周产量 -->
  155. <div class="Notice borderRa hide">
  156. <!--<p class="Stitle flex-space">-->
  157. <!--<span> 一周产量趋势</span>-->
  158. <!--&lt;!&ndash; <span style="font-size:14px" class="currentNum">当前下井人数:</span> &ndash;&gt;-->
  159. <!--</p>-->
  160. <div class="Chart">
  161. <div class="flex-start">
  162. <div class="relative Sharebox screen">
  163. <input id="button-value" class="js-picker" value="周产量趋势">
  164. <i class="lower"></i>
  165. </div>
  166. <div class=" selectTime hide">
  167. <input class="button-value startYear" value="">
  168. </div>
  169. <div class="selectTime1 hide">
  170. <input class="button-value startTime" value="">
  171. </div>
  172. </div>
  173. <div class="" style="width:100%">
  174. <canvas id="weekYield" style="width: 100%;margin-top:10px;height:210px"></canvas>
  175. </div>
  176. </div>
  177. </div>
  178. <!-- 一周下井趋势 -->
  179. <div class="Notice borderRa hide afterS">
  180. <p class="Stitle flex-space">
  181. <span> 一周下井趋势</span>
  182. <span style="font-size:14px" class="currentNum"></span>
  183. </p>
  184. <div class="Chart">
  185. <div class="" style="width:100%">
  186. <canvas id="downWell" style="width: 100%;margin-top:10px;height:210px"></canvas>
  187. </div>
  188. </div>
  189. <p class="centertT seachDetatle" onclick="personalLocationJu()">查看详情</p>
  190. </div>
  191. </div>
  192. <script src="../../script/api.js"></script>
  193. <script src="../../script/popoPicker.js"></script>
  194. <script src="../../script/f2.js"></script>
  195. <script src="../../script/config.js"></script>
  196. <script>
  197. var headers;
  198. var apiToast = new apiToast();
  199. apiready = function () {
  200. var info = $api.getStorage('data'),
  201. user = JSON.parse(info).data.user;
  202. token = JSON.parse(info).data.access_token;
  203. headers = {
  204. "Authorization": "Bearer " + token
  205. };
  206. openSharebox();//选择器
  207. //公告
  208. noticeFun();
  209. // 图表权限
  210. chartsJurisdiction();
  211. // 监听切换tab标签,刷新页面
  212. api.addEventListener({
  213. name: 'refreshProduction'
  214. }, function(ret, err) {
  215. //公告
  216. noticeFun();
  217. // 图表权限
  218. chartsJurisdiction();
  219. });
  220. };
  221. // 下拉刷新
  222. function setCustomRefreshHeader() {
  223. api.setRefreshHeaderInfo({
  224. bgColor: '#f2f2f2',
  225. textColor: '#000',
  226. textDown: '下拉刷新...',
  227. textUp: '松开刷新...'
  228. }, function(ret, err) {
  229. //公告
  230. noticeFun();
  231. // 图表权限
  232. chartsJurisdiction();
  233. });
  234. }
  235. // 打开视频
  236. function videoMonitor() {
  237. $http.fnReuestDataNoW(UrlRouter.regionApi,headers,'get','',regionFun)
  238. }
  239. function regionFun(ret,err) {
  240. apiToast.hide();
  241. if (ret.code === 0) {
  242. var video = api.require('modulehikvision');
  243. var param = {
  244. name:'admin',
  245. pwd:'admin123456+',
  246. addr:'120.253.43.7:443'
  247. }
  248. video.start2HikVisionLogin(param);
  249. }else if (ret.code === 1) {
  250. api.alert({
  251. title: '提示',
  252. msg: '该用户没有此权限',
  253. });
  254. }
  255. }
  256. // 安全监测权限
  257. function securityMonitor() {
  258. // $event.openWin('securityMonitor','../productionData/securityMonitor','','');
  259. $http.fnReuestDataNologing(UrlRouter.securityJurisdiction,headers,'post','',function (ret,err) {
  260. if(ret.code === 0) {
  261. $event.openWin('securityMonitor','../productionData/securityMonitor','','');
  262. }else if (ret.code === 1) {
  263. api.alert({
  264. title: '提示',
  265. msg: '该用户没有此权限',
  266. });
  267. }
  268. })
  269. }
  270. // 人员定位权限
  271. function personalLocationJu() {
  272. $http.fnReuestDataNologing(UrlRouter.personalLocation,headers,'post','',function (ret,err) {
  273. if(ret.code === 0) {
  274. $event.openWin('persnoalLocation','../productionData/persnoalLocation','','');
  275. }else if (ret.code === 1) {
  276. api.alert({
  277. title: '提示',
  278. msg: '该用户没有此权限',
  279. });
  280. }
  281. })
  282. }
  283. // 效能管控
  284. function effectControl() {
  285. $http.fnReuestDataNologing(UrlRouter.efficacyShow,headers,'post','',function (ret,err) {
  286. if(ret.code === 0) {
  287. $event.openWin('efficiencyWin','../productionData/efficiencyWin','','');
  288. }else if (ret.code === 1) {
  289. api.alert({
  290. title: '提示',
  291. msg: '该用户没有此权限',
  292. });
  293. }
  294. })
  295. }
  296. // 生产图表权限
  297. function chartsJurisdiction() {
  298. $api.val($api.dom('#button-value'), '周产量趋势');
  299. $api.addCls($api.dom('.selectTime1'), 'hide');
  300. $api.addCls($api.dom('.selectTime'), 'hide');
  301. $http.fnReuestDataNologing(UrlRouter.chartsJurisdiction,headers,'post','',function (ret,err) {
  302. if (ret && ret.code === 0) {
  303. // 今日产量
  304. yieldFootage();footage();
  305. //一周的产量
  306. weekYield(false,210);
  307. // 一周下井趋势
  308. downWellFun();
  309. // 报警
  310. getAlarmData();
  311. //瓦斯异常
  312. getGas();
  313. // 皮带称
  314. getBeltData()
  315. // 下拉刷新
  316. setCustomRefreshHeader();
  317. var Notice = $api.domAll('.Notice');
  318. for (var i = 0; i < Notice.length; i++) {
  319. $api.removeCls(Notice[i], 'hide');
  320. }
  321. }else if (ret && ret.code === 1) {
  322. api.alert({
  323. title: '提示',
  324. msg: '该用户没有此权限',
  325. });
  326. }
  327. })
  328. }
  329. // 产量 进尺
  330. function yieldFootage() {
  331. $http.fnReuestDataNologing(UrlRouter.getBanNowDayTotal,'','get','',function(ret,err){
  332. if (ret && ret.status === 20000 && ret.data.length > 0) {
  333. api.refreshHeaderLoadDone();
  334. var data = [{
  335. x: '1',
  336. y: 75
  337. }];
  338. var chart = new F2.Chart({
  339. id: 'yield',
  340. pixelRatio: window.devicePixelRatio
  341. });
  342. chart.source(data, {
  343. y: {
  344. max: 100,
  345. min: 0
  346. }
  347. });
  348. chart.axis(false);
  349. chart.tooltip(false);
  350. chart.coord('polar', {
  351. transposed: true,
  352. innerRadius: 0.92,
  353. radius: 0.99,
  354. });
  355. chart.guide().arc({
  356. start: [0, 0],
  357. end: [1, 99.98],
  358. top: false,
  359. style: {
  360. lineWidth: 8,
  361. stroke: '#ccc'
  362. }
  363. });
  364. chart.guide().text({
  365. position: ['50%', '50%'],
  366. content: Math.floor(ret.data[0].DayTotal/1)+'吨',
  367. style: {
  368. fontSize: 16,
  369. fill: '#3d3c42'
  370. }
  371. });
  372. chart.interval().position('x*y').size(8).animate({
  373. appear: {
  374. duration: 1200,
  375. easing: 'cubicIn'
  376. }
  377. }).color('#6C6F74');
  378. chart.render();
  379. }
  380. });
  381. }
  382. function footage() {
  383. $http.fnReuestDataNologing(UrlRouter.getSchedule,'','post','',function(ret,err){
  384. if (ret.code === 0 && ret) {
  385. // 进尺
  386. var data = [{
  387. x: '1',
  388. y: ret.data['tunnel'].reality
  389. }];
  390. var chart = new F2.Chart({
  391. id: 'Footage',
  392. pixelRatio: window.devicePixelRatio
  393. });
  394. chart.source(data, {
  395. y: {
  396. max: ret.data['tunnel'].plan,
  397. min: 0
  398. }
  399. });
  400. chart.axis(false);
  401. chart.tooltip(false);
  402. chart.coord('polar', {
  403. transposed: true,
  404. innerRadius: 0.92,
  405. radius: 0.99,
  406. });
  407. chart.guide().arc({
  408. start: [0, 0],
  409. end: [1, ret.data['tunnel'].plan - 0.1],
  410. top: false,
  411. style: {
  412. lineWidth: 8,
  413. stroke: '#ccc'
  414. }
  415. });
  416. chart.guide().text({
  417. position: ['50%', '50%'],
  418. content: ret.data['tunnel'].today+'米',
  419. style: {
  420. fontSize: 16,
  421. fill: '#3d3c42'
  422. }
  423. });
  424. chart.interval().position('x*y').size(8).animate({
  425. appear: {
  426. duration: 1200,
  427. easing: 'cubicIn'
  428. }
  429. }).color('#14D2B8');
  430. chart.render();
  431. // 销量
  432. var data1 = [{
  433. x: '1',
  434. y: ret.data['sales'].reality
  435. }];
  436. var chartSales = new F2.Chart({
  437. id: 'sales',
  438. pixelRatio: window.devicePixelRatio
  439. });
  440. chartSales.source(data1, {
  441. y: {
  442. max: ret.data['sales'].plan,
  443. min: 0
  444. }
  445. });
  446. chartSales.axis(false);
  447. chartSales.tooltip(false);
  448. chartSales.coord('polar', {
  449. transposed: true,
  450. innerRadius: 0.92,
  451. radius: 0.99,
  452. });
  453. chartSales.guide().arc({
  454. start: [0, 0],
  455. end: [1, ret.data['sales'].plan - 0.1],
  456. top: false,
  457. style: {
  458. lineWidth: 8,
  459. stroke: '#ccc'
  460. }
  461. });
  462. chartSales.guide().text({
  463. position: ['50%', '50%'],
  464. content: ret.data['sales'].today+'吨',
  465. style: {
  466. fontSize: 16,
  467. fill: '#3d3c42'
  468. }
  469. });
  470. chartSales.interval().position('x*y').size(8).animate({
  471. appear: {
  472. duration: 1200,
  473. easing: 'cubicIn'
  474. }
  475. }).color('#14D2B8');
  476. chartSales.render();
  477. // 能耗
  478. var data2 = [{
  479. x: '1',
  480. y: ret.data['energy'].reality
  481. }];
  482. var chartEnergy = new F2.Chart({
  483. id: 'energy',
  484. pixelRatio: window.devicePixelRatio
  485. });
  486. chartEnergy.source(data2, {
  487. y: {
  488. max: ret.data['energy'].plan,
  489. min: 0
  490. }
  491. });
  492. chartEnergy.axis(false);
  493. chartEnergy.tooltip(false);
  494. chartEnergy.coord('polar', {
  495. transposed: true,
  496. innerRadius: 0.92,
  497. radius: 0.99,
  498. });
  499. chartEnergy.guide().arc({
  500. start: [0, 0],
  501. end: [1, ret.data['energy'].plan - 0.1],
  502. top: false,
  503. style: {
  504. lineWidth: 8,
  505. stroke: '#ccc'
  506. }
  507. });
  508. chartEnergy.guide().text({
  509. position: ['50%', '50%'],
  510. content: ret.data['energy'].today+'千瓦',
  511. style: {
  512. fontSize: 16,
  513. fill: '#3d3c42'
  514. }
  515. });
  516. chartEnergy.interval().position('x*y').size(8).animate({
  517. appear: {
  518. duration: 1200,
  519. easing: 'cubicIn'
  520. }
  521. }).color('#FF8B8C');
  522. chartEnergy.render();
  523. // 隐患整治
  524. var data3 = [{
  525. x: '1',
  526. y: ret.data['danger'].reality
  527. }];
  528. var chartDanger = new F2.Chart({
  529. id: 'danger',
  530. pixelRatio: window.devicePixelRatio
  531. });
  532. chartDanger.source(data3, {
  533. y: {
  534. max: ret.data['danger'].plan,
  535. min: 0
  536. }
  537. });
  538. chartDanger.axis(false);
  539. chartDanger.tooltip(false);
  540. chartDanger.coord('polar', {
  541. transposed: true,
  542. innerRadius: 0.92,
  543. radius: 0.99,
  544. });
  545. chartDanger.guide().arc({
  546. start: [0, 0],
  547. end: [1, ret.data['danger'].plan - 0.1],
  548. top: false,
  549. style: {
  550. lineWidth: 8,
  551. stroke: '#ccc'
  552. }
  553. });
  554. chartDanger.guide().text({
  555. position: ['50%', '50%'],
  556. content: ret.data['danger'].today+'个',
  557. style: {
  558. fontSize: 16,
  559. fill: '#3d3c42'
  560. }
  561. });
  562. chartDanger.interval().position('x*y').size(8).animate({
  563. appear: {
  564. duration: 1200,
  565. easing: 'cubicIn'
  566. }
  567. }).color('#14D2B8');
  568. chartDanger.render();
  569. //三违
  570. var data4 = [{
  571. x: '1',
  572. y: ret.data['violation'].reality
  573. }];
  574. var chartViolation = new F2.Chart({
  575. id: 'violation',
  576. pixelRatio: window.devicePixelRatio
  577. });
  578. chartViolation.source(data4, {
  579. y: {
  580. max: ret.data['violation'].plan,
  581. min: 0
  582. }
  583. });
  584. chartViolation.axis(false);
  585. chartViolation.tooltip(false);
  586. chartViolation.coord('polar', {
  587. transposed: true,
  588. innerRadius: 0.92,
  589. radius: 0.99,
  590. });
  591. chartViolation.guide().arc({
  592. start: [0, 0],
  593. end: [1, ret.data['violation'].plan - 0.1],
  594. top: false,
  595. style: {
  596. lineWidth: 8,
  597. stroke: '#ccc'
  598. }
  599. });
  600. chartViolation.guide().text({
  601. position: ['50%', '50%'],
  602. content: ret.data['violation'].today+'个',
  603. style: {
  604. fontSize: 16,
  605. fill: '#3d3c42'
  606. }
  607. });
  608. chartViolation.interval().position('x*y').size(8).animate({
  609. appear: {
  610. duration: 1200,
  611. easing: 'cubicIn'
  612. }
  613. }).color('#FF8B8C');
  614. chartViolation.render();
  615. }
  616. });
  617. }
  618. // 一周下井趋势
  619. function downWellFun() {
  620. $http.fnReuestDataNologing(UrlRouter.downWellTotal,'','post','',function(ret,err){
  621. if (ret && ret.code === 0) {
  622. api.refreshHeaderLoadDone();
  623. var data = ret.data;
  624. var chart = new F2.Chart({
  625. id: 'downWell',
  626. pixelRatio: window.devicePixelRatio
  627. });
  628. chart.source(data, {
  629. 'pepole_num': {
  630. tickCount: 5
  631. }
  632. });
  633. chart.tooltip({
  634. custom: false, // 自定义 tooltip 内容框
  635. });
  636. chart.interval().position('dater*pepole_num').color('classes').adjust('stack');
  637. chart.render();
  638. }
  639. });
  640. // 当前人数
  641. $http.fnReuestDataNologing(UrlRouter.currentPersonalNum,'','post','',function(ret,err){
  642. if (ret && ret.code === 0 && ret.data.length > 0) {
  643. $api.html($api.dom('.currentNum'), '当前下井人数:'+ret.data[0].pepole_num +'人');
  644. }
  645. });
  646. }
  647. //一周的产量
  648. function weekYield(transposed,height,type,startTime,endTime) {
  649. if(type != '年产量趋势'){
  650. var data = {
  651. dateTime:startTime,
  652. endTime:endTime
  653. };
  654. $http.fnReuestDataNologing(UrlRouter.getBanDayList,'','get',data,function(ret,err){
  655. if (ret && ret.status === 20000) {
  656. api.refreshHeaderLoadDone();
  657. var data = ret.data;
  658. var chart = new F2.Chart({
  659. id: 'weekYield',
  660. height: height,
  661. pixelRatio: window.devicePixelRatio
  662. });
  663. chart.source(data, {
  664. 'banTotal2': {
  665. tickCount: 5
  666. }
  667. });
  668. chart.coord({
  669. transposed: transposed
  670. });
  671. chart.tooltip({
  672. custom: false, // 自定义 tooltip 内容框
  673. });
  674. chart.interval().position('curDT*total').color('devName').adjust('stack');
  675. chart.render();
  676. }
  677. });
  678. }else {
  679. $http.fnReuestDataNologing(UrlRouter.getMonthSumByYear,'','get',{year:startTime},function(ret,err){
  680. if (ret && ret.status === 20000) {
  681. api.refreshHeaderLoadDone();
  682. var data = ret.data;
  683. var chart = new F2.Chart({
  684. id: 'weekYield',
  685. height: height,
  686. pixelRatio: window.devicePixelRatio
  687. });
  688. chart.source(data, {
  689. 'banTotal2': {
  690. tickCount: 5
  691. }
  692. });
  693. chart.coord({
  694. transposed: transposed
  695. });
  696. chart.axis('total', {
  697. line: null,
  698. grid: F2.Global._defaultAxis.grid,
  699. label: function label(text, index, total) {
  700. var textCfg = {
  701. text: text / 10000 + '万吨'
  702. };
  703. if (index === 0) {
  704. textCfg.textAlign = 'right';
  705. } else if (index === total - 1) {
  706. textCfg.textAlign = 'right';
  707. }else {
  708. textCfg.textAlign = 'right';
  709. }
  710. return textCfg;
  711. }
  712. });
  713. chart.interval().position('month*total').color('devName').adjust('stack');
  714. chart.render();
  715. }
  716. });
  717. }
  718. }
  719. // 公告
  720. function noticeFun() {
  721. $http.fnReuestDataNologing(UrlRouter.getBulletin,'','post','',function (ret,err) {
  722. if (ret && ret.code === 0) {
  723. api.refreshHeaderLoadDone();
  724. $api.html($api.dom('.Scontent'), ret.data.content ==""?'暂无公告':ret.data.content);
  725. }
  726. })
  727. }
  728. // 报警
  729. function getAlarmData() {
  730. $http.fnReuestDataNologing(UrlRouter.getAlarmData,'','post','',function (ret,err) {
  731. if (ret && ret.code === 0) {
  732. $api.html($api.dom('.alarmNum1'), ret.data.level2 +'个');
  733. $api.html($api.dom('.alarmNum2'), ret.data.level3 +'个');
  734. $api.html($api.dom('.alarmNum3'), ret.data.level4 +'个');
  735. }
  736. })
  737. }
  738. // 瓦斯异常情况
  739. function getGas() {
  740. $http.fnReuestDataNologing(UrlRouter.getGasData,'','post','',function (ret,err) {
  741. if (ret && ret.code === 0) {
  742. $api.html($api.dom('.Gasalarm'), ret.data[0].count +'个');
  743. $api.html($api.dom('.duanDian'), ret.data[1].count +'个');
  744. $api.html($api.dom('.guZhang'), ret.data[2].count +'个');
  745. }
  746. });
  747. }
  748. // 选择时间
  749. function openSharebox() {
  750. var myDate = new Date();
  751. var tYear = myDate.getFullYear();
  752. var tmonth = myDate.getMonth()+1
  753. $api.val($api.dom('.startYear'), tYear+'年');
  754. $api.val($api.dom('.startTime'), tYear+'-'+ (tmonth<10? 0+""+tmonth:tmonth));
  755. new popoPicker('.js-picker',{
  756. container:'.screen',
  757. wheels: [{
  758. infinite: false,
  759. //selected: 3,
  760. data:[
  761. {value:0,display:'周产量趋势'},
  762. {value:1,display:'月产量趋势'},
  763. {value:2,display:'年产量趋势'}
  764. ]
  765. }],
  766. background:'light',
  767. save:function (data) {
  768. switch (data.result[0].display) {
  769. case '周产量趋势':
  770. $api.addCls($api.dom('.selectTime1'), 'hide');
  771. $api.addCls($api.dom('.selectTime'), 'hide');
  772. weekYield(false,210);
  773. break;
  774. case '月产量趋势':
  775. $api.removeCls($api.dom('.selectTime1'), 'hide');
  776. $api.addCls($api.dom('.selectTime'), 'hide');
  777. weekYield(true,700,'',tYear+'-'+ (tmonth<10? 0+""+tmonth+'-'+0+""+1:tmonth),tYear+'-'+ (tmonth<10? 0+""+tmonth+'-'+31:tmonth),'');
  778. break;
  779. case '年产量趋势':
  780. $api.addCls($api.dom('.selectTime1'), 'hide');
  781. $api.removeCls($api.dom('.selectTime'), 'hide');
  782. weekYield(false,300,data.result[0].display,tYear)
  783. break;
  784. default:
  785. }
  786. }
  787. });
  788. new popoDateTime('.startTime',{
  789. container:'.selectTime1',
  790. background:'light',
  791. save:function (data) {
  792. weekYield(true,700,'',data+'-'+0+""+1,data+'-'+31);
  793. }
  794. });
  795. new popoYear('.startYear',{
  796. container:'.selectTime',
  797. background:'light',
  798. save:function (data) {
  799. $api.val($api.dom('.startYear'), data+'年');
  800. weekYield(false,300,'年产量趋势',data)
  801. }
  802. });
  803. }
  804. // 皮带称数据
  805. function getBeltData() {
  806. $http.fnReuestDataNologing(UrlRouter.getDayHourTotal,'','get','',function (ret,err) {
  807. if (ret.status === 20000) {
  808. var data = ret.data;
  809. var chart = new F2.Chart({
  810. id: 'Belt',
  811. pixelRatio: window.devicePixelRatio
  812. });
  813. chart.source(data, {
  814. time: {
  815. type: 'timeCat',
  816. mask: 'hh:mm',
  817. tickCount: 5,
  818. range: [0, 1]
  819. }
  820. });
  821. chart.tooltip({
  822. showCrosshairs: true,
  823. showItemMarker: false,
  824. onShow: function onShow(ev) {
  825. var items = ev.items;
  826. items[0].name = null;
  827. items[0].value = items[0].value +'吨';
  828. }
  829. });
  830. chart.axis('day', {
  831. label: function label(text, index, total) {
  832. var textCfg = {};
  833. if (index === 0) {
  834. textCfg.textAlign = 'left';
  835. } else if (index === total - 1) {
  836. textCfg.textAlign = 'right';
  837. }
  838. return textCfg;
  839. }
  840. });
  841. if (ret.data.length != 0) {
  842. chart.legend({
  843. custom: true,
  844. itemWidth: null,
  845. nameStyle: {
  846. textAlign: 'middle',
  847. fontSize: '14',
  848. textBaseline: 'middle'
  849. },
  850. items: [{
  851. name: '皮带秤',
  852. marker: {
  853. symbol:'circle',
  854. radius: 5,
  855. fill: ret.data[ret.data.length-1].runState === 'Stop'? '#E74C3C':'#2ECC71'
  856. }
  857. }]
  858. });
  859. }
  860. chart.line().position('time*total').shape('smooth');
  861. chart.point().position('time*total').shape('smooth').style({
  862. stroke: '#fff',
  863. lineWidth: 1
  864. });
  865. chart.render();
  866. }
  867. })
  868. }
  869. </script>
  870. </body>
  871. </html>