pfz_smile
/
depositroy
2
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

为物料明细页面添加出入库图表明细

lwx_dev
erdanergou 2 years ago
parent
ec064eb339
commit
d41bbf6734
5 changed files with 232 additions and 152 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      src/main/java/com/dreamchaser/depository_manage/controller/DepositoryRecordController.java
  2. 2
      src/main/java/com/dreamchaser/depository_manage/service/DepositoryRecordService.java
  3. 34
      src/main/java/com/dreamchaser/depository_manage/service/impl/DepositoryRecordServiceImpl.java
  4. 297
      src/main/resources/templates/pages/depository/Inventory-view_back.html
  5. 22
      src/test/java/com/dreamchaser/depository_manage/LineChartForInventoryTest.java

29
src/main/java/com/dreamchaser/depository_manage/controller/DepositoryRecordController.java
View File

@ -2316,21 +2316,28 @@ public class DepositoryRecordController {
// 获取至今的日期时间戳 // 获取至今的日期时间戳
List<Long> dayTimeSpaces = ObjectFormatUtil.objToList(monthBeginToNow.get("dayTimeSpace"), Long.class); List<Long> dayTimeSpaces = ObjectFormatUtil.objToList(monthBeginToNow.get("dayTimeSpace"), Long.class);
// 获取当前物料的入库总额与数量 // 获取当前物料的入库总额与数量
Map<String, List<Double>> resultForApplicationIn = depositoryRecordService.getApplicationByMaterial(id, dayTimeSpaces, 1); Map<String, Object> seriesForApplicationIn = depositoryRecordService.getApplicationByMaterial(id, dayTimeSpaces, 1);
List<Double> amountListForIn = resultForApplicationIn.get("amountList"); Object amountItemForIn = seriesForApplicationIn.get("amountItem");
List<Double> countListForIn = resultForApplicationIn.get("countList"); Object countItemForIn = seriesForApplicationIn.get("countItem");
// 获取当前物料的出库总额与数量 // 获取当前物料的出库总额与数量
Map<String, List<Double>> resultForApplicationOut = depositoryRecordService.getApplicationByMaterial(id, dayTimeSpaces, 2); Map<String, Object> seriesForApplicationOut = depositoryRecordService.getApplicationByMaterial(id, dayTimeSpaces, 2);
List<Double> amountListForOut = resultForApplicationOut.get("amountList"); Object amountItemForOut = seriesForApplicationOut.get("amountItem");
List<Double> countListForOut = resultForApplicationOut.get("countList"); Object countItemForOut = seriesForApplicationOut.get("countItem");
Map<String, Object> result = new HashMap<>(); Map<String, Object> result = new HashMap<>();
result.put("applicationInAmount", amountListForIn); result.put("amountItemForIn",amountItemForIn);
result.put("applicationInCount", countListForIn); result.put("countItemForIn",countItemForIn);
result.put("applicationOutAmount", amountListForOut); result.put("amountItemForOut",amountItemForOut);
result.put("applicationOutCount", countListForOut); result.put("countItemForOut",countItemForOut);
result.put("dayNames", dayNames); Map<String,List<String>> legendItem = new HashMap<>();
List<String> legends = new ArrayList<>();
legends.add("count");
legends.add("amount");
legendItem.put("data",legends);
result.put("legend",legendItem);
result.put("dayNames",dayNames);
return new RestResponse(result); return new RestResponse(result);
} }

2
src/main/java/com/dreamchaser/depository_manage/service/DepositoryRecordService.java
View File

