修改界面

ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css

@@ -8,4 +8,35 @@ body {
     background-size: 100% 100%;
     color: rgba(255, 255, 255, .95);
     font: normal 100% Arial, sans-serif;
+}
+
+.yield {
+    position: absolute;
+    width: 45%;
+    height: 35%;
+    top: 15%;
+    left: 3.4%;
+}
+.LOSSClassify{
+    position: absolute;
+    width: 45%;
+    height: 20%;
+    top: 30%;
+    left: 51%;
+
+}
+.fractionDefective {
+    position: absolute;
+    width: 45%;
+    height: 35%;
+    top: 60%;
+    left: 3.4%;
+}
+
+.trackEvents {
+    position: absolute;
+    width: 45.2%;
+    height: 35%;
+    top: 60%;
+    left: 51%;
 }

ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js

@@ -0,0 +1,28 @@
+$(() => {
+
+    // 公共请求地址
+    let url = '/broad/box'
+
+    // 表格头
+    const planWorkOrderColumns = [
+        "编号", "计划数量", "完成数量", "差异值", "时间",
+    ]
+
+    // 追踪事件
+    const orderDetailsTable = new AutoScrollTable(document.getElementById("trackEvents"), planWorkOrderColumns, {width: ['30%', null, null, null, '17%']})
+
+    // LOSS(分类)
+    verticalBarChart(null, document.getElementById("LOSSClassify"));
+
+    // 产量
+    barChartAndLineChart(null, document.getElementById("yield"));
+
+    // 一次装配不合格率
+    barChartAndLineChart(null, document.getElementById("fractionDefective"));
+
+
+    //追踪事件轮询
+    autoUpdate(url+"/getProductPlanInfo ", INTERVAL, data => {
+        orderDetailsTable.loadData(data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number-value.actual_number, value.day]), Object.keys(planWorkOrderColumns))
+    })
+})

ruoyi-admin/src/main/resources/static/js/echartsCommon.js

@@ -32,6 +32,9 @@ const horizontalRoundedBarChartWithBackground = function (data, id) {
             axisPointer: {
                 type: "none",
             },
+                textStyle:{
+                    fontSize:0.8*vw
+                },
             formatter: function (params) {
                 return (
                     params[0].name +
@@ -139,7 +142,11 @@ const barChartAndLineChart = function (data, id) {
         }
     }
     let option = {
-        tooltip: {},
+        tooltip: {
+            textStyle:{
+                fontSize:0.8*vw
+            }
+        },
         grid: {
             top: "15%",
             left: "1%",
@@ -352,6 +359,9 @@ const pieChart = function (data, id) {
         tooltip: {
             trigger: "item",
             formatter: "{b} : {c} ({d}%)",
+            textStyle:{
+                fontSize:0.8*vw
+            }
         },
 
         series: [
@@ -404,6 +414,116 @@ const pieChart = function (data, id) {
     charts.setOption(option);
     $(window).resize(charts.resize);
 }
+
+// 垂直柱状图
+const verticalBarChart = function (data, id) {
+    let charts = echarts.init(id);
+    if (!data) {
+        data = [
+            {
+                value: 285,
+                name: "类型1",
+            },
+            {
+                value: 410,
+                name: "类型2",
+            },
+            {
+                value: 274,
+                name: "类型3",
+            },
+            {
+                value: 235,
+                name: "类型4",
+            },
+        ]
+    }
+    let option = {
+        tooltip: {
+            textStyle:{
+                fontSize:0.8*vw
+            }
+        },
+        grid: {
+            top: "5%",
+            left: "1%",
+            right: "1%",
+            bottom: "1%",
+            containLabel: true,
+        },
+        xAxis: {
+            data: [
+                ">10分钟",
+                "3-10分钟",
+                "0-3分钟",
+            ],
+            axisLine: {
+                lineStyle: {
+                    color: "#0177d4",
+                },
+            },
+            axisLabel: {
+                color: "#fff",
+                fontSize: 0.8* vw,
+                interval: 0,
+            },
+        },
+        yAxis: {
+            nameTextStyle: {
+                color: "#fff",
+                fontSize: 0.8*vw,
+            },
+            axisLine: {
+                lineStyle: {
+                    color: "#0177d4",
+                },
+            },
+            axisLabel: {
+                color: "#fff",
+                fontSize: 0.8*vw,
+            },
+            splitLine: {
+                show: false,
+                lineStyle: {
+                    color: "#0177d4",
+                },
+            },
+        },
+        series: [
+            {
+                type: "bar",
+                barWidth: vw,
+                itemStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                {
+                                    offset: 0,
+                                    color: "#00b0ff",
+                                },
+                                {
+                                    offset: 0.8,
+                                    color: "#7052f4",
+                                },
+                            ],
+                            false
+                        ),
+                    },
+                },
+                data: [254, 3254, 1654],
+            },
+        ],
+    };
+
+    charts.setOption(option);
+    $(window).resize(charts.resize);
+
+}
+
 // 水平圆角柱状图
 const horizontalBarChart = function (data, id) {
     let charts = echarts.init(id);

ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html

@@ -27,20 +27,17 @@
 </head>
 <body style="display:flex;">
 
-<!--订单详情-->
-<div class="orderDetails" id="orderDetails"></div>
+<!--产量-->
+<div class="yield" id="yield"></div>
 
-<!--当日订单数量达成率-->
-<div class="orderQuantityFulfillmentRateOfTheDay" id="orderQuantityFulfillmentRateOfTheDay"></div>
+<!--LOSS(分类)-->
+<div class="LOSSClassify" id="LOSSClassify"></div>
 
-<!--成品入库统计-->
-<div class="FinishedGoodsWarehousingStatisticsByHour" id="FinishedGoodsWarehousingStatisticsByHour"></div>
+<!--一次装配不合格率-->
+<div class="fractionDefective" id="fractionDefective"></div>
 
-<!--产线当日订单信息-->
-<div class="PropertyInsuranceOneDayOrderInfo" id="PropertyInsuranceOneDayOrderInfo"></div>
-
-<!--产线不良类型分布-->
-<div class="distributionOfBadTypesInProductionLineByDay" id="distributionOfBadTypesInProductionLineByDay"></div>
+<!--追踪事件-->
+<div class="trackEvents" id="trackEvents"></div>
 
 </body>
 <script src="../../static/js/board/finalAssemblyProductionData.js" th:src="@{/js/board/finalAssemblyProductionData.js}"></script>