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

src/main/java/com/dreamchaser/depository_manage/controller/DepositoryRecordController.java

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

src/main/java/com/dreamchaser/depository_manage/service/DepositoryRecordService.java

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

src/main/java/com/dreamchaser/depository_manage/service/impl/DepositoryRecordServiceImpl.java

@@ -2074,13 +2074,13 @@ public class DepositoryRecordServiceImpl implements DepositoryRecordService {
      * @return
      */
     @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);
         // 声明用于查询的map
@@ -2117,8 +2117,10 @@ public class DepositoryRecordServiceImpl implements DepositoryRecordService {
             countList.add(countProcessed);
             amountList.add(amount);
         }
-        result.put("amountList", amountList);
-        result.put("countList", countList);
+        Map<String, Object> amountItem = createStackedAreaChartSeriesItem("amount", amountList);
+        Map<String, Object> countItem = createStackedAreaChartSeriesItem("count", countList);
+        result.put("amountItem",amountItem);
+        result.put("countItem",countItem);
         return result;
     }
 
@@ -5618,6 +5620,26 @@ public class DepositoryRecordServiceImpl implements DepositoryRecordService {
         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;
+    }
+
     /**
      * 用于计算当前主记录下的总额与数量
      */

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

@@ -20,14 +20,21 @@
 
         }
 
+        .myEchart {
+            min-width: 500px;
+            min-height: 500px;
+            margin: 0 2px;
+        }
+
     </style>
 </head>
 
 <body>
 <input type="text" id="id" th:value="${record.getId()}" name="id" style="display: none">
-<div class="layui-row layui-col-space1">
-    <div class="layui-col-xs12 layui-col-md8">
-        <div class="grid-demo grid-demo-bg1">
+<div class="layui-fluid">
+    <div class="layui-row layui-col-space1">
+        <div class="layui-row layui-col-xs12  layui-col-md8">
+            <div>
                 <div class="panel panel-info">
                     <div class="panel-heading">物料基本信息
                         <button type="button" th:attr="mid=${record.getMid()}" lay-on="editMaterialInfo"
@@ -64,9 +71,42 @@
                     </div>
                 </div>
             </div>
+            <div>
+                <div class="panel panel-primary">
+                    <div class="panel-heading">数据图标
+                    </div>
+                    <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 class="layui-col-xs6 layui-col-md4">
-        <div class="grid-demo">
+            <div class="">
                 <div class="panel panel-success">
                     <div class="panel-heading">库存基本信息</div>
                     <div class="panel-body">
@@ -98,7 +138,8 @@
                                             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()}"
+                                        <option class="myOption"
+                                                th:each="splitInfo,iterStar:${record.getSplitInfoList()}"
                                                 th:value="${splitInfo.getNewUnit()}"
                                                 th:text="${splitInfo.getNewUnit()}"></option>
                                     </select>
@@ -127,35 +168,8 @@
                 </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 id="echarts-line">
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="layui-col-xs4">
-                <div class="panel panel-warning">
-                    <div class="panel-heading">物料出库明细</div>
-                    <div class="panel-body">
-                    </div>
-                </div>
-            </div>
-            <div class="layui-col-xs4">
-                <div class="panel panel-warning">
-                    <div class="panel-heading">物料库存明细</div>
-                    <div class="panel-body">
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
-
 <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/lib/echarts/echarts.js" charset="utf-8"></script>
@@ -349,8 +363,24 @@
 
 
         // 柱状图
-        var echartLineChart = echarts.init(document.getElementById('echarts-line'));
-        var optionLineChart = {
+        var echartLineChartIn = echarts.init(document.getElementById('echarts-line-in'));
+        var echartLineChartOut = echarts.init(document.getElementById('echarts-line-out'));
+        var optionLineChartIn = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: []
+            },
+            yAxis: {
+                type: 'value'
+            },
+            tooltip: {
+                trigger: "axis",
+            },
+            series: []
+
+        };
+        var optionLineChartOut = {
             xAxis: {
                 type: 'category',
                 boundaryGap: false,
@@ -359,8 +389,8 @@
             yAxis: {
                 type: 'value'
             },
-            tooltip:{
-                trigger:"axis",
+            tooltip: {
+                trigger: "axis",
             },
             series: []
 
@@ -371,7 +401,7 @@
             type: 'post',
             async: true,
             dataType: "json",
-            data:JSON.stringify({"id":id}),
+            data: JSON.stringify({"id": id}),
             contentType: "application/json;charset=utf-8",
             complete: function (XHR, TS) {
                 layer.close(this.layerIndex);
@@ -383,13 +413,32 @@
                 this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
             },
             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>
 

src/test/java/com/dreamchaser/depository_manage/LineChartForInventoryTest.java

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