1228 lines
36 KiB
HTML
1228 lines
36 KiB
HTML
<!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">
|
||
<link rel="stylesheet" href="../../css/tipCommon.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>
|
||
|
||
<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> -->
|
||
|
||
<!-- 主体区域 - Grid布局 -->
|
||
<div class="main-content">
|
||
<!-- 第一行：两个模块各占一半 -->
|
||
<div class="top-row-wrapper">
|
||
<!-- 模块1: 近七天用电趋势 (左上) -->
|
||
<div class="module module-1">
|
||
<div class="module-title">
|
||
<span class="title-indicator"></span>
|
||
<span class="title-text">任务完成情况</span>
|
||
</div>
|
||
<div class="module-content">
|
||
<div class="task-statistics-container">
|
||
<!-- 中心六边形 -->
|
||
<div class="center-hexagon" onclick="openTaskDetailModal('')" style="cursor: pointer;">
|
||
<div class="hexagon-value" id="totalTasks">233</div>
|
||
<div class="hexagon-label">任务总数</div>
|
||
</div>
|
||
|
||
<!-- 四个方向的盒子 -->
|
||
<div class="top-container" onclick="openTaskDetailModal('1')" style="cursor: pointer;">
|
||
<div class="extension-line extension-line-top"></div>
|
||
<div class="extension-dot extension-dot-top-start"></div>
|
||
<div class="extension-dot extension-dot-top-end"></div>
|
||
<div class="status-label status-label-top">
|
||
<span class="status-percent" id="completedPercent">20%</span>
|
||
<span class="status-text">已完成</span>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-container" onclick="openTaskDetailModal('4')" style="cursor: pointer;">
|
||
<div class="extension-line extension-line-bottom"></div>
|
||
<div class="extension-dot extension-dot-bottom-start"></div>
|
||
<div class="extension-dot extension-dot-bottom-end"></div>
|
||
<div class="status-label status-label-bottom">
|
||
<span class="status-percent" id="delayedPercent">20%</span>
|
||
<span class="status-text">延期</span>
|
||
</div>
|
||
</div>
|
||
<div class="left-container" onclick="openTaskDetailModal('2')" style="cursor: pointer;">
|
||
<div class="extension-line extension-line-left"></div>
|
||
<div class="extension-dot extension-dot-left-start"></div>
|
||
<div class="extension-dot extension-dot-left-end"></div>
|
||
<div class="status-label status-label-left">
|
||
<span class="status-percent" id="inProgressPercent">20%</span>
|
||
<span class="status-text">进行中</span>
|
||
</div>
|
||
</div>
|
||
<div class="right-container" onclick="openTaskDetailModal('3')" style="cursor: pointer;">
|
||
<div class="extension-line extension-line-right"></div>
|
||
<div class="extension-dot extension-dot-right-start"></div>
|
||
<div class="extension-dot extension-dot-right-end"></div>
|
||
<div class="status-label status-label-right">
|
||
<span class="status-percent" id="notStartedPercent">20%</span>
|
||
<span class="status-text">未开始</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块2: 月工种任务分布 (右上) -->
|
||
<div class="module module-2">
|
||
<div class="module-title">
|
||
<span class="title-indicator"></span>
|
||
<span class="title-text">月工种任务分布</span>
|
||
<span class="info-icon">
|
||
<img src="../../img/dataAnalysisOctober/common_icon.png" alt=""
|
||
style="cursor: pointer; width: 20px; height: 20px;margin-right: 10px;margin-top: 5px;">
|
||
</span>
|
||
</div>
|
||
<div class="tooltip-box">
|
||
当月人均任务数：当月某类工种总任务数÷某类工种人员总
|
||
数
|
||
</div>
|
||
<div class="module-content">
|
||
<div class="job-distribution-container">
|
||
<!-- 顶部两个指标 -->
|
||
<div class="job-stats-row">
|
||
<div class="job-stat-item">
|
||
|
||
<div class="job-stat-content">
|
||
<div class="job-stat-value" id="taskPersonnel">100</div>
|
||
<div class="job-stat-label">任务人员</div>
|
||
</div>
|
||
<div class="job-stat-icon-wrapper">
|
||
<img src="../../img/dataAnalysisOctober/workerEfficiencyAnalysis/task_person.png"
|
||
alt="任务人员" class="job-stat-icon">
|
||
</div>
|
||
</div>
|
||
<div class="job-stat-item">
|
||
|
||
<div class="job-stat-content">
|
||
<div class="job-stat-value" id="avgTasks">100</div>
|
||
<div class="job-stat-label">人均任务</div>
|
||
</div>
|
||
<div class="job-stat-icon-wrapper">
|
||
<img src="../../img/dataAnalysisOctober/workerEfficiencyAnalysis/avg_task.png"
|
||
alt="人均任务" class="job-stat-icon">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 工种列表 -->
|
||
<div class="job-type-list" id="jobTypeList">
|
||
<!-- 动态生成 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二行：三个模块 -->
|
||
<div class="bottom-row-wrapper">
|
||
<!-- 模块3: 月任务延期排名TOP5 (左下) -->
|
||
<div class="module module-3">
|
||
<div class="module-title">
|
||
<span class="title-indicator"></span>
|
||
<span class="title-text">月任务延期排名TOP5</span>
|
||
<span class="info-icon">
|
||
<img src="../../img/dataAnalysisOctober/common_icon.png" alt=""
|
||
style="cursor: pointer; width: 20px; height: 20px;margin-right: 10px;margin-top: 5px;">
|
||
</span>
|
||
</div>
|
||
<div class="tooltip-box">
|
||
当月延期任务数：当月某人延期总任务数综合从多到小排序
|
||
</div>
|
||
<div class="module-content">
|
||
<div class="delay-ranking-list" id="delayRankingList">
|
||
<!-- 动态生成 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块4: 月任务延期分布 (中下) -->
|
||
<div class="module module-4">
|
||
<div class="module-title">
|
||
<span class="title-indicator"></span>
|
||
<span class="title-text">月任务延期分布</span>
|
||
<span class="info-icon">
|
||
<img src="../../img/dataAnalysisOctober/common_icon.png" alt=""
|
||
style="cursor: pointer; width: 20px; height: 20px;margin-right: 10px;margin-top: 5px;">
|
||
</span>
|
||
</div>
|
||
<div class="tooltip-box">
|
||
按工种统计延期任务数量 <br>
|
||
延期分布：某工种统计延期任务数量÷总延期任务
|
||
数
|
||
</div>
|
||
<div class="module-content">
|
||
<div id="delayDistributionChart" class="chart-container"></div>
|
||
<div class="delay-legend" id="delayLegend">
|
||
<!-- 动态生成图例 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块5: 分析预警 (右下) -->
|
||
<div class="module module-5">
|
||
<div class="module-title">
|
||
<span class="title-indicator"></span>
|
||
<span class="title-text">分析预警</span>
|
||
<span class="info-icon">
|
||
<img src="../../img/dataAnalysisOctober/common_icon.png" alt=""
|
||
style="cursor: pointer; width: 20px; height: 20px;margin-right: 10px;margin-top: 5px;">
|
||
</span>
|
||
</div>
|
||
<div class="tooltip-box">
|
||
出现三次及以上延期数量，系统自动提醒预警。
|
||
</div>
|
||
<div class="module-content">
|
||
<div id="warningList" class="warning-list">
|
||
<!-- 警告项将通过JS动态生成 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 任务详情弹框 -->
|
||
<div id="taskDetailModal" class="task-detail-modal">
|
||
<div class="modal-overlay" onclick="closeTaskDetailModal()"></div>
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<span class="modal-title">综合查询</span>
|
||
<span class="modal-close" onclick="closeTaskDetailModal()">×</span>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="modal-search-bar">
|
||
<input type="text" id="modalKeywordInput" class="search-input" placeholder="综合查询">
|
||
<button type="button" class="search-btn" onclick="queryModalRecords()">查询</button>
|
||
</div>
|
||
<div class="modal-table-container">
|
||
<table id="modalTaskDetailTable" lay-filter="modalTaskDetailTable"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
<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;
|
||
}
|
||
|
||
/* 主体区域 - Flex布局 */
|
||
.main-content {
|
||
flex: 1;
|
||
width: 100%;
|
||
height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding: 6px;
|
||
}
|
||
|
||
/* 第一行容器：两个模块各占一半 */
|
||
.top-row-wrapper {
|
||
flex: 0 0 60%;
|
||
height: 0;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 6px;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 第二行容器：三个模块 */
|
||
.bottom-row-wrapper {
|
||
flex: 1;
|
||
height: 0;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 6px;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.module {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
background-image: url("../../img/dataAnalysisOctober/proQualityAnalysis/common_bg.png");
|
||
}
|
||
|
||
.module-title {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 40px;
|
||
min-height: 40px;
|
||
margin-bottom: 10px;
|
||
padding-left: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.title-indicator {
|
||
width: 4px;
|
||
height: 20px;
|
||
background: linear-gradient(180deg, #FF9C65 0%, #FFD700 100%);
|
||
margin-right: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* .info-icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
background: rgba(6, 189, 221, 0.6);
|
||
color: #FFFFFF;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 8px;
|
||
cursor: help;
|
||
} */
|
||
|
||
.module-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
height: 0;
|
||
padding: 0 15px 15px 15px;
|
||
}
|
||
|
||
/* 模块1样式 - 任务统计（六边形布局） */
|
||
.task-statistics-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
/* 中心六边形 */
|
||
.center-hexagon {
|
||
width: 120px;
|
||
height: 140px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
z-index: 2;
|
||
background-image: url("../../img/dataAnalysisOctober/workerEfficiencyAnalysis/bottom.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
/* background-position: center;
|
||
clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%); */
|
||
}
|
||
|
||
.hexagon-value {
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
color: #00FFB8;
|
||
line-height: 1;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.hexagon-label {
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
/* 四个方向的盒子 - 只使用背景图，不设置其他样式，尽量贴合中心 */
|
||
.top-container,
|
||
.bottom-container,
|
||
.left-container,
|
||
.right-container {
|
||
position: absolute;
|
||
width: 110px;
|
||
height: 110px;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
z-index: 1;
|
||
}
|
||
|
||
.top-container {
|
||
top: calc(50% - 200px);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background-image: url("../../img/dataAnalysisOctober/workerEfficiencyAnalysis/top.png");
|
||
}
|
||
|
||
.bottom-container {
|
||
top: calc(50% + 80px);
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background-image: url("../../img/dataAnalysisOctober/workerEfficiencyAnalysis/bottom.png");
|
||
}
|
||
|
||
.left-container {
|
||
left: calc(50% - 200px);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background-image: url("../../img/dataAnalysisOctober/workerEfficiencyAnalysis/left.png");
|
||
}
|
||
|
||
.right-container {
|
||
left: calc(50% + 80px);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background-image: url("../../img/dataAnalysisOctober/workerEfficiencyAnalysis/right.png");
|
||
}
|
||
|
||
/* 延伸线样式 - 带折线效果 */
|
||
.extension-line {
|
||
position: absolute;
|
||
z-index: 0;
|
||
border-style: dashed;
|
||
border-width: 1px 0 0 0;
|
||
}
|
||
|
||
/* 顶部延伸线 - 向右延伸，带折线 */
|
||
.extension-line-top {
|
||
top: 50%;
|
||
left: 100%;
|
||
width: 80px;
|
||
height: 0;
|
||
border-top: 1px dashed rgba(0, 255, 184, 0.5);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 底部延伸线 - 向右延伸，带折线 */
|
||
.extension-line-bottom {
|
||
top: 50%;
|
||
left: 100%;
|
||
width: 80px;
|
||
height: 0;
|
||
border-top: 1px dashed rgba(255, 107, 107, 0.5);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 左侧延伸线 - 向左延伸，带折线 */
|
||
.extension-line-left {
|
||
top: 50%;
|
||
right: 100%;
|
||
width: 80px;
|
||
height: 0;
|
||
border-top: 1px dashed rgba(255, 200, 87, 0.5);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 右侧延伸线 - 向右延伸，带折线 */
|
||
.extension-line-right {
|
||
top: 50%;
|
||
left: 100%;
|
||
width: 80px;
|
||
height: 0;
|
||
border-top: 1px dashed rgba(107, 185, 240, 0.5);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 延伸线端点圆点 - 使用不同颜色 */
|
||
.extension-dot {
|
||
position: absolute;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.extension-dot-top-start,
|
||
.extension-dot-top-end {
|
||
background: rgba(0, 255, 184, 0.8);
|
||
}
|
||
|
||
.extension-dot-bottom-start,
|
||
.extension-dot-bottom-end {
|
||
background: rgba(255, 107, 107, 0.8);
|
||
}
|
||
|
||
.extension-dot-left-start,
|
||
.extension-dot-left-end {
|
||
background: rgba(255, 200, 87, 0.8);
|
||
}
|
||
|
||
.extension-dot-right-start,
|
||
.extension-dot-right-end {
|
||
background: rgba(107, 185, 240, 0.8);
|
||
}
|
||
|
||
.extension-dot-top-start {
|
||
top: 50%;
|
||
left: 100%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.extension-dot-top-end {
|
||
top: 50%;
|
||
left: calc(100% + 80px);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.extension-dot-bottom-start {
|
||
top: 50%;
|
||
left: 100%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.extension-dot-bottom-end {
|
||
top: 50%;
|
||
left: calc(100% + 80px);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.extension-dot-left-start {
|
||
top: 50%;
|
||
right: 100%;
|
||
transform: translate(50%, -50%);
|
||
}
|
||
|
||
.extension-dot-left-end {
|
||
top: 50%;
|
||
right: calc(100% + 80px);
|
||
transform: translate(50%, -50%);
|
||
}
|
||
|
||
.extension-dot-right-start {
|
||
top: 50%;
|
||
left: 100%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.extension-dot-right-end {
|
||
top: 50%;
|
||
left: calc(100% + 80px);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
/* 状态标签样式 - 垂直布局，百分比在上，文字在下 */
|
||
.status-label {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
z-index: 2;
|
||
gap: 2px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.status-label-top {
|
||
top: calc(50% - 25px);
|
||
left: calc(100% + 90px);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.status-label-bottom {
|
||
top: calc(50% + 25px);
|
||
left: calc(100% + 90px);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.status-label-left {
|
||
top: calc(50% - 25px);
|
||
right: calc(100% + 90px);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.status-label-right {
|
||
top: calc(50% - 25px);
|
||
left: calc(100% + 90px);
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 状态值样式 - 4种不同颜色 */
|
||
.status-label-top .status-percent {
|
||
color: #00FFB8;
|
||
}
|
||
|
||
.status-label-top .status-text {
|
||
color: rgba(0, 255, 184, 0.9);
|
||
}
|
||
|
||
.status-label-bottom .status-percent {
|
||
color: #FF6B6B;
|
||
}
|
||
|
||
.status-label-bottom .status-text {
|
||
color: rgba(255, 107, 107, 0.9);
|
||
}
|
||
|
||
.status-label-left .status-percent {
|
||
color: #FFC857;
|
||
}
|
||
|
||
.status-label-left .status-text {
|
||
color: rgba(255, 200, 87, 0.9);
|
||
}
|
||
|
||
.status-label-right .status-percent {
|
||
color: #6BB9F0;
|
||
}
|
||
|
||
.status-label-right .status-text {
|
||
color: rgba(107, 185, 240, 0.9);
|
||
}
|
||
|
||
.status-percent {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 模块2样式 - 月工种任务分布 */
|
||
.job-distribution-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
gap: 15px;
|
||
/* flex-direction: column; */
|
||
}
|
||
|
||
.job-stats-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
margin-bottom: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.job-stat-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
padding: 15px 20px;
|
||
background: rgba(13, 34, 37, 0.6);
|
||
border: 1px solid rgba(6, 189, 221, 0.4);
|
||
border-radius: 6px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 图标容器 - 带六边形边框效果 */
|
||
.job-stat-icon-wrapper {
|
||
width: 60px;
|
||
height: 60px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
background: rgba(6, 189, 221, 0.1);
|
||
border: 1px solid rgba(6, 189, 221, 0.3);
|
||
border-radius: 8px;
|
||
box-shadow: 0 0 15px rgba(6, 189, 221, 0.2);
|
||
}
|
||
|
||
.job-stat-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 0 6px rgba(0, 255, 184, 0.6));
|
||
}
|
||
|
||
.job-stat-content {
|
||
/* flex: 1; */
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.job-stat-value {
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
color: #00FFB8;
|
||
line-height: 1;
|
||
text-shadow: 0 0 10px rgba(0, 255, 184, 0.5);
|
||
}
|
||
|
||
.job-stat-label {
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.job-type-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.job-type-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 12px;
|
||
background: rgba(25, 62, 68, 0.3);
|
||
border-left: 3px solid rgba(6, 189, 221, 0.6);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.job-type-name {
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.job-type-value {
|
||
font-size: 14px;
|
||
color: #00FFB8;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 模块3样式 - 月任务延期排名TOP5 */
|
||
.delay-ranking-list {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.delay-ranking-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 10px 15px;
|
||
background: rgba(25, 62, 68, 0.3);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.ranking-number {
|
||
width: 28px;
|
||
height: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #FF9C65 0%, #FFD700 100%);
|
||
color: #FFFFFF;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ranking-name {
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.ranking-count {
|
||
font-size: 14px;
|
||
color: #FF6B6B;
|
||
margin-left: auto;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.ranking-bar-container {
|
||
flex: 1;
|
||
height: 8px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.ranking-bar {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #FF9C65 0%, #FFD700 100%);
|
||
border-radius: 4px;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
/* 模块4样式 - 月任务延期分布（饼图） */
|
||
.module-4 .module-content {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
|
||
.module-4 .chart-container {
|
||
flex: 0 0 60%;
|
||
height: 100%;
|
||
}
|
||
|
||
.delay-legend {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 8px;
|
||
background: rgba(25, 62, 68, 0.3);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.legend-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.legend-label {
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
flex: 1;
|
||
}
|
||
|
||
.legend-value {
|
||
font-size: 14px;
|
||
color: #00FFB8;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 模块5样式 - 分析预警 */
|
||
.module-5 .module-content {
|
||
overflow: hidden;
|
||
padding: 0 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.warning-list {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
position: relative;
|
||
}
|
||
|
||
.warning-list-scroll {
|
||
gap: 0;
|
||
will-change: transform;
|
||
}
|
||
|
||
.warning-list-scroll .warning-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.warning-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 10px 15px;
|
||
background: rgba(25, 62, 68, 0.3);
|
||
border-left: 3px solid #FF6B6B;
|
||
border-radius: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.warning-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
flex-shrink: 0;
|
||
background-image: url("../../img/dataAnalysisOctober/proQualityAnalysis/icon.png");
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
|
||
.warning-text {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
line-height: 1.5;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
min-width: 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;
|
||
}
|
||
|
||
/* 图表容器 */
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
.module-content::-webkit-scrollbar,
|
||
.job-type-list::-webkit-scrollbar,
|
||
.delay-ranking-list::-webkit-scrollbar,
|
||
.delay-legend::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
.module-content::-webkit-scrollbar-track,
|
||
.job-type-list::-webkit-scrollbar-track,
|
||
.delay-ranking-list::-webkit-scrollbar-track,
|
||
.delay-legend::-webkit-scrollbar-track {
|
||
background: rgba(13, 34, 37, 0.5);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.module-content::-webkit-scrollbar-thumb,
|
||
.job-type-list::-webkit-scrollbar-thumb,
|
||
.delay-ranking-list::-webkit-scrollbar-thumb,
|
||
.delay-legend::-webkit-scrollbar-thumb {
|
||
background: rgba(6, 189, 221, 0.5);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.module-content::-webkit-scrollbar-thumb:hover,
|
||
.job-type-list::-webkit-scrollbar-thumb:hover,
|
||
.delay-ranking-list::-webkit-scrollbar-thumb:hover,
|
||
.delay-legend::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(6, 189, 221, 0.8);
|
||
}
|
||
|
||
/* 无缝滚动动画 */
|
||
@keyframes scrollWarning {
|
||
from {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
to {
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
.warning-list-scroll {
|
||
animation-name: scrollWarning;
|
||
animation-timing-function: linear;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
|
||
.module-5:hover .warning-list-scroll {
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
/* 任务详情弹框样式 */
|
||
.task-detail-modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.task-detail-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;
|
||
}
|
||
|
||
/* 弹框内搜索输入框样式 */
|
||
.modal-search-bar .search-input {
|
||
width: 200px;
|
||
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;
|
||
}
|
||
|
||
.modal-search-bar .search-input:focus {
|
||
outline: none;
|
||
border-color: rgba(6, 189, 221, 1);
|
||
background: rgba(25, 62, 68, 0.8);
|
||
box-shadow: 0 0 8px rgba(6, 189, 221, 0.3);
|
||
}
|
||
|
||
.modal-search-bar .search-input::placeholder {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
/* 弹框内查询按钮样式 */
|
||
.modal-search-bar .search-btn {
|
||
height: 32px;
|
||
padding: 0 24px;
|
||
background: linear-gradient(135deg, #207E75 0%, #2A9D8F 100%);
|
||
border: none;
|
||
border-radius: 2px;
|
||
color: #FFFFFF;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: all 0.3s;
|
||
flex-shrink: 0;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.modal-search-bar .search-btn:hover {
|
||
background: linear-gradient(135deg, #2A9D8F 0%, #3AB5A5 100%);
|
||
box-shadow: 0 4px 12px rgba(6, 189, 221, 0.4);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.modal-search-bar .search-btn:active {
|
||
transform: translateY(0);
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.modal-table-container {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* 弹框内表格样式 */
|
||
#modalTaskDetailTable .layui-table {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table thead tr {
|
||
background-color: rgba(13, 34, 37, 0.8) !important;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table thead th {
|
||
background-color: transparent !important;
|
||
color: #FFFFFF !important;
|
||
border-color: rgba(6, 189, 221, 0.3) !important;
|
||
font-weight: bold;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table tbody tr {
|
||
background-color: rgba(25, 62, 68, 0.3) !important;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table tbody tr:hover {
|
||
background-color: rgba(25, 62, 68, 0.6) !important;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table tbody td {
|
||
color: #FFFFFF !important;
|
||
border-color: rgba(6, 189, 221, 0.2) !important;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table-page {
|
||
background-color: transparent !important;
|
||
border-top: 1px solid rgba(6, 189, 221, 0.3) !important;
|
||
padding: 10px 0 !important;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table-page .layui-laypage {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table-page .layui-laypage a,
|
||
#modalTaskDetailTable .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;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table-page .layui-laypage .layui-laypage-curr em {
|
||
background-color: #207E75 !important;
|
||
color: #FFFFFF !important;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table-page .layui-laypage a:hover {
|
||
background-color: rgba(6, 189, 221, 0.6) !important;
|
||
border-color: rgba(6, 189, 221, 0.8) !important;
|
||
}
|
||
|
||
#modalTaskDetailTable .layui-table-page input {
|
||
background-color: rgba(25, 62, 68, 0.6) !important;
|
||
border-color: rgba(6, 189, 221, 0.5) !important;
|
||
color: #FFFFFF !important;
|
||
}
|
||
</style>
|
||
<script src="../../js/pages/dataAnalysisOctober/workerEfficiencyAnalysis.js" type="text/javascript"></script>
|
||
|
||
</html> |