hb_zhgd_screen/pages/dataAnalysisOctober/resourceRateAnalysis.html

723 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<style>
#proQuality {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* 顶部日期筛选区域(与工程质量分析保持一致) */
.top-date-filter {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 20px;
background: rgba(13, 34, 37, 0.8);
border-bottom: 1px solid rgba(6, 189, 221, 0.3);
flex-shrink: 0;
}
.date-filter-label {
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
white-space: nowrap;
}
.date-range-wrapper {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.search-input {
width: 160px;
height: 32px;
padding: 0 12px;
background: rgba(25, 62, 68, 0.6);
border: 1px solid rgba(6, 189, 221, 0.6);
border-radius: 2px;
color: #FFFFFF;
font-size: 14px;
transition: all 0.3s;
flex-shrink: 0;
}
.search-input:focus {
outline: none;
border-color: rgba(6, 189, 221, 1);
background: rgba(25, 62, 68, 0.8);
}
.search-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.date-input {
width: 240px;
}
/* 主内容区域 */
.main-content {
flex: 1;
width: 100%;
height: 0;
display: flex;
flex-direction: column;
gap: 1%;
padding: 1%;
box-sizing: border-box;
overflow: hidden;
}
.row {
width: 100%;
display: flex;
gap: 1%;
}
.row-top {
height: 34%;
}
.row-middle {
height: 33%;
}
.row-bottom {
height: 30%;
}
.panel {
border: 1px solid rgba(0, 255, 255, 0.15);
box-shadow: 0 0 8px rgba(0, 255, 255, 0.15);
border-radius: 3px;
overflow: hidden;
position: relative;
background-image: url("../../img/dataAnalysisOctober/proQualityAnalysis/common_bg.png");
/* background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%; */
}
.panel-title {
height: 40px;
display: flex;
align-items: center;
padding: 0 18px;
font-size: 16px;
color: #ffffff;
font-weight: bold;
gap: 8px;
flex-shrink: 0;
}
.panel-title::before {
content: '';
width: 4px;
height: 18px;
background: linear-gradient(180deg, #FF9C65 0%, #FFD700 100%);
border-radius: 2px;
}
.panel-body {
flex: 1;
height: calc(100% - 36px);
padding: 10px 12px 12px 12px;
box-sizing: border-box;
display: flex;
gap: 10px;
}
.panel-flex {
display: flex;
flex: 1;
gap: 1%;
}
/* Top row */
.table-panel {
width: 60%;
}
.cards-panel {
width: 40%;
display: flex;
flex-direction: column;
}
.metric-card {
width: 45%;
height: 90%;
border: 1px dashed rgba(0, 255, 255, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #fff;
}
.metric-value {
font-size: 30px;
font-weight: 700;
color: #00ffcc;
}
.metric-label {
font-size: 14px;
opacity: 0.8;
}
/* middle row */
.trend-panel {
width: 60%;
}
.cards-panel .panel-body,
.cards-small-panel .panel-body {
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 10px;
}
.trend-chart {
width: 100%;
height: 100%;
}
.cards-small-panel {
width: 40%;
display: flex;
flex-direction: column;
}
.metric-card-small {
width: 45%;
height: 70%;
border: 1px dashed rgba(0, 255, 255, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #fff;
}
/* bottom row */
.bar-panel {
width: 60%;
}
.bar-chart {
width: 100%;
height: 100%;
}
.analysis-panel {
width: 40%;
display: flex;
flex-direction: column;
}
.analysis-tabs {
display: flex;
gap: 10px;
padding: 0 12px;
margin: 5px 0;
}
.analysis-tab {
padding: 4px 10px;
border: 1px solid rgba(0, 255, 255, 0.5);
border-radius: 2px;
color: #fff;
cursor: pointer;
font-size: 12px;
}
.analysis-tab.active {
background: rgba(0, 255, 255, 0.15);
}
.analysis-list {
flex: 1;
overflow-y: auto;
padding: 0 12px 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.analysis-item {
background: rgba(13, 34, 37, 0.6);
border: 1px solid rgba(0, 255, 255, 0.2);
padding: 10px;
color: #fff;
font-size: 13px;
line-height: 1.5;
}
/* 人员列表弹框样式 */
.personnel-list-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.personnel-list-modal.show {
display: flex;
align-items: center;
justify-content: center;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.modal-content {
position: relative;
width: 80%;
height: 70%;
background: rgba(13, 34, 37, 0.95);
border: 1px solid rgba(6, 189, 221, 0.6);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 10000;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px;
background: rgba(13, 34, 37, 0.9);
border-bottom: 1px solid rgba(6, 189, 221, 0.3);
flex-shrink: 0;
}
.modal-title {
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}
.modal-close {
font-size: 28px;
color: #FFFFFF;
cursor: pointer;
line-height: 1;
transition: color 0.3s;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.modal-close:hover {
color: #00FFB8;
background: rgba(6, 189, 221, 0.2);
}
.modal-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 20px;
min-height: 0;
}
.modal-search-bar {
display: flex;
gap: 10px;
margin-bottom: 15px;
align-items: center;
flex-shrink: 0;
flex-wrap: wrap;
}
.search-item {
display: flex;
align-items: center;
gap: 8px;
}
.search-item label {
color: #FFFFFF;
font-size: 14px;
white-space: nowrap;
}
.search-btn {
padding: 8px 20px;
background: rgba(6, 189, 221, 0.8);
border: 1px solid rgba(6, 189, 221, 1);
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
}
.search-btn:hover {
background: rgba(6, 189, 221, 1);
}
.modal-table-container {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
}
/* 弹框内表格样式 */
#modalPersonnelListTable .layui-table {
background-color: transparent !important;
}
#modalPersonnelListTable .layui-table thead tr {
background-color: rgba(13, 34, 37, 0.8) !important;
}
#modalPersonnelListTable .layui-table thead th {
background-color: transparent !important;
color: #FFFFFF !important;
border-color: rgba(6, 189, 221, 0.3) !important;
font-weight: bold;
}
#modalPersonnelListTable .layui-table tbody tr {
background-color: rgba(25, 62, 68, 0.3) !important;
}
#modalPersonnelListTable .layui-table tbody tr:hover {
background-color: rgba(25, 62, 68, 0.6) !important;
}
#modalPersonnelListTable .layui-table tbody td {
color: #FFFFFF !important;
border-color: rgba(6, 189, 221, 0.2) !important;
}
#modalPersonnelListTable .layui-table-page {
background-color: transparent !important;
border-top: 1px solid rgba(6, 189, 221, 0.3) !important;
padding: 10px 0 !important;
}
#modalPersonnelListTable .layui-table-page .layui-laypage {
margin: 0 !important;
}
#modalPersonnelListTable .layui-table-page .layui-laypage a,
#modalPersonnelListTable .layui-table-page .layui-laypage span {
color: #FFFFFF !important;
background-color: rgba(25, 62, 68, 0.6) !important;
border-color: rgba(6, 189, 221, 0.5) !important;
}
#modalPersonnelListTable .layui-table-page .layui-laypage .layui-laypage-curr em {
background-color: #207E75 !important;
color: #FFFFFF !important;
}
/* 可点击的模块样式 */
.metric-card {
cursor: pointer;
transition: all 0.3s;
}
.metric-card:hover {
border-color: rgba(0, 255, 255, 0.8);
box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}
/* 设备列表弹框样式(复用人员列表弹框样式) */
.device-list-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.device-list-modal.show {
display: flex;
align-items: center;
justify-content: center;
}
/* 弹框内表格样式 */
#modalDeviceListTable .layui-table {
background-color: transparent !important;
}
#modalDeviceListTable .layui-table thead tr {
background-color: rgba(13, 34, 37, 0.8) !important;
}
#modalDeviceListTable .layui-table thead th {
background-color: transparent !important;
color: #FFFFFF !important;
border-color: rgba(6, 189, 221, 0.3) !important;
font-weight: bold;
}
#modalDeviceListTable .layui-table tbody tr {
background-color: rgba(25, 62, 68, 0.3) !important;
}
#modalDeviceListTable .layui-table tbody tr:hover {
background-color: rgba(25, 62, 68, 0.6) !important;
}
#modalDeviceListTable .layui-table tbody td {
color: #FFFFFF !important;
border-color: rgba(6, 189, 221, 0.2) !important;
}
#modalDeviceListTable .layui-table-page {
background-color: transparent !important;
border-top: 1px solid rgba(6, 189, 221, 0.3) !important;
padding: 10px 0 !important;
}
#modalDeviceListTable .layui-table-page .layui-laypage {
margin: 0 !important;
}
#modalDeviceListTable .layui-table-page .layui-laypage a,
#modalDeviceListTable .layui-table-page .layui-laypage span {
color: #FFFFFF !important;
background-color: rgba(25, 62, 68, 0.6) !important;
border-color: rgba(6, 189, 221, 0.5) !important;
}
#modalDeviceListTable .layui-table-page .layui-laypage .layui-laypage-curr em {
background-color: #207E75 !important;
color: #FFFFFF !important;
}
</style>
<body>
<div id="proQuality">
<!-- 顶部日期筛选区域 -->
<div class="top-date-filter">
<div class="date-filter-label">日期范围:</div>
<div class="date-range-wrapper">
<input type="text" id="dateRange" class="search-input date-input" placeholder="请选择日期范围" readonly>
</div>
</div>
<!-- Top row -->
<div class="row row-top">
<div class="panel table-panel">
<div class="panel-title">班组人员利用率排名</div>
<div class="panel-body">
<table id="teamTable" lay-filter="teamTable"></table>
</div>
</div>
<div class="panel cards-panel">
<div class="panel-title">整体情况</div>
<div class="panel-body">
<div class="metric-card">
<div class="metric-value" id="workerUtilization">75%</div>
<div class="metric-label">人员利用率</div>
<div class="monitor-icon"
style="width:60px;height:60px;background:url('../../img/dataAnalysisOctober/person_1.png') no-repeat center/100% 100%;">
</div>
</div>
<div class="metric-card">
<div class="metric-value" id="deviceUtilization">80%</div>
<div class="metric-label">大型设备利用率</div>
<div class="monitor-icon"
style="width:60px;height:60px;background:url('../../img/dataAnalysisOctober/device_1.png') no-repeat center/100% 100%;">
</div>
</div>
</div>
</div>
</div>
<!-- Middle row -->
<div class="row row-middle">
<div class="panel trend-panel">
<div class="panel-title">一周到岗人数趋势</div>
<div class="panel-body" style="padding:8px;">
<div id="trendChart" class="trend-chart"></div>
</div>
</div>
<div class="panel cards-small-panel">
<div class="panel-title">人员到岗情况</div>
<div class="panel-body">
<div class="metric-card-small">
<div class="metric-value" id="todayDutyRate">96</div>
<div class="metric-label">今日到岗人数</div>
<div class="monitor-icon"
style="width:50px;height:50px;background:url('../../img/dataAnalysisOctober/jin.png') no-repeat center/100% 100%;">
</div>
</div>
<div class="metric-card-small">
<div class="metric-value" id="yesterdayDutyRate">104</div>
<div class="metric-label">昨日到岗人数</div>
<div class="monitor-icon"
style="width:50px;height:50px;background:url('../../img/dataAnalysisOctober/zuo.png') no-repeat center/100% 100%;">
</div>
</div>
</div>
</div>
</div>
<!-- Bottom row -->
<div class="row row-bottom">
<div class="panel bar-panel">
<div class="panel-title">设备情况</div>
<div class="panel-body" style="padding:8px;">
<div id="equipmentStatus" class="bar-chart"></div>
</div>
</div>
<div class="panel analysis-panel">
<div class="panel-title">分析提醒</div>
<div class="analysis-tabs">
<div class="analysis-tab active">全部</div>
<div class="analysis-tab">人员</div>
<div class="analysis-tab">设备</div>
</div>
<div class="analysis-list" id="analysisList"></div>
</div>
</div>
</div>
<!-- 人员列表弹框 -->
<div id="personnelListModal" class="personnel-list-modal">
<div class="modal-overlay" onclick="closePersonnelListModal()"></div>
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">人员列表</span>
<span class="modal-close" onclick="closePersonnelListModal()">×</span>
</div>
<div class="modal-body">
<div class="modal-search-bar">
<div class="search-item">
<label>专业:</label>
<input type="text" id="modalWorkTypeInput" class="search-input" placeholder="请输入专业">
</div>
<div class="search-item">
<label>班组:</label>
<input type="text" id="modalTeamNameInput" class="search-input" placeholder="请输入班组">
</div>
<div class="search-item">
<label>班组长:</label>
<input type="text" id="modalTeamLeaderInput" class="search-input" placeholder="请输入班组长">
</div>
<button type="button" class="search-btn" onclick="queryPersonnelList()">查询</button>
</div>
<div class="modal-table-container">
<table id="modalPersonnelListTable" lay-filter="modalPersonnelListTable"></table>
</div>
</div>
</div>
</div>
<!-- 人员列表弹框 -->
<div id="personnelListModal" class="personnel-list-modal">
<div class="modal-overlay" onclick="closePersonnelListModal()"></div>
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">人员列表</span>
<span class="modal-close" onclick="closePersonnelListModal()">×</span>
</div>
<div class="modal-body">
<div class="modal-search-bar">
<div class="search-item">
<label>专业:</label>
<input type="text" id="modalWorkTypeInput" class="search-input" placeholder="请输入专业">
</div>
<div class="search-item">
<label>班组:</label>
<input type="text" id="modalTeamNameInput" class="search-input" placeholder="请输入班组">
</div>
<div class="search-item">
<label>班组长:</label>
<input type="text" id="modalTeamLeaderInput" class="search-input" placeholder="请输入班组长">
</div>
<button type="button" class="search-btn" onclick="queryPersonnelList()">查询</button>
</div>
<div class="modal-table-container">
<table id="modalPersonnelListTable" lay-filter="modalPersonnelListTable"></table>
</div>
</div>
</div>
</div>
<!-- 设备列表弹框 -->
<div id="deviceListModal" class="device-list-modal">
<div class="modal-overlay" onclick="closeDeviceListModal()"></div>
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">设备列表</span>
<span class="modal-close" onclick="closeDeviceListModal()">×</span>
</div>
<div class="modal-body">
<div class="modal-search-bar">
<div class="search-item">
<label>设备名称:</label>
<input type="text" id="modalDevNameInput" class="search-input" placeholder="请输入设备名称">
</div>
<button type="button" class="search-btn" onclick="queryDeviceList()">查询</button>
</div>
<div class="modal-table-container">
<table id="modalDeviceListTable" lay-filter="modalDeviceListTable"></table>
</div>
</div>
</div>
</div>
</body>
<script src="../../js/pages/dataAnalysisOctober/resourceRateAnalysis.js" type="text/javascript"></script>
</html>