You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
307 lines
10 KiB
307 lines
10 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>营区一体化综合管理平台</title>
|
|
<link type="text/css" href="css/zhgl-style.css" rel="stylesheet" />
|
|
<script src="js/jquery-2.1.3.min.js"></script>
|
|
<script src="js/echarts.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="zh-header">
|
|
<div class="zh-logo fl"><img src="img/zh-logo.png"></div>
|
|
<div class="zh-menu fl">
|
|
<ul>
|
|
<li class="current"><a href="">首页</a></li>
|
|
<li><a href="">人员管理</a></li>
|
|
<li><a href="">车辆管理</a></li>
|
|
<li><a href="">统计分析</a></li>
|
|
<li><a href="">系统设置</a></li>
|
|
<li><a href="">用户信息</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="zh-time fl"><span id="theClock"></span></div>
|
|
<script type="text/javascript">
|
|
var days = new Array("日", "一", "二", "三", "四", "五", "六");
|
|
showDT();
|
|
|
|
function showDT() {
|
|
var currentDT = new Date();
|
|
var y, m, date, day, hs, ms, ss, theDateStr;
|
|
y = currentDT.getFullYear(); //四位整数表示的年份
|
|
m = currentDT.getMonth(); //月
|
|
date = currentDT.getDate(); //日
|
|
day = currentDT.getDay(); //星期
|
|
hs = currentDT.getHours(); //时
|
|
ms = currentDT.getMinutes(); //分
|
|
ss = currentDT.getSeconds(); //秒
|
|
theDateStr = y + "-" + m + "-" + date + " " + " 星期" + days[day] + " " + hs + ":" + ms + ":" + ss;
|
|
document.getElementById("theClock").innerHTML = theDateStr;
|
|
// setTimeout 在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次
|
|
window.setTimeout(showDT, 1000);
|
|
}
|
|
</script>
|
|
<div class="zh-user fl">阿克苏支队长</div>
|
|
<div class="zh-tuichu fr"><a href="#"><img src="img/use-icon2.png"></a></div>
|
|
</div>
|
|
<div class="zh-content" style="padding-top: 110px !important;">
|
|
<div class="zh-row1 clearfix" style="height: calc(50% - 30px);">
|
|
<!-- 个人信息 -->
|
|
<div class="zh-ryxx fl" style="width: calc(33.06% - 15px);">
|
|
<div class="zh-tit" style="background: url(img/geren-icon1.png) left center no-repeat;">个人信息</div>
|
|
<div class="zh-con" style="padding-top: 20px;">
|
|
<div class="geren-img fl"><img src="img/geren-tu.png"></div>
|
|
<div class="geren-con">
|
|
<p><span>账号：</span>20200000001</p>
|
|
<p><span>姓名：</span>姚正登</p>
|
|
<p><span>身份证号：</span>370000000000000000</p>
|
|
<p><span>合同签订日期：</span>2016-3-16</p>
|
|
<p><span>合同期限：</span>6年</p>
|
|
<p><span>合同到期日期：</span>2022-3-15</p>
|
|
<p><span>所属消防机关：</span>阿克苏支队</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 积分考试 -->
|
|
<div class="zh-ryxx fl" style="width: calc(26.88% - 30px); margin: 0 15px;">
|
|
<div class="zh-tit" style="background: url(img/geren-icon2.png) left center no-repeat;">积分考试</div>
|
|
<div class="zh-con" style="padding: 20px 0;">
|
|
<div class="geren-jfks">
|
|
<div class="jfks1">
|
|
<div class="jfks1a">
|
|
<h1>299</h1>
|
|
<h4>总积分</h4>
|
|
</div>
|
|
</div>
|
|
<div class="jfks2">比上月增长：<span>6</span>分</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 通知公告 -->
|
|
<div class="zh-ryxx fr" style="width: calc(40.06% - 15px); margin-left: 15px; margin-right: 0;">
|
|
<div class="zh-tit" style="background: url(img/geren-icon3.png) left center no-repeat;">通知公告</div>
|
|
<div class="zh-con" style="padding: 20px;">
|
|
<div class="geren-tzgg">
|
|
<ul>
|
|
<li><span>2019-05-23</span><a href="">社会消防技术服务机构资质申报网上 及窗口提交资料基本要求</a></li>
|
|
<li><span>2019-05-23</span><a href="">社会消防技术服务机构资质申报网上 及窗口提交资料基本要求</a></li>
|
|
<li><span>2019-05-23</span><a href="">社会消防技术服务机构资质申报网上 及窗口提交资料基本要求</a></li>
|
|
<li><span>2019-05-23</span><a href="">社会消防技术服务机构资质申报网上 及窗口提交资料基本要求</a></li>
|
|
<li><span>2019-05-23</span><a href="">社会消防技术服务机构资质申报网上 及窗口提交资料基本要求</a></li>
|
|
<li><span>2019-05-23</span><a href="">社会消防技术服务机构资质申报网上 及窗口提交资料基本要求</a></li>
|
|
<li><span>2019-05-23</span><a href="">社会消防技术服务机构资质申报网上 及窗口提交资料基本要求</a></li>
|
|
<li><span>2019-05-23</span><a href="">社会消防技术服务机构资质申报网上 及窗口提交资料基本要求</a></li>
|
|
<li><span>2019-05-23</span><a href="">社会消防技术服务机构资质申报网上 及窗口提交资料基本要求</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="zh-row1" style="height: calc(50% - 30px);">
|
|
<!-- 我的待办 -->
|
|
<div class="zh-ryxx fl" style="width: calc(33.06% - 15px);">
|
|
<div class="zh-tit" style="background: url(img/geren-icon4.png) left center no-repeat;">我的待办</div>
|
|
<div class="zh-con">
|
|
<div class="geren-wddb">
|
|
<ul>
|
|
<li>
|
|
<div class="wddb1">请假审批</div>
|
|
<div class="wddb2">您有一条请假记录需要审批</div>
|
|
</li>
|
|
<li>
|
|
<div class="wddb1">请假审批</div>
|
|
<div class="wddb2">您有一条请假记录需要审批</div>
|
|
</li>
|
|
<li>
|
|
<div class="wddb1">请假审批</div>
|
|
<div class="wddb2">您有一条请假记录需要审批</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 请假记录 -->
|
|
<div class="zh-ryxx fl" style="width: calc(33.87% - 30px); margin-left: 15px;">
|
|
<div class="zh-tit" style="background: url(img/geren-icon5.png) left center no-repeat;">请假记录</div>
|
|
<div class="zh-con">
|
|
<div class="rcgl-con2a" style="height: calc(100% - 20px);">
|
|
<table cellpadding="0" cellspacing="0" border="0">
|
|
<tr class="tou">
|
|
<th>请假类型</th>
|
|
<th>开始时间</th>
|
|
<th>结束时间</th>
|
|
<th>请假时长</th>
|
|
</tr>
|
|
<tr>
|
|
<td>事假</td>
|
|
<td>2020-3-15 15:00:00</td>
|
|
<td>2020-3-16 15:00:00</td>
|
|
<td>8小时</td>
|
|
</tr>
|
|
<tr>
|
|
<td>辖区内请假</td>
|
|
<td>2020-3-15 15:00:00</td>
|
|
<td>2020-3-16 15:00:00</td>
|
|
<td>8小时</td>
|
|
</tr>
|
|
<tr>
|
|
<td>公差请假</td>
|
|
<td>2020-3-15 15:00:00</td>
|
|
<td>2020-3-16 15:00:00</td>
|
|
<td>8小时</td>
|
|
</tr>
|
|
<tr>
|
|
<td>病假</td>
|
|
<td>2020-3-15 15:00:00</td>
|
|
<td>2020-3-16 15:00:00</td>
|
|
<td>8小时</td>
|
|
</tr>
|
|
<tr>
|
|
<td>事假</td>
|
|
<td>2020-3-15 15:00:00</td>
|
|
<td>2020-3-16 15:00:00</td>
|
|
<td>8小时</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- 我的考勤 -->
|
|
<div class="zh-ryxx fl" style="width: calc(33.06% - 15px);margin-left: 15px; margin-right: 0;">
|
|
<div class="zh-tit" style="background: url(img/geren-icon6.png) left center no-repeat;">我的考勤</div>
|
|
<div class="zh-con">
|
|
<div class="wdkq1 fl">
|
|
<div class="wdkq1a">
|
|
<h2>30</h2>
|
|
<h4>本月应出勤天数</h4>
|
|
</div>
|
|
<div class="wdkq1a">
|
|
<h2>28</h2>
|
|
<h4>本月实际出勤天数</h4>
|
|
</div>
|
|
</div>
|
|
<div id="geren-wdkq" style="width: 75%; height: 100%; float: left;"></div>
|
|
<script type="text/javascript">
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart = echarts.init(document.getElementById('geren-wdkq'));
|
|
var m2R2Data = [{
|
|
value: 28,
|
|
legendname: '出勤',
|
|
name: "出勤 28",
|
|
itemStyle: {
|
|
color: "#53a4ff"
|
|
}
|
|
},
|
|
{
|
|
value: 1,
|
|
legendname: '事假',
|
|
name: "事假 1",
|
|
itemStyle: {
|
|
color: "#ff9c0f"
|
|
}
|
|
},
|
|
{
|
|
value: 1,
|
|
legendname: '病假',
|
|
name: "病假 1",
|
|
itemStyle: {
|
|
color: "#ffcb20"
|
|
}
|
|
},
|
|
{
|
|
value: 1,
|
|
legendname: '迟到',
|
|
name: "迟到 1",
|
|
itemStyle: {
|
|
color: "#1cda7c"
|
|
}
|
|
},
|
|
{
|
|
value: 1,
|
|
legendname: '早退',
|
|
name: "早退 1",
|
|
itemStyle: {
|
|
color: "#f76767"
|
|
}
|
|
},
|
|
{
|
|
value: 1,
|
|
legendname: '未打卡',
|
|
name: "未打卡 1",
|
|
itemStyle: {
|
|
color: "#c336ff"
|
|
}
|
|
},
|
|
];
|
|
|
|
option = {
|
|
title: [{
|
|
text: '出勤率\n80%',
|
|
textStyle: {
|
|
fontSize: 20,
|
|
color: "#2e7fda"
|
|
},
|
|
textAlign: "center",
|
|
x: '37.5%',
|
|
y: '44%',
|
|
}],
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function(parms) {
|
|
var str = parms.seriesName + "</br>" +
|
|
parms.marker + "" + parms.data.legendname + "</br>" +
|
|
"数量：" + parms.data.value + "</br>" +
|
|
"占比：" + parms.percent + "%";
|
|
return str;
|
|
}
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: '80%',
|
|
align: 'left',
|
|
top: 'middle',
|
|
textStyle: {
|
|
color: '#8C8C8C'
|
|
},
|
|
height: 250
|
|
},
|
|
series: [{
|
|
name: '我的考勤',
|
|
type: 'pie',
|
|
center: ['38%', '50%'],
|
|
radius: ['50%', '75%'],
|
|
clockwise: false, //饼图的扇区是否是顺时针排布
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
position: 'outter',
|
|
formatter: function(parms) {
|
|
return parms.data.legendname
|
|
}
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
normal: {
|
|
length: 5,
|
|
length2: 3,
|
|
smooth: false,
|
|
}
|
|
},
|
|
data: m2R2Data
|
|
}]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|