数据分析-

This commit is contained in:
lSun 2025-10-18 17:19:35 +08:00
parent 0b4272f9d4
commit f598b79f07
8 changed files with 513 additions and 254 deletions

View File

@ -1,5 +1,6 @@
let table, layer, form, laydate;
let myChart = null, myChart2 = null;
let ballMachineData = [] // 存储球机列表数据
let selectedBallName = "" // 当前选中的球机名称
layui.use(['layer', 'table', 'form', 'laydate'], function () {
layer = layui.layer;
table = layui.table;
@ -15,9 +16,6 @@ layui.use(['layer', 'table', 'form', 'laydate'], function () {
initTable();
// 工程安全分析-球机列表
getBallSelect()
initTable2();
});
function initTable(startTime, endTime) {
@ -71,10 +69,10 @@ function query() {
endTime = "";
}
initTable(startTime, endTime);
initTable2(startTime, endTime,selectedBallName);
}
function getBallSelect() {
const url = commonUrl + "screen/proSafety/selectBallSelect"
ajaxRequestGet(
url,
@ -101,60 +99,51 @@ function getBallSelect() {
/* 实时检测赋值 */
function setData(data) {
if (data) {
console.log(data)
const dynamicList = document.getElementById('dynamic-list');
dynamicList.innerHTML = ''; // 清空现有内容
if (data && data.length > 0) {
ballMachineData = data
const dynamicList = document.getElementById("dynamic-list")
dynamicList.innerHTML = "" // 清空现有内容
data.forEach((item, index) => {
const listItem = document.createElement('li');
listItem.className = index === 0 ? 'layout check' : 'layout nocheck';
listItem.textContent = item.ballName;
listItem.onclick = function() {
changeDynamicData(this, index);
};
dynamicList.appendChild(listItem);
});
const listItem = document.createElement("li")
listItem.className = index === 0 ? "layout check" : "layout nocheck"
listItem.textContent = item.ballName
listItem.onclick = function () {
changeDynamicData(this, index)
}
dynamicList.appendChild(listItem)
})
if (data.length > 0) {
selectedBallName = data[0].ballName
// 获取当前时间范围
const startTime = $("#ID-laydate-start-date-1").val() || ""
const endTime = $("#ID-laydate-end-date-1").val() || ""
// 加载第一个球机的视频数据
initTable2(startTime, endTime, selectedBallName)
}
}
}
function changeDynamicData(element, index){
function changeDynamicData(element, index) {
// 移除所有选中状态
const dynamicItems = document.querySelectorAll('#dynamic-list .layout');
dynamicItems.forEach(item => {
item.className = 'layout nocheck';
});
const dynamicItems = document.querySelectorAll("#dynamic-list .layout")
dynamicItems.forEach((item) => {
item.className = "layout nocheck"
})
// 设置当前选中项
element.className = 'layout check';
element.className = "layout check"
// 显示选中项信息
const selectedItem = responseData.data[index];
const display = document.getElementById('selected-data');
selectedBallName = ballMachineData[index].ballName
let displayHTML = `
<div class="data-item"><strong>选中项:</strong> ${selectedItem.ballName}</div>
<div class="data-item"><strong>索引:</strong> ${index}</div>
`;
// 添加其他非空字段
Object.keys(selectedItem).forEach(key => {
if (selectedItem[key] !== null && key !== 'ballName') {
displayHTML += `<div class="data-item"><strong>${key}:</strong> ${selectedItem[key]}</div>`;
}
});
display.innerHTML = displayHTML;
// 获取当前时间范围
const startTime = $("#ID-laydate-start-date-1").val() || ""
const endTime = $("#ID-laydate-end-date-1").val() || ""
// 重新加载视频数据
initTable2(startTime, endTime, selectedBallName)
}
// 页面加载完成后初始化
window.onload = function() {
// 默认选中第一个动态项
const firstDynamicItem = document.querySelector('#dynamic-list .layout');
if (firstDynamicItem) {
changeDynamicData(firstDynamicItem, 0);
}
};
}
function initTable2(startTime, endTime,ballName) {
@ -168,125 +157,152 @@ function initTable2(startTime, endTime,ballName) {
"Authorization": token
},
data: {
startTime:'2025-10-12',
endTime:'2025-10-17',
ballName:'测试球机',
startTime:startTime,
endTime:endTime,
ballName:ballName,
page: '1',
limit: '10'
},
success: function (data) {
const container = document.getElementById('demo2-container');
container.innerHTML = ''; // 清空容器
success: (response) => {
const container = document.getElementById("demo2-container")
container.innerHTML = "" // 清空容器
if (response.code === 0 && response.data && response.data.length > 0) {
response.data.forEach((item) => {
const card = document.createElement("div")
card.className = "card"
card.style.cssText = `width: calc(20% - 10px);height: 150px;display: flex;flex-direction: column;overflow: hidden;cursor: pointer;`
if (data.data && data.data.length > 0) {
data.data.forEach(item => {
const card = document.createElement('div');
card.className = 'card';
card.style.cssText = ` width: calc(20% - 10px);height: 150px;background-color: #1a3a4c;border: none;border-radius: 8px;display: flex;flex-direction: column;overflow: hidden;`;
// 创建图片区域
const imgDiv = document.createElement('div');
imgDiv.style.cssText = ` flex: 1;background-color: #2a4a5c;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 12px;`;
imgDiv.textContent = data.name;
card.appendChild(imgDiv);
const imgDiv = document.createElement("div")
imgDiv.style.cssText = `flex: 1;display: flex;align-items: center;justify-content: center;overflow: hidden;`
// 显示实际图片
if (item.imagePath) {
const img = document.createElement("img")
img.src = commonUrl + item.imagePath // 拼接完整图片路径
img.style.cssText = `width: 100%;height: 100%;object-fit: cover;`
img.onerror = function () {
// 图片加载失败时显示文字
this.style.display = "none"
imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "图片加载失败"}</span>`
}
imgDiv.appendChild(img)
} else {
imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "暂无图片"}</span>`
}
card.appendChild(imgDiv)
// 创建信息区域
const infoDiv = document.createElement('div');
infoDiv.style.cssText = `padding: 5px;background-color: #1a3a4c;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`;
const infoDiv = document.createElement("div")
infoDiv.style.cssText = `padding: 5px;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`
const dateSpan = document.createElement('span');
dateSpan.textContent = item.createTime;
const dateSpan = document.createElement("span")
dateSpan.textContent = item.createTime || "XXX-XX-XX"
const statusSpan = document.createElement('span');
statusSpan.textContent = data.name;
const statusSpan = document.createElement("span")
statusSpan.textContent = item.name || "未知"
infoDiv.appendChild(dateSpan);
infoDiv.appendChild(statusSpan);
card.appendChild(infoDiv);
infoDiv.appendChild(dateSpan)
infoDiv.appendChild(statusSpan)
card.appendChild(infoDiv)
container.appendChild(card);
});
container.appendChild(card)
})
// 添加 Layui 分页
layui.use('laypage', function () {
var laypage = layui.laypage;
layui.use("laypage", () => {
var laypage = layui.laypage
laypage.render({
elem: 'demo2-pagination', // 分页容器ID
count: data.data.length, // 总条数
limit: 10, // 每页显示条数
curr: 1, // 当前页
layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'], // 布局
prev: '<i class="layui-icon layui-icon-left"></i>', // 上一页图标
next: '<i class="layui-icon layui-icon-right"></i>', // 下一页图标
theme: '#3ACAB8', // 主题色
jump: function (obj, first) {
if (!first) { // 非首次触发
// 获取当前页码和每页条数
const currentPage = obj.curr;
const pageSize = obj.limit;
elem: "demo2-pagination",
count: response.total || response.data.length, // 使用total字段
limit: 10,
curr: 1,
layout: ["prev", "page", "next", "skip", "count", "limit"],
prev: '<i class="layui-icon layui-icon-left"></i>',
next: '<i class="layui-icon layui-icon-right"></i>',
theme: "#3ACAB8",
jump: (obj, first) => {
if (!first) {
const currentPage = obj.curr
const pageSize = obj.limit
// 计算起始索引和结束索引
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
// 重新获取数据这里需要根据实际API调整
// 重新获取数据
$.ajax({
url: commonUrl + "screen/proSafety/selectProSafetyVideo",
url: url,
type: "get",
headers: {
"decrypt": "decrypt",
"Authorization": token
decrypt: "decrypt",
Authorization: token,
},
data: {
startTime:startTime,
endTime:endTime,
ballName:ballName,
startTime: startTime,
endTime: endTime,
ballName: ballName,
page: currentPage,
limit: pageSize
limit: pageSize,
},
success: function (data) {
// 清空容器
const container = document.getElementById('demo2-container');
container.innerHTML = '';
success: (pageResponse) => {
const container = document.getElementById("demo2-container")
container.innerHTML = ""
// 渲染当前页的数据
if (data.data && data.data.length > 0) {
const pageData = data.data.slice(startIndex, endIndex);
if (pageResponse.code === 0 && pageResponse.data && pageResponse.data.length > 0) {
pageResponse.data.forEach((item) => {
const card = document.createElement("div")
card.className = "card"
card.style.cssText = `width: calc(20% - 10px);height: 150px;display: flex;flex-direction: column;overflow: hidden;cursor: pointer;`
pageData.forEach(item => {
const card = document.createElement('div');
card.className = 'card';
card.style.cssText = ` width: calc(20% - 10px);height: 150px;background-color: #1a3a4c;border: none;border-radius: 8px;display: flex;flex-direction: column;overflow: hidden;`;
const imgDiv = document.createElement("div")
imgDiv.style.cssText = `flex: 1;display: flex;align-items: center;justify-content: center;overflow: hidden;`
// 创建图片区域
const imgDiv = document.createElement('div');
imgDiv.style.cssText = ` flex: 1;background-color: #2a4a5c;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 12px;`;
imgDiv.textContent = '未带安全帽';
card.appendChild(imgDiv);
if (item.imagePath) {
const img = document.createElement("img")
img.src = commonUrl + item.imagePath
img.style.cssText = `width: 100%;height: 100%;object-fit: cover;`
img.onerror = function () {
this.style.display = "none"
imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "图片加载失败"}</span>`
}
imgDiv.appendChild(img)
} else {
imgDiv.innerHTML = `<span style="color: #fff;font-size: 12px;">${item.name || "暂无图片"}</span>`
}
// 创建信息区域
const infoDiv = document.createElement('div');
infoDiv.style.cssText = ` padding: 5px;background-color: #1a3a4c;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`;
card.appendChild(imgDiv)
const dateSpan = document.createElement('span');
dateSpan.textContent = item.date || 'XXX-XX-XX';
const infoDiv = document.createElement("div")
infoDiv.style.cssText = `padding: 5px;color: #fff;font-size: 12px;display: flex;justify-content: space-between;`
const statusSpan = document.createElement('span');
statusSpan.textContent = '未带安全帽';
const dateSpan = document.createElement("span")
dateSpan.textContent = item.createTime || "XXX-XX-XX"
infoDiv.appendChild(dateSpan);
infoDiv.appendChild(statusSpan);
card.appendChild(infoDiv);
const statusSpan = document.createElement("span")
statusSpan.textContent = item.name || "未知"
container.appendChild(card);
});
infoDiv.appendChild(dateSpan)
infoDiv.appendChild(statusSpan)
card.appendChild(infoDiv)
container.appendChild(card)
})
}
}
});
},
})
}
}
});
});
},
})
})
} else {
// 没有数据时显示提示
container.innerHTML = '<div style="width: 100%;text-align: center;color: #fff;padding: 20px;">暂无数据</div>'
}
}
},
error: (xhr, status, error) => {
console.error("视频数据加载失败:", error)
const container = document.getElementById("demo2-container")
container.innerHTML = '<div style="width: 100%;text-align: center;color: #fff;padding: 20px;">数据加载失败</div>'
},
});
}

View File

@ -209,6 +209,31 @@ function initTemperatureHumidityChart(timeData, temperatureData, humidityData) {
},
},
],
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [
{
name: "温度",
@ -312,6 +337,31 @@ function initNoiseChart(timeData, noiseData) {
}
}
},
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [
{
name: '噪声',
@ -403,6 +453,31 @@ function initWindSpeedChart(timeData, noiseData) {
}
}
},
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [
{
name: '噪声',
@ -523,6 +598,31 @@ function initAirQualityChart(timeData, pm25Data, pm10Data) {
}
}
},
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [
{
name: 'PM2.5',

View File

@ -270,6 +270,31 @@ function initCivilEngineering(acceptItem, notAcceptItem,nameTitle) {
color: '#BDC2C2',
},
},
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [
{
type: 'custom',
@ -617,6 +642,31 @@ function initElectrical(acceptItem, notAcceptItem,nameTitle) {
color: '#BDC2C2',
},
},
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [
{
type: 'custom',

View File

@ -76,7 +76,6 @@ function getProProgress(startTime, endTime) {
var civilEngineeringEchartsData = civilEngineeringData["echarts"];
getCivilEngineering(civilEngineeringEchartsData)
var civilEngineeringPercentData = civilEngineeringData["percent"];
initCivilEngineeringPercent(civilEngineeringPercentData)
}
@ -216,6 +215,31 @@ function initCivilEngineering(date, plannedCount, actualCount) {
show: false,
},
}],
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [{
name: '计划',
type: 'line',
@ -392,6 +416,31 @@ function initElectrical(date, plannedCount, actualCount) {
show: false,
},
}],
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [{
name: '计划',
type: 'line',

View File

@ -46,6 +46,7 @@ function getDeviceEcharts(){
console.log( data['deviceEcharts'])
let deviceEchartsList = data['deviceEcharts']; //设备情况的echarts
let deviceUtilization = data.deviceUtilization; //设备利用率
document.getElementById("deviceUtilization").innerHTML = deviceUtilization +'<span>%</span>';
let efficiency = data['efficiency']; // 效率分析
getEfficiencyTable(efficiency)
let todayDutyRate = data.todayDutyRate; //今日到岗率
@ -53,6 +54,7 @@ function getDeviceEcharts(){
let workerEcharts = data['workerEcharts']; //一周到岗人数趋势
getTrend(workerEcharts)
let workerUtilization = data.workerUtilization; //人员利用率
document.getElementById("workerUtilization").innerHTML = workerUtilization +'<span>%</span>';
let yesterdayDutyRate = data.yesterdayDutyRate; //昨日到岗率
document.getElementById("yesterdayDutyRate").innerHTML = yesterdayDutyRate +'<span>%</span>';
}
@ -176,6 +178,31 @@ function initTrend(date,actualCount,shouldCount) {
show: false,
},
}],
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom:'8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle:{
color:"#d3dee5",
},
textStyle:{
color:"#fff"},
borderColor:"#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [{
name: '实到',
type: 'line',

View File

@ -96,9 +96,9 @@
.card {
width: calc(20% - 10px); /* 每行五个,减去间距 */
height: 150px;
background-color: #1a3a4c;
/*background-color: #1a3a4c;*/
border: none;
border-radius: 8px;
/*border-radius: 8px;*/
display: flex;
flex-direction: column;
overflow: hidden;

View File

@ -26,14 +26,13 @@
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-direction: column;
}
.left-box {
width: 49.5%;
hegiht: 100%;
display: flex;
flex-direction: column;
}
.right-box {
@ -41,12 +40,11 @@
width: 49.5%;
hegiht: 100%;
display: flex;
flex-direction: column;
}
.box-one {
width: 100%;
height: 33%;
height: 100%;
}
.box-two {
@ -265,7 +263,7 @@
.personnelStatus-top-box {
box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
border-radius: 2px 2px 2px 2px;
height: 100%;
height: 50%;
width: 32%;
display: flex;
flex-direction: column;
@ -281,9 +279,9 @@
}
.personnel-card-title {
font-size: 14px;
margin: 15px 0 10px 0;
text-align: center;
font-size: 18px;
margin: 50px 0 10px 20px;
text-align: left;
}
.personnel-stat-row {
@ -468,61 +466,65 @@
<body>
<div id="proQuality">
<div class="left-box">
<div class="box-one overallSituation ">
<div class="layout monitor-data">
<p><span id="wd">75%</span></p>
<p>人员利用率</p>
<div class="monitor-icon"></div>
<div style="height: 30%;width: 100%; display: flex;flex-direction: row">
<div class="left-box">
<div class="box-one overallSituation ">
<div class="layout monitor-data">
<p><span id="workerUtilization">0%</span></p>
<p>人员利用率</p>
<div class="monitor-icon"></div>
</div>
<div class="layout monitor-data">
<p><span id="deviceUtilization">0%</span></p>
<p>设备利用率</p>
<div class="monitor-icon"></div>
</div>
<!-- <div class="layout monitor-data">-->
<!-- <p><span id="zs">90%</span></p>-->
<!-- <p>材料利用率</p>-->
<!-- <div class="monitor-icon"></div>-->
<!-- </div>-->
</div>
<div class="layout monitor-data">
<p><span id="sd">80%</span></p>
<p>设备利用率</p>
<div class="monitor-icon"></div>
</div>
<div class="right-box">
<div class="box-one efficiencyAnalysis">
<div style="height: 70%;width: 96%;overflow: auto;margin-top: 6%;margin-left: 2%;">
<table id="dome1" lay-filter="test"></table>
</div>
</div>
<div class="layout monitor-data">
<p><span id="zs">90%</span></p>
<p>材料利用率</p>
<div class="monitor-icon"></div>
</div>
</div>
<div style="height: 35%;width: 100%; display: flex;margin-top: 1%; " class="personnelStatus">
<div style="height: 100%;width: 30%;">
<div class="personnel-card-title">到岗情况</div>
<div class="personnelStatus-top-box" style="margin-left: 5%;float: left;margin-right: 10%;">
<div class="personnel-stat-value" id="todayDutyRate" style="text-align: center;margin-top: 20%;"></div>
<div class="personnel-stat-label" style="margin-top: 20%;" >
<div class="now"></div>
<span>今日到岗率</span>
</div>
</div>
</div>
<div class="box-two equipmentStatus">
<div class="equipmentStatus-box">
<div class="equipment-card">
<div class="equipment-card-icon"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">设备总数</div>
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div>
</div>
<div class="equipment-card">
<div class="equipment-card-icon"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">在运设备总数</div>
<div class="equipment-card-value">15<span style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div>
</div>
<div class="equipment-card">
<div class="equipment-card-icon" style="height: 44px;width: 44px;"></div>
<div class="equipment-card-content" style="margin-left: 10px;">
<div class="equipment-card-label">本月使用率</div>
<div class="equipment-card-value">80<span style="font-size: 12px; margin-left: 2px;">%</span>
</div>
</div>
</div>
<div class="equipment-card">
<div class="equipment-card-icon"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">同比</div>
<div class="equipment-card-value">+3<span style="font-size: 12px; margin-left: 2px;">%</span>
</div>
</div>
<div class="personnelStatus-top-box" >
<div class="personnel-stat-value" id="yesterdayDutyRate" style="text-align: center;margin-top: 20%;"></div>
<div class="personnel-stat-label" style="margin-top: 20%;" >
<div class="yesterday"></div>
<span>昨日到岗率</span>
</div>
</div>
</div>
<div style="height: 100%;width: 70%;">
<div style="height: 95%;width: 100%;margin-top: 2%;" id="trend"></div>
</div>
</div>
<div style="height: 33%;width: 100%; display: flex;margin-top: 1%;" class="equipmentStatus"></div>
<!-- <div class="left-box">
<div class="box-three personnelStatus" style="display: flex;flex-direction: column ;">
<div class="personnelStatus-top">
<div class="personnelStatus-top-box">
@ -561,73 +563,17 @@
</div>
</div>
<div class="personnelStatus-top-box" style="margin-left: 2%;">
<div class="personnel-card-title">到岗情况</div>
<div class="personnel-stat-row">
<div class="personnel-stat-label">
<div class="now"></div>
<span>今日到岗率</span>
</div>
<div class="personnel-stat-value" id="todayDutyRate"></div>
</div>
<div class="personnel-stat-row">
<div class="personnel-stat-label">
<div class="yesterday"></div>
<span>昨日到岗率</span>
</div>
<div class="personnel-stat-value" id="yesterdayDutyRate"><span>%</span></div>
</div>
</div>
</div>
<div class="personnelStatus-bottom">
<div style="height: 100%;width: 100%;" id="trend"></div>
</div>
</div>
</div>
<div class="right-box">
<div class="box-one efficiencyAnalysis">
<div style="height: 70%;width: 96%;overflow: auto;margin-top: 6%;margin-left: 2%;">
<table id="dome1" lay-filter="test"></table>
</div>
</div>
<div class="box-two materialSituation">
<div class="equipmentStatus-box">
<div class="equipment-card">
<div class="material-icon"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">材料总数</div>
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div>
</div>
<div class="equipment-card">
<div class="inventory-icon"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">库存状态超过<br>一个月的材料总数</div>
<div class="equipment-card-value">15<span style="font-size: 12px; margin-left: 2px;"></span>
</div>
</div>
</div>
<div class="equipment-card">
<div class="equipment-card-icon" style="height: 44px;width: 44px;"></div>
<div class="equipment-card-content" style="margin-left: 10px;">
<div class="equipment-card-label">本月使用率</div>
<div class="equipment-card-value">80<span style="font-size: 12px; margin-left: 2px;">%</span>
</div>
</div>
</div>
<div class="equipment-card">
<div class="decline-icon"></div>
<div class="equipment-card-content">
<div class="equipment-card-label">同比</div>
<div class="equipment-card-value">+3<span style="font-size: 12px; margin-left: 2px;">%</span>
</div>
</div>
</div>
</div>
</div>
<div class="right-box">
<div class="box-three optimizationReminder">
<div style="width: 96%;height: 85%;margin-top: 6%;margin-left: 2%;">
<div class="optimization-card">
@ -663,7 +609,7 @@
</div>
</div>
</div>-->
</div>
</body>
<script src="../../js/pages/dataAnalysisOctober/resourceRateAnalysis.js" type="text/javascript"></script>

View File

@ -0,0 +1,71 @@
<!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"/>
<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="../../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>
<div class="layui-inline">
<label class="layui-form-label" style="width: 80px;">班组:</label>
<div class="layui-input-inline">
<input type="text" id="teamName" 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" class="layout">
<div id="oneEcharts">
</div>
<div id="twoEcharts">
</div>
<div id="suggestion" class="layout">
</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>