visual.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600
  1. $(window).load(function () {
  2. $(".loading").fadeOut()
  3. })
  4. var map, layer, markerlayer, marker,
  5. url = "http://111.42.156.47:806/iserver/services/map-2222/rest/maps/dili";
  6. var sT = "";
  7. var eT = "";
  8. var fyT = "";
  9. var fyres = null;
  10. var res = null;
  11. var markerList = [];
  12. var mesList = [];
  13. $(function () {
  14. var oTime = new Date();
  15. console.log(changeDate(oTime));
  16. $("#dateend").val(changeDate(oTime));
  17. $("#datefy").val(changeDate(oTime));
  18. $("#datestart").val(changeDate(addDate(oTime, -2)));
  19. init();
  20. })
  21. function init() {
  22. map = new SuperMap.Map("map", {
  23. controls: [
  24. new SuperMap.Control.Zoom(),
  25. new SuperMap.Control.Navigation()
  26. ]
  27. });
  28. layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null, { maxResolution: "auto" });
  29. markerlayer = new SuperMap.Layer.Markers("markerLayer");
  30. layer.events.on({ "layerInitialized": addLayer });
  31. searchjindu();
  32. searchfangyi();
  33. }
  34. function addLayer() {
  35. map.addLayers([layer, markerlayer]);
  36. //显示地图范围
  37. map.setCenter(new SuperMap.LonLat(126.37, 46.05), 1);
  38. }
  39. function searchfangyi() {
  40. if (fyT != $("#datefy").val()) {
  41. fyT = $("#datefy").val();
  42. var datajs = { datefy: $("#datefy").val() };
  43. $.ajax({
  44. url: "https://www.hmedi02.net:802/qiangxian/platform/qiangxianxinxi/qiangxianxinxi/dataFangyi",
  45. type: "GET",
  46. async: false,
  47. contentType: "application/json;charset=utf-8",
  48. data: datajs,
  49. success: function (result) {
  50. fyres = result;
  51. if ($("#biaoduan").val() == "合计") {
  52. echarts_1(result.zhengchangAll, result.yichangAll);
  53. } else if ($("#biaoduan").val() == "一标段") {
  54. echarts_1(result.zhengchang1, result.yichang1);
  55. } else if ($("#biaoduan").val() == "二标段") {
  56. echarts_1(result.zhengchang2, result.yichang2);
  57. }
  58. },
  59. error: function (e) {
  60. console.log(e.status);
  61. console.log(e.responseText);
  62. }
  63. });
  64. } else {
  65. if ($("#biaoduan").val() == "合计") {
  66. echarts_1(fyres.zhengchangAll, fyres.yichangAll);
  67. } else if ($("#biaoduan").val() == "一标段") {
  68. echarts_1(fyres.zhengchang1, fyres.yichang1);
  69. } else if ($("#biaoduan").val() == "二标段") {
  70. echarts_1(fyres.zhengchang2, fyres.yichang2);
  71. }
  72. }
  73. }
  74. function searchjindu() {
  75. if (sT != $("#datestart").val() || eT != $("#dateend").val()) {
  76. if (markerList.length > 0) {
  77. for (var i = 0; i < markerList.length; i++) {
  78. markerlayer.removeMarker(markerList[i]);
  79. }
  80. markerList = [];
  81. }
  82. sT = $("#datestart").val();
  83. eT = $("#dateend").val();
  84. var datajs = { datestart: $("#datestart").val(), dateend: $("#dateend").val() };
  85. $.ajax({
  86. url: "https://www.hmedi02.net:802/qiangxian/platform/qiangxianxinxi/qiangxianxinxi/dataDaping",
  87. type: "GET",
  88. async: false,
  89. contentType: "application/json;charset=utf-8",
  90. data: datajs,
  91. success: function (result) {
  92. console.log(result);
  93. res = result;
  94. mesList = result.mapList;
  95. echarts_2(result.mapList);
  96. if ($("#biaoduan").val() == "合计") {
  97. echarts_3(result.xZhou, result.zuoyerenAll, result.zuoyecheAll, result.icecarAll, result.watercarAll, result.jinduAll);
  98. table1(result.table, result.table2);
  99. echarts_5(result.xZhou, result.fangyirenAll);
  100. } else if ($("#biaoduan").val() == "一标段") {
  101. echarts_3(result.xZhou, result.zuoyeren1, result.zuoyeche1, result.icecar1, result.watercar1, result.jindu1);
  102. table1(result.table, result.table2);
  103. echarts_5(result.xZhou, result.fangyiren1);
  104. } else if ($("#biaoduan").val() == "二标段") {
  105. echarts_3(result.xZhou, result.zuoyeren2, result.zuoyeche2, result.icecar2, result.watercar2, result.jindu2);
  106. table1(result.table, result.table2);
  107. echarts_5(result.xZhou, result.fangyiren2);
  108. }
  109. },
  110. error: function (e) {
  111. console.log(e.status);
  112. console.log(e.responseText);
  113. }
  114. });
  115. } else {
  116. if ($("#biaoduan").val() == "合计") {
  117. echarts_3(res.xZhou, res.zuoyerenAll, res.zuoyecheAll, res.icecarAll, res.watercarAll, res.jinduAll);
  118. table1(res.table, res.table2);
  119. echarts_5(res.xZhou, res.fangyirenAll);
  120. } else if ($("#biaoduan").val() == "一标段") {
  121. echarts_3(res.xZhou, res.zuoyeren1, res.zuoyeche1, res.icecar1, res.watercar1, res.jindu1);
  122. table1(res.table, res.table2);
  123. echarts_5(res.xZhou, res.fangyiren1);
  124. } else if ($("#biaoduan").val() == "二标段") {
  125. echarts_3(res.xZhou, res.zuoyeren2, res.zuoyeche2, res.icecar2, res.watercar2, res.jindu2);
  126. table1(res.table, res.table2);
  127. echarts_5(res.xZhou, res.fangyiren2);
  128. }
  129. }
  130. }
  131. function addDate(date, days) {
  132. var d = new Date(date);
  133. d.setDate(d.getDate() + days);
  134. return d;
  135. }
  136. function changeDate(dateT) {
  137. var year = dateT.getFullYear(); //获取完整的年份(4位,1970-????)
  138. var month = dateT.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  139. var day = dateT.getDate(); //获取当前日(1-31)
  140. if (month < 10) {
  141. month = "0" + month;
  142. }
  143. if (day < 10) {
  144. day = "0" + day;
  145. }
  146. var dateString = year + "-" + month + "-" + day;
  147. return dateString
  148. }
  149. function echarts_1(zc, yc) {
  150. var myChart = echarts.init(document.getElementById('echart1'));
  151. var datajs = [
  152. { value: zc, name: '体温正常' },
  153. { value: yc, name: '体温异常' },
  154. ]
  155. var option = {
  156. color: ['#2ef4ab', '#ffe074'],
  157. tooltip: {
  158. trigger: 'item',
  159. formatter: "{b} : {c} 人 ({d}%)"
  160. },
  161. legend: {
  162. bottom: '3%',
  163. itemGap: 10,
  164. icon: 'circle',
  165. textStyle: {
  166. color: 'rgba(255,255,255,.6)',
  167. fontSize: 12
  168. },
  169. data: ['体温正常', '体温异常']
  170. },
  171. calculable: true,
  172. series: [
  173. {
  174. name: ' ',
  175. type: 'pie',
  176. radius: [30, 50],
  177. center: ['50%', '40%'],
  178. //roseType: 'radius',
  179. label: {
  180. normal: {
  181. show: true
  182. },
  183. emphasis: {
  184. show: true
  185. }
  186. },
  187. lableLine: {
  188. normal: {
  189. show: true
  190. },
  191. emphasis: {
  192. show: true
  193. }
  194. },
  195. data: datajs
  196. },
  197. ]
  198. };
  199. myChart.setOption(option);
  200. window.addEventListener("resize", function () {
  201. myChart.resize();
  202. });
  203. }
  204. function echarts_2(mList) {
  205. if (mList.length > 0) {
  206. for (var i = 0; i < mList.length; i++) {
  207. var size = new SuperMap.Size(44, 33);
  208. var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
  209. var icon = new SuperMap.Icon('images/marker.png', size, offset);
  210. marker = new SuperMap.Marker(new SuperMap.LonLat(mList[i].longitude2, mList[i].latitude2), icon);
  211. marker.events.on({
  212. "id": mList[i].id,
  213. "click": openInfoWin,
  214. "scope": marker
  215. });
  216. markerList.push(marker);
  217. }
  218. for (var i = 0; i < markerList.length; i++) {
  219. markerlayer.addMarker(markerList[i]);
  220. }
  221. }
  222. }
  223. function openInfoWin() {
  224. var marker = this;
  225. var lonlat = marker.getLonLat();
  226. console.log(lonlat.lon);
  227. console.log(lonlat.lat);
  228. for (var i = 0; i < mesList.length; i++) {
  229. console.log(mesList[i]);
  230. if (ec(lonlat.lon, mesList[i].longitude2, lonlat.lat, mesList[i].latitude2)) {
  231. $("#sbrq").html(mesList[i].addtime);
  232. $("#fkrs").html(mesList[i].fangyiren);
  233. $("#yctw").html(mesList[i].yichangren);
  234. $("#zyrs").html(mesList[i].zuoyeren);
  235. $("#zycs").html(mesList[i].zuoyeche);
  236. $("#ybcc").html(mesList[i].icecar);
  237. $("#xwcc").html(mesList[i].watercar);
  238. $("#wcl").html(mesList[i].jindu);
  239. $("#bcsm").html(mesList[i].remark2);
  240. $("#sfyc").html(mesList[i].shifouyichang);
  241. $("#ycqk").html(mesList[i].yichangxinxi);
  242. if (mesList[i].fujianid == "") {
  243. $("#xczp").html("暂无现场照片");
  244. } else {
  245. $("#xczp").html("<button style=\"height:24px;width:100px;color: #000000\" data-toggle=\"modal\" data-target=\"#myModal\">查看现场照片</button>");
  246. var tList = mesList[i].fujianid.split(";");
  247. var imgHtml = "";
  248. for (var j = 0; j < tList.length; j++) {
  249. if (tList != "") {
  250. imgHtml += "<img src='" + tList[j] + "' /></br>";
  251. }
  252. }
  253. $("#myModalLabel").html(imgHtml);
  254. }
  255. if (mesList[i].yichangfujian == "") {
  256. $("#yczp").html("暂无异常照片");
  257. } else {
  258. $("#yczp").html("<button style=\"height:24px;width:100px;color: #000000\" data-toggle=\"modal\" data-target=\"#myModal2\">查看异常照片</button>");
  259. var tList = mesList[i].yichangfujian.split(";");
  260. var imgHtml = "";
  261. for (var j = 0; j < tList.length; j++) {
  262. if (tList != "") {
  263. imgHtml += "<img src='" + tList[j] + "' /></br>";
  264. }
  265. }
  266. $("#myModalLabel2").html(imgHtml);
  267. }
  268. return;
  269. }
  270. }
  271. }
  272. function ec(lon1, lon2, lat1, lat2) {
  273. var l1 = left(lon1 + " ", 14);
  274. var l2 = left(lon2 + " ", 14);
  275. var l3 = left(lat1 + " ", 14);
  276. var l4 = left(lat2 + " ", 14);
  277. if (l1 == l2 && l3 == l4) {
  278. return true;
  279. }
  280. return false;
  281. }
  282. function left(mainStr, lngLen) {
  283. if (lngLen > 0) { return mainStr.substring(0, lngLen) }
  284. else { return null }
  285. }
  286. function echarts_3(dtLisT, zyrList, zycList, ybcList, xwcList, jdList) {
  287. var myChart = echarts.init(document.getElementById('echart3'));
  288. var option = {
  289. legend: {
  290. left: 'center',
  291. textStyle: {
  292. color: "rgba(255, 255, 255, 1)"
  293. }
  294. },
  295. color: ['#1921ff', '#01c3dd', '#008198', '#2ef4ab', '#ffe074'],
  296. tooltip: {
  297. textStyle: {
  298. align: 'left'
  299. },
  300. trigger: 'axis',
  301. formatter: "{b0} " + $("#biaoduan").val() + ":</br>{a0} : {c0} 人</br>{a1} : {c1} 辆</br>{a2} : {c2} 次</br>{a3} : {c3} 次</br>{a4} : {c4} 平方米"
  302. },
  303. dataZoom: {
  304. start: 0,
  305. end: 100,
  306. bottom: 0,
  307. fillerColor: 'rgba(33,114,176,0.2)',
  308. textStyle: {
  309. color: 'rgba(255,255,255,.7)'
  310. },
  311. borderColor: {
  312. color: 'rgba(33,114,176,0.2)'
  313. },
  314. handleStyle: {
  315. color: {
  316. type: 'linear',
  317. x: 0,
  318. y: 0,
  319. x2: 0,
  320. y2: 1,
  321. colorStops: [{
  322. offset: 0, color: '#fbf320'
  323. }, {
  324. offset: 1, color: '#00b4e3'
  325. }],
  326. global: false
  327. }
  328. }
  329. },
  330. grid: {
  331. left: '3%',
  332. right: '5%',
  333. top: '8%',
  334. bottom: '5%',
  335. containLabel: true
  336. },
  337. xAxis: [
  338. {
  339. type: 'category',
  340. axisTick: { show: false },
  341. boundaryGap: false,
  342. axisLabel: {
  343. textStyle: {
  344. color: 'rgba(33,114,176,0.7)',
  345. fontSize: '12'
  346. },
  347. lineStyle: {
  348. color: 'rgba(33,114,176,0.2)',
  349. }
  350. },
  351. data: dtLisT
  352. }
  353. ],
  354. yAxis: {
  355. type: 'value',
  356. axisLabel: {
  357. textStyle: {
  358. color: 'rgba(33,114,176,0.7)',
  359. fontSize: '10',
  360. }
  361. },
  362. axisLine: {
  363. lineStyle: {
  364. color: 'rgba(33,114,176,0.2)',
  365. }
  366. },
  367. splitLine: {
  368. lineStyle: {
  369. color: 'rgba(33,114,176,0.2)',
  370. }
  371. },
  372. },
  373. series: [
  374. {
  375. name: '作业人数',
  376. lineStyle: {
  377. color: '#1921ff',
  378. },
  379. type: 'line',
  380. areaStyle: {
  381. normal: {
  382. type: 'default',
  383. color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
  384. offset: 0,
  385. color: 'rgba(129,197,255,.6)'
  386. }, {
  387. offset: 1,
  388. color: 'rgba(129,197,255,.0)'
  389. }], false)
  390. }
  391. },
  392. smooth: true,
  393. itemStyle: {
  394. normal: { areaStyle: { type: 'default' } }
  395. },
  396. label: {
  397. show: true,
  398. position: 'top'
  399. },
  400. data: zyrList
  401. },
  402. {
  403. name: '作业车数',
  404. lineStyle: {
  405. color: '#01c3dd',
  406. },
  407. type: 'line',
  408. areaStyle: {
  409. normal: {
  410. type: 'default',
  411. color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
  412. offset: 0,
  413. color: 'rgba(129,197,255,.6)'
  414. }, {
  415. offset: 1,
  416. color: 'rgba(129,197,255,.0)'
  417. }], false)
  418. }
  419. },
  420. smooth: true,
  421. itemStyle: {
  422. normal: { areaStyle: { type: 'default' } }
  423. },
  424. label: {
  425. show: true,
  426. position: 'top'
  427. },
  428. data: zycList
  429. },
  430. {
  431. name: '运冰车次',
  432. lineStyle: {
  433. color: '#008198',
  434. },
  435. type: 'line',
  436. areaStyle: {
  437. normal: {
  438. type: 'default',
  439. color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
  440. offset: 0,
  441. color: 'rgba(129,197,255,.6)'
  442. }, {
  443. offset: 1,
  444. color: 'rgba(129,197,255,.0)'
  445. }], false)
  446. }
  447. },
  448. smooth: true,
  449. itemStyle: {
  450. normal: { areaStyle: { type: 'default' } }
  451. },
  452. label: {
  453. show: true,
  454. position: 'top'
  455. },
  456. data: ybcList
  457. },
  458. {
  459. name: '吸污车次',
  460. lineStyle: {
  461. color: '#2ef4ab',
  462. },
  463. type: 'line',
  464. areaStyle: {
  465. normal: {
  466. type: 'default',
  467. color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
  468. offset: 0,
  469. color: 'rgba(129,197,255,.6)'
  470. }, {
  471. offset: 1,
  472. color: 'rgba(129,197,255,.0)'
  473. }], false)
  474. }
  475. },
  476. smooth: true,
  477. itemStyle: {
  478. normal: { areaStyle: { type: 'default' } }
  479. },
  480. label: {
  481. show: true,
  482. position: 'top'
  483. },
  484. data: xwcList
  485. },
  486. {
  487. name: '完成量',
  488. lineStyle: {
  489. color: '#ffe074',
  490. },
  491. type: 'line',
  492. areaStyle: {
  493. normal: {
  494. type: 'default',
  495. color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
  496. offset: 0,
  497. color: 'rgba(129,197,255,.6)'
  498. }, {
  499. offset: 1,
  500. color: 'rgba(129,197,255,.0)'
  501. }], false)
  502. }
  503. },
  504. smooth: true,
  505. itemStyle: {
  506. normal: { areaStyle: { type: 'default' } }
  507. },
  508. label: {
  509. show: true,
  510. position: 'top'
  511. },
  512. data: jdList
  513. }
  514. ]
  515. };
  516. myChart.setOption(option);
  517. window.addEventListener("resize", function () {
  518. myChart.resize();
  519. });
  520. }
  521. function echarts_5(dtLisT, fkrList) {
  522. var myChart = echarts.init(document.getElementById('echart5'));
  523. var option = {
  524. color: ['#ffe074'],
  525. tooltip: {
  526. textStyle: {
  527. align: 'left'
  528. },
  529. trigger: 'axis',
  530. formatter: "{b} " + $("#biaoduan").val() + ":</br>{a} : {c} 人"
  531. },
  532. xAxis: {
  533. type: 'category',
  534. data: dtLisT
  535. },
  536. yAxis: {
  537. type: 'value'
  538. },
  539. series: [{
  540. name: "防疫人数",
  541. data: fkrList,
  542. type: 'bar'
  543. }]
  544. };
  545. myChart.setOption(option);
  546. window.addEventListener("resize", function () {
  547. myChart.resize();
  548. });
  549. }
  550. function table1(t1, t2) {
  551. $("#td1").html(t1[0]);
  552. $("#td2").html(t1[1]);
  553. $("#td3").html(t1[2]);
  554. $("#td4").html(t1[3]);
  555. $("#td5").html(t1[4]);
  556. $("#td6").html(t1[5]);
  557. $("#td7").html(t1[6]);
  558. $("#td8").html(t1[7]);
  559. $("#td9").html(t1[8]);
  560. $("#td10").html(t1[9]);
  561. $("#td11").html(t1[10]);
  562. $("#td12").html(t1[11]);
  563. $("#td13").html(t1[12]);
  564. $("#td14").html(t1[13]);
  565. $("#td15").html(t1[14]);
  566. $("#td16").html(t1[15]);
  567. $("#td17").html(t1[16]);
  568. $("#td18").html(t1[17]);
  569. $("#td19").html(t1[18]);
  570. $("#td20").html(t1[19]);
  571. $("#td21").html(t1[20]);
  572. $("#td22").html(t1[21]);
  573. $("#td23").html(t1[22]);
  574. $("#td24").html(t1[23]);
  575. $("#td25").html(t2[0]);
  576. $("#td26").html(t2[1]);
  577. $("#td27").html(t2[2]);
  578. }