frame3.html 33 KB

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