401 lines
13 KiB
JavaScript
401 lines
13 KiB
JavaScript
|
||
// 订单列表逻辑
|
||
(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 += `
|
||
<div class="order_item">
|
||
<span>${order.id}</span>
|
||
<span>${order.amount}</span>
|
||
<span class="${order.class}">${order.status}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
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 += `
|
||
<div class="cattle_item" data-name="${item.name}">
|
||
<div class="cattle_icon">
|
||
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
|
||
</div>
|
||
<div class="cattle_info">
|
||
<span class="cattle_name">${item.name}</span>
|
||
<div>
|
||
<span class="cattle_value">${item.value}</span>
|
||
<span class="cattle_unit">头</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
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 = '<div style="text-align:center;color:#ccc;padding:20px;">暂无数据</div>';
|
||
} else {
|
||
data.forEach((item, index) => {
|
||
// 接口字段: province(省份), location(地区), type(品种), price(单价)
|
||
html += `
|
||
<div class="market_item">
|
||
<span>${index + 1}</span>
|
||
<span>${item.province || '--'}</span>
|
||
<span>${item.location || '--'}</span>
|
||
<span>${item.type || '--'}</span>
|
||
<span class="market_price">${item.price || '--'}</span>
|
||
</div>
|
||
`;
|
||
});
|
||
}
|
||
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} <br/>{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);
|
||
});
|
||
})();
|