数据分析-
This commit is contained in:
parent
0b4272f9d4
commit
f598b79f07
|
|
@ -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>'
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue