waterAnalysisDataVisualization water.js 李欣儒 commit at 2020-10-12

waterAnalysisDataVisualization/externalJs/water.js

@@ -549,3 +549,114 @@ function getListData(queryParam = {}) {
                         type: 'value',
 
                         axisLabel: false,
+                        axisLine: {
+                            show: false,
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: ['#204C6F'],
+                                opacity: 0.3,
+                            },
+                        },
+                        boundaryGap: ['0', '10%'],
+                    }],
+                    series: [{
+                            name: '起层',
+                            type: 'bar',
+                            data: start_pressure,
+                            barMaxWidth: '11',
+                            itemStyle: {
+                                borderColor: "#0096FF",
+                            },
+                            barGap: '50%',
+                        },
+                        {
+                            name: '始层',
+                            type: 'bar',
+                            data: end_pressure,
+                            barMaxWidth: '11',
+                            itemStyle: {
+                                borderColor: "#FF9C00",
+                            },
+                        },
+                    ],
+                };
+
+                // 使用刚指定的配置项和数据显示图表。
+                myChart.setOption(option);
+                window.addEventListener("resize", function() {
+                    myChart.resize();
+                });
+            })();
+
+            // 折线图定制 (跨设备数据关联)
+            (function() {
+
+                let device_association = result.RESULT[0].device_association;
+
+                // 结论数据渲染
+                var items = '';
+                var conclusion = device_association.conclusion
+                for (x in conclusion) {
+                    xIndex = x.substr(x.length - 1, 1);
+                    items += `<p>${xIndex}、${conclusion[x]}</p>`
+                }
+                $('.device_association .summaryDetail').html(items);
+
+                // 喷淋末端、消火栓与水泵启停关联
+                let spray_end = [];
+                let fire_hydrant = [];
+                let pump_status = []
+
+                let pump_associated_data = device_association.pump_associated_data;
+                pump_associated_data.forEach(function(item, index) {
+                    spray_end.push(item.spray_end)
+                    fire_hydrant.push(item.fire_hydrant)
+                    pump_status.push(item.pump_status)
+                });
+
+                // 喷淋末端、消火栓屋顶水箱液位关联
+                let spray_end2 = [];
+                let fire_hydrant2 = [];
+                let water_tank_level = []
+
+                let water_associated_data = device_association.water_associated_data;
+                water_associated_data.forEach(function(item, index) {
+                    spray_end2.push(item.spray_end)
+                    fire_hydrant2.push(item.fire_hydrant)
+                    water_tank_level.push(item.water_tank_level)
+                });
+
+                var sortData = [{
+                        sortName: "喷淋末端、消火栓与水泵启停关联",
+                        data: [
+                            spray_end, fire_hydrant
+                        ]
+                    },
+                    {
+                        sortName: "喷淋末端、消火栓屋顶水箱液位关联",
+                        data: [
+                            spray_end2, fire_hydrant2
+                        ]
+                    }
+                ];
+
+                var xData = function() {
+                    var data = [];
+                    for (var i = 1; i < water_associated_data.length + 1; i++) {
+                        data.push(i);
+                    }
+                    return data;
+                }();
+
+                // 1. 实例化对象
+                var myChart = echarts.init(document.querySelector(".device_association .chart"));
+
+                // 2.指定配置
+                var option = {
+
+                    color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色