| | |
| | | |
| | | @{ |
| | | ViewBag.Title = "GetEmployeeCNZJPercent"; |
| | | @{ |
| | | Layout = "~/Views/Shared/_Layout.cshtml"; |
| | | } |
| | | |
| | | |
| | | @section HeaderCSS{ |
| | | |
| | | <script src="~/Content/echarts-5.5.1/test/lib/jquery.min.js"></script> |
| | | <script src="~/Content/echarts-5.5.1/dist/echarts.common.min.js"></script> |
| | | <link rel="stylesheet" href="~/Content/echarts-5.5.1/test/lib/reset.css" /> |
| | | <link href="~/Content/layui/css/layui.css" rel="stylesheet" /> |
| | | <script src="~/Content/layui/layui.js"></script> |
| | | |
| | | <style> |
| | | .PageContent { |
| | | padding: 0px 2px; |
| | | padding: 0px 10px; |
| | | } |
| | | |
| | | .PageContent .PageHeader { |
| | |
| | | } |
| | | |
| | | .PageContent .PageHeader h2 { |
| | | color: black; |
| | | color: #3171de; |
| | | text-align: center; |
| | | vertical-align: middle; |
| | | margin: 5px; |
| | | margin: 0px; |
| | | display: inline-block; |
| | | } |
| | | |
| | |
| | | |
| | | .PageContent .layui-form-label { |
| | | padding: 5px 1px; |
| | | width: 62px; |
| | | width: 80px; |
| | | } |
| | | |
| | | .PageContent > .layui-form { |
| | |
| | | |
| | | .PageContent .layui-form-item .layui-input-inline { |
| | | float: left; |
| | | width: 175px; |
| | | width: 200px; |
| | | margin-right: 1px; |
| | | } |
| | | |
| | |
| | | padding: 0px; |
| | | width: 80px; |
| | | } |
| | | |
| | | .layui-table-view .layui-table th, .layui-table-view .layui-table td { |
| | | padding: 2px 0; |
| | | } |
| | | |
| | | .layui-table-cell { |
| | | padding: 0px 5px; |
| | | } |
| | | |
| | | .layui-form.layui-border-box.layui-table-view { |
| | | margin: 0px 10px |
| | | } |
| | | </style> |
| | | } |
| | | |
| | |
| | | |
| | | <script> |
| | | |
| | | $(function () { |
| | | var yMin = 0; |
| | | var yMax = 0; |
| | | |
| | | var divIdArr = ["mainA", "mainB", "mainC", "mainD"]; |
| | | var GroupNameArr = ["A", "B", "C", "D"]; |
| | | var divEChartsIdArr = ["divA", "divB", "divC", "divD"]; |
| | | var showY = [false, false, false, true]; |
| | | layui.use(['form', 'util'], function () { |
| | | |
| | | var allArr = new Array(4); |
| | | var arr1 = new Array(4); |
| | | var arr2 = new Array(4); |
| | | var layer = layui.layer; |
| | | |
| | | for (var i = 0; i < allArr.length; i++) { |
| | | allArr[i] = new Array(); |
| | | arr1[i] = new Array(); |
| | | arr2[i] = new Array(); |
| | | for (var j = 0; j < 12; j++) { |
| | | var value1 = getRandomNumber(0, 700); |
| | | var value2 = getRandomNumber(0, 300); |
| | | var allValue = value1 + value2; |
| | | allArr[i].push(' ' + allValue); |
| | | arr1[i].push(value1); |
| | | arr2[i].push(value2); |
| | | //获取当前年月,并组合成年+月的格式 |
| | | var now = new Date(); |
| | | var currentYear = now.getFullYear(); |
| | | var currentMonth = now.getMonth() + 1; |
| | | var realmonth = now.getMonth() |
| | | var realmonthstr = '' |
| | | if (realmonth < 10) { |
| | | realmonthstr = '0' + realmonth |
| | | } |
| | | else { realmonthstr = realmonth } |
| | | // 由于数据于每月最后一天生成,所以查询的数据应该是当前月的上一个月 |
| | | let currentdatestr = currentYear.toString() + realmonthstr.toString(); |
| | | |
| | | yMax = 1; |
| | | //获取当前年月往前推一年的年月,并组合成年+月的格式 |
| | | var old = new Date(); |
| | | old.setFullYear(old.getFullYear() - 1); |
| | | var startYear = old.getFullYear(); |
| | | var startMonth = old.getMonth() + 1; |
| | | var stmonthstr = '' |
| | | if (startMonth < 10) { |
| | | stmonthstr = '0' + startMonth |
| | | } |
| | | else { stmonthstr = startMonth } |
| | | //202309 |
| | | let startdatestr = startYear.toString() + stmonthstr.toString(); |
| | | //起始年月到当前年月区间 |
| | | var datestring = startdatestr + '-' + currentdatestr; |
| | | |
| | | //获取起始年月到当前年月的list |
| | | var yearMonthArray = []; |
| | | var yearMonthstr = []; |
| | | for (var year = startYear; year <= currentYear; year++) { |
| | | //如果是指定年份的那一年,当年的月份从你指定的月份开始,否则的话从1月开始 |
| | | var startMonthOfYear = year === startYear ? startMonth : 1; |
| | | //如果是今年,那么今年的最后一个月份就是当下获取的月份,否则改年最后一个是12月 |
| | | var endMonthOfYear = year === currentYear ? currentMonth : 12; |
| | | //循环本年的月份放入数组 |
| | | for (var month = startMonthOfYear; month < endMonthOfYear; month++) { |
| | | //图表显示X轴 |
| | | yearMonthstr.push(month + '月'); |
| | | if (month < 10) { |
| | | month = '0' + month |
| | | |
| | | } |
| | | //数据处理用的数组 |
| | | yearMonthArray.push(year.toString() + month.toString()); |
| | | } |
| | | } |
| | | |
| | | for (var i = 0; i < 4; i++) { |
| | | initPage(divIdArr[i], GroupNameArr[i], divEChartsIdArr[i], yMin, yMax, allArr[i], arr1[i], arr2[i], showY[i],i); |
| | | } |
| | | }); |
| | | var yMin = 0; |
| | | var yMax = 1; |
| | | |
| | | var groupa = []; |
| | | var groupb = []; |
| | | var groupc = []; |
| | | var groupd = []; |
| | | |
| | | function initPage(divId, GroupName, divEChartsId, yMin, yMax, allArr, arr1, arr2, showY,num) { |
| | | var sdpwtotal = new Array(); |
| | | var sdpwzj = new Array(); |
| | | var sdpwjj = new Array(); |
| | | |
| | | $('#' + divId).css({ "width": "25%", "float": "left", "height": "550px" }); |
| | | var $div = $('#' + divId); |
| | | $div.empty(); |
| | | $div.append('<div id="' + divEChartsId + '"></div><div>' + GroupName + '</div>'); |
| | | var ssvetotal = new Array(); |
| | | var ssvezj = new Array(); |
| | | var ssvejj = new Array(); |
| | | |
| | | var $divFirst = $div.find('div:first'); |
| | | var $divLast = $div.find('div:last'); |
| | | $divFirst.css({ "width": "100%", "height": "500px" }); |
| | | $divLast.css({ "width": "100%", "height": "70px", "line-height": "70px", "font-size": "large", "font-weight": "bold", "text-align": "center" }); |
| | | var spdhtotal = new Array(); |
| | | var spdhzj = new Array(); |
| | | var spdhjj = new Array(); |
| | | |
| | | var chartDom = document.getElementById(divEChartsId); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | var seoctotal = new Array(); |
| | | var seoczj = new Array(); |
| | | var seocjj = new Array(); |
| | | |
| | | if (num==0) { |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | formatter: function (params) { |
| | | let result = ''; |
| | | params.forEach(function (item) { |
| | | var colorSpan = '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;background-color:' + item.color + ';"></span>'; |
| | | result += colorSpan + ' ' + item.seriesName + ': ' + Math.round((item.value) * 1000) / 10 + '%' + '<br/>'; |
| | | }); |
| | | return result; |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '1%', |
| | | right: '1%', |
| | | bottom: '3%', |
| | | containLabel: true |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10月', '11月', '12月'], |
| | | axisLabel: { |
| | | interval: 0, |
| | | formatter: function (value) { |
| | | var str = ""; |
| | | var num = 2; //每行显示字数 |
| | | var valLength = value.length; //该项x轴字数 |
| | | var rowNum = Math.ceil(valLength / num); // 行数 |
| | | |
| | | if (rowNum > 1) { |
| | | for (var i = 0; i < rowNum; i++) { |
| | | var temp = ""; |
| | | var start = i * num; |
| | | var end = start + num; |
| | | |
| | | temp = value.substring(start, end) + "\n"; |
| | | str += temp; |
| | | } |
| | | return str; |
| | | } else { |
| | | return value; |
| | | } |
| | | if (yMax > 0) |
| | | { |
| | | //获取所有事业所的直間比例(中方人員)Data |
| | | $.ajax({ |
| | | type: "get", |
| | | url: "/Ppm/EmployeeDashboard/GetEmployeeCNZJData", |
| | | data: { GroupName: '', DateString: datestring, IsOffice: 2 }, |
| | | cache: false, |
| | | success: function (res) { |
| | | if (res.data.length > 0) { |
| | | //先按事务所分别取到数据 |
| | | for (var a = 0; a < res.data.length; a++) { |
| | | var obj = {}; |
| | | obj.YearMonth = res.data[a].YearMonth; |
| | | obj.IsOffice = res.data[a].IsOffice; |
| | | obj.Qty = res.data[a].Qty; |
| | | if (res.data[a].GroupId == 1) { |
| | | groupa.push(obj); |
| | | } |
| | | else if (res.data[a].GroupId == 2) { |
| | | groupb.push(obj); |
| | | } |
| | | else if (res.data[a].GroupId == 3) { |
| | | groupc.push(obj); |
| | | } |
| | | else if (res.data[a].GroupId == 4) { |
| | | groupd.push(obj); |
| | | } |
| | | } |
| | | |
| | | //再分别按照事务所解析数据 |
| | | //SDPW |
| | | for (var x = 0; x < yearMonthArray.length; x++) { |
| | | var zjgroupadata = 0; |
| | | var jjgroupadata = 0; |
| | | for (var i = 0; i < groupa.length; i++) { |
| | | //获取到年月 |
| | | if (groupa[i].YearMonth == yearMonthArray[x]) { |
| | | if (groupa[i].IsOffice == 0) { |
| | | zjgroupadata = groupa[i].Qty; |
| | | sdpwzj.push(zjgroupadata); |
| | | } |
| | | if (groupa[i].IsOffice == 1) { |
| | | jjgroupadata = groupa[i].Qty; |
| | | sdpwjj.push(jjgroupadata) |
| | | } |
| | | } |
| | | } |
| | | var totaoconthdata = zjgroupadata + jjgroupadata; |
| | | sdpwtotal.push(totaoconthdata); |
| | | } |
| | | initPage('mainA', 'SDPW', 'divA', yMin, yMax, sdpwtotal, sdpwzj, sdpwjj, true, false); |
| | | |
| | | //SSVE |
| | | for (var x = 0; x < yearMonthArray.length; x++) { |
| | | var zjgroupbdata = 0; |
| | | var jjgroupbdata = 0; |
| | | for (var i = 0; i < groupb.length; i++) { |
| | | //获取到年月 |
| | | if (groupb[i].YearMonth == yearMonthArray[x]) { |
| | | if (groupb[i].IsOffice == 0) { |
| | | zjgroupbdata = groupb[i].Qty; |
| | | ssvezj.push(zjgroupbdata); |
| | | } |
| | | if (groupb[i].IsOffice == 1) { |
| | | jjgroupbdata = groupb[i].Qty; |
| | | ssvejj.push(jjgroupbdata) |
| | | } |
| | | } |
| | | } |
| | | var totaoconthdata = zjgroupbdata + jjgroupbdata; |
| | | ssvetotal.push(totaoconthdata); |
| | | } |
| | | initPage('mainB', 'SSVE', 'divB', yMin, yMax, ssvetotal, ssvezj, ssvejj, false, false); |
| | | |
| | | //SPDH |
| | | for (var x = 0; x < yearMonthArray.length; x++) { |
| | | var zjgroupcdata = 0; |
| | | var jjgroupcdata = 0; |
| | | for (var i = 0; i < groupc.length; i++) { |
| | | //获取到年月 |
| | | if (groupc[i].YearMonth == yearMonthArray[x]) { |
| | | if (groupc[i].IsOffice == 0) { |
| | | zjgroupcdata = groupc[i].Qty; |
| | | spdhzj.push(zjgroupcdata); |
| | | } |
| | | if (groupc[i].IsOffice == 1) { |
| | | jjgroupcdata = groupc[i].Qty; |
| | | spdhjj.push(jjgroupcdata) |
| | | } |
| | | } |
| | | } |
| | | var totaoconthdata = zjgroupcdata + jjgroupcdata; |
| | | spdhtotal.push(totaoconthdata); |
| | | } |
| | | initPage('mainC', 'SPDH', 'divC', yMin, yMax, spdhtotal, spdhzj, spdhjj, false, false); |
| | | |
| | | //SEOC |
| | | for (var x = 0; x < yearMonthArray.length; x++) { |
| | | var zjgroupddata = 0; |
| | | var jjgroupddata = 0; |
| | | for (var i = 0; i < groupd.length; i++) { |
| | | //获取到年月 |
| | | if (groupd[i].YearMonth == yearMonthArray[x]) { |
| | | if (groupd[i].IsOffice == 0) { |
| | | zjgroupddata = groupd[i].Qty; |
| | | seoczj.push(zjgroupddata); |
| | | } |
| | | if (groupd[i].IsOffice == 1) { |
| | | jjgroupddata = groupd[i].Qty; |
| | | seocjj.push(jjgroupddata) |
| | | } |
| | | } |
| | | } |
| | | var totaoconthdata = zjgroupddata + jjgroupddata; |
| | | seoctotal.push(totaoconthdata); |
| | | } |
| | | initPage('mainD', 'SEOC', 'divD', yMin, yMax, seoctotal, seoczj, seocjj, false, true); |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | show: true, |
| | | type: 'value', |
| | | min: yMin, |
| | | max: yMax, |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | | name: '直接比例', |
| | | type: 'bar', |
| | | barWidth: 21, |
| | | stack: 'Search Engine', |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | itemStyle: { |
| | | color: '#92D050' |
| | | }, |
| | | label: { |
| | | show: true, |
| | | position: 'inside', |
| | | textStyle: { |
| | | color: '#333', // 标签字体颜色 |
| | | fontSize: 10, // 标签字体大小 |
| | | // 标签字体加粗 |
| | | fontFamily: 'Arial' // 标签字体 |
| | | }, |
| | | formatter: (params) => Math.round(params.value * 1000) / 10 + '%' |
| | | }, |
| | | data: arr1.map((d, did) => allArr[did] <= 0 ? 0 : d / allArr[did] |
| | | ), |
| | | }, |
| | | { |
| | | name: '間接比例', |
| | | type: 'bar', |
| | | barWidth: 21, |
| | | stack: 'Search Engine', |
| | | emphasis: { |
| | | focus: 'series' |
| | | }, |
| | | itemStyle: { |
| | | color: '#F8CBAD' |
| | | }, |
| | | label: { |
| | | show: true, |
| | | position: 'inside', |
| | | textStyle: { |
| | | color: '#333', // 标签字体颜色 |
| | | fontSize: 10, // 标签字体大小 |
| | | // 标签字体加粗 |
| | | fontFamily: 'Arial' // 标签字体 |
| | | }, |
| | | formatter: (params) => Math.round(params.value * 1000) / 10 + '%' |
| | | }, |
| | | data: arr2.map((d, did) => allArr[did] <= 0 ? 0 : d / allArr[did] |
| | | ), |
| | | }, |
| | | ] |
| | | }; |
| | | }, |
| | | error: function (jqXHR, errorThrown) { |
| | | layer.alert('获取直間比例(中方人員)Data异常!', { icon: 2 }); |
| | | } |
| | | }); |
| | | } |
| | | else { |
| | | if (showY) { |
| | | |
| | | function initPage(divId, GroupName, divEChartsId, Yo, Ym, Tt, ZJt, JJt, ShowY, ShowLengend) { |
| | | |
| | | $('#' + divId).css({ "width": "25%", "float": "left", "height": "550px" }); |
| | | var $div = $('#' + divId); |
| | | $div.empty(); |
| | | $div.append('<div id="' + divEChartsId + '"></div><div>' + GroupName + '</div>'); |
| | | |
| | | var $divFirst = $div.find('div:first'); |
| | | var $divLast = $div.find('div:last'); |
| | | $divFirst.css({ "width": "100%", "height": "500px" }); |
| | | $divLast.css({ "width": "100%", "height": "70px", "line-height": "70px", "font-size": "large", "font-weight": "bold", "text-align": "center" }); |
| | | |
| | | var chartDom = document.getElementById(divEChartsId); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | |
| | | if (ShowLengend) { |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10月', '11月', '12月'], |
| | | data: yearMonthstr, |
| | | axisLabel: { |
| | | interval: 0, |
| | | formatter: function (value) { |
| | | var str = ""; |
| | | var num = 2; //每行显示字数 |
| | | var valLength = value.length; //该项x轴字数 |
| | | var rowNum = Math.ceil(valLength / num); // 行数 |
| | | var num = 2; //每行显示字数 |
| | | var valLength = value.length; //该项x轴字数 |
| | | var rowNum = Math.ceil(valLength / num); // 行数 |
| | | |
| | | if (rowNum > 1) { |
| | | for (var i = 0; i < rowNum; i++) { |
| | |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | show: false, |
| | | show: ShowY, |
| | | type: 'value', |
| | | min: yMin, |
| | | max: yMax, |
| | |
| | | { |
| | | name: '直接比例', |
| | | type: 'bar', |
| | | barWidth: 21, |
| | | barWidth: 20, |
| | | stack: 'Search Engine', |
| | | emphasis: { |
| | | focus: 'series' |
| | |
| | | textStyle: { |
| | | color: '#333', // 标签字体颜色 |
| | | fontSize: 10, // 标签字体大小 |
| | | // 标签字体加粗 |
| | | // 标签字体加粗 |
| | | fontFamily: 'Arial' // 标签字体 |
| | | }, |
| | | formatter: (params) => Math.round(params.value * 1000) / 10 + '%' |
| | | }, |
| | | data: arr1.map((d, did) => allArr[did] <= 0 ? 0 : d / allArr[did] |
| | | data: ZJt.map((d, did) => Tt[did] <= 0 ? 0 : d / Tt[did] |
| | | ), |
| | | }, |
| | | { |
| | | name: '間接比例', |
| | | type: 'bar', |
| | | barWidth: 21, |
| | | barWidth: 20, |
| | | stack: 'Search Engine', |
| | | emphasis: { |
| | | focus: 'series' |
| | |
| | | textStyle: { |
| | | color: '#333', // 标签字体颜色 |
| | | fontSize: 10, // 标签字体大小 |
| | | // 标签字体加粗 |
| | | // 标签字体加粗 |
| | | fontFamily: 'Arial' // 标签字体 |
| | | }, |
| | | formatter: (params) => Math.round(params.value * 1000) / 10 + '%' |
| | | }, |
| | | data: arr2.map((d, did) => allArr[did] <= 0 ? 0 : d / allArr[did] |
| | | data: JJt.map((d, did) => Tt[did] <= 0 ? 0 : d / Tt[did] |
| | | ), |
| | | }, |
| | | ] |
| | |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10月', '11月', '12月'], |
| | | data: yearMonthstr, |
| | | axisLabel: { |
| | | interval: 0, |
| | | formatter: function (value) { |
| | | var str = ""; |
| | | var num = 2; //每行显示字数 |
| | | var valLength = value.length; //该项x轴字数 |
| | | var rowNum = Math.ceil(valLength / num); // 行数 |
| | | var num = 2; //每行显示字数 |
| | | var valLength = value.length; //该项x轴字数 |
| | | var rowNum = Math.ceil(valLength / num); // 行数 |
| | | |
| | | if (rowNum > 1) { |
| | | for (var i = 0; i < rowNum; i++) { |
| | |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | show: false, |
| | | show: ShowY, |
| | | type: 'value', |
| | | min: yMin, |
| | | max: yMax, |
| | |
| | | { |
| | | name: '直接比例', |
| | | type: 'bar', |
| | | barWidth: 21, |
| | | barWidth: 20, |
| | | stack: 'Search Engine', |
| | | emphasis: { |
| | | focus: 'series' |
| | |
| | | textStyle: { |
| | | color: '#333', // 标签字体颜色 |
| | | fontSize: 10, // 标签字体大小 |
| | | // 标签字体加粗 |
| | | // 标签字体加粗 |
| | | fontFamily: 'Arial' // 标签字体 |
| | | }, |
| | | formatter: (params) => Math.round(params.value * 1000) / 10 + '%' |
| | | }, |
| | | data: arr1.map((d, did) => allArr[did] <= 0 ? 0 : d / allArr[did] |
| | | data: ZJt.map((d, did) => Tt[did] <= 0 ? 0 : d / Tt[did] |
| | | ), |
| | | }, |
| | | { |
| | | name: '間接比例', |
| | | type: 'bar', |
| | | barWidth: 21, |
| | | barWidth: 20, |
| | | stack: 'Search Engine', |
| | | emphasis: { |
| | | focus: 'series' |
| | |
| | | textStyle: { |
| | | color: '#333', // 标签字体颜色 |
| | | fontSize: 10, // 标签字体大小 |
| | | // 标签字体加粗 |
| | | // 标签字体加粗 |
| | | fontFamily: 'Arial' // 标签字体 |
| | | }, |
| | | formatter: (params) => Math.round(params.value * 1000) / 10 + '%' |
| | | }, |
| | | data: arr2.map((d, did) => allArr[did] <= 0 ? 0 : d / allArr[did] |
| | | data: JJt.map((d, did) => Tt[did] <= 0 ? 0 : d / Tt[did] |
| | | ), |
| | | }, |
| | | ] |
| | | }; |
| | | } |
| | | myChart.setOption(option); |
| | | } |
| | | myChart.setOption(option); |
| | | } |
| | | |
| | | function getRandomNumber(min, max) { |
| | | return Math.floor(Math.random() * (max - min + 1)) + min; |
| | | } |
| | | |
| | | }); |
| | | </script> |
| | | |
| | | |