// 订单列表逻辑 (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); }); })();