visual.js 19 KB

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