zaoquanCoalMine.html 46 KB

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