721 lines
24 KiB
Plaintext
721 lines
24 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ManPowerStat.aspx.cs" Inherits="FineUIPro.Web.JDGL.SGManPower.ManPowerStat" %>
|
||
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head id="Head1" runat="server">
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<title>人力统计</title>
|
||
<link href="../../res/index/css/reset.css" rel="stylesheet" />
|
||
<link href="../../res/index/css/home.css" rel="stylesheet" />
|
||
<link href="../../res/index/css/swiper-3.4.2.min.css" rel="stylesheet" />
|
||
<style type="text/css">
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.flexV {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.wrap {
|
||
height: 100%;
|
||
padding: 15px;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.iteml {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.itemb {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.bottom-wrap {
|
||
padding: 0;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.bottom-wrap:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.bw-b-bottom {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.bw-b-bottom-up {
|
||
border-radius: 0;
|
||
height: 100%;
|
||
margin: 0;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.bw-item-content {
|
||
padding: 5px;
|
||
}
|
||
|
||
.top {
|
||
width: 100%;
|
||
}
|
||
|
||
.bw-b {
|
||
width: 50%;
|
||
}
|
||
|
||
.tab-wrap {
|
||
left: auto;
|
||
right: 15px;
|
||
top: 5px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tab .t-item {
|
||
width: auto;
|
||
padding: 5px 10px;
|
||
color: #363636;
|
||
}
|
||
|
||
.tit-item {
|
||
padding: 0 10px;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tab-wrap .tab .t-item {
|
||
color: #1C1C1C;
|
||
}
|
||
|
||
.tip-item {
|
||
margin-left: 10px;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.tip {
|
||
width: 25px;
|
||
height: 13px;
|
||
background-color: #258F76;
|
||
border-radius: 2px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.tip-next {
|
||
background-color: #4F4F4F;
|
||
}
|
||
|
||
.myTableClass {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
margin: 2px 1px;
|
||
border-collapse: collapse;
|
||
border: 1px solid #BEBEBE;
|
||
background: #ffffff;
|
||
color: #8B8989;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tab-title {
|
||
height: 48px;
|
||
color: #3CB371;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tab-header {
|
||
height: 36px;
|
||
color: #1C86EE;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
td, th {
|
||
border: 1px solid #BEBEBE;
|
||
}
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
.filter-options {
|
||
justify-content: flex-end;
|
||
padding: 10px;
|
||
background-color: #f8f8f8;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
|
||
.filter-options label {
|
||
margin-left: 10px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.filter-options input[type="radio"] {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.loading-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 50px;
|
||
height: 50px;
|
||
border: 5px solid #f3f3f3;
|
||
border-top: 5px solid #3498db;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.error-message {
|
||
color: red;
|
||
text-align: center;
|
||
padding: 20px;
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="filter-options">
|
||
<label>
|
||
<input type="radio" name="data-filter" value="total" checked> 总数
|
||
</label>
|
||
<label>
|
||
<input type="radio" name="data-filter" value="annual"> 年度
|
||
</label>
|
||
<select id="year-select" style="display: none; margin-left: 10px; padding: 2px; font-size: 14px;">
|
||
<!-- 年份选项将通过JavaScript动态填充 -->
|
||
</select>
|
||
<label>
|
||
<input type="radio" name="data-filter" value="monthly"> 月度
|
||
</label>
|
||
<select id="month-select" style="display: none; margin-left: 10px; padding: 2px; font-size: 14px;">
|
||
<option value="1">1月</option>
|
||
<option value="2">2月</option>
|
||
<option value="3">3月</option>
|
||
<option value="4">4月</option>
|
||
<option value="5">5月</option>
|
||
<option value="6">6月</option>
|
||
<option value="7">7月</option>
|
||
<option value="8">8月</option>
|
||
<option value="9">9月</option>
|
||
<option value="10">10月</option>
|
||
<option value="11">11月</option>
|
||
<option value="12">12月</option>
|
||
</select>
|
||
</div>
|
||
<div class="wrap flex flexV">
|
||
<div class="bottom-wrap flex1">
|
||
<div class="top flex">
|
||
<div class="item flex2 iteml">
|
||
<div class="bw-b-bottom">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="bw-item-content">
|
||
<div id='one' class="chart-container"></div>
|
||
<div id='one-error' class="error-message"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item flex2 iteml">
|
||
<div class="bw-b-bottom">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="bw-item-content">
|
||
<div id='two' class="chart-container"></div>
|
||
<div id='two-error' class="error-message"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-wrap flex1">
|
||
<div class="top flex">
|
||
<div class="item flex2 iteml">
|
||
<div class="bw-b-bottom">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="bw-item-content">
|
||
<div id='three' class="chart-container"></div>
|
||
<div id='three-error' class="error-message"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="item flex2 iteml">
|
||
<div class="bw-b-bottom">
|
||
<div class="bw-b-bottom-up">
|
||
<div class="bw-item-content">
|
||
<div id='four' class="chart-container"></div>
|
||
<div id='four-error' class="error-message"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 加载动画 -->
|
||
<div id="loadingOverlay" class="loading-overlay">
|
||
<div class="loading-spinner"></div>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript" src="../../res/index/js/jquery-3.4.1.min.js"></script>
|
||
<script type="text/javascript" src="../../res/index/js/swiper-3.4.2.jquery.min.js"></script>
|
||
<script type="text/javascript" src="../../res/index/js/echarts.min.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
// 存储各图表的实例
|
||
var chartInstances = {};
|
||
|
||
// 页面加载完成后初始化图表
|
||
$(document).ready(function() {
|
||
// 填充年份下拉框
|
||
populateYearSelect();
|
||
|
||
// 获取当前URL中的type参数，如果没有则默认为total
|
||
var urlParams = new URLSearchParams(window.location.search);
|
||
var currentType = urlParams.get('type') || 'total';
|
||
|
||
// 设置对应的单选按钮为选中状态
|
||
$('input[name="data-filter"][value="' + currentType + '"]').prop('checked', true);
|
||
|
||
// 根据选中的类型显示/隐藏年份下拉框
|
||
toggleYearSelect(currentType);
|
||
|
||
// 初始化图表
|
||
loadAndRenderCharts(currentType);
|
||
|
||
// 监听单选按钮变化事件
|
||
$('input[name="data-filter"]').change(function() {
|
||
var dataType = $(this).val();
|
||
toggleYearSelect(dataType);
|
||
});
|
||
|
||
// 监听年份下拉框变化事件
|
||
$('#year-select').change(function() {
|
||
var dataType = $('input[name="data-filter"]:checked').val();
|
||
if (dataType === 'annual' || dataType === 'monthly') {
|
||
loadAndRenderCharts(dataType);
|
||
}
|
||
});
|
||
|
||
// 监听月份下拉框变化事件
|
||
$('#month-select').change(function() {
|
||
var dataType = $('input[name="data-filter"]:checked').val();
|
||
if (dataType === 'monthly') {
|
||
loadAndRenderCharts(dataType);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 填充年份下拉框
|
||
function populateYearSelect() {
|
||
var currentYear = new Date().getFullYear();
|
||
var yearSelect = $('#year-select');
|
||
|
||
// 添加最近10年的选项
|
||
for (var i = currentYear; i >= currentYear - 10; i--) {
|
||
yearSelect.append($('<option></option>').attr('value', i).text(i));
|
||
}
|
||
|
||
// 默认选中当前年份
|
||
yearSelect.val(currentYear);
|
||
}
|
||
|
||
// 根据选中的数据类型显示/隐藏年份下拉框
|
||
function toggleYearSelect(dataType) {
|
||
if (dataType === 'annual') {
|
||
$('#year-select').show();
|
||
$('#month-select').hide();
|
||
// 不再立即触发数据查询，只显示年份选择框
|
||
} else if (dataType === 'monthly') {
|
||
$('#year-select').show();
|
||
$('#month-select').show();
|
||
// 不再立即触发数据查询，只显示年份和月份选择框
|
||
} else {
|
||
$('#year-select').hide();
|
||
$('#month-select').hide();
|
||
}
|
||
}
|
||
|
||
// 通过Ajax加载数据并渲染图表
|
||
function loadAndRenderCharts(type) {
|
||
// 显示加载状态
|
||
showLoading();
|
||
|
||
// 隐藏所有错误信息
|
||
$('.error-message').hide();
|
||
|
||
// 获取选中的年份或月份
|
||
var selectedYear = $('#year-select').val();
|
||
var selectedMonth = $('#month-select').val();
|
||
|
||
// 使用Ajax并行获取四个图表的数据
|
||
$.when(
|
||
$.ajax({
|
||
url: 'ManPowerStat.aspx/GetChartData',
|
||
type: 'POST',
|
||
data: JSON.stringify(createParams(type, 'One', selectedYear, selectedMonth)),
|
||
contentType: 'application/json; charset=utf-8',
|
||
dataType: 'json',
|
||
timeout: 30000 // 30秒超时
|
||
}),
|
||
$.ajax({
|
||
url: 'ManPowerStat.aspx/GetChartData',
|
||
type: 'POST',
|
||
data: JSON.stringify(createParams(type, 'Two', selectedYear, selectedMonth)),
|
||
contentType: 'application/json; charset=utf-8',
|
||
dataType: 'json',
|
||
timeout: 30000
|
||
}),
|
||
$.ajax({
|
||
url: 'ManPowerStat.aspx/GetChartData',
|
||
type: 'POST',
|
||
data: JSON.stringify(createParams(type, 'Three', selectedYear, selectedMonth)),
|
||
contentType: 'application/json; charset=utf-8',
|
||
dataType: 'json',
|
||
timeout: 30000
|
||
}),
|
||
$.ajax({
|
||
url: 'ManPowerStat.aspx/GetChartData',
|
||
type: 'POST',
|
||
data: JSON.stringify(createParams(type, 'Four', selectedYear, selectedMonth)),
|
||
contentType: 'application/json; charset=utf-8',
|
||
dataType: 'json',
|
||
timeout: 30000
|
||
})
|
||
).done(function(oneResult, twoResult, threeResult, fourResult) {
|
||
try {
|
||
// 渲染四个图表
|
||
renderChart('one', oneResult[0].d, '五环管理人员统计分析');
|
||
renderChart('two', twoResult[0].d, '施工单位管理人员统计分析');
|
||
renderChart('three', threeResult[0].d, '作业人员统计分析');
|
||
renderChart('four', fourResult[0].d, '过程人力统计分析');
|
||
} catch (e) {
|
||
console.error('图表渲染错误:', e);
|
||
showError('图表渲染失败，请重试');
|
||
}
|
||
|
||
// 隐藏加载状态
|
||
hideLoading();
|
||
}).fail(function(jqXHR, textStatus, errorThrown) {
|
||
// 处理错误情况
|
||
console.error('Ajax请求失败:', textStatus, errorThrown);
|
||
console.error('响应内容:', jqXHR.responseText);
|
||
|
||
var errorMessage = '数据加载失败';
|
||
if (textStatus === 'timeout') {
|
||
errorMessage = '请求超时，请重试';
|
||
} else if (jqXHR.responseText) {
|
||
try {
|
||
var errorResponse = JSON.parse(jqXHR.responseText);
|
||
if (errorResponse.Message) {
|
||
errorMessage = errorResponse.Message;
|
||
}
|
||
} catch (e) {
|
||
errorMessage = jqXHR.responseText;
|
||
}
|
||
}
|
||
|
||
showError(errorMessage);
|
||
hideLoading();
|
||
});
|
||
}
|
||
|
||
// 创建传递给后端的参数对象
|
||
function createParams(type, chart, year, month) {
|
||
debugger
|
||
var params = {
|
||
type: type,
|
||
chart: chart ,
|
||
year:null,
|
||
month:null,
|
||
};
|
||
|
||
// 只有在需要时才添加year和month参数
|
||
if (type === 'annual' && year) {
|
||
params.year = year;
|
||
} else if (type === 'monthly' && year && month) {
|
||
params.year = year;
|
||
params.month = month;
|
||
}
|
||
|
||
// 确保参数对象中不包含值为undefined的属性
|
||
for (var key in params) {
|
||
if (params[key] === undefined) {
|
||
delete params[key];
|
||
}
|
||
}
|
||
|
||
return params;
|
||
}
|
||
|
||
// 渲染单个图表的通用方法
|
||
function renderChart(chartId, data, title) {
|
||
try {
|
||
// 隐藏错误信息
|
||
$('#' + chartId + '-error').hide();
|
||
|
||
// 解析数据
|
||
var chartData;
|
||
if (typeof data === 'string') {
|
||
chartData = JSON.parse(data);
|
||
} else {
|
||
chartData = data;
|
||
}
|
||
|
||
// 验证数据
|
||
if (!chartData || !chartData.categories || !chartData.series) {
|
||
throw new Error('数据格式不正确');
|
||
}
|
||
|
||
// 如果图表实例已存在，先销毁
|
||
if (chartInstances[chartId]) {
|
||
chartInstances[chartId].dispose();
|
||
}
|
||
|
||
var chartContainer = document.getElementById(chartId);
|
||
if (!chartContainer) {
|
||
throw new Error('找不到图表容器: ' + chartId);
|
||
}
|
||
|
||
var myChart = echarts.init(chartContainer);
|
||
var xArr = chartData.categories;
|
||
var num = chartData.xFontNum || 6;
|
||
|
||
// 确保series数据存在
|
||
var seriesData = [];
|
||
if (chartData.series && chartData.series.length >= 2) {
|
||
seriesData = [
|
||
{
|
||
name: '计划',
|
||
type: 'line',
|
||
data: chartData.series[1].data || [],
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
fontSize: '12px',
|
||
color: '#363636'
|
||
},
|
||
formatter: function (params) {
|
||
return params.value === 0 ? '' : params.value;
|
||
},
|
||
},
|
||
itemStyle: { normal: { color: 'rgba(255,0,0, 0.5)' } },
|
||
smooth: true
|
||
},
|
||
{
|
||
name: '实际',
|
||
type: 'line',
|
||
data: chartData.series[0].data || [],
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
fontSize: '12px',
|
||
color: '#363636'
|
||
},
|
||
formatter: function (params) {
|
||
return params.value === 0 ? '' : params.value;
|
||
},
|
||
},
|
||
itemStyle: { normal: { color: 'rgba(0,100,0,0.8)' } },
|
||
smooth: true
|
||
}
|
||
];
|
||
}
|
||
|
||
var option = {
|
||
title: {
|
||
text: title,
|
||
textStyle: {
|
||
color: '#1C1C1C',
|
||
fontSize: 16,
|
||
fontWeight: 700
|
||
},
|
||
show: true
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
left: '80%',
|
||
show: true,
|
||
textStyle: {
|
||
color: '#363636',
|
||
fontSize: 12,
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
maxValueSpan: 6,
|
||
show: xArr && xArr.length > 6, // 只有数据超过6个才显示缩放
|
||
xAxisIndex: [0],
|
||
bottom: 0, height: 10,
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
borderColor: 'none',
|
||
brushSelect: false,
|
||
textStyle: {
|
||
color: 'rgba(0,0,0,0)'
|
||
},
|
||
selectedDataBackground: {
|
||
areaStyle: {
|
||
color: 'red',
|
||
borderWidth: 0
|
||
}
|
||
},
|
||
handleStyle: {
|
||
color: "#0a1449"
|
||
},
|
||
moveHandleStyle: {
|
||
color: '#0a1449'
|
||
}
|
||
}
|
||
],
|
||
xAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(0,0,0, 0.3)',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(0,0,0, 0.8)'
|
||
},
|
||
interval: 0,
|
||
rotate: -15,
|
||
formatter: function (value) {
|
||
if (!value) return '';
|
||
var ret = "";
|
||
var maxLength = num;
|
||
var valLength = value.length;
|
||
var rowN = Math.ceil(valLength / maxLength);
|
||
if (rowN > 1) {
|
||
for (var i = 0; i < rowN; i++) {
|
||
var temp = "";
|
||
var start = i * maxLength;
|
||
var end = start + maxLength;
|
||
temp = value.substring(start, end) + (i == rowN - 1 ? "" : "\n");
|
||
ret += temp;
|
||
}
|
||
return ret;
|
||
} else {
|
||
return value;
|
||
}
|
||
}
|
||
},
|
||
type: 'category',
|
||
data: xArr || [],
|
||
boundaryGap: [0, 0.01],
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: 'rgba(0,0,0, 0.3)'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(0,0,0, 0.8)'
|
||
}
|
||
},
|
||
},
|
||
series: seriesData,
|
||
grid: {
|
||
top: '20%',
|
||
left: '0%',
|
||
right: '0%',
|
||
bottom: 40,
|
||
containLabel: true,
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
},
|
||
backgroundColor: 'rgba(0,162,233, 0.01)',
|
||
textStyle: {
|
||
color: 'rgba(0,0,0, 0.3)'
|
||
}
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
chartInstances[chartId] = myChart;
|
||
|
||
// 监听窗口大小变化，重新调整图表大小
|
||
var resizeHandler = function() {
|
||
if (chartInstances[chartId]) {
|
||
chartInstances[chartId].resize();
|
||
}
|
||
};
|
||
|
||
// 避免重复绑定事件
|
||
if (window.addEventListener) {
|
||
window.removeEventListener('resize', resizeHandler);
|
||
window.addEventListener('resize', resizeHandler);
|
||
}
|
||
} catch (e) {
|
||
console.error('渲染图表失败 [' + chartId + ']:', e);
|
||
showError('图表渲染失败: ' + e.message, chartId);
|
||
}
|
||
}
|
||
|
||
// 显示错误信息
|
||
function showError(message, chartId) {
|
||
if (chartId) {
|
||
$('#' + chartId + '-error').text(message).show();
|
||
} else {
|
||
// 全局错误显示
|
||
alert(message);
|
||
}
|
||
}
|
||
|
||
// 显示加载状态
|
||
function showLoading() {
|
||
document.getElementById('loadingOverlay').style.display = 'flex';
|
||
}
|
||
|
||
// 隐藏加载状态
|
||
function hideLoading() {
|
||
document.getElementById('loadingOverlay').style.display = 'none';
|
||
}
|
||
</script>
|
||
|
||
|
||
|
||
|
||
</html>
|