| 
									
										
										
										
											2024-07-29 18:06:25 +08:00
										 |  |  | <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SystemstatusChart.aspx.cs" Inherits="FineUIPro.Web.Transfer.Chart.SystemstatusChart" %> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <%@ 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> | 
					
						
							|  |  |  | </head> | 
					
						
							|  |  |  | <body> | 
					
						
							|  |  |  |     <form id="form1" runat="server"> | 
					
						
							|  |  |  |     <f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="RegionPanel1" AjaxAspnetControls="divAccidentUnit,divAccidentTime" /> | 
					
						
							|  |  |  |     <f:Panel ID="Panel3" CssClass="blockpanel" runat="server" EnableCollapse="false" | 
					
						
							|  |  |  |             BodyPadding="10px" ShowBorder="true" ShowHeader="false" Hidden="true"> | 
					
						
							|  |  |  |             <Items> | 
					
						
							|  |  |  |                 <f:Form ID="Form2" ShowHeader="false" ShowBorder="false" runat="server" > | 
					
						
							|  |  |  |                     <Rows> | 
					
						
							|  |  |  |                         <f:FormRow ColumnWidths="25% 30% 35%  10%"> | 
					
						
							|  |  |  |                             <Items> | 
					
						
							|  |  |  |                                 <f:DropDownList ID="ddlSystemNo" runat="server" Label="System No" AutoPostBack="true" EnableEdit="true" | 
					
						
							|  |  |  |                                     OnSelectedIndexChanged="ddlSystemNo_SelectedIndexChanged" Width="300px" LabelWidth="100px"> | 
					
						
							|  |  |  |                                 </f:DropDownList> | 
					
						
							|  |  |  |                                 | 
					
						
							|  |  |  |                                <%-- <f:Button ID="BtnAnalyse" Text="统计" Icon="ChartPie" runat="server" OnClick="BtnAnalyse_Click"> | 
					
						
							|  |  |  |                                 </f:Button>--%> | 
					
						
							|  |  |  |                             </Items> | 
					
						
							|  |  |  |                         </f:FormRow> | 
					
						
							|  |  |  |                     </Rows> | 
					
						
							|  |  |  |                 </f:Form> | 
					
						
							|  |  |  |             </Items> | 
					
						
							|  |  |  |         </f:Panel> | 
					
						
							| 
									
										
										
										
											2024-08-09 10:48:15 +08:00
										 |  |  |        <div id='two' style="width: 95%; height: 600px;"></div> | 
					
						
							| 
									
										
										
										
											2024-07-29 18:06:25 +08:00
										 |  |  |     <%--    <f:Panel ID="Panel4" CssClass="blockpanel" runat="server" EnableCollapse="false" | 
					
						
							|  |  |  |             BodyPadding="10px" ShowBorder="true" ShowHeader="false" Hidden="true"> | 
					
						
							|  |  |  |             | 
					
						
							|  |  |  |             <Items> | 
					
						
							|  |  |  |                 <f:TabStrip ID="TabStrip1" CssClass="f-tabstrip-theme-simple" Height="600px" ShowBorder="true" | 
					
						
							|  |  |  |                     TabPosition="Top" MarginBottom="5px" EnableTabCloseMenu="false" runat="server"> | 
					
						
							|  |  |  |                     <Tabs> | 
					
						
							|  |  |  |                         <f:Tab ID="Tab2" Title="图形" BodyPadding="5px" Layout="Fit" IconFont="Bookmark" runat="server" | 
					
						
							|  |  |  |                             TitleToolTip="图形"> | 
					
						
							|  |  |  |                             <Items> | 
					
						
							|  |  |  |                                 <f:ContentPanel ShowHeader="false" runat="server" ID="cpAccidentTime" Margin="0 0 0 0" Hidden="true"> | 
					
						
							|  |  |  |                                     <div id="divAccidentTime"> | 
					
						
							|  |  |  |                                         <uc1:ChartControl ID="ChartAccidentTime" runat="server" /> | 
					
						
							|  |  |  |                                     </div> | 
					
						
							|  |  |  |                                 </f:ContentPanel> | 
					
						
							|  |  |  |                                  | 
					
						
							|  |  |  |                             </Items> | 
					
						
							|  |  |  |                         </f:Tab> | 
					
						
							|  |  |  |                     </Tabs> | 
					
						
							|  |  |  |                 </f:TabStrip> | 
					
						
							|  |  |  |             </Items> | 
					
						
							|  |  |  |         </f:Panel>--%> | 
					
						
							|  |  |  |     </form> | 
					
						
							|  |  |  | </body> | 
					
						
							|  |  |  | </html> | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | <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 xArr = [<%=AllSystemNo%>] | 
					
						
							|  |  |  |     //var xArr = two2.categories | 
					
						
							|  |  |  |     var data = [ | 
					
						
							|  |  |  |         { | 
					
						
							|  |  |  |             name: '完成数量', | 
					
						
							|  |  |  |             type: 'bar', | 
					
						
							|  |  |  |             stack: '总量', | 
					
						
							|  |  |  |             barWidth: 40, | 
					
						
							|  |  |  |             data: [<%=completed%>], | 
					
						
							|  |  |  |             //data: two2.series[0].data, | 
					
						
							|  |  |  |             label: { //柱体上显示数值 | 
					
						
							|  |  |  |                 show: true,//开启显示 | 
					
						
							|  |  |  |                 position: ['40%', '50%'],//在上方显示 | 
					
						
							|  |  |  |                 textStyle: {//数值样式 | 
					
						
							|  |  |  |                     fontSize: '20px', | 
					
						
							|  |  |  |                     color: '#000' | 
					
						
							|  |  |  |                 }, | 
					
						
							|  |  |  |                 formatter: '{c}', | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             itemStyle: { normal: { color: '#84CF75' } } | 
					
						
							|  |  |  |         }, | 
					
						
							|  |  |  |         { | 
					
						
							|  |  |  |             name: '进行中数量', | 
					
						
							|  |  |  |             type: 'bar', | 
					
						
							|  |  |  |             stack: '总量', | 
					
						
							|  |  |  |             barWidth: 40, | 
					
						
							|  |  |  |             data: [<%=Inprogress%>], | 
					
						
							|  |  |  |             //data: two2.series[1].data, | 
					
						
							|  |  |  |             label: { //柱体上显示数值 | 
					
						
							|  |  |  |                 show: true,//开启显示 | 
					
						
							|  |  |  |                 position: ['40%', '50%'],//在上方显示 | 
					
						
							|  |  |  |                 textStyle: {//数值样式 | 
					
						
							|  |  |  |                     fontSize: '20px', | 
					
						
							|  |  |  |                     color: '#000' | 
					
						
							|  |  |  |                 }, | 
					
						
							|  |  |  |                 formatter: '{c}', | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             itemStyle: { normal: { color: '#3282F6' } } | 
					
						
							|  |  |  |         }, | 
					
						
							|  |  |  |         { | 
					
						
							|  |  |  |             name: '未完成数量', | 
					
						
							|  |  |  |             type: 'bar', | 
					
						
							|  |  |  |             stack: '总量', | 
					
						
							|  |  |  |             barWidth: 40, | 
					
						
							|  |  |  |             data: [<%=NotStart%>], | 
					
						
							|  |  |  |             //data: two2.series[1].data, | 
					
						
							|  |  |  |             label: { //柱体上显示数值 | 
					
						
							|  |  |  |                 show: true,//开启显示 | 
					
						
							|  |  |  |                 position: ['40%', '50%'],//在上方显示 | 
					
						
							|  |  |  |                 textStyle: {//数值样式 | 
					
						
							|  |  |  |                     fontSize: '20px', | 
					
						
							|  |  |  |                     color: '#000' | 
					
						
							|  |  |  |                 }, | 
					
						
							|  |  |  |                 formatter: '{c}', | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             itemStyle: { normal: { color: '#EB3324' } } | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  |     ] | 
					
						
							| 
									
										
										
										
											2024-08-09 10:48:15 +08:00
										 |  |  |     //category_Two('two', xArr, data, 20) | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     category_SystemChart('two', xArr, data, 20); | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     function category_SystemChart(id, xArr, data, num){ | 
					
						
							|  |  |  |         var myChart = echarts.init(document.getElementById(id)) | 
					
						
							|  |  |  |         var option = { | 
					
						
							|  |  |  |             tooltip: { | 
					
						
							|  |  |  |                 trigger: 'axis', | 
					
						
							|  |  |  |                 axisPointer: { | 
					
						
							|  |  |  |                     // Use axis to trigger tooltip | 
					
						
							|  |  |  |                     type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             legend: {}, | 
					
						
							|  |  |  |             grid: { | 
					
						
							|  |  |  |                 left: '3%', | 
					
						
							|  |  |  |                 right: '4%', | 
					
						
							|  |  |  |                 bottom: '3%', | 
					
						
							|  |  |  |                 containLabel: true | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             xAxis: { | 
					
						
							|  |  |  |                 type: 'value' | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             yAxis: { | 
					
						
							|  |  |  |                 type: 'category', | 
					
						
							|  |  |  |                 data: xArr | 
					
						
							|  |  |  |             }, | 
					
						
							|  |  |  |             series: [ | 
					
						
							|  |  |  |                 { | 
					
						
							|  |  |  |                     name: '完成数量', | 
					
						
							|  |  |  |                     type: 'bar', | 
					
						
							|  |  |  |                     stack: '总量', | 
					
						
							|  |  |  |                     label: { | 
					
						
							|  |  |  |                         show: true | 
					
						
							|  |  |  |                     }, | 
					
						
							|  |  |  |                     emphasis: { | 
					
						
							|  |  |  |                         focus: 'series' | 
					
						
							|  |  |  |                     }, | 
					
						
							|  |  |  |                     data: [<%=completed%>], | 
					
						
							|  |  |  |                     itemStyle: { normal: { color: '#84CF75' } } | 
					
						
							|  |  |  |                 }, | 
					
						
							|  |  |  |                 { | 
					
						
							|  |  |  |                     name: '进行中数量', | 
					
						
							|  |  |  |                     type: 'bar', | 
					
						
							|  |  |  |                     stack: '总量', | 
					
						
							|  |  |  |                     label: { | 
					
						
							|  |  |  |                         show: true | 
					
						
							|  |  |  |                     }, | 
					
						
							|  |  |  |                     emphasis: { | 
					
						
							|  |  |  |                         focus: 'series' | 
					
						
							|  |  |  |                     }, | 
					
						
							|  |  |  |                     data: [<%=Inprogress%>], | 
					
						
							|  |  |  |                     itemStyle: { normal: { color: '#3282F6' } } | 
					
						
							|  |  |  |                 }, | 
					
						
							|  |  |  |                 { | 
					
						
							|  |  |  |                     name: '未完成数量', | 
					
						
							|  |  |  |                     type: 'bar', | 
					
						
							|  |  |  |                     stack: '总量', | 
					
						
							|  |  |  |                     label: { | 
					
						
							|  |  |  |                         show: true | 
					
						
							|  |  |  |                     }, | 
					
						
							|  |  |  |                     emphasis: { | 
					
						
							|  |  |  |                         focus: 'series' | 
					
						
							|  |  |  |                     }, | 
					
						
							|  |  |  |                     data: [<%=NotStart%>], | 
					
						
							|  |  |  |                     itemStyle: { normal: { color: '#EB3324' } } | 
					
						
							|  |  |  |                 } | 
					
						
							|  |  |  |             ], | 
					
						
							|  |  |  |         }; | 
					
						
							|  |  |  |         option.dataZoom = [{ | 
					
						
							|  |  |  |             type: "inside", | 
					
						
							|  |  |  |             startValue: 0, | 
					
						
							|  |  |  |             endValue: 10, | 
					
						
							|  |  |  |             minValueSpan: 10, | 
					
						
							|  |  |  |             maxValueSpan: 10, | 
					
						
							|  |  |  |             yAxisIndex: [0], | 
					
						
							|  |  |  |             zoomOnMouseWheel: false,  // 关闭滚轮缩放 | 
					
						
							|  |  |  |             moveOnMouseWheel: true, // 开启滚轮平移 | 
					
						
							|  |  |  |             moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移  | 
					
						
							|  |  |  |         }, | 
					
						
							|  |  |  |             { | 
					
						
							|  |  |  |                 type: 'slider', | 
					
						
							|  |  |  |                 realtime: true, | 
					
						
							|  |  |  |                 startValue: 0, | 
					
						
							|  |  |  |                 endValue: 10000, | 
					
						
							|  |  |  |                 width: '8', | 
					
						
							|  |  |  |                 yAxisIndex: [0], // 控制y轴滚动 | 
					
						
							|  |  |  |                 fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色 | 
					
						
							|  |  |  |                 borderColor: "rgba(17, 100, 210, 0.12)", | 
					
						
							|  |  |  |                 backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色 | 
					
						
							|  |  |  |                 handleSize: 0, // 两边手柄尺寸 | 
					
						
							|  |  |  |                 showDataShadow: false,//是否显示数据阴影 默认auto | 
					
						
							|  |  |  |                 showDetail: false, // 拖拽时是否展示滚动条两侧的文字 | 
					
						
							|  |  |  |                 top: 'middle', | 
					
						
							|  |  |  |                 // 滚动条显示位置 | 
					
						
							|  |  |  |                 height: "80%", | 
					
						
							|  |  |  |                 // 距离右边 | 
					
						
							|  |  |  |                 right: 3, | 
					
						
							|  |  |  |             }] | 
					
						
							|  |  |  |         myChart.setOption(option); | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-07-29 18:06:25 +08:00
										 |  |  | </script> |