|
|
@@ -0,0 +1,474 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
|
+ <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
|
|
+ <title>流水线管理页</title>
|
|
|
+ <!-- Favicon-->
|
|
|
+ <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">
|
|
|
+
|
|
|
+ <!-- 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">
|
|
|
+
|
|
|
+ <!-- Waves Effect Css -->
|
|
|
+ <link href="plugins/node-waves/waves.css" rel="stylesheet" />
|
|
|
+
|
|
|
+ <!-- Animation Css -->
|
|
|
+ <link href="plugins/animate-css/animate.css" rel="stylesheet" />
|
|
|
+
|
|
|
+ <!-- Morris Chart Css-->
|
|
|
+ <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" />
|
|
|
+ <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>
|
|
|
+ <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+ <style>
|
|
|
+ /* css 代码 */
|
|
|
+ </style>
|
|
|
+ <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
|
|
|
+ <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
|
|
|
+ <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
|
|
|
+
|
|
|
+</head>
|
|
|
+
|
|
|
+<body class="theme-red">
|
|
|
+
|
|
|
+ <section class="content" style="margin: 0 auto">
|
|
|
+
|
|
|
+ <!-- #END# CPU Usage -->
|
|
|
+ <div class="row clearfix">
|
|
|
+ <!-- Visitors -->
|
|
|
+ <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
|
|
|
+ <div class="card" style="margin-bottom: 0.2em">
|
|
|
+ <div class="body bg-pink">
|
|
|
+ <div class="row text-center">
|
|
|
+ <div class="col-3"></div>
|
|
|
+ <div class="col-3">全场产能:</div>
|
|
|
+ <div class="col-3">122555</div>
|
|
|
+ <div class="col-3"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- #END# Visitors -->
|
|
|
+ <!-- Latest Social Trends -->
|
|
|
+ <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
|
|
|
+ <div class="card" style="margin-bottom: 0.2em">
|
|
|
+ <div class="body bg-cyan text-center">
|
|
|
+ <div class="row text-center">
|
|
|
+ <div class="col-3"></div>
|
|
|
+ <div class="col-3">全厂坏品数:</div>
|
|
|
+ <div class="col-3">15555</div>
|
|
|
+ <div class="col-3"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- #END# Latest Social Trends -->
|
|
|
+ <!-- Answered Tickets -->
|
|
|
+
|
|
|
+ <!-- #END# Answered Tickets -->
|
|
|
+ </div>
|
|
|
+ <div class="container-fluid">
|
|
|
+ <div id="container3" style="min-width:350px;height:330px;padding-bottom: 0.2em"></div>
|
|
|
+ <div id="container5" style="min-width:350px;height:320px"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- Jquery Core Js -->
|
|
|
+ <script src="plugins/jquery/jquery.min.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>
|
|
|
+
|
|
|
+ <!-- Slimscroll Plugin Js -->
|
|
|
+ <script src="plugins/jquery-slimscroll/jquery.slimscroll.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>
|
|
|
+
|
|
|
+ <!-- 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>
|
|
|
+
|
|
|
+ <!-- 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>
|
|
|
+
|
|
|
+ <!-- Custom Js -->
|
|
|
+ <script src="js/admin.js"></script>
|
|
|
+ <script src="js/pages/index.js"></script>
|
|
|
+
|
|
|
+ <!-- Demo Js -->
|
|
|
+ <script src="js/demo.js"></script>
|
|
|
+ <script>
|
|
|
+ var chart = Highcharts.chart('container1', {
|
|
|
+ chart: {
|
|
|
+ type: 'area',
|
|
|
+ backgroundColor:'#E91E63',
|
|
|
+ style:{
|
|
|
+ color:'#FFFFFF',
|
|
|
+ fontSize:"20px",
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ colors: [ '#ffffff'
|
|
|
+
|
|
|
+ ],
|
|
|
+ legend: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled:false,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '全厂产能',
|
|
|
+ style:{
|
|
|
+ color:'#FFFFFF',
|
|
|
+ fontSize:"20px",
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ xAxis: {
|
|
|
+ categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
|
|
+ labels:{
|
|
|
+ enabled:false,
|
|
|
+ style:{
|
|
|
+ fontSize:16,
|
|
|
+ color:'#ffffff',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ title: {
|
|
|
+ text: null
|
|
|
+ },
|
|
|
+ labels:{
|
|
|
+ style:{
|
|
|
+ fontSize:16,
|
|
|
+ color:'#ffffff',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* plotOptions: {
|
|
|
+ line: {
|
|
|
+ dataLabels: {
|
|
|
+ // 开启数据标签
|
|
|
+ enabled: true
|
|
|
+ },
|
|
|
+ // 关闭鼠标跟踪，对应的提示框、点击事件会失效
|
|
|
+ enableMouseTracking: false
|
|
|
+ }
|
|
|
+ series: {
|
|
|
+ dataLabels: {
|
|
|
+ enabled: true,
|
|
|
+ color: 'red',
|
|
|
+ }
|
|
|
+ },*/
|
|
|
+ plotOptions: {
|
|
|
+ series: {
|
|
|
+ dataLabels: {
|
|
|
+ enabled: true,
|
|
|
+ color: 'black'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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],
|
|
|
+
|
|
|
+ }]
|
|
|
+ });
|
|
|
+
|
|
|
+ </script>
|
|
|
+ <script>
|
|
|
+ var chart = Highcharts.chart('container2', {
|
|
|
+ chart: {
|
|
|
+ type: 'line',
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ exporting: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled:false,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '全厂坏品数'
|
|
|
+ },
|
|
|
+
|
|
|
+ xAxis: {
|
|
|
+ categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
|
|
+ },
|
|
|
+ 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]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ <script>
|
|
|
+ var chart = Highcharts.chart('container3', {
|
|
|
+ title: {
|
|
|
+ text: null
|
|
|
+ },
|
|
|
+ chart: {
|
|
|
+ zoomType: 'xy'
|
|
|
+ },
|
|
|
+ credits:{
|
|
|
+ enabled: false // 禁用版权信息
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
|
|
+ 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
|
+ crosshair: true
|
|
|
+ }],
|
|
|
+ yAxis: [{ // Primary yAxis
|
|
|
+ labels: {
|
|
|
+ format: '{value}',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '堆积数',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[1]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, { // Secondary yAxis
|
|
|
+ title: {
|
|
|
+ text: '不良率',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ format: '{value} %',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: '堆积数',
|
|
|
+ color:'#ffc107',
|
|
|
+ type: 'area',
|
|
|
+ data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
|
|
|
+ tooltip: {
|
|
|
+ valueSuffix: ''
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ name: '不良率',
|
|
|
+ type: 'spline',
|
|
|
+ color:'#ff0000',
|
|
|
+ yAxis: 1,
|
|
|
+ data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
|
|
|
+ tooltip: {
|
|
|
+ valueSuffix: ' %'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ <script>
|
|
|
+ /*var chart = Highcharts.chart('container4', {
|
|
|
+ chart: {
|
|
|
+ type: 'line',
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ credits: {
|
|
|
+ enabled:false,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: null
|
|
|
+ },
|
|
|
+
|
|
|
+ xAxis: {
|
|
|
+ categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
|
|
|
+ },
|
|
|
+ yAxis: [{ // Primary yAxis
|
|
|
+ labels: {
|
|
|
+ format: '{value}',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '堆积数',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[1]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, { // Secondary yAxis
|
|
|
+ title: {
|
|
|
+ text: '不良率',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ format: '{value} %',
|
|
|
+ style: {
|
|
|
+ color: Highcharts.getOptions().colors[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ opposite: true
|
|
|
+ }],
|
|
|
+ plotOptions: {
|
|
|
+ line: {
|
|
|
+ dataLabels: {
|
|
|
+ // 开启数据标签
|
|
|
+ enabled: true
|
|
|
+ },
|
|
|
+ // 关闭鼠标跟踪，对应的提示框、点击事件会失效
|
|
|
+ enableMouseTracking: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '不良率',
|
|
|
+ type: 'spline',
|
|
|
+ yAxis: 1,
|
|
|
+ data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
|
|
|
+ tooltip: {
|
|
|
+ valueSuffix: ' %'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ name: '堆积数',
|
|
|
+ type: 'spline',
|
|
|
+ data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
|
|
|
+ tooltip: {
|
|
|
+ valueSuffix: ''
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ });*/
|
|
|
+ </script>
|
|
|
+ <script>
|
|
|
+ var chart = Highcharts.chart('container5',{
|
|
|
+ chart: {
|
|
|
+ type: 'column'
|
|
|
+ },
|
|
|
+ credits:{
|
|
|
+ enabled: false // 禁用版权信息
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ exporting: {
|
|
|
+ enabled: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '工位实时产能',
|
|
|
+ style:{
|
|
|
+ fontSize:"10px",
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ xAxis: {
|
|
|
+ categories: [
|
|
|
+ '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
|
|
|
+ ],
|
|
|
+ crosshair: true
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ min: 0,
|
|
|
+ title: null
|
|
|
+
|
|
|
+ },
|
|
|
+ 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: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
|
|
|
+ }, {
|
|
|
+ name: '纽约',
|
|
|
+ data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
|
|
|
+ }, {
|
|
|
+ name: '伦敦',
|
|
|
+ data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
|
|
|
+ }, {
|
|
|
+ name: '柏林',
|
|
|
+ data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
|
|
|
+ }]
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
Guichuan Yu