@ -487,7 +487,7 @@ public interface DepositoryRecordService {
* @param type 查询类型 1入库2出库 * @param type 查询类型 1入库2出库
* @return * @return
*/ */
Map<String,List<Double>> getApplicationByMaterial(Integer id, List<Long> days,Integer type); Map<String,Object> getApplicationByMaterial(Integer id, List<Long> days,Integer type);

34
src/main/java/com/dreamchaser/depository_manage/service/impl/DepositoryRecordServiceImpl.java
View File

@ -2074,13 +2074,13 @@ public class DepositoryRecordServiceImpl implements DepositoryRecordService {
* @return * @return
*/ */
@Override @Override
public Map<String, List<Double>> getApplicationByMaterial(Integer id, List<Long> days, Integer type) { public Map<String, Object> getApplicationByMaterial(Integer id, List<Long> days, Integer type) {
// 声明结果集 // 声明结果集
Map<String, List<Double>> result = new HashMap<>(); Map<String, Object> result = new HashMap<>();
// 声明总数列表 // 声明总数列表
List<Double> countList = new ArrayList<>(); List<Object> countList = new ArrayList<>();
// 声明总额列表 // 声明总额列表
List<Double> amountList = new ArrayList<>(); List<Object> amountList = new ArrayList<>();
// 获取对应物料 // 获取对应物料
Inventory inventoryById = materialMapper.findInventoryById(id); Inventory inventoryById = materialMapper.findInventoryById(id);
// 声明用于查询的map // 声明用于查询的map
@ -2117,8 +2117,10 @@ public class DepositoryRecordServiceImpl implements DepositoryRecordService {
countList.add(countProcessed); countList.add(countProcessed);
amountList.add(amount); amountList.add(amount);
} }
result.put("amountList", amountList); Map<String, Object> amountItem = createStackedAreaChartSeriesItem("amount", amountList);
result.put("countList", countList); Map<String, Object> countItem = createStackedAreaChartSeriesItem("count", countList);
result.put("amountItem",amountItem);
result.put("countItem",countItem);
return result; return result;
} }
@ -5618,6 +5620,26 @@ public class DepositoryRecordServiceImpl implements DepositoryRecordService {
return null; return null;
} }
/**
* 用于构造堆叠面积图的series项目
* @param name 当前项目名称
* @param data 数据
* @return
*/
public Map<String, Object> createStackedAreaChartSeriesItem(String name, List<Object> data) {
Map<String, Object> result = new HashMap<>();
result.put("name", name);
result.put("type", "line");
result.put("stack", "Total");
Map<String, Object> areaStyle = new HashMap<>();
result.put("areaStyle", areaStyle);
Map<String, Object> emphasis = new HashMap<>();
emphasis.put("focus", "series");
result.put("emphasis", emphasis);
result.put("data", data);
return result;
}
/** /**
* 用于计算当前主记录下的总额与数量 * 用于计算当前主记录下的总额与数量
*/ */

297
src/main/resources/templates/pages/depository/Inventory-view_back.html
View File

@ -20,142 +20,156 @@
} }
.myEchart {
min-width: 500px;
min-height: 500px;
margin: 0 2px;
}
</style> </style>
</head> </head>
<body> <body>
<input type="text" id="id" th:value="${record.getId()}" name="id" style="display: none"> <input type="text" id="id" th:value="${record.getId()}" name="id" style="display: none">
<div class="layui-row layui-col-space1"> <div class="layui-fluid">
<div class="layui-col-xs12 layui-col-md8"> <div class="layui-row layui-col-space1">
<div class="grid-demo grid-demo-bg1"> <div class="layui-row layui-col-xs12 layui-col-md8">
<div class="panel panel-info"> <div>
<div class="panel-heading">物料基本信息 <div class="panel panel-info">
<button type="button" th:attr="mid=${record.getMid()}" lay-on="editMaterialInfo" <div class="panel-heading">物料基本信息
th:style="'display:'+${display}" <button type="button" th:attr="mid=${record.getMid()}" lay-on="editMaterialInfo"
class="editButton layui-btn layui-btn-sm layui-btn-primary"> th:style="'display:'+${display}"
<i class="layui-icon layui-icon-edit"></i> class="editButton layui-btn layui-btn-sm layui-btn-primary">
</button> <i class="layui-icon layui-icon-edit"></i>
</div> </button>
<div class="panel-body"> </div>
<table class="table">
<tbody>
<tr>
<td th:text="'物料编码：'+${record.getCode()}">物料编码：</td>
<td th:text="'物料名称：'+${record.getMname()}">物料名称：</td>
<td th:text="'规格型号：'+${record.getVersion()}">规格型号：</td>
<td th:text="'物料材质：'+${record.getTexture()}">物料材质：</td>
</tr>
<tr>
<td th:text="'物料品牌：'+${record.getBrand()}">物料品牌：</td>
<td th:text="'物料类型：'+${record.getTypeName()}">物料类型：</td>
<td>
计量单位：
<span th:text="${record.getUnit()}"></span>
<span th:each="splitInfo,iterStar:${record.getSplitInfoList()}"
th:text="${splitInfo.getNewUnit()}"></span>
</td>
<td th:text="'物料单价：'+${record.getPrice()}" th:style="'display:'+${display}">物料单价：</td>
</tr>
<tr>
<td th:text="'物料备注：'+${record.getIremark()}">物料备注：</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6 layui-col-md4">
<div class="grid-demo">
<div class="panel panel-success">
<div class="panel-heading">库存基本信息</div>
<div class="panel-body">
<table class="table">
<caption th:text="${record.getDepositoryName()}">所属仓库：</caption>
<caption th:text="'备注：'+${record.getIremark()}">备注：</caption>
<thead>
<tr>
<td>所处库位</td>
<td>计量单位</td>
<td>对应数量</td>
<td th:style="'display:'+${display}">金额</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr type="button"
th:each="materialAndPlace,iterStar:${record.getMaterialAndPlaceList()}">
<td>
<button onclick="changePlaceCode(this)"
th:text="${materialAndPlace.getKingdeecode()}"
th:attr="id=${materialAndPlace.getId()}"
class="layui-btn layui-btn-primary layui-btn-sm"></button>
</td>
<td>
<select class="mySelect" onchange="changeUnitForQuantity(this)"
th:attr="id='materialUnit'+${materialAndPlace.getId()}">
<option th:text="${record.getUnit()}" value="-1"
class="myOption"></option>
<option class="myOption" th:each="splitInfo,iterStar:${record.getSplitInfoList()}"
th:value="${splitInfo.getNewUnit()}"
th:text="${splitInfo.getNewUnit()}"></option>
</select>
</td>
<td>
<span th:attr="id='quantity'+${materialAndPlace.getId()}"
th:text="${materialAndPlace.getInventory()}"></span>
</td>
<td th:style="'display:'+${display}">
<span th:attr="id='amounts'+${materialAndPlace.getId()}"
th:text="${materialAndPlace.getAmount()}"></span>
</td>
<td>
<a class="layui-btn layui-btn-xs"
th:attr="mid=${materialAndPlace.getIid()},depositoryId=${materialAndPlace.getDepository_id()},placeId=${materialAndPlace.getPid()}"
lay-on="applicationIn">入库</a>
<a class="layui-btn layui-btn-xs"
th:attr="code=${materialAndPlace.getMcode()},depositoryId=${materialAndPlace.getDepository_id()}"
lay-on="applicationOut">出库</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6 layui-col-md12">
<div class="panel panel-primary">
<div class="layui-col-xs4">
<div class="panel panel-warning">
<div class="panel-heading">物料入库明细</div>
<div class="panel-body"> <div class="panel-body">
<div id="echarts-line"> <table class="table">
</div> <tbody>
<tr>
<td th:text="'物料编码：'+${record.getCode()}">物料编码：</td>
<td th:text="'物料名称：'+${record.getMname()}">物料名称：</td>
<td th:text="'规格型号：'+${record.getVersion()}">规格型号：</td>
<td th:text="'物料材质：'+${record.getTexture()}">物料材质：</td>
</tr>
<tr>
<td th:text="'物料品牌：'+${record.getBrand()}">物料品牌：</td>
<td th:text="'物料类型：'+${record.getTypeName()}">物料类型：</td>
<td>
计量单位：
<span th:text="${record.getUnit()}"></span>
<span th:each="splitInfo,iterStar:${record.getSplitInfoList()}"
th:text="${splitInfo.getNewUnit()}"></span>
</td>
<td th:text="'物料单价：'+${record.getPrice()}" th:style="'display:'+${display}">物料单价：</td>
</tr>
<tr>
<td th:text="'物料备注：'+${record.getIremark()}">物料备注：</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
<div class="layui-col-xs4"> <div>
<div class="panel panel-warning"> <div class="panel panel-primary">
<div class="panel-heading">物料出库明细</div> <div class="panel-heading">数据图标
</div>
<div class="panel-body"> <div class="panel-body">
<div class="layui-col-xs4 myEchart">
<div class="panel panel-warning">
<div class="panel-heading">物料入库明细</div>
<div class="panel-body">
<div id="echarts-line-in" style="height:500px;width: 500px;">
</div>
</div>
</div>
</div>
<div class="layui-col-xs4 myEchart">
<div class="panel panel-warning">
<div class="panel-heading">物料出库明细</div>
<div class="panel-body">
<div id="echarts-line-out" style="height: 500px;width: 500px">
</div>
</div>
</div>
</div>
<div class="layui-col-xs4 myEchart">
<div class="panel panel-warning">
<div class="panel-heading">物料库存明细</div>
<div class="panel-body">
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="layui-col-xs4"> </div>
<div class="panel panel-warning"> <div class="layui-col-xs6 layui-col-md4">
<div class="panel-heading">物料库存明细</div> <div class="">
<div class="panel panel-success">
<div class="panel-heading">库存基本信息</div>
<div class="panel-body"> <div class="panel-body">
<table class="table">
<caption th:text="${record.getDepositoryName()}">所属仓库：</caption>
<caption th:text="'备注：'+${record.getIremark()}">备注：</caption>
<thead>
<tr>
<td>所处库位</td>
<td>计量单位</td>
<td>对应数量</td>
<td th:style="'display:'+${display}">金额</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr type="button"
th:each="materialAndPlace,iterStar:${record.getMaterialAndPlaceList()}">
<td>
<button onclick="changePlaceCode(this)"
th:text="${materialAndPlace.getKingdeecode()}"
th:attr="id=${materialAndPlace.getId()}"
class="layui-btn layui-btn-primary layui-btn-sm"></button>
</td>
<td>
<select class="mySelect" onchange="changeUnitForQuantity(this)"
th:attr="id='materialUnit'+${materialAndPlace.getId()}">
<option th:text="${record.getUnit()}" value="-1"
class="myOption"></option>
<option class="myOption"
th:each="splitInfo,iterStar:${record.getSplitInfoList()}"
th:value="${splitInfo.getNewUnit()}"
th:text="${splitInfo.getNewUnit()}"></option>
</select>
</td>
<td>
<span th:attr="id='quantity'+${materialAndPlace.getId()}"
th:text="${materialAndPlace.getInventory()}"></span>
</td>
<td th:style="'display:'+${display}">
<span th:attr="id='amounts'+${materialAndPlace.getId()}"
th:text="${materialAndPlace.getAmount()}"></span>
</td>
<td>
<a class="layui-btn layui-btn-xs"
th:attr="mid=${materialAndPlace.getIid()},depositoryId=${materialAndPlace.getDepository_id()},placeId=${materialAndPlace.getPid()}"
lay-on="applicationIn">入库</a>
<a class="layui-btn layui-btn-xs"
th:attr="code=${materialAndPlace.getMcode()},depositoryId=${materialAndPlace.getDepository_id()}"
lay-on="applicationOut">出库</a>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script src="/static/lib/layui-v2.8.6/layui.js" charset="utf-8"></script> <script src="/static/lib/layui-v2.8.6/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> <script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/static/lib/echarts/echarts.js" charset="utf-8"></script> <script src="/static/lib/echarts/echarts.js" charset="utf-8"></script>
@ -349,8 +363,9 @@
// 柱状图 // 柱状图
var echartLineChart = echarts.init(document.getElementById('echarts-line')); var echartLineChartIn = echarts.init(document.getElementById('echarts-line-in'));
var optionLineChart = { var echartLineChartOut = echarts.init(document.getElementById('echarts-line-out'));
var optionLineChartIn = {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
@ -359,8 +374,23 @@
yAxis: { yAxis: {
type: 'value' type: 'value'
}, },
tooltip:{ tooltip: {
trigger:"axis", trigger: "axis",
},
series: []
};
var optionLineChartOut = {
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: "axis",
}, },
series: [] series: []
@ -371,7 +401,7 @@
type: 'post', type: 'post',
async: true, async: true,
dataType: "json", dataType: "json",
data:JSON.stringify({"id":id}), data: JSON.stringify({"id": id}),
contentType: "application/json;charset=utf-8", contentType: "application/json;charset=utf-8",
complete: function (XHR, TS) { complete: function (XHR, TS) {
layer.close(this.layerIndex); layer.close(this.layerIndex);
@ -383,13 +413,32 @@
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
}, },
success: function (result) { success: function (result) {
console.log(result); let data = result.data;
let dayNames = data["dayNames"];
let amountItemForIn = data["amountItemForIn"];
let countItemForIn = data["countItemForIn"];
let amountItemForOut = data["amountItemForOut"];
let countItemForOut = data["countItemForOut"];
let legendItem = data["legend"];
let seriesInItem = [];
let seriesOutItem = [];
seriesInItem.push(amountItemForIn);
seriesInItem.push(countItemForIn);
seriesOutItem.push(amountItemForOut);
seriesOutItem.push(countItemForOut);
optionLineChartIn.series = seriesInItem;
optionLineChartOut.series = seriesOutItem;
optionLineChartIn.xAxis.data = dayNames;
optionLineChartIn.legend = legendItem;
optionLineChartOut.legend = legendItem;
optionLineChartOut.xAxis.data = dayNames;
echartLineChartIn.setOption(optionLineChartIn);
echartLineChartOut.setOption(optionLineChartOut);
} }
}) })
}); });
</script> </script>

22
src/test/java/com/dreamchaser/depository_manage/LineChartForInventoryTest.java
View File

@ -42,20 +42,22 @@ public class LineChartForInventoryTest {
// 获取至今的日期时间戳 // 获取至今的日期时间戳
List<Long> dayTimeSpaces = ObjectFormatUtil.objToList(monthBeginToNow.get("dayTimeSpace"), Long.class); List<Long> dayTimeSpaces = ObjectFormatUtil.objToList(monthBeginToNow.get("dayTimeSpace"), Long.class);
// 获取当前物料的入库总额与数量 // 获取当前物料的入库总额与数量
Map<String, List<Double>> resultForApplicationIn = depositoryRecordService.getApplicationByMaterial(id, dayTimeSpaces, 1); Map<String, Object> seriesForApplicationIn = depositoryRecordService.getApplicationByMaterial(id, dayTimeSpaces, 1);
List<Double> amountListForIn = resultForApplicationIn.get("amountList"); Object amountItemForIn = seriesForApplicationIn.get("amountItem");
List<Double> countListForIn = resultForApplicationIn.get("countList"); Object countItemForIn = seriesForApplicationIn.get("countItem");
// 获取当前物料的出库总额与数量 // 获取当前物料的出库总额与数量
Map<String, List<Double>> resultForApplicationOut = depositoryRecordService.getApplicationByMaterial(id, dayTimeSpaces, 2); Map<String, Object> seriesForApplicationOut = depositoryRecordService.getApplicationByMaterial(id, dayTimeSpaces, 2);
List<Double> amountListForOut = resultForApplicationOut.get("amountList"); Object amountItemForOut = seriesForApplicationOut.get("amountItem");
List<Double> countListForOut = resultForApplicationOut.get("countList"); Object countItemForOut = seriesForApplicationOut.get("countItem");
Map<String, Object> result = new HashMap<>(); Map<String, Object> result = new HashMap<>();
result.put("applicationInAmount", amountListForIn); result.put("amountItemForIn",amountItemForIn);
result.put("applicationInCount", countListForIn); result.put("countItemForIn",countItemForIn);
result.put("applicationOutAmount", amountListForOut); result.put("amountItemForOut",amountItemForOut);
result.put("applicationOutCount", countListForOut); result.put("countItemForOut",countItemForOut);
result.put("dayNames",dayNames);
return new RestResponse(result); return new RestResponse(result);
} }

Write Preview
Loading…
Cancel
Save