数据分析

This commit is contained in:
cwchen 2025-07-23 15:07:17 +08:00
parent ef84bc2bd1
commit 5582e317ce
5 changed files with 625 additions and 4 deletions

View File

@ -0,0 +1,68 @@
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fff;
font-family: 'Alibaba PuHuiTi R';
}
#main-box {
width: 100%;
height: 100%;
justify-content: space-evenly;
}
.layout {
display: flex;
align-items: center;
justify-content: center;
}
#left-box{
width: 68%;
height: 100%;
padding: 2% 0;
box-sizing: border-box;
}
#right-box{
width: 30%;
height: 100%;
padding: 2% 0;
box-sizing: border-box;
}
.basic-search-box{
width: 100%;
height: 60px;
justify-content: flex-start;
}
.layui-table .layui-table-cell {
height: auto;
word-break: normal;
display: block;
white-space: pre-wrap;
word-wrap: break-word;
overflow: hidden;
padding: 0 10px !important;
}
.basic-search-box .layui-input-inline{
width: 190px;
}
.basic-search-box button{
background-color: #16baaa;
}
.layui-form-item {
margin: 0;
}
#oneEcharts{
width: 100%;
height: 49%;
}
#twoEcharts{
width: 100%;
height: 49%;
}

View File

@ -38,7 +38,7 @@ function changeData(that, type) {
}else if(type == 5){ // 节能减排分析
src = '';
}else if(type == 6){ // 工人效率分析
src = '';
src = 'workerEfficiencyAnalysis.html';
}else if(type == 7){ // 环境监测分析
src = '';
}else if(type == 8){ // 项目管理分析

View File

@ -0,0 +1,493 @@
// 1512P017007Y01-凌云变 1612P021000T01-红枫变
let dataList = [{
bidCode: '1512P017007Y01',
list: [{
userName: '宋跃进',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '刘振',
teamName: '变电土建-朱润生3班',
postName: '导线压线工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '黄照飞',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '王玉华',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '黄丹',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '赵光伟',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '刘磊',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '化苏碧',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '曹先应',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '陆乃怀',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '袁加纯',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
},
{
userName: '张友顺',
teamName: '变电土建-朱润生3班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
}
]
},
{
bidCode: '1612P021000T01',
list: [{
userName: '宋跃进',
teamName: '变电土建-宋鹏2班',
postName: '组塔工',
attDay: 22,
workTime: 176,
completeWorkload: '15座',
unitTimeOutput: '0.085座/小时',
rateLevel: '高效',
}]
}];
let table, layer, form;
let myChart = null, myChart2 = null;
layui.use(['layer', 'table', 'form'], function () {
layer = layui.layer;
table = layui.table;
form = layui.form;
let bidCode = parent.parent.$('#bidPro').val()
let filterList = dataList.filter(item => {
return item.bidCode === bidCode;
});
initTable(filterList[0].list || []);
});
function initTable(data) {
table.render({
elem: '#demo2',
id: 'demo2',
skin: 'line',
page: true,
height: 'full-120',
headers: {
"decrypt": "decrypt",
"Authorization": token
},
data: data,
cols: [[
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
{ field: 'userName', title: '工人/班组', align: 'center', width: '10%' },
{ field: 'teamName', title: '班组', align: 'center', width: '10%' },
{ field: 'postName', title: '工种', align: 'center', width: '10%' },
{ field: 'attDay', title: '出勤天数', align: 'center', width: '10%' },
{ field: 'workTime', title: '工作时长', align: 'center', width: '10%' },
{ field: 'completeWorkload', title: '完成工作量', align: 'center', width: '15%' },
{ field: 'unitTimeOutput', title: '单位时间产量', align: 'center', width: '15%' },
{
field: 'rateLevel', title: '效率评级', align: 'center', width: '10%',
templet: function (d) {
let color = '';
if (d.rateLevel === '高效') {
color = 'green';
} else if (d.rateLevel === '达标') {
color = 'yellow';
} else if (d.rateLevel === '低效') {
color = 'red';
}
return '<p style="color:' + color + '">' + d.rateLevel + '</p>';
}
}
]],
initComplete: function () {
// 在表格渲染完成后,重新渲染序号列
var that = this.elem.next();
var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
tool.find("tr").each(function (index, item) {
$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
});
},
done: function (res, curr, count, origin) {
// console.log(res);
}
})
table.on('rowDouble(demo2)', function (obj) {
console.log(obj.data);
});
}
function query(type) {
let userName = $('#userName').val();
let bidCode = parent.parent.$('#bidPro').val()
let filterList = dataList.filter(item => {
return item.bidCode === bidCode;
});
let list = filterList[0].list || []
let data = [];
if (userName) {
data = list.filter(item => {
return item.userName.indexOf(userName) > -1;
});
} else {
data = list;
}
initTable(data);
}
// 初始化 echarts
function initEcharts() {
myChart.dispose();
myChart2.dispose();
myChart = echarts.init(document.getElementById("oneEcharts"));
myChart2 = echarts.init(document.getElementById("twoEcharts"));
initEchartsOne();
}
function initEchartsOne() {
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
const graphicColors = [
['rgba(7, 209, 250, 1)', 'rgba(7, 209, 250, .2)'],
['rgba(7, 131, 250, 1)', 'rgba(7, 131, 250, .2)'],
['rgba(31, 237, 190, 1)', 'rgba(31, 237, 190, .2)'],
['rgba(255, 209, 92, 1)', 'rgba(255, 209, 92, .2)'],
['rgba(255, 136, 136, 1)', 'rgba(255, 136, 136, .2)'],
['rgba(157, 222, 255, 1)', 'rgba(157, 222, 255, .2)'],
['rgba(94, 255, 108, 1)', 'rgba(94, 255, 108, .2)'],
['rgba(146, 119, 255, 1)', 'rgba(146, 119, 255, .2)'],
['rgba(0, 246, 255, 1)', 'rgba(0, 246, 255, .2)'],
['rgba(255, 162, 77, 1)', 'rgba(255, 162, 77, .2)'],
['rgba(255, 105, 207, 1)', 'rgba(255, 105, 207, .2)']
]
const option = {
backgroundColor: "#08244d",
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
textStyle: {
color: '#fff',
fontSize: 12
},
confine: true, // 超出范围
backgroundColor: 'rgba(17,95,182,0.5)', //设置背景颜色
formatter: params => {
let str = `<div>${params[0]?.name}</div>`
params.map((item, index) => {
if ([0, 2, 4].includes(index)) {
let str1 = ''
if (item.data[index + 2]) {
str1 = `${item.data[index + 2]} : ${item.data[index + 3]}`
str += `<div>${item.marker} ${str1} 批</div>`
}
}
})
return str
}
},
legend: {},
dataset: {
dimensions: ['product', 'sort', 'company1', 'num1', 'company2', 'num2', 'company3', 'num3'],
source: [
['总匝开关', 1, 'a', 43.3, 'b', 85.8, 'c', 93.7],
['电线', 2, 'd', 83.1, 'e', 73.4, 'f', 55.1],
['电池', 3, 'g', 86.4, 'h', 65.2, 'i', 82.5],
['外壳', 4, 'j', 72.4, 'k', 53.9, 'l', 39.1],
['充电器', 4, 'j', 62.4, 'k', 43.9, 'l', 79.1]
]
},
xAxis: {
type: 'category',
axisLabel: {
width: 80,
padding: [8, 0],
borderColor: '#6AAFFF',
borderWidth: 1,
borderRadius: 4,
margin: 20,
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(7, 131, 250, 1)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(7, 131, 250, 0.2)'// 100% 处的颜色
}
],
global: false // 缺省为 false
},
color: '#fff',
}
},
yAxis: {
// show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
// axisTick: {
// show: false // 不显示坐标轴刻度线
// },
// axisLine: {
// show: false, // 不显示坐标轴线
// },
// axisLabel: {
// show: false, // 不显示坐标轴上的文字
// },
// splitLine: {
// show: false // 不显示网格线
// },
splitLine: {
lineStyle: {
type: 'dashed',
color: '#D9E7FF33'
}
}
},
series: [
{
type: 'bar',
stack: 'num1',
label: {
// show: true,
// rotate: 90,
// position: 'insideBottom',
// align: 'left',
// verticalAlign: 'middle'
show: true,
position: 'bottom',
},
itemStyle: {
normal: {
opacity: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: graphicColors[0][0] || 'rgba(7, 209, 250, 1)' // 0% 处的颜色
},
{
offset: 1,
color: graphicColors[0][1] || 'rgba(7, 209, 250, .2)' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
encode: { x: 'product', y: 'num1', label: ['company1'] }
},
{
type: 'bar',
stack: 'num1',
itemStyle: {
color: 'transparent' //颜色透明
},
label: {
show: true,
position: 'top'
},
encode: { x: 'product', y: 'sort', label: ['num1'] }
},
{
type: 'bar',
stack: 'num2',
label: {
// show: true,
// rotate: 90,
// position: 'insideBottom',
// align: 'left',
// verticalAlign: 'middle'
show: true,
position: 'bottom',
},
itemStyle: {
normal: {
opacity: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: graphicColors[1][0] || 'rgba(7, 209, 250, 1)' // 0% 处的颜色
},
{
offset: 1,
color: graphicColors[1][1] || 'rgba(7, 209, 250, .2)' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
encode: { x: 'product', y: 'num2', label: ['company2'] }
},
{
type: 'bar',
stack: 'num2',
itemStyle: {
color: 'transparent' //颜色透明
},
label: {
show: true,
position: 'top'
},
encode: { x: 'product', y: 'sort', label: ['num1'] }
},
{
type: 'bar',
stack: 'num3',
label: {
// show: true,
// rotate: 90,
// position: 'insideBottom',
// align: 'left',
// verticalAlign: 'middle'
show: true,
position: 'bottom',
},
itemStyle: {
normal: {
opacity: 1,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: graphicColors[2][0] || 'rgba(7, 209, 250, 1)' // 0% 处的颜色
},
{
offset: 1,
color: graphicColors[2][1] || 'rgba(7, 209, 250, .2)' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
encode: { x: 'product', y: 'num3', label: ['company3'] }
},
{
type: 'bar',
stack: 'num3',
itemStyle: {
color: 'transparent' //颜色透明
},
label: {
show: true,
position: 'top'
},
encode: { x: 'product', y: 'sort', label: ['num3'] }
}
]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
}

View File

@ -40,9 +40,6 @@
<li class="layout nocheck" onclick="changeData(this,7)">环境监测分析</li>
<li class="layout nocheck" onclick="changeData(this,8)">项目管理分析</li>
<li class="layout nocheck" onclick="changeData(this,9)">整体效能分析</li>
<li class="layout nocheck" onclick="changeData(this,10)">风险值班分析</li>
<li class="layout nocheck" onclick="changeData(this,11)">穿戴设备监测设备指标分析</li>
<li class="layout nocheck" onclick="changeData(this,12)">延期原因分析</li>
</ul>
</div>
<div id="right-table-box" class="layout">

View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
<link rel="stylesheet" href="../../css/dataAnalysis/commonStyle.css">
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
<link rel="stylesheet" href="../../css/coreTable.css"/>
<!-- <link rel="stylesheet" href="../../css/accessMge/accessMge.css"> -->
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="../../js/publics/public.js"></script>
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
<script src="../../js/publics/echarts.js"></script>
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
<script src="../../js/publics/aescbc.js"></script>
<script src="../../js/publics/sm3.js"></script>
<script src="../../api/commonRequest.js"></script>
<!-- <script src="../../js/publics/shuiYin.js"></script> -->
<script src="../../plugin/watermark.js"></script>
<title>工人效率分析</title>
</head>
<body>
<div id="main-box" class="layout">
<div id="left-box">
<div class="basic-search-box layout">
<form class="layui-form basic-form layout" onclick="return false;" onsubmit="return false;">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label" style="width: 80px;">工人:</label>
<div class="layui-input-inline">
<input type="text" id="userName" class="layui-input" autocomplete="off">
</div>
</div>
<button type="button" class="layui-btn layui-btn-normal" onclick="query(1)">
<i class="layui-icon layui-icon-query"></i>查询
</button>
</div>
</form>
</div>
<table id="demo2" lay-filter="demo2"></table>
</div>
<div id="right-box">
<div id="oneEcharts">
</div>
<div id="twoEcharts">
</div>
</div>
</div>
</body>
<style>
.layui-table-init {
background-color: transparent !important;
}
</style>
<script src="../../js/pages/newDataAnalysis/workerEfficiencyAnalysis.js" type="text/javascript"></script>
</html>