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.
151 lines
6.6 KiB
151 lines
6.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
|
|
<meta http-equiv="Page-Exit" contect="revealTrans(duration=10.0,transtion=12)">
|
|
<meta name="apple-touch-fullscreen" content="yes"/>
|
|
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
|
|
<title>業績排行榜</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body, html {
|
|
width: 100%;
|
|
height: 11.36rem;
|
|
/*background: url("image/bg.jpg") no-repeat;*/
|
|
background: linear-gradient(to top left,#eb5c20,#eb5c20, #eb5c20);
|
|
}
|
|
|
|
div#rect {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden
|
|
}
|
|
|
|
a {
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
.cicle{
|
|
width: 1rem!important;
|
|
height: 1rem!important;
|
|
background-color:yellow!important;
|
|
border-radius: 50%!important;
|
|
-moz-border-radius: 50%!important;
|
|
-webkit-border-radius: 50%!important;
|
|
z-index: 9999!important;
|
|
color: rgb(0,0,0)!important;
|
|
}
|
|
.cicle0{
|
|
width: 0.5rem!important;
|
|
height: 0.5rem!important;
|
|
background: url("image/Trophy Gold.png") no-repeat;
|
|
border-radius: 50%!important;
|
|
-moz-border-radius: 50%!important;
|
|
-webkit-border-radius: 50%!important;
|
|
z-index: 9999!important;
|
|
color: rgb(0,0,0)!important;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="css/jquery.lineProgressbar.css">
|
|
</head>
|
|
<body>
|
|
<div class="head" ><img src="image/bt.png" style="width:6.4rem;height: 2.07rem"></div>
|
|
|
|
<div clas="mainphb" style='width: 6.4rem;height:7rem;margin-top: 0.2rem;color: #feffff;font-weight: bold; '>
|
|
<div style="font-size: 0.36rem; height:0.8rem;text-align: center">全國改造業績臺數排行榜</div>
|
|
<div style="font-size: 0.24rem;display: flex;justify-content: center;align-content: center;margin-top: 0.5rem ">
|
|
<div style="float: left;width: 15%"></div>
|
|
<div style="float: left; width: 20%;text-align:left;">姓名</div>
|
|
<div style="float: left;width: 30%;text-align: left;">目標/達成</div>
|
|
<div style="float: left;width: 30%;text-align: center;">當月</div>
|
|
<div style="float: left;width: 30%;text-align: left;">累計達成率</div>
|
|
</div>
|
|
<div style="font-size: 0.26rem;overflow: hidden;display: flex; justify-content: center;height: auto;flex-wrap: wrap;"
|
|
id="taishucontainer">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript" src="js/jquery-2.1.1.min.js?t=2"></script>
|
|
<script src="js/jquery.lineProgressbar.js"></script>
|
|
<script type="text/javascript" src="js/rem.js"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
var urll = location.href;
|
|
var wurl = urll.split('phb')[0];
|
|
var URL = wurl + 'phb/gphb.php';
|
|
console.log(URL);
|
|
$.ajax({
|
|
type: "GET",
|
|
url: URL,
|
|
success: function (msg) {
|
|
var htmlds = '';
|
|
var htmltai = '';
|
|
var xingming = '';
|
|
var leijicount = '';
|
|
var dangyuecount = '';
|
|
var leijidachenglv = '';
|
|
var result = eval("(" + msg + ")");
|
|
if (result.length > 0) {
|
|
for (i = 0; i < result.length; i++) {
|
|
var xingming = result[i]['name'];
|
|
var mubiaocount = result[i]['mubiaocount'];
|
|
var leijicount = result[i]['leijicount'];
|
|
var dangyuecount = result[i]['dangyuecount'];
|
|
var leijidachenglv = result[i]['leijidachenglv'];
|
|
var mubiaolv = result[i]['mubiaolv'];
|
|
var leijilv = result[i]['leijilv'];
|
|
|
|
var id = i + 1;
|
|
htmltai +=
|
|
'<div style="width: 10%;height: 0.8rem;text-align: center;line-height: 0.8rem;">' + id + '</div>'
|
|
+'<div style="float: left;width: 20%;height: 0.8rem;display: flex;justify-content: start;align-items: center">' + xingming + '</div>'
|
|
+'<div style="width: 15%;height: 0.8rem;">'
|
|
+'<div style="width: 100%;height: 0.15rem;margin-top: 0.27rem"><div id="progress' + i + '"></div></div>'
|
|
+'<div style="width: 100%;height: 0.15rem;background-color:#eb5c20 "><div id="progressbar'+i+'" ></div></div></div>'
|
|
+'<div style="width: 5%;height: 0.8rem;font-size: 0.2rem">'
|
|
+'<div style="width: 100%;height: 0.15rem;margin-top: 0.2rem">'+ mubiaocount +'</div>'
|
|
+'<div style="width: 100%;height: 0.15rem;margin-top: 0.1rem">'+leijicount+'</div></div>'
|
|
|
|
+'<div style="float: left;width: 25%;height: 0.8rem;text-align: center;line-height: 0.8rem ">' + dangyuecount + '</div>'
|
|
+'<div style="float: left;width: 22%;height: 0.8rem;line-height: 0.8rem;display: flex;justify-content: start;align-items: center">' + leijidachenglv + '%<div class="cicle' + i + '"></div></div>'
|
|
}
|
|
$('#taishucontainer').append(htmltai);
|
|
for (i = 0; i <result.length ;i++){
|
|
var mubiaolv = result[i]['mubiaolv'];
|
|
var leijidachenglv = result[i]['leijidachenglv'];
|
|
$('#progress'+i).LineProgressbar({
|
|
width:'80%',
|
|
percentage: mubiaolv,
|
|
ShowProgressCount:false,
|
|
fillBackgroundColor: '#DED5D5'
|
|
});
|
|
$('#progressbar'+i).LineProgressbar({
|
|
width:'80%',
|
|
percentage: leijidachenglv,
|
|
ShowProgressCount:false,
|
|
backgroundColor: '#eb5c20'
|
|
});
|
|
}
|
|
|
|
}else{
|
|
htmlds = '<div><div style="text-align:center;line-height: 80px ">暂无数据</div></div>';
|
|
$('#taishucontainer').append(htmlds);
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
/**分割线**/
|
|
|
|
|
|
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|