修改模块
This commit is contained in:
383
datav/index.html
383
datav/index.html
@@ -29,153 +29,105 @@
|
||||
<img class="jzxz2" src="images/jzxz2.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="head_top">
|
||||
<!-- <img class="decor_side decor_left" src="images/ksh42.png" alt=""> -->
|
||||
<img class="decor_bar decor_left_outer" src="images/ksh31.png" alt="">
|
||||
<div class="head_logo">牛只管理系统</div>
|
||||
<img class="decor_bar decor_right_outer" src="images/ksh32.png" alt="">
|
||||
<!-- <img class="decor_side decor_right" src="images/ksh42.png" alt=""> -->
|
||||
<img class="head_decor" src="images/header.png" alt="标题装饰">
|
||||
</div>
|
||||
|
||||
<div class="visual">
|
||||
<div class="visual_left">
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>交通流量</span>
|
||||
<span>订单列表</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart" id="main1">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>交通工具流量</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart" id="main2">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>收费站车流量</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart sfzcll">
|
||||
<a>运输方式</a>
|
||||
<a>客运量</a>
|
||||
<a>货运量</a>
|
||||
<div class="sfzcll_pos_box">
|
||||
<div class="sfzcll_box">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<label><img src="images/ksh35.png">公路运输</label>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygl">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygh">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="sfzcll_box">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<label><img src="images/ksh35.png">公路运输</label>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygl">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygh">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="sfzcll_box">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<img class="sfzcll_bkJk" src="images/ksh34.png">
|
||||
<label><img src="images/ksh35.png">公路运输</label>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygl">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="sfzcll_smallBk">
|
||||
<div class="ygh">
|
||||
<span>4347.2万</span>人
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="visual_chart order_list_container">
|
||||
<div class="order_list_header">
|
||||
<span>订单号</span>
|
||||
<span>金额</span>
|
||||
<span>状态</span>
|
||||
</div>
|
||||
<div class="order_list_content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>牛只概况</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart" id="cattle_overview_container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>出肉率</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart" id="meat_yield_chart"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="visual_con">
|
||||
<div class="visual_conTop">
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>采购总额</h3>
|
||||
<p class="stat-value" data-field="toalProcurementAmount">--</p>
|
||||
<p class="stat-value" data-field="toalProcurementAmount">423536.29元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>销售总额</h3>
|
||||
<p class="stat-value" data-field="toalSalesAmount">--</p>
|
||||
<p class="stat-value" data-field="toalSalesAmount">417832.33元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>利润</h3>
|
||||
<p class="stat-value" data-field="profits">--</p>
|
||||
<p class="stat-value" data-field="profits">31525元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>应收货款</h3>
|
||||
<p class="stat-value" data-field="accountsReceivable">--</p>
|
||||
<p class="stat-value" data-field="accountsReceivable">215215.25元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>未收货款</h3>
|
||||
<p class="stat-value" data-field="uncollectedPayment">--</p>
|
||||
<p class="stat-value" data-field="uncollectedPayment">564231.321元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>实收货款</h3>
|
||||
<p class="stat-value" data-field="actualPayment">--</p>
|
||||
<p class="stat-value" data-field="actualPayment">335421.56元</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>采购头数</h3>
|
||||
<p class="stat-value" data-field="totalPurchase">--</p>
|
||||
<p class="stat-value" data-field="totalPurchase">2200头</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>采购单数</h3>
|
||||
<p class="stat-value" data-field="totalOrder">--</p>
|
||||
<p class="stat-value" data-field="totalOrder">35车</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_conTop_box visual_conTop1">
|
||||
<div class="stat-card">
|
||||
<h3>销售单数</h3>
|
||||
<p class="stat-value" data-field="totalSales">--</p>
|
||||
<p class="stat-value" data-field="totalSales">55单</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,89 +138,120 @@
|
||||
<img class="visual_conBot_4" src="images/ksh45.png">
|
||||
|
||||
<div class="visual_chart" id="main8"></div>
|
||||
<div class="visual_conBot_bot">
|
||||
<div class="visualSssf_left">
|
||||
<h3>今日实时收费</h3>
|
||||
<a style="display:block">全省数据</a>
|
||||
<a>大同北</a>
|
||||
<a>大同南</a>
|
||||
<a>朔州</a>
|
||||
<a>吕梁北</a>
|
||||
<a>吕梁南</a>
|
||||
<a>太原</a>
|
||||
<a class="active">晋中</a>
|
||||
<a>太旧</a>
|
||||
<a>长治</a>
|
||||
</div>
|
||||
<div class="visual_conStatus">
|
||||
<div class="status_item">
|
||||
<div class="status_label">未完成</div>
|
||||
<div class="status_value_group">
|
||||
<span class="stat-value" data-field="uncompletedOrders">--</span>
|
||||
<span class="status_unit">单</span>
|
||||
</div>
|
||||
<div class="visualSssf_right">
|
||||
<div class="visualSssf_right_box" id="main5"></div>
|
||||
<div class="visualSssf_right_box" id="main6"></div>
|
||||
<div class="visualSssf_right_box" id="main7"></div>
|
||||
<div class="status_base">
|
||||
<div class="status_ring"></div>
|
||||
<div class="status_light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_label">未到岸</div>
|
||||
<div class="status_value_group">
|
||||
<span class="stat-value" data-field="notArrivedOrders">--</span>
|
||||
<span class="status_unit">单</span>
|
||||
</div>
|
||||
<div class="status_base">
|
||||
<div class="status_ring"></div>
|
||||
<div class="status_light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_label">未售完</div>
|
||||
<div class="status_value_group">
|
||||
<span class="stat-value" data-field="unsoldOrders">--</span>
|
||||
<span class="status_unit">单</span>
|
||||
</div>
|
||||
<div class="status_base">
|
||||
<div class="status_ring"></div>
|
||||
<div class="status_light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_label">已完成</div>
|
||||
<div class="status_value_group">
|
||||
<span class="stat-value" data-field="completedOrders">--</span>
|
||||
<span class="status_unit">单</span>
|
||||
</div>
|
||||
<div class="status_base">
|
||||
<div class="status_ring"></div>
|
||||
<div class="status_light"></div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_right">
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>本月发生事件</span>
|
||||
<span>牛只行情</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="swiper-container visual_swiper1 visual_chart">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" id="main3"></div>
|
||||
<div class="swiper-slide" id="main31"></div>
|
||||
<div class="visual_chart market_list_container">
|
||||
<div class="market_list_header">
|
||||
<span>序号</span>
|
||||
<span>省份</span>
|
||||
<span>地区</span>
|
||||
<span>品种</span>
|
||||
<span>单价(元/斤)</span>
|
||||
</div>
|
||||
<div class="market_list_content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box visualSfzsfl">
|
||||
<div class="visual_title">
|
||||
<span>收费站收费量</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart" id="main9">
|
||||
|
||||
</div>
|
||||
<div class="visual_table">
|
||||
<table>
|
||||
<tr>
|
||||
<td>小型车</td>
|
||||
<td>中型车</td>
|
||||
<td>大型车</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
<td>2486万</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>收费站收费排行</span>
|
||||
<span>屠宰场概况</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="swiper-container visual_swiper2 visual_chart">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide" id="main4"></div>
|
||||
<div class="swiper-slide" id="main41"></div>
|
||||
<div class="visual_chart" id="slaughterhouse_overview_container"></div>
|
||||
</div>
|
||||
<div class="visual_box">
|
||||
<div class="visual_title">
|
||||
<span>合计总数</span>
|
||||
<img src="images/ksh33.png">
|
||||
</div>
|
||||
<div class="visual_chart total_layout">
|
||||
<div class="total_row">
|
||||
<div class="total_icon_wrapper">
|
||||
<span class="glyphicon glyphicon-list-alt"></span>
|
||||
</div>
|
||||
<div class="total_text_wrapper">
|
||||
<div class="total_label">合计总数</div>
|
||||
<div class="total_data">
|
||||
<span class="stat-value" data-field="totalCattle">--</span>
|
||||
<span class="total_unit">头</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total_row">
|
||||
<div class="total_icon_wrapper">
|
||||
<span class="glyphicon glyphicon-home"></span>
|
||||
</div>
|
||||
<div class="total_text_wrapper">
|
||||
<div class="total_label">在栏总数</div>
|
||||
<div class="total_data">
|
||||
<span class="stat-value" data-field="deliveredCattle">--</span>
|
||||
<span class="total_unit">头</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total_row">
|
||||
<div class="total_icon_wrapper">
|
||||
<span class="glyphicon glyphicon-send"></span>
|
||||
</div>
|
||||
<div class="total_text_wrapper">
|
||||
<div class="total_label">在途总数</div>
|
||||
<div class="total_data">
|
||||
<span class="stat-value" data-field="inTransitCattle">--</span>
|
||||
<span class="total_unit">头</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -291,10 +274,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
var sfzcllH=$('.sfzcll_box').height()
|
||||
var sfzcllHtwo=sfzcllH-2
|
||||
$('.sfzcll_box').css('line-height',sfzcllH+'px')
|
||||
$('.sfzcll_smallBk>div').css('line-height',sfzcllHtwo+'px')
|
||||
*/
|
||||
|
||||
//删除加载动画
|
||||
$('#load').fadeOut(1000)
|
||||
@@ -342,10 +327,57 @@
|
||||
success: function(res) {
|
||||
const list = res && (res.data || res.rows || res.result || res.list || res);
|
||||
const first = Array.isArray(list) ? list[0] : list;
|
||||
renderSalesOverview(first || {});
|
||||
const data = first || {};
|
||||
|
||||
// 模拟测试数据（如果接口未返回）
|
||||
if (data.toalProcurementAmount === undefined) data.toalProcurementAmount = 423536.29;
|
||||
if (data.toalSalesAmount === undefined) data.toalSalesAmount = 417832.33;
|
||||
if (data.profits === undefined) data.profits = 31525;
|
||||
if (data.accountsReceivable === undefined) data.accountsReceivable = 215215.25;
|
||||
if (data.uncollectedPayment === undefined) data.uncollectedPayment = 564231.32;
|
||||
if (data.actualPayment === undefined) data.actualPayment = 335421.56;
|
||||
if (data.totalPurchase === undefined) data.totalPurchase = 2200;
|
||||
if (data.totalOrder === undefined) data.totalOrder = 35;
|
||||
if (data.totalSales === undefined) data.totalSales = 55;
|
||||
|
||||
// 模拟合计总数数据
|
||||
if (data.totalCattle === undefined) data.totalCattle = 12580;
|
||||
if (data.inTransitCattle === undefined) data.inTransitCattle = 1250;
|
||||
if (data.deliveredCattle === undefined) data.deliveredCattle = 11330;
|
||||
|
||||
// 模拟订单状态数据
|
||||
if (data.uncompletedOrders === undefined) data.uncompletedOrders = 28;
|
||||
if (data.notArrivedOrders === undefined) data.notArrivedOrders = 28;
|
||||
if (data.unsoldOrders === undefined) data.unsoldOrders = 6;
|
||||
if (data.completedOrders === undefined) data.completedOrders = 22;
|
||||
|
||||
renderSalesOverview(data);
|
||||
},
|
||||
error: function() {
|
||||
renderSalesOverview({});
|
||||
const data = {};
|
||||
// 模拟测试数据
|
||||
data.toalProcurementAmount = 423536.29;
|
||||
data.toalSalesAmount = 417832.33;
|
||||
data.profits = 31525;
|
||||
data.accountsReceivable = 215215.25;
|
||||
data.uncollectedPayment = 564231.32;
|
||||
data.actualPayment = 335421.56;
|
||||
data.totalPurchase = 2200;
|
||||
data.totalOrder = 35;
|
||||
data.totalSales = 55;
|
||||
|
||||
// 模拟合计总数数据
|
||||
data.totalCattle = 12580;
|
||||
data.inTransitCattle = 1250;
|
||||
data.deliveredCattle = 11330;
|
||||
|
||||
// 模拟订单状态数据
|
||||
data.uncompletedOrders = 28;
|
||||
data.notArrivedOrders = 28;
|
||||
data.unsoldOrders = 6;
|
||||
data.completedOrders = 22;
|
||||
|
||||
renderSalesOverview(data);
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -353,47 +385,12 @@
|
||||
fetchSalesOverview();
|
||||
})
|
||||
|
||||
//交通流量
|
||||
var myChart1 = echarts.init(document.getElementById('main1'));
|
||||
myChart1.setOption(option1);
|
||||
//交通工具流量
|
||||
var myChart2 = echarts.init(document.getElementById('main2'));
|
||||
myChart2.setOption(option2);
|
||||
//本月发生事件
|
||||
var myChart3 = echarts.init(document.getElementById('main3'));
|
||||
myChart3.setOption(option3);
|
||||
var myChart31 = echarts.init(document.getElementById('main31'));
|
||||
myChart31.setOption(option31);
|
||||
var mySwiper1 = new Swiper('.visual_swiper1', {
|
||||
autoplay: true,//可选选项，自动滑动
|
||||
speed:800,//可选选项，滑动速度
|
||||
autoplay: {
|
||||
delay: 5000,//1秒切换一次
|
||||
},
|
||||
})
|
||||
//收费站收费排行
|
||||
var myChart4 = echarts.init(document.getElementById('main4'));
|
||||
myChart4.setOption(option4);
|
||||
var myChart41 = echarts.init(document.getElementById('main41'));
|
||||
myChart41.setOption(option41);
|
||||
var mySwiper2 = new Swiper('.visual_swiper2', {
|
||||
autoplay: true,//可选选项，自动滑动
|
||||
direction : 'vertical',//可选选项，滑动方向
|
||||
speed:2000,//可选选项，滑动速度
|
||||
})
|
||||
//今日实时收费
|
||||
var myChart5 = echarts.init(document.getElementById('main5'));
|
||||
myChart5.setOption(option5);
|
||||
var myChart6 = echarts.init(document.getElementById('main6'));
|
||||
myChart6.setOption(option6);
|
||||
var myChart7 = echarts.init(document.getElementById('main7'));
|
||||
myChart7.setOption(option7);
|
||||
|
||||
|
||||
//中间地图
|
||||
var myChart8 = echarts.init(document.getElementById('main8'));
|
||||
myChart8.setOption(option8);
|
||||
//收费站收费量
|
||||
var myChart9 = echarts.init(document.getElementById('main9'));
|
||||
myChart9.setOption(option9);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user