104 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
		
		
			
		
	
	
			104 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
| 
								 | 
							
								<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ManPowerWorkChart.aspx.cs" Inherits="FineUIPro.Web.JDGL.SGManPower.ManPowerWorkChart" %>
							 | 
						||
| 
								 | 
							
								<%@ Register Src="~/Controls/ChartControl.ascx" TagName="ChartControl" TagPrefix="uc1" %>
							 | 
						||
| 
								 | 
							
								<!DOCTYPE html>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								<html xmlns="http://www.w3.org/1999/xhtml">
							 | 
						||
| 
								 | 
							
								<head runat="server">
							 | 
						||
| 
								 | 
							
								    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
							 | 
						||
| 
								 | 
							
								    <title>现场考勤人力图表</title>
							 | 
						||
| 
								 | 
							
								    <link href="../../res/css/common.css" rel="stylesheet" type="text/css" />
							 | 
						||
| 
								 | 
							
								    <style type="text/css">        .chart-container {
							 | 
						||
| 
								 | 
							
								            overflow-x: auto;
							 | 
						||
| 
								 | 
							
								            overflow-y: hidden;
							 | 
						||
| 
								 | 
							
								            width: 100%;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								        
							 | 
						||
| 
								 | 
							
								        .chart-content {
							 | 
						||
| 
								 | 
							
								            display: inline-block;
							 | 
						||
| 
								 | 
							
								            min-width: 100%;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								        
							 | 
						||
| 
								 | 
							
								        .chart-wrapper {
							 | 
						||
| 
								 | 
							
								            text-align: center;
							 | 
						||
| 
								 | 
							
								            padding: 20px;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								        
							 | 
						||
| 
								 | 
							
								        .scroll-hint {
							 | 
						||
| 
								 | 
							
								            text-align: center;
							 | 
						||
| 
								 | 
							
								            color: #666;
							 | 
						||
| 
								 | 
							
								            font-size: 12px;
							 | 
						||
| 
								 | 
							
								            margin-bottom: 10px;
							 | 
						||
| 
								 | 
							
								            display: none;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								        
							 | 
						||
| 
								 | 
							
								        .chart-container::-webkit-scrollbar {
							 | 
						||
| 
								 | 
							
								            height: 8px;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								        
							 | 
						||
| 
								 | 
							
								        .chart-container::-webkit-scrollbar-track {
							 | 
						||
| 
								 | 
							
								            background: #f1f1f1;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								        
							 | 
						||
| 
								 | 
							
								        .chart-container::-webkit-scrollbar-thumb {
							 | 
						||
| 
								 | 
							
								            background: #c1c1c1;
							 | 
						||
| 
								 | 
							
								            border-radius: 4px;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								        
							 | 
						||
| 
								 | 
							
								        .chart-container::-webkit-scrollbar-thumb:hover {
							 | 
						||
| 
								 | 
							
								            background: #a1a1a1;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								    </style>
							 | 
						||
| 
								 | 
							
								</head>
							 | 
						||
| 
								 | 
							
								<body>
							 | 
						||
| 
								 | 
							
								    <form id="form1" runat="server">
							 | 
						||
| 
								 | 
							
								        <f:PageManager ID="PageManager1" runat="server" />
							 | 
						||
| 
								 | 
							
								        <f:Panel ID="Panel1" runat="server" ShowBorder="false" ShowHeader="false" 
							 | 
						||
| 
								 | 
							
								                 Layout="Region" Margin="5px">
							 | 
						||
| 
								 | 
							
								            <Items>
							 | 
						||
| 
								 | 
							
								                <f:Panel ID="panelCenterRegion" runat="server" RegionPosition="Center" 
							 | 
						||
| 
								 | 
							
								                         ShowBorder="false" ShowHeader="false" Layout="Fit">
							 | 
						||
| 
								 | 
							
								                    <Items>
							 | 
						||
| 
								 | 
							
								                        <f:ContentPanel ID="ContentPanel1" runat="server" ShowBorder="false" ShowHeader="false">
							 | 
						||
| 
								 | 
							
								                            <div class="scroll-hint" id="scrollHint" runat="server">← 左右滑动查看图表 →</div>
							 | 
						||
| 
								 | 
							
								                            <div class="chart-container" id="chartContainer" runat="server">
							 | 
						||
| 
								 | 
							
								                                <div class="chart-content">
							 | 
						||
| 
								 | 
							
								                                    <div class="chart-wrapper">
							 | 
						||
| 
								 | 
							
								                                        <%-- <h2>总人力需求计划</h2> --%>
							 | 
						||
| 
								 | 
							
								                                        <uc1:ChartControl ID="Chart1" runat="server" 
							 | 
						||
| 
								 | 
							
								                                                          ChartType="Column" 
							 | 
						||
| 
								 | 
							
								                                                          Title="人力需求计划" 
							 | 
						||
| 
								 | 
							
								                                                          YAxisTitle="人员数量" 
							 | 
						||
| 
								 | 
							
								                                                          XAxisTitle="日期" />
							 | 
						||
| 
								 | 
							
								                                    </div>
							 | 
						||
| 
								 | 
							
								                                </div>
							 | 
						||
| 
								 | 
							
								                            </div>
							 | 
						||
| 
								 | 
							
								                        </f:ContentPanel>
							 | 
						||
| 
								 | 
							
								                    </Items>
							 | 
						||
| 
								 | 
							
								                </f:Panel>
							 | 
						||
| 
								 | 
							
								            </Items>
							 | 
						||
| 
								 | 
							
								        </f:Panel>
							 | 
						||
| 
								 | 
							
								    </form>
							 | 
						||
| 
								 | 
							
								    <script type="text/javascript">        function checkScroll() {
							 | 
						||
| 
								 | 
							
								            var container = document.getElementById('<%= chartContainer.ClientID %>');
							 | 
						||
| 
								 | 
							
								            var hint = document.getElementById('<%= scrollHint.ClientID %>');
							 | 
						||
| 
								 | 
							
								            
							 | 
						||
| 
								 | 
							
								            if (container && hint) {
							 | 
						||
| 
								 | 
							
								                // 如果内容宽度大于容器宽度,显示滚动提示
							 | 
						||
| 
								 | 
							
								                if (container.scrollWidth > container.clientWidth) {
							 | 
						||
| 
								 | 
							
								                    hint.style.display = 'block';
							 | 
						||
| 
								 | 
							
								                } else {
							 | 
						||
| 
								 | 
							
								                    hint.style.display = 'none';
							 | 
						||
| 
								 | 
							
								                }
							 | 
						||
| 
								 | 
							
								            }
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								        
							 | 
						||
| 
								 | 
							
								        // 页面加载完成后检查是否需要显示滚动提示
							 | 
						||
| 
								 | 
							
								        window.addEventListener('load', function() {
							 | 
						||
| 
								 | 
							
								            setTimeout(checkScroll, 100); // 稍微延迟以确保图表已渲染
							 | 
						||
| 
								 | 
							
								        });
							 | 
						||
| 
								 | 
							
								        
							 | 
						||
| 
								 | 
							
								        // 窗口大小改变时重新检查
							 | 
						||
| 
								 | 
							
								        window.addEventListener('resize', checkScroll);
							 | 
						||
| 
								 | 
							
								    </script>
							 | 
						||
| 
								 | 
							
								</body>
							 | 
						||
| 
								 | 
							
								</html>
							 |