water.js 78 KB

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