xiaju
/
SGGL_JT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
夏菊 2025-04-18 17:49:02 +08:00
parent a740fba518
commit 93cbc7f6cb
5 changed files with 247 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
SUBQHSE/FineUIPro.Web/common/main.aspx
View File

@ -11,7 +11,7 @@
<link rel="stylesheet" href="../res/homecss/index.css"/>
<style type="text/css">
body,html,#app{
body,html{
height: 12.5rem;
}
[v-cloak] {
@ -22,7 +22,7 @@
<body class="bg1">
<div id="app">
<div class="container" style="padding-top: .25rem" v-cloak>
<div class="container" v-cloak>
<div class="side">
<!-- 组织机构人员 -->
<div class="block" style="height: 3.35rem;">

2
SUBQHSE/FineUIPro.Web/common/mainProject.aspx
View File

@ -19,7 +19,7 @@
<body class="bg1">
<div id="app">
<div class="container" style=" padding-top: .25rem" v-cloak>
<div class="container" v-cloak>
<div class="side">
<!-- 组织机构人员 -->
<div class="block" style=" height: 2.5375rem;">

305
SUBQHSE/FineUIPro.Web/index.aspx
View File

@ -8,17 +8,18 @@
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no" />
<title>QHSE管理数字化平台</title>
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
<%--
<link rel="stylesheet" href="~/res/indexv1/iconfont/iconfont.css" />
<link rel="stylesheet" href="~/res/indexv1/css/index1.css" />
<link type="text/css" rel="stylesheet" href="~/res/css/default.css" />
<link href="res/index/css/home.css" rel="stylesheet" />--%>
<script src="./res/lib/flex.js"></script>
<link href="~/res/indexv2/assets/iconfont/iconfont.css" rel="stylesheet" />
<link href="~/res/indexv2/assets/css/video-7.15.0.min.css" rel="stylesheet" />
<link href="~/res/indexv2/assets/css/index7.css" rel="stylesheet" />
<link href="~/res/homecss/common.css" rel="stylesheet" />
<link href="~/res/homecss/head.css" rel="stylesheet" />
<style type="text/css">
[v-cloak] {
display: none;
}
html {
min-height: auto;
}
@ -65,6 +66,7 @@
background-color: transparent !important;
padding: 0 !important;
line-height: 1;
color: #ffffff;
}
.activeClick {
@ -78,20 +80,21 @@
.bgbtn a:visited, .bgbtn .f-state-focus {
background-image: none;
background-color: transparent;
color: #ffffff;
}
.f-state-default, .f-widget-content .f-state-default, .f-widget-header .f-state-default {
background-image: none;
background-color: transparent;
color: #ffffff;
}
.header .layui-nav {
padding: 0;
margin: 0;
}
.bgbtntop.f-btn.f-state-default .f-icon, .bgbtntop.f-btn.f-state-hover .f-icon, .bgbtntop.f-btn.f-state-focus .f-icon, .bgbtntop.f-btn.f-state-active .f-icon {
color: #37a6ff;
color: #ffffff;
}
.activeClick .f-icon {
@ -107,7 +110,7 @@
}
.f-panel, .f-widget-header, .f-tree-headerstyle .f-panel-body {
background-color: rgb(14,17,60);
background-color: #001B35;
/* color: #fff;*/
border: none !important;
font-size: 14px !important;
@ -138,14 +141,20 @@
background: #247ba8;
}
.bgbtn2 {
position: absolute;
width: 100%;
.bgbtn2 {
padding: 0;
height: 100%;
left: 0;
top: 0;
line-height: 1;
font-size: 14px;
border: none;
}
.bgbtn3{
position:absolute;
height:100%;
width: 100%;
left: 0;
top:0;
}
.f-tabstrip-align-left .f-tab-header.f-first {
/*background-color: #dfe4f1;
color: #333;*/
@ -171,6 +180,7 @@
#Panel1_leftPanel_treeMenu .f-state-hover {
background: #99e7ff !important;
}
.sd-header-absolunt-top {
top: 10% !important;
font-size: 0.14rem !important;
@ -190,102 +200,92 @@
<f:ContentPanel ID="topPanel" CssClass="topregion" RegionPosition="Top" ShowBorder="false" ShowHeader="false" EnableCollapse="true" runat="server">
<%--头部 开始--%>
<f:ContentPanel ID="ContentPanel1" CssClass="bodyregion" ShowBorder="false" ShowHeader="false" runat="server">
<div class="sd-index1-body">
<div class="sd-header">
<div class="sd-header-top">
<div class="sd-header-top-left">
<div class="sd-location-name">北京</div>
<div class="sd-location-weather">
<img src="res/indexv1/image/index1/weather/duoyun.png" alt="" /><span runat="server" id="divWeather">多云</span>
</div>
<div class="sd-location-time"><span id="spDate" runat="server"></span></div>
</div>
</div>
<div>
<div class="sd-header-title sd-header-absolunt-top js-hiddenTab-item">
<div id="divTitle" runat="server"></div>
<f:Button runat="server" CssClass="bgbtn2" EnablePostBack="true" OnClick="btnHome_Click"
EnableDefaultState="true" EnableDefaultCorner="false" ID="btnHome" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
<div class="sd-header-title sd-header-absolunt-bottom">
<ul>
<li><a href="javascript:void(0);" onclick="onToolSignOutClick()"><span><i class="iconfont icon-stop"></i></span>退出</a></li>
<li class="js-showTab-item top-li-item"><a href="#"><span><i class="iconfont icon-setting"></i></span>设置</a><f:Button runat="server" CssClass="bgbtn2" OnClick="btnSysSet_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" ID="btnSysSet" OnClientClick="parent.removeActiveTab();">
</f:Button>
</li>
<li class="full"><span><i class="iconfont icon-stop"></i></span>全屏</li>
<%-- <li class="js-showTab-item top-li-item"><a href="#"><span><i class="iconfont icon-setting"></i></span>门户</a><f:Button runat="server" IconUrl="~/res/image/home.png" CssClass="bgbtn2" OnClick="btnGateway_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" ID="btnGateway">
</f:Button>
</li>--%>
<li class="js-showTab-item top-li-item">
<a href="javascript:void(0);">
<span><i class="iconfont icon-user"></i></span>
<span id="userName" runat="server"></span>
<span id="notification-badge" class="notification-badge" style="display: none;">0</span>
</a>
<f:Button runat="server" CssClass="bgbtn2" OnClick="btnPersonal_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" ID="btnPersonal" OnClientClick="parent.removeActiveTab();">
</f:Button>
</li>
<li class="top-li-item">
<f:Button runat="server" CssClass="bgbtntop" Text="刷新" ToolTip="刷新菜单" IconFont="Retweet" OnClick="btnRetweet_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" ID="btnRetweet" OnClientClick="parent.removeActiveTab();">
</f:Button>
</li>
</ul>
</div>
</div>
<div class="sd-header-bottom" runat="server" visible="true">
<ul class="sd-header-bottom-menu">
<li>
<f:Button runat="server" CssClass="bgbtn" Text="人员管理" ID="btnPerson" OnClick="btnPerson_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</li>
<li>
<f:Button runat="server" CssClass="bgbtn" Text="安全管理" ID="btnHSSE" OnClick="btnHSSE_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</li>
<li runat="server" id="liThreeYearAction">
<f:Button runat="server" CssClass="bgbtn" Text="三年行动" ID="btnThreeYearAction" OnClick="btnThreeYearAction_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</li>
<li>
<f:Button runat="server" CssClass="bgbtn" Text="资源库" ID="btnDigData" OnClick="btnDigData_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</li>
</ul>
<ul class="sd-header-bottom-menu">
<li>
<f:Button runat="server" CssClass="bgbtn" Text="质量管理" ID="btnCQMS" OnClick="btnCQMS_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</li>
<li>
<f:Button runat="server" CssClass="bgbtn" Text="设备管理" ID="btnDevice" OnClick="btnDevice_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</li>
<li>
<f:Button runat="server" CssClass="bgbtn" Text="视频监控" OnClientClick="openVideo();"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" ID="btnVideo">
</f:Button>
</li>
<li>
<f:Button runat="server" CssClass="bgbtn" Text="数据管理" ID="btnServer" OnClick="btnServer_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</li>
</ul>
</div>
</div>
</div>
<div id="app" class="container" style="background-color:#001B35;">
<header v-cloak>
<div class="nav-box" style="padding-left: 0.3rem;">
<div class="logo-img"></div>
<div class="refresh-img" @click="onRefresh"></div>
<div class="navs" style="justify-content: flex-end;">
<div :class="['nav', 'nav-l', navIdx==1?'nav-l-active':'']" @click="onSwitchMenu(1)">
<f:Button runat="server" CssClass="bgbtn" Text="人员管理" ID="btnPerson" OnClick="btnPerson_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
<div :class="['nav', 'nav-l', navIdx==2?'nav-l-active':'']" @click="onSwitchMenu(2)">
<f:Button runat="server" CssClass="bgbtn" Text="安全管理" ID="btnHSSE" OnClick="btnHSSE_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
<div :class="['nav', 'nav-l', navIdx==3?'nav-l-active':'']" @click="onSwitchMenu(3)">
<f:Button runat="server" CssClass="bgbtn" Text="三年行动" ID="btnThreeYearAction" OnClick="btnThreeYearAction_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
<div :class="['nav', 'nav-l', navIdx==4?'nav-l-active':'']" @click="onSwitchMenu(4)">
<f:Button runat="server" CssClass="bgbtn" Text="资源库" ID="btnDigData" OnClick="btnDigData_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
</div>
</div>
<div class="logo-tit" style="position: relative;">建投公司智慧工地管理信息系统
<f:Button runat="server" CssClass="bgbtn3" EnablePostBack="true" OnClick="btnHome_Click"
EnableDefaultState="true" EnableDefaultCorner="false" ID="btnHome" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
<div class="nav-box" style="padding-right: 0.3rem;">
<div class="navs" style="justify-content: flex-start;">
<div :class="['nav', 'nav-r', navIdx==5?'nav-r-active':'']" @click="onSwitchMenu(5)">
<f:Button runat="server" CssClass="bgbtn" Text="质量管理" ID="btnCQMS" OnClick="btnCQMS_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
<div :class="['nav', 'nav-r', navIdx==6?'nav-r-active':'']" @click="onSwitchMenu(6)">
<f:Button runat="server" CssClass="bgbtn" Text="设备管理" ID="btnDevice" OnClick="btnDevice_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
<div :class="['nav', 'nav-r', navIdx==7?'nav-r-active':'']" @click="onSwitchMenu(7)">
<f:Button runat="server" CssClass="bgbtn" Text="视频监控" OnClientClick="openVideo();"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" ID="btnVideo">
</f:Button>
</div>
<div :class="['nav', 'nav-r', navIdx==8?'nav-r-active':'']" @click="onSwitchMenu(8)">
<f:Button runat="server" CssClass="bgbtn" Text="数据管理" ID="btnServer" OnClick="btnServer_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
</div>
<div class="timer">
<p><span>{{timer.city}}</span><span>{{timer.time}}</span></p>
<p><span>{{timer.date}}</span><span>{{timer.week}}</span></p>
</div>
</div>
<div class="set">
<div class="iconfont icon-nav07">
<a href="javascript:void(0);" style="color:#ffffff;" onclick="onToolSignOutClick()">退出</a>
</div>
<div class="iconfont icon-nav06">
<f:Button runat="server" CssClass="bgbtn2" OnClick="btnSysSet_Click" Text="设置"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" ID="btnSysSet" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
<div class="iconfont icon-nav05" >
<f:Button runat="server" CssClass="bgbtn2" OnClick="btnPersonal_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" ID="userName" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
<div class="iconfont icon-nav08" @click="full">全屏</div>
<div style="opacity:0;">
<f:Button runat="server" CssClass="bgbtntop" Text="刷新" ToolTip="刷新菜单" IconFont="Retweet" OnClick="btnRetweet_Click"
EnablePostBack="true" EnableDefaultState="true" EnableDefaultCorner="false" ID="btnRetweet" OnClientClick="parent.removeActiveTab();">
</f:Button>
</div>
</div>
</header>
</div>
</f:ContentPanel>
<%--头部 结束--%>
</f:ContentPanel>
@ -402,6 +402,7 @@
<asp:XmlDataSource ID="XmlDataSource1" runat="server" EnableCaching="false"></asp:XmlDataSource>
</form>
<script type="text/javascript">
var mainTabStrip = '<%= mainTabStrip.ClientID %>'
var toolRefreshClientID = '<%= toolRefresh.ClientID %>';
var toolNewWindowClientID = '<%= toolNewWindow.ClientID %>';
var mainTabStripClientID = '<%= mainTabStrip.ClientID %>';
@ -413,7 +414,6 @@
var leftPanelToolGearClientID = '<%= leftPanelToolGear.ClientID %>';
var leftPanelToolCollapseClientID = '<%= leftPanelToolCollapse.ClientID %>';
var tab1ClientID = '<%= Tab1.ClientID %>';
// 展开左侧面板
function expandLeftPanel() {
var leftPanel = F(leftPanelClientID);
@ -774,5 +774,86 @@
}
});
</script>
<script src="./res/lib/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data() {
return {
navIdx: 0,
timer: {
date: "",
time: "",
city: "",
T: "15-26℃",
week: "",
},
};
},
mounted() {
setInterval(() => {
this.getLocation();
}, 1000);
document.addEventListener("fullscreenchange", function () {
if (document.fullscreenElement) {
console.log("进入全屏模式");
} else {
console.log("退出全屏模式");
}
});
},
methods: {
onSwitchMenu(idx) {
this.navIdx = idx;
},
onRefresh() {
alert("刷新");
},
full() {
if (document.fullscreenElement === null) {
console.log("当前不处于全屏模式");
this.openFullscreen()
} else {
console.log("当前处于全屏模式");
this.closeFullscreen()
}
},
getLocation() {
let date = new Date();
this.timer.time = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}:${date.getSeconds().toString().padStart(2, '0')}`;
this.timer.date = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
this.timer.city = "北京市";
this.timer.week = "星期" + "日一二三四五六".charAt(date.getDay());
},
openFullscreen() {
let element = document.querySelector(".wrap")
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen();
}
},
closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
}
}
});
</script>
</body>
</html>

30
SUBQHSE/FineUIPro.Web/index.aspx.cs
View File

@ -294,23 +294,23 @@ namespace FineUIPro.Web
{
this.btnRetweet.Hidden = false;
}
this.userName.InnerText= this.CurrUser.UserName;
this.spDate.InnerText = DateTime.Now.ToLongDateString().ToString()+" "+WeekDayService.CaculateWeekDayT(DateTime.Now);
this.userName.Text = this.CurrUser.UserName;
//this.spDate.InnerText = DateTime.Now.ToLongDateString().ToString()+" "+WeekDayService.CaculateWeekDayT(DateTime.Now);
var getW = WeatherService.GetWeather(null);
if (getW != null)
{
divWeather.InnerHtml = getW.WeatherRef + " " + getW.CurrTem+ "°C";
}
//var getW = WeatherService.GetWeather(null);
//if (getW != null)
//{
// divWeather.InnerHtml = getW.WeatherRef + " " + getW.CurrTem+ "°C";
//}
if (!string.IsNullOrEmpty(this.CurrUser.UnitId) && this.CurrUser.UnitId != CommonService.GetThisUnitId())
{
this.divTitle.InnerHtml = "QHSE管理数字化平台（分公司级）";
}
else
{
this.divTitle.InnerHtml = "QHSE管理数字化平台（公司级）";
}
//if (!string.IsNullOrEmpty(this.CurrUser.UnitId) && this.CurrUser.UnitId != CommonService.GetThisUnitId())
//{
// this.divTitle.InnerHtml = "QHSE管理数字化平台（分公司级）";
//}
//else
//{
// this.divTitle.InnerHtml = "QHSE管理数字化平台（公司级）";
//}
}
}

117
SUBQHSE/FineUIPro.Web/index.aspx.designer.cs generated
View File

@ -59,78 +59,6 @@ namespace FineUIPro.Web
/// </remarks>
protected global::FineUIPro.ContentPanel ContentPanel1;
/// <summary>
/// divWeather 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlGenericControl divWeather;
/// <summary>
/// spDate 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlGenericControl spDate;
/// <summary>
/// divTitle 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlGenericControl divTitle;
/// <summary>
/// btnHome 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.Button btnHome;
/// <summary>
/// btnSysSet 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.Button btnSysSet;
/// <summary>
/// userName 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlGenericControl userName;
/// <summary>
/// btnPersonal 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.Button btnPersonal;
/// <summary>
/// btnRetweet 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.Button btnRetweet;
/// <summary>
/// btnPerson 控件。
/// </summary>
@ -149,15 +77,6 @@ namespace FineUIPro.Web
/// </remarks>
protected global::FineUIPro.Button btnHSSE;
/// <summary>
/// liThreeYearAction 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::System.Web.UI.HtmlControls.HtmlGenericControl liThreeYearAction;
/// <summary>
/// btnThreeYearAction 控件。
/// </summary>
@ -176,6 +95,15 @@ namespace FineUIPro.Web
/// </remarks>
protected global::FineUIPro.Button btnDigData;
/// <summary>
/// btnHome 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.Button btnHome;
/// <summary>
/// btnCQMS 控件。
/// </summary>
@ -212,6 +140,33 @@ namespace FineUIPro.Web
/// </remarks>
protected global::FineUIPro.Button btnServer;
/// <summary>
/// btnSysSet 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.Button btnSysSet;
/// <summary>
/// userName 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.Button userName;
/// <summary>
/// btnRetweet 控件。
/// </summary>
/// <remarks>
/// 自动生成的字段。
/// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
/// </remarks>
protected global::FineUIPro.Button btnRetweet;
/// <summary>
/// leftPanel 控件。
/// </summary>