|
|
@@ -1,810 +1,970 @@
|
|
|
-// 柱状图1模块
|
|
|
-(function() {
|
|
|
- // 实例化对象
|
|
|
- var myChart = echarts.init(document.querySelector(".bar-3d .chart"));
|
|
|
+// 数据请求传参
|
|
|
+getListData(getSearchParamObj());
|
|
|
|
|
|
- // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
|
|
- function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
|
|
|
+function getListData(queryParam = {}) {
|
|
|
|
|
|
- // 计算
|
|
|
- let midRatio = (startRatio + endRatio) / 2;
|
|
|
+ ajaxRequest(WATER_DATA, "POST", queryParam, function(result) {
|
|
|
|
|
|
- let startRadian = startRatio * Math.PI * 2;
|
|
|
- let endRadian = endRatio * Math.PI * 2;
|
|
|
- let midRadian = midRatio * Math.PI * 2;
|
|
|
+ if (result.RESULT) {
|
|
|
|
|
|
- // 如果只有一个扇形，则不实现选中效果。
|
|
|
- if (startRatio === 0 && endRatio === 1) {
|
|
|
- isSelected = false;
|
|
|
- }
|
|
|
+ //数据统计
|
|
|
+ var data_statistics = result.RESULT[0].data_statistics;
|
|
|
|
|
|
- // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
|
|
- k = typeof k !== 'undefined' ? k : 1 / 3;
|
|
|
+ $('.total').html(data_statistics.alarm_number);
|
|
|
+ $('.solved').html(data_statistics.processing_number);
|
|
|
+ $('.unsolve').html(data_statistics.unprocessed_number);
|
|
|
|
|
|
- // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
|
|
- let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
|
|
- let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
|
|
+ // 环状饼图定制 （数据统计计算）
|
|
|
+ (function() {
|
|
|
+ // 实例化对象
|
|
|
+ var myChart = echarts.init(document.querySelector(".bar-3d .chart"));
|
|
|
|
|
|
- // 计算高亮效果的放大比例（未高亮，则比例为 1）
|
|
|
- let hoverRate = isHovered ? 1.05 : 1;
|
|
|
+ // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
|
|
+ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
|
|
|
|
|
|
- // 返回曲面参数方程
|
|
|
- return {
|
|
|
+ // 计算
|
|
|
+ let midRatio = (startRatio + endRatio) / 2;
|
|
|
|
|
|
- u: {
|
|
|
- min: -Math.PI,
|
|
|
- max: Math.PI * 3,
|
|
|
- step: Math.PI / 32
|
|
|
- },
|
|
|
+ let startRadian = startRatio * Math.PI * 2;
|
|
|
+ let endRadian = endRatio * Math.PI * 2;
|
|
|
+ let midRadian = midRatio * Math.PI * 2;
|
|
|
|
|
|
- v: {
|
|
|
- min: 0,
|
|
|
- max: Math.PI * 2,
|
|
|
- step: Math.PI / 20
|
|
|
- },
|
|
|
+ // 如果只有一个扇形，则不实现选中效果。
|
|
|
+ if (startRatio === 0 && endRatio === 1) {
|
|
|
+ isSelected = false;
|
|
|
+ }
|
|
|
|
|
|
- x: function(u, v) {
|
|
|
- if (u < startRadian) {
|
|
|
- return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- }
|
|
|
- if (u > endRadian) {
|
|
|
- return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- }
|
|
|
- return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- },
|
|
|
+ // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
|
|
+ k = typeof k !== 'undefined' ? k : 1 / 3;
|
|
|
|
|
|
- y: function(u, v) {
|
|
|
- if (u < startRadian) {
|
|
|
- return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- }
|
|
|
- if (u > endRadian) {
|
|
|
- return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- }
|
|
|
- return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
- },
|
|
|
+ // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
|
|
+ let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
|
|
+ let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
|
|
|
|
|
- z: function(u, v) {
|
|
|
- if (u < -Math.PI * 0.5) {
|
|
|
- return Math.sin(u);
|
|
|
- }
|
|
|
- if (u > Math.PI * 2.5) {
|
|
|
- return Math.sin(u);
|
|
|
- }
|
|
|
- return Math.sin(v) > 0 ? 1 : -1;
|
|
|
- }
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- // 生成模拟 3D 饼图的配置项
|
|
|
- function getPie3D(pieData, internalDiameterRatio) {
|
|
|
-
|
|
|
- let series = [];
|
|
|
- let sumValue = 0;
|
|
|
- let startValue = 0;
|
|
|
- let endValue = 0;
|
|
|
- let legendData = [];
|
|
|
- let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
|
|
-
|
|
|
- // 为每一个饼图数据，生成一个 series-surface 配置
|
|
|
- for (let i = 0; i < pieData.length; i++) {
|
|
|
-
|
|
|
- sumValue += pieData[i].value;
|
|
|
-
|
|
|
- let seriesItem = {
|
|
|
- name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
|
|
- type: 'surface',
|
|
|
- parametric: true,
|
|
|
- wireframe: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- pieData: pieData[i],
|
|
|
- pieStatus: {
|
|
|
- selected: false,
|
|
|
- hovered: false,
|
|
|
- k: k
|
|
|
- }
|
|
|
- };
|
|
|
+ // 计算高亮效果的放大比例（未高亮，则比例为 1）
|
|
|
+ let hoverRate = isHovered ? 1.05 : 1;
|
|
|
|
|
|
- if (typeof pieData[i].itemStyle != 'undefined') {
|
|
|
+ // 返回曲面参数方程
|
|
|
+ return {
|
|
|
|
|
|
- let itemStyle = {};
|
|
|
+ u: {
|
|
|
+ min: -Math.PI,
|
|
|
+ max: Math.PI * 3,
|
|
|
+ step: Math.PI / 32
|
|
|
+ },
|
|
|
|
|
|
- typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
|
|
|
- typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
|
|
|
+ v: {
|
|
|
+ min: 0,
|
|
|
+ max: Math.PI * 2,
|
|
|
+ step: Math.PI / 20
|
|
|
+ },
|
|
|
|
|
|
- seriesItem.itemStyle = itemStyle;
|
|
|
- }
|
|
|
- series.push(seriesItem);
|
|
|
- }
|
|
|
+ x: function(u, v) {
|
|
|
+ if (u < startRadian) {
|
|
|
+ return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ }
|
|
|
+ if (u > endRadian) {
|
|
|
+ return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ }
|
|
|
+ return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ },
|
|
|
|
|
|
- // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
|
|
- // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
|
|
- for (let i = 0; i < series.length; i++) {
|
|
|
- endValue = startValue + series[i].pieData.value;
|
|
|
- console.log(series[i]);
|
|
|
- series[i].pieData.startRatio = startValue / sumValue;
|
|
|
- series[i].pieData.endRatio = endValue / sumValue;
|
|
|
- series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
|
|
|
+ y: function(u, v) {
|
|
|
+ if (u < startRadian) {
|
|
|
+ return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ }
|
|
|
+ if (u > endRadian) {
|
|
|
+ return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ }
|
|
|
+ return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
|
|
+ },
|
|
|
|
|
|
- startValue = endValue;
|
|
|
+ z: function(u, v) {
|
|
|
+ if (u < -Math.PI * 0.5) {
|
|
|
+ return Math.sin(u);
|
|
|
+ }
|
|
|
+ if (u > Math.PI * 2.5) {
|
|
|
+ return Math.sin(u);
|
|
|
+ }
|
|
|
+ return Math.sin(v) > 0 ? 1 : -1;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
|
|
|
- legendData.push(series[i].name);
|
|
|
- }
|
|
|
+ // 生成模拟 3D 饼图的配置项
|
|
|
+ function getPie3D(pieData, internalDiameterRatio) {
|
|
|
|
|
|
+ let series = [];
|
|
|
+ let sumValue = 0;
|
|
|
+ let startValue = 0;
|
|
|
+ let endValue = 0;
|
|
|
+ let legendData = [];
|
|
|
+ let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
|
|
|
|
|
+ // 为每一个饼图数据，生成一个 series-surface 配置
|
|
|
+ for (let i = 0; i < pieData.length; i++) {
|
|
|
|
|
|
- // 准备待返回的配置项，把准备好的 legendData、series 传入。
|
|
|
- let option = {
|
|
|
+ sumValue += pieData[i].value;
|
|
|
|
|
|
- tooltip: {
|
|
|
- backgroundColor: '#12DFE0',
|
|
|
- formatter: params => {
|
|
|
- if (params.seriesName !== 'mouseoutSeries') {
|
|
|
- // 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}%`;
|
|
|
- return `${params.seriesName}: ${option.series[params.seriesIndex].pieData.value}%`;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- xAxis3D: {
|
|
|
- min: -1,
|
|
|
- max: 1
|
|
|
- },
|
|
|
- yAxis3D: {
|
|
|
- min: -1,
|
|
|
- max: 1
|
|
|
- },
|
|
|
- zAxis3D: {
|
|
|
- min: -1,
|
|
|
- max: 1
|
|
|
- },
|
|
|
- grid3D: {
|
|
|
-
|
|
|
- show: false,
|
|
|
- boxHeight: 40,
|
|
|
- top: '-10%',
|
|
|
- // bottom: '80%',
|
|
|
- // environment: '../images/3d-bg.png', //aa背景色
|
|
|
-
|
|
|
- viewControl: {
|
|
|
- distance: 170, //aa距离
|
|
|
- alpha: 21, //aa角度
|
|
|
- beta: 10, //aa角度
|
|
|
- zoomSensitivity: false //是否开启缩放和平移
|
|
|
- },
|
|
|
- },
|
|
|
- series: series
|
|
|
- };
|
|
|
- return option;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // 传入数据生成 option
|
|
|
- var option = getPie3D([{
|
|
|
- name: '已处理率',
|
|
|
- value: 80,
|
|
|
- itemStyle: {
|
|
|
- opacity: 0.5,
|
|
|
- color: 'rgba(0,127,244,.8)',
|
|
|
- }
|
|
|
- }, {
|
|
|
- name: '未处理率',
|
|
|
- value: 20,
|
|
|
- itemStyle: {
|
|
|
- opacity: 0.5,
|
|
|
- color: 'rgba(209,126,23,.8)',
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ], 2);
|
|
|
+ let seriesItem = {
|
|
|
+ name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
|
|
+ type: 'surface',
|
|
|
+ parametric: true,
|
|
|
+ wireframe: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ pieData: pieData[i],
|
|
|
+ pieStatus: {
|
|
|
+ selected: false,
|
|
|
+ hovered: false,
|
|
|
+ k: k
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- // 把配置给实例对象
|
|
|
- myChart.setOption(option);
|
|
|
- window.addEventListener("resize", function() {
|
|
|
- myChart.resize();
|
|
|
- });
|
|
|
+ if (typeof pieData[i].itemStyle != 'undefined') {
|
|
|
|
|
|
-})();
|
|
|
+ let itemStyle = {};
|
|
|
|
|
|
+ typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
|
|
|
+ typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
|
|
|
|
|
|
-// 折线图定制 (数据离散率挖掘)
|
|
|
-(function() {
|
|
|
+ seriesItem.itemStyle = itemStyle;
|
|
|
+ }
|
|
|
+ series.push(seriesItem);
|
|
|
+ }
|
|
|
|
|
|
- var sortData = [{
|
|
|
- data: [
|
|
|
- [30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34],
|
|
|
- [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
|
|
|
- [400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
|
|
|
- ]
|
|
|
- }];
|
|
|
+ // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
|
|
+ // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
|
|
+ for (let i = 0; i < series.length; i++) {
|
|
|
+ endValue = startValue + series[i].pieData.value;
|
|
|
+ // console.log(series[i]);
|
|
|
+ series[i].pieData.startRatio = startValue / sumValue;
|
|
|
+ series[i].pieData.endRatio = endValue / sumValue;
|
|
|
+ series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
|
|
|
|
|
|
- var xData = function() {
|
|
|
- var data = [];
|
|
|
- for (var i = 1; i < 31; i++) {
|
|
|
- data.push(i);
|
|
|
- }
|
|
|
- return data;
|
|
|
- }();
|
|
|
+ startValue = endValue;
|
|
|
|
|
|
- // 1. 实例化对象
|
|
|
- var myChart = echarts.init(document.querySelector(".divergence .chart"));
|
|
|
- // 2.指定配置
|
|
|
- var option = {
|
|
|
+ legendData.push(series[i].name);
|
|
|
+ }
|
|
|
|
|
|
- color: [{
|
|
|
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#F9860C' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#fff' // 100% 处的颜色
|
|
|
- }],
|
|
|
|
|
|
- },
|
|
|
+ // 准备待返回的配置项，把准备好的 legendData、series 传入。
|
|
|
+ let option = {
|
|
|
|
|
|
- {
|
|
|
+ tooltip: {
|
|
|
+ backgroundColor: '#12DFE0',
|
|
|
+ formatter: params => {
|
|
|
+ if (params.seriesName !== 'mouseoutSeries') {
|
|
|
+ // 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}%`;
|
|
|
+ return `${params.seriesName}: ${option.series[params.seriesIndex].pieData.value}%`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ xAxis3D: {
|
|
|
+ min: -1,
|
|
|
+ max: 1
|
|
|
+ },
|
|
|
+ yAxis3D: {
|
|
|
+ min: -1,
|
|
|
+ max: 1
|
|
|
+ },
|
|
|
+ zAxis3D: {
|
|
|
+ min: -1,
|
|
|
+ max: 1
|
|
|
+ },
|
|
|
+ grid3D: {
|
|
|
+ show: false,
|
|
|
+ boxHeight: 40,
|
|
|
+ top: '-10%',
|
|
|
+ // bottom: '80%',
|
|
|
+ // environment: '../images/3d-bg.png', //aa背景色
|
|
|
+
|
|
|
+ viewControl: {
|
|
|
+ distance: 170, //aa距离
|
|
|
+ alpha: 21, //aa角度
|
|
|
+ beta: 60, //aa角度
|
|
|
+ zoomSensitivity: false //是否开启缩放和平移
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ return option;
|
|
|
+ }
|
|
|
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#07E1F1' // 0% 处的颜色
|
|
|
+ // 传入数据生成 option
|
|
|
+ var option = getPie3D([{
|
|
|
+ name: '已处理率',
|
|
|
+ value: data_statistics.treatment_rate,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.5,
|
|
|
+ color: 'rgba(0,127,244,.8)',
|
|
|
+ }
|
|
|
}, {
|
|
|
- offset: 1,
|
|
|
- color: '#0456CB' // 100% 处的颜色
|
|
|
- }],
|
|
|
+ name: '未处理率',
|
|
|
+ value: data_statistics.untreated_rate,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.5,
|
|
|
+ color: 'rgba(209,126,23,.8)',
|
|
|
+ }
|
|
|
+ }], 2);
|
|
|
|
|
|
- },
|
|
|
+ // 把配置给实例对象
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", function() {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
|
|
|
- {
|
|
|
+ })();
|
|
|
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#11F90C' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#3FC713' // 100% 处的颜色
|
|
|
- }],
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- ],
|
|
|
- // color: ["#FF9C00", "#0096FF", "#11F90C"], // 通过这个color修改两条线的颜色
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- textStyle: {
|
|
|
- align: 'left' //图例左对齐
|
|
|
- },
|
|
|
- backgroundColor: '#12DFE0',
|
|
|
- formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：2021年3月{b}日'
|
|
|
-
|
|
|
- },
|
|
|
- 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: "10%",
|
|
|
- show: true, // 显示边框
|
|
|
- borderWidth: '0', //去除边框
|
|
|
- containLabel: true // 包含刻度文字在内
|
|
|
- },
|
|
|
-
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- boundaryGap: false,
|
|
|
- data: xData,
|
|
|
- axisTick: {
|
|
|
- show: false // 去除刻度线
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: "#AADDFF" // 文本颜色
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(255,255,255,.3)'
|
|
|
+ // 折线图定制 (数据离散率挖掘)
|
|
|
+ (function() {
|
|
|
+
|
|
|
+ let dispersion_rate = result.RESULT[0].dispersion_rate;
|
|
|
+
|
|
|
+ // 结论数据渲染
|
|
|
+ var items = '';
|
|
|
+ var conclusion = dispersion_rate.conclusion
|
|
|
+ for (x in conclusion) {
|
|
|
+ xIndex = x.substr(x.length - 1, 1);
|
|
|
+ items += `<p>${xIndex}、${conclusion[x]}</p>`
|
|
|
}
|
|
|
- },
|
|
|
- splitNumber: 8,
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- splitArea: {
|
|
|
- show: true,
|
|
|
- areaStyle: {
|
|
|
- color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
|
|
|
+ $('.divergence .summaryDetail').html(items);
|
|
|
+
|
|
|
+ let a = [];
|
|
|
+ let b = [];
|
|
|
+ let c = [];
|
|
|
+ let hydraulic_pressure = dispersion_rate.hydraulic_pressure;
|
|
|
+ hydraulic_pressure.forEach(function(item, index) {
|
|
|
+ a.push(item.variance)
|
|
|
+ b.push(item.standard_deviation)
|
|
|
+ c.push(item.average_value)
|
|
|
+ });
|
|
|
+
|
|
|
+ var sortData = [{
|
|
|
+ data: [a, b, c]
|
|
|
+ }];
|
|
|
+
|
|
|
+ var xData = function() {
|
|
|
+ var data = [];
|
|
|
+ for (var i = 1; i < hydraulic_pressure.length + 1; i++) {
|
|
|
+ data.push(i);
|
|
|
+ }
|
|
|
+ return data;
|
|
|
+ }();
|
|
|
+
|
|
|
+ // 1. 实例化对象
|
|
|
+ var myChart = echarts.init(document.querySelector(".divergence .chart"));
|
|
|
+ // 2.指定配置
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ color: [{
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#F9860C' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#fff' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#07E1F1' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#0456CB' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#11F90C' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#3FC713' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ }
|
|
|
+
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ textStyle: {
|
|
|
+ align: 'left' //图例左对齐
|
|
|
+ },
|
|
|
+ backgroundColor: '#12DFE0',
|
|
|
+ formatter: '{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />时间：' + chooseTime + ''
|
|
|
+ },
|
|
|
+ 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: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(255,255,255,.3)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitNumber: 8,
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ // scale: true,
|
|
|
+ // min: 'dataMin',
|
|
|
+ type: "value",
|
|
|
+ axisTick: {
|
|
|
+ show: false // 去除刻度线
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false // 去除文本
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false // 去除轴线
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#012f4a" // 分割线颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ symbol: "none",
|
|
|
+ name: "方差",
|
|
|
+ type: "line",
|
|
|
+ data: a
|
|
|
+ },
|
|
|
+ {
|
|
|
+ symbol: "none",
|
|
|
+ name: "标准差",
|
|
|
+ type: "line",
|
|
|
+ data: b
|
|
|
+ }, {
|
|
|
+ symbol: "none",
|
|
|
+ name: "平均值",
|
|
|
+ type: "line",
|
|
|
+ data: c
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", function() {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ })();
|
|
|
+
|
|
|
+ // 渗漏隐藏排查
|
|
|
+ (function() {
|
|
|
+
|
|
|
+ let leakage_investigation = result.RESULT[0].leakage_investigation;
|
|
|
+
|
|
|
+ // 结论数据渲染
|
|
|
+ var items = '';
|
|
|
+ var conclusion = leakage_investigation.conclusion
|
|
|
+ for (x in conclusion) {
|
|
|
+ xIndex = x.substr(x.length - 1, 1);
|
|
|
+ items += `<p>${xIndex}、${conclusion[x]}</p>`
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- axisTick: {
|
|
|
- show: false // 去除刻度线
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false // 去除文本
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false // 去除轴线
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "#012f4a" // 分割线颜色
|
|
|
+ $('.hiddenCheck .summaryDetail').html(items);
|
|
|
+
|
|
|
+ let abnormal_pressure = [];
|
|
|
+ let location_description = [];
|
|
|
+ let start_pressure = [];
|
|
|
+ let end_pressure = [];
|
|
|
+ let leakage_data = leakage_investigation.leakage_data;
|
|
|
+ leakage_data.forEach(function(item, index) {
|
|
|
+
|
|
|
+ //异常值
|
|
|
+ abnormal_pressure.push(item.abnormal_pressure)
|
|
|
+
|
|
|
+ //楼层
|
|
|
+ location_description.push(item.location_description)
|
|
|
+
|
|
|
+ //开始值
|
|
|
+ start_pressure.push(item.start_pressure)
|
|
|
+
|
|
|
+ //结束值
|
|
|
+ end_pressure.push(item.end_pressure)
|
|
|
+ });
|
|
|
+
|
|
|
+ var xData = location_description;
|
|
|
+
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ var myChart = echarts.init(document.querySelector(".bar.hiddenCheck .chart"));
|
|
|
+
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
|
|
|
+ tooltip: {
|
|
|
+ backgroundColor: '#12DFE0',
|
|
|
+ //提示框组件
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function(params) {
|
|
|
+ // console.log(params)
|
|
|
+ var res = '位置：' + params[0].axisValue + '<br />异常水压值 ：' + abnormal_pressure[params[0].dataIndex];
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ fontStyle: 'normal',
|
|
|
+ fontFamily: '微软雅黑',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '0',
|
|
|
+ right: '0',
|
|
|
+ bottom: '40',
|
|
|
+ top: '0',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+
|
|
|
+ //添加横线滚动条
|
|
|
+ dataZoom: {
|
|
|
+ start: 0, //默认为0
|
|
|
+ end: 100 - 1500 / 12, //默认为100
|
|
|
+ type: 'slider',
|
|
|
+ show: xData.length > 4 ? true : false,
|
|
|
+ xAxisIndex: [0],
|
|
|
+ handleSize: 0, //滑动条的 左右2个滑动条的大小
|
|
|
+ height: 4, //组件高度
|
|
|
+ left: 20, //左边的距离
|
|
|
+ right: 20, //右边的距离
|
|
|
+ bottom: 20, //右边的距离
|
|
|
+ handleColor: '#CBBCDB', //h滑动图标的颜色
|
|
|
+ handleStyle: {
|
|
|
+ borderColor: "#CBBCDB",
|
|
|
+ borderWidth: "1",
|
|
|
+ shadowBlur: 2,
|
|
|
+ background: "#CBBCDB",
|
|
|
+ shadowColor: "#CBBCDB",
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ },
|
|
|
+
|
|
|
+ backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
|
|
|
+ showDataShadow: false, //是否显示数据阴影 默认auto
|
|
|
+ // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
|
|
+ filterMode: 'filter',
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ // boundaryGap: true,//坐标轴两边留白
|
|
|
+ data: xData,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ // rotate: 340,
|
|
|
+ // formatter: function(val) {
|
|
|
+ // return val.split("").join("\n");
|
|
|
+ // }, //横轴信息文字竖直显示
|
|
|
+ textStyle: {
|
|
|
+ color: '#AADDFF',
|
|
|
+ fontStyle: 'normal',
|
|
|
+ fontFamily: '微软雅黑',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ axisTick: {
|
|
|
+ //坐标轴刻度相关设置。
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ //坐标轴轴线相关设置
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ //坐标轴在 grid 区域中的分隔线。
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ 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>`
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- symbol: "none",
|
|
|
- name: "方差",
|
|
|
- type: "line",
|
|
|
- data: sortData[0].data[0]
|
|
|
- },
|
|
|
- {
|
|
|
- symbol: "none",
|
|
|
- name: "标准差",
|
|
|
- type: "line",
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- data: sortData[0].data[1]
|
|
|
- }, {
|
|
|
- symbol: "none",
|
|
|
- name: "平均值",
|
|
|
- type: "line",
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- data: sortData[0].data[2]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- myChart.setOption(option);
|
|
|
- window.addEventListener("resize", function() {
|
|
|
- myChart.resize();
|
|
|
- });
|
|
|
-})();
|
|
|
-
|
|
|
-// 渗漏隐藏排查
|
|
|
-(function() {
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- var myChart = echarts.init(document.querySelector(".bar.hiddenCheck .chart"));
|
|
|
- var xData = ['三到四层', '四到五层', '七到八层', '八到九层', '九到十层', '三到四层', '四到五层', '七到八层', '八到九层', '九到十层', '三到四层', '四到五层', '七到八层', '八到九层'];
|
|
|
-
|
|
|
- var option = {
|
|
|
- backgroundColor: 'transparent',
|
|
|
- color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
|
|
|
- tooltip: {
|
|
|
- backgroundColor: '#12DFE0',
|
|
|
- //提示框组件
|
|
|
- trigger: 'axis',
|
|
|
- formatter: '{a0}: {c0}<br />{a1}: {c1}<br />楼层：{b}<br />时间：2021年3月',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
- },
|
|
|
- textStyle: {
|
|
|
- fontStyle: 'normal',
|
|
|
- fontFamily: '微软雅黑',
|
|
|
- },
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '0',
|
|
|
- right: '0',
|
|
|
- bottom: '40',
|
|
|
- top: '0',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- legend: {
|
|
|
- // 如果series 对象有name 值，则 legend可以不用写data
|
|
|
- itemGap: 20,
|
|
|
- itemHeight: 2,
|
|
|
- itemWidth: 15,
|
|
|
- icon: 'rect',
|
|
|
- textStyle: {
|
|
|
- color: "#fff"
|
|
|
- },
|
|
|
- top: "bottom",
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- //添加横线滚动条
|
|
|
- dataZoom: {
|
|
|
- start: 0, //默认为0
|
|
|
- end: 100 - 1500 / 18, //默认为100
|
|
|
- type: 'slider',
|
|
|
- show: xData.length > 4 ? true : false,
|
|
|
- xAxisIndex: [0],
|
|
|
- handleSize: 0, //滑动条的 左右2个滑动条的大小
|
|
|
- height: 4, //组件高度
|
|
|
- left: 20, //左边的距离
|
|
|
- right: 20, //右边的距离
|
|
|
- bottom: 30, //右边的距离
|
|
|
- handleColor: '#CBBCDB', //h滑动图标的颜色
|
|
|
- handleStyle: {
|
|
|
- borderColor: "#CBBCDB",
|
|
|
- borderWidth: "1",
|
|
|
- shadowBlur: 2,
|
|
|
- background: "#CBBCDB",
|
|
|
- shadowColor: "#CBBCDB",
|
|
|
- },
|
|
|
- textStyle: {
|
|
|
- color: "#fff"
|
|
|
- },
|
|
|
-
|
|
|
- backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
|
|
|
- showDataShadow: false, //是否显示数据阴影 默认auto
|
|
|
- // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
|
|
- filterMode: 'filter',
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- xAxis: [{
|
|
|
- type: 'category',
|
|
|
- // boundaryGap: true,//坐标轴两边留白
|
|
|
- data: xData,
|
|
|
- axisLabel: {
|
|
|
- interval: 0,
|
|
|
- // rotate: 340,
|
|
|
- // formatter: function(val) {
|
|
|
- // return val.split("").join("\n");
|
|
|
- // }, //横轴信息文字竖直显示
|
|
|
- textStyle: {
|
|
|
- color: '#AADDFF',
|
|
|
- fontStyle: 'normal',
|
|
|
- fontFamily: '微软雅黑',
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- axisTick: {
|
|
|
- //坐标轴刻度相关设置。
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- //坐标轴轴线相关设置
|
|
|
-
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- //坐标轴在 grid 区域中的分隔线。
|
|
|
- show: false,
|
|
|
- },
|
|
|
- }, ],
|
|
|
- yAxis: [{
|
|
|
- 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: [400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31],
|
|
|
- barMaxWidth: '11',
|
|
|
- itemStyle: {
|
|
|
- borderColor: "#0096FF",
|
|
|
- },
|
|
|
- barGap: '50%',
|
|
|
- },
|
|
|
- {
|
|
|
- name: '实际',
|
|
|
- type: 'bar',
|
|
|
- data: [500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36],
|
|
|
- barMaxWidth: '11',
|
|
|
- itemStyle: {
|
|
|
- borderColor: "#FF9C00",
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- ],
|
|
|
- };
|
|
|
-
|
|
|
- // 使用刚指定的配置项和数据显示图表。
|
|
|
- myChart.setOption(option);
|
|
|
- window.addEventListener("resize", function() {
|
|
|
- myChart.resize();
|
|
|
- });
|
|
|
-})();
|
|
|
-
|
|
|
-// 折线图定制 (跨设备数据关联)
|
|
|
-(function() {
|
|
|
-
|
|
|
- var sortData = [{
|
|
|
- sortName: "喷淋末端与水泵启停关联",
|
|
|
- data: [
|
|
|
- // 两个数组是因为有两条线
|
|
|
- [24, 52, 60, 70, 80, 30, 95, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
|
|
|
- [40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 70, 80, 75, 70, 65, 60, 55, 50, 45, 40, ]
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- sortName: "试验消火栓与屋顶水箱液位关联",
|
|
|
- data: [
|
|
|
- // 两个数组是因为有两条线
|
|
|
- [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
|
|
|
- [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ]
|
|
|
- ]
|
|
|
- }
|
|
|
- ];
|
|
|
+ $('.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 < 31; i++) {
|
|
|
- data.push(i);
|
|
|
- }
|
|
|
- return data;
|
|
|
- }();
|
|
|
-
|
|
|
- // 1. 实例化对象
|
|
|
- var myChart = echarts.init(document.querySelector(".oldAnalysis .chart"));
|
|
|
- // 2.指定配置
|
|
|
- var option = {
|
|
|
-
|
|
|
- color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- textStyle: {
|
|
|
- align: 'left' //图例左对齐
|
|
|
- },
|
|
|
- backgroundColor: '#12DFE0',
|
|
|
- formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间：2021年3月{b}日'
|
|
|
- },
|
|
|
- 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: {
|
|
|
- color: "#012f4a" // 分割线颜色
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- symbol: "none",
|
|
|
- name: "水泵启动",
|
|
|
- type: "line",
|
|
|
- smooth: true, // true 可以让我们的折线显示带有弧度
|
|
|
- areaStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 1, [{
|
|
|
- offset: 0,
|
|
|
- color: "rgba(255,156,0, 0.4)"
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(255,156,0, 0.3)"
|
|
|
- }
|
|
|
- ],
|
|
|
- false
|
|
|
- ),
|
|
|
- shadowColor: "rgba(0, 0, 0, 0.1)"
|
|
|
+ var xData = function() {
|
|
|
+ var data = [];
|
|
|
+ for (var i = 1; i < water_associated_data.length + 1; i++) {
|
|
|
+ data.push(i);
|
|
|
}
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- data: sortData[0].data[0]
|
|
|
- },
|
|
|
- {
|
|
|
- symbol: "none",
|
|
|
- name: "水泵停止",
|
|
|
- type: "line",
|
|
|
- smooth: true,
|
|
|
- areaStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 1, [{
|
|
|
- offset: 0,
|
|
|
- color: "rgba(0,150,255,0.5)"
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(0,150,255, 0.1)"
|
|
|
+ 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: {
|
|
|
+ color: "#012f4a" // 分割线颜色
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ symbol: "none",
|
|
|
+ name: "喷淋末端",
|
|
|
+ type: "line",
|
|
|
+ smooth: true, // true 可以让我们的折线显示带有弧度
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(255,156,0, 0.4)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: "rgba(255,156,0, 0.3)"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.1)"
|
|
|
}
|
|
|
- ],
|
|
|
- false
|
|
|
- ),
|
|
|
- shadowColor: "rgba(0, 0, 0, 0.1)"
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- data: sortData[0].data[1]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- myChart.setOption(option);
|
|
|
- window.addEventListener("resize", function() {
|
|
|
- myChart.resize();
|
|
|
- });
|
|
|
-
|
|
|
- // 点击切换效果
|
|
|
- $(".oldAnalysis .tab-line").on("click", "a", function() {
|
|
|
- $(this).addClass('active').siblings().removeClass('active')
|
|
|
- var obj = sortData[$(this).index()];
|
|
|
- option.series[0].data = obj.data[0];
|
|
|
- option.series[1].data = obj.data[1];
|
|
|
-
|
|
|
- // 重新渲染
|
|
|
- myChart.setOption(option);
|
|
|
-
|
|
|
- });
|
|
|
-})();
|
|
|
-
|
|
|
-
|
|
|
-// 折线图定制 (数据波动关联)
|
|
|
-(function() {
|
|
|
-
|
|
|
- var sortData = [{
|
|
|
- data: [
|
|
|
- [30, 70, 100, 120, 130, 190, 200, 230, 120, 100, 90, 80, 59, 30],
|
|
|
- ]
|
|
|
- }];
|
|
|
-
|
|
|
- var xData = ['一到二层', '二到三层', '三到四层', '四到五层', '五到六层', '六到七层', '七到八层', '八到九层', '九到十层', '十到十一层', '十一到十二层', '十二到十三层']
|
|
|
- // 1. 实例化对象
|
|
|
- var myChart = echarts.init(document.querySelector(".hotAnalysis .chart"));
|
|
|
- // 2.指定配置
|
|
|
- var option = {
|
|
|
-
|
|
|
- color: ["#FE92B3"], // 通过这个color修改三条线的颜色
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- textStyle: {
|
|
|
- align: 'left' //图例左对齐
|
|
|
- },
|
|
|
- backgroundColor: '#12DFE0',
|
|
|
- formatter: '{a0}: {c0}<br />楼层：{b}<br />时间：2021年3月'
|
|
|
-
|
|
|
- },
|
|
|
- legend: false,
|
|
|
- grid: {
|
|
|
- top: "0%",
|
|
|
- left: "1%",
|
|
|
- right: "1%",
|
|
|
- bottom: "15%",
|
|
|
- show: true, // 显示边框
|
|
|
- borderWidth: '0', //去除边框
|
|
|
- containLabel: false, // 不包含刻度文字在内
|
|
|
- },
|
|
|
-
|
|
|
- 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: {
|
|
|
- color: "#012f4a" // 分割线颜色
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- symbol: "none",
|
|
|
- name: "异常水压值",
|
|
|
- type: "line",
|
|
|
- smooth: true,
|
|
|
- areaStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 0,
|
|
|
- 1, [{
|
|
|
- offset: 0,
|
|
|
- color: "rgba(255,147,180,.6)"
|
|
|
},
|
|
|
- {
|
|
|
- offset: 0.8,
|
|
|
- color: "rgba(255,147,180, 0.4)"
|
|
|
- }
|
|
|
- ],
|
|
|
- false
|
|
|
- ),
|
|
|
+
|
|
|
+
|
|
|
+ data: sortData[0].data[0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ symbol: "none",
|
|
|
+ name: "消防栓",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(0,150,255,0.5)"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: "rgba(0,150,255, 0.1)"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.1)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ data: sortData[0].data[1]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", function() {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 点击切换效果
|
|
|
+ $(".device_association .tab-line").on("click", "a", function() {
|
|
|
+ $(this).addClass('active').siblings().removeClass('active')
|
|
|
+ var obj = sortData[$(this).index()];
|
|
|
+ option.series[0].data = obj.data[0];
|
|
|
+ option.series[1].data = obj.data[1];
|
|
|
+
|
|
|
+ // 重新渲染
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ });
|
|
|
+ })();
|
|
|
+
|
|
|
+ // 折线图定制 (数据波动关联)
|
|
|
+ (function() {
|
|
|
+
|
|
|
+ let data_fluctuation = result.RESULT[0].data_fluctuation;
|
|
|
+
|
|
|
+ // 结论数据渲染
|
|
|
+ var items = '';
|
|
|
+ var conclusion = data_fluctuation.conclusion
|
|
|
+ for (x in conclusion) {
|
|
|
+ xIndex = x.substr(x.length - 1, 1);
|
|
|
+ items += `<p>${xIndex}、${conclusion[x]}</p>`
|
|
|
}
|
|
|
- },
|
|
|
+ $('.data_fluctuation .summaryDetail').html(items);
|
|
|
+
|
|
|
+ let position = [];
|
|
|
+ let before_fluctuation = [];
|
|
|
+ let after_fluctuation = [];
|
|
|
+ let volatility_data = data_fluctuation.volatility_data;
|
|
|
+ volatility_data.forEach(function(item, index) {
|
|
|
+
|
|
|
+ //楼层
|
|
|
+ position.push(item.position)
|
|
|
+
|
|
|
+ //开始值
|
|
|
+ before_fluctuation.push(item.before_fluctuation)
|
|
|
+
|
|
|
+ //结束值
|
|
|
+ after_fluctuation.push(item.after_fluctuation)
|
|
|
+ });
|
|
|
+ // 1. 实例化对象
|
|
|
+ var myChart = echarts.init(document.querySelector(".data_fluctuation .chart"));
|
|
|
+ var xData = position;
|
|
|
+
|
|
|
+ // 2.指定配置
|
|
|
+ var option = {
|
|
|
+ backgroundColor: 'transparent',
|
|
|
+ color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'],
|
|
|
+ tooltip: {
|
|
|
+ backgroundColor: '#12DFE0',
|
|
|
+ //提示框组件
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: '{a0}: {c0}<br />{a1}: {c1}<br />时间：' + chooseTime + '',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ fontStyle: 'normal',
|
|
|
+ fontFamily: '微软雅黑',
|
|
|
+ align: 'left' //图例左对齐
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '0',
|
|
|
+ right: '0',
|
|
|
+ bottom: '40',
|
|
|
+ top: '0',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+
|
|
|
+ //添加横线滚动条
|
|
|
+ dataZoom: {
|
|
|
+ start: 0, //默认为0
|
|
|
+ end: 100 - 1500 / 8, //默认为100
|
|
|
+ type: 'slider',
|
|
|
+ show: xData.length > 5 ? true : false,
|
|
|
+ xAxisIndex: [0],
|
|
|
+ handleSize: 0, //滑动条的 左右2个滑动条的大小
|
|
|
+ height: 4, //组件高度
|
|
|
+ left: 20, //左边的距离
|
|
|
+ right: 20, //右边的距离
|
|
|
+ bottom: 20, //右边的距离
|
|
|
+ handleColor: '#CBBCDB', //h滑动图标的颜色
|
|
|
+ handleStyle: {
|
|
|
+ borderColor: "#CBBCDB",
|
|
|
+ borderWidth: "1",
|
|
|
+ shadowBlur: 2,
|
|
|
+ background: "#CBBCDB",
|
|
|
+ shadowColor: "#CBBCDB",
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff"
|
|
|
+ },
|
|
|
+
|
|
|
+ backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色
|
|
|
+ showDataShadow: false, //是否显示数据阴影 默认auto
|
|
|
+ // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
|
|
|
+ filterMode: 'filter',
|
|
|
+ },
|
|
|
+
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ // boundaryGap: true,//坐标轴两边留白
|
|
|
+ data: xData,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ // rotate: 340,
|
|
|
+ // formatter: function(val) {
|
|
|
+ // return val.split("").join("\n");
|
|
|
+ // }, //横轴信息文字竖直显示
|
|
|
+ textStyle: {
|
|
|
+ color: '#AADDFF',
|
|
|
+ fontStyle: 'normal',
|
|
|
+ fontFamily: '微软雅黑',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ axisTick: {
|
|
|
+ //坐标轴刻度相关设置。
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ //坐标轴轴线相关设置
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ //坐标轴在 grid 区域中的分隔线。
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ }, ],
|
|
|
+ yAxis: [{
|
|
|
+ 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: before_fluctuation,
|
|
|
+ barMaxWidth: '11',
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#0096FF",
|
|
|
+ },
|
|
|
+ barGap: '50%',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '波动后水压值',
|
|
|
+ type: 'bar',
|
|
|
+ data: after_fluctuation,
|
|
|
+ barMaxWidth: '11',
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: "#FF9C00",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", function() {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+
|
|
|
|
|
|
- data: sortData[0].data[0]
|
|
|
- }]
|
|
|
- };
|
|
|
+ })();
|
|
|
+
|
|
|
+ } else {
|
|
|
+ alert('暂无数据')
|
|
|
+ }
|
|
|
|
|
|
- myChart.setOption(option);
|
|
|
- window.addEventListener("resize", function() {
|
|
|
- myChart.resize();
|
|
|
- });
|
|
|
+ }, function(errorMsg) {
|
|
|
+ alert("请求数据失败!");
|
|
|
+ }, 2)
|
|
|
+};
|
|
|
|
|
|
+function getSearchParamObj() {
|
|
|
+ let queryParam = {};
|
|
|
+ let buildingVal = $('#building').val();
|
|
|
+ let chooseTime = $('#chooseTime').val();
|
|
|
+ queryParam.company_code = buildingVal;
|
|
|
+ // queryParam.generation_time = chooseTime;
|
|
|
+ return queryParam;
|
|
|
|
|
|
-})();
|
|
|
+}
|
ming