water.js 81 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090
  1. /*
  2. 水系统数据对接
  3. */
  4. //动态获取登录用户名
  5. // const aaa = sessionStorage.getItem('V_LOGINNAME');
  6. // const LOGIN_NAME = aaa;
  7. updateUserState({
  8. "queryJson": '{"V_LOGINNAME": "admin","STATE":2}' //用户名需更改为动态获取到的
  9. });
  10. function updateUserState(params = {}) {
  11. $.ajax({
  12. type: "POST",
  13. url: "https://iot.usky.cn/YtIoT/iot/userstate/updateUserState",
  14. data: params,
  15. success: function(data) {},
  16. error: function() {
  17. console.log("发生错误")
  18. },
  19. complete: function() {
  20. // console.log("ajax请求完事,最终操作在这里完成")
  21. }
  22. });
  23. }
  24. //建筑下拉
  25. getNameList();
  26. function getNameList(queryParam = {}) {
  27. ajaxRequest(GET_NAME_LIST_DATA, "POST", queryParam, function(result) {
  28. let data = result.RESULT;
  29. let items = '';
  30. data.forEach(function(item, key) {
  31. items += `<option value="${item.owner_id}">${item.owner_name}</option>`
  32. })
  33. $('#building').html(items);
  34. }, function(errorMsg) {
  35. // alert("请求数据失败!");
  36. }, 2)
  37. };
  38. // 数据请求传参
  39. getListData(getSearchParamObj());
  40. function getListData(queryParam = {}) {
  41. ajaxRequest(WATER_DATA, "POST", queryParam, function(result) {
  42. if (result.totalCount != 0) {
  43. /*
  44. 主页面数据对接 start
  45. */
  46. //数据统计
  47. var data_statistics = result.RESULT[0].data_statistics;
  48. $('.total').html(data_statistics.alarm_number);
  49. $('.solved').html(data_statistics.processing_number);
  50. $('.unsolve').html(data_statistics.unprocessed_number);
  51. // 环状饼图定制 (数据统计计算)
  52. (function() {
  53. // 实例化对象
  54. var myChart = echarts.init(document.querySelector(".bar-3d .chart"));
  55. // 生成扇形的曲面参数方程,用于 series-surface.parametricEquation
  56. function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
  57. // 计算
  58. let midRatio = (startRatio + endRatio) / 2;
  59. let startRadian = startRatio * Math.PI * 2;
  60. let endRadian = endRatio * Math.PI * 2;
  61. let midRadian = midRatio * Math.PI * 2;
  62. // 如果只有一个扇形,则不实现选中效果。
  63. if (startRatio === 0 && endRatio === 1) {
  64. isSelected = false;
  65. }
  66. // 通过扇形内径/外径的值,换算出辅助参数 k(默认值 1/3)
  67. k = typeof k !== 'undefined' ? k : 1 / 3;
  68. // 计算选中效果分别在 x 轴、y 轴方向上的位移(未选中,则位移均为 0)
  69. let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  70. let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  71. // 计算高亮效果的放大比例(未高亮,则比例为 1)
  72. let hoverRate = isHovered ? 1.05 : 1;
  73. // 返回曲面参数方程
  74. return {
  75. u: {
  76. min: -Math.PI,
  77. max: Math.PI * 3,
  78. step: Math.PI / 32
  79. },
  80. v: {
  81. min: 0,
  82. max: Math.PI * 2,
  83. step: Math.PI / 20
  84. },
  85. x: function(u, v) {
  86. if (u < startRadian) {
  87. return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  88. }
  89. if (u > endRadian) {
  90. return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  91. }
  92. return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  93. },
  94. y: function(u, v) {
  95. if (u < startRadian) {
  96. return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  97. }
  98. if (u > endRadian) {
  99. return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  100. }
  101. return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  102. },
  103. z: function(u, v) {
  104. if (u < -Math.PI * 0.5) {
  105. return Math.sin(u);
  106. }
  107. if (u > Math.PI * 2.5) {
  108. return Math.sin(u);
  109. }
  110. return Math.sin(v) > 0 ? 1 : -1;
  111. }
  112. };
  113. }
  114. // 生成模拟 3D 饼图的配置项
  115. function getPie3D(pieData, internalDiameterRatio) {
  116. let series = [];
  117. let sumValue = 0;
  118. let startValue = 0;
  119. let endValue = 0;
  120. let legendData = [];
  121. let k = typeof internalDiameterRatio !== 'undefined' ? 1 : 1 / 3;
  122. // 为每一个饼图数据,生成一个 series-surface 配置
  123. for (let i = 0; i < pieData.length; i++) {
  124. sumValue += pieData[i].value;
  125. let seriesItem = {
  126. name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
  127. type: 'surface',
  128. parametric: true,
  129. wireframe: {
  130. show: false
  131. },
  132. pieData: pieData[i],
  133. pieStatus: {
  134. selected: false,
  135. hovered: false,
  136. k: k
  137. }
  138. };
  139. if (typeof pieData[i].itemStyle != 'undefined') {
  140. let itemStyle = {};
  141. typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
  142. typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
  143. seriesItem.itemStyle = itemStyle;
  144. }
  145. series.push(seriesItem);
  146. }
  147. // 使用上一次遍历时,计算出的数据和 sumValue,调用 getParametricEquation 函数,
  148. // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation,也就是实现每一个扇形。
  149. for (let i = 0; i < series.length; i++) {
  150. endValue = startValue + series[i].pieData.value;
  151. // console.log(series[i]);
  152. series[i].pieData.startRatio = startValue / sumValue;
  153. series[i].pieData.endRatio = endValue / sumValue;
  154. series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
  155. startValue = endValue;
  156. legendData.push(series[i].name);
  157. }
  158. // 准备待返回的配置项,把准备好的 legendData、series 传入。
  159. let option = {
  160. tooltip: {
  161. backgroundColor: '#12DFE0',
  162. formatter: params => {
  163. if (params.seriesName !== 'mouseoutSeries') {
  164. // return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}%`;
  165. return `${params.seriesName}: ${option.series[params.seriesIndex].pieData.value}%`;
  166. }
  167. }
  168. },
  169. xAxis3D: {
  170. min: -1,
  171. max: 1
  172. },
  173. yAxis3D: {
  174. min: -1,
  175. max: 1
  176. },
  177. zAxis3D: {
  178. min: -1,
  179. max: 1
  180. },
  181. grid3D: {
  182. show: false,
  183. boxHeight: 50,
  184. top: '-10%',
  185. // bottom: '80%',
  186. // environment: '../images/3d-bg.png', //aa背景色
  187. viewControl: {
  188. distance: 260, //aa距离
  189. alpha: 21, //aa角度
  190. beta: 60, //aa角度
  191. zoomSensitivity: false //是否开启缩放和平移
  192. },
  193. },
  194. series: series
  195. };
  196. return option;
  197. }
  198. // 传入数据生成 option
  199. var option = getPie3D([{
  200. name: '已处理率',
  201. value: data_statistics.treatment_rate,
  202. itemStyle: {
  203. opacity: 0.5,
  204. color: 'rgba(0,127,244,.8)',
  205. }
  206. }, {
  207. name: '未处理率',
  208. value: data_statistics.untreated_rate,
  209. itemStyle: {
  210. opacity: 0.5,
  211. color: 'rgba(209,126,23,.8)',
  212. }
  213. }], 2);
  214. // 把配置给实例对象
  215. myChart.setOption(option);
  216. window.addEventListener("resize", function() {
  217. myChart.resize();
  218. });
  219. })();
  220. // 折线图定制 (数据离散率挖掘)
  221. (function() {
  222. let dispersion_rate = result.RESULT[0].dispersion_rate;
  223. // 结论数据渲染
  224. var items = '';
  225. var conclusion = dispersion_rate.conclusion
  226. for (x in conclusion) {
  227. xIndex = x.substr(x.length - 1, 1);
  228. items += `<p>${xIndex}、${conclusion[x]}</p>`
  229. }
  230. $('.divergence .summaryDetail').html(items);
  231. let a = [];
  232. let b = [];
  233. let c = [];
  234. let data_time = [];
  235. let hydraulic_pressure = dispersion_rate.hydraulic_pressure;
  236. hydraulic_pressure.forEach(function(item, index) {
  237. a.push(item.variance)
  238. b.push(item.standard_deviation)
  239. c.push(item.average_value)
  240. data_time.push(item.data_time)
  241. });
  242. var sortData = [{
  243. data: [a, b, c]
  244. }];
  245. var xData = function() {
  246. var data = [];
  247. for (var i = 1; i < hydraulic_pressure.length + 1; i++) {
  248. data.push(i);
  249. }
  250. return data;
  251. }();
  252. // 1. 实例化对象
  253. var myChart = echarts.init(document.querySelector(".divergence .chart"));
  254. // 2.指定配置
  255. var option = {
  256. color: [{
  257. colorStops: [{
  258. offset: 0,
  259. color: '#F9860C' // 0% 处的颜色
  260. }, {
  261. offset: 1,
  262. color: '#fff' // 100% 处的颜色
  263. }],
  264. },
  265. {
  266. colorStops: [{
  267. offset: 0,
  268. color: '#07E1F1' // 0% 处的颜色
  269. }, {
  270. offset: 1,
  271. color: '#0456CB' // 100% 处的颜色
  272. }],
  273. },
  274. {
  275. colorStops: [{
  276. offset: 0,
  277. color: '#11F90C' // 0% 处的颜色
  278. }, {
  279. offset: 1,
  280. color: '#3FC713' // 100% 处的颜色
  281. }],
  282. }
  283. ],
  284. tooltip: {
  285. trigger: "axis",
  286. textStyle: {
  287. align: 'left' //图例左对齐
  288. },
  289. backgroundColor: '#12DFE0',
  290. formatter: function(params) {
  291. var res = params[0].seriesName + ':' + params[0].value + '<br />' + params[1].seriesName + ':' + params[1].value + '<br />' + params[2].seriesName + ':' + params[2].value + '<br />时间:' + data_time[params[2].dataIndex];
  292. return res;
  293. },
  294. // formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间:' + chooseTime + ''
  295. },
  296. legend: {
  297. // 如果series 对象有name 值,则 legend可以不用写data
  298. itemGap: 20,
  299. itemHeight: 2,
  300. itemWidth: 15,
  301. icon: 'rect',
  302. textStyle: {
  303. color: "#fff"
  304. },
  305. top: "bottom",
  306. },
  307. grid: {
  308. top: "0%",
  309. left: "1%",
  310. right: "1%",
  311. bottom: "15%",
  312. show: true, // 显示边框
  313. borderWidth: '0', //去除边框
  314. containLabel: true // 包含刻度文字在内
  315. },
  316. xAxis: {
  317. type: "category",
  318. boundaryGap: false,
  319. data: xData,
  320. axisTick: {
  321. show: false // 去除刻度线
  322. },
  323. axisLabel: {
  324. color: "#AADDFF" // 文本颜色
  325. },
  326. axisLine: {
  327. lineStyle: {
  328. color: 'rgba(255,255,255,.3)'
  329. }
  330. },
  331. splitNumber: 8,
  332. splitLine: {
  333. show: false
  334. },
  335. splitArea: {
  336. show: true,
  337. areaStyle: {
  338. color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
  339. }
  340. }
  341. },
  342. yAxis: {
  343. // scale: true,
  344. // min: 'dataMin',
  345. type: "value",
  346. axisTick: {
  347. show: false // 去除刻度线
  348. },
  349. axisLabel: {
  350. show: false // 去除文本
  351. },
  352. axisLine: {
  353. show: false // 去除轴线
  354. },
  355. splitLine: {
  356. lineStyle: {
  357. color: "#012f4a" // 分割线颜色
  358. }
  359. }
  360. },
  361. series: [{
  362. symbol: "none",
  363. name: "方差",
  364. type: "line",
  365. data: a
  366. },
  367. {
  368. symbol: "none",
  369. name: "标准差",
  370. type: "line",
  371. data: b
  372. }, {
  373. symbol: "none",
  374. name: "平均值",
  375. type: "line",
  376. data: c
  377. }
  378. ]
  379. };
  380. myChart.setOption(option);
  381. window.addEventListener("resize", function() {
  382. myChart.resize();
  383. });
  384. })();
  385. // 渗漏隐患排查
  386. (function() {
  387. let leakage_investigation = result.RESULT[0].leakage_investigation;
  388. // 结论数据渲染
  389. var items = '';
  390. var conclusion = leakage_investigation.conclusion
  391. for (x in conclusion) {
  392. xIndex = x.substr(x.length - 1, 1);
  393. items += `<p>${xIndex}、${conclusion[x]}</p>`
  394. }
  395. $('.hiddenCheck .summaryDetail').html(items);
  396. let abnormal_pressure = [];
  397. let location_description = [];
  398. let start_pressure = [];
  399. let end_pressure = [];
  400. let data_time = [];
  401. let leakage_data = leakage_investigation.leakage_data;
  402. console.log('leakage_data')
  403. console.log(leakage_data)
  404. leakage_data.forEach(function(item, index) {
  405. //异常值
  406. abnormal_pressure.push(item.abnormal_pressure)
  407. //楼层
  408. location_description.push(item.location_description)
  409. //开始值
  410. start_pressure.push(item.start_pressure)
  411. //结束值
  412. end_pressure.push(item.end_pressure)
  413. //时间
  414. data_time.push(item.data_time)
  415. });
  416. console.log('abnormal_pressure')
  417. console.log(abnormal_pressure)
  418. var xData = location_description;
  419. // 基于准备好的dom,初始化echarts实例
  420. var myChart = echarts.init(document.querySelector(".bar.hiddenCheck .chart"));
  421. var option = {
  422. backgroundColor: 'transparent',
  423. color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
  424. tooltip: {
  425. backgroundColor: '#12DFE0',
  426. //提示框组件
  427. trigger: 'axis',
  428. formatter: function(params) {
  429. var res = '位置:' + params[0].axisValue + '<br />异常水压值 :' + abnormal_pressure[params[0].dataIndex] + 'Mpa<br />时间:' + data_time[params[0].dataIndex];
  430. return res;
  431. },
  432. axisPointer: {
  433. type: 'shadow',
  434. },
  435. textStyle: {
  436. fontStyle: 'normal',
  437. fontFamily: '微软雅黑',
  438. },
  439. },
  440. grid: {
  441. left: '0',
  442. right: '0',
  443. bottom: '40',
  444. top: '0',
  445. containLabel: true,
  446. },
  447. //添加横线滚动条
  448. dataZoom: {
  449. start: 0, //默认为0
  450. end: 100 - 1500 / 12, //默认为100
  451. type: 'slider',
  452. show: xData.length > 4 ? true : false,
  453. xAxisIndex: [0],
  454. handleSize: 0, //滑动条的 左右2个滑动条的大小
  455. height: 4, //组件高度
  456. left: 20, //左边的距离
  457. right: 20, //右边的距离
  458. bottom: 20, //右边的距离
  459. handleColor: '#CBBCDB', //h滑动图标的颜色
  460. handleStyle: {
  461. borderColor: "#CBBCDB",
  462. borderWidth: "1",
  463. shadowBlur: 2,
  464. background: "#CBBCDB",
  465. shadowColor: "#CBBCDB",
  466. },
  467. textStyle: {
  468. color: "#fff"
  469. },
  470. backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
  471. showDataShadow: false, //是否显示数据阴影 默认auto
  472. // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
  473. filterMode: 'filter',
  474. },
  475. xAxis: [{
  476. type: 'category',
  477. // boundaryGap: true,//坐标轴两边留白
  478. data: xData,
  479. axisLabel: {
  480. interval: 0,
  481. // rotate: 340,
  482. // formatter: function(val) {
  483. // return val.split("").join("\n");
  484. // }, //横轴信息文字竖直显示
  485. textStyle: {
  486. color: '#AADDFF',
  487. fontStyle: 'normal',
  488. fontFamily: '微软雅黑',
  489. fontSize: 12,
  490. },
  491. },
  492. axisTick: {
  493. //坐标轴刻度相关设置。
  494. show: false,
  495. },
  496. axisLine: {
  497. //坐标轴轴线相关设置
  498. },
  499. splitLine: {
  500. //坐标轴在 grid 区域中的分隔线。
  501. show: false,
  502. },
  503. }, ],
  504. yAxis: [{
  505. type: 'value',
  506. axisLabel: false,
  507. axisLine: {
  508. show: false,
  509. },
  510. axisTick: {
  511. show: false,
  512. },
  513. splitLine: {
  514. show: true,
  515. lineStyle: {
  516. color: ['#204C6F'],
  517. opacity: 0.3,
  518. },
  519. },
  520. boundaryGap: ['0', '10%'],
  521. }],
  522. series: [{
  523. name: '起层',
  524. type: 'bar',
  525. data: start_pressure,
  526. barMaxWidth: '11',
  527. itemStyle: {
  528. borderColor: "#0096FF",
  529. },
  530. barGap: '50%',
  531. },
  532. {
  533. name: '始层',
  534. type: 'bar',
  535. data: end_pressure,
  536. barMaxWidth: '11',
  537. itemStyle: {
  538. borderColor: "#FF9C00",
  539. },
  540. },
  541. ],
  542. };
  543. // 使用刚指定的配置项和数据显示图表。
  544. myChart.setOption(option);
  545. window.addEventListener("resize", function() {
  546. myChart.resize();
  547. });
  548. })();
  549. // 折线图定制 (跨设备数据关联)
  550. (function() {
  551. let device_association = result.RESULT[0].device_association;
  552. // 结论数据渲染
  553. var items = '';
  554. var conclusion = device_association.conclusion
  555. for (x in conclusion) {
  556. xIndex = x.substr(x.length - 1, 1);
  557. items += `<p>${xIndex}、${conclusion[x]}</p>`
  558. }
  559. $('.device_association .summaryDetail').html(items);
  560. // 喷淋末端、消火栓与水泵启停关联
  561. let spray_end = [];
  562. let fire_hydrant = [];
  563. let pump_status = [];
  564. let data_time = [];
  565. let pump_associated_data = device_association.pump_associated_data;
  566. pump_associated_data.forEach(function(item, index) {
  567. spray_end.push(item.spray_end)
  568. fire_hydrant.push(item.fire_hydrant)
  569. pump_status.push(item.pump_status)
  570. data_time.push(item.data_time)
  571. });
  572. // 喷淋末端、消火栓屋顶水箱液位关联
  573. let spray_end2 = [];
  574. let fire_hydrant2 = [];
  575. let water_tank_level = [];
  576. let data_time2 = [];
  577. let water_associated_data = device_association.water_associated_data;
  578. water_associated_data.forEach(function(item, index) {
  579. spray_end2.push(item.spray_end)
  580. fire_hydrant2.push(item.fire_hydrant)
  581. water_tank_level.push(item.water_tank_level)
  582. data_time2.push(item.data_time)
  583. });
  584. var sortData = [{
  585. sortName: "喷淋末端、消火栓与水泵启停关联",
  586. data: [
  587. spray_end, fire_hydrant
  588. ]
  589. },
  590. {
  591. sortName: "喷淋末端、消火栓屋顶水箱液位关联",
  592. data: [
  593. spray_end2, fire_hydrant2
  594. ]
  595. }
  596. ];
  597. var xData = function() {
  598. var data = [];
  599. for (var i = 1; i < water_associated_data.length + 1; i++) {
  600. data.push(i);
  601. }
  602. return data;
  603. }();
  604. // 1. 实例化对象
  605. var myChart = echarts.init(document.querySelector(".device_association .chart"));
  606. // 2.指定配置
  607. var option = {
  608. color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
  609. tooltip: {
  610. trigger: "axis",
  611. textStyle: {
  612. align: 'left' //图例左对齐
  613. },
  614. backgroundColor: '#12DFE0',
  615. formatter: function(params) {
  616. if ($('#active').hasClass('active')) {
  617. var res = params[0].seriesName + ':' + params[0].value + 'Mpa<br />' + params[1].seriesName + ':' + params[1].value + 'Mpa<br />水泵启动状态 :' + pump_status[params[0].dataIndex] + '<br />时间:' + data_time[params[0].dataIndex] + '';
  618. } else {
  619. var res = params[0].seriesName + ':' + params[0].value + 'Mpa<br />' + params[1].seriesName + ':' + params[1].value + 'Mpa<br /> 水箱液位 :' + water_tank_level[params[0].dataIndex] + 'm<br />时间:' + data_time2[params[0].dataIndex] + '';
  620. }
  621. return res;
  622. },
  623. },
  624. legend: {
  625. // 如果series 对象有name 值,则 legend可以不用写data
  626. itemGap: 20,
  627. itemHeight: 2,
  628. itemWidth: 15,
  629. icon: 'rect',
  630. textStyle: {
  631. color: "#fff"
  632. },
  633. top: "bottom",
  634. },
  635. grid: {
  636. top: "0%",
  637. left: "1%",
  638. right: "1%",
  639. bottom: "15%",
  640. show: true, // 显示边框
  641. borderWidth: '0', //去除边框
  642. containLabel: true // 包含刻度文字在内
  643. },
  644. xAxis: {
  645. type: "category",
  646. boundaryGap: false,
  647. data: xData,
  648. axisTick: {
  649. show: false // 去除刻度线
  650. },
  651. axisLabel: {
  652. color: "#AADDFF" // 文本颜色
  653. },
  654. axisLine: {
  655. show: false // 去除轴线
  656. }
  657. },
  658. yAxis: {
  659. type: "value",
  660. axisTick: {
  661. show: false // 去除刻度线
  662. },
  663. axisLabel: {
  664. show: false // 去除文本
  665. },
  666. axisLine: {
  667. show: false // 去除轴线
  668. },
  669. splitLine: {
  670. lineStyle: {
  671. color: "#012f4a" // 分割线颜色
  672. }
  673. }
  674. },
  675. series: [{
  676. symbol: "none",
  677. name: "喷淋末端",
  678. type: "line",
  679. smooth: true, // true 可以让我们的折线显示带有弧度
  680. areaStyle: {
  681. normal: {
  682. color: new echarts.graphic.LinearGradient(
  683. 0,
  684. 0,
  685. 0,
  686. 1, [{
  687. offset: 0,
  688. color: "rgba(255,156,0, 0.4)"
  689. },
  690. {
  691. offset: 0.8,
  692. color: "rgba(255,156,0, 0.3)"
  693. }
  694. ],
  695. false
  696. ),
  697. shadowColor: "rgba(0, 0, 0, 0.1)"
  698. }
  699. },
  700. data: sortData[0].data[0]
  701. },
  702. {
  703. symbol: "none",
  704. name: "消防栓",
  705. type: "line",
  706. smooth: true,
  707. areaStyle: {
  708. normal: {
  709. color: new echarts.graphic.LinearGradient(
  710. 0,
  711. 0,
  712. 0,
  713. 1, [{
  714. offset: 0,
  715. color: "rgba(0,150,255,0.5)"
  716. },
  717. {
  718. offset: 0.8,
  719. color: "rgba(0,150,255, 0.1)"
  720. }
  721. ],
  722. false
  723. ),
  724. shadowColor: "rgba(0, 0, 0, 0.1)"
  725. }
  726. },
  727. data: sortData[0].data[1]
  728. }
  729. ]
  730. };
  731. myChart.setOption(option);
  732. window.addEventListener("resize", function() {
  733. myChart.resize();
  734. });
  735. // 点击切换效果
  736. $(".device_association .tab-line").on("click", "a", function() {
  737. $(this).addClass('active').siblings().removeClass('active')
  738. var obj = sortData[$(this).index()];
  739. option.series[0].data = obj.data[0];
  740. option.series[1].data = obj.data[1];
  741. // 重新渲染
  742. myChart.setOption(option);
  743. });
  744. })();
  745. // 折线图定制 (数据波动关联)
  746. (function() {
  747. let data_fluctuation = result.RESULT[0].data_fluctuation;
  748. // console.log('data_fluctuation')
  749. // console.log(data_fluctuation)
  750. // 结论数据渲染
  751. var items = '';
  752. var conclusion = data_fluctuation.conclusion
  753. for (x in conclusion) {
  754. xIndex = x.substr(x.length - 1, 1);
  755. items += `<p>${xIndex}、${conclusion[x]}</p>`
  756. }
  757. $('.data_fluctuation .summaryDetail').html(items);
  758. let position = [];
  759. let before_fluctuation = [];
  760. let after_fluctuation = [];
  761. let data_time = [];
  762. let volatility_data = data_fluctuation.volatility_data;
  763. volatility_data.forEach(function(item, index) {
  764. //楼层
  765. position.push(item.position)
  766. //开始值
  767. before_fluctuation.push(item.before_fluctuation)
  768. //结束值
  769. after_fluctuation.push(item.after_fluctuation)
  770. //时间
  771. data_time.push(item.data_time)
  772. });
  773. // 1. 实例化对象
  774. var myChart = echarts.init(document.querySelector(".data_fluctuation .chart"));
  775. var xData = position;
  776. // 2.指定配置
  777. var option = {
  778. backgroundColor: 'transparent',
  779. color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
  780. tooltip: {
  781. backgroundColor: '#12DFE0',
  782. //提示框组件
  783. trigger: 'axis',
  784. formatter: function(params) {
  785. var res = params[0].seriesName + ':' + params[0].value + 'Mpa<br />' + params[1].seriesName + ':' + params[1].value + 'Mpa<br />' + data_time[params[1].dataIndex];
  786. return res;
  787. },
  788. // formatter: '{a0}: {c0}<span>Mpa</span><br />{a1}: {c1}<span>Mpa</span><br />时间:' + chooseTime + '',
  789. axisPointer: {
  790. type: 'shadow',
  791. },
  792. textStyle: {
  793. fontStyle: 'normal',
  794. fontFamily: '微软雅黑',
  795. align: 'left' //图例左对齐
  796. },
  797. },
  798. grid: {
  799. left: '0',
  800. right: '0',
  801. bottom: '40',
  802. top: '0',
  803. containLabel: true,
  804. },
  805. //添加横线滚动条
  806. dataZoom: {
  807. start: 0, //默认为0
  808. end: 100 - 1500 / 8, //默认为100
  809. type: 'slider',
  810. show: xData.length > 5 ? true : false,
  811. xAxisIndex: [0],
  812. handleSize: 0, //滑动条的 左右2个滑动条的大小
  813. height: 4, //组件高度
  814. left: 20, //左边的距离
  815. right: 20, //右边的距离
  816. bottom: 20, //右边的距离
  817. handleColor: '#CBBCDB', //h滑动图标的颜色
  818. handleStyle: {
  819. borderColor: "#CBBCDB",
  820. borderWidth: "1",
  821. shadowBlur: 2,
  822. background: "#CBBCDB",
  823. shadowColor: "#CBBCDB",
  824. },
  825. textStyle: {
  826. color: "#fff"
  827. },
  828. backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
  829. showDataShadow: false, //是否显示数据阴影 默认auto
  830. // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
  831. filterMode: 'filter',
  832. },
  833. xAxis: [{
  834. type: 'category',
  835. // boundaryGap: true,//坐标轴两边留白
  836. data: xData,
  837. axisLabel: {
  838. interval: 0,
  839. // rotate: 340,
  840. // formatter: function(val) {
  841. // return val.split("").join("\n");
  842. // }, //横轴信息文字竖直显示
  843. textStyle: {
  844. color: '#AADDFF',
  845. fontStyle: 'normal',
  846. fontFamily: '微软雅黑',
  847. fontSize: 12,
  848. },
  849. },
  850. axisTick: {
  851. //坐标轴刻度相关设置。
  852. show: false,
  853. },
  854. axisLine: {
  855. //坐标轴轴线相关设置
  856. },
  857. splitLine: {
  858. //坐标轴在 grid 区域中的分隔线。
  859. show: false,
  860. },
  861. }, ],
  862. yAxis: [{
  863. type: 'value',
  864. axisLabel: false,
  865. axisLine: {
  866. show: false,
  867. },
  868. axisTick: {
  869. show: false,
  870. },
  871. splitLine: {
  872. show: true,
  873. lineStyle: {
  874. color: ['#204C6F'],
  875. opacity: 0.3,
  876. },
  877. },
  878. boundaryGap: ['0', '10%'],
  879. }],
  880. series: [{
  881. name: '波动前水压值',
  882. type: 'bar',
  883. data: before_fluctuation,
  884. barMaxWidth: '11',
  885. itemStyle: {
  886. borderColor: "#0096FF",
  887. },
  888. barGap: '50%',
  889. },
  890. {
  891. name: '波动后水压值',
  892. type: 'bar',
  893. data: after_fluctuation,
  894. barMaxWidth: '11',
  895. itemStyle: {
  896. borderColor: "#FF9C00",
  897. },
  898. },
  899. ],
  900. };
  901. myChart.setOption(option);
  902. window.addEventListener("resize", function() {
  903. myChart.resize();
  904. });
  905. })();
  906. /*
  907. 主页面数据对接 end
  908. */
  909. /*
  910. 导出数据对接 start
  911. */
  912. //项目情况
  913. var project_situation = result.RESULT[0].project_situation;
  914. var items = '';
  915. items = `<tr>
  916. <td>单位名称</td>
  917. <td colspan="5">${project_situation.company_name}</td>
  918. </tr>
  919. <tr>
  920. <td>进场日期</td>
  921. <td>${project_situation.entry_date} </td>
  922. <td>完工日期</td>
  923. <td>${project_situation.completion_date}</td>
  924. <td>验收日期</td>
  925. <td>${project_situation.acceptance_date}</td>
  926. </tr>`
  927. $('#project_situation').html(items);
  928. //设备清单
  929. var equipment_list = result.RESULT[0].equipment_list;
  930. var items2 = '';
  931. if (equipment_list) {
  932. equipment_list.forEach(function(item, key) {
  933. items2 += `<tr>
  934. <td>${item.device_name}</td>
  935. <td>${item.device_info}</td>
  936. <td>${item.device_code}</td>
  937. <td>${item.remarks}</td>
  938. </tr>`;
  939. })
  940. $('#equipment_list').html(items2)
  941. }
  942. //统计时段
  943. var statistical_period = result.RESULT[0].statistical_period;
  944. var items3 = '';
  945. items3 = `<div>统计起始日期:${statistical_period.start_date}</div>
  946. <div>统计截止日期:${statistical_period.closing_date}</div>
  947. <div>统计时段时长:${statistical_period.duration}</div>`;
  948. $('#statistical_period').html(items3)
  949. //数据统计计算
  950. var data_statistics = result.RESULT[0].data_statistics;
  951. var items4 = '';
  952. items4 = `<tr>
  953. <td>${data_statistics.alarm_number}</td>
  954. <td>${data_statistics.processing_number}</td>
  955. <td>${data_statistics.unprocessed_number}</td>
  956. <td>${data_statistics.treatment_rate}</td>
  957. <td>${data_statistics.untreated_rate}</td>
  958. </tr>`;
  959. $('#data_statistics').html(items4);
  960. // 数据离散率挖掘
  961. let dispersion_rate = result.RESULT[0].dispersion_rate;
  962. // console.log(result.RESULT[0].dispersion_rate)
  963. // 结论数据渲染
  964. var items = '';
  965. var conclusion = dispersion_rate.conclusion
  966. for (x in conclusion) {
  967. xIndex = x.substr(x.length - 1, 1);
  968. items += `<div>${xIndex}、${conclusion[x]}</div>`
  969. }
  970. $('.exportBox .divergence .summaryDetail').html(items);
  971. // 数据离散率挖掘1
  972. (function() {
  973. let a = [];
  974. let b = [];
  975. let c = [];
  976. let data_time = [];
  977. let hydraulic_pressure = dispersion_rate.hydraulic_pressure;
  978. hydraulic_pressure.forEach(function(item, index) {
  979. a.push(item.variance)
  980. b.push(item.standard_deviation)
  981. c.push(item.average_value)
  982. data_time.push(item.data_time)
  983. });
  984. var sortData = [{
  985. data: [a, b, c]
  986. }];
  987. var xData = function() {
  988. var data = [];
  989. for (var i = 1; i < hydraulic_pressure.length + 1; i++) {
  990. data.push(i);
  991. }
  992. return data;
  993. }();
  994. // 1. 实例化对象
  995. var myChart = echarts.init(document.querySelector("#divergenceChart1"));
  996. // 2.指定配置
  997. var option = {
  998. color: [{
  999. colorStops: [{
  1000. offset: 0,
  1001. color: '#F9860C' // 0% 处的颜色
  1002. }, {
  1003. offset: 1,
  1004. color: '#fff' // 100% 处的颜色
  1005. }],
  1006. },
  1007. {
  1008. colorStops: [{
  1009. offset: 0,
  1010. color: '#07E1F1' // 0% 处的颜色
  1011. }, {
  1012. offset: 1,
  1013. color: '#0456CB' // 100% 处的颜色
  1014. }],
  1015. },
  1016. {
  1017. colorStops: [{
  1018. offset: 0,
  1019. color: '#11F90C' // 0% 处的颜色
  1020. }, {
  1021. offset: 1,
  1022. color: '#3FC713' // 100% 处的颜色
  1023. }],
  1024. }
  1025. ],
  1026. tooltip: {
  1027. trigger: "axis",
  1028. textStyle: {
  1029. align: 'left' //图例左对齐
  1030. },
  1031. backgroundColor: '#12DFE0',
  1032. formatter: function(params) {
  1033. var res = params[0].seriesName + ':' + params[0].value + '<br />' + params[1].seriesName + ':' + params[1].value + '<br />' + params[2].seriesName + ':' + params[2].value + '<br />时间:' + data_time[params[2].dataIndex];
  1034. return res;
  1035. },
  1036. // formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间:2021年3月{b}日'
  1037. },
  1038. legend: {
  1039. // 如果series 对象有name 值,则 legend可以不用写data
  1040. itemGap: 20,
  1041. itemHeight: 2,
  1042. itemWidth: 15,
  1043. icon: 'rect',
  1044. textStyle: {
  1045. color: "#aaa"
  1046. },
  1047. top: "bottom",
  1048. },
  1049. grid: {
  1050. top: "0%",
  1051. left: "1%",
  1052. right: "1%",
  1053. bottom: "15%",
  1054. show: true, // 显示边框
  1055. borderWidth: '0', //去除边框
  1056. containLabel: true // 包含刻度文字在内
  1057. },
  1058. xAxis: {
  1059. type: "category",
  1060. boundaryGap: false,
  1061. data: xData,
  1062. axisTick: {
  1063. show: false // 去除刻度线
  1064. },
  1065. axisLabel: {
  1066. color: "#AADDFF" // 文本颜色
  1067. },
  1068. axisLine: {
  1069. lineStyle: {
  1070. color: 'rgba(255,255,255,.3)'
  1071. }
  1072. },
  1073. splitNumber: 8,
  1074. splitLine: {
  1075. show: false
  1076. },
  1077. splitArea: {
  1078. show: true,
  1079. areaStyle: {
  1080. color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
  1081. }
  1082. }
  1083. },
  1084. yAxis: {
  1085. splitNumber: 8,
  1086. type: "value",
  1087. axisTick: {
  1088. show: false // 去除刻度线
  1089. },
  1090. axisLabel: {
  1091. show: false // 去除文本
  1092. },
  1093. axisLine: {
  1094. show: false // 去除轴线
  1095. },
  1096. splitLine: {
  1097. lineStyle: {
  1098. color: "#aaa", // 分割线颜色
  1099. opacity: '0.1'
  1100. }
  1101. }
  1102. },
  1103. series: [{
  1104. symbol: "none",
  1105. name: "方差",
  1106. type: "line",
  1107. data: sortData[0].data[0]
  1108. },
  1109. {
  1110. symbol: "none",
  1111. name: "标准差",
  1112. type: "line",
  1113. data: sortData[0].data[1]
  1114. }, {
  1115. symbol: "none",
  1116. name: "平均值",
  1117. type: "line",
  1118. data: sortData[0].data[2]
  1119. }
  1120. ]
  1121. };
  1122. myChart.setOption(option);
  1123. //echarts赋值到src
  1124. var img1 = document.getElementById('divergenceChart1_img');
  1125. setTimeout(function() {
  1126. img1.src = myChart.getDataURL();
  1127. }, 1000)
  1128. })();
  1129. // 渗漏隐患排查
  1130. let leakage_investigation = result.RESULT[0].leakage_investigation;
  1131. // 结论数据渲染
  1132. var items = '';
  1133. var conclusion = leakage_investigation.conclusion
  1134. for (x in conclusion) {
  1135. xIndex = x.substr(x.length - 1, 1);
  1136. items += `<div>${xIndex}、${conclusion[x]}</div>`
  1137. }
  1138. $('.exportBox .hiddenCheck .summaryDetail').html(items);
  1139. // 渗漏隐患排查
  1140. (function() {
  1141. let abnormal_pressure = [];
  1142. let location_description = [];
  1143. let start_pressure = [];
  1144. let end_pressure = [];
  1145. let data_time = [];
  1146. let leakage_data = leakage_investigation.leakage_data;
  1147. leakage_data.forEach(function(item, index) {
  1148. //异常值
  1149. abnormal_pressure.push(item.abnormal_pressure)
  1150. //楼层
  1151. location_description.push(item.location_description)
  1152. //开始值
  1153. start_pressure.push(item.start_pressure)
  1154. //结束值
  1155. end_pressure.push(item.end_pressure)
  1156. //时间
  1157. data_time.push(item.data_time)
  1158. });
  1159. var xData = location_description;
  1160. // 基于准备好的dom,初始化echarts实例
  1161. var myChart = echarts.init(document.querySelector("#hiddenCheckChart1"));
  1162. var option = {
  1163. backgroundColor: 'transparent',
  1164. color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
  1165. tooltip: {
  1166. backgroundColor: '#12DFE0',
  1167. //提示框组件
  1168. trigger: 'axis',
  1169. formatter: function(params) {
  1170. var res = '位置:' + params[0].axisValue + '<br />异常水压值 :' + abnormal_pressure[params[0].dataIndex] + 'Mpa<br />时间:' + data_time[params[0].dataIndex];
  1171. return res;
  1172. },
  1173. axisPointer: {
  1174. type: 'shadow',
  1175. },
  1176. textStyle: {
  1177. fontStyle: 'normal',
  1178. fontFamily: '微软雅黑',
  1179. },
  1180. },
  1181. grid: {
  1182. left: '0',
  1183. right: '0',
  1184. bottom: '40',
  1185. top: '0',
  1186. containLabel: true,
  1187. },
  1188. legend: {
  1189. // 如果series 对象有name 值,则 legend可以不用写data
  1190. itemGap: 20,
  1191. itemHeight: 2,
  1192. itemWidth: 15,
  1193. icon: 'rect',
  1194. textStyle: {
  1195. color: "#AAA"
  1196. },
  1197. top: "bottom",
  1198. },
  1199. xAxis: [{
  1200. type: 'category',
  1201. // boundaryGap: true,//坐标轴两边留白
  1202. data: xData,
  1203. axisLabel: {
  1204. interval: 0,
  1205. // rotate: 340,
  1206. // formatter: function(val) {
  1207. // return val.split("").join("\n");
  1208. // }, //横轴信息文字竖直显示
  1209. textStyle: {
  1210. color: '#AAA',
  1211. fontStyle: 'normal',
  1212. fontFamily: '微软雅黑',
  1213. fontSize: 12,
  1214. },
  1215. },
  1216. axisTick: {
  1217. //坐标轴刻度相关设置。
  1218. show: false,
  1219. },
  1220. axisLine: {
  1221. //坐标轴轴线相关设置
  1222. },
  1223. splitLine: {
  1224. //坐标轴在 grid 区域中的分隔线。
  1225. show: false,
  1226. },
  1227. }, ],
  1228. yAxis: [{
  1229. type: 'value',
  1230. axisLabel: false,
  1231. axisLine: {
  1232. show: false,
  1233. },
  1234. axisTick: {
  1235. show: false,
  1236. },
  1237. splitLine: {
  1238. show: true,
  1239. lineStyle: {
  1240. color: "#aaa", // 分割线颜色
  1241. opacity: '0.2'
  1242. }
  1243. },
  1244. boundaryGap: ['0', '10%'],
  1245. }],
  1246. series: [{
  1247. name: '起层',
  1248. type: 'bar',
  1249. data: start_pressure,
  1250. barMaxWidth: '11',
  1251. itemStyle: {
  1252. borderColor: "#0096FF",
  1253. },
  1254. barGap: '50%',
  1255. },
  1256. {
  1257. name: '始层',
  1258. type: 'bar',
  1259. data: end_pressure,
  1260. barMaxWidth: '11',
  1261. itemStyle: {
  1262. borderColor: "#FF9C00",
  1263. },
  1264. },
  1265. ],
  1266. };
  1267. myChart.setOption(option);
  1268. //echarts赋值到src
  1269. var img1 = document.getElementById('hiddenCheckChart1_img');
  1270. setTimeout(function() {
  1271. img1.src = myChart.getDataURL();
  1272. }, 1000)
  1273. })();
  1274. // 跨设备数据关联
  1275. let device_association = result.RESULT[0].device_association;
  1276. // 结论数据渲染
  1277. var items = '';
  1278. var conclusion = device_association.conclusion
  1279. for (x in conclusion) {
  1280. xIndex = x.substr(x.length - 1, 1);
  1281. items += `<div>${xIndex}、${conclusion[x]}</div>`
  1282. }
  1283. $('.exportBox .device_association .summaryDetail').html(items);
  1284. // 跨设备数据关联1
  1285. // 喷淋末端、消火栓与水泵启停关联
  1286. let spray_end = [];
  1287. let fire_hydrant = [];
  1288. let pump_status = [];
  1289. let data_time = [];
  1290. let pump_associated_data = device_association.pump_associated_data;
  1291. pump_associated_data.forEach(function(item, index) {
  1292. spray_end.push(item.spray_end)
  1293. fire_hydrant.push(item.fire_hydrant)
  1294. pump_status.push(item.pump_status)
  1295. data_time.push(item.data_time)
  1296. });
  1297. (function() {
  1298. var sortData = [{
  1299. sortName: "喷淋末端、消火栓与水泵启停关联",
  1300. data: [
  1301. spray_end, fire_hydrant
  1302. ]
  1303. }, ];
  1304. var xData = function() {
  1305. var data = [];
  1306. for (var i = 1; i < spray_end.length + 1; i++) {
  1307. data.push(i);
  1308. }
  1309. return data;
  1310. }();
  1311. // 1. 实例化对象
  1312. var myChart = echarts.init(document.querySelector("#deviceLinkChart1"));
  1313. // 2.指定配置
  1314. var option = {
  1315. color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
  1316. tooltip: {
  1317. trigger: "axis",
  1318. textStyle: {
  1319. align: 'left' //图例左对齐
  1320. },
  1321. backgroundColor: '#12DFE0',
  1322. formatter: function(params) {
  1323. var res = params[0].seriesName + ':' + params[0].value + 'Mpa<br />' + params[1].seriesName + ':' + params[1].value + '<br />水泵启动状态 :' + pump_status[params[0].dataIndex] + 'Mpa<br />时间:' + data_time[params[0].dataIndex] + '';
  1324. return res;
  1325. },
  1326. },
  1327. legend: {
  1328. // 如果series 对象有name 值,则 legend可以不用写data
  1329. itemGap: 20,
  1330. itemHeight: 2,
  1331. itemWidth: 15,
  1332. icon: 'rect',
  1333. textStyle: {
  1334. color: "#aaa"
  1335. },
  1336. top: "bottom",
  1337. },
  1338. grid: {
  1339. top: "0%",
  1340. left: "1%",
  1341. right: "1%",
  1342. bottom: "15%",
  1343. show: true, // 显示边框
  1344. borderWidth: '0', //去除边框
  1345. containLabel: true // 包含刻度文字在内
  1346. },
  1347. xAxis: {
  1348. type: "category",
  1349. boundaryGap: false,
  1350. data: xData,
  1351. axisTick: {
  1352. show: false // 去除刻度线
  1353. },
  1354. axisLabel: {
  1355. color: "#AADDFF" // 文本颜色
  1356. },
  1357. axisLine: {
  1358. show: false // 去除轴线
  1359. }
  1360. },
  1361. yAxis: {
  1362. type: "value",
  1363. axisTick: {
  1364. show: false // 去除刻度线
  1365. },
  1366. axisLabel: {
  1367. show: false // 去除文本
  1368. },
  1369. axisLine: {
  1370. show: false // 去除轴线
  1371. },
  1372. splitLine: {
  1373. lineStyle: {
  1374. color: "#aaa", // 分割线颜色
  1375. opacity: '0.2'
  1376. }
  1377. }
  1378. },
  1379. series: [{
  1380. symbol: "none",
  1381. name: "喷淋末端",
  1382. type: "line",
  1383. smooth: true, // true 可以让我们的折线显示带有弧度
  1384. areaStyle: {
  1385. normal: {
  1386. color: new echarts.graphic.LinearGradient(
  1387. 0,
  1388. 0,
  1389. 0,
  1390. 1, [{
  1391. offset: 0,
  1392. color: "rgba(255,156,0, 0.4)"
  1393. },
  1394. {
  1395. offset: 0.8,
  1396. color: "rgba(255,156,0, 0.3)"
  1397. }
  1398. ],
  1399. false
  1400. ),
  1401. shadowColor: "rgba(0, 0, 0, 0.1)"
  1402. }
  1403. },
  1404. data: sortData[0].data[0]
  1405. },
  1406. {
  1407. symbol: "none",
  1408. name: "消防栓",
  1409. type: "line",
  1410. smooth: true,
  1411. areaStyle: {
  1412. normal: {
  1413. color: new echarts.graphic.LinearGradient(
  1414. 0,
  1415. 0,
  1416. 0,
  1417. 1, [{
  1418. offset: 0,
  1419. color: "rgba(0,150,255,0.5)"
  1420. },
  1421. {
  1422. offset: 0.8,
  1423. color: "rgba(0,150,255, 0.1)"
  1424. }
  1425. ],
  1426. false
  1427. ),
  1428. shadowColor: "rgba(0, 0, 0, 0.1)"
  1429. }
  1430. },
  1431. data: sortData[0].data[1]
  1432. }
  1433. ]
  1434. };
  1435. myChart.setOption(option);
  1436. var img1 = document.getElementById('deviceLinkChart1_img');
  1437. setTimeout(function() {
  1438. img1.src = myChart.getDataURL();
  1439. }, 1000)
  1440. })();
  1441. // 跨设备数据关联2
  1442. // 喷淋末端、消火栓屋顶水箱液位关联
  1443. let spray_end2 = [];
  1444. let fire_hydrant2 = [];
  1445. let data_time2 = [];
  1446. let water_tank_level = []
  1447. let water_associated_data = device_association.water_associated_data;
  1448. water_associated_data.forEach(function(item, index) {
  1449. spray_end2.push(item.spray_end)
  1450. fire_hydrant2.push(item.fire_hydrant)
  1451. data_time2.push(item.data_time)
  1452. water_tank_level.push(item.water_tank_level)
  1453. });
  1454. (function() {
  1455. var sortData = [{
  1456. sortName: "喷淋末端、消火栓屋顶水箱液位关联",
  1457. data: [
  1458. spray_end2, fire_hydrant2
  1459. ]
  1460. }];
  1461. var xData = function() {
  1462. var data = [];
  1463. for (var i = 1; i < water_associated_data.length + 1; i++) {
  1464. data.push(i);
  1465. }
  1466. return data;
  1467. }();
  1468. // 1. 实例化对象
  1469. var myChart = echarts.init(document.querySelector("#deviceLinkChart2"));
  1470. // 2.指定配置
  1471. var option = {
  1472. color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
  1473. tooltip: {
  1474. trigger: "axis",
  1475. textStyle: {
  1476. align: 'left' //图例左对齐
  1477. },
  1478. backgroundColor: '#12DFE0',
  1479. formatter: function(params) {
  1480. var res = params[0].seriesName + ':' + params[0].value + 'Mpa<br />' + params[1].seriesName + ':' + params[1].value + 'Mpa<br /> 水箱液位 :' + water_tank_level[params[0].dataIndex] + 'm<br />时间:' + data_time[params[0].dataIndex] + '';
  1481. return res;
  1482. },
  1483. },
  1484. legend: {
  1485. // 如果series 对象有name 值,则 legend可以不用写data
  1486. itemGap: 20,
  1487. itemHeight: 2,
  1488. itemWidth: 15,
  1489. icon: 'rect',
  1490. textStyle: {
  1491. color: "#aaa"
  1492. },
  1493. top: "bottom",
  1494. },
  1495. grid: {
  1496. top: "0%",
  1497. left: "1%",
  1498. right: "1%",
  1499. bottom: "15%",
  1500. show: true, // 显示边框
  1501. borderWidth: '0', //去除边框
  1502. containLabel: true // 包含刻度文字在内
  1503. },
  1504. xAxis: {
  1505. type: "category",
  1506. boundaryGap: false,
  1507. data: xData,
  1508. axisTick: {
  1509. show: false // 去除刻度线
  1510. },
  1511. axisLabel: {
  1512. color: "#AADDFF" // 文本颜色
  1513. },
  1514. axisLine: {
  1515. show: false // 去除轴线
  1516. }
  1517. },
  1518. yAxis: {
  1519. type: "value",
  1520. axisTick: {
  1521. show: false // 去除刻度线
  1522. },
  1523. axisLabel: {
  1524. show: false // 去除文本
  1525. },
  1526. axisLine: {
  1527. show: false // 去除轴线
  1528. },
  1529. splitLine: {
  1530. lineStyle: {
  1531. color: "#aaa", // 分割线颜色
  1532. opacity: '0.2'
  1533. }
  1534. }
  1535. },
  1536. series: [{
  1537. symbol: "none",
  1538. name: "喷淋末端",
  1539. type: "line",
  1540. smooth: true, // true 可以让我们的折线显示带有弧度
  1541. areaStyle: {
  1542. normal: {
  1543. color: new echarts.graphic.LinearGradient(
  1544. 0,
  1545. 0,
  1546. 0,
  1547. 1, [{
  1548. offset: 0,
  1549. color: "rgba(255,156,0, 0.4)"
  1550. },
  1551. {
  1552. offset: 0.8,
  1553. color: "rgba(255,156,0, 0.3)"
  1554. }
  1555. ],
  1556. false
  1557. ),
  1558. shadowColor: "rgba(0, 0, 0, 0.1)"
  1559. }
  1560. },
  1561. data: sortData[0].data[0]
  1562. },
  1563. {
  1564. symbol: "none",
  1565. name: "消防栓",
  1566. type: "line",
  1567. smooth: true,
  1568. areaStyle: {
  1569. normal: {
  1570. color: new echarts.graphic.LinearGradient(
  1571. 0,
  1572. 0,
  1573. 0,
  1574. 1, [{
  1575. offset: 0,
  1576. color: "rgba(0,150,255,0.5)"
  1577. },
  1578. {
  1579. offset: 0.8,
  1580. color: "rgba(0,150,255, 0.1)"
  1581. }
  1582. ],
  1583. false
  1584. ),
  1585. shadowColor: "rgba(0, 0, 0, 0.1)"
  1586. }
  1587. },
  1588. data: sortData[0].data[1]
  1589. }
  1590. ]
  1591. };
  1592. myChart.setOption(option);
  1593. var img1 = document.getElementById('deviceLinkChart2_img');
  1594. setTimeout(function() {
  1595. img1.src = myChart.getDataURL();
  1596. }, 1000)
  1597. })();
  1598. //数据波动关联
  1599. let data_fluctuation = result.RESULT[0].data_fluctuation;
  1600. // 结论数据渲染
  1601. var items = '';
  1602. var conclusion = data_fluctuation.conclusion
  1603. for (x in conclusion) {
  1604. xIndex = x.substr(x.length - 1, 1);
  1605. items += `<div>${xIndex}、${conclusion[x]}</div>`
  1606. }
  1607. $('.exportBox .data_fluctuation .summaryDetail').html(items);
  1608. // 数据波动关联
  1609. (function() {
  1610. let position = [];
  1611. let before_fluctuation = [];
  1612. let after_fluctuation = [];
  1613. let data_time = [];
  1614. let volatility_data = data_fluctuation.volatility_data;
  1615. volatility_data.forEach(function(item, index) {
  1616. //楼层
  1617. position.push(item.position)
  1618. //开始值
  1619. before_fluctuation.push(item.before_fluctuation)
  1620. //结束值
  1621. after_fluctuation.push(item.after_fluctuation)
  1622. data_time.push(item.data_time)
  1623. });
  1624. // 1. 实例化对象
  1625. var myChart = echarts.init(document.querySelector("#dataChangeChart1"));
  1626. var xData = position;
  1627. // 2.指定配置
  1628. var option = {
  1629. backgroundColor: 'transparent',
  1630. color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
  1631. tooltip: {
  1632. backgroundColor: '#12DFE0',
  1633. //提示框组件
  1634. trigger: 'axis',
  1635. // formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间:' + chooseTime + '',
  1636. formatter: function(params) {
  1637. var res = params[0].seriesName + ':' + params[0].value + 'Mpa<br />' + params[1].seriesName + ':' + params[1].value + 'Mpa<br />' + data_time[params[1].dataIndex];
  1638. return res;
  1639. },
  1640. axisPointer: {
  1641. type: 'shadow',
  1642. },
  1643. textStyle: {
  1644. fontStyle: 'normal',
  1645. fontFamily: '微软雅黑',
  1646. align: 'left' //图例左对齐
  1647. },
  1648. },
  1649. legend: {
  1650. // 如果series 对象有name 值,则 legend可以不用写data
  1651. itemGap: 20,
  1652. itemHeight: 2,
  1653. itemWidth: 15,
  1654. icon: 'rect',
  1655. textStyle: {
  1656. color: "#AAA"
  1657. },
  1658. top: "bottom",
  1659. },
  1660. grid: {
  1661. left: '0',
  1662. right: '0',
  1663. bottom: '40',
  1664. top: '0',
  1665. containLabel: true,
  1666. },
  1667. //添加横线滚动条
  1668. dataZoom: {
  1669. start: 0, //默认为0
  1670. end: 100 - 1500 / 1, //默认为100
  1671. type: 'slider',
  1672. show: xData.length > 10 ? true : false,
  1673. xAxisIndex: [0],
  1674. handleSize: 0, //滑动条的 左右2个滑动条的大小
  1675. height: 4, //组件高度
  1676. left: 20, //左边的距离
  1677. right: 20, //右边的距离
  1678. bottom: 20, //右边的距离
  1679. handleColor: '#CBBCDB', //h滑动图标的颜色
  1680. handleStyle: {
  1681. borderColor: "#CBBCDB",
  1682. borderWidth: "1",
  1683. shadowBlur: 2,
  1684. background: "#CBBCDB",
  1685. shadowColor: "#CBBCDB",
  1686. },
  1687. textStyle: {
  1688. color: "#fff"
  1689. },
  1690. backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
  1691. showDataShadow: false, //是否显示数据阴影 默认auto
  1692. // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
  1693. filterMode: 'filter',
  1694. },
  1695. xAxis: [{
  1696. type: 'category',
  1697. // boundaryGap: true,//坐标轴两边留白
  1698. data: xData,
  1699. axisLabel: {
  1700. interval: 0,
  1701. // rotate: 340,
  1702. // formatter: function(val) {
  1703. // return val.split("").join("\n");
  1704. // }, //横轴信息文字竖直显示
  1705. textStyle: {
  1706. color: '#AADDFF',
  1707. fontStyle: 'normal',
  1708. fontFamily: '微软雅黑',
  1709. fontSize: 12,
  1710. },
  1711. },
  1712. axisTick: {
  1713. //坐标轴刻度相关设置。
  1714. show: false,
  1715. },
  1716. axisLine: {
  1717. //坐标轴轴线相关设置
  1718. },
  1719. splitLine: {
  1720. //坐标轴在 grid 区域中的分隔线。
  1721. show: false,
  1722. },
  1723. }, ],
  1724. yAxis: [{
  1725. type: 'value',
  1726. axisLabel: false,
  1727. axisLine: {
  1728. show: false,
  1729. },
  1730. axisTick: {
  1731. show: false,
  1732. },
  1733. splitLine: {
  1734. show: true,
  1735. lineStyle: {
  1736. color: "#aaa", // 分割线颜色
  1737. opacity: '0.2'
  1738. },
  1739. },
  1740. boundaryGap: ['0', '10%'],
  1741. }],
  1742. series: [{
  1743. name: '波动前水压值',
  1744. type: 'bar',
  1745. data: before_fluctuation,
  1746. barMaxWidth: '11',
  1747. itemStyle: {
  1748. borderColor: "#0096FF",
  1749. },
  1750. barGap: '50%',
  1751. },
  1752. {
  1753. name: '波动后水压值',
  1754. type: 'bar',
  1755. data: after_fluctuation,
  1756. barMaxWidth: '11',
  1757. itemStyle: {
  1758. borderColor: "#FF9C00",
  1759. },
  1760. },
  1761. ],
  1762. };
  1763. myChart.setOption(option);
  1764. var img1 = document.getElementById('dataChangeChart1_img');
  1765. setTimeout(function() {
  1766. img1.src = myChart.getDataURL();
  1767. }, 1000)
  1768. })();
  1769. /*
  1770. 导出数据对接 end
  1771. */
  1772. } else {
  1773. layui.use('layer', function() {
  1774. var layer = layui.layer;
  1775. layer.alert('暂无数据', { icon: 5 }, function() {
  1776. location.reload();
  1777. });
  1778. });
  1779. }
  1780. }, function(errorMsg) {
  1781. layui.use('layer', function() {
  1782. var layer = layui.layer;
  1783. layer.alert('数据请求失败', { icon: 5 });
  1784. });
  1785. }, 1)
  1786. };
  1787. function getSearchParamObj() {
  1788. let queryParam = {};
  1789. let buildingVal = $('#building').val();
  1790. let chooseTime = $('#chooseTime').val();
  1791. queryParam.company_code = buildingVal;
  1792. queryParam.generation_time = chooseTime;
  1793. return queryParam;
  1794. };
  1795. //日期筛选
  1796. layui.use('laydate', function() {
  1797. var laydate = layui.laydate;
  1798. ///年月选择器
  1799. laydate.render({
  1800. elem: '#chooseTime',
  1801. type: 'month',
  1802. max: -30, //7天后
  1803. trigger: 'click', //呼出事件改成click
  1804. done: function(value, date, endDate) {
  1805. setTimeout(function() {
  1806. getListData(getSearchParamObj());
  1807. }, 100)
  1808. }
  1809. });
  1810. });
  1811. //建筑筛选
  1812. $("#building").change(function() {
  1813. setTimeout(function() {
  1814. getListData(getSearchParamObj());
  1815. }, 100)
  1816. });
  1817. // 打印
  1818. (function() {
  1819. $("#btnPrint").click(function() {
  1820. print_detail()
  1821. });
  1822. var print_detail = function() {
  1823. //打印前echarts图表转换成图片 start
  1824. $('#divergenceChart1_img').show()
  1825. $('#divergenceChart1').hide()
  1826. $('#hiddenCheckChart1_img').show()
  1827. $('#hiddenCheckChart1').hide()
  1828. $('#deviceLinkChart1_img,#deviceLinkChart2_img').show()
  1829. $('#deviceLinkChart1,#deviceLinkChart2').hide()
  1830. $('#dataChangeChart1_img').show()
  1831. $('#dataChangeChart1').hide()
  1832. // end
  1833. var div1_label1 = document.getElementById('printArea').innerHTML;
  1834. var hkey_key;
  1835. var hkey_root = 'HKEY_CURRENT_USER';
  1836. var hkey_path = '\\Software\\Micorsoft\\Internet Explorer\\PageSetup\\';
  1837. var print_win = window.open('打印窗口', '_blank');
  1838. var div = document.createElement('div');
  1839. div.setAttribute('width', '100%');
  1840. div.setAttribute('height', '100%');
  1841. var div_print = document.createElement('div');
  1842. div_print.setAttribute('style', 'width:595px;height:842px;padding:50px 20px;margin:0px auto 0px auto');
  1843. div_print.innerHTML = div1_label1;
  1844. div.appendChild(div_print);
  1845. print_win.document.write(div.innerHTML);
  1846. print_win.document.close();
  1847. try {
  1848. var RegWsh = new ActiveXObject('WScript.Shell');
  1849. hkey_key = 'header';
  1850. RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
  1851. hkey_key = 'footer';
  1852. RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, '');
  1853. } catch (e) {}
  1854. print_win.print();
  1855. print_win.close();
  1856. }
  1857. })()