water.js 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970
  1. // 数据请求传参
  2. getListData(getSearchParamObj());
  3. function getListData(queryParam = {}) {
  4. ajaxRequest(WATER_DATA, "POST", queryParam, function(result) {
  5. if (result.RESULT) {
  6. //数据统计
  7. var data_statistics = result.RESULT[0].data_statistics;
  8. $('.total').html(data_statistics.alarm_number);
  9. $('.solved').html(data_statistics.processing_number);
  10. $('.unsolve').html(data_statistics.unprocessed_number);
  11. // 环状饼图定制 (数据统计计算)
  12. (function() {
  13. // 实例化对象
  14. var myChart = echarts.init(document.querySelector(".bar-3d .chart"));
  15. // 生成扇形的曲面参数方程,用于 series-surface.parametricEquation
  16. function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
  17. // 计算
  18. let midRatio = (startRatio + endRatio) / 2;
  19. let startRadian = startRatio * Math.PI * 2;
  20. let endRadian = endRatio * Math.PI * 2;
  21. let midRadian = midRatio * Math.PI * 2;
  22. // 如果只有一个扇形,则不实现选中效果。
  23. if (startRatio === 0 && endRatio === 1) {
  24. isSelected = false;
  25. }
  26. // 通过扇形内径/外径的值,换算出辅助参数 k(默认值 1/3)
  27. k = typeof k !== 'undefined' ? k : 1 / 3;
  28. // 计算选中效果分别在 x 轴、y 轴方向上的位移(未选中,则位移均为 0)
  29. let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  30. let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  31. // 计算高亮效果的放大比例(未高亮,则比例为 1)
  32. let hoverRate = isHovered ? 1.05 : 1;
  33. // 返回曲面参数方程
  34. return {
  35. u: {
  36. min: -Math.PI,
  37. max: Math.PI * 3,
  38. step: Math.PI / 32
  39. },
  40. v: {
  41. min: 0,
  42. max: Math.PI * 2,
  43. step: Math.PI / 20
  44. },
  45. x: function(u, v) {
  46. if (u < startRadian) {
  47. return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  48. }
  49. if (u > endRadian) {
  50. return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  51. }
  52. return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
  53. },
  54. y: function(u, v) {
  55. if (u < startRadian) {
  56. return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
  57. }
  58. if (u > endRadian) {
  59. return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
  60. }
  61. return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
  62. },
  63. z: function(u, v) {
  64. if (u < -Math.PI * 0.5) {
  65. return Math.sin(u);
  66. }
  67. if (u > Math.PI * 2.5) {
  68. return Math.sin(u);
  69. }
  70. return Math.sin(v) > 0 ? 1 : -1;
  71. }
  72. };
  73. }
  74. // 生成模拟 3D 饼图的配置项
  75. function getPie3D(pieData, internalDiameterRatio) {
  76. let series = [];
  77. let sumValue = 0;
  78. let startValue = 0;
  79. let endValue = 0;
  80. let legendData = [];
  81. let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
  82. // 为每一个饼图数据,生成一个 series-surface 配置
  83. for (let i = 0; i < pieData.length; i++) {
  84. sumValue += pieData[i].value;
  85. let seriesItem = {
  86. name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
  87. type: 'surface',
  88. parametric: true,
  89. wireframe: {
  90. show: false
  91. },
  92. pieData: pieData[i],
  93. pieStatus: {
  94. selected: false,
  95. hovered: false,
  96. k: k
  97. }
  98. };
  99. if (typeof pieData[i].itemStyle != 'undefined') {
  100. let itemStyle = {};
  101. typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
  102. typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
  103. seriesItem.itemStyle = itemStyle;
  104. }
  105. series.push(seriesItem);
  106. }
  107. // 使用上一次遍历时,计算出的数据和 sumValue,调用 getParametricEquation 函数,
  108. // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation,也就是实现每一个扇形。
  109. for (let i = 0; i < series.length; i++) {
  110. endValue = startValue + series[i].pieData.value;
  111. // console.log(series[i]);
  112. series[i].pieData.startRatio = startValue / sumValue;
  113. series[i].pieData.endRatio = endValue / sumValue;
  114. series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
  115. startValue = endValue;
  116. legendData.push(series[i].name);
  117. }
  118. // 准备待返回的配置项,把准备好的 legendData、series 传入。
  119. let option = {
  120. tooltip: {
  121. backgroundColor: '#12DFE0',
  122. formatter: params => {
  123. if (params.seriesName !== 'mouseoutSeries') {
  124. // 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}%`;
  125. return `${params.seriesName}: ${option.series[params.seriesIndex].pieData.value}%`;
  126. }
  127. }
  128. },
  129. xAxis3D: {
  130. min: -1,
  131. max: 1
  132. },
  133. yAxis3D: {
  134. min: -1,
  135. max: 1
  136. },
  137. zAxis3D: {
  138. min: -1,
  139. max: 1
  140. },
  141. grid3D: {
  142. show: false,
  143. boxHeight: 40,
  144. top: '-10%',
  145. // bottom: '80%',
  146. // environment: '../images/3d-bg.png', //aa背景色
  147. viewControl: {
  148. distance: 170, //aa距离
  149. alpha: 21, //aa角度
  150. beta: 60, //aa角度
  151. zoomSensitivity: false //是否开启缩放和平移
  152. },
  153. },
  154. series: series
  155. };
  156. return option;
  157. }
  158. // 传入数据生成 option
  159. var option = getPie3D([{
  160. name: '已处理率',
  161. value: data_statistics.treatment_rate,
  162. itemStyle: {
  163. opacity: 0.5,
  164. color: 'rgba(0,127,244,.8)',
  165. }
  166. }, {
  167. name: '未处理率',
  168. value: data_statistics.untreated_rate,
  169. itemStyle: {
  170. opacity: 0.5,
  171. color: 'rgba(209,126,23,.8)',
  172. }
  173. }], 2);
  174. // 把配置给实例对象
  175. myChart.setOption(option);
  176. window.addEventListener("resize", function() {
  177. myChart.resize();
  178. });
  179. })();
  180. // 折线图定制 (数据离散率挖掘)
  181. (function() {
  182. let dispersion_rate = result.RESULT[0].dispersion_rate;
  183. // 结论数据渲染
  184. var items = '';
  185. var conclusion = dispersion_rate.conclusion
  186. for (x in conclusion) {
  187. xIndex = x.substr(x.length - 1, 1);
  188. items += `<p>${xIndex}、${conclusion[x]}</p>`
  189. }
  190. $('.divergence .summaryDetail').html(items);
  191. let a = [];
  192. let b = [];
  193. let c = [];
  194. let hydraulic_pressure = dispersion_rate.hydraulic_pressure;
  195. hydraulic_pressure.forEach(function(item, index) {
  196. a.push(item.variance)
  197. b.push(item.standard_deviation)
  198. c.push(item.average_value)
  199. });
  200. var sortData = [{
  201. data: [a, b, c]
  202. }];
  203. var xData = function() {
  204. var data = [];
  205. for (var i = 1; i < hydraulic_pressure.length + 1; i++) {
  206. data.push(i);
  207. }
  208. return data;
  209. }();
  210. // 1. 实例化对象
  211. var myChart = echarts.init(document.querySelector(".divergence .chart"));
  212. // 2.指定配置
  213. var option = {
  214. color: [{
  215. colorStops: [{
  216. offset: 0,
  217. color: '#F9860C' // 0% 处的颜色
  218. }, {
  219. offset: 1,
  220. color: '#fff' // 100% 处的颜色
  221. }],
  222. },
  223. {
  224. colorStops: [{
  225. offset: 0,
  226. color: '#07E1F1' // 0% 处的颜色
  227. }, {
  228. offset: 1,
  229. color: '#0456CB' // 100% 处的颜色
  230. }],
  231. },
  232. {
  233. colorStops: [{
  234. offset: 0,
  235. color: '#11F90C' // 0% 处的颜色
  236. }, {
  237. offset: 1,
  238. color: '#3FC713' // 100% 处的颜色
  239. }],
  240. }
  241. ],
  242. tooltip: {
  243. trigger: "axis",
  244. textStyle: {
  245. align: 'left' //图例左对齐
  246. },
  247. backgroundColor: '#12DFE0',
  248. formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间:' + chooseTime + ''
  249. },
  250. legend: {
  251. // 如果series 对象有name 值,则 legend可以不用写data
  252. itemGap: 20,
  253. itemHeight: 2,
  254. itemWidth: 15,
  255. icon: 'rect',
  256. textStyle: {
  257. color: "#fff"
  258. },
  259. top: "bottom",
  260. },
  261. grid: {
  262. top: "0%",
  263. left: "1%",
  264. right: "1%",
  265. bottom: "15%",
  266. show: true, // 显示边框
  267. borderWidth: '0', //去除边框
  268. containLabel: true // 包含刻度文字在内
  269. },
  270. xAxis: {
  271. type: "category",
  272. boundaryGap: false,
  273. data: xData,
  274. axisTick: {
  275. show: false // 去除刻度线
  276. },
  277. axisLabel: {
  278. color: "#AADDFF" // 文本颜色
  279. },
  280. axisLine: {
  281. lineStyle: {
  282. color: 'rgba(255,255,255,.3)'
  283. }
  284. },
  285. splitNumber: 8,
  286. splitLine: {
  287. show: false
  288. },
  289. splitArea: {
  290. show: true,
  291. areaStyle: {
  292. color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
  293. }
  294. }
  295. },
  296. yAxis: {
  297. // scale: true,
  298. // min: 'dataMin',
  299. type: "value",
  300. axisTick: {
  301. show: false // 去除刻度线
  302. },
  303. axisLabel: {
  304. show: false // 去除文本
  305. },
  306. axisLine: {
  307. show: false // 去除轴线
  308. },
  309. splitLine: {
  310. lineStyle: {
  311. color: "#012f4a" // 分割线颜色
  312. }
  313. }
  314. },
  315. series: [{
  316. symbol: "none",
  317. name: "方差",
  318. type: "line",
  319. data: a
  320. },
  321. {
  322. symbol: "none",
  323. name: "标准差",
  324. type: "line",
  325. data: b
  326. }, {
  327. symbol: "none",
  328. name: "平均值",
  329. type: "line",
  330. data: c
  331. }
  332. ]
  333. };
  334. myChart.setOption(option);
  335. window.addEventListener("resize", function() {
  336. myChart.resize();
  337. });
  338. })();
  339. // 渗漏隐藏排查
  340. (function() {
  341. let leakage_investigation = result.RESULT[0].leakage_investigation;
  342. // 结论数据渲染
  343. var items = '';
  344. var conclusion = leakage_investigation.conclusion
  345. for (x in conclusion) {
  346. xIndex = x.substr(x.length - 1, 1);
  347. items += `<p>${xIndex}、${conclusion[x]}</p>`
  348. }
  349. $('.hiddenCheck .summaryDetail').html(items);
  350. let abnormal_pressure = [];
  351. let location_description = [];
  352. let start_pressure = [];
  353. let end_pressure = [];
  354. let leakage_data = leakage_investigation.leakage_data;
  355. leakage_data.forEach(function(item, index) {
  356. //异常值
  357. abnormal_pressure.push(item.abnormal_pressure)
  358. //楼层
  359. location_description.push(item.location_description)
  360. //开始值
  361. start_pressure.push(item.start_pressure)
  362. //结束值
  363. end_pressure.push(item.end_pressure)
  364. });
  365. var xData = location_description;
  366. // 基于准备好的dom,初始化echarts实例
  367. var myChart = echarts.init(document.querySelector(".bar.hiddenCheck .chart"));
  368. var option = {
  369. backgroundColor: 'transparent',
  370. color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
  371. tooltip: {
  372. backgroundColor: '#12DFE0',
  373. //提示框组件
  374. trigger: 'axis',
  375. formatter: function(params) {
  376. // console.log(params)
  377. var res = '位置:' + params[0].axisValue + '<br />异常水压值 :' + abnormal_pressure[params[0].dataIndex];
  378. return res;
  379. },
  380. axisPointer: {
  381. type: 'shadow',
  382. },
  383. textStyle: {
  384. fontStyle: 'normal',
  385. fontFamily: '微软雅黑',
  386. },
  387. },
  388. grid: {
  389. left: '0',
  390. right: '0',
  391. bottom: '40',
  392. top: '0',
  393. containLabel: true,
  394. },
  395. //添加横线滚动条
  396. dataZoom: {
  397. start: 0, //默认为0
  398. end: 100 - 1500 / 12, //默认为100
  399. type: 'slider',
  400. show: xData.length > 4 ? true : false,
  401. xAxisIndex: [0],
  402. handleSize: 0, //滑动条的 左右2个滑动条的大小
  403. height: 4, //组件高度
  404. left: 20, //左边的距离
  405. right: 20, //右边的距离
  406. bottom: 20, //右边的距离
  407. handleColor: '#CBBCDB', //h滑动图标的颜色
  408. handleStyle: {
  409. borderColor: "#CBBCDB",
  410. borderWidth: "1",
  411. shadowBlur: 2,
  412. background: "#CBBCDB",
  413. shadowColor: "#CBBCDB",
  414. },
  415. textStyle: {
  416. color: "#fff"
  417. },
  418. backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
  419. showDataShadow: false, //是否显示数据阴影 默认auto
  420. // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
  421. filterMode: 'filter',
  422. },
  423. xAxis: [{
  424. type: 'category',
  425. // boundaryGap: true,//坐标轴两边留白
  426. data: xData,
  427. axisLabel: {
  428. interval: 0,
  429. // rotate: 340,
  430. // formatter: function(val) {
  431. // return val.split("").join("\n");
  432. // }, //横轴信息文字竖直显示
  433. textStyle: {
  434. color: '#AADDFF',
  435. fontStyle: 'normal',
  436. fontFamily: '微软雅黑',
  437. fontSize: 12,
  438. },
  439. },
  440. axisTick: {
  441. //坐标轴刻度相关设置。
  442. show: false,
  443. },
  444. axisLine: {
  445. //坐标轴轴线相关设置
  446. },
  447. splitLine: {
  448. //坐标轴在 grid 区域中的分隔线。
  449. show: false,
  450. },
  451. }, ],
  452. yAxis: [{
  453. type: 'value',
  454. axisLabel: false,
  455. axisLine: {
  456. show: false,
  457. },
  458. axisTick: {
  459. show: false,
  460. },
  461. splitLine: {
  462. show: true,
  463. lineStyle: {
  464. color: ['#204C6F'],
  465. opacity: 0.3,
  466. },
  467. },
  468. boundaryGap: ['0', '10%'],
  469. }],
  470. series: [{
  471. name: '起层',
  472. type: 'bar',
  473. data: start_pressure,
  474. barMaxWidth: '11',
  475. itemStyle: {
  476. borderColor: "#0096FF",
  477. },
  478. barGap: '50%',
  479. },
  480. {
  481. name: '始层',
  482. type: 'bar',
  483. data: end_pressure,
  484. barMaxWidth: '11',
  485. itemStyle: {
  486. borderColor: "#FF9C00",
  487. },
  488. },
  489. ],
  490. };
  491. // 使用刚指定的配置项和数据显示图表。
  492. myChart.setOption(option);
  493. window.addEventListener("resize", function() {
  494. myChart.resize();
  495. });
  496. })();
  497. // 折线图定制 (跨设备数据关联)
  498. (function() {
  499. let device_association = result.RESULT[0].device_association;
  500. // 结论数据渲染
  501. var items = '';
  502. var conclusion = device_association.conclusion
  503. for (x in conclusion) {
  504. xIndex = x.substr(x.length - 1, 1);
  505. items += `<p>${xIndex}、${conclusion[x]}</p>`
  506. }
  507. $('.device_association .summaryDetail').html(items);
  508. // 喷淋末端、消火栓与水泵启停关联
  509. let spray_end = [];
  510. let fire_hydrant = [];
  511. let pump_status = []
  512. let pump_associated_data = device_association.pump_associated_data;
  513. pump_associated_data.forEach(function(item, index) {
  514. spray_end.push(item.spray_end)
  515. fire_hydrant.push(item.fire_hydrant)
  516. pump_status.push(item.pump_status)
  517. });
  518. // 喷淋末端、消火栓屋顶水箱液位关联
  519. let spray_end2 = [];
  520. let fire_hydrant2 = [];
  521. let water_tank_level = []
  522. let water_associated_data = device_association.water_associated_data;
  523. water_associated_data.forEach(function(item, index) {
  524. spray_end2.push(item.spray_end)
  525. fire_hydrant2.push(item.fire_hydrant)
  526. water_tank_level.push(item.water_tank_level)
  527. });
  528. var sortData = [{
  529. sortName: "喷淋末端、消火栓与水泵启停关联",
  530. data: [
  531. spray_end, fire_hydrant
  532. ]
  533. },
  534. {
  535. sortName: "喷淋末端、消火栓屋顶水箱液位关联",
  536. data: [
  537. spray_end2, fire_hydrant2
  538. ]
  539. }
  540. ];
  541. var xData = function() {
  542. var data = [];
  543. for (var i = 1; i < water_associated_data.length + 1; i++) {
  544. data.push(i);
  545. }
  546. return data;
  547. }();
  548. // 1. 实例化对象
  549. var myChart = echarts.init(document.querySelector(".device_association .chart"));
  550. // 2.指定配置
  551. var option = {
  552. color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
  553. tooltip: {
  554. trigger: "axis",
  555. textStyle: {
  556. align: 'left' //图例左对齐
  557. },
  558. backgroundColor: '#12DFE0',
  559. formatter: function(params) {
  560. if ($('#active').hasClass('active')) {
  561. var res = params[0].seriesName + ':' + params[0].value + '<br />' + params[1].seriesName + ':' + params[1].value + '<br />水泵启动状态 :' + pump_status[params[0].dataIndex] + '<br />时间:' + chooseTime + '';
  562. } else {
  563. var res = params[0].seriesName + ':' + params[0].value + '<br />' + params[1].seriesName + ':' + params[1].value + '<br /> 水箱液位 :' + water_tank_level[params[0].dataIndex] + '<br />时间:' + chooseTime + '';
  564. }
  565. return res;
  566. },
  567. },
  568. legend: {
  569. // 如果series 对象有name 值,则 legend可以不用写data
  570. itemGap: 20,
  571. itemHeight: 2,
  572. itemWidth: 15,
  573. icon: 'rect',
  574. textStyle: {
  575. color: "#fff"
  576. },
  577. top: "bottom",
  578. },
  579. grid: {
  580. top: "0%",
  581. left: "1%",
  582. right: "1%",
  583. bottom: "15%",
  584. show: true, // 显示边框
  585. borderWidth: '0', //去除边框
  586. containLabel: true // 包含刻度文字在内
  587. },
  588. xAxis: {
  589. type: "category",
  590. boundaryGap: false,
  591. data: xData,
  592. axisTick: {
  593. show: false // 去除刻度线
  594. },
  595. axisLabel: {
  596. color: "#AADDFF" // 文本颜色
  597. },
  598. axisLine: {
  599. show: false // 去除轴线
  600. }
  601. },
  602. yAxis: {
  603. type: "value",
  604. axisTick: {
  605. show: false // 去除刻度线
  606. },
  607. axisLabel: {
  608. show: false // 去除文本
  609. },
  610. axisLine: {
  611. show: false // 去除轴线
  612. },
  613. splitLine: {
  614. lineStyle: {
  615. color: "#012f4a" // 分割线颜色
  616. }
  617. }
  618. },
  619. series: [{
  620. symbol: "none",
  621. name: "喷淋末端",
  622. type: "line",
  623. smooth: true, // true 可以让我们的折线显示带有弧度
  624. areaStyle: {
  625. normal: {
  626. color: new echarts.graphic.LinearGradient(
  627. 0,
  628. 0,
  629. 0,
  630. 1, [{
  631. offset: 0,
  632. color: "rgba(255,156,0, 0.4)"
  633. },
  634. {
  635. offset: 0.8,
  636. color: "rgba(255,156,0, 0.3)"
  637. }
  638. ],
  639. false
  640. ),
  641. shadowColor: "rgba(0, 0, 0, 0.1)"
  642. }
  643. },
  644. data: sortData[0].data[0]
  645. },
  646. {
  647. symbol: "none",
  648. name: "消防栓",
  649. type: "line",
  650. smooth: true,
  651. areaStyle: {
  652. normal: {
  653. color: new echarts.graphic.LinearGradient(
  654. 0,
  655. 0,
  656. 0,
  657. 1, [{
  658. offset: 0,
  659. color: "rgba(0,150,255,0.5)"
  660. },
  661. {
  662. offset: 0.8,
  663. color: "rgba(0,150,255, 0.1)"
  664. }
  665. ],
  666. false
  667. ),
  668. shadowColor: "rgba(0, 0, 0, 0.1)"
  669. }
  670. },
  671. data: sortData[0].data[1]
  672. }
  673. ]
  674. };
  675. myChart.setOption(option);
  676. window.addEventListener("resize", function() {
  677. myChart.resize();
  678. });
  679. // 点击切换效果
  680. $(".device_association .tab-line").on("click", "a", function() {
  681. $(this).addClass('active').siblings().removeClass('active')
  682. var obj = sortData[$(this).index()];
  683. option.series[0].data = obj.data[0];
  684. option.series[1].data = obj.data[1];
  685. // 重新渲染
  686. myChart.setOption(option);
  687. });
  688. })();
  689. // 折线图定制 (数据波动关联)
  690. (function() {
  691. let data_fluctuation = result.RESULT[0].data_fluctuation;
  692. // 结论数据渲染
  693. var items = '';
  694. var conclusion = data_fluctuation.conclusion
  695. for (x in conclusion) {
  696. xIndex = x.substr(x.length - 1, 1);
  697. items += `<p>${xIndex}、${conclusion[x]}</p>`
  698. }
  699. $('.data_fluctuation .summaryDetail').html(items);
  700. let position = [];
  701. let before_fluctuation = [];
  702. let after_fluctuation = [];
  703. let volatility_data = data_fluctuation.volatility_data;
  704. volatility_data.forEach(function(item, index) {
  705. //楼层
  706. position.push(item.position)
  707. //开始值
  708. before_fluctuation.push(item.before_fluctuation)
  709. //结束值
  710. after_fluctuation.push(item.after_fluctuation)
  711. });
  712. // 1. 实例化对象
  713. var myChart = echarts.init(document.querySelector(".data_fluctuation .chart"));
  714. var xData = position;
  715. // 2.指定配置
  716. var option = {
  717. backgroundColor: 'transparent',
  718. color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
  719. tooltip: {
  720. backgroundColor: '#12DFE0',
  721. //提示框组件
  722. trigger: 'axis',
  723. formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间:' + chooseTime + '',
  724. axisPointer: {
  725. type: 'shadow',
  726. },
  727. textStyle: {
  728. fontStyle: 'normal',
  729. fontFamily: '微软雅黑',
  730. align: 'left' //图例左对齐
  731. },
  732. },
  733. grid: {
  734. left: '0',
  735. right: '0',
  736. bottom: '40',
  737. top: '0',
  738. containLabel: true,
  739. },
  740. //添加横线滚动条
  741. dataZoom: {
  742. start: 0, //默认为0
  743. end: 100 - 1500 / 8, //默认为100
  744. type: 'slider',
  745. show: xData.length > 5 ? true : false,
  746. xAxisIndex: [0],
  747. handleSize: 0, //滑动条的 左右2个滑动条的大小
  748. height: 4, //组件高度
  749. left: 20, //左边的距离
  750. right: 20, //右边的距离
  751. bottom: 20, //右边的距离
  752. handleColor: '#CBBCDB', //h滑动图标的颜色
  753. handleStyle: {
  754. borderColor: "#CBBCDB",
  755. borderWidth: "1",
  756. shadowBlur: 2,
  757. background: "#CBBCDB",
  758. shadowColor: "#CBBCDB",
  759. },
  760. textStyle: {
  761. color: "#fff"
  762. },
  763. backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
  764. showDataShadow: false, //是否显示数据阴影 默认auto
  765. // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
  766. filterMode: 'filter',
  767. },
  768. xAxis: [{
  769. type: 'category',
  770. // boundaryGap: true,//坐标轴两边留白
  771. data: xData,
  772. axisLabel: {
  773. interval: 0,
  774. // rotate: 340,
  775. // formatter: function(val) {
  776. // return val.split("").join("\n");
  777. // }, //横轴信息文字竖直显示
  778. textStyle: {
  779. color: '#AADDFF',
  780. fontStyle: 'normal',
  781. fontFamily: '微软雅黑',
  782. fontSize: 12,
  783. },
  784. },
  785. axisTick: {
  786. //坐标轴刻度相关设置。
  787. show: false,
  788. },
  789. axisLine: {
  790. //坐标轴轴线相关设置
  791. },
  792. splitLine: {
  793. //坐标轴在 grid 区域中的分隔线。
  794. show: false,
  795. },
  796. }, ],
  797. yAxis: [{
  798. type: 'value',
  799. axisLabel: false,
  800. axisLine: {
  801. show: false,
  802. },
  803. axisTick: {
  804. show: false,
  805. },
  806. splitLine: {
  807. show: true,
  808. lineStyle: {
  809. color: ['#204C6F'],
  810. opacity: 0.3,
  811. },
  812. },
  813. boundaryGap: ['0', '10%'],
  814. }],
  815. series: [{
  816. name: '波动前水压值',
  817. type: 'bar',
  818. data: before_fluctuation,
  819. barMaxWidth: '11',
  820. itemStyle: {
  821. borderColor: "#0096FF",
  822. },
  823. barGap: '50%',
  824. },
  825. {
  826. name: '波动后水压值',
  827. type: 'bar',
  828. data: after_fluctuation,
  829. barMaxWidth: '11',
  830. itemStyle: {
  831. borderColor: "#FF9C00",
  832. },
  833. },
  834. ],
  835. };
  836. myChart.setOption(option);
  837. window.addEventListener("resize", function() {
  838. myChart.resize();
  839. });
  840. })();
  841. } else {
  842. alert('暂无数据')
  843. }
  844. }, function(errorMsg) {
  845. alert("请求数据失败!");
  846. }, 2)
  847. };
  848. function getSearchParamObj() {
  849. let queryParam = {};
  850. let buildingVal = $('#building').val();
  851. let chooseTime = $('#chooseTime').val();
  852. queryParam.company_code = buildingVal;
  853. // queryParam.generation_time = chooseTime;
  854. return queryParam;
  855. }