Procházet zdrojové kódy

waterAnalysisDataVisualization water.js 李欣儒 commit at 2021-02-08

李欣儒 před 4 roky
rodič
revize
ddc0dece4a
1 změnil soubory, kde provedl 166 přidání a 0 odebrání
  1. 166 0
      waterAnalysisDataVisualization/externalJs/water.js

+ 166 - 0
waterAnalysisDataVisualization/externalJs/water.js

@@ -1309,3 +1309,169 @@ function getListData(queryParam = {}) {
 
                         axisTick: {
                             //坐标轴刻度相关设置。
+                            show: false,
+                        },
+                        axisLine: {
+                            //坐标轴轴线相关设置
+
+                        },
+                        splitLine: {
+                            //坐标轴在 grid 区域中的分隔线。
+                            show: false,
+                        },
+                    }, ],
+                    yAxis: [{
+                        type: 'value',
+
+                        axisLabel: false,
+                        axisLine: {
+                            show: false,
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: "#aaa", // 分割线颜色
+                                opacity: '0.2'
+                            }
+                        },
+                        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);
+
+                //echarts赋值到src
+                var img1 = document.getElementById('hiddenCheckChart1_img');
+                setTimeout(function() {
+                    img1.src = myChart.getDataURL();
+                }, 1000)
+
+            })();
+
+            // 跨设备数据关联
+            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 += `<div>${xIndex}、${conclusion[x]}</div>`
+            }
+            $('.exportBox .device_association .summaryDetail').html(items);
+            // 跨设备数据关联1
+
+            // 喷淋末端、消火栓与水泵启停关联
+            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)
+            });
+
+            (function() {
+                var sortData = [{
+                    sortName: "喷淋末端、消火栓与水泵启停关联",
+                    data: [
+                        spray_end, fire_hydrant
+                    ]
+                }, ];
+
+                var xData = function() {
+                    var data = [];
+                    for (var i = 1; i < spray_end.length + 1; i++) {
+                        data.push(i);
+                    }
+                    return data;
+                }();
+
+                // 1. 实例化对象
+                var myChart = echarts.init(document.querySelector("#deviceLinkChart1"));
+                // 2.指定配置
+                var option = {
+
+                    color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
+                    tooltip: {
+                        trigger: "axis",
+                        textStyle: {
+                            align: 'left' //图例左对齐
+                        },
+                        backgroundColor: '#12DFE0',
+                        formatter: function(params) {
+                            var res = params[0].seriesName + ':' + params[0].value + '<br />' + params[1].seriesName + ':' + params[1].value + '<br />水泵启动状态 :' + pump_status[params[0].dataIndex] + '<br />时间:' + chooseTime + '';
+                            return res;
+                        },
+                    },
+                    legend: {
+                        // 如果series 对象有name 值,则 legend可以不用写data
+                        itemGap: 20,
+                        itemHeight: 2,
+                        itemWidth: 15,
+                        icon: 'rect',
+                        textStyle: {
+                            color: "#aaa"
+                        },
+                        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 // 去除轴线