diff --git a/ruoyi-admin/src/main/resources/static/css/board/month.css b/ruoyi-admin/src/main/resources/static/css/board/month.css index 7c7ec45..2c9c9ce 100644 --- a/ruoyi-admin/src/main/resources/static/css/board/month.css +++ b/ruoyi-admin/src/main/resources/static/css/board/month.css @@ -132,8 +132,8 @@ body { .safe{ position: absolute; width: 22%; - height: 30%; - top: 64%; + height: 19%; + top: 77%; left: 75.5%; } .abnormal{ diff --git a/ruoyi-admin/src/main/resources/static/js/board/month.js b/ruoyi-admin/src/main/resources/static/js/board/month.js index 28201c9..c23506a 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/month.js +++ b/ruoyi-admin/src/main/resources/static/js/board/month.js @@ -13,7 +13,7 @@ $(() => { yDataOneName: '' + data.map(val => val.yearName)[0], yDataTwo: [data[1].productRate, data[1].shoppingRate, data[1].serviceRate, data[1].orderRate], yDataTwoName: '' + data.map(val => val.yearName)[1], - }, document.getElementById("satisfaction"), undefined, '%') + }, document.getElementById("satisfaction"), undefined, '%',5,false) }) autoUpdate(url + "/selectMonthNumberQaS", INTERVAL, data => { @@ -23,7 +23,7 @@ $(() => { yDataOneName: '闭环数', yDataTwo: data.map(val => val.qaNumber), yDataTwoName: "隐患数", - }, document.getElementById("safe"), '') + }, document.getElementById("safe"), '','',4) }) autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => { pieChart(data.map((val, index) => { @@ -108,13 +108,13 @@ $(() => { target.push(data[0][`target`]) } } - lineChart({ + lineChartThree({ xName: month.splice(0, value.length), yData: target, yDataName: "目标", yDataTwo: value, - yDataTwoName: "单台能耗(元/台)", - }, document.getElementById("energyConsumption"), '') + yDataTwoName: "实际", + }, document.getElementById("energyConsumption"), '',true) }) @@ -145,19 +145,20 @@ const moduleTitle = () => { 用户满意度 产品升级 场景升级 - 品质提升 + 创新引领 产量统计 单台能耗 质量分析 数字化安全 - ${new Date().getFullYear()} 年连续安全生产 ${today()} 天 + ${new Date().getFullYear()} 年连续安全生产 ${today()} + 隐患排查治理体系 ` $('body').append(html) } const total = (val1 = 0, el) => { const html = ` - ${new Date().getFullYear()}年 合计:${val1} 台 + ${new Date().getFullYear()}年 累计:${val1} 台 ` $(el).html(html) } diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index 2290f78..d22076d 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -946,7 +946,7 @@ const barChartAndLineChartFour = function (data, id) { } // 折线图 -const lineChart = function (data, id, unit = '') { +const lineChart = function (data, id, unit = '',smooth=false) { let charts = echarts.init(id); if (!data) { data = { @@ -964,7 +964,7 @@ const lineChart = function (data, id, unit = '') { top: '28%', left: '5%', right: '5%', - bottom: '8%', + bottom: '0%', containLabel: true, }, tooltip: { @@ -978,9 +978,20 @@ const lineChart = function (data, id, unit = '') { }, legend: { top: '5%', + itemWidth:20, + itemHeight:10, + itemStyle:{ + borderWidth:1, + borderHeight:1, + }, + formatter:function (val) { + return `${val} ` + }, textStyle: { fontSize: 0.75 * vw, - color: '#90cb5e', + color: function () { + + }, }, }, xAxis: { @@ -1001,11 +1012,12 @@ const lineChart = function (data, id, unit = '') { }, yAxis: [ { + name:'(元/台)', min: (min - 2 < 0) ? 0 : min - 2, max: (max + 2 > 100) ? 100 : max + 2, type: 'value', nameTextStyle: { - color: '#393939', + color: '#fff', }, splitLine: { show: false, @@ -1021,6 +1033,7 @@ const lineChart = function (data, id, unit = '') { }, axisLabel: { show: true, + interval:0, textStyle: { color: '#ffffff', }, @@ -1031,6 +1044,7 @@ const lineChart = function (data, id, unit = '') { { name: data.yDataName, type: 'line', + smooth:smooth, showAllSymbol: true, //显示所有图形。 symbol: 'circle', //标记的图形为实心圆 symbolSize: 4, //标记的大小 @@ -1062,6 +1076,7 @@ const lineChart = function (data, id, unit = '') { { name: data.yDataTwoName, type: 'line', + smooth:smooth, showAllSymbol: true, //显示所有图形。 symbol: 'circle', //标记的图形为实心圆 symbolSize: 4, //标记的大小 @@ -1088,29 +1103,26 @@ const lineChart = function (data, id, unit = '') { }, }, }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgb(76,82,193,0.7)", - }, - { - offset: 0.8, - color: "rgb(191,194,220,0.4)", - }, - ], - false - ), - shadowColor: "rgba(0, 0, 0, 0.1)", - shadowBlur: 10, - }, - }, + // areaStyle: { + // normal: { + // color: new echarts.graphic.LinearGradient( + // 0, + // 0, + // 0, + // 1, + // [ + // { + // offset: 0, + // color: "rgb(76,82,193,0.7)", + // }, + // { + // offset: 0.8, + // color: "rgb(191,194,220,0.4)", + // }, + // ], + // ), + // }, + // }, data: data.yDataTwo, }, ], @@ -1121,7 +1133,7 @@ const lineChart = function (data, id, unit = '') { } const lineChartTwo = function (data, id, unit = '') { let charts = echarts.init(id); - let color = ['#3094ea','#f3454b'] + let color = ['#3094ea','#2fd032','#6ba72c','#7b6931','#8909E5'] if (!data) { data = { xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], @@ -1192,9 +1204,14 @@ const lineChartTwo = function (data, id, unit = '') { }, legend: { top: '5%', + itemWidth:20, + itemHeight:10, + formatter:function (val) { + return `${val}` + }, textStyle: { fontSize: 0.75 * vw, - color: '#90cb5e', + color: () => {}, }, }, xAxis: { @@ -1247,6 +1264,188 @@ const lineChartTwo = function (data, id, unit = '') { charts.setOption(option); $(window).resize(charts.resize); } +const lineChartThree = function (data, id, unit = '',smooth=false) { + 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: "提升百分比", + yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60], + yDataTwoName: "百分比" + } + } + let min = Math.ceil(Math.min(...data.yData,...(data.yDataTwo || []))) + let max = Math.ceil(Math.max(...data.yData,...(data.yDataTwo || []))) + let option = { + grid: { + top: '28%', + left: '5%', + right: '5%', + bottom: '0%', + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + label: { + show: true, + }, + }, + }, + legend: { + top: '5%', + itemWidth:20, + itemHeight:10, + itemStyle:{ + borderWidth:1, + borderHeight:1, + }, + formatter:function (val) { + return `${val} ` + }, + textStyle: { + fontSize: 0.75 * vw, + color: function () { + + }, + }, + }, + xAxis: { + type: 'category', + data: data.xName, + axisLine: { + show: true, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: true, + textStyle: { + color: '#ffffff', //X轴文字颜色 + }, + }, + }, + yAxis: [ + { + name:'(元/台)', + min: (min - 2 < 0) ? 0 : min - 2, + max: (max + 2 > 100) ? 100 : max + 2, + type: 'value', + nameTextStyle: { + color: '#fff', + }, + splitLine: { + show: false, + lineStyle: { + color: '#eeeeee', + }, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: true, + interval:0, + textStyle: { + color: '#ffffff', + }, + }, + }, + ], + series: [ + { + name: data.yDataName, + type: 'line', + smooth:smooth, + showAllSymbol: true, //显示所有图形。 + symbol: 'circle', //标记的图形为实心圆 + symbolSize: 4, //标记的大小 + itemStyle: { + //折线拐点标志的样式 + color: '#14bd2d', + borderWidth: '2', + borderColor: '#14bd2d', + }, + lineStyle: { + color: '#14bd2d', + }, + label: { + //图形上的文本标签 + normal: { + formatter: `{c}${unit}`, + show: true, + position: "top", + textStyle: { + color: "#14bd2d", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.5 * vw, + }, + }, + }, + data: data.yData, + }, + { + name: data.yDataTwoName, + type: 'line', + smooth:smooth, + showAllSymbol: true, //显示所有图形。 + symbol: 'circle', //标记的图形为实心圆 + symbolSize: 4, //标记的大小 + itemStyle: { + //折线拐点标志的样式 + color: '#3094ea', + borderWidth: '2', + borderColor: '#3094ea', + }, + lineStyle: { + color: '#3094ea', + }, + label: { + //图形上的文本标签 + normal: { + formatter: `{c}${unit}`, + show: true, + position: "top", + textStyle: { + color: "#3094ea", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.5 * vw, + }, + }, + }, + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(76,82,193,0.7)' // 0% 处的颜色 + }, { + offset: 1, color: 'rgba(191,194,220,0.4)' // 100% 处的颜色 + }], + global: false // 缺省为 false + } + }, + }, + data: data.yDataTwo, + }, + ], + }; + + charts.setOption(option); + $(window).resize(charts.resize); +} // 饼图 @@ -1698,7 +1897,7 @@ const multipleVerticalBarChart = function (data, id) { charts.setOption(option); $(window).resize(charts.resize); } -const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') { +const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '',margin=20,isColor=true) { let charts = echarts.init(id); if (!data) { data = { @@ -1724,6 +1923,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') { } }, legend: { + right:'0', data: [data.yDataOneName, data.yDataTwoName], textStyle: { fontSize: 0.75 * vw, @@ -1736,7 +1936,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') { axisTick: {show: false}, axisLabel: { rotate: rotate, - margin: 20, + margin: margin, textStyle: { fontSize: 0.75 * vw, color: "#F1F1F3", @@ -1773,7 +1973,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') { itemStyle: { //图形样式 normal: { - color: "#64BCEC", + color: isColor? '#db8151': "#64BCEC", }, }, label: { @@ -1807,7 +2007,7 @@ const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '') { itemStyle: { //图形样式 normal: { - color: "#4FD3B9", + color: isColor? '#9ce375': "#4FD3B9", }, }, data: data.yDataTwo diff --git a/ruoyi-admin/src/main/resources/templates/broad/fp.html b/ruoyi-admin/src/main/resources/templates/broad/fp.html index 2f5a8f1..3cb3828 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/fp.html +++ b/ruoyi-admin/src/main/resources/templates/broad/fp.html @@ -358,8 +358,8 @@ //夹具生产计划切换 let tableData = [] let classes = 0 - let dayClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'] - let nightClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'] + let dayClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '7:30','8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30'] + let nightClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '19:30','20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30'] let tableWidth = ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"] showalert(); @@ -377,8 +377,8 @@ planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), dayClass, { width: tableWidth, }, 7) - planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'])) - planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'])) + planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '7:30' ,'8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30'])) + planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '7:30' ,'8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30'])) } else { planInfo = new AutoScrollTable(document.getElementById("my-transition"), nightClass, { width: tableWidth, @@ -387,8 +387,8 @@ planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), nightClass, { width: tableWidth, }, 7) - planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'])) - planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'])) + planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '19:30','20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30',])) + planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '19:30', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30'])) } }