|
|
@@ -84,7 +84,7 @@
|
|
|
}
|
|
|
</style>
|
|
|
<body>
|
|
|
-<nav class="navbar navbar-expand-lg navbar-light bg-light" style-height="10%">
|
|
|
+<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>
|
|
|
@@ -124,7 +124,7 @@
|
|
|
|
|
|
</div>
|
|
|
</nav>
|
|
|
-<section class="content" style="margin: 0 auto; margin-top: 4em">
|
|
|
+<section class="content" style-height="20" 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">
|
|
|
@@ -183,9 +183,9 @@
|
|
|
</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 class="container-fluid" style="margin-top: 0.5em;padding-top: 1em">
|
|
|
+ <div id="graph-1" style-height="30"></div>
|
|
|
+ <div class="card" style-height="40" style="margin: 0 auto;">
|
|
|
<div>
|
|
|
<div class="" style="">
|
|
|
<div class="table-responsive" style="width: 30%;float: left">
|
|
|
@@ -199,26 +199,7 @@
|
|
|
</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>
|
|
|
@@ -233,26 +214,7 @@
|
|
|
</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>
|
|
|
@@ -267,26 +229,7 @@
|
|
|
</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>
|
|
|
@@ -342,95 +285,208 @@
|
|
|
|
|
|
<!-- Demo Js -->
|
|
|
<script src="js/demo.js"></script>
|
|
|
+<script src="js/basic.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 getSpotHtml(htmlbody, one_person, i) {
|
|
|
+ htmlbody += "<tr>";
|
|
|
+ htmlbody += `<tr>
|
|
|
+ <td>${one_person.spotName}(${one_person.id})</td>
|
|
|
+ <td>${passNumber[i]}</td>
|
|
|
+ <td>${failNumber[i]}</td>
|
|
|
+ </tr>`;
|
|
|
+ htmlbody += "</tr>";
|
|
|
+ return htmlbody;
|
|
|
+ }
|
|
|
|
|
|
- function showAllData(shuju) {
|
|
|
- var htmlbody = "";
|
|
|
+ function showEachSpot() {
|
|
|
+ var htmlbody = "", one_person = "";
|
|
|
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>";
|
|
|
+ var triGap = Math.fround(sID.length / 3);
|
|
|
+ var remain = sID.length - triGap * 2;
|
|
|
+ for (i = 0; i < triGap; i++) {
|
|
|
+ one_person = namedata[i];
|
|
|
+ htmlbody = getSpotHtml(htmlbody, one_person, i);
|
|
|
+ $("#rank-one").html(htmlbody);
|
|
|
}
|
|
|
|
|
|
- $("#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},
|
|
|
- ]);
|
|
|
- return;
|
|
|
+ for (i = 0; i < triGap; i++) {
|
|
|
+ one_person = namedata[i+triGap];
|
|
|
+ htmlbody = getSpotHtml(htmlbody, one_person, i+triGap);
|
|
|
+ $("#rank-two").html(htmlbody);
|
|
|
+ }
|
|
|
+
|
|
|
+ for (i = 0; i < remain; i++) {
|
|
|
+ one_person = namedata[i+triGap*2];
|
|
|
+ htmlbody = getSpotHtml(htmlbody, one_person, i+triGap*2);
|
|
|
+ $("#rank-three").html(htmlbody);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- get_data("la.anyone.alldata", showAllData);
|
|
|
+ var thisPageFlow = 1;
|
|
|
+ function showChart() {
|
|
|
|
|
|
- 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>";
|
|
|
+ var data = [];
|
|
|
+ var ratedata = [];
|
|
|
+ var stackmax = 0;
|
|
|
+ var failmax=0;
|
|
|
+
|
|
|
+ for (i = 0; i < passNumber.length; i++) {
|
|
|
+ if (stackmax < stackeverynum[i]) {
|
|
|
+ stackmax = stackeverynum[i];
|
|
|
+ }
|
|
|
+ if (failmax < failrate[i]) {
|
|
|
+ failmax = failrate[i];
|
|
|
+ }
|
|
|
+ data.push(stackeverynum[i]);
|
|
|
+ ratedata.push(Math.floor(failrate[i]));
|
|
|
}
|
|
|
|
|
|
- $("#rank-three").html(htmlbody);
|
|
|
+ stackmax = Math.max(stackmax,5);
|
|
|
+ failmax =Math.max(failmax,5);
|
|
|
+
|
|
|
+ stackAndFailChart = Highcharts.chart('graph-1', {
|
|
|
+ chart: {
|
|
|
+ zoomType: 'xy'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: null
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false // 禁用版权信息
|
|
|
+ },
|
|
|
+ exporting: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ categories: namedata,
|
|
|
+ crosshair: true,
|
|
|
+ title: {
|
|
|
+ text: '员工',
|
|
|
+ style: {
|
|
|
+ fontSize: '15px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ style: {
|
|
|
+ fontSize: '20px'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxis: [{ // Primary yAxis
|
|
|
+ labels: {
|
|
|
+ format: '{value}',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[0],
|
|
|
+ fontSize: '20px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: 1.5 * stackmax,
|
|
|
+ title: {
|
|
|
+ text: '堆积数',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[0],
|
|
|
+ fontSize: '15px'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, { // Secondary yAxis
|
|
|
+ title: {
|
|
|
+ text: '不良率',
|
|
|
+ style: {
|
|
|
+ color: 'red',
|
|
|
+ fontSize: '15px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: 1.5 * failmax,
|
|
|
+ labels: {
|
|
|
+ formatter: function() {
|
|
|
+ return Math.floor(this.value) + "%";
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ color: 'red',
|
|
|
+ fontSize: '20px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ opposite: true
|
|
|
+ }],
|
|
|
+ tooltip: {
|
|
|
+ shared: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ x: -120,
|
|
|
+ verticalAlign: 'top',
|
|
|
+ y: 0,
|
|
|
+ floating: true,
|
|
|
+ backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '堆积数',
|
|
|
+ type: 'column',
|
|
|
+
|
|
|
+ data: data,
|
|
|
+ tooltip: {
|
|
|
+ valueSuffix: ' mm'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ name: '不良率',
|
|
|
+ type: 'spline',
|
|
|
+ yAxis: 1,
|
|
|
+ data: ratedata,
|
|
|
+ color: 'red',
|
|
|
+ tooltip: {
|
|
|
+ valueSuffix: '%'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ });
|
|
|
}
|
|
|
-</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;
|
|
|
+ function updateChart(){
|
|
|
+ var data = [];
|
|
|
+ var ratedata = [];
|
|
|
+ var stackmax = 0;
|
|
|
+ var failmax=0;
|
|
|
+
|
|
|
+ for (i = 0; i < passNumber.length; i++) {
|
|
|
+ if (stackmax < stackeverynum[i]) {
|
|
|
+ stackmax = stackeverynum[i];
|
|
|
+ }
|
|
|
+ if (failmax < failrate[i]) {
|
|
|
+ failmax = failrate[i];
|
|
|
+ }
|
|
|
+ data.push(stackeverynum[i]);
|
|
|
+ ratedata.push(Math.floor(failrate[i]));
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- get_data("la.anyone.alldata", showAllData);
|
|
|
+ stackmax = Math.max(stackmax,5);
|
|
|
+ failmax =Math.max(failmax,5);
|
|
|
+ // https://api.hcharts.cn/highcharts#Series.addPoint;
|
|
|
+ stackAndFailChart.series[0].setData(data);
|
|
|
+ stackAndFailChart.series[1].setData(ratedata);
|
|
|
+ }
|
|
|
+ var stackAndFailChart = null;
|
|
|
+
|
|
|
+ $(document).ready(on_document_load);
|
|
|
+ window.onresize = resizeAll;
|
|
|
+
|
|
|
+ function resizeAll(){
|
|
|
+ $('[style-height="10"]').height(window.innerHeight / 10);
|
|
|
+ $('[style-height="20"]').height(window.innerHeight / 5);
|
|
|
+ $('[style-height="30"]').height(window.innerHeight / 3.33333);
|
|
|
+ $('[style-height="40"]').height(window.innerHeight / 2.5);
|
|
|
+ (function(){
|
|
|
+ $('#graph-1').highcharts().reflow();
|
|
|
+ })();
|
|
|
+ }
|
|
|
|
|
|
- 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>";
|
|
|
- }
|
|
|
+ setInterval(function(){
|
|
|
+ $("#graph-1").width(window.innerWidth);
|
|
|
+ $("#graph-1").height(window.innerHeight / 3.333);
|
|
|
+ },1000);
|
|
|
|
|
|
- $("#rank-one").html(htmlbody);
|
|
|
- }
|
|
|
</script>
|
|
|
</body>
|
|
|
|
Guichuan Yu