|
|
@@ -0,0 +1,917 @@
|
|
|
+<!doctype html>
|
|
|
+<html lang="en" data-bs-theme="auto">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width">
|
|
|
+ <link rel="icon" href="/app/images/dongke-logo.png">
|
|
|
+ <link href="/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
|
|
+ <title>东科软件</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ background-color: black;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col {
|
|
|
+ width: 1280px;
|
|
|
+ height: 660px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bigtitle {
|
|
|
+ height: 137px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-image: url(/Img/title9in1.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ .boardone {
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-image: url(/Img/bg9in1.png);
|
|
|
+ }
|
|
|
+
|
|
|
+ .boardone .title {
|
|
|
+ padding-top: 50px;
|
|
|
+ color: white;
|
|
|
+ font-size: 40px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .boardone .chart {
|
|
|
+ margin-left: 150px;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 980px;
|
|
|
+ height: 450px;
|
|
|
+ /*background-color:white;*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .doughnut {
|
|
|
+ width: 600px !important;
|
|
|
+ height: 800px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ table, tr, td {
|
|
|
+ border: 1px solid #84C1FF;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #D0D0D0;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 200%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableheader {
|
|
|
+ font-weight:800;
|
|
|
+ background-color:#0f58a2;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body class="m-0 p-0 border-0">
|
|
|
+ <div class="m-1">
|
|
|
+ <div class="row pb-4" style="width:100%;">
|
|
|
+ <div class="col bigtitle"></div>
|
|
|
+ </div>
|
|
|
+ <div class="row row-cols-3 text-center g-2">
|
|
|
+ <div class="col mx-1 boardone">
|
|
|
+ <div class="title">
|
|
|
+ 每周各车间产质量
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <canvas id="canvas01" height="145"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col mx-1 boardone">
|
|
|
+ <div class="title">
|
|
|
+ 半检大小件TOP10缺陷占比
|
|
|
+ </div>
|
|
|
+ <div class="doughnut">
|
|
|
+ <canvas id="canvas031" style="margin-left:50px; margin-top:120px;"></canvas>
|
|
|
+ <canvas id="canvas032" style="margin-left:620px; margin-top:-300px"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col mx-1 boardone">
|
|
|
+ <div class="title">
|
|
|
+ 每周大小件大工序产量
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <canvas id="canvas07" height="145"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col mx-1 boardone">
|
|
|
+ <div class="title">
|
|
|
+ 每周各车间成型产量湿收率
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <canvas id="canvas04" height="145"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col mx-1 boardone">
|
|
|
+ <div class="title">
|
|
|
+ 成检大小件TOP10缺陷占比
|
|
|
+ </div>
|
|
|
+ <div class="doughnut">
|
|
|
+ <canvas id="canvas021" style="margin-left:50px; margin-top:120px;"></canvas>
|
|
|
+ <canvas id="canvas022" style="margin-left:620px; margin-top:-300px"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col mx-1 boardone">
|
|
|
+ <div class="title">
|
|
|
+ 品管抽检数据展示
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <canvas id="canvas09" height="100"></canvas>
|
|
|
+ <table width="100%" style="margin-left:30px">
|
|
|
+ <tr class="tableheader">
|
|
|
+ <td>缺陷</td>
|
|
|
+ <td>整体变形</td>
|
|
|
+ <td>进水孔内孔/圆度</td>
|
|
|
+ <td>外观缺陷</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>缺陷占比</td>
|
|
|
+ <td>8.6%</td>
|
|
|
+ <td>7.9%</td>
|
|
|
+ <td>4.5%</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col mx-1 boardone">
|
|
|
+ <div class="title pb-2">
|
|
|
+ 各车间缺陷周环比
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <table width="100%" class="table-striped">
|
|
|
+ <tr class="tableheader">
|
|
|
+ <td>缺陷名称</td>
|
|
|
+ <td>缺陷占比</td>
|
|
|
+ <td>同月比</td>
|
|
|
+ <td>上月比 </td>
|
|
|
+ <td>对比趋势</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>外裂</td>
|
|
|
+ <td>2.11%</td>
|
|
|
+ <td>2.08%</td>
|
|
|
+ <td>5.13% </td>
|
|
|
+ <td style="color:#009100">下降</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>不平</td>
|
|
|
+ <td>1.08%</td>
|
|
|
+ <td>1.07%</td>
|
|
|
+ <td>2.56% </td>
|
|
|
+ <td style="color: #009100 ">下降</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>撞伤</td>
|
|
|
+ <td>0.41%</td>
|
|
|
+ <td>0.29%</td>
|
|
|
+ <td>2.56% </td>
|
|
|
+ <td style="color: #009100 ">下降</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>变形</td>
|
|
|
+ <td>0.38%</td>
|
|
|
+ <td>0.51%</td>
|
|
|
+ <td>2.56% </td>
|
|
|
+ <td style="color: #009100 ">下降</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>气孔漏水</td>
|
|
|
+ <td>0.22%</td>
|
|
|
+ <td>0.22%</td>
|
|
|
+ <td>2.56% </td>
|
|
|
+ <td style="color: #009100 ">下降</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col mx-1 boardone">
|
|
|
+ <div class="title pb-2">
|
|
|
+ 产品SKU及模具库存周转率
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <table width="100%" class="table-striped">
|
|
|
+ <tr class="tableheader">
|
|
|
+ <td>地点</td>
|
|
|
+ <td colspan="3">周转率最高（3 个） </td>
|
|
|
+ <td colspan="3">周转率最低（3 个）</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>模具</td>
|
|
|
+ <td>H107B<br>（95%）</td>
|
|
|
+ <td>H175B<br>（93.5%）</td>
|
|
|
+ <td>H185B<br>（89%）</td>
|
|
|
+ <td>M190B<br>（0.8%）</td>
|
|
|
+ <td>M180B<br>（1.2%）</td>
|
|
|
+ <td>M170B<br>（2.5%）</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>施釉 </td>
|
|
|
+ <td>H107B<br>（95%）</td>
|
|
|
+ <td>H175B<br>（93%）</td>
|
|
|
+ <td>H185B<br>（91%）</td>
|
|
|
+ <td>M190B<br>（0.4%）</td>
|
|
|
+ <td>M180B<br>（0.9%）</td>
|
|
|
+ <td>M170B<br>（1%）</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>精坯 </td>
|
|
|
+ <td>H107B<br>（98%）</td>
|
|
|
+ <td>H175B<br>（92%）</td>
|
|
|
+ <td>H185B<br>（90%）</td>
|
|
|
+ <td>M190B<br>（1.1%）</td>
|
|
|
+ <td>M180B<br>（1.3%）</td>
|
|
|
+ <td>M170B<br>（1.6%）</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col mx-1 boardone">
|
|
|
+ <div class="title pb-2">
|
|
|
+ 每周干补率及干补合格率
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <table width="100%" class="table-striped">
|
|
|
+ <tr class="tableheader">
|
|
|
+ <td>车间</td>
|
|
|
+ <td>成型一车间 </td>
|
|
|
+ <td>成型二车间</td>
|
|
|
+ <td>成型三车间</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>干补率</td>
|
|
|
+ <td>6% </td>
|
|
|
+ <td>11%</td>
|
|
|
+ <td>33%</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>干补合格率</td>
|
|
|
+ <td>99% </td>
|
|
|
+ <td>94%</td>
|
|
|
+ <td>89%</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="/plugins/bootstrap/bootstrap.bundle.min.js"></script>
|
|
|
+ <script src="/plugins/jquery-3.4.1/jquery-3.4.1.min.js"></script>
|
|
|
+ <script src="/Plugins/chartjs-2.8.0/chart-2.8.min.js"></script>
|
|
|
+ <script src="/Plugins/chartjs-2.8.0/chartjs-plugin-datalabels.js"></script>
|
|
|
+ <script src="/Plugins/chartjs-2.8.0/utils.js"></script>
|
|
|
+ <script src="/main/Common/xuwell.js"></script>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ //定义color
|
|
|
+ var color = Chart.helpers.color;
|
|
|
+
|
|
|
+ $(document).ready(function () {
|
|
|
+ //设置缩放
|
|
|
+ xuwell.setScale(0.391);
|
|
|
+ initAll();
|
|
|
+ });
|
|
|
+
|
|
|
+ //初期加载所有
|
|
|
+ function initAll() {
|
|
|
+ window.chartColors = {
|
|
|
+ red: 'rgb(255, 99, 132)',
|
|
|
+ orange: 'rgb(255, 159, 64)',
|
|
|
+ yellow: 'rgb(255, 250, 86)',
|
|
|
+ green: 'rgb(75, 192, 192)',
|
|
|
+ blue: 'rgb(54, 162, 250)',
|
|
|
+ purple: 'rgb(153, 102, 255)',
|
|
|
+ grey: 'rgb(231,233,237)'
|
|
|
+ };
|
|
|
+
|
|
|
+ window.randomScalingFactor = function (num) {
|
|
|
+ return Math.round(Math.random() * num);
|
|
|
+ }
|
|
|
+
|
|
|
+ Chart.defaults.global.defaultFontColor = 'white';
|
|
|
+ Chart.defaults.global.defaultFontSize = 30;
|
|
|
+
|
|
|
+ //调用数据加载
|
|
|
+ init01(); init021(); init022(); init031(); init032(); init04(); init05(); init06(); init07(); init08(); init09();
|
|
|
+ }
|
|
|
+ //每周各车间产质量
|
|
|
+ function init01() {
|
|
|
+ window.config01 = {
|
|
|
+ data: {
|
|
|
+ labels: ["成型一车间", "成型二车间", "成型三车间"],
|
|
|
+ datasets: [{
|
|
|
+ type: 'line',
|
|
|
+ label: "本烧质量",
|
|
|
+ yAxesGroup: 'A',
|
|
|
+ yAxisID: 'A',
|
|
|
+ backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
|
|
|
+ borderColor: window.chartColors.orange,
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [94, 85, 95],
|
|
|
+ fill: false
|
|
|
+ }, {
|
|
|
+ type: 'line',
|
|
|
+ label: "重烧质量",
|
|
|
+ yAxesGroup: 'A',
|
|
|
+ yAxisID: 'A',
|
|
|
+ backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
|
|
|
+ borderColor: window.chartColors.green,
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [70, 55, 65],
|
|
|
+ fill: false
|
|
|
+ }, {
|
|
|
+ label: '本烧产量',
|
|
|
+ yAxesGroup: 'B',
|
|
|
+ yAxisID: 'B',
|
|
|
+ backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
|
|
|
+ borderColor: window.chartColors.blue,
|
|
|
+ borderWidth: 4,
|
|
|
+ data: [2765, 2479, 2764],
|
|
|
+ fill: false
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: 'bar',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: '每周各车间产质量'
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'index',
|
|
|
+ intersect: false,
|
|
|
+ },
|
|
|
+ hover: {
|
|
|
+ mode: 'nearest',
|
|
|
+ intersect: true
|
|
|
+ },
|
|
|
+ scales: {
|
|
|
+ xAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: ''
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxes: [{
|
|
|
+ display: true,
|
|
|
+ id: 'B',
|
|
|
+ name: 'B',
|
|
|
+ scalePositionLeft: true,
|
|
|
+ position: 'left',
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: 'Value'
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ min: 0,
|
|
|
+ stepSize: 500,
|
|
|
+ max: 3000
|
|
|
+ }
|
|
|
+ }
|
|
|
+ , {
|
|
|
+ display: true,
|
|
|
+ id: 'A',
|
|
|
+ name: 'A',
|
|
|
+ scalePositionLeft: false,
|
|
|
+ position: 'right',
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: 'Value2'
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ min: 0,
|
|
|
+ stepSize: 10,
|
|
|
+ max: 100
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctx01 = document.getElementById("canvas01").getContext("2d");
|
|
|
+ window.chart01 = new Chart(ctx01, config01);
|
|
|
+ }
|
|
|
+ //成检大件TOP10缺陷占比
|
|
|
+ function init021() {
|
|
|
+ window.config021 = {
|
|
|
+ data: {
|
|
|
+ labels: ['不平', '变形', '外漏', '内漏', '登伤', '铁锈', '漏气', '撞伤', '内裂', '外裂', '其他'],
|
|
|
+ datasets: [{
|
|
|
+ label: '缺陷',
|
|
|
+ backgroundColor: [
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.yellow).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.yellow).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString()
|
|
|
+ ],
|
|
|
+ fill: false,
|
|
|
+ borderColor: [
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.blue,
|
|
|
+ window.chartColors.yellow,
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.blue,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.yellow,
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.blue
|
|
|
+ ],
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: 'doughnut',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true,
|
|
|
+ position: 'left'
|
|
|
+ },
|
|
|
+ textstyle: {
|
|
|
+ fontsize: 2
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: "缺陷",
|
|
|
+
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'point',
|
|
|
+ intersect: false
|
|
|
+ },
|
|
|
+ responsive: true
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctx021 = document.getElementById("canvas021").getContext("2d");
|
|
|
+ window.chart021 = new Chart(ctx021, config021);
|
|
|
+ }
|
|
|
+ //成检小件TOP10缺陷占比
|
|
|
+ function init022() {
|
|
|
+ window.config022 = {
|
|
|
+ data: {
|
|
|
+ labels: ['不平', '变形', '外漏', '内漏', '登伤', '铁锈', '漏气', '撞伤', '内裂', '外裂', '其他'],
|
|
|
+ datasets: [{
|
|
|
+ label: '缺陷',
|
|
|
+ backgroundColor: [
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.yellow).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.yellow).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString()
|
|
|
+ ],
|
|
|
+ fill: false,
|
|
|
+ borderColor: [
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.blue,
|
|
|
+ window.chartColors.yellow,
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.blue,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.yellow,
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.blue
|
|
|
+ ],
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: 'doughnut',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true,
|
|
|
+ position: 'right'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: "缺陷"
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'point',
|
|
|
+ intersect: false
|
|
|
+ },
|
|
|
+ responsive: true
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctx022 = document.getElementById("canvas022").getContext("2d");
|
|
|
+ window.chart022 = new Chart(ctx022, config022);
|
|
|
+ }
|
|
|
+ //半检大件TOP10缺陷占比
|
|
|
+ function init031() {
|
|
|
+ window.config031 = {
|
|
|
+ data: {
|
|
|
+ labels: ['不平', '变形', '外漏', '内漏', '登伤', '铁锈', '漏气', '撞伤', '内裂', '外裂', '其他'],
|
|
|
+ datasets: [{
|
|
|
+ label: '缺陷',
|
|
|
+ backgroundColor: [
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.yellow).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.yellow).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString()
|
|
|
+ ],
|
|
|
+ fill: false,
|
|
|
+ borderColor: [
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.blue,
|
|
|
+ window.chartColors.yellow,
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.blue,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.yellow,
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.blue
|
|
|
+ ],
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: 'doughnut',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true,
|
|
|
+ position: 'left'
|
|
|
+ },
|
|
|
+ textstyle: {
|
|
|
+ fontsize: 2
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: "缺陷",
|
|
|
+
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'point',
|
|
|
+ intersect: false
|
|
|
+ },
|
|
|
+ responsive: true
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctx031 = document.getElementById("canvas031").getContext("2d");
|
|
|
+ window.chart031 = new Chart(ctx031, config031);
|
|
|
+ }
|
|
|
+ //半检小件TOP10缺陷占比
|
|
|
+ function init032() {
|
|
|
+ window.config032 = {
|
|
|
+ data: {
|
|
|
+ labels: ['不平', '变形', '外漏', '内漏', '登伤', '铁锈', '漏气', '撞伤', '内裂', '外裂', '其他'],
|
|
|
+ datasets: [{
|
|
|
+ label: '缺陷',
|
|
|
+ backgroundColor: [
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.yellow).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.yellow).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.green).alpha(0.6).rgbString(),
|
|
|
+ Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString()
|
|
|
+ ],
|
|
|
+ fill: false,
|
|
|
+ borderColor: [
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.blue,
|
|
|
+ window.chartColors.yellow,
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.blue,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.yellow,
|
|
|
+ window.chartColors.orange,
|
|
|
+ window.chartColors.green,
|
|
|
+ window.chartColors.blue
|
|
|
+ ],
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: 'doughnut',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true,
|
|
|
+ position: 'right'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: "缺陷"
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'point',
|
|
|
+ intersect: false
|
|
|
+ },
|
|
|
+ responsive: true
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctx032 = document.getElementById("canvas032").getContext("2d");
|
|
|
+ window.chart032 = new Chart(ctx032, config032);
|
|
|
+ }
|
|
|
+ //每周各车间成型产量湿收率
|
|
|
+ function init04() {
|
|
|
+ window.config04 = {
|
|
|
+ data: {
|
|
|
+ labels: ["成型一车间", "成型二车间", "成型三车间"],
|
|
|
+ datasets: [{
|
|
|
+ type: 'line',
|
|
|
+ label: "湿收率",
|
|
|
+ yAxesGroup: 'A',
|
|
|
+ yAxisID: 'A',
|
|
|
+ backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
|
|
|
+ borderColor: window.chartColors.orange,
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [5, 4, 6],
|
|
|
+ fill: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '产量',
|
|
|
+ yAxesGroup: 'B',
|
|
|
+ yAxisID: 'B',
|
|
|
+ backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
|
|
|
+ borderColor: window.chartColors.blue,
|
|
|
+ borderWidth: 4,
|
|
|
+ data: [2765, 2479, 2764],
|
|
|
+ fill: false
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: 'bar',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: '每周各车间成型产量湿收率'
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'index',
|
|
|
+ intersect: false,
|
|
|
+ },
|
|
|
+ hover: {
|
|
|
+ mode: 'nearest',
|
|
|
+ intersect: true
|
|
|
+ },
|
|
|
+ scales: {
|
|
|
+ xAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: ''
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxes: [{
|
|
|
+ display: true,
|
|
|
+ id: 'B',
|
|
|
+ name: 'B',
|
|
|
+ scalePositionLeft: true,
|
|
|
+ position: 'left',
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: 'Value'
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ min: 0,
|
|
|
+ stepSize: 500,
|
|
|
+ max: 3000
|
|
|
+ }
|
|
|
+ }
|
|
|
+ , {
|
|
|
+ display: true,
|
|
|
+ id: 'A',
|
|
|
+ name: 'A',
|
|
|
+ scalePositionLeft: false,
|
|
|
+ position: 'right',
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: 'Value2'
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ min: 0,
|
|
|
+ stepSize: 10,
|
|
|
+ max: 30
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctx04 = document.getElementById("canvas04").getContext("2d");
|
|
|
+ window.chart04 = new Chart(ctx04, config04);
|
|
|
+ }
|
|
|
+ //各车间缺陷周环比
|
|
|
+ function init05() {
|
|
|
+
|
|
|
+ }
|
|
|
+ //每周干补率，干补合格率
|
|
|
+ function init06() {
|
|
|
+
|
|
|
+ }
|
|
|
+ //每周大小件大工序产量
|
|
|
+ function init07() {
|
|
|
+ window.config07 = {
|
|
|
+ data: {
|
|
|
+ labels: ["成型", "半检", "施釉", "烧成", "成检", "包装"],
|
|
|
+ datasets: [{
|
|
|
+ label: "大件产量",
|
|
|
+ backgroundColor: Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ borderColor: window.chartColors.orange,
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [989, 956, 912, 899, 864, 855],
|
|
|
+ fill: false,
|
|
|
+ }, {
|
|
|
+ label: "小件产量",
|
|
|
+ fill: false,
|
|
|
+ backgroundColor: Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ borderColor: window.chartColors.blue,
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [944, 910, 856, 830, 819, 800]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ type: 'line',
|
|
|
+ options: {
|
|
|
+ responsive: true,
|
|
|
+ legend: {
|
|
|
+ display: true
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: '每周大小件大工序产量'
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'index',
|
|
|
+ intersect: false,
|
|
|
+ },
|
|
|
+ hover: {
|
|
|
+ mode: 'nearest',
|
|
|
+ intersect: true
|
|
|
+ },
|
|
|
+ scales: {
|
|
|
+ xAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: ''
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ labelString: 'Value'
|
|
|
+ },
|
|
|
+ ticks: {
|
|
|
+ min: 500,
|
|
|
+ stepSize: 50,
|
|
|
+ max: 1000
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctx07 = document.getElementById("canvas07").getContext("2d");
|
|
|
+ window.chart07 = new Chart(ctx07, config07);
|
|
|
+ }
|
|
|
+ //模具库存周转率,产品 SKU 周转率
|
|
|
+ function init08() {
|
|
|
+
|
|
|
+ }
|
|
|
+ //品管抽检数据展示
|
|
|
+ function init09() {
|
|
|
+ window.config09 = {
|
|
|
+ data: {
|
|
|
+ labels: ['形式检验', '外观检验', '功能检验'],
|
|
|
+ datasets: [{
|
|
|
+ label: '完成率',
|
|
|
+ backgroundColor: Chart.helpers.color(window.chartColors.orange).alpha(0.6).rgbString(),
|
|
|
+ fill: false,
|
|
|
+ borderColor: window.chartColors.orange,
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [91, 94, 89]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '合格率',
|
|
|
+ backgroundColor: Chart.helpers.color(window.chartColors.blue).alpha(0.6).rgbString(),
|
|
|
+ fill: false,
|
|
|
+ borderColor: window.chartColors.blue,
|
|
|
+ borderWidth: 4,
|
|
|
+ pointRadius: 30,
|
|
|
+ data: [89, 94, 96]
|
|
|
+ },]
|
|
|
+ },
|
|
|
+ type: 'bar',
|
|
|
+ options: {
|
|
|
+ legend: {
|
|
|
+ display: true
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ text: "施釉机器人（1号）流量统计"
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'point',
|
|
|
+ intersect: false
|
|
|
+ },
|
|
|
+ responsive: true,
|
|
|
+ scales: {
|
|
|
+ xAxes: [{
|
|
|
+ stacked: false
|
|
|
+ }],
|
|
|
+ yAxes: [{
|
|
|
+ display: true,
|
|
|
+ stacked: false,
|
|
|
+ ticks: {
|
|
|
+ min: 0,
|
|
|
+ stepSize: 20,
|
|
|
+ max: 100
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ };
|
|
|
+ var ctx09 = document.getElementById("canvas09").getContext("2d");
|
|
|
+ window.chart09 = new Chart(ctx09, config09);
|
|
|
+ }
|
|
|
+
|
|
|
+ function loadAll() {
|
|
|
+
|
|
|
+ //axios.get('/app/api/getDashboardList.ashx')
|
|
|
+ // .then(function (response) {
|
|
|
+ // self.dashboardList = response.data;
|
|
|
+ // })
|
|
|
+ // .catch(function (error) {
|
|
|
+
|
|
|
+ // });
|
|
|
+ load01(); load02(); load03(); load04(); load05(); load06(); load07(); load08(); load09();
|
|
|
+ }
|
|
|
+ function load01() {
|
|
|
+
|
|
|
+ }
|
|
|
+ function load02() {
|
|
|
+
|
|
|
+ }
|
|
|
+ function load03() {
|
|
|
+
|
|
|
+ }
|
|
|
+ function load04() {
|
|
|
+
|
|
|
+ }
|
|
|
+ function load05() {
|
|
|
+
|
|
|
+ }
|
|
|
+ function load06() {
|
|
|
+
|
|
|
+ }
|
|
|
+ function load07() {
|
|
|
+
|
|
|
+ }
|
|
|
+ function load08() {
|
|
|
+
|
|
|
+ }
|
|
|
+ function load09() {
|
|
|
+
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
xuwei
