|
|
@@ -564,3 +564,164 @@ function getListData(queryParam = {}) {
|
|
|
},
|
|
|
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修改两条线的颜色
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ textStyle: {
|
|
|
+ align: 'left' //图例左对齐
|
|
|
+ },
|
|
|
+ backgroundColor: '#12DFE0',
|
|
|
+ formatter: function(params) {
|
|
|
+ if ($('#active').hasClass('active')) {
|
|
|
+ var res = params[0].seriesName + '：' + params[0].value + '<br />' + params[1].seriesName + '：' + params[1].value + '<br />水泵启动状态 ：' + pump_status[params[0].dataIndex] + '<br />时间：' + chooseTime + '';
|
|
|
+ } else {
|
|
|
+ var res = params[0].seriesName + '：' + params[0].value + '<br />' + params[1].seriesName + '：' + params[1].value + '<br /> 水箱液位 ：' + water_tank_level[params[0].dataIndex] + '<br />时间：' + chooseTime + '';
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ // 如果series 对象有name 值，则 legend可以不用写data
|
|
|
+ itemGap: 20,
|
|
|
+ itemHeight: 2,
|
|
|
+ itemWidth: 15,
|
|
|
+ icon: 'rect',
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ },
|
|
|
+ top: "bottom",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: "0%",
|
|
|
+ left: "1%",
|
|
|
+ right: "1%",
|
|
|
+ bottom: "15%",
|
|
|
+ show: true, // 显示边框
|
|
|
+ borderWidth: '0', //去除边框
|
|
|
+ containLabel: true // 包含刻度文字在内
|
|
|
+ },
|
|
|
+
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: xData,
|
|
|
+ axisTick: {
|
|
|
+ show: false // 去除刻度线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#AADDFF" // 文本颜色
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false // 去除轴线
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisTick: {
|
|
|
+ show: false // 去除刻度线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false // 去除文本
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false // 去除轴线
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
李欣儒