|
|
@@ -9,29 +9,36 @@
|
|
|
<link rel="icon" href="favicon.ico" type="image/x-icon">
|
|
|
|
|
|
<!-- Google Fonts -->
|
|
|
- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
|
|
|
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
|
|
|
+ <link href="css/cyllic.css" rel="stylesheet" type="text/css">
|
|
|
+ <link href="css/mateial.css" rel="stylesheet" type="text/css">
|
|
|
|
|
|
<!-- Bootstrap Core Css -->
|
|
|
- <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
|
|
+ <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
|
|
|
+ integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
|
|
|
|
|
<!-- Waves Effect Css -->
|
|
|
- <link href="plugins/node-waves/waves.css" rel="stylesheet" />
|
|
|
+ <link href="plugins/node-waves/waves.css" rel="stylesheet"/>
|
|
|
|
|
|
<!-- Animation Css -->
|
|
|
- <link href="plugins/animate-css/animate.css" rel="stylesheet" />
|
|
|
+ <link href="plugins/animate-css/animate.css" rel="stylesheet"/>
|
|
|
|
|
|
<!-- Morris Chart Css-->
|
|
|
- <link href="plugins/morrisjs/morris.css" rel="stylesheet" />
|
|
|
+ <link href="plugins/morrisjs/morris.css" rel="stylesheet"/>
|
|
|
|
|
|
<!-- Custom Css -->
|
|
|
<link href="css/style.css" rel="stylesheet">
|
|
|
|
|
|
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
|
|
|
- <link href="css/themes/all-themes.css" rel="stylesheet" />
|
|
|
+ <link href="css/themes/all-themes.css" rel="stylesheet"/>
|
|
|
+
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
- <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
|
|
- <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
|
|
+ <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
|
|
|
+ integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+ <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
|
|
|
+ integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
|
|
|
+ crossorigin="anonymous"></script>
|
|
|
+
|
|
|
<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<style>
|
|
|
@@ -41,66 +48,64 @@
|
|
|
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
|
|
|
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
|
|
|
<script>
|
|
|
- var timer=null;
|
|
|
- function displayClock(num){//num是传入的startClock中的动态值
|
|
|
- if(num<10){
|
|
|
- return "0"+num;
|
|
|
+ var timer = null;
|
|
|
+
|
|
|
+ function displayClock(num) {//num是传入的startClock中的动态值
|
|
|
+ if (num < 10) {
|
|
|
+ return "0" + num;
|
|
|
}
|
|
|
- else{
|
|
|
+ else {
|
|
|
return num;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
//停止计时
|
|
|
- function stopClock(){
|
|
|
+ function stopClock() {
|
|
|
clearTimeout(timer);
|
|
|
}
|
|
|
+
|
|
|
//开始计时
|
|
|
- function startClock(){
|
|
|
- var time =new Date();
|
|
|
- var hours=displayClock(time.getHours())+":";
|
|
|
- var minutes=displayClock(time.getMinutes())+":";
|
|
|
- var seconds=displayClock(time.getSeconds());
|
|
|
+ function startClock() {
|
|
|
+ var time = new Date();
|
|
|
+ var hours = displayClock(time.getHours()) + ":";
|
|
|
+ var minutes = displayClock(time.getMinutes()) + ":";
|
|
|
+ var seconds = displayClock(time.getSeconds());
|
|
|
//显示时间
|
|
|
- show.innerHTML=hours+minutes+seconds;//在id为show的块区域显示
|
|
|
- timer=setTimeout("startClock()",1000);//延时器
|
|
|
+ show.innerHTML = hours + minutes + seconds;//在id为show的块区域显示
|
|
|
+ timer = setTimeout("startClock()", 1000);//延时器
|
|
|
}
|
|
|
</script>
|
|
|
</head>
|
|
|
<style>
|
|
|
- #show{
|
|
|
+ #show1 {
|
|
|
font-size: 30px;
|
|
|
- color:#black;
|
|
|
- text-align:center;
|
|
|
+ color: black;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
</style>
|
|
|
-<body onload="startClock()" onunload="stopClock()">
|
|
|
- <nav class="navbar navbar-expand-lg navbar-light bg-light" style="margin-bottom: 1em">
|
|
|
-
|
|
|
-
|
|
|
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
|
+<body>
|
|
|
+<nav class="navbar navbar-expand-lg navbar-light bg-light" style-height="10%">
|
|
|
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
|
|
|
+ aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
</button>
|
|
|
|
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
|
<ul class="navbar-nav mr-auto">
|
|
|
- <li class="nav-item active">
|
|
|
- <div class="navbar-brand" href="#" style="font-size: 25px">生产线<span>1</span>号
|
|
|
-
|
|
|
+ <li class="nav-item active navbar-brand">
|
|
|
+ <h1 class="navbar-brand" href="#">生产线<span>1</span>号</h1>
|
|
|
</li>
|
|
|
- <li class="nav-item">
|
|
|
- <div class="" id="show"></div>
|
|
|
+ <li class="nav-item btn navbar-nav" id="show">
|
|
|
</li>
|
|
|
-
|
|
|
-
|
|
|
</ul>
|
|
|
<ul style="margin: 0">
|
|
|
- <button type="button" class="btn btn-danger btn-lg" style="width:100% ;background: red;font-size: 1em">
|
|
|
-
|
|
|
+ <button type="button" class="btn btn-danger btn-lg" style="width:100% ;background: red;font-size: 2em">
|
|
|
下班
|
|
|
</button>
|
|
|
</ul>
|
|
|
<div class="dropdown" style="font-size: 2em">
|
|
|
- <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="font-size: 0.5em">
|
|
|
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
|
|
|
+ aria-haspopup="true" aria-expanded="false" style="font-size: 0.5em">
|
|
|
<div class="row">
|
|
|
<div class="col-4">
|
|
|
拉长
|
|
|
@@ -119,280 +124,277 @@
|
|
|
|
|
|
</div>
|
|
|
</nav>
|
|
|
- <script>
|
|
|
- function addContent(name){
|
|
|
- console.log( $(name));
|
|
|
- $(name).tab('show');
|
|
|
- }
|
|
|
- </script>
|
|
|
- <section class="content" style="margin: 0 auto;padding-top: 2em;">
|
|
|
- <div class="container-fluid " style="padding-bottom: 0.2em">
|
|
|
- <div class="row text-center" >
|
|
|
- <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
|
|
- <div class="info-box bg-green hover-expand-effect" style="margin: 0;height: 70px">
|
|
|
- <div class="icon">
|
|
|
- <i class="material-icons">equalizer</i>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="row text-center" style="margin: 0 auto">
|
|
|
- <div class="text" style="font-size: 1.5em;padding-top: 0.2em">合格数:</div>
|
|
|
- <div class="number" style="font-size: 3em">555</div>
|
|
|
- </div>
|
|
|
+<section class="content" style="margin: 0 auto; margin-top: 4em">
|
|
|
+ <div class="container-fluid " style="margin-bottom: 1em">
|
|
|
+ <div class="row text-center">
|
|
|
+ <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
|
|
+ <div class="info-box bg-green hover-expand-effect" style="margin: 0;">
|
|
|
+ <div class="icon">
|
|
|
+ <i class="material-icons">equalizer</i>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="row text-center" style="margin: 0 auto">
|
|
|
+ <div class="text" style="font-size: 1.5em;padding-top: 0.2em">合格数:</div>
|
|
|
+ <div class="number" style="font-size: 3em">555</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
|
|
- <div class="info-box bg-red hover-expand-effect" style="margin: 0;height: 70px">
|
|
|
- <div class="icon">
|
|
|
- <i class="material-icons">equalizer</i>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="row text-center" style="margin: 0 auto">
|
|
|
- <div class="text" style="font-size: 1.5em;padding-top: 0.2em">不合格数:</div>
|
|
|
- <div class="number" style="font-size: 3em">5255</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
|
|
+ <div class="info-box bg-red hover-expand-effect" style="margin: 0;">
|
|
|
+ <div class="icon">
|
|
|
+ <i class="material-icons">equalizer</i>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="row text-center" style="margin: 0 auto">
|
|
|
+ <div class="text" style="font-size: 1.5em;padding-top: 0.2em">不合格数:</div>
|
|
|
+ <div class="number" style="font-size: 3em">5255</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
|
|
- <div class="info-box bg-lime hover-expand-effect" style="margin: 0;height: 70px">
|
|
|
- <div class="icon">
|
|
|
- <i class="material-icons">brightness_low</i>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="row text-center" style="margin: 0 auto">
|
|
|
- <div class="text" style="font-size: 1.5em;padding-top: 0.2em">合格率:</div>
|
|
|
- <div class="number" style="font-size: 3em">55%</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
|
|
+ <div class="info-box bg-lime hover-expand-effect" style="margin: 0;">
|
|
|
+ <div class="icon">
|
|
|
+ <i class="material-icons">brightness_low</i>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="row text-center" style="margin: 0 auto">
|
|
|
+ <div class="text" style="font-size: 1.5em;padding-top: 0.2em">合格率:</div>
|
|
|
+ <div class="number" style="font-size: 3em">55%</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
|
|
- <div class="info-box bg-cyan hover-zoom-effect" style="margin: 0;height: 70px ">
|
|
|
- <div class="icon">
|
|
|
- <i class="material-icons">access_alarm</i>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <div class="row text-center" style="margin: 0 auto">
|
|
|
- <div class="text" style="font-size: 1.5em;padding-top: 0.2em">堆积数:</div>
|
|
|
- <div class="number" style="font-size: 3em">235</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
|
|
|
+ <div class="info-box bg-cyan hover-zoom-effect" style="margin: 0; ">
|
|
|
+ <div class="icon">
|
|
|
+ <i class="material-icons">access_alarm</i>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="row text-center" style="margin: 0 auto">
|
|
|
+ <div class="text" style="font-size: 1.5em;padding-top: 0.2em">堆积数:</div>
|
|
|
+ <div class="number" style="font-size: 3em">235</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- <div class="container-fluid" style="margin-top: 0.5em">
|
|
|
- <div id="container10" style="min-width:400px;height:400px"></div>
|
|
|
- <div class="card">
|
|
|
- <div>
|
|
|
- <div class="" style="">
|
|
|
- <div class="table-responsive" style="width: 30%;float: left" >
|
|
|
- <table class="table table-hover dashboard-task-infos">
|
|
|
- <thead >
|
|
|
- <tr style="border-bottom:3px solid black;">
|
|
|
- <th>姓名(工号)</th>
|
|
|
- <th>合格数</th>
|
|
|
- <th>不合格数</th>
|
|
|
-
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody id="rank-one">
|
|
|
- <tr>
|
|
|
- <td>1</td>
|
|
|
- <td>Task A</td>
|
|
|
- <td><span class="label bg-green">Doing</span></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>2</td>
|
|
|
- <td>Task B</td>
|
|
|
- <td><span class="label bg-blue">To Do</span></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>3</td>
|
|
|
- <td>Task C</td>
|
|
|
- <td><span class="label bg-light-blue">On Hold</span></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>4</td>
|
|
|
- <td>Task D</td>
|
|
|
- <td><span class="label bg-orange">Wait Approvel</span></td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- <div class="table-responsive" style="width: 30%;float: left;padding-left: 5em" >
|
|
|
- <table class="table table-hover dashboard-task-infos">
|
|
|
- <thead>
|
|
|
- <tr style="border-bottom:3px solid black;">
|
|
|
- <th>姓名(工号)</th>
|
|
|
- <th>合格数</th>
|
|
|
- <th>不合格数</th>
|
|
|
-
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody id="rank-two">
|
|
|
- <tr>
|
|
|
- <td>1</td>
|
|
|
- <td>Task A</td>
|
|
|
- <td><span class="label bg-green">Doing</span></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>2</td>
|
|
|
- <td>Task B</td>
|
|
|
- <td><span class="label bg-blue">To Do</span></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>3</td>
|
|
|
- <td>Task C</td>
|
|
|
- <td><span class="label bg-light-blue">On Hold</span></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>4</td>
|
|
|
- <td>Task D</td>
|
|
|
- <td><span class="label bg-orange">Wait Approvel</span></td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- <div class="table-responsive" style="width: 30%;float: right" >
|
|
|
- <table class="table table-hover dashboard-task-infos">
|
|
|
- <thead>
|
|
|
- <tr style="border-bottom:3px solid black;">
|
|
|
- <th>姓名(工号)</th>
|
|
|
- <th>合格数</th>
|
|
|
- <th>不合格数</th>
|
|
|
-
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody id="rank-three">
|
|
|
- <tr>
|
|
|
- <td>1</td>
|
|
|
- <td>Task A</td>
|
|
|
- <td><span class="label bg-green">Doing</span></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>2</td>
|
|
|
- <td>Task B</td>
|
|
|
- <td><span class="label bg-blue">To Do</span></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>3</td>
|
|
|
- <td>Task C</td>
|
|
|
- <td><span class="label bg-light-blue">On Hold</span></td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>4</td>
|
|
|
- <td>Task D</td>
|
|
|
- <td><span class="label bg-orange">Wait Approvel</span></td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="container-fluid" style="margin-top: 0.5em;height: 100%;padding-top: 1em">
|
|
|
+ <div id="container10" style="height: 60%"></div>
|
|
|
+ <div class="card" style="height: 40%;margin: 0 auto;">
|
|
|
+ <div>
|
|
|
+ <div class="" style="">
|
|
|
+ <div class="table-responsive" style="width: 30%;float: left">
|
|
|
+ <table class="table table-hover dashboard-task-infos">
|
|
|
+ <thead>
|
|
|
+ <tr style="border-bottom:3px solid black;">
|
|
|
+ <th>姓名(工号)</th>
|
|
|
+ <th>合格数</th>
|
|
|
+ <th>不合格数</th>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="rank-one">
|
|
|
+ <tr>
|
|
|
+ <td>1</td>
|
|
|
+ <td>Task A</td>
|
|
|
+ <td><span class="label bg-green">Doing</span></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>2</td>
|
|
|
+ <td>Task B</td>
|
|
|
+ <td><span class="label bg-blue">To Do</span></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>3</td>
|
|
|
+ <td>Task C</td>
|
|
|
+ <td><span class="label bg-light-blue">On Hold</span></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>4</td>
|
|
|
+ <td>Task D</td>
|
|
|
+ <td><span class="label bg-orange">Wait Approvel</span></td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="table-responsive" style="width: 30%;float: left;padding-left: 5em">
|
|
|
+ <table class="table table-hover dashboard-task-infos">
|
|
|
+ <thead>
|
|
|
+ <tr style="border-bottom:3px solid black;">
|
|
|
+ <th>姓名(工号)</th>
|
|
|
+ <th>合格数</th>
|
|
|
+ <th>不合格数</th>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="rank-two">
|
|
|
+ <tr>
|
|
|
+ <td>1</td>
|
|
|
+ <td>Task A</td>
|
|
|
+ <td><span class="label bg-green">Doing</span></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>2</td>
|
|
|
+ <td>Task B</td>
|
|
|
+ <td><span class="label bg-blue">To Do</span></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>3</td>
|
|
|
+ <td>Task C</td>
|
|
|
+ <td><span class="label bg-light-blue">On Hold</span></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>4</td>
|
|
|
+ <td>Task D</td>
|
|
|
+ <td><span class="label bg-orange">Wait Approvel</span></td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
</div>
|
|
|
+ <div class="table-responsive" style="width: 30%;float: right">
|
|
|
+ <table class="table table-hover dashboard-task-infos">
|
|
|
+ <thead>
|
|
|
+ <tr style="border-bottom:3px solid black;">
|
|
|
+ <th>姓名(工号)</th>
|
|
|
+ <th>合格数</th>
|
|
|
+ <th>不合格数</th>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="rank-three">
|
|
|
+ <tr>
|
|
|
+ <td>1</td>
|
|
|
+ <td>Task A</td>
|
|
|
+ <td><span class="label bg-green">Doing</span></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>2</td>
|
|
|
+ <td>Task B</td>
|
|
|
+ <td><span class="label bg-blue">To Do</span></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>3</td>
|
|
|
+ <td>Task C</td>
|
|
|
+ <td><span class="label bg-light-blue">On Hold</span></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>4</td>
|
|
|
+ <td>Task D</td>
|
|
|
+ <td><span class="label bg-orange">Wait Approvel</span></td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
- <!-- #END# Answered Tickets -->
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
+ <!-- #END# Answered Tickets -->
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
- </section>
|
|
|
+</section>
|
|
|
|
|
|
- <!-- Jquery Core Js -->
|
|
|
- <script src="plugins/jquery/jquery.min.js"></script>
|
|
|
+<!-- Jquery Core Js -->
|
|
|
+<script src="plugins/jquery/jquery.min.js"></script>
|
|
|
|
|
|
- <!-- Bootstrap Core Js -->
|
|
|
- <script src="plugins/bootstrap/js/bootstrap.js"></script>
|
|
|
+<!-- Bootstrap Core Js -->
|
|
|
+<script src="plugins/bootstrap/js/bootstrap.js"></script>
|
|
|
|
|
|
- <!-- Select Plugin Js -->
|
|
|
- <script src="plugins/bootstrap-select/js/bootstrap-select.js"></script>
|
|
|
+<!-- Select Plugin Js -->
|
|
|
+<script src="plugins/bootstrap-select/js/bootstrap-select.js"></script>
|
|
|
|
|
|
- <!-- Slimscroll Plugin Js -->
|
|
|
- <script src="plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
|
|
|
+<!-- Slimscroll Plugin Js -->
|
|
|
+<script src="plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
|
|
|
|
|
|
- <!-- Waves Effect Plugin Js -->
|
|
|
- <script src="plugins/node-waves/waves.js"></script>
|
|
|
+<!-- Waves Effect Plugin Js -->
|
|
|
+<script src="plugins/node-waves/waves.js"></script>
|
|
|
|
|
|
- <!-- Jquery CountTo Plugin Js -->
|
|
|
- <script src="plugins/jquery-countto/jquery.countTo.js"></script>
|
|
|
+<!-- Jquery CountTo Plugin Js -->
|
|
|
+<script src="plugins/jquery-countto/jquery.countTo.js"></script>
|
|
|
|
|
|
- <!-- Morris Plugin Js -->
|
|
|
- <script src="plugins/raphael/raphael.min.js"></script>
|
|
|
- <script src="plugins/morrisjs/morris.js"></script>
|
|
|
+<!-- Morris Plugin Js -->
|
|
|
+<script src="plugins/raphael/raphael.min.js"></script>
|
|
|
+<script src="plugins/morrisjs/morris.js"></script>
|
|
|
|
|
|
- <!-- ChartJs -->
|
|
|
- <script src="plugins/chartjs/Chart.bundle.js"></script>
|
|
|
+<!-- ChartJs -->
|
|
|
+<script src="plugins/chartjs/Chart.bundle.js"></script>
|
|
|
|
|
|
- <!-- Flot Charts Plugin Js -->
|
|
|
- <script src="plugins/flot-charts/jquery.flot.js"></script>
|
|
|
- <script src="plugins/flot-charts/jquery.flot.resize.js"></script>
|
|
|
- <script src="plugins/flot-charts/jquery.flot.pie.js"></script>
|
|
|
- <script src="plugins/flot-charts/jquery.flot.categories.js"></script>
|
|
|
- <script src="plugins/flot-charts/jquery.flot.time.js"></script>
|
|
|
+<!-- Flot Charts Plugin Js -->
|
|
|
+<script src="plugins/flot-charts/jquery.flot.js"></script>
|
|
|
+<script src="plugins/flot-charts/jquery.flot.resize.js"></script>
|
|
|
+<script src="plugins/flot-charts/jquery.flot.pie.js"></script>
|
|
|
+<script src="plugins/flot-charts/jquery.flot.categories.js"></script>
|
|
|
+<script src="plugins/flot-charts/jquery.flot.time.js"></script>
|
|
|
|
|
|
- <!-- Sparkline Chart Plugin Js -->
|
|
|
- <script src="plugins/jquery-sparkline/jquery.sparkline.js"></script>
|
|
|
+<!-- Sparkline Chart Plugin Js -->
|
|
|
+<script src="plugins/jquery-sparkline/jquery.sparkline.js"></script>
|
|
|
|
|
|
- <!-- Custom Js -->
|
|
|
- <script src="js/admin.js"></script>
|
|
|
- <script src="js/pages/index.js"></script>
|
|
|
+<!-- Custom Js -->
|
|
|
+<script src="js/admin.js"></script>
|
|
|
+<script src="js/pages/index.js"></script>
|
|
|
|
|
|
- <!-- Demo Js -->
|
|
|
- <script src="js/demo.js"></script>
|
|
|
- <script>
|
|
|
- function get_data(url, callback){
|
|
|
- if(url=="la.anyone.alldata"){
|
|
|
- callback([
|
|
|
- {name:"张三", id:133, approve:300, decline:400, Accumulate:1000,worktime:1},
|
|
|
- {name:"李四", id:133, approve:300, decline:400, Accumulate:1000,worktime:2},
|
|
|
- ]);
|
|
|
- return;
|
|
|
- }
|
|
|
+<!-- Demo Js -->
|
|
|
+<script src="js/demo.js"></script>
|
|
|
+<script>
|
|
|
+ function get_data(url, callback) {
|
|
|
+ if (url == "la.anyone.alldata") {
|
|
|
+ callback([
|
|
|
+ {name: "张三", id: 133, approve: 300, decline: 400, Accumulate: 1000, worktime: 1},
|
|
|
+ {name: "李四", id: 133, approve: 300, decline: 400, Accumulate: 1000, worktime: 2},
|
|
|
+ ]);
|
|
|
+ return;
|
|
|
}
|
|
|
- get_data("la.anyone.alldata", showAllData);
|
|
|
- function showAllData(shuju){
|
|
|
- var htmlbody = "";
|
|
|
- var i = 0;
|
|
|
- for(i=0; i < shuju.length; i++){
|
|
|
- var one_person = shuju[i];
|
|
|
- htmlbody += "<tr>";
|
|
|
- htmlbody += " <tr>\n" +
|
|
|
- " <td>"+one_person.name+"("+one_person.id+")</td>\n" +
|
|
|
- " <td>"+one_person.approve+"</td>\n" +
|
|
|
- " <td>"+one_person.decline+"</td>\n" +
|
|
|
- " </tr>";
|
|
|
- htmlbody += "</tr>";
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ get_data("la.anyone.alldata", showAllData);
|
|
|
|
|
|
- $("#rank-two").html(htmlbody);
|
|
|
+ function showAllData(shuju) {
|
|
|
+ var htmlbody = "";
|
|
|
+ var i = 0;
|
|
|
+ for (i = 0; i < shuju.length; i++) {
|
|
|
+ var one_person = shuju[i];
|
|
|
+ htmlbody += "<tr>";
|
|
|
+ htmlbody += " <tr>\n" +
|
|
|
+ " <td>" + one_person.name + "(" + one_person.id + ")</td>\n" +
|
|
|
+ " <td>" + one_person.approve + "</td>\n" +
|
|
|
+ " <td>" + one_person.decline + "</td>\n" +
|
|
|
+ " </tr>";
|
|
|
+ htmlbody += "</tr>";
|
|
|
}
|
|
|
- </script>
|
|
|
- <script>
|
|
|
- function get_data(url, callback){
|
|
|
- if(url=="la.anyone.alldata"){
|
|
|
+
|
|
|
+ $("#rank-two").html(htmlbody);
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<script>
|
|
|
+ function get_data(url, callback) {
|
|
|
+ if (url == "la.anyone.alldata") {
|
|
|
callback([
|
|
|
- {name:"张三", id:133, approve:300, decline:400, Accumulate:1000,worktime:1},
|
|
|
- {name:"李四", id:133, approve:300, decline:400, Accumulate:1000,worktime:2},
|
|
|
+ {name: "张三", id: 133, approve: 300, decline: 400, Accumulate: 1000, worktime: 1},
|
|
|
+ {name: "李四", id: 133, approve: 300, decline: 400, Accumulate: 1000, worktime: 2},
|
|
|
]);
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
get_data("la.anyone.alldata", showAllData);
|
|
|
- function showAllData(shuju){
|
|
|
+
|
|
|
+ function showAllData(shuju) {
|
|
|
var htmlbody = "";
|
|
|
var i = 0;
|
|
|
- for(i=0; i < shuju.length; i++){
|
|
|
+ for (i = 0; i < shuju.length; i++) {
|
|
|
var one_person = shuju[i];
|
|
|
htmlbody += "<tr>";
|
|
|
htmlbody += " <tr>\n" +
|
|
|
- " <td>"+one_person.name+"("+one_person.id+")</td>\n" +
|
|
|
- " <td>"+one_person.approve+"</td>\n" +
|
|
|
- " <td>"+one_person.decline+"</td>\n" +
|
|
|
+ " <td>" + one_person.name + "(" + one_person.id + ")</td>\n" +
|
|
|
+ " <td>" + one_person.approve + "</td>\n" +
|
|
|
+ " <td>" + one_person.decline + "</td>\n" +
|
|
|
" </tr>";
|
|
|
htmlbody += "</tr>";
|
|
|
}
|
|
|
@@ -400,466 +402,55 @@
|
|
|
$("#rank-three").html(htmlbody);
|
|
|
}
|
|
|
</script>
|
|
|
- <script>
|
|
|
- function get_data(url, callback){
|
|
|
- if(url=="la.anyone.alldata"){
|
|
|
- callback([
|
|
|
- {name:"张三", id:133, approve:300, decline:400, Accumulate:1000,worktime:1},
|
|
|
- {name:"李四", id:133, approve:300, decline:400, Accumulate:1000,worktime:2},
|
|
|
- ]);
|
|
|
- return;
|
|
|
- }
|
|
|
+<script>
|
|
|
+ function get_data(url, callback) {
|
|
|
+ if (url == "la.anyone.alldata") {
|
|
|
+ callback([
|
|
|
+ {name: "张三", id: 133, approve: 300, decline: 400, Accumulate: 1000, worktime: 1},
|
|
|
+ {name: "李四", id: 133, approve: 300, decline: 400, Accumulate: 1000, worktime: 2},
|
|
|
+ ]);
|
|
|
+ return;
|
|
|
}
|
|
|
- get_data("la.anyone.alldata", showAllData);
|
|
|
- function showAllData(shuju){
|
|
|
- var htmlbody = "";
|
|
|
- var i = 0;
|
|
|
- for(i=0; i < shuju.length; i++){
|
|
|
- var one_person = shuju[i];
|
|
|
- htmlbody += "<tr>";
|
|
|
- htmlbody += " <tr>\n" +
|
|
|
- " <td>"+one_person.name+"("+one_person.id+")</td>\n" +
|
|
|
- " <td>"+one_person.approve+"</td>\n" +
|
|
|
- " <td>"+one_person.decline+"</td>\n" +
|
|
|
- " </tr>";
|
|
|
- htmlbody += "</tr>";
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- $("#rank-one").html(htmlbody);
|
|
|
- }
|
|
|
- </script>
|
|
|
- <script>
|
|
|
+ get_data("la.anyone.alldata", showAllData);
|
|
|
|
|
|
- /*function get_data(url, callback){
|
|
|
- if(url=="la.anyone.alldata"){
|
|
|
- callback([
|
|
|
- {name:"张三", id:133, approve:300, decline:400, Accumulate:1000,worktime:1},
|
|
|
- {name:"李四", id:133, approve:300, decline:400, Accumulate:1000,worktime:2},
|
|
|
- ]);
|
|
|
- return;
|
|
|
- }
|
|
|
- callback([{x:1527957798468,y:3000},{x:1527957799468,y:3000},{x:1527957800468,y:3000.5},{x:1527957801468,y:3001}]);
|
|
|
+ function showAllData(shuju) {
|
|
|
+ var htmlbody = "";
|
|
|
+ var i = 0;
|
|
|
+ for (i = 0; i < shuju.length; i++) {
|
|
|
+ var one_person = shuju[i];
|
|
|
+ htmlbody += "<tr>";
|
|
|
+ htmlbody += " <tr>\n" +
|
|
|
+ " <td>" + one_person.name + "(" + one_person.id + ")</td>\n" +
|
|
|
+ " <td>" + one_person.approve + "</td>\n" +
|
|
|
+ " <td>" + one_person.decline + "</td>\n" +
|
|
|
+ " </tr>";
|
|
|
+ htmlbody += "</tr>";
|
|
|
}
|
|
|
|
|
|
- get_data('la.acceptedCount.3600',mmm);
|
|
|
- function mmm(shuju) {
|
|
|
-
|
|
|
- console.log("------ getting la.acceptedCount.3000 -------")
|
|
|
- console.log(shuju);
|
|
|
-
|
|
|
- var chart = Highcharts.chart('container1',{
|
|
|
- chart: {
|
|
|
- type: 'spline'
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '月平均降雨量'
|
|
|
- },
|
|
|
- subtitle: {
|
|
|
- text: '数据来源: WorldClimate.com'
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- tickInterval: 1000, // 坐标轴刻度间隔为一星期
|
|
|
- tickWidth: 0,
|
|
|
- gridLineWidth: 1,
|
|
|
- // 时间格式化字符
|
|
|
- // 默认会根据当前的刻度间隔取对应的值，即当刻度间隔为一周时，取 week 值
|
|
|
- dateTimeLabelFormats: {
|
|
|
- week: '%Y-%m-%d'
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- // min: 0,
|
|
|
- // title: {
|
|
|
- // text: '降雨量 (mm)'
|
|
|
- // }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- // head + 每个 point + footer 拼接成完整的 table
|
|
|
- headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
|
|
|
- pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
|
|
|
- '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
|
|
|
- footerFormat: '</table>',
|
|
|
- shared: true,
|
|
|
- useHTML: true
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- column: {
|
|
|
- borderWidth: 0
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '东京',
|
|
|
- data: shuju
|
|
|
- }]
|
|
|
- });
|
|
|
- }
|
|
|
+ $("#rank-one").html(htmlbody);
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
|
|
|
- setInterval(lll,100);
|
|
|
- function lll() {
|
|
|
+</html>
|
|
|
|
|
|
- }
|
|
|
|
|
|
- get_data("la.anyone.alldata", showAllData);
|
|
|
- function showAllData(shuju){
|
|
|
- var htmlbody = "";
|
|
|
- var i = 0;
|
|
|
- for(i=0; i < shuju.length; i++){
|
|
|
- var one_person = shuju[i];
|
|
|
- htmlbody += "<tr>";
|
|
|
- htmlbody += " <tr>\n" +
|
|
|
- " <td>"+one_person.name+"("+one_person.id+")</td>\n" +
|
|
|
- " <td>"+one_person.approve+"</td>\n" +
|
|
|
- " <td>"+one_person.decline+"</td>\n" +
|
|
|
- " </tr>";
|
|
|
- htmlbody += "</tr>";
|
|
|
- }
|
|
|
+<!---
|
|
|
+### SVR_BASE 类似 "http://127.0.0.1:8803" 实际上线之后是确定值，写死在HTML里的JS里面
|
|
|
|
|
|
- $("#rank-one").html(htmlbody);
|
|
|
- }*/
|
|
|
|
|
|
+### 各个拉实时产量数据接口地址
|
|
|
+SVR_BASE + "/server/fcWorkRaw/allFlows"
|
|
|
|
|
|
- </script>
|
|
|
- <script>
|
|
|
- var chart = Highcharts.chart('container1', {
|
|
|
- title: {
|
|
|
- text: '合格数'
|
|
|
- },
|
|
|
- /*subtitle: {
|
|
|
- text: '数据来源：thesolarfoundation.com'
|
|
|
- },*/
|
|
|
- xAxis: {
|
|
|
- title: {
|
|
|
- text: '员工'
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- title: {
|
|
|
- text: '就业人数'
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- layout: 'vertical',
|
|
|
- align: 'right',
|
|
|
- verticalAlign: 'middle'
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- series: {
|
|
|
- label: {
|
|
|
- connectorAllowed: false
|
|
|
- },
|
|
|
- pointStart: 2010
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '安装，实施人员',
|
|
|
- data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
|
|
|
- }, {
|
|
|
- name: '工人',
|
|
|
- data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
|
|
|
- }, {
|
|
|
- name: '销售',
|
|
|
- data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
|
|
|
- }, {
|
|
|
- name: '项目开发',
|
|
|
- data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
|
|
|
- }, {
|
|
|
- name: '其他',
|
|
|
- data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
|
|
|
- }],
|
|
|
- responsive: {
|
|
|
- rules: [{
|
|
|
- condition: {
|
|
|
- maxWidth: 500
|
|
|
- },
|
|
|
- chartOptions: {
|
|
|
- legend: {
|
|
|
- layout: 'horizontal',
|
|
|
- align: 'center',
|
|
|
- verticalAlign: 'bottom'
|
|
|
- }
|
|
|
- }
|
|
|
- }]
|
|
|
- }
|
|
|
- });
|
|
|
- </script>
|
|
|
- <script>
|
|
|
- var chart = Highcharts.chart('container2', {
|
|
|
- chart: {
|
|
|
- type: 'bar'
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '不合格数'
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- min: 0,
|
|
|
- title: {
|
|
|
- text: '员工'
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- /* 图例显示顺序反转
|
|
|
- * 这是因为堆叠的顺序默认是反转的，可以设置
|
|
|
- * yAxis.reversedStacks = false 来达到类似的效果
|
|
|
- */
|
|
|
- reversed: true
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- series: {
|
|
|
- stacking: 'normal'
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '小张',
|
|
|
- data: [5, 3, 4, 7, 2]
|
|
|
- }, {
|
|
|
- name: '小彭',
|
|
|
- data: [2, 2, 3, 2, 1]
|
|
|
- }, {
|
|
|
- name: '小潘',
|
|
|
- data: [3, 4, 4, 2, 5]
|
|
|
- }]
|
|
|
- });
|
|
|
- </script>
|
|
|
- <script>
|
|
|
- var chart = Highcharts.chart('container3', {
|
|
|
- chart: {
|
|
|
- type: 'column'
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '堆积数'
|
|
|
- },
|
|
|
- /*subtitle: {
|
|
|
- text: '数据截止 2017-03，来源: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
|
|
|
- },*/
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- /* labels: {
|
|
|
- rotation: -45 // 设置轴标签旋转角度
|
|
|
- }*/
|
|
|
- title: {
|
|
|
- text: '员工'
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- min: 0,
|
|
|
- title: {
|
|
|
- text: '人口 (百万)'
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- enabled: false
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '总人口',
|
|
|
- data: [
|
|
|
- ['上海', 24.25],
|
|
|
- ['卡拉奇', 23.50],
|
|
|
- ['北京', 21.51],
|
|
|
- ['德里', 16.78],
|
|
|
- ['拉各斯', 16.06],
|
|
|
- ['天津', 15.20],
|
|
|
- ['伊斯坦布尔', 14.16],
|
|
|
- ['东京', 13.51],
|
|
|
- ['广州', 13.08],
|
|
|
- ['孟买', 12.44],
|
|
|
- ['莫斯科', 12.19],
|
|
|
- ['圣保罗', 12.03],
|
|
|
- ['深圳', 10.46],
|
|
|
- ['雅加达', 10.07],
|
|
|
- ['拉合尔', 10.05],
|
|
|
- ['首尔', 9.99],
|
|
|
- ['武汉', 9.78],
|
|
|
- ['金沙萨', 9.73],
|
|
|
- ['开罗', 9.27],
|
|
|
- ['墨西哥', 8.87]
|
|
|
- ],
|
|
|
- dataLabels: {
|
|
|
- enabled: true,
|
|
|
- rotation: -90,
|
|
|
- color: '#FFFFFF',
|
|
|
- align: 'right',
|
|
|
- format: '{point.y:.1f}', // :.1f 为保留 1 位小数
|
|
|
- y: 10
|
|
|
- }
|
|
|
- }]
|
|
|
- });
|
|
|
- </script>
|
|
|
- <script>
|
|
|
- var chart = Highcharts.chart('container4', {
|
|
|
- chart: {
|
|
|
- type: 'line'
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '工作时长'
|
|
|
- },
|
|
|
- /*subtitle: {
|
|
|
- text: '数据来源: WorldClimate.com'
|
|
|
- },*/
|
|
|
- xAxis: {
|
|
|
-
|
|
|
- title: {
|
|
|
- text: '员工'
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- title: {
|
|
|
- text: '气温 (°C)'
|
|
|
- }
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- line: {
|
|
|
- dataLabels: {
|
|
|
- // 开启数据标签
|
|
|
- enabled: true
|
|
|
- },
|
|
|
- // 关闭鼠标跟踪，对应的提示框、点击事件会失效
|
|
|
- enableMouseTracking: false
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '东京',
|
|
|
- data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
|
|
|
- }, {
|
|
|
- name: '伦敦',
|
|
|
- data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
|
|
|
- }]
|
|
|
- });
|
|
|
+### 单个拉内，所有工位实时产量数据接口地址 e.g. 拉线ID = 2
|
|
|
+SVR_BASE + "/server/fcWorkRaw/allSpots" + "?" + "flowId=2"
|
|
|
|
|
|
- </script>
|
|
|
- <script>
|
|
|
- var chart = Highcharts.chart('container5', {
|
|
|
- chart: {
|
|
|
- type: 'column'
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '不良率'
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- /*categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']*/
|
|
|
- title: {
|
|
|
- text: '员工'
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- min: 0,
|
|
|
- title: {
|
|
|
- text: '水果消费总量'
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>' +
|
|
|
- '({point.percentage:.0f}%)<br/>',
|
|
|
- //:.0f 表示保留 0 位小数，详见教程：https://www.hcharts.cn/docs/basic-labels-string-formatting
|
|
|
- shared: true
|
|
|
- },
|
|
|
- plotOptions: {
|
|
|
- column: {
|
|
|
- stacking: 'percent'
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '小张',
|
|
|
- data: [5, 3, 4, 7, 2]
|
|
|
- }, {
|
|
|
- name: '小彭',
|
|
|
- data: [2, 2, 3, 2, 1]
|
|
|
- }, {
|
|
|
- name: '小潘',
|
|
|
- data: [3, 4, 4, 2, 5]
|
|
|
- }]
|
|
|
- });
|
|
|
- </script>
|
|
|
- <script>
|
|
|
- var chart = Highcharts.chart('container10', {
|
|
|
- chart: {
|
|
|
- zoomType: 'xy'
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: null
|
|
|
- },
|
|
|
- credits:{
|
|
|
- enabled: false // 禁用版权信息
|
|
|
- },
|
|
|
- exporting: {
|
|
|
- enabled: false
|
|
|
- },
|
|
|
- xAxis: [{
|
|
|
- categories: ['张三', '李四', '王五', 'Apr', 'May', 'Jun',
|
|
|
- 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
|
- crosshair: true,
|
|
|
- title: {
|
|
|
- text: '员工',
|
|
|
- }
|
|
|
- }],
|
|
|
- yAxis: [{ // Primary yAxis
|
|
|
- labels: {
|
|
|
- format: '{value}',
|
|
|
- style: {
|
|
|
- color: Highcharts.getOptions().colors[0],
|
|
|
- fontSize:'15px'
|
|
|
- }
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '堆积数',
|
|
|
- style: {
|
|
|
- color: Highcharts.getOptions().colors[0],
|
|
|
- fontSize:'15px'
|
|
|
- }
|
|
|
- }
|
|
|
- }, { // Secondary yAxis
|
|
|
- title: {
|
|
|
- text: '不良率',
|
|
|
- style: {
|
|
|
- color: 'red',
|
|
|
- fontSize:'15px'
|
|
|
- }
|
|
|
- },
|
|
|
- labels: {
|
|
|
- format: '{value} %',
|
|
|
- style: {
|
|
|
- color: 'red',
|
|
|
- fontSize:'15px'
|
|
|
- }
|
|
|
- },
|
|
|
- opposite: true
|
|
|
- }],
|
|
|
- tooltip: {
|
|
|
- shared: true
|
|
|
- },
|
|
|
- legend: {
|
|
|
- layout: 'vertical',
|
|
|
- align: 'left',
|
|
|
- x: 120,
|
|
|
- verticalAlign: 'top',
|
|
|
- y: 100,
|
|
|
- floating: true,
|
|
|
- backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '堆积数',
|
|
|
- type: 'column',
|
|
|
- yAxis: 1,
|
|
|
- data: [200, 150, 135, 122, 111, 75, 65, 63.2, 50, 45, 22, 11],
|
|
|
- tooltip: {
|
|
|
- valueSuffix: ' mm'
|
|
|
- }
|
|
|
- }, {
|
|
|
- name: '不良率',
|
|
|
- type: 'spline',
|
|
|
- data: [55, 53, 52.5, 41.5, 44.2, 45.5, 35.2, 26.5, 23.3, 18.3, 13.9, 9.6],
|
|
|
- color:'red',
|
|
|
- tooltip: {
|
|
|
- valueSuffix: '%'
|
|
|
- }
|
|
|
- }]
|
|
|
- });
|
|
|
- </script>
|
|
|
-</body>
|
|
|
|
|
|
-</html>
|
|
|
+### 员工上班记录API e.g. 拉线ID = 2 工位顺序 = 1 员工ID = 33404
|
|
|
+SVR_BASE + "/server/fcWorkStartend/goOnline" + "?" + "flowId=2&sequence=1&workerId=33404"
|
|
|
+
|
|
|
+### 查询已上班员工 e.g. 拉线ID = 2
|
|
|
+SVR_BASE + "/server/fcWorkRaw/getAll" + "?" + "flowId=2"
|
|
|
+-->
|
Guichuan Yu