CNCEC_SUBQHSE_WUHUAN/SGGL/FineUIPro.Web/JDGL/SGManPower/ManPowerWorkChart.aspx

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>