修改界面

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

@@ -24,3 +24,10 @@ body {
     top: 60%;
     left: 2.5%;
 }
+.quality{
+    position: absolute;
+    width: 23%;
+    height: 35%;
+    top: 60%;
+    left: 26.5%;
+}

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

@@ -31,13 +31,6 @@ body {
     top: 60%;
     left: 3%;
 }
-.equipmentPower{
-    position: absolute;
-    width: 39%;
-    height: 34%;
-    top: 60%;
-    left: 30.5%;
-}
 .topLeft{
     position: absolute;
     width: 25%;
@@ -45,3 +38,38 @@ body {
     top: 15.5%;
     left: 3.5%;
 }
+.equipmentPowerOne{
+    position: absolute;
+    width: 13%;
+    height: 16%;
+    top: 60%;
+    left: 30.5%;
+}
+.equipmentPowerTwo{
+    position: absolute;
+    width: 13%;
+    height: 16%;
+    top: 60%;
+    left: 43.5%;
+}
+.equipmentPowerThree{
+    position: absolute;
+    width: 13%;
+    height: 16%;
+    top: 60%;
+    left: 56.5%;
+}
+.equipmentPowerFour{
+    position: absolute;
+    width: 19%;
+    height: 16%;
+    top: 76%;
+    left: 30.5%;
+}
+.equipmentPowerFive{
+    position: absolute;
+    width: 19%;
+    height: 16%;
+    top: 76%;
+    left: 49.5%;
+}

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

@@ -8,12 +8,25 @@ $(() => {
 
 
     autoUpdate(url + "/selectUserSatisfaction", INTERVAL, data => {
-        let list = data.map(val => val.list)
+        multipleVerticalBarChartThree({
-        multipleVerticalBarChartTwo(null, document.getElementById("satisfaction"), -20)
+            xName: data.map(val => val.yearName),
+            yDataOne: data.map(val => val.productRate),
+            yDataOneName: '产品体验',
+            yDataTwo: data.map(val => val.shoppingRate),
+            yDataTwoName: "购物体验",
+            yDataThree: data.map(val => val.serviceRate),
+            yDataThreeName: "服务体验",
+            yDataFour: data.map(val => val.orderRate),
+            yDataFourName: "订单履行率",
+        }, document.getElementById("satisfaction"), )
     })
-    autoUpdate(url + "/selectUserSatisfaction", INTERVAL, data => {
+    autoUpdate(url + "/selectProductInStoreGroupMonth", INTERVAL, data => {
-        verticalBarChart(null, document.getElementById("outputStatistics"), -20)
+        verticalBarChart({
+            xName: data.map(val => `${val.name}月`),
+            yData: data.map(val => val.qty),
+        }, document.getElementById("outputStatistics"), '')
     })
+    lineChart(null, document.getElementById("quality"))
 
 
 })

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

@@ -45,7 +45,26 @@ $(() => {
         Tips(data.find(val => val.name === '订单数量').qty, data.find(val => val.name === '完成数量').qty, data.find(val => val.name === '清单率').qty, '#Tips')
     })
 
-    // 当日订单入库统计
+    autoUpdate(url + "/selectProductInStore", INTERVAL, data => {
+        let list = data.map(val => val.list)
+        let yDataOne = []
+        let yDataTwo = []
+        list.forEach(val => {
+            yDataOne.push(val.find(val => val.name == '计划')?.qty || 0)
+            yDataTwo.push(val.find(val => val.name == '产量')?.qty || 0)
+        })
+
+        total(yDataTwo.reduce((val1,val2) => val1 + val2 , 0),'#total')
+        multipleVerticalBarChartTwo({
+            xName: data.map(val => val.code),
+            yDataOne: yDataOne,
+            yDataOneName: '计划',
+            yDataTwo: yDataTwo,
+            yDataTwoName: "产量",
+        }, document.getElementById("topLeft"), -20)
+    })
+
+    // 周质量分析
     autoUpdate(url + "/zhou_selectQaItemInfo", INTERVAL, data => {
         let arr = [0, 0, 0, 0, 0, 0]
         let yDataOne = [...(data.find(val => val.code == '内胆检漏')?.list.map(val => val.rate) || []), ...arr]
@@ -53,20 +72,31 @@ $(() => {
         let yDataThree = [...(data.find(val => val.code == '成品检漏')?.list.map(val => val.rate) || []), ...arr]
         let yDataFour = [...(data.find(val => val.code == '测温性能')?.list.map(val => val.rate) || []), ...arr]
         let yDataFive = [...(data.find(val => val.code == '成品外观')?.list.map(val => val.rate) || []), ...arr]
-        multipleBrokenLineAreaDiagramTwo(
+        lineChart({
-            {
+            xName: data.find(val => val.code == '横坐标')?.list.map(val => val.name),
-                xData: data.find(val => val.code == '横坐标')?.list.map(val => val.name),
+            yData: yDataOne,
-                yDataOne: yDataOne,
+            yDataName: "内胆检漏"
-                yDataTwo: yDataTwo,
+        }, document.getElementById("equipmentPowerOne"))
-                yDataThree: yDataThree,
+        lineChart({
-                yDataFour: yDataFour,
+            xName: data.find(val => val.code == '横坐标')?.list.map(val => val.name),
-                yDataFive: yDataFive,
+            yData: yDataTwo,
-                yDataOneName: '内胆检漏',
+            yDataName: "安全检测"
-                yDataTwoName: '安全检测',
+        }, document.getElementById("equipmentPowerTwo"))
-                yDataThreeName: '成品检漏',
+        lineChart({
-                yDataFourName: '测温性能',
+            xName: data.find(val => val.code == '横坐标')?.list.map(val => val.name),
-                yDataFiveName: '成品外观',
+            yData: yDataThree,
-            }, document.getElementById("equipmentPower"))
+            yDataName: "成品检漏"
+        }, document.getElementById("equipmentPowerThree"))
+        lineChart({
+            xName: data.find(val => val.code == '横坐标')?.list.map(val => val.name),
+            yData: yDataFour,
+            yDataName: "测温性能"
+        }, document.getElementById("equipmentPowerFour"))
+        lineChart({
+            xName: data.find(val => val.code == '横坐标')?.list.map(val => val.name),
+            yData: yDataFive,
+            yDataName: "成品外观"
+        }, document.getElementById("equipmentPowerFive"))
         // pieChart(data.map((val, index) => {
         //         if (index == 0 ) {
         //             return {
@@ -95,25 +125,6 @@ $(() => {
         // ), document.getElementById("equipmentPower"));
     })
 
-    autoUpdate(url + "/selectProductInStore", INTERVAL, data => {
-        let list = data.map(val => val.list)
-        let yDataOne = []
-        let yDataTwo = []
-        list.forEach(val => {
-            yDataOne.push(val.find(val => val.name == '计划')?.qty || 0)
-            yDataTwo.push(val.find(val => val.name == '产量')?.qty || 0)
-        })
-
-        total(yDataTwo.reduce((val1,val2) => val1 + val2 , 0),'#total')
-        multipleVerticalBarChartTwo({
-            xName: data.map(val => val.code),
-            yDataOne: yDataOne,
-            yDataOneName: '计划',
-            yDataTwo: yDataTwo,
-            yDataTwoName: "产量",
-        }, document.getElementById("topLeft"), -20)
-    })
-
 
 })
 const today = () => {

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

@@ -5,6 +5,8 @@ var time2 = () => {
 }
 var time3 = () => {
 }
+var time4 = () => {
+}
 // 随机数
 const random = (val = 1) => {
     return Math.ceil(Math.random() * val)
@@ -940,6 +942,108 @@ const barChartAndLineChartFour = function (data, id) {
     $(window).resize(charts.resize);
 }
 
+// 折线图
+const lineChart = function (data, id) {
+    let charts = echarts.init(id);
+    if (!data) {
+        data = {
+            xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+            yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
+            yDataName: "提升百分比"
+        }
+    }
+    let option = {
+        grid: {
+            top: '20%',
+            left: '5%',
+            right: '5%',
+            bottom: '8%',
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    show: true,
+                },
+            },
+        },
+        legend: {
+            top: '5%',
+            textStyle: {
+                fontSize:0.75*vw,
+                color: '#90cb5e',
+            },
+        },
+        xAxis: {
+            type: 'category',
+            data:data.xName,
+            axisLine: {
+                show: true,
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: '#ffffff', //X轴文字颜色
+                },
+            },
+        },
+        yAxis: [
+            {
+                type: 'value',
+                nameTextStyle: {
+                    color: '#393939',
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#eeeeee',
+                    },
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                axisLabel: {
+                    show: true,
+                    textStyle: {
+                        color: '#ffffff',
+                    },
+                },
+            },
+        ],
+        series: [
+            {
+                name: data.yDataName,
+                type: 'line',
+                showAllSymbol: true, //显示所有图形。
+                symbol: 'circle', //标记的图形为实心圆
+                symbolSize: 4, //标记的大小
+                itemStyle: {
+                    //折线拐点标志的样式
+                    color: '#f3454b',
+                    borderWidth: '2',
+                    borderColor: '#f3454b',
+                },
+                lineStyle: {
+                    color: '#f3454b',
+                },
+                data: data.yData,
+            },
+        ],
+    };
+
+    charts.setOption(option);
+    $(window).resize(charts.resize);
+}
+
+
 // 饼图
 const pieChart = function (data, id) {
     let charts = echarts.init(id);
@@ -1030,7 +1134,7 @@ const pieChart = function (data, id) {
 }
 
 // 垂直柱状图
-const verticalBarChart = function (data, id) {
+const verticalBarChart = function (data, id,unit='次') {
     let charts = echarts.init(id);
     if (!data) {
         data = {
@@ -1096,7 +1200,7 @@ const verticalBarChart = function (data, id) {
                         fontSize: 0.8 * vw,
                         color: '#fff'
                     },
-                    formatter: `{c}次`
+                    formatter: `{c}${unit}`
                 },
                 itemStyle: {
                     normal: {
@@ -1518,6 +1622,203 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0) {
     charts.setOption(option);
     $(window).resize(charts.resize);
 }
+const multipleVerticalBarChartThree = function (data, id, rotate = 0) {
+
+    clearInterval(time4)
+    let charts = echarts.init(id);
+    if (!data) {
+        data = {
+            xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '7月', '7月'],
+            yDataOne: [22, 52, 55, 12, 35, 44, 66, 44, 66],
+            yDataOneName: 'a1',
+            yDataTwo: [32, 42, 50, 22, 30, 40, 52, 44, 66],
+            yDataTwoName: "a2",
+            yDataThree: [32, 42, 50, 22, 30, 40, 52, 44, 66],
+            yDataThreeName: "a3",
+            yDataFour: [32, 42, 50, 22, 30, 40, 52, 44, 66],
+            yDataFourName: "a4",
+        }
+    }
+    let option = {
+        grid: {
+            top: "20%",
+            left: "1%",
+            right: "1%",
+            bottom: "1%",
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        legend: {
+            data: [data.yDataOneName, data.yDataTwoName,data.yDataThreeName,data.yDataFourName],
+            textStyle: {
+                fontSize: 0.75 * vw,
+                color: "#F1F1F3",
+            },
+        },
+        dataZoom:[],
+        xAxis: [
+            {
+                type: 'category',
+                axisTick: {show: false},
+                axisLabel: {
+                    rotate: rotate,
+                    margin: 20,
+                    textStyle: {
+                        fontSize: 0.75 * vw,
+                        color: "#F1F1F3",
+                    },
+                },
+                data: data.xName
+            }
+        ],
+        yAxis: [
+            {
+                axisLabel: {
+                    textStyle: {
+                        fontSize: 0.75 * vw,
+                        color: "#F1F1F3",
+                    },
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: "rgba(255,255,255,0.1)",
+                    },
+                },
+                type: 'value'
+            }
+        ],
+        series: [
+            {
+                name: data.yDataOneName,
+                type: 'bar',
+                barGap: 0,
+                emphasis: {
+                    focus: 'series'
+                },
+                itemStyle: {
+                    //图形样式
+                    normal: {
+                        color: "#1FEDCA",
+                    },
+                },
+                label: {
+                    show: true,
+                    position: "top",
+                    textStyle: {
+                        color: "rgba(255,255,255,0.5)",
+                        fontSize: 0.75 * vw
+                    },
+                },
+                data: data.yDataOne
+            },
+            {
+                name: data.yDataTwoName,
+                type: 'bar',
+                emphasis: {
+                    focus: 'series'
+                },
+                label: {
+                    show: true,
+                    position: "top",
+                    textStyle: {
+                        color: "rgba(255,255,255,0.5)",
+                        fontSize: 0.75 * vw
+                    },
+                },
+                itemStyle: {
+                    //图形样式
+                    normal: {
+                        color: "#E65454",
+                    },
+                },
+                data: data.yDataTwo
+            },
+            {
+                name: data.yDataThreeName,
+                type: 'bar',
+                emphasis: {
+                    focus: 'series'
+                },
+                label: {
+                    show: true,
+                    position: "top",
+                    textStyle: {
+                        color: "rgba(255,255,255,0.5)",
+                        fontSize: 0.75 * vw
+                    },
+                },
+                itemStyle: {
+                    //图形样式
+                    normal: {
+                        color: "#351865",
+                    },
+                },
+                data: data.yDataThree
+            },
+            {
+                name: data.yDataFourName,
+                type: 'bar',
+                emphasis: {
+                    focus: 'series'
+                },
+                label: {
+                    show: true,
+                    position: "top",
+                    textStyle: {
+                        color: "rgba(255,255,255,0.5)",
+                        fontSize: 0.75 * vw
+                    },
+                },
+                itemStyle: {
+                    //图形样式
+                    normal: {
+                        color: "#4b7232",
+                    },
+                },
+                data: data.yDataFour
+            },
+        ]
+    };
+
+    if (data.yDataOne.length > 7) {
+        option.dataZoom.push({
+            show: false,
+            type: 'slider',
+            bottom: '0%',
+            xAxisIndex: 0,
+            height: 12,
+            start: 0,
+            end: 1 / (data.yDataOne.length / 6) * 100,
+            textStyle: {
+                fontSize: 0,
+                color: 'rgba(0,0,0,0)'
+            }
+        })
+
+        let step = 1 / (data.yDataOne.length / 6) * 100
+        time4 = 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);
+        }, 6000)
+        // time()
+    }
+    charts.setOption(option);
+    $(window).resize(charts.resize);
+}
 
 // 单个垂直柱状图
 const singleVerticalBarChart = function (data, id, rotate = 0, bottom = '15%') {

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

@@ -34,6 +34,9 @@
 <!--产量统计-->
 <div class="outputStatistics" id="outputStatistics"></div>
 
+<!--品质提升-->
+<div class="quality" id="quality"></div>
+
 </body>
 <script src="../../static/js/board/month.js" th:src="@{/js/board/month.js}"></script>
 <script>

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

@@ -42,8 +42,12 @@
 <div class="productionEfficiency" id="productionEfficiency"></div>
 
 
-<!--设备功率-->
+<!--周质量分析-->
-<div class="equipmentPower" id="equipmentPower"></div>
+<div class="equipmentPowerOne" id="equipmentPowerOne"></div>
+<div class="equipmentPowerTwo" id="equipmentPowerTwo"></div>
+<div class="equipmentPowerThree" id="equipmentPowerThree"></div>
+<div class="equipmentPowerFour" id="equipmentPowerFour"></div>
+<div class="equipmentPowerFive" id="equipmentPowerFive"></div>
 
 <!--设备功率-->
 <div class="topLeft" id="topLeft"></div>