数据分析-
This commit is contained in:
parent
333056b5a6
commit
50e34f8205
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,246 @@
|
|||
let table, layer, form;
|
||||
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||||
|
||||
const bidCode = parent.$('#bidPro').val();
|
||||
layui.use(["layer", "table", "form"], function () {
|
||||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
form = layui.form;
|
||||
getTrend();
|
||||
|
||||
wearGarList()
|
||||
});
|
||||
|
||||
|
||||
function getTrend() {
|
||||
let xLabel = ['xxxx-xx-01', 'xxxx-xx-02', 'xxxx-xx-03', 'xxxx-xx-04', 'xxxx-xx-05', 'xxxx-xx-06','xxxx-xx-07', 'xxxx-xx-08', 'xxxx-xx-09', 'xxxx-xx-10', 'xxxx-xx-11', 'xxxx-xx-12',]
|
||||
let expenditureData = ["12", "15", "4", "8", "13", "6","10", "11", "5", "12","10", "15"]
|
||||
let incomeData = ["4", "5", "5", "5", "5", "4","3", "5", "3","16", "5", "18"]
|
||||
initTrend(xLabel,expenditureData,incomeData)
|
||||
}
|
||||
|
||||
function initTrend(xLabel,expenditureData,incomeData) {
|
||||
const leftChart = echarts.init(document.getElementById("trend"));
|
||||
const option = {
|
||||
title: {
|
||||
text: '一周到岗人数趋势',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
left: 5,
|
||||
top: 5
|
||||
},
|
||||
tooltip: {
|
||||
show:true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
borderColor: 'rgba(255,255,255,.3)',
|
||||
backgroundColor: 'rgba(19,51,55,.6)',
|
||||
textStyle: {
|
||||
color: 'white', //设置文字颜色
|
||||
},
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
},
|
||||
legend: {
|
||||
show:true,
|
||||
top:10,
|
||||
right:20,
|
||||
textStyle:{
|
||||
color:'#ffffff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '8%',
|
||||
right: '4%',
|
||||
bottom: '15%'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5A6E71',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#233653',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
data: xLabel,
|
||||
},
|
||||
],
|
||||
yAxis: [{
|
||||
min: 0,
|
||||
splitNumber: 10,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.8)',
|
||||
padding: 16
|
||||
},
|
||||
formatter: function(value) {
|
||||
if (value === 0) {
|
||||
return value
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}],
|
||||
series: [{
|
||||
name: '支出',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: "#00FEFC",
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#00FEFC",
|
||||
borderWidth: 2
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "rgba(18,86,100,0.6)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(16,72,81, 0.7)"
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(15,55,63, 0.8)',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: expenditureData
|
||||
}, {
|
||||
name: '收入',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: "rgba(25,196,134, 1)",
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(25,196,134, 1)",
|
||||
borderWidth: 2
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "rgba(17,95,82, 0.6)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(16,72,67, 0.7)"
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(15,55,54, 0.8)',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: incomeData
|
||||
}]
|
||||
};
|
||||
|
||||
leftChart.setOption(option);
|
||||
// 响应式调整
|
||||
window.addEventListener("resize", function () {
|
||||
leftChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function wearGarList(){
|
||||
const url = commonUrl + "screen/largeScreen/personnelControl/getWearEquipmentList";
|
||||
|
||||
table.render({
|
||||
elem: '#dome1',
|
||||
url: url,
|
||||
skin: 'line',
|
||||
page: false,
|
||||
headers:{
|
||||
decrypt:"decrypt",
|
||||
"Authorization":token
|
||||
},
|
||||
where: {
|
||||
roleCode: roleCode,
|
||||
orgId: orgId,
|
||||
userId: userId,
|
||||
bidCode: bidCode
|
||||
},
|
||||
cols: [[
|
||||
{field: 'number', width:'10%',title: '序号', align: 'center', type: 'numbers'},
|
||||
{field: 'deviceType', width:'20%', align: 'center', title: '专业'},
|
||||
{field: 'deviceName', width:'20%', align: 'center', title: '班组'},
|
||||
{field: 'userName', width:'15%', align: 'center', title: '班组负责人'},
|
||||
{field: 'userName', width:'15%', align: 'center', title: '班组人数'},
|
||||
{field: 'userName', width:'20%', align: 'center', title: '利用率'},
|
||||
]],
|
||||
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);
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,673 @@
|
|||
<!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/dataAnalysis.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>
|
||||
<title>资源利用率分析</title>
|
||||
</head>
|
||||
<script type="text/javascript">
|
||||
let text = nickName + "\r\n" + roleName + "\r\n" + '建设部';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#proQuality {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.left-box {
|
||||
width: 49.5%;
|
||||
hegiht: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
margin-left: 1%;
|
||||
width: 49.5%;
|
||||
hegiht: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.box-one {
|
||||
width: 100%;
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.box-two {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.box-three {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.overallSituation {
|
||||
background: url("../../img/dataAnalysisOctober/overallSituation.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.equipmentStatus {
|
||||
background: url("../../img/dataAnalysisOctober/equipmentStatus.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.equipmentStatus-box {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 72%;
|
||||
margin-top: 4%;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.equipment-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.equipment-card-icon {
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.material-icon {
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/material.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.inventory-icon {
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/inventory.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.decline-icon {
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/decline.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.equipment-card:nth-child(1) .equipment-card-icon {
|
||||
background: url("../../img/dataAnalysisOctober/ofDevices.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.equipment-card:nth-child(2) .equipment-card-icon {
|
||||
background: url("../../img/dataAnalysisOctober/deviceTotal.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
/*.equipment-card:nth-child(3) .equipment-card-icon {*/
|
||||
/* background: url("../../img/dataAnalysisOctober/monthRate.png") no-repeat 0 0 / 100% 100%;*/
|
||||
/* background-position: center center !important;*/
|
||||
/* background: conic-gradient( from 135deg at 100% 50%, #FFFFFF 29%, #3BE6E6 51%);*/
|
||||
/*}*/
|
||||
|
||||
|
||||
.equipment-card:nth-child(3) .equipment-card-icon {
|
||||
background: conic-gradient(
|
||||
from -15deg,
|
||||
#3BE6E6 0%,
|
||||
#ffffff 85%,
|
||||
rgba(252, 254, 254, 0.2) 80%,
|
||||
rgba(255, 255, 255, 0.2) 100%
|
||||
);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.equipment-card:nth-child(3) .equipment-card-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: rgba(13, 34, 37, 1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.equipment-card:nth-child(4) .equipment-card-icon {
|
||||
background: url("../../img/dataAnalysisOctober/onYear.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.equipment-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.equipment-card-label {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.equipment-card-value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #79FFFF;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.personnelStatus {
|
||||
background: url("../../img/dataAnalysisOctober/personnelStatus.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.efficiencyAnalysis {
|
||||
background: url("../../img/dataAnalysisOctober/efficiencyAnalysis.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.materialSituation {
|
||||
background: url("../../img/dataAnalysisOctober/materialSituation.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.optimizationReminder {
|
||||
background: url("../../img/dataAnalysisOctober/optimizationReminder.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.monitor-data {
|
||||
width: 16%;
|
||||
height: 60%;
|
||||
margin-top: 3%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 10px 30px;
|
||||
box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
.monitor-data p:nth-child(1) span:nth-child(1) {
|
||||
font-size: 24px;
|
||||
color: #79FFFFFF;
|
||||
font-weight: bold;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.monitor-data p:nth-child(1) span:nth-child(2) {
|
||||
margin-left: 5px;
|
||||
color: #79FFFFFF;
|
||||
}
|
||||
|
||||
.monitor-icon {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(1) .monitor-icon {
|
||||
background: url("../../img/dataAnalysisOctober/personnelUtilizationRate.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(2) .monitor-icon {
|
||||
background: url("../../img/dataAnalysisOctober/equipmentUtilizationRate.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(3) .monitor-icon {
|
||||
background: url("../../img/dataAnalysisOctober/materialUtilizationRate.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.personnelStatus-top {
|
||||
height: 28%;
|
||||
width: 94%;
|
||||
margin-top: 7%;
|
||||
margin-left: 3%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.personnelStatus-top-box {
|
||||
box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
height: 100%;
|
||||
width: 32%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.personnelStatus-bottom {
|
||||
height: 48%;
|
||||
width: 94%;
|
||||
margin-top: 2%;
|
||||
margin-left: 3%;
|
||||
box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
.personnel-card-title {
|
||||
font-size: 14px;
|
||||
margin: 15px 0 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.personnel-stat-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.personnel-stat-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.personnel-stat-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
.personnel {
|
||||
width: 23px;
|
||||
height: 21px;
|
||||
background: url("../../img/dataAnalysisOctober/personnel.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.personnelSetup {
|
||||
margin-left: 5px;
|
||||
width: 20px;
|
||||
height: 21px;
|
||||
background: url("../../img/dataAnalysisOctober/personnelSetup.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.now {
|
||||
width: 23px;
|
||||
height: 21px;
|
||||
background: url("../../img/dataAnalysisOctober/now.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.yesterday {
|
||||
width: 23px;
|
||||
height: 21px;
|
||||
background: url("../../img/dataAnalysisOctober/yesterday.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.personnel-stat-value {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #79FFFF;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.personnel-stat-value span {
|
||||
font-size: 12px;
|
||||
margin-left: 2px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.personnel-chart-container {
|
||||
flex: 1;
|
||||
background: rgba(17, 66, 69, 0.4);
|
||||
border: 1px solid #1a4d51;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.personnel-chart-title {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.personnel-chart-title::before {
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background: #00d4ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.personnel-chart {
|
||||
flex: 1;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.optimization-card {
|
||||
padding: 15px 20px;
|
||||
margin-top: 2%;
|
||||
box-shadow: 0px 0px 4px 0px rgba(8,220,224,0.8);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
.optimization-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.optimization-card-title {
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.optimization-card-time {
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.optimization-card-description {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.monitor-data {
|
||||
width: 16%;
|
||||
height: 60%;
|
||||
margin-top: 3%;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
border: 3px solid #114245;
|
||||
padding: 10px 30px;
|
||||
border-radius: 5px 5px;
|
||||
}
|
||||
|
||||
.monitor-data p:nth-child(1) span:nth-child(1) {
|
||||
font-size: 24px;
|
||||
color: #79FFFFFF;
|
||||
font-weight: bold;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.monitor-data p:nth-child(1) span:nth-child(2) {
|
||||
margin-left: 5px;
|
||||
color: #79FFFFFF;
|
||||
}
|
||||
|
||||
.monitor-icon {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(1) .monitor-icon {
|
||||
background: url("../../img/dataAnalysisOctober/personnelUtilizationRate.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(2) .monitor-icon {
|
||||
background: url("../../img/dataAnalysisOctober/equipmentUtilizationRate.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
.monitor-data:nth-child(3) .monitor-icon {
|
||||
background: url("../../img/dataAnalysisOctober/materialUtilizationRate.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
background-size: initial;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<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>
|
||||
<div class="layout monitor-data">
|
||||
<p><span id="sd">80%</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="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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-three personnelStatus" style="display: flex;flex-direction: column ;">
|
||||
<div class="personnelStatus-top">
|
||||
<div class="personnelStatus-top-box">
|
||||
<div class="personnel-card-title">人员总数统计</div>
|
||||
<div class="personnel-stat-row">
|
||||
<div class="personnel-stat-label">
|
||||
<div class="personnelSetup"></div>
|
||||
<span>管理人员</span>
|
||||
</div>
|
||||
<div class="personnel-stat-value">22<span>人</span></div>
|
||||
</div>
|
||||
<div class="personnel-stat-row">
|
||||
<div class="personnel-stat-label">
|
||||
<div class="personnel"></div>
|
||||
<span>工人</span>
|
||||
</div>
|
||||
<div class="personnel-stat-value">387<span>人</span></div>
|
||||
</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="personnelSetup"></div>
|
||||
<span>管理人员</span>
|
||||
</div>
|
||||
<div class="personnel-stat-value">22<span>人</span></div>
|
||||
</div>
|
||||
<div class="personnel-stat-row">
|
||||
<div class="personnel-stat-label">
|
||||
<div class="personnel"></div>
|
||||
<span>工人</span>
|
||||
</div>
|
||||
<div class="personnel-stat-value">387<span>人</span></div>
|
||||
</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">90<span>%</span></div>
|
||||
</div>
|
||||
<div class="personnel-stat-row">
|
||||
<div class="personnel-stat-label">
|
||||
<div class="yesterday"></div>
|
||||
<span>昨日到岗率</span>
|
||||
</div>
|
||||
<div class="personnel-stat-value">100<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="box-three optimizationReminder">
|
||||
<div style="width: 96%;height: 85%;margin-top: 6%;margin-left: 2%;">
|
||||
<div class="optimization-card">
|
||||
<div class="optimization-card-header">
|
||||
<div class="optimization-card-title">设备调度优化</div>
|
||||
<div class="optimization-card-time">2025-08-18 10:32:17</div>
|
||||
</div>
|
||||
<div class="optimization-card-description">
|
||||
近期机12易用率偏低，建议安排此设备，提高设备运转效率
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="optimization-card">
|
||||
<div class="optimization-card-header">
|
||||
<div class="optimization-card-title">材料库存优化</div>
|
||||
<div class="optimization-card-time">2025-08-18 10:32:17</div>
|
||||
</div>
|
||||
<div class="optimization-card-description">
|
||||
2号仓库水泥入库一个月未使用，建议尽快出库，避免材料被浪费
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="optimization-card">
|
||||
<div class="optimization-card-header">
|
||||
<div class="optimization-card-title">班组使用优化</div>
|
||||
<div class="optimization-card-time">2025-08-18 10:32:17</div>
|
||||
</div>
|
||||
<div class="optimization-card-description">
|
||||
安装电气、养护子班、连续三天同时未达60%，建议调整工作计划，提高人员使用率
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../js/pages/dataAnalysisOctober/resourceRateAnalysis.js" type="text/javascript"></script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue