Merge remote-tracking branch 'gitee/master'

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

@@ -1,63 +1,68 @@
 $(() => {
     moduleTitle()
     safe('#safe')
+    importData('#importData')
+    // 公共请求地址
+    let url = '/broad/mtk'
     card({
         top: 60,
         left: 30.5,
         title: '内胆检漏',
-        name1: '问题1',
-        value1: '值1',
-        name2: '问题2',
-        value2: '值2',
-        name3: '问题3',
-        value3: '值3'
+        name1:  '',
+        value1: '',
+        name2:  '',
+        value2: '',
+        name3:  '',
+        value3: '',
     }, '#cardOne')
+
     card({
         top: 60,
         left: 38.5,
         title: '安全检测',
-        name1: '问题1',
-        value1: '值1',
-        name2: '问题2',
-        value2: '值2',
-        name3: '问题3',
-        value3: '值3'
+        name1:  '',
+        value1: '',
+        name2:  '',
+        value2: '',
+        name3:  '',
+        value3: '',
     }, '#cardTwo')
+
     card({
         top: 60,
         left: 46.5,
         title: '成品检漏',
-        name1: '问题1',
-        value1: '值1',
-        name2: '问题2',
-        value2: '值2',
-        name3: '问题3',
-        value3: '值3'
+        name1:  '',
+        value1: '',
+        name2:  '',
+        value2: '',
+        name3:  '',
+        value3: '',
     }, '#cardThree')
+
     card({
         top: 60,
         left: 54.5,
         title: '测温性能',
-        name1: '问题1',
-        value1: '值1',
-        name2: '问题2',
-        value2: '值2',
-        name3: '问题3',
-        value3: '值3'
+        name1:  '',
+        value1: '',
+        name2:  '',
+        value2: '',
+        name3:  '',
+        value3: '',
     }, '#cardFour')
+
     card({
         top: 60,
         left: 62.5,
         title: '成品外观',
-        name1: '问题1',
-        value1: '值1',
-        name2: '问题2',
-        value2: '值2',
-        name3: '问题3',
-        value3: '值3'
+        name1:  '',
+        value1: '',
+        name2:  '',
+        value2: '',
+        name3:  '',
+        value3: '',
     }, '#cardFive')
-    // 公共请求地址
-    let url = '/broad/mtk'
 
     // 轮询间隔时间
     const INTERVAL = 30000
@@ -145,22 +150,116 @@ $(() => {
         total(data.find(val => val.name === '入库订单统计').qty, '#total')
         Tips(data.find(val => val.name === '订单数量').qty, data.find(val => val.name === '完成数量').qty, data.find(val => val.name === '清单率').qty, '#Tips')
     })
-    // 设备功率
-    // autoUpdate(url + "/inStore3d", INTERVAL, data => {
-    singleVerticalBarChart({
-        xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
-        yData: [12, 20, 11, 30, 14, 80, 50],
-    }, document.getElementById("equipmentPower"))
-    // })
 
-    // 生产效率
+    // 质量分析(TOP3)
+    autoUpdate(url + "/selectQATop3", INTERVAL, data => {
+        console.log(data)
+        let arr = []
+        data.forEach(val => {
+            switch (val.code) {
+                case '内胆检漏':
+                    arr = data.find(val => val.code === '内胆检漏').list.sort(function (a,b) {
+                        return b.qty - a.qty
+                    })
+                    card({
+                        top: 60,
+                        left: 30.5,
+                        title: '内胆检漏',
+                        name1: arr[0]?.name || '',
+                        value1: arr[0]?.qty || '',
+                        name2: arr[1]?.name || '',
+                        value2: arr[1]?.qty || '',
+                        name3: arr[2]?.name || '',
+                        value3: arr[2]?.qty || '',
+                    }, '#cardOne')
+                    break
+                case '安全检测':
+                    debugger
+                    arr = data.find(val => val.code === '安全检测').list.sort(function (a,b) {
+                        return b.qty - a.qty
+                    })
+                    card({
+                        top: 60,
+                        left: 38.5,
+                        title: '安全检测',
+                        name1: arr[0]?.name || '',
+                        value1: arr[0]?.qty || '',
+                        name2: arr[1]?.name || '',
+                        value2: arr[1]?.qty || '',
+                        name3: arr[2]?.name || '',
+                        value3: arr[2]?.qty || '',
+                    }, '#cardTwo')
+                    break
+                case '成品检漏':
+                    arr = data.find(val => val.code === '成品检漏').list.sort(function (a,b) {
+                        return b.qty - a.qty
+                    })
+                    card({
+                        top: 60,
+                        left: 46.5,
+                        title: '成品检漏',
+                        name1: arr[0]?.name || '',
+                        value1: arr[0]?.qty || '',
+                        name2: arr[1]?.name || '',
+                        value2: arr[1]?.qty || '',
+                        name3: arr[2]?.name || '',
+                        value3: arr[2]?.qty || '',
+                    }, '#cardThree')
+                    break
+                case '测温性能':
+                    arr = data.find(val => val.code === '测温性能').list.sort(function (a,b) {
+                        return b.qty - a.qty
+                    })
+                    card({
+                        top: 60,
+                        left: 54.5,
+                        title: '测温性能',
+                        name1: arr[0]?.name || '',
+                        value1: arr[0]?.qty || '',
+                        name2: arr[1]?.name || '',
+                        value2: arr[1]?.qty || '',
+                        name3: arr[2]?.name || '',
+                        value3: arr[2]?.qty || '',
+                    }, '#cardFour')
+                    break
+                case '成品外观':
+                    arr = data.find(val => val.code === '成品外观').list.sort(function (a,b) {
+                        return b.qty - a.qty
+                    })
+                    card({
+                        top: 60,
+                        left: 62.5,
+                        title: '成品外观',
+                        name1: arr[0]?.name || '',
+                        value1: arr[0]?.qty || '',
+                        name2: arr[1]?.name || '',
+                        value2: arr[1]?.qty || '',
+                        name3: arr[2]?.name || '',
+                        value3: arr[2]?.qty || '',
+                    }, '#cardFive')
+                    break
+                case '柱状图':
+                    arr = data.find(val => val.code === '柱状图').list.sort(function (a,b) {
+                        return b.qty - a.qty
+                    })
+                    singleVerticalBarChart({
+                        xName: arr.map(val => val.name),
+                        yData: arr.map(val => val.qty),
+                    }, document.getElementById("equipmentPower"),-20,'20%')
+                    break
+            }
+        })
+    })
+
+    // 当日订单入库统计
     autoUpdate(url + "/selectInstoreNumByday", INTERVAL, data => {
         singleVerticalBarChart({
             xName: data.map(val => val.name),
             yData: data.map(val => val.qty),
         }, document.getElementById("productionEfficiency"),-20)
     })
-    // 成品入库统计
+
+    // 重点工序质量监控
     // autoUpdate(url + "/inStore3d", INTERVAL, data => {
     percentageRingDiagram([
         {
@@ -204,7 +303,7 @@ const curWeek = () => {
     }
     firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
     let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
-    return Math.ceil(d / 7);
+    return Math.ceil((d / 7) +1);
 }
 
 const moduleTitle = () => {
@@ -222,8 +321,9 @@ const moduleTitle = () => {
 
 const safe = (el) => {
     const html = `
+    <span style="position: absolute;top: 66%;left: 16%;color: #CBE6F7;font-size: 1.3vw;font-weight:600;transform: translateX(-50%);letter-spacing: 0.3vw">${new Date().getFullYear().toString()}年连续安全生产天数</span>
     <span style="position: absolute;top: 74%;left: 16%;color: #08F580;font-size: 2.5vw;transform: translateX(-50%);letter-spacing: 0.3vw">${today()}<span style="font-size: 0.5vw">天</span> </span>
-    <span style="position: absolute;top: 81%;left: 16%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">QSR连续安全生产天数</span>
+    <span style="position: absolute;top: 89%;left: 16%;color: #CBE6F7;font-size: 1vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能冷柜互联工厂</span>
     `
     $(el).html(html)
 }
@@ -245,27 +345,27 @@ const card = (val = {
     ${val.title}
     </div>
     <div style="position: absolute;top: 25%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
-    <span style="position: absolute;width:60%;font-size: 0.6vw;">
+    <span style="position: absolute;width:73%;font-size: 0.6vw;">
     ${val.name1}
         </span>
-        <span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
+        <span style="position: absolute;left: 75%;width:40%;font-size: 0.4vw;line-height: 1vw">
     ${val.value1}
 </span>
     </div>
     <div style="position: absolute;top: 50%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
-    <span style="position: absolute;width:60%;font-size: 0.6vw;">
+    <span style="position: absolute;width:73%;font-size: 0.6vw;">
     ${val.name2}
         </span>
-        <span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
+        <span style="position: absolute;left: 75%;width:40%;font-size: 0.4vw;line-height: 1vw">
     ${val.value2}
 </span>
     </div>
     <div style="position: absolute;top: 75%;left: 5%;width:100%;height:15%;text-align: left;font-size: 0.5vw;">
-    <span style="position: absolute;width:60%;font-size: 0.6vw;">
+    <span style="position: absolute;width:73%;font-size: 0.6vw;">
     ${val.name3}
         </span>
-        <span style="position: absolute;left: 60%;width:40%;font-size: 0.4vw;line-height: 1vw">
-    ${val.value2}
+        <span style="position: absolute;left: 75%;width:40%;font-size: 0.4vw;line-height: 1vw">
+    ${val.value3}
 </span>
     </div>
 </div>
@@ -285,4 +385,10 @@ const total = (val1 = 0, el) => {
     <span style="position: absolute;top: 10%;left: 85.7%;color: #fff;font-size: 1vw;">合计：${val1}</span>
     `
     $(el).html(html)
+}
+const importData = ( el) => {
+    const html = `
+    <span style="position: absolute;top: 54.3%;left: 85.7%;color: #fff;font-size: 1vw;">一次合格率</span>
+    `
+    $(el).html(html)
 }

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

@@ -138,6 +138,8 @@ const horizontalRoundedBarChartWithBackground = function (data, id) {
     $(window).resize(charts.resize);
 }
 const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
+    let time = () => {
+    }
     let charts = echarts.init(id);
     if (!data) {
         data = {
@@ -153,13 +155,14 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
     })
     let option = {
         grid: {
+            // left: "-10%",
             left: "0%",
             right: "8%",
             bottom: "0%",
             top: "0%",
             containLabel: true,
         },
-        dataZoom:[],
+        dataZoom: [],
         xAxis: {
             show: false,
         },
@@ -179,6 +182,11 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
                 },
                 axisLabel: {
                     color: "#fff",
+                    // margin:150,
+                    fontSize:0.75 * vw,
+                    textStyle: {
+                        textAlign:'center'
+                    },
                 },
             },
         ],
@@ -213,8 +221,8 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
                         color: "#fff",
                         fontSize: 0.75 * vw
                     },
-                    formatter: function (val,index,e) {
-                        return data.yData[val.dataIndex] +'%'
+                    formatter: function (val, index, e) {
+                        return data.yData[val.dataIndex] + '%'
                     }
                 },
                 itemStyle: {
@@ -245,19 +253,22 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
         })
 
         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)
+        time = () => {
+            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);
@@ -919,7 +930,7 @@ const barChartAndLineChartFour = function (data, id) {
             }
         ]
     };
-    if (Math.max(...data.yDataOne) <=5){
+    if (Math.max(...data.yDataOne) <= 5) {
         option.yAxis[0].max = 5
     }
 
@@ -1503,7 +1514,7 @@ const multipleVerticalBarChartTwo = function (data, id) {
 }
 
 // 单个垂直柱状图
-const singleVerticalBarChart = function (data, id,rotate=0) {
+const singleVerticalBarChart = function (data, id, rotate = 0,bottom='15%') {
     let charts = echarts.init(id);
     if (!data) {
         data = {
@@ -1520,7 +1531,7 @@ const singleVerticalBarChart = function (data, id,rotate=0) {
             top: "10%",
             left: left(),
             right: "5%",
-            bottom: "15%",
+            bottom: bottom,
             // containLabel: true
         },
         dataZoom: [],
@@ -1534,6 +1545,7 @@ const singleVerticalBarChart = function (data, id,rotate=0) {
             axisLabel: {
                 color: "#fff",
                 fontSize: 14,
+                interval:0,
                 rotate: rotate,
             },
         },
@@ -1583,6 +1595,14 @@ const singleVerticalBarChart = function (data, id,rotate=0) {
                         ),
                     },
                 },
+                label: {
+                    show: true,
+                    position: "top",
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 0.75 * vw
+                    },
+                },
                 data: data.yData,
             },
         ],
@@ -1593,12 +1613,14 @@ const singleVerticalBarChart = function (data, id,rotate=0) {
     $(window).resize(charts.resize);
 }
 const singleVerticalBarChartTwo = function (data, id) {
+    let time = () => {
+    }
     let charts = echarts.init(id);
     if (!data) {
         data = {
             xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'],
             yData: [38, 60, 40, 55, 42, 39, 45, 40],
-            yImg: ['','','','','','','',''],
+            yImg: ['', '', '', '', '', '', '', ''],
         }
     }
     let option = {
@@ -1611,6 +1633,7 @@ const singleVerticalBarChartTwo = function (data, id) {
         },
         dataZoom: [],
         xAxis: {
+            margin:10,
             nameTextStyle: {
                 color: '#c0c3cd',
                 padding: [0, 0, -10, 0],
@@ -1620,7 +1643,8 @@ const singleVerticalBarChartTwo = function (data, id) {
                 color: '#c0c3cd', //X轴文字
                 fontSize: 14,
                 interval: 0,
-                rotate:20,
+                margin:20,
+                rotate: -20,
             },
             axisTick: {
                 lineStyle: {
@@ -1709,8 +1733,8 @@ const singleVerticalBarChartTwo = function (data, id) {
             {
                 type: 'pictorialBar',
                 name: 'pictorial element',
-                symbol: function(val,index){
-                         return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
+                symbol: function (val, index) {
+                    return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
                 },
                 symbolSize: [40, 40],
                 z: 10,
@@ -1722,7 +1746,7 @@ const singleVerticalBarChartTwo = function (data, id) {
                     }
                 })
             },
-            ],
+        ],
     };
     if (data.xName.length > 10) {
         option.dataZoom.push({
@@ -1739,20 +1763,21 @@ const singleVerticalBarChartTwo = function (data, id) {
             }
         })
 
-    let step = 1 / (data.xName.length / 11) * 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)
+        let step = 1 / (data.xName.length / 11) * 100
+        time = 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)
+        time()
     }
 
 
@@ -2124,28 +2149,28 @@ const hollowPieChart = function (data, id) {
 // 多个环形图
 const percentageRingDiagram = function (data, id) {
     let charts = echarts.init(id);
-        data ??= [
-            {
-                name: "内胆检漏",
-                value: 54,
-            },
-            {
-                name: "安全检测",
-                value: 44,
-            },
-            {
-                name: "成品检漏",
-                value: 35,
-            },
-            {
-                name: "测温性能",
-                value: 30,
-            },
-            {
-                name: "成品外观",
-                value: 44,
-            },
-        ];
+    data ??= [
+        {
+            name: "内胆检漏",
+            value: 54,
+        },
+        {
+            name: "安全检测",
+            value: 44,
+        },
+        {
+            name: "成品检漏",
+            value: 35,
+        },
+        {
+            name: "测温性能",
+            value: 30,
+        },
+        {
+            name: "成品外观",
+            value: 44,
+        },
+    ];
 
     let titleArr = [],
         seriesArr = [];
@@ -2194,7 +2219,7 @@ const percentageRingDiagram = function (data, id) {
             },
             hoverAnimation: false,
             center: [
-                    index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
+                index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
                 index > 2 ? "75%" : "25%",
             ],
             data: [

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

@@ -34,6 +34,7 @@
 <div id="cardThree"></div>
 <div id="cardFour"></div>
 <div id="cardFive"></div>
+<div id="importData"></div>
 
 <!--每日人力出勤-->
 <div class="manpowerAttendance" id="manpowerAttendance"></div>