|
|
@@ -79,23 +79,19 @@
|
|
|
|
|
|
</head>
|
|
|
|
|
|
-<body class="theme-red" style="height: 100%" onload="startTime()">
|
|
|
+<body class="theme-red" style="height: 100%;background-color: #17253f !important;" onload="startTime()">
|
|
|
<section class="content" style="margin: 0 auto;height: 100%">
|
|
|
- <div class="row" style="font-size: 2em;height: 7%;background-color: black">
|
|
|
-
|
|
|
- <div class="col-6 text-right" style="color: #ffffff">大屏幕产能监控系统</div>
|
|
|
- <div class="col-6 text-left" ><font color="black" style="color: #ffffff"><span id="nowDateTimeSpan"></span></font></div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- <script>
|
|
|
- function addContent(name){
|
|
|
- console.log( $(name));
|
|
|
- $(name).tab('show');
|
|
|
- }
|
|
|
- </script>
|
|
|
- <!-- #END# CPU Usage -->
|
|
|
- <div class="row clearfix" style="height: 13%">
|
|
|
+ <nav class="navbar" style="background-color: red">
|
|
|
+ <div class="container-fluid">
|
|
|
+ <div class="navbar-header">
|
|
|
+ <a class="navbar-brand" href="index.html">工厂产能监控系统</a>
|
|
|
+ </div>
|
|
|
+ <div style="color: #ffffff"><img src="images/logo.jpg" style="width: 10%"> 深圳市度彼电子有限公司——</div>
|
|
|
+ <font color="#ffffff"><span id="nowDateTimeSpan"></span></font>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ <!-- #END# CPU Usage -->
|
|
|
+ <div class="row clearfix" style="height: 13%">
|
|
|
<!-- Visitors -->
|
|
|
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
|
|
|
<div class="card" style="margin-bottom: 0.2em">
|
|
|
@@ -130,8 +126,8 @@
|
|
|
<!-- #END# Answered Tickets -->
|
|
|
</div>
|
|
|
<div class="container-fluid" style="height: 80%">
|
|
|
- <div id="container3" style="height:50%"></div>
|
|
|
- <div id="container5" style="height:50%;padding-top: 0.2em"></div>
|
|
|
+ <div id="graph-1" ></div>
|
|
|
+ <div id="graph-2" ></div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
@@ -172,13 +168,15 @@
|
|
|
<!-- 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>
|
|
|
+ <script src="js/admin.js"></script>
|
|
|
+ <!--<script src="js/pages/index.js"></script>-->
|
|
|
|
|
|
<!-- Demo Js -->
|
|
|
+ <script src="js/demo.js"></script>
|
|
|
+
|
|
|
<!--<script src="js/demo.js"></script> -->
|
|
|
- <script src="js/basic.js"></script>
|
|
|
+ <script src="js/basic1.js"></script>
|
|
|
+
|
|
|
<script>
|
|
|
var chart = Highcharts.chart('container1', {
|
|
|
chart: {
|
|
|
@@ -538,6 +536,191 @@
|
|
|
}]
|
|
|
});
|
|
|
</script>
|
|
|
+ <script>
|
|
|
+ function showChart() {
|
|
|
+
|
|
|
+ var stackdata = [];
|
|
|
+ var passdata=[];
|
|
|
+ var faildata=[];
|
|
|
+ var failrate=[];
|
|
|
+ var failmax=0;
|
|
|
+ for (i = 0; i < passNumber.length; i++) {
|
|
|
+ passdata.push(passeverynum[i]);
|
|
|
+ faildata.push(faileverynum[i]);
|
|
|
+ stackdata.push(0);
|
|
|
+ failrate.push(failrate[i])
|
|
|
+ if (failmax < failrate[i]) {
|
|
|
+ failmax = failrate[i];
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //showEachSpot();
|
|
|
+ failmax = Math.max(failmax, 5);
|
|
|
+ stackAndFailChart = Highcharts.chart('graph-1', {
|
|
|
+ chart: {
|
|
|
+ zoomType: 'xy',
|
|
|
+ height: (4 / 16 * 100) + '%' // 16:9 ratio
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '各产线今日产能'
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false // 禁用版权信息
|
|
|
+ },
|
|
|
+ exporting: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ crosshair: true,
|
|
|
+ labels: {
|
|
|
+ style: {
|
|
|
+ fontSize: '1.5em'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxis: [{ // Primary yAxis
|
|
|
+ labels: {
|
|
|
+ format: '{value}',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[0],
|
|
|
+ fontSize: '1.5em'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: 10000,
|
|
|
+ title: {
|
|
|
+
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[0],
|
|
|
+ fontSize: '1em'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ shared: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ layout: 'vertical',
|
|
|
+ align: 'right',
|
|
|
+ x: -100,
|
|
|
+ verticalAlign: 'top',
|
|
|
+ y: 0,
|
|
|
+ floating: true,
|
|
|
+ backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'column',
|
|
|
+ data: passdata,
|
|
|
+
|
|
|
+ }, {
|
|
|
+ type: 'column',
|
|
|
+ data: faildata,
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'column',
|
|
|
+ data: stackdata,
|
|
|
+
|
|
|
+ },]
|
|
|
+ });
|
|
|
+ FailChart = Highcharts.chart('graph-2', {
|
|
|
+ chart: {
|
|
|
+
|
|
|
+ height: (4 / 16 * 100) + '%' // 16:9 ratio
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '各产线今日不良率'
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled: false // 禁用版权信息
|
|
|
+ },
|
|
|
+ exporting: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ crosshair: true,
|
|
|
+ labels: {
|
|
|
+ style: {
|
|
|
+ fontSize: '1.5em'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxis: [ { // Secondary yAxis
|
|
|
+ title: {
|
|
|
+ text: '不良率',
|
|
|
+ style: {
|
|
|
+ color: 'red',
|
|
|
+ fontSize: '1em'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: 1.5 * failmax,
|
|
|
+ labels: {
|
|
|
+ formatter: function () {
|
|
|
+ return Math.floor(this.value) + "%";
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ color: 'red',
|
|
|
+ fontSize: '20px'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ }],
|
|
|
+ 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: 'spline',
|
|
|
+
|
|
|
+ data: failrate,
|
|
|
+ color: 'red',
|
|
|
+ tooltip: {
|
|
|
+ valueSuffix: '%'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ function updateChart() {
|
|
|
+ var stackdata = [];
|
|
|
+ var passdata=[];
|
|
|
+ var faildata=[];
|
|
|
+ var failrate=[];
|
|
|
+ for (i = 0; i < passNumber.length; i++) {
|
|
|
+ passdata.push(passeverynum[i]);
|
|
|
+ faildata.push(faileverynum[i]);
|
|
|
+ stackdata.push(0);
|
|
|
+ failrate.push(failrate[i])
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // https://api.hcharts.cn/highcharts#Series.addPoint;
|
|
|
+ stackAndFailChart.series[0].setData(passdata);
|
|
|
+ stackAndFailChart.series[1].setData(faildata);
|
|
|
+ stackAndFailChart.series[2].setData(stackdata);
|
|
|
+ FailChart.series[0].setData(failrate);
|
|
|
+
|
|
|
+
|
|
|
+ // showEachSpot();
|
|
|
+ }
|
|
|
+
|
|
|
+ var stackAndFailChart = null;
|
|
|
+ var FailChart = null;
|
|
|
+
|
|
|
+ $(document).ready(on_document_load);
|
|
|
+ </script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
Guichuan Yu