修改界面

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

@@ -2,7 +2,6 @@ $(() => {
     moduleTitle()
     LOSS()
     jp()
-    total('#total')
     // 公共请求地址
     let url = '/broad/zz'
 
@@ -38,6 +37,7 @@ $(() => {
             data = JSON.parse(data)
             // 实际
             targetTop.reality = data.map(val => val.qty).reduce((val1, val2) => val1 + val2, 0)
+            total('#total', data.map(val => val.qty).reduce((val1, val2) => val1 + val2, 0))
             // 起始时间
             let oneTime = parseFloat(data[0].name.split(':')[0])
             // 横坐标
@@ -119,7 +119,6 @@ $(() => {
         //当班入库执行订单
         $.post(url + "/selectInStoreOrderInfo", {}, data => {
             data = JSON.parse(data)
-            total('#total', data.map(val => val.actual_number).reduce((val1, val2) => val1 + val2, 0))
             $('#trackEvents').remove()
             $('.trackEventsScrollTable').html('<div class="trackEvents" id="trackEvents"></div>')
             dynamicTable({

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

@@ -136,7 +136,7 @@ $(() => {
         // console.log(data)
         horizontalRoundedBarChartWithBackgroundTwo({
             yNameOne: data.map(val => val.name),
-            yData: data.map(val => val.rate),
+            yData: data.map(val => val.qty),
             xDataName: "达成率",
         }, document.getElementById("IQC"))
     })
@@ -155,7 +155,6 @@ $(() => {
 
     // 生产效率
     autoUpdate(url + "/selectInstoreNumByday", INTERVAL, data => {
-        console.log(data)
         singleVerticalBarChart({
             xName: data.map(val => val.name),
             yData: data.map(val => val.qty),

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

@@ -154,11 +154,12 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
     let option = {
         grid: {
             left: "0%",
-            right: "5%",
+            right: "8%",
             bottom: "0%",
             top: "0%",
             containLabel: true,
         },
+        dataZoom:[],
         xAxis: {
             show: false,
         },
@@ -180,28 +181,6 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
                     color: "#fff",
                 },
             },
-            {
-                show: true,
-                inverse: true,
-                data: data.yData,
-                axisLabel: {
-                    textStyle: {
-                        fontSize: 12,
-                        color: "#fff",
-
-                    },
-                    formatter: '{value}%'
-                },
-                axisLine: {
-                    show: false,
-                },
-                splitLine: {
-                    show: false,
-                },
-                axisTick: {
-                    show: false,
-                },
-            },
         ],
         series: [
             {
@@ -223,10 +202,21 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
             {
                 name: "框",
                 type: "bar",
-                yAxisIndex: 1,
+                yAxisIndex: 0,
                 barGap: "-100%",
                 data: bgBar,
-                barWidth: '90%',
+                barWidth: '80%',
+                label: {
+                    show: true,
+                    position: "right",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 0.75 * vw
+                    },
+                    formatter: function (val,index,e) {
+                        return data.yData[val.dataIndex] +'%'
+                    }
+                },
                 itemStyle: {
                     normal: {
                         color: "none",
@@ -239,20 +229,36 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
         ],
     };
 
-    // if (data.xData?.length >= 3) {
+    if (data.yNameOne.length > 8) {
-    //     option.dataZoom.push({
+        option.dataZoom.push({
-    //         show: true,
+            show: false,
-    //         type: 'slider',
+            type: 'slider',
-    //         yAxisIndex: 0,
+            bottom: '0%',
-    //         width: 0.75 * vw,
+            yAxisIndex: 0,
-    //         start: 0,
+            height: 12,
-    //         end: 1 / (data.xData.length / 4) * 100,
+            start: 0,
-    //         textStyle: {
+            end: 1 / (data.yNameOne.length / 9) * 100,
-    //             fontSize: 0,
+            textStyle: {
-    //             color: 'rgba(0,0,0,0)'
+                fontSize: 0,
-    //         }
+                color: 'rgba(0,0,0,0)'
-    //     })
+            }
-    // }
+        })
+
+        let step = 1 / (data.yNameOne.length / 9) * 100
+        setInterval(() => {
+            option.dataZoom[0].end += step
+            option.dataZoom[0].start += step
+            if (option.dataZoom[0].start >= 100) {
+                option.dataZoom[0].start = 0
+                option.dataZoom[0].end = step
+            }
+            if (option.dataZoom[0].end >= 100) {
+                option.dataZoom[0].end = 100
+                option.dataZoom[0].start = option.dataZoom[0].end - step
+            }
+            charts.setOption(option);
+        }, 3000)
+    }
     charts.setOption(option);
     $(window).resize(charts.resize);
 }