大屏逻辑更新、首页更新、
This commit is contained in:
Rue Ji
@ -246,17 +246,19 @@ pageEncoding="UTF-8"%>
|
||||
// 柱状图数据
|
||||
barCharts: {
|
||||
bar5: [
|
||||
3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000,
|
||||
1000, 500, 2563, 4000
|
||||
// 3000, 4500, 1500, 5000, 23000, 1500, 15000, 3000, 4000, 5000, 2000,
|
||||
// 1000, 500, 2563, 4000
|
||||
],
|
||||
bar6: [
|
||||
2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500,
|
||||
800, 400, 2000, 3000
|
||||
// 2000, 3000, 1000, 4000, 18000, 1000, 12000, 2000, 3000, 4000, 1500,
|
||||
// 800, 400, 2000, 3000
|
||||
]
|
||||
},
|
||||
|
||||
// 柱状图X轴数据
|
||||
barXAxis: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15"]
|
||||
barXAxis: [
|
||||
// "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15"
|
||||
]
|
||||
};
|
||||
|
||||
// 更新统计卡片显示
|
||||
@ -338,6 +340,79 @@ pageEncoding="UTF-8"%>
|
||||
}
|
||||
});
|
||||
|
||||
// 获取管道统计数据
|
||||
function fetchPipelineStats() {
|
||||
$.ajax({
|
||||
url: "<%=request.getContextPath()%>/pipeline/pipelineData/getStatistics.do",
|
||||
type: "GET",
|
||||
dataType: "json",
|
||||
success: function(response) {
|
||||
console.log("管道统计数据:", response);
|
||||
if (response && response.success) {
|
||||
// 更新统计卡片
|
||||
$(".card-1").text(response.totalLength || 0);
|
||||
$(".card-2").text(response.totalCount || 0);
|
||||
$(".card-3").text(response.totalCount || 0);
|
||||
|
||||
// 更新仪表盘数据
|
||||
pageData.gaugeCharts.gauge3 = response.totalLength || 0;
|
||||
pageData.gaugeCharts.gauge4 = response.totalLength || 0;
|
||||
|
||||
// 更新饼图数据 - 材质长度比例
|
||||
if (response.materialLengthRatio && response.materialLengthRatio.length > 0) {
|
||||
pageData.pieChart1 = response.materialLengthRatio.map(function(item) {
|
||||
return {
|
||||
name: item.material,
|
||||
value: item.length
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 更新饼图数据 - 材质数量比例
|
||||
if (response.materialCountRatio && response.materialCountRatio.length > 0) {
|
||||
pageData.pieChart2 = response.materialCountRatio.map(function(item) {
|
||||
return {
|
||||
name: item.material,
|
||||
value: item.count
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 更新柱状图数据 - 管径长度分布
|
||||
if (response.diameterLengthRatio && response.diameterLengthRatio.length > 0) {
|
||||
// 取前15个数据
|
||||
var topData = response.diameterLengthRatio.slice(0, 15);
|
||||
pageData.barCharts.bar5 = topData.map(function(item) {
|
||||
return item.length;
|
||||
});
|
||||
pageData.barXAxis = topData.map(function(item) {
|
||||
return item.diameter;
|
||||
});
|
||||
}
|
||||
|
||||
// 更新柱状图数据 - 管径数量分布
|
||||
if (response.diameterCountRatio && response.diameterCountRatio.length > 0) {
|
||||
var topData = response.diameterCountRatio.slice(0, 15);
|
||||
pageData.barCharts.bar6 = topData.map(function(item) {
|
||||
return item.count;
|
||||
});
|
||||
}
|
||||
|
||||
// 重新渲染图表
|
||||
initPieChart();
|
||||
initPieChart2();
|
||||
initGaugeChart("gauge-chart-content-3", pageData.gaugeCharts.gauge3);
|
||||
initGaugeChart("gauge-chart-content-4", pageData.gaugeCharts.gauge4);
|
||||
initBarChart("bar-chart-content-5", pageData.barCharts.bar5);
|
||||
initBarChart("bar-chart-content-6", pageData.barCharts.bar6);
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error("获取管道统计数据失败:", error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
// 初始化统计数据
|
||||
updateStatCards();
|
||||
@ -349,6 +424,9 @@ pageEncoding="UTF-8"%>
|
||||
initGaugeChart("gauge-chart-content-4", pageData.gaugeCharts.gauge4);
|
||||
initBarChart("bar-chart-content-5", pageData.barCharts.bar5);
|
||||
initBarChart("bar-chart-content-6", pageData.barCharts.bar6);
|
||||
|
||||
// 获取管道统计数据
|
||||
fetchPipelineStats();
|
||||
|
||||
// Double click to toggle fullscreen
|
||||
$("body").on("dblclick", function () {
|
||||
@ -376,6 +454,10 @@ pageEncoding="UTF-8"%>
|
||||
"#915eff",
|
||||
"#ff7f00",
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}: {c}m ({d}%)"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "管线类型统计",
|
||||
@ -386,17 +468,20 @@ pageEncoding="UTF-8"%>
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b}",
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
formatter: "{b}\n{d}%",
|
||||
fontSize: 32,
|
||||
lineHeight: 40,
|
||||
align: "left",
|
||||
color: "#fff",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20,
|
||||
length2: 30,
|
||||
length: 30,
|
||||
length2: 40,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
data: pageData.pieChart1,
|
||||
@ -426,6 +511,10 @@ pageEncoding="UTF-8"%>
|
||||
"#915eff",
|
||||
"#ff7f00",
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}: {c}条 ({d}%)"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "管线类型统计2",
|
||||
@ -436,17 +525,20 @@ pageEncoding="UTF-8"%>
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b}",
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
formatter: "{b}\n{d}%",
|
||||
fontSize: 32,
|
||||
lineHeight: 40,
|
||||
align: "left",
|
||||
color: "#fff",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 20,
|
||||
length2: 30,
|
||||
length: 30,
|
||||
length2: 40,
|
||||
lineStyle: {
|
||||
type: "solid",
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
data: pageData.pieChart2,
|
||||
@ -500,8 +592,8 @@ pageEncoding="UTF-8"%>
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#00d4ff",
|
||||
fontSize: 14,
|
||||
distance: -60,
|
||||
fontSize: 20,
|
||||
distance: -80,
|
||||
formatter: function (value) {
|
||||
return value;
|
||||
},
|
||||
@ -567,7 +659,7 @@ pageEncoding="UTF-8"%>
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#B7C9E2",
|
||||
fontSize: 25,
|
||||
fontSize: 40,
|
||||
},
|
||||
// axisTick: {
|
||||
// show: false
|
||||
@ -575,27 +667,18 @@ pageEncoding="UTF-8"%>
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "长度(m)",
|
||||
// name: "长度(m)",
|
||||
// nameTextStyle: {
|
||||
// color: '#fff',
|
||||
// padding: [0, 0, 0, 20]
|
||||
// },
|
||||
// axisLabel: {
|
||||
// color: '#fff',
|
||||
// fontSize: 14
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: 'rgba(255, 255, 255, 0.1)'
|
||||
// }
|
||||
// color: '#B7C9E2',
|
||||
// padding: [0, 0, 40, 2300],
|
||||
// fontSize: 40,
|
||||
// },
|
||||
splitNumber: 5,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: "#B7C9E2",
|
||||
fontSize: 18,
|
||||
fontSize: 40,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -610,11 +693,6 @@ pageEncoding="UTF-8"%>
|
||||
data: data,
|
||||
type: "bar",
|
||||
barWidth: "40%",
|
||||
// itemStyle: {
|
||||
// color: '#FF9900',
|
||||
// borderColor: '#FF9900',
|
||||
// borderWidth: 1
|
||||
// },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
@ -633,46 +711,7 @@ pageEncoding="UTF-8"%>
|
||||
]),
|
||||
},
|
||||
},
|
||||
// markPoint: {
|
||||
// symbol: 'pin',
|
||||
// symbolSize: 50,
|
||||
// label: {
|
||||
// show: true,
|
||||
// color: '#fff',
|
||||
// fontSize: 12
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: '#FF9900'
|
||||
// },
|
||||
// data: [
|
||||
// { type: 'max', name: 'Max' },
|
||||
// { type: 'min', name: 'Min' }
|
||||
// ]
|
||||
// },
|
||||
// markLine: {
|
||||
// symbol: 'none',
|
||||
// data: [
|
||||
// { yAxis: 2563.31, name: 'Average' }
|
||||
// ],
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'end',
|
||||
// formatter: '{c}',
|
||||
// color: '#FF9900'
|
||||
// },
|
||||
// lineStyle: {
|
||||
// type: 'dotted',
|
||||
// color: '#FF9900'
|
||||
// }
|
||||
// }
|
||||
},
|
||||
// {
|
||||
// type: 'bar',
|
||||
// barGap: '-100%',
|
||||
// data: (function(){ var yMax = 10000; var shadow=[]; for (var i=0;i<data.length;i++){shadow.push(yMax);} return shadow; })(),
|
||||
// itemStyle: { normal: { color: 'rgba(0,0,0,0.05)' } },
|
||||
// silent: true
|
||||
// }
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
||||
Reference in New Issue
Block a user