水厂大屏数据
This commit is contained in:
Rue Ji
@ -33,27 +33,25 @@
|
|||||||
/* Specific Position for Data 6040 */
|
/* Specific Position for Data 6040 */
|
||||||
.slqs {
|
.slqs {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 121px;
|
width: 210px;
|
||||||
height: 62px;
|
height: 62px;
|
||||||
color: rgba(255, 255, 255, 1);
|
color: rgba(255, 255, 255, 1);
|
||||||
font-family: "Gilroy", "DIN Alternate", "Arial Narrow", sans-serif;
|
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
z-index: 10;
|
display: flex;
|
||||||
text-align: center;
|
justify-content: flex-end;
|
||||||
line-height: 62px;
|
|
||||||
}
|
}
|
||||||
.slqs-jinri {
|
.slqs-todayTotal {
|
||||||
top: 335px;
|
top: 335px;
|
||||||
left: 209px;
|
left: 209px;
|
||||||
}
|
}
|
||||||
.slqs-zuori {
|
.slqs-yesterdayTotal {
|
||||||
top: 335px;
|
top: 335px;
|
||||||
left: 592px;
|
left: 592px;
|
||||||
}
|
}
|
||||||
.slqs-benyue {
|
.slqs-monthTotal {
|
||||||
top: 335px;
|
top: 335px;
|
||||||
left: 975px;
|
left: 947px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ncl-val {
|
.ncl-val {
|
||||||
@ -208,6 +206,20 @@
|
|||||||
font-size: 80px;
|
font-size: 80px;
|
||||||
margin-bottom: 20px;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -222,9 +234,9 @@
|
|||||||
<div class="screen-container">
|
<div class="screen-container">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div>
|
<div>
|
||||||
<div class="slqs slqs-jinri">6040</div>
|
<div class="slqs slqs-todayTotal">60400</div>
|
||||||
<div class="slqs slqs-zuori">4197</div>
|
<div class="slqs slqs-yesterdayTotal">4197</div>
|
||||||
<div class="slqs slqs-benyue">12356</div>
|
<div class="slqs slqs-monthTotal">12356</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 七日水量 -->
|
<!-- 七日水量 -->
|
||||||
@ -333,12 +345,37 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="Middle2">
|
<div class="Middle2">
|
||||||
<div></div>
|
<div>
|
||||||
<div></div>
|
<span class="Middle2-value" id="D_YanYCORP"></span>
|
||||||
<div></div>
|
<span class="Middle2-value" id="D_QueYCRJY1"></span>
|
||||||
<div></div>
|
<span class="Middle2-value" id="D_HaoYCRJY"></span>
|
||||||
<div></div>
|
<span class="Middle2-value" id="D_HaoYCRJY2"></span>
|
||||||
<div></div>
|
<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>
|
</div>
|
||||||
|
|
||||||
<!-- 中间图表 -->
|
<!-- 中间图表 -->
|
||||||
@ -368,9 +405,9 @@
|
|||||||
var pageData = {
|
var pageData = {
|
||||||
// 水量数据 (slqs)
|
// 水量数据 (slqs)
|
||||||
slqs: {
|
slqs: {
|
||||||
jinri: 6040, // 今日水量
|
todayTotal: 6040, // 今日水量
|
||||||
zuori: 4197, // 昨日水量
|
yesterdayTotal: 4197, // 昨日水量
|
||||||
benyue: 12356 // 本月水量
|
monthTotal: 12356 // 本月水量
|
||||||
},
|
},
|
||||||
|
|
||||||
// 泥处理指标 (ncl)
|
// 泥处理指标 (ncl)
|
||||||
@ -419,9 +456,9 @@
|
|||||||
|
|
||||||
// 更新水量显示
|
// 更新水量显示
|
||||||
function updateSlqs() {
|
function updateSlqs() {
|
||||||
$(".slqs-jinri").text(pageData.slqs.jinri);
|
$(".slqs-todayTotal").text(pageData.slqs.todayTotal);
|
||||||
$(".slqs-zuori").text(pageData.slqs.zuori);
|
$(".slqs-yesterdayTotal").text(pageData.slqs.yesterdayTotal);
|
||||||
$(".slqs-benyue").text(pageData.slqs.benyue);
|
$(".slqs-monthTotal").text(pageData.slqs.monthTotal);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 更新泥处理指标显示
|
// 更新泥处理指标显示
|
||||||
@ -464,7 +501,7 @@
|
|||||||
success: function(response) {
|
success: function(response) {
|
||||||
// 假设接口返回的数据格式如下：
|
// 假设接口返回的数据格式如下：
|
||||||
// {
|
// {
|
||||||
// slqs: { jinri: xxx, zuori: xxx, benyue: xxx },
|
// slqs: { todayTotal: xxx, yesterdayTotal: xxx, monthTotal: xxx },
|
||||||
// ncl: { val1: xxx, val2: xxx, val3: xxx },
|
// ncl: { val1: xxx, val2: xxx, val3: xxx },
|
||||||
// yaohao: { val1: xxx, val2: xxx, val3: xxx },
|
// yaohao: { val1: xxx, val2: xxx, val3: xxx },
|
||||||
// qualityTable: [...],
|
// 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 () {
|
$(function () {
|
||||||
// 初始化数据显示
|
// 初始化数据显示
|
||||||
updateSlqs();
|
updateSlqs();
|
||||||
@ -541,6 +668,43 @@
|
|||||||
initSevenDaysChart();
|
initSevenDaysChart();
|
||||||
initNclChart();
|
initNclChart();
|
||||||
initQualityChart();
|
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 myChart = echarts.init(chartDom);
|
||||||
var dataAxis = pageData.sevenDaysChart.xAxis;
|
var dataAxis = pageData.sevenDaysChart.xAxis;
|
||||||
var data = pageData.sevenDaysChart.data;
|
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 = {
|
var option = {
|
||||||
backgroundColor: "transparent",
|
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: {
|
grid: {
|
||||||
left: 60,
|
// left: 60,
|
||||||
right: 40,
|
right: 40,
|
||||||
top: 40,
|
top: 40,
|
||||||
bottom: 40,
|
bottom: 40,
|
||||||
@ -581,8 +769,8 @@
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: "value",
|
type: "value",
|
||||||
max: 10000,
|
max: yMax,
|
||||||
splitNumber: 5,
|
splitNumber: 7,
|
||||||
axisLine: { show: false },
|
axisLine: { show: false },
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
@ -601,7 +789,7 @@
|
|||||||
{
|
{
|
||||||
name: "处理水量",
|
name: "处理水量",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
barWidth: 20,
|
barMaxWidth: 60,
|
||||||
data: data,
|
data: data,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
@ -625,8 +813,8 @@
|
|||||||
{
|
{
|
||||||
type: "bar",
|
type: "bar",
|
||||||
barGap: "-100%",
|
barGap: "-100%",
|
||||||
|
barMaxWidth: 60,
|
||||||
data: (function () {
|
data: (function () {
|
||||||
var yMax = 10000;
|
|
||||||
var shadow = [];
|
var shadow = [];
|
||||||
for (var i = 0; i < data.length; i++) {
|
for (var i = 0; i < data.length; i++) {
|
||||||
shadow.push(yMax);
|
shadow.push(yMax);
|
||||||
|
|||||||
@ -575,7 +575,7 @@ pageEncoding="UTF-8"%>
|
|||||||
areaName: item.company ? item.company.name || "" : "",
|
areaName: item.company ? item.company.name || "" : "",
|
||||||
processSectionName: item.processSection ? item.processSection.name || "" : "",
|
processSectionName: item.processSection ? item.processSection.name || "" : "",
|
||||||
permitNum: item.permitNum || "",
|
permitNum: item.permitNum || "",
|
||||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
ventNum: item.ventNum || "", // 排放编号，用于流量接口 "DEV067"
|
||||||
trade: item.trade || "",
|
trade: item.trade || "",
|
||||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||||
indicator: dischargeValue > 8000 ? "超级" : "普通",
|
indicator: dischargeValue > 8000 ? "超级" : "普通",
|
||||||
@ -619,7 +619,7 @@ pageEncoding="UTF-8"%>
|
|||||||
function loadFlowData(ventNum, type) {
|
function loadFlowData(ventNum, type) {
|
||||||
if (!ventNum) {
|
if (!ventNum) {
|
||||||
console.warn("[loadFlowData] ventNum 为空，无法加载流量数据");
|
console.warn("[loadFlowData] ventNum 为空，无法加载流量数据");
|
||||||
return Promise.resolve([]);
|
return Promise.resolve({ times: [], values: [], name: '', unit: '' });
|
||||||
}
|
}
|
||||||
|
|
||||||
var mpcode, days;
|
var mpcode, days;
|
||||||
@ -653,30 +653,45 @@ pageEncoding="UTF-8"%>
|
|||||||
dataList = JSON.parse(data);
|
dataList = JSON.parse(data);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error("[loadFlowData] 解析数据失败:", e);
|
console.error("[loadFlowData] 解析数据失败:", e);
|
||||||
return [];
|
return { times: [], values: [], name: '', unit: '' };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 提取数值数组
|
// 解析datalist数据用于图表展示
|
||||||
|
// datalist格式: [{unit: "", data: [[时间, 值], ...], name: "xxx"}]
|
||||||
|
var times = [];
|
||||||
var values = [];
|
var values = [];
|
||||||
if (Array.isArray(dataList)) {
|
var seriesName = '';
|
||||||
dataList.forEach(function (item) {
|
var unit = '';
|
||||||
// 假设返回数据格式为 [{time: xxx, value: xxx}, ...]
|
|
||||||
// 或者 [value1, value2, ...]
|
if (Array.isArray(datalist) && datalist.length > 0) {
|
||||||
if (item.value !== undefined) {
|
var firstItem = datalist[0];
|
||||||
values.push(parseFloat(item.value) || 0);
|
seriesName = firstItem.name || '流量数据';
|
||||||
} else if (typeof item === 'number') {
|
unit = firstItem.unit || '';
|
||||||
values.push(item);
|
|
||||||
|
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);
|
console.log("[loadFlowData] 解析后数据条数:", values.length, "时间点:", times.length);
|
||||||
return values;
|
|
||||||
|
// 返回包含时间轴和数值的对象
|
||||||
|
return {
|
||||||
|
times: times,
|
||||||
|
values: values,
|
||||||
|
name: seriesName,
|
||||||
|
unit: unit
|
||||||
|
};
|
||||||
})
|
})
|
||||||
.catch(function (err) {
|
.catch(function (err) {
|
||||||
console.error("[loadFlowData] 请求失败:", mpcode, err);
|
console.error("[loadFlowData] 请求失败:", mpcode, err);
|
||||||
return [];
|
return { times: [], values: [], name: '', unit: '' };
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -696,10 +711,22 @@ pageEncoding="UTF-8"%>
|
|||||||
loadFlowData(enterprise.ventNum, 'cumulative')
|
loadFlowData(enterprise.ventNum, 'cumulative')
|
||||||
])
|
])
|
||||||
.then(function (results) {
|
.then(function (results) {
|
||||||
enterprise.instantHistory = results[0].length > 0 ? results[0] : generateHistoryData(72); // 近3天小时数据
|
// results[0] 和 results[1] 现在是 {times, values, name, unit} 对象
|
||||||
enterprise.cumulativeHistory = results[1].length > 0 ? results[1] : generateHistoryData(14); // 近14天数据
|
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,
|
console.log("[loadEnterpriseFlowData] 流量数据加载完成:", enterprise.name,
|
||||||
"瞬时:", enterprise.instantHistory.length, "累计:", enterprise.cumulativeHistory.length);
|
"瞬时:", enterprise.instantHistory.values.length, "累计:", enterprise.cumulativeHistory.values.length);
|
||||||
return enterprise;
|
return enterprise;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -724,7 +751,7 @@ pageEncoding="UTF-8"%>
|
|||||||
if (!enterprises || enterprises.length === 0) {
|
if (!enterprises || enterprises.length === 0) {
|
||||||
console.warn("企业数据为空，使用默认模拟数据");
|
console.warn("企业数据为空，使用默认模拟数据");
|
||||||
// enterprises = generateMockData();
|
// enterprises = generateMockData();
|
||||||
enterprises = []
|
enterprises = [{}]
|
||||||
}
|
}
|
||||||
|
|
||||||
allEnterprises = enterprises;
|
allEnterprises = enterprises;
|
||||||
@ -774,12 +801,15 @@ pageEncoding="UTF-8"%>
|
|||||||
}
|
}
|
||||||
|
|
||||||
function generateHistoryData(count) {
|
function generateHistoryData(count) {
|
||||||
var data = [];
|
// 返回与新数据格式兼容的对象
|
||||||
// for (var k = 0; k < count; k++) {
|
var times = [];
|
||||||
// data.push(Math.floor(Math.random() * 500) + 50);
|
var values = [];
|
||||||
// }
|
for (var k = 0; k < count; k++) {
|
||||||
console.log('======data', data)
|
times.push(k + "h");
|
||||||
return data;
|
values.push(Math.floor(Math.random() * 500) + 50);
|
||||||
|
}
|
||||||
|
console.log('======generateHistoryData', count, '条');
|
||||||
|
return { times: times, values: values, name: '模拟数据', unit: '' };
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateSortedData(enterprises) {
|
function updateSortedData(enterprises) {
|
||||||
@ -1030,17 +1060,51 @@ pageEncoding="UTF-8"%>
|
|||||||
ent.name;
|
ent.name;
|
||||||
$("#modalTitle").text(title);
|
$("#modalTitle").text(title);
|
||||||
|
|
||||||
var xData, yData, color;
|
var xData, yData, color, seriesName;
|
||||||
if (type === "instant") {
|
if (type === "instant") {
|
||||||
xData = [];
|
// 新数据格式: {times: [...], values: [...], name: "", unit: ""}
|
||||||
for (var i = 0; i < 72; i++) xData.push(i + "h");
|
xData = ent.instantHistory?.times || [];
|
||||||
yData = ent.instantHistory;
|
yData = ent.instantHistory?.values || [];
|
||||||
|
seriesName = ent.instantHistory?.name || "瞬时流量";
|
||||||
color = "#ffaa00";
|
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 {
|
} else {
|
||||||
xData = [];
|
xData = ent.cumulativeHistory?.times || [];
|
||||||
for (var j = 0; j < 14; j++) xData.push("D" + (j + 1));
|
yData = ent.cumulativeHistory?.values || [];
|
||||||
yData = ent.cumulativeHistory;
|
seriesName = ent.cumulativeHistory?.name || "累计流量";
|
||||||
color = "#00eaff";
|
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 = {
|
var option = {
|
||||||
@ -1048,6 +1112,10 @@ pageEncoding="UTF-8"%>
|
|||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
backgroundColor: "rgba(0,0,0,0.8)",
|
backgroundColor: "rgba(0,0,0,0.8)",
|
||||||
textStyle: { color: "#fff" },
|
textStyle: { color: "#fff" },
|
||||||
|
formatter: function(params) {
|
||||||
|
var data = params[0];
|
||||||
|
return data.name + '<br/>' + data.seriesName + ': ' + data.value;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: "3%",
|
left: "3%",
|
||||||
@ -1060,7 +1128,13 @@ pageEncoding="UTF-8"%>
|
|||||||
type: "category",
|
type: "category",
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: xData,
|
data: xData,
|
||||||
axisLabel: { color: "#fff", fontSize: 16 },
|
axisLabel: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 12,
|
||||||
|
rotate: 45,
|
||||||
|
interval: calculateIntervalModal(xData),
|
||||||
|
formatter: formatDateLabelModal
|
||||||
|
},
|
||||||
axisLine: { lineStyle: { color: "#00eaff" } },
|
axisLine: { lineStyle: { color: "#00eaff" } },
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
@ -1070,7 +1144,7 @@ pageEncoding="UTF-8"%>
|
|||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: type === "instant" ? "瞬时流量" : "累计流量",
|
name: seriesName,
|
||||||
type: "line",
|
type: "line",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
data: yData,
|
data: yData,
|
||||||
@ -1171,7 +1245,7 @@ pageEncoding="UTF-8"%>
|
|||||||
id: item.id,
|
id: item.id,
|
||||||
name: item.name || "企业-" + (idx + 1),
|
name: item.name || "企业-" + (idx + 1),
|
||||||
value: dischargeValue,
|
value: dischargeValue,
|
||||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
ventNum: item.ventNum || "", // 排放编号，用于流量接口 "DEV067"
|
||||||
sewageType: item.trade || "-",
|
sewageType: item.trade || "-",
|
||||||
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
||||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||||
@ -1187,7 +1261,7 @@ pageEncoding="UTF-8"%>
|
|||||||
id: item.id,
|
id: item.id,
|
||||||
name: item.name || "企业-" + (idx + 1),
|
name: item.name || "企业-" + (idx + 1),
|
||||||
value: dischargeValue,
|
value: dischargeValue,
|
||||||
ventNum: item.ventNum || "", // 排放编号，用于流量接口
|
ventNum: item.ventNum || "", // 排放编号，用于流量接口 "DEV067"
|
||||||
sewageType: item.trade || "-",
|
sewageType: item.trade || "-",
|
||||||
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
connectionStatus: item._point || item._input ? "已接入" : "接入中",
|
||||||
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
displacement: item.displacement ? item.displacement + "吨/天" : "-",
|
||||||
@ -1265,35 +1339,55 @@ pageEncoding="UTF-8"%>
|
|||||||
}
|
}
|
||||||
|
|
||||||
function renderDetailCharts(enterprise) {
|
function renderDetailCharts(enterprise) {
|
||||||
console.log("[renderDetailCharts] 渲染图表, 瞬时数据:", enterprise.instantHistory?.length, "累计数据:", enterprise.cumulativeHistory?.length);
|
console.log("[renderDetailCharts] 渲染图表, 瞬时数据:", enterprise.instantHistory?.values?.length, "累计数据:", enterprise.cumulativeHistory?.values?.length);
|
||||||
|
|
||||||
// 根据实际数据长度动态生成 X 轴标签
|
// 数据格式: {times: [...], values: [...], name: "", unit: ""}
|
||||||
var instantData = enterprise.instantHistory || [];
|
var instantData = enterprise.instantHistory || { times: [], values: [], name: '瞬时流量', unit: '' };
|
||||||
var cumulativeData = enterprise.cumulativeHistory || [];
|
var cumulativeData = enterprise.cumulativeHistory || { times: [], values: [], name: '累计流量', unit: '' };
|
||||||
|
|
||||||
// 瞬时流量 X 轴标签（按小时）
|
// 瞬时流量 - 使用接口返回的时间轴或默认小时标签
|
||||||
var hours = [];
|
var instantTimes = instantData.times && instantData.times.length > 0
|
||||||
for (var i = 0; i < instantData.length; i++) {
|
? instantData.times
|
||||||
hours.push(i + "h");
|
: (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);
|
||||||
|
|
||||||
|
// 累计流量 - 使用接口返回的时间轴或默认天数标签
|
||||||
|
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"
|
||||||
}
|
}
|
||||||
// 如果没有数据，默认显示 3 天（近3天小时数据）
|
return timeStr;
|
||||||
if (hours.length === 0) {
|
|
||||||
for (var i = 0; i < 72; i++) hours.push(i + "h");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 累计流量 X 轴标签（按天）
|
// 计算x轴标签显示间隔，避免标签太密集
|
||||||
var days = [];
|
function calculateInterval(arr) {
|
||||||
for (var j = 0; j < cumulativeData.length; j++) {
|
var len = arr ? arr.length : 0;
|
||||||
days.push("D" + (j + 1));
|
if (len <= 10) return 0; // 全部显示
|
||||||
}
|
if (len <= 20) return 1; // 隔一个显示
|
||||||
// 如果没有数据，默认显示 14 天
|
if (len <= 50) return 4; // 每5个显示一个
|
||||||
if (days.length === 0) {
|
return Math.floor(len / 10) - 1; // 大约显示10个标签
|
||||||
for (var j = 0; j < 14; j++) days.push("D" + (j + 1));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Instant Chart (Line)
|
// Instant Chart (Line)
|
||||||
var optionInstant = {
|
var optionInstant = {
|
||||||
tooltip: { trigger: "axis" },
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
formatter: function(params) {
|
||||||
|
var data = params[0];
|
||||||
|
return data.name + '<br/>' + data.seriesName + ': ' + data.value;
|
||||||
|
}
|
||||||
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: "3%",
|
left: "3%",
|
||||||
right: "4%",
|
right: "4%",
|
||||||
@ -1304,8 +1398,14 @@ pageEncoding="UTF-8"%>
|
|||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
boundaryGap: false,
|
boundaryGap: false,
|
||||||
data: hours,
|
data: instantTimes,
|
||||||
axisLabel: { color: "#ccc" },
|
axisLabel: {
|
||||||
|
color: "#ccc",
|
||||||
|
fontSize: 10,
|
||||||
|
rotate: 45,
|
||||||
|
interval: calculateInterval(instantTimes),
|
||||||
|
formatter: formatDateLabel
|
||||||
|
},
|
||||||
axisLine: { lineStyle: { color: "#00eaff" } },
|
axisLine: { lineStyle: { color: "#00eaff" } },
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
@ -1315,7 +1415,7 @@ pageEncoding="UTF-8"%>
|
|||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "瞬时量",
|
name: instantData.name || "瞬时量",
|
||||||
type: "line",
|
type: "line",
|
||||||
smooth: true,
|
smooth: true,
|
||||||
symbol: "none",
|
symbol: "none",
|
||||||
@ -1329,14 +1429,20 @@ pageEncoding="UTF-8"%>
|
|||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: instantData.length > 0 ? instantData : generateHistoryData(72),
|
data: instantValues,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
// Cumulative Chart (Bar)
|
// Cumulative Chart (Bar)
|
||||||
var optionCumulative = {
|
var optionCumulative = {
|
||||||
tooltip: { trigger: "axis" },
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
formatter: function(params) {
|
||||||
|
var data = params[0];
|
||||||
|
return data.name + '<br/>' + data.seriesName + ': ' + data.value;
|
||||||
|
}
|
||||||
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: "3%",
|
left: "3%",
|
||||||
right: "4%",
|
right: "4%",
|
||||||
@ -1346,8 +1452,14 @@ pageEncoding="UTF-8"%>
|
|||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
data: days,
|
data: cumulativeTimes,
|
||||||
axisLabel: { color: "#ccc" },
|
axisLabel: {
|
||||||
|
color: "#ccc",
|
||||||
|
fontSize: 10,
|
||||||
|
rotate: 45,
|
||||||
|
interval: calculateInterval(cumulativeTimes),
|
||||||
|
formatter: formatDateLabel
|
||||||
|
},
|
||||||
axisLine: { lineStyle: { color: "#ffaa00" } },
|
axisLine: { lineStyle: { color: "#ffaa00" } },
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
@ -1357,12 +1469,12 @@ pageEncoding="UTF-8"%>
|
|||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: "累计流量",
|
name: cumulativeData.name || "累计流量",
|
||||||
type: "bar",
|
type: "bar",
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] },
|
normal: { color: "#ffaa00", barBorderRadius: [5, 5, 0, 0] },
|
||||||
},
|
},
|
||||||
data: cumulativeData.length > 0 ? cumulativeData : generateHistoryData(14),
|
data: cumulativeValues,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user