root
/
smart-erp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[feat] 

首页页面
修改成品料号统计分析图表定义，添加查询方法；
修改周产量图表定义，新增查询方法及图表数据渲染方法；新增获取时间及日期格式转换方法；
修改主页个人中心按钮为当前登录名；
dev
王晓迪 2 days ago
parent
bf6502d616
commit
9816a92526
2 changed files with 468 additions and 158 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      ruoyi-admin/src/main/resources/templates/index.html
  2. 624
      ruoyi-admin/src/main/resources/templates/main.html

2
ruoyi-admin/src/main/resources/templates/index.html
View File

@ -181,7 +181,7 @@
<li>
<div class="dropdown drp-user">
<a href="javascript:" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon feather icon-settings"></i>
[[${user.loginName}]]
</a>
<div class="dropdown-menu dropdown-menu-right profile-notification">
<div class="pro-head">

624
ruoyi-admin/src/main/resources/templates/main.html
View File

@ -31,65 +31,58 @@
</div>
</div>
</div>
<div class="row">
<div class="row" >
<!--成品料号分析统计-->
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>成品料号分析统计</h5>
</div>
<div class="ibox-content echarts">
<p>
<input class="inputss" type="date" value="2023-11-11"/> - <input class="inputss" type="date" value="2023-11-12"/>
<button class="inputss" >top10</button><button class="inputss">top50</button>
</p>
<table class="table table-hover table-light" style="width: 100%;font-size: 16px">
<thead>
<tr class="uppercase">
<th style="width: 33%">料号</th>
<th style="width: 33%;">物料名称</th>
<th style="width: 25%">占比</th>
</tr>
</thead>
<tr>
<td><a href="javascript:;" class="primary-link">3325454555</a></td>
<td>yk测试-原材料</td>
<td><span class="bold theme-font">80%</span></td>
</tr>
<tr>
<td><a href="javascript:;" class="primary-link">1000000000</a></td>
<td>yk测试-原材料2</td>
<td><span class="bold theme-font">67%</span></td>
</tr>
<tr>
<td><a href="javascript:;" class="primary-link">3325454564</a></td>
<td>yk测试-原材料3</td>
<td><span class="bold theme-font">98%</span></td>
</tr>
<tr>
<td><a href="javascript:;" class="primary-link">3325454554</a></td>
<td>yk测试-原材料4</td>
<td><span class="bold theme-font">58%</span></td>
</tr>
</table>
<div class="ibox-title content-header">
<p>
<input class="inputss" type="date" id="finalProductBeginTime" /> - <input class="inputss" id="finalProductEndTime" type="date"/>
<button class="inputss" onclick="getFinalProduct()">搜索</button><button class="inputss" onclick="getFinalProduct(10)">top10</button><button class="inputss" onclick="getFinalProduct(50)">top50</button>
</p>
</div>
<div class="ibox-content echarts" style="overflow-y: auto">
<table class="table table-hover table-light" id="materialTable" style="width: 100%;font-size: 16px">
<thead>
<tr class="uppercase">
<th style="width: 33%">料号</th>
<th style="width: 33%;">物料名称</th>
<th style="width: 25%">占比</th>
</tr>
</thead>
<tbody>
<!--动态添加行-->
</tbody>
</table>
</div>
</div>
</div>
<!--周产量-->
<div class="col-sm-6">
<div class="ibox float-e-margins">
<div class="ibox float-e-margins" style="padding-bottom: 5%;">
<div class="ibox-title">
<h5>周产量</h5>
</div>
<div class="ibox-content echarts">
<p>
<input class="inputss" type="date" value="2023-11-11"/> - <input class="inputss" type="date" value="2023-11-12"/>
</p>
<div id="classificationPassRate" style="width:100%;text-align: center;height: 80%"></div>
<div class="ibox-title content-header">
<p>
<input class="inputss" type="date" id="productionBeginTime"/> - <input class="inputss" type="date" id="productionEndTime"/>
<button class="inputss" onclick="getWeekProduction()">搜索</button>
</p>
</div>
<div id="classificationPassRate" style="width:100%;text-align: center;height: 100%;display: flex;"></div>
</div>
</div>
</div>
</div>
<!--生产订单周期-->
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
@ -106,7 +99,7 @@
<tr class="uppercase">
<th style="width: 12%;">生产订单</th>
<th style="width: 12%;">料号</th>
<th style="width: 12%">物业名称</th>
<th style="width: 12%">物料名称</th>
<th style="width: 12%">业务部</th>
<th style="width: 12%;">工程部</th>
<th style="width: 12%">采购部</th>
@ -170,6 +163,46 @@
<!-- 进行中订单数量-->
<script type="text/javascript">
var oderprefix = ctx + "system/makeorder";
/*周产量x轴区间*/
var weekRangeStr = [];
/*周产量图表定义*/
var classificationPassRate;
// 获取当前时间
var nowDate = new Date();
// 计算一个月前的日期
var oneMonthAgo = new Date(nowDate);
oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
/*设置初始日期（默认最近一个月）*/
setOriginTime();
// 格式化日期为 "yyyy-MM-dd"
function formatDate(date) {
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以需要加1
var day = ('0' + date.getDate()).slice(-2);
return `${year}-${month}-${day}`;
}
// 格式化日期为 "MM.dd"
function formatDateWithoutYear(date) {
var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以需要加1
var day = ('0' + date.getDate()).slice(-2);
return `${month}.${day}`;
}
/*设置初始日期*/
function setOriginTime(){
/*成品料号统计分析*/
$("#finalProductBeginTime").val(formatDate(oneMonthAgo));
$("#finalProductEndTime").val(formatDate(nowDate));
getFinalProduct();
/*周产量*/
$("#productionBeginTime").val(formatDate(oneMonthAgo));
$("#productionEndTime").val(formatDate(nowDate));
initWeekProductionChart();
getWeekProduction();
}
$.ajax({
url: oderprefix + "/ByNoFinsh",
method:'get',
@ -183,7 +216,283 @@
$.modal.error("服务器出错，请联系管理员");
}
})
</script>
// <!--成品料号分析统计-->
function getFinalProduct(limit = null){
var beginDate = $("#finalProductBeginTime").val();
var endDate = $("#finalProductEndTime").val();
var data = {
beginDate: beginDate,
endDate: endDate,
}
if(limit != null){
data.limit = limit
}
$.ajax({
url: '/system/makeorderbom/getIndexList',
method: 'GET',
data: data,
dataType: 'json',
success: function(responseData) {
var tbody = $('#materialTable tbody');
tbody.empty(); // 清空现有内容
// 遍历数据并生成表格行
responseData.forEach(function(item) {
var row = `<tr>
<td>${item.materialNo}</td>
<td>${item.materialName}</td>
<td>${item.orderRate}%</td>
</tr>`;
tbody.append(row);
});
if(responseData.length === 0){
console.log("response:"+responseData.length);
var row = `<tr><td colspan="3" style="text-align:center;color: #0d8ddb">该段时间内暂无物料数据</td></tr>`;
tbody.append(row);
}
},
error: function(error) {
console.error('Error fetching data:', error);
}
});
}
/*获取时间段（根据自然周划分）*/
function getWeekRangesPastMonth() {
const result = [];
var weekStartStr = $("#productionBeginTime").val();
var weekStart = new Date(weekStartStr);
var weekEndStr = $("#productionEndTime").val();
var weekEndTime = new Date(weekEndStr);
// 检查是否成功创建了Date对象
if (isNaN(weekStart.getTime())||isNaN(weekEndTime.getTime())) {
console.error("无法识别的日期格式，请确保输入正确的日期。");
} else {
// 计算该日期所在周的第一天（即星期一）
const dayOfWeekStart = weekStart.getDay() || 7; // 如果是周日，则返回7
weekStart.setDate(weekStart.getDate() - (dayOfWeekStart - 1));
}
while (weekStart < weekEndTime) {
const weekEnd = new Date(weekStart.getTime() + (6 * 24 * 60 * 60 * 1000)); // 每周结束于周日
// 如果周末超过了当前日期，则调整为当前日期
if (weekEnd > nowDate) {
weekEnd.setTime(nowDate.getTime());
}
result.push({
start: new Date(weekStart), // 使用new Date确保日期对象是独立的
end: new Date(weekEnd)
});
// 移动到下一周
weekStart.setDate(weekStart.getDate() + 7);
}
return result;
}
/*获取周产量*/
function getWeekProduction(){
const weekRanges = getWeekRangesPastMonth();
var weekRangeStr = [];
weekRanges.forEach(week => {
var weekStr = formatDateWithoutYear(week.start) + '~' + formatDateWithoutYear(week.end);
weekRangeStr.push(weekStr);
});
classificationPassRate.setOption({
xAxis: {
data: weekRangeStr // 更新 x 轴的数据
},
});
var beginDate = $("#productionBeginTime").val();
var endDate = $("#productionEndTime").val();
var data = {
beginDate: beginDate,
endDate: endDate,
}
var increments = [];
$.ajax({
url: '/warehouse/storageOrder/getIndexList',
method: 'GET',
data: data,
dataType: 'json',
success: function(responseData) {
increments.push(0);
for (var i = 1; i < responseData.length; i++) {
var increment = responseData[i] - responseData[i - 1];
increments.push(increment);
}
classificationPassRate.setOption({
series:[
{
name: "增量",
type: "line",
smooth: false, // 线条是否平滑
itemStyle: {
normal: {
color: "#23c6c8",
label: {
show: true,
position: "top",
formatter: function(p) {
return p.value > 0 ? (p.value) : '';
}
}
}
},
data: increments,
},
{
name: '数量',
data: responseData
}
]
});
},
error: function(error) {
console.error('Error fetching data:', error);
}
});
}
function initWeekProductionChart(){
var classificationPassRateDom = document.getElementById('classificationPassRate');
classificationPassRate = echarts.init(classificationPassRateDom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var classificationPassRateOption = {
title: {
textStyle: {
align: 'center',
color: '#fff',
fontSize: 20,
},
top: '5%',
left: '5%',
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true
}
}
},
xAxis: {
name:'时间',
type: 'category',
data: [],
axisTick: {show:true},
axisLabel: {
show: true,
fontSize: 10, //设置坐标轴文本标签的字体大小
},
axisLine: {
symbol: ['none','arrow'],
symbolSize: [4, 4],
show: true, //隐藏X轴轴线
/*lineStyle: {
color: 'blue'
}*/
},
},
yAxis: {
name:'数量',
top: "1%",
axisTick: {
show: true //隐藏X轴刻度
},
type: 'value',
axisLabel: {
show: true,
fontSize: 10, //设置坐标轴文本标签的字体大小
},
axisLine: {
symbol: ['none','arrow'],
symbolSize: [4, 4],
show: true, //隐藏X轴轴线
/*lineStyle: {
color: 'blue'
}*/
},
},
legend: {
data: ["增量", "数量"],
right:"1%",
top: "1%",
textStyle: {
color: "black"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true
},
dataZoom: [
{
type: 'slider', // 滑动条型数据区域缩放组件
startValue: 0, // 初始时显示的第一个柱子的索引
endValue: 3, // 初始时显示的最后一个柱子的索引（即前4个柱子）
height: 10,
top: '85%', // 将滑动条放置在图表下方
showDataShadow: false,
textStyle: false,
},
{
type: 'inside', // 支持鼠标滚轮和触控板缩放和平移
startValue: 0,
endValue: 3,
showDataShadow: false,
}
],
series: [
{
name: "增量",
type: "line",
itemStyle: {
normal: {
color: "#23c6c8",
label: {
show: true,
position: "top",
formatter: function(p) {
return p.value > 0 ? (p.value) : '';
}
}
}
},
},
{
name: "数量",
type: "bar",
barWidth: '20%',
areaStyle:{
color: "black"
},
itemStyle: {
normal: {
color:"#1c84c6"
}
},
}
]
};
if (classificationPassRateOption && typeof classificationPassRateOption === 'object') {
classificationPassRate.setOption(classificationPassRateOption);
}
window.addEventListener('resize', classificationPassRate.resize);
}
</script>
<!-- 已完成订单数量-->
<script type="text/javascript">
var oderprefix = ctx + "system/makeorder";
@ -208,6 +517,7 @@
renderer: 'canvas',
useDirtyRect: false
});
var productYieldOption = {
title: {
text: '总产量',
@ -688,120 +998,120 @@
window.addEventListener('resize', passRate.resize);
</script>
<!--产品分类合格率统计-->
<!--周产量统计-->
<script type="text/javascript">
var classificationPassRateDom = document.getElementById('classificationPassRate');
var classificationPassRate = echarts.init(classificationPassRateDom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var classificationPassRateOption = {
title: {
textStyle: {
align: 'center',
color: '#fff',
fontSize: 20,
},
top: '5%',
left: '5%',
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true
}
}
},
xAxis: {
name:'时间',
type: 'category',
data: ['11.13~11-19','11.20~11-26','11-27~12-03','12.04~12-10'],
axisTick: {show:true},
axisLabel: {
show: true,
fontSize: 10, //设置坐标轴文本标签的字体大小
},
axisLine: {
symbol: ['none','arrow'],
symbolSize: [4, 4],
show: true, //隐藏X轴轴线
/*lineStyle: {
color: 'blue'
}*/
},
},
yAxis: {
name:'数量',
top: "1%",
axisTick: {
show: true //隐藏X轴刻度
},
type: 'value',
axisLabel: {
show: false,
},
axisLine: {
symbol: ['none','arrow'],
symbolSize: [4, 4],
show: true, //隐藏X轴轴线
/*lineStyle: {
color: 'blue'
}*/
},
},
legend: {
data: ["增速", "数量"],
right:"1%",
top: "1%",
textStyle: {
color: "black"
}
},
grid: {
bottom:'15%',
},
series: [
{
name: "增速",
type: "line",
barWidth: '20%',
"itemStyle": {
"normal": {
"color": "#23c6c8",
"barBorderRadius": 20,
"label": {
"show": true,
"position": "top",
formatter: function(p) {
return p.value > 0 ? (p.value) : '';
}
}
}
},
data: [441, 453, 486, 534]
},
{
name: "数量",
type: "bar",
barWidth: '20%',
areaStyle:{
color: "black"
},
itemStyle: {
normal: {
color:"#1c84c6"
}
},
data: [441, 453, 486, 534]
}
]
};
if (classificationPassRateOption && typeof classificationPassRateOption === 'object') {
classificationPassRate.setOption(classificationPassRateOption);
}
window.addEventListener('resize', classificationPassRate.resize);
// var classificationPassRateDom = document.getElementById('classificationPassRate');
// var classificationPassRate = echarts.init(classificationPassRateDom, null, {
// renderer: 'canvas',
// useDirtyRect: false
// });
// var classificationPassRateOption = {
// title: {
// textStyle: {
// align: 'center',
// color: '#fff',
// fontSize: 20,
// },
// top: '5%',
// left: '5%',
// },
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// label: {
// show: true
// }
// }
// },
// xAxis: {
// name:'时间',
// type: 'category',
// data: ['11.13~11-19','11.20~11-26','11-27~12-03','12.04~12-10'],
// axisTick: {show:true},
// axisLabel: {
// show: true,
// fontSize: 10, //设置坐标轴文本标签的字体大小
// },
// axisLine: {
// symbol: ['none','arrow'],
// symbolSize: [4, 4],
// show: true, //隐藏X轴轴线
// /*lineStyle: {
// color: 'blue'
// }*/
// },
// },
// yAxis: {
// name:'数量',
// top: "1%",
// axisTick: {
// show: true //隐藏X轴刻度
// },
// type: 'value',
// axisLabel: {
// show: false,
// },
// axisLine: {
// symbol: ['none','arrow'],
// symbolSize: [4, 4],
// show: true, //隐藏X轴轴线
// /*lineStyle: {
// color: 'blue'
// }*/
// },
// },
// legend: {
// data: ["增速", "数量"],
// right:"1%",
// top: "1%",
// textStyle: {
// color: "black"
// }
// },
// grid: {
// bottom:'15%',
// },
// series: [
// {
// name: "增速",
// type: "line",
// barWidth: '20%',
// "itemStyle": {
// "normal": {
// "color": "#23c6c8",
// "barBorderRadius": 20,
// "label": {
// "show": true,
// "position": "top",
// formatter: function(p) {
// return p.value > 0 ? (p.value) : '';
// }
// }
// }
// },
// data: [441, 453, 486, 534]
// },
// {
// name: "数量",
// type: "bar",
// barWidth: '20%',
// areaStyle:{
// color: "black"
// },
// itemStyle: {
// normal: {
// color:"#1c84c6"
// }
// },
// data: [441, 453, 486, 534]
// }
// ]
// };
// if (classificationPassRateOption && typeof classificationPassRateOption === 'object') {
// classificationPassRate.setOption(classificationPassRateOption);
// }
// window.addEventListener('resize', classificationPassRate.resize);
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save