水厂大屏数据
This commit is contained in:
Rue Ji
@ -33,27 +33,25 @@
|
||||
/* Specific Position for Data 6040 */
|
||||
.slqs {
|
||||
position: absolute;
|
||||
width: 121px;
|
||||
width: 210px;
|
||||
height: 62px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-family: "Gilroy", "DIN Alternate", "Arial Narrow", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 50px;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
line-height: 62px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.slqs-jinri {
|
||||
.slqs-todayTotal {
|
||||
top: 335px;
|
||||
left: 209px;
|
||||
}
|
||||
.slqs-zuori {
|
||||
.slqs-yesterdayTotal {
|
||||
top: 335px;
|
||||
left: 592px;
|
||||
}
|
||||
.slqs-benyue {
|
||||
.slqs-monthTotal {
|
||||
top: 335px;
|
||||
left: 975px;
|
||||
left: 947px;
|
||||
}
|
||||
|
||||
.ncl-val {
|
||||
@ -208,6 +206,20 @@
|
||||
font-size: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.Middle2-value {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 31px;
|
||||
color: rgba(41, 241, 250, 1);
|
||||
font-weight: 500;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#D_YanYCORP {
|
||||
top: 190.5px;
|
||||
left: 2470px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -222,9 +234,9 @@
|
||||
<div class="screen-container">
|
||||
<div class="left">
|
||||
<div>
|
||||
<div class="slqs slqs-jinri">6040</div>
|
||||
<div class="slqs slqs-zuori">4197</div>
|
||||
<div class="slqs slqs-benyue">12356</div>
|
||||
<div class="slqs slqs-todayTotal">60400</div>
|
||||
<div class="slqs slqs-yesterdayTotal">4197</div>
|
||||
<div class="slqs slqs-monthTotal">12356</div>
|
||||
</div>
|
||||
|
||||
<!-- 七日水量 -->
|
||||
@ -333,12 +345,37 @@
|
||||
</div>
|
||||
|
||||
<div class="Middle2">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div>
|
||||
<span class="Middle2-value" id="D_YanYCORP"></span>
|
||||
<span class="Middle2-value" id="D_QueYCRJY1"></span>
|
||||
<span class="Middle2-value" id="D_HaoYCRJY"></span>
|
||||
<span class="Middle2-value" id="D_HaoYCRJY2"></span>
|
||||
<span class="Middle2-value" id="D_HaoYCWNND"></span>
|
||||
<span class="Middle2-value" id="D_MoCWNND"></span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="Middle2-value" id="D_BengZYW"></span>
|
||||
<span class="Middle2-value" id="D_TiSB101DL"></span>
|
||||
<span class="Middle2-value" id="D_TiSB102DL"></span>
|
||||
<span class="Middle2-value" id="D_TiSB103DL"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="Middle2-value" id="D_NingMSJYLL"></span>
|
||||
<span class="Middle2-value" id="D_YaLSQNLL"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="Middle2-value" id="D_NingMSCGYW"></span>
|
||||
<span class="Middle2-value" id="D_YaLSQNLL"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="Middle2-value" id="D_CiLSNJYLL"></span>
|
||||
<span class="Middle2-value" id="D_PACJYLL"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="Middle2-value" id="D_CiLSNCGYW"></span>
|
||||
<span class="Middle2-value" id="D_PACCGYW"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间图表 -->
|
||||
@ -368,9 +405,9 @@
|
||||
var pageData = {
|
||||
// 水量数据 (slqs)
|
||||
slqs: {
|
||||
jinri: 6040, // 今日水量
|
||||
zuori: 4197, // 昨日水量
|
||||
benyue: 12356 // 本月水量
|
||||
todayTotal: 6040, // 今日水量
|
||||
yesterdayTotal: 4197, // 昨日水量
|
||||
monthTotal: 12356 // 本月水量
|
||||
},
|
||||
|
||||
// 泥处理指标 (ncl)
|
||||
@ -419,9 +456,9 @@
|
||||
|
||||
// 更新水量显示
|
||||
function updateSlqs() {
|
||||
$(".slqs-jinri").text(pageData.slqs.jinri);
|
||||
$(".slqs-zuori").text(pageData.slqs.zuori);
|
||||
$(".slqs-benyue").text(pageData.slqs.benyue);
|
||||
$(".slqs-todayTotal").text(pageData.slqs.todayTotal);
|
||||
$(".slqs-yesterdayTotal").text(pageData.slqs.yesterdayTotal);
|
||||
$(".slqs-monthTotal").text(pageData.slqs.monthTotal);
|
||||
}
|
||||
|
||||
// 更新泥处理指标显示
|
||||
@ -464,7 +501,7 @@
|
||||
success: function(response) {
|
||||
// 假设接口返回的数据格式如下：
|
||||
// {
|
||||
// slqs: { jinri: xxx, zuori: xxx, benyue: xxx },
|
||||
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
|
||||
// ncl: { val1: xxx, val2: xxx, val3: xxx },
|
||||
// yaohao: { val1: xxx, val2: xxx, val3: xxx },
|
||||
// qualityTable: [...],
|
||||
@ -530,6 +567,96 @@
|
||||
}
|
||||
});
|
||||
|
||||
// 获取水量统计数据
|
||||
function fetchSlqsData() {
|
||||
$.ajax({
|
||||
url: '<%=request.getContextPath()%>/watervolume/getStatistics.do',
|
||||
type: 'GET',
|
||||
data: { companyKey: 'DEV067' },
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
console.log('水量统计数据:', response);
|
||||
if (response) {
|
||||
// 兼容不同的返回字段名
|
||||
pageData.slqs.todayTotal = response.todayTotal || 0;
|
||||
pageData.slqs.yesterdayTotal = response.yesterdayTotal || 0;
|
||||
pageData.slqs.monthTotal = response.monthTotal || 0;
|
||||
updateSlqs();
|
||||
|
||||
// 解析七日水量数据 sevenDaysTotal
|
||||
if (response.sevenDaysTotal && Array.isArray(response.sevenDaysTotal)) {
|
||||
var xAxis = [];
|
||||
var data = [];
|
||||
response.sevenDaysTotal.forEach(function(item) {
|
||||
// 日期格式: "2026-03-07" -> "03-07"
|
||||
var dateStr = item.date || '';
|
||||
if (dateStr.length >= 10) {
|
||||
xAxis.push(dateStr.substring(5)); // 取 "MM-DD" 部分
|
||||
} else {
|
||||
xAxis.push(dateStr);
|
||||
}
|
||||
// total 可能是字符串，转为数字
|
||||
data.push(parseFloat(item.total) || 0);
|
||||
});
|
||||
pageData.sevenDaysChart.xAxis = xAxis;
|
||||
pageData.sevenDaysChart.data = data;
|
||||
initSevenDaysChart(); // 重新渲染图表
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('获取水量统计数据失败:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 获取点位信息数据
|
||||
// mpcode: 点位编码
|
||||
// sdt: 开始时间 (可选，默认7天前)
|
||||
// edt: 结束时间 (可选，默认当前时间)
|
||||
// 返回: Promise对象
|
||||
function fetchPointData(mpcode, sdt, edt) {
|
||||
// 默认时间范围：近7天
|
||||
if (!edt) {
|
||||
var now = new Date();
|
||||
edt = formatDate(now);
|
||||
}
|
||||
if (!sdt) {
|
||||
var sevenDaysAgo = new Date();
|
||||
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
||||
sdt = formatDate(sevenDaysAgo);
|
||||
}
|
||||
|
||||
return new Promise(function(resolve, reject) {
|
||||
$.ajax({
|
||||
url: '<%=request.getContextPath()%>/data/getDetailData.do',
|
||||
type: 'GET',
|
||||
data: {
|
||||
mpcode: mpcode,
|
||||
sdt: sdt,
|
||||
edt: edt
|
||||
},
|
||||
dataType: 'json',
|
||||
success: function(response) {
|
||||
console.log('点位数据[' + mpcode + ']:', response);
|
||||
resolve(response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('获取点位数据失败:', mpcode, error);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化日期为 YYYY-MM-DD 格式
|
||||
function formatDate(date) {
|
||||
var year = date.getFullYear();
|
||||
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
var day = date.getDate().toString().padStart(2, '0');
|
||||
return year + '-' + month + '-' + day;
|
||||
}
|
||||
|
||||
$(function () {
|
||||
// 初始化数据显示
|
||||
updateSlqs();
|
||||
@ -541,6 +668,43 @@
|
||||
initSevenDaysChart();
|
||||
initNclChart();
|
||||
initQualityChart();
|
||||
|
||||
// 页面加载后获取水量统计数据
|
||||
fetchSlqsData();
|
||||
|
||||
// 批量获取点位数据并更新显示
|
||||
var pointList = [
|
||||
'D_PACDSYH', 'D_YiSNDSYH', 'D_CiLSNDSYH',
|
||||
'D_YanYCORP',
|
||||
'D_QueYCRJY1',
|
||||
'D_HaoYCRJY',
|
||||
'D_HaoYCRJY2',
|
||||
'D_HaoYCWNND',
|
||||
'D_MoCWNND',
|
||||
'D_BengZYW',
|
||||
'D_TiSB101DL',
|
||||
'D_TiSB102DL',
|
||||
'D_TiSB103DL',
|
||||
'D_NingMSJYLL',
|
||||
'D_YaLSQNLL',
|
||||
'D_NingMSCGYW',
|
||||
'D_CiLSNJYLL',
|
||||
'D_PACJYLL',
|
||||
'D_CiLSNCGYW',
|
||||
'D_PACCGYW'
|
||||
];
|
||||
|
||||
pointList.forEach(function(mpcode) {
|
||||
fetchPointData(mpcode).then(function(res) {
|
||||
if (res && res[0] && res[0].data && res[0].data.length > 0) {
|
||||
var lastData = res[0].data[res[0].data.length - 1];
|
||||
var value = lastData[1]; // 取最后一个数据点的值
|
||||
$('#' + mpcode).text(value || 0);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
console.error('点位数据获取失败:', mpcode, error);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 七日水量图表
|
||||
@ -550,10 +714,34 @@
|
||||
var myChart = echarts.init(chartDom);
|
||||
var dataAxis = pageData.sevenDaysChart.xAxis;
|
||||
var data = pageData.sevenDaysChart.data;
|
||||
|
||||
// 根据数据动态计算Y轴最大值
|
||||
var yMax = 10000; // 默认值
|
||||
if (data && data.length > 0) {
|
||||
var dataMax = Math.max.apply(null, data);
|
||||
// 向上取整到合适的刻度（取最大值的1.2倍，然后向上取整到整万）
|
||||
yMax = Math.ceil(dataMax * 1.2 / 10000) * 10000;
|
||||
if (yMax < 10000) yMax = 10000; // 最小值1万
|
||||
}
|
||||
|
||||
var option = {
|
||||
backgroundColor: "transparent",
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
borderColor: "#46F2FF",
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 18
|
||||
},
|
||||
formatter: function(params) {
|
||||
var data = params[0];
|
||||
return data.name + '<br/>' + data.seriesName + ': ' + data.value.toLocaleString();
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 60,
|
||||
// left: 60,
|
||||
right: 40,
|
||||
top: 40,
|
||||
bottom: 40,
|
||||
@ -581,8 +769,8 @@
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
max: 10000,
|
||||
splitNumber: 5,
|
||||
max: yMax,
|
||||
splitNumber: 7,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
@ -601,7 +789,7 @@
|
||||
{
|
||||
name: "处理水量",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
barMaxWidth: 60,
|
||||
data: data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
@ -625,8 +813,8 @@
|
||||
{
|
||||
type: "bar",
|
||||
barGap: "-100%",
|
||||
barMaxWidth: 60,
|
||||
data: (function () {
|
||||
var yMax = 10000;
|
||||
var shadow = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
shadow.push(yMax);
|
||||
|
||||
@ -575,7 +575,7 @@ pageEncoding="UTF-8"%>
|
||||
areaName: item.company ? item.company.name || "" : "",
|
||||
processSectionName: item.processSection ? item.processSection.name || "" : "",
|
||||
permitNum: item.permitNum || "",
|
||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口 "DEV067"
|
||||
trade: item.trade || "",
|
||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||
indicator: dischargeValue > 8000 ? "超级" : "普通",
|
||||
@ -619,7 +619,7 @@ pageEncoding="UTF-8"%>
|
||||
function loadFlowData(ventNum, type) {
|
||||
if (!ventNum) {
|
||||
console.warn("[loadFlowData] ventNum 为空，无法加载流量数据");
|
||||
return Promise.resolve([]);
|
||||
return Promise.resolve({ times: [], values: [], name: '', unit: '' });
|
||||
}
|
||||
|
||||
var mpcode, days;
|
||||
@ -653,30 +653,45 @@ pageEncoding="UTF-8"%>
|
||||
dataList = JSON.parse(data);
|
||||
} catch (e) {
|
||||
console.error("[loadFlowData] 解析数据失败:", e);
|
||||
return [];
|
||||
return { times: [], values: [], name: '', unit: '' };
|
||||
}
|
||||
}
|
||||
|
||||
// 提取数值数组
|
||||
// 解析datalist数据用于图表展示
|
||||
// datalist格式: [{unit: "", data: [[时间, 值], ...], name: "xxx"}]
|
||||
var times = [];
|
||||
var values = [];
|
||||
if (Array.isArray(dataList)) {
|
||||
dataList.forEach(function (item) {
|
||||
// 假设返回数据格式为 [{time: xxx, value: xxx}, ...]
|
||||
// 或者 [value1, value2, ...]
|
||||
if (item.value !== undefined) {
|
||||
values.push(parseFloat(item.value) || 0);
|
||||
} else if (typeof item === 'number') {
|
||||
values.push(item);
|
||||
}
|
||||
});
|
||||
var seriesName = '';
|
||||
var unit = '';
|
||||
|
||||
if (Array.isArray(datalist) && datalist.length > 0) {
|
||||
var firstItem = datalist[0];
|
||||
seriesName = firstItem.name || '流量数据';
|
||||
unit = firstItem.unit || '';
|
||||
|
||||
if (Array.isArray(firstItem.data)) {
|
||||
firstItem.data.forEach(function (item) {
|
||||
if (Array.isArray(item) && item.length >= 2) {
|
||||
times.push(item[0]); // 时间
|
||||
values.push(parseFloat(item[1]) || 0); // 数值
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
console.log("[loadFlowData] 解析后数据条数:", values.length);
|
||||
return values;
|
||||
console.log("[loadFlowData] 解析后数据条数:", values.length, "时间点:", times.length);
|
||||
|
||||
// 返回包含时间轴和数值的对象
|
||||
return {
|
||||
times: times,
|
||||
values: values,
|
||||
name: seriesName,
|
||||
unit: unit
|
||||
};
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error("[loadFlowData] 请求失败:", mpcode, err);
|
||||
return [];
|
||||
return { times: [], values: [], name: '', unit: '' };
|
||||
});
|
||||
}
|
||||
|
||||
@ -696,10 +711,22 @@ pageEncoding="UTF-8"%>
|
||||
loadFlowData(enterprise.ventNum, 'cumulative')
|
||||
])
|
||||
.then(function (results) {
|
||||
enterprise.instantHistory = results[0].length > 0 ? results[0] : generateHistoryData(72); // 近3天小时数据
|
||||
enterprise.cumulativeHistory = results[1].length > 0 ? results[1] : generateHistoryData(14); // 近14天数据
|
||||
// results[0] 和 results[1] 现在是 {times, values, name, unit} 对象
|
||||
var instantData = results[0];
|
||||
var cumulativeData = results[1];
|
||||
|
||||
// 瞬时流量数据
|
||||
enterprise.instantHistory = (instantData && instantData.values && instantData.values.length > 0)
|
||||
? instantData
|
||||
: { times: [], values: [], name: '瞬时流量', unit: '' };
|
||||
|
||||
// 累计流量数据
|
||||
enterprise.cumulativeHistory = (cumulativeData && cumulativeData.values && cumulativeData.values.length > 0)
|
||||
? cumulativeData
|
||||
: { times: [], values: [], name: '累计流量', unit: '' };
|
||||
|
||||
console.log("[loadEnterpriseFlowData] 流量数据加载完成:", enterprise.name,
|
||||
"瞬时:", enterprise.instantHistory.length, "累计:", enterprise.cumulativeHistory.length);
|
||||
"瞬时:", enterprise.instantHistory.values.length, "累计:", enterprise.cumulativeHistory.values.length);
|
||||
return enterprise;
|
||||
});
|
||||
}
|
||||
@ -724,7 +751,7 @@ pageEncoding="UTF-8"%>
|
||||
if (!enterprises || enterprises.length === 0) {
|
||||
console.warn("企业数据为空，使用默认模拟数据");
|
||||
// enterprises = generateMockData();
|
||||
enterprises = []
|
||||
enterprises = [{}]
|
||||
}
|
||||
|
||||
allEnterprises = enterprises;
|
||||
@ -774,12 +801,15 @@ pageEncoding="UTF-8"%>
|
||||
}
|
||||
|
||||
function generateHistoryData(count) {
|
||||
var data = [];
|
||||
// for (var k = 0; k < count; k++) {
|
||||
// data.push(Math.floor(Math.random() * 500) + 50);
|
||||
// }
|
||||
console.log('======data', data)
|
||||
return data;
|
||||
// 返回与新数据格式兼容的对象
|
||||
var times = [];
|
||||
var values = [];
|
||||
for (var k = 0; k < count; k++) {
|
||||
times.push(k + "h");
|
||||
values.push(Math.floor(Math.random() * 500) + 50);
|
||||
}
|
||||
console.log('======generateHistoryData', count, '条');
|
||||
return { times: times, values: values, name: '模拟数据', unit: '' };
|
||||
}
|
||||
|
||||
function updateSortedData(enterprises) {
|
||||
@ -1030,17 +1060,51 @@ pageEncoding="UTF-8"%>
|
||||
ent.name;
|
||||
$("#modalTitle").text(title);
|
||||
|
||||
var xData, yData, color;
|
||||
var xData, yData, color, seriesName;
|
||||
if (type === "instant") {
|
||||
xData = [];
|
||||
for (var i = 0; i < 72; i++) xData.push(i + "h");
|
||||
yData = ent.instantHistory;
|
||||
// 新数据格式: {times: [...], values: [...], name: "", unit: ""}
|
||||
xData = ent.instantHistory?.times || [];
|
||||
yData = ent.instantHistory?.values || [];
|
||||
seriesName = ent.instantHistory?.name || "瞬时流量";
|
||||
color = "#ffaa00";
|
||||
// 如果没有时间轴数据，使用默认小时标签
|
||||
if (xData.length === 0) {
|
||||
for (var i = 0; i < 72; i++) xData.push(i + "h");
|
||||
}
|
||||
// 如果没有数值数据，使用模拟数据
|
||||
if (yData.length === 0) {
|
||||
yData = generateHistoryData(72);
|
||||
}
|
||||
} else {
|
||||
xData = [];
|
||||
for (var j = 0; j < 14; j++) xData.push("D" + (j + 1));
|
||||
yData = ent.cumulativeHistory;
|
||||
xData = ent.cumulativeHistory?.times || [];
|
||||
yData = ent.cumulativeHistory?.values || [];
|
||||
seriesName = ent.cumulativeHistory?.name || "累计流量";
|
||||
color = "#00eaff";
|
||||
// 如果没有时间轴数据，使用默认天数标签
|
||||
if (xData.length === 0) {
|
||||
for (var j = 0; j < 14; j++) xData.push("D" + (j + 1));
|
||||
}
|
||||
// 如果没有数值数据，使用模拟数据
|
||||
if (yData.length === 0) {
|
||||
yData = generateHistoryData(14);
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化时间，只显示日期部分
|
||||
function formatDateLabelModal(timeStr) {
|
||||
if (timeStr && timeStr.length >= 10) {
|
||||
return timeStr.substring(0, 10); // 只取 "YYYY-MM-DD"
|
||||
}
|
||||
return timeStr;
|
||||
}
|
||||
|
||||
// 计算x轴标签显示间隔
|
||||
function calculateIntervalModal(arr) {
|
||||
var len = arr ? arr.length : 0;
|
||||
if (len <= 10) return 0;
|
||||
if (len <= 20) return 1;
|
||||
if (len <= 50) return 4;
|
||||
return Math.floor(len / 10) - 1;
|
||||
}
|
||||
|
||||
var option = {
|
||||
@ -1048,6 +1112,10 @@ pageEncoding="UTF-8"%>
|
||||
trigger: "axis",
|
||||
backgroundColor: "rgba(0,0,0,0.8)",
|
||||
textStyle: { color: "#fff" },
|
||||
formatter: function(params) {
|
||||
var data = params[0];
|
||||
return data.name + '<br/>' + data.seriesName + ': ' + data.value;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
@ -1060,7 +1128,13 @@ pageEncoding="UTF-8"%>
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: xData,
|
||||
axisLabel: { color: "#fff", fontSize: 16 },
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
rotate: 45,
|
||||
interval: calculateIntervalModal(xData),
|
||||
formatter: formatDateLabelModal
|
||||
},
|
||||
axisLine: { lineStyle: { color: "#00eaff" } },
|
||||
},
|
||||
yAxis: {
|
||||
@ -1070,7 +1144,7 @@ pageEncoding="UTF-8"%>
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: type === "instant" ? "瞬时流量" : "累计流量",
|
||||
name: seriesName,
|
||||
type: "line",
|
||||
smooth: true,
|
||||
data: yData,
|
||||
@ -1171,7 +1245,7 @@ pageEncoding="UTF-8"%>
|
||||
id: item.id,
|
||||
name: item.name || "企业-" + (idx + 1),
|
||||
value: dischargeValue,
|
||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口 "DEV067"
|
||||
sewageType: item.trade || "-",
|
||||
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||
@ -1187,7 +1261,7 @@ pageEncoding="UTF-8"%>
|
||||
id: item.id,
|
||||
name: item.name || "企业-" + (idx + 1),
|
||||
value: dischargeValue,
|
||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口 "DEV067"
|
||||
sewageType: item.trade || "-",
|
||||
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||
@ -1265,35 +1339,55 @@ pageEncoding="UTF-8"%>
|
||||
}
|
||||
|
||||
function renderDetailCharts(enterprise) {
|
||||
console.log("[renderDetailCharts] 渲染图表, 瞬时数据:", enterprise.instantHistory?.length, "累计数据:", enterprise.cumulativeHistory?.length);
|
||||
console.log("[renderDetailCharts] 渲染图表, 瞬时数据:", enterprise.instantHistory?.values?.length, "累计数据:", enterprise.cumulativeHistory?.values?.length);
|
||||
|
||||
// 根据实际数据长度动态生成 X 轴标签
|
||||
var instantData = enterprise.instantHistory || [];
|
||||
var cumulativeData = enterprise.cumulativeHistory || [];
|
||||
// 数据格式: {times: [...], values: [...], name: "", unit: ""}
|
||||
var instantData = enterprise.instantHistory || { times: [], values: [], name: '瞬时流量', unit: '' };
|
||||
var cumulativeData = enterprise.cumulativeHistory || { times: [], values: [], name: '累计流量', unit: '' };
|
||||
|
||||
// 瞬时流量 X 轴标签（按小时）
|
||||
var hours = [];
|
||||
for (var i = 0; i < instantData.length; i++) {
|
||||
hours.push(i + "h");
|
||||
}
|
||||
// 如果没有数据，默认显示 3 天（近3天小时数据）
|
||||
if (hours.length === 0) {
|
||||
for (var i = 0; i < 72; i++) hours.push(i + "h");
|
||||
}
|
||||
// 瞬时流量 - 使用接口返回的时间轴或默认小时标签
|
||||
var instantTimes = instantData.times && instantData.times.length > 0
|
||||
? instantData.times
|
||||
: (function() { var arr = []; for (var i = 0; i < 72; i++) arr.push(i + "h"); return arr; })();
|
||||
var instantValues = instantData.values && instantData.values.length > 0
|
||||
? instantData.values
|
||||
: generateHistoryData(72);
|
||||
|
||||
// 累计流量 X 轴标签（按天）
|
||||
var days = [];
|
||||
for (var j = 0; j < cumulativeData.length; j++) {
|
||||
days.push("D" + (j + 1));
|
||||
// 累计流量 - 使用接口返回的时间轴或默认天数标签
|
||||
var cumulativeTimes = cumulativeData.times && cumulativeData.times.length > 0
|
||||
? cumulativeData.times
|
||||
: (function() { var arr = []; for (var j = 0; j < 14; j++) arr.push("D" + (j + 1)); return arr; })();
|
||||
var cumulativeValues = cumulativeData.values && cumulativeData.values.length > 0
|
||||
? cumulativeData.values
|
||||
: generateHistoryData(14);
|
||||
|
||||
// 格式化时间，只显示日期部分
|
||||
function formatDateLabel(timeStr) {
|
||||
// 如果是 "YYYY-MM-DD HH:mm" 格式，只取日期部分
|
||||
if (timeStr && timeStr.length >= 10) {
|
||||
return timeStr.substring(0, 10); // 只取 "YYYY-MM-DD"
|
||||
}
|
||||
return timeStr;
|
||||
}
|
||||
// 如果没有数据，默认显示 14 天
|
||||
if (days.length === 0) {
|
||||
for (var j = 0; j < 14; j++) days.push("D" + (j + 1));
|
||||
|
||||
// 计算x轴标签显示间隔，避免标签太密集
|
||||
function calculateInterval(arr) {
|
||||
var len = arr ? arr.length : 0;
|
||||
if (len <= 10) return 0; // 全部显示
|
||||
if (len <= 20) return 1; // 隔一个显示
|
||||
if (len <= 50) return 4; // 每5个显示一个
|
||||
return Math.floor(len / 10) - 1; // 大约显示10个标签
|
||||
}
|
||||
|
||||
// Instant Chart (Line)
|
||||
var optionInstant = {
|
||||
tooltip: { trigger: "axis" },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: function(params) {
|
||||
var data = params[0];
|
||||
return data.name + '<br/>' + data.seriesName + ': ' + data.value;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
@ -1304,8 +1398,14 @@ pageEncoding="UTF-8"%>
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: hours,
|
||||
axisLabel: { color: "#ccc" },
|
||||
data: instantTimes,
|
||||
axisLabel: {
|
||||
color: "#ccc",
|
||||
fontSize: 10,
|
||||
rotate: 45,
|
||||
interval: calculateInterval(instantTimes),
|
||||
formatter: formatDateLabel
|
||||
},
|
||||
axisLine: { lineStyle: { color: "#00eaff" } },
|
||||
},
|
||||
yAxis: {
|
||||
@ -1315,7 +1415,7 @@ pageEncoding="UTF-8"%>
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "瞬时量",
|
||||
name: instantData.name || "瞬时量",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbol: "none",
|
||||
@ -1329,14 +1429,20 @@ pageEncoding="UTF-8"%>
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: instantData.length > 0 ? instantData : generateHistoryData(72),
|
||||
data: instantValues,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// Cumulative Chart (Bar)
|
||||
var optionCumulative = {
|
||||
tooltip: { trigger: "axis" },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: function(params) {
|
||||
var data = params[0];
|
||||
return data.name + '<br/>' + data.seriesName + ': ' + data.value;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
@ -1346,8 +1452,14 @@ pageEncoding="UTF-8"%>
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: days,
|
||||
axisLabel: { color: "#ccc" },
|
||||
data: cumulativeTimes,
|
||||
axisLabel: {
|
||||
color: "#ccc",
|
||||
fontSize: 10,
|
||||
rotate: 45,
|
||||
interval: calculateInterval(cumulativeTimes),
|
||||
formatter: formatDateLabel
|
||||
},
|
||||
axisLine: { lineStyle: { color: "#ffaa00" } },
|
||||
},
|
||||
yAxis: {
|
||||
@ -1357,12 +1469,12 @@ pageEncoding="UTF-8"%>
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "累计流量",
|
||||
name: cumulativeData.name || "累计流量",
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] },
|
||||
},
|
||||
data: cumulativeData.length > 0 ? cumulativeData : generateHistoryData(14),
|
||||
data: cumulativeValues,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user