// 订单列表逻辑
(function() {
const orders = [
{ id: 'ORD001', amount: '¥12,000', status: '已完成', class: 'status-done' },
{ id: 'ORD002', amount: '¥8,500', status: '运输中', class: 'status-shipping' },
{ id: 'ORD003', amount: '¥15,000', status: '待发货', class: 'status-pending' },
{ id: 'ORD004', amount: '¥9,200', status: '已完成', class: 'status-done' },
{ id: 'ORD005', amount: '¥21,000', status: '运输中', class: 'status-shipping' },
{ id: 'ORD006', amount: '¥6,800', status: '已完成', class: 'status-done' }
];
function renderOrderList() {
const container = $('.order_list_content');
if (container.length === 0) return;
let html = '';
orders.forEach(order => {
html += `
${order.id}
${order.amount}
${order.status}
`;
});
container.html(html);
}
// 模拟新订单
setInterval(() => {
const newId = 'ORD' + String(Date.now()).slice(-3);
const amount = '¥' + (Math.floor(Math.random() * 20000) + 5000).toLocaleString();
const statuses = [
{ text: '已完成', class: 'status-done' },
{ text: '运输中', class: 'status-shipping' },
{ text: '待发货', class: 'status-pending' }
];
const status = statuses[Math.floor(Math.random() * statuses.length)];
orders.unshift({
id: newId,
amount: amount,
status: status.text,
class: status.class
});
if (orders.length > 10) orders.pop(); // 保持列表长度
renderOrderList();
}, 5000);
// 初始化
$(function() {
renderOrderList();
});
})();
// 牛只概况列表逻辑
(function() {
const cattleData = [
{ name: '中山仓', value: 10 },
{ name: '横沥仓', value: 23 },
{ name: '三水仓', value: 12 },
{ name: '陆丰仓', value: 30 },
{ name: '博罗仓', value: 21 },
{ name: '梅州仓', value: 34 },
];
function renderCattleOverview() {
const container = $('#cattle_overview_container');
if (container.length === 0) return;
let html = '';
cattleData.forEach(item => {
html += `
${item.name}
${item.value}
头
`;
});
container.html(html);
}
// 模拟数据波动
setInterval(() => {
const index = Math.floor(Math.random() * cattleData.length);
const change = Math.floor(Math.random() * 3) - 1; // -1, 0, 1
let newVal = cattleData[index].value + change;
if (newVal < 0) newVal = 0;
cattleData[index].value = newVal;
renderCattleOverview();
}, 3000);
$(function() {
renderCattleOverview();
// 点击跳转到监控页面
$('#cattle_overview_container').on('click', '.cattle_item', function() {
const name = $(this).data('name');
if (name) {
window.location.href = 'monitor.html?warehouse=' + encodeURIComponent(name);
}
});
});
})();
// 牛只行情列表逻辑
(function() {
let scrollInterval;
function fetchAndRenderMarketList() {
$.ajax({
// 使用本地代理接口解决跨域问题
// 原接口: https://ad.yunmainiu.com/api/cattle-data
// 代理配置在 server.js 中: /api/cattle-market-data -> https://ad.yunmainiu.com/api/cattle-data
url: '/api/cattle-market-data',
method: 'GET',
success: function(response) {
// 尝试解析字符串响应
if (typeof response === 'string') {
try {
response = JSON.parse(response);
} catch (e) {
console.error('JSON解析失败:', e);
}
}
let data = [];
// 兼容可能的返回格式:直接数组 或 { data: [] }
if (Array.isArray(response)) {
data = response;
} else if (response && Array.isArray(response.data)) {
data = response.data;
} else if (response && Array.isArray(response.list)) {
data = response.list;
}
console.log('获取到的牛只行情数据:', data);
renderMarketList(data);
},
error: function(err) {
console.error('获取牛只行情数据失败:', err);
// 失败时显示空或错误提示,或者保留旧数据
}
});
}
function renderMarketList(data) {
const container = $('.market_list_content');
if (container.length === 0) return;
let html = '';
if (data.length === 0) {
html = '暂无数据
';
} else {
data.forEach((item, index) => {
// 接口字段: province(省份), location(地区), type(品种), price(单价)
html += `
${index + 1}
${item.province || '--'}
${item.location || '--'}
${item.type || '--'}
${item.price || '--'}
`;
});
}
container.html(html);
// 清除旧的滚动定时器
if (scrollInterval) {
clearInterval(scrollInterval);
scrollInterval = null;
}
// 简单的自动滚动效果
// 需要等待DOM渲染完成后计算高度,这里简单使用setTimeout
setTimeout(() => {
let scrollPos = 0;
// 重新获取DOM元素属性,确保准确
const scrollHeight = container[0].scrollHeight;
const clientHeight = container[0].clientHeight;
// 只有当内容高度超过容器高度时才滚动
if (scrollHeight > clientHeight) {
scrollInterval = setInterval(() => {
scrollPos += 1;
// 当滚动到底部时,回到顶部
if (scrollPos >= scrollHeight - clientHeight) {
scrollPos = 0;
}
container.scrollTop(scrollPos);
}, 50);
}
}, 100);
}
$(function() {
fetchAndRenderMarketList();
// 每60秒刷新一次数据
setInterval(fetchAndRenderMarketList, 60000);
});
})();
// 出肉率图表逻辑
(function() {
// 确保 DOM 加载完成
$(function() {
const chartDom = document.getElementById('meat_yield_chart');
if (!chartDom) return;
const myChart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
top: '10%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
color: '#fff',
fontSize: 12
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'category',
data: ['鲁西黄牛', '西门塔尔', '夏洛莱', '利木赞', '安格斯'],
axisLabel: {
color: '#fff',
fontSize: 12
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
}
},
series: [
{
name: '出肉率',
type: 'bar',
data: [45, 52, 58, 55, 60],
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#2b86ff' },
{ offset: 1, color: '#1effc0' }
]),
barBorderRadius: [0, 5, 5, 0]
}
},
label: {
show: true,
position: 'right',
formatter: '{c}%',
color: '#fff'
},
barWidth: '40%'
}
]
};
myChart.setOption(option);
// 窗口大小改变时重置图表大小
window.addEventListener("resize", function () {
myChart.resize();
});
// 模拟数据动态变化
setInterval(() => {
const newData = option.series[0].data.map(val => {
let change = Math.floor(Math.random() * 3) - 1;
let newVal = val + change;
if (newVal > 70) newVal = 70;
if (newVal < 35) newVal = 35;
return newVal;
});
myChart.setOption({
series: [{
data: newData
}]
});
}, 5000);
});
})();
// 屠宰场概况图表逻辑
(function() {
// 确保 DOM 加载完成
$(function() {
const chartDom = document.getElementById('slaughterhouse_chart');
if (!chartDom) return;
const myChart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
right: 10,
top: 'center',
textStyle: {
color: '#fff'
},
data: ['正常运行', '检修中', '待运行', '已关闭']
},
series: [
{
name: '屠宰场状态',
type: 'pie',
radius: ['50%', '70%'],
center: ['35%', '50%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: '#fff'
}
},
labelLine: {
show: false
},
data: [
{ value: 12, name: '正常运行', itemStyle: { color: '#37a2da' } },
{ value: 3, name: '检修中', itemStyle: { color: '#ffdb5c' } },
{ value: 5, name: '待运行', itemStyle: { color: '#ff9f7f' } },
{ value: 1, name: '已关闭', itemStyle: { color: '#fb7293' } }
]
}
]
};
myChart.setOption(option);
// 窗口大小改变时重置图表大小
window.addEventListener("resize", function () {
myChart.resize();
});
// 模拟数据动态变化
setInterval(() => {
const newData = option.series[0].data.map(item => {
let change = Math.floor(Math.random() * 3) - 1;
let newVal = item.value + change;
if (newVal < 0) newVal = 0;
return { ...item, value: newVal };
});
myChart.setOption({
series: [{
data: newData
}]
});
}, 6000);
});
})();