|
|
@@ -0,0 +1,1135 @@
|
|
|
+var vm = new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ dom: Object,
|
|
|
+ myChart: Object,
|
|
|
+ myChart_2: Object,
|
|
|
+ option_1: Object,
|
|
|
+ option_2: Object,
|
|
|
+ option_3: Object,
|
|
|
+
|
|
|
+ oees_1: [],
|
|
|
+ oees_2: [],
|
|
|
+ mode: 1,//1为正常，2为chamber汇总
|
|
|
+ outputInfo: '',
|
|
|
+ outputs: [],
|
|
|
+ CheckedChamber: [{ "id": "5EFFEA4F-AD8F-463F-95DC-0A123572901E", "name": "Chamber 01", "open": false, "children": null }, { "id": "04F6759F-BFE2-4BDE-999F-C8AE2AE92C05", "name": "Chamber 02", "open": false, "children": null }, { "id": "3647CB82-C0DA-4864-A2C2-387FDED2D95A", "name": "Chamber 03", "open": false, "children": null }, { "id": "3AB1B8F9-4180-4DB0-AA8D-8C6BD2104FC4", "name": "Chamber 04", "open": false, "children": null }, { "id": "84F56A7A-7928-4AFF-9F30-B1BE4666F7D5", "name": "Chamber 05", "open": false, "children": null }, { "id": "22852C0C-DB89-4F59-8ADA-5CDE557EF150", "name": "Chamber 06", "open": false, "children": null }, { "id": "821B6F54-10D7-465D-846B-AA1CFC874954", "name": "Chamber 07", "open": false, "children": null }, { "id": "0E61855E-44CB-462E-A497-B8D436583237", "name": "Chamber 08", "open": false, "children": null }, { "id": "1F7FDE85-F6C4-4977-80A6-960F89FD24FD", "name": "Chamber 09", "open": false, "children": null }],
|
|
|
+ EchartsDataIndex: 0,
|
|
|
+ param_temp : {
|
|
|
+ dataIndex: 0,
|
|
|
+ name: "",
|
|
|
+ componentType :'series',
|
|
|
+ seriesName:''
|
|
|
+ },
|
|
|
+
|
|
|
+ OEEExtendSetting1: ["", "", ""],
|
|
|
+ OEEExtendSetting2: ["", "", "", "", ""],
|
|
|
+
|
|
|
+ machine: "",
|
|
|
+ machineid: ""
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ this.getOEES();
|
|
|
+ this.getOutputs(this.param_temp, this.mode);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ const searchParams = new URLSearchParams(window.location.search);
|
|
|
+ this.machine = searchParams.get('machine');
|
|
|
+ if (this.machine == "Y5Front") {
|
|
|
+ this.machineid = "9E812380-A9BD-4C8B-96A0-6BACB928498F";
|
|
|
+ $("#methodchoose").hide();
|
|
|
+ $("#container2").hide();
|
|
|
+ $(".date").datepicker("destroy");
|
|
|
+ $(".date").datepicker({
|
|
|
+ minViewMode: 'days',
|
|
|
+ format: 'yyyy-mm-dd',
|
|
|
+ language: 'zh-CN',
|
|
|
+ autoclose: true,
|
|
|
+ todayBtn: 'linked'
|
|
|
+ }).on('changeDate', function () {
|
|
|
+
|
|
|
+ }).on('keydown', function (e) {
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ var date1 = new Date(new Date().setDate(new Date().getDate() - 7));
|
|
|
+ var date2 = new Date(new Date().setDate(new Date().getDate() - 1));
|
|
|
+ var date1_1 = moment(date1);
|
|
|
+ var date2_1 = moment(date2);
|
|
|
+ $("#date1").val(date1_1.format('YYYY-MM-DD'));
|
|
|
+ $("#date2").val(date2_1.format('YYYY-MM-DD'));
|
|
|
+ }
|
|
|
+ else if (this.machine == "Y5Chamber") {
|
|
|
+ this.machineid = "5EFFEA4F-AD8F-463F-95DC-0A123572901E,04F6759F-BFE2-4BDE-999F-C8AE2AE92C05,3647CB82-C0DA-4864-A2C2-387FDED2D95A,3AB1B8F9-4180-4DB0-AA8D-8C6BD2104FC4,84F56A7A-7928-4AFF-9F30-B1BE4666F7D5,22852C0C-DB89-4F59-8ADA-5CDE557EF150,821B6F54-10D7-465D-846B-AA1CFC874954,0E61855E-44CB-462E-A497-B8D436583237,1F7FDE85-F6C4-4977-80A6-960F89FD24FD";
|
|
|
+ $("#methodchoose").show();
|
|
|
+ this.selected();
|
|
|
+ }
|
|
|
+ else if (this.machine == "Y5Back") {
|
|
|
+ this.machineid = "7d8cbeed-ce3c-442a-8a58-5e0242b1a488"; $("#devicechoose").hide();
|
|
|
+ $("#methodchoose").hide();
|
|
|
+ $("#container2").hide();
|
|
|
+ $(".date").datepicker("destroy");
|
|
|
+ $(".date").datepicker({
|
|
|
+ minViewMode: 'days',
|
|
|
+ format: 'yyyy-mm-dd',
|
|
|
+ language: 'zh-CN',
|
|
|
+ autoclose: true,
|
|
|
+ todayBtn: 'linked'
|
|
|
+ }).on('changeDate', function () {
|
|
|
+
|
|
|
+ }).on('keydown', function (e) {
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ var date1 = new Date(new Date().setDate(new Date().getDate() - 7));
|
|
|
+ var date2 = new Date(new Date().setDate(new Date().getDate() - 1));
|
|
|
+ var date1_1 = moment(date1);
|
|
|
+ var date2_1 = moment(date2);
|
|
|
+ $("#date1").val(date1_1.format('YYYY-MM-DD'));
|
|
|
+ $("#date2").val(date2_1.format('YYYY-MM-DD'));
|
|
|
+ }
|
|
|
+ $("#container2").hide();
|
|
|
+
|
|
|
+ this.outputs = [
|
|
|
+ {
|
|
|
+
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ $(".date").datepicker({
|
|
|
+ format: 'yyyy-mm-dd',
|
|
|
+ language: 'zh-CN',
|
|
|
+ autoclose: true,
|
|
|
+ todayBtn: 'linked'
|
|
|
+ }).on('changeDate', function () {
|
|
|
+
|
|
|
+ }).on('keydown', function (e) {
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+
|
|
|
+ //zTreeObj = $.fn.zTree.init($("#treeDemo"), settings, res); //初始化树
|
|
|
+ //zTreeObj.expandAll(true); //true 节点全部展开、false节点收缩
|
|
|
+
|
|
|
+ this.dom = document.getElementById('container1');
|
|
|
+ this.myChart = echarts.init(this.dom, 'vintage', {
|
|
|
+ renderer: 'canvas',
|
|
|
+ useDirtyRect: false
|
|
|
+ });
|
|
|
+ this.dom_2 = document.getElementById('container2');
|
|
|
+ this.myChart_2 = echarts.init(this.dom_2, 'vintage', {
|
|
|
+ renderer: 'canvas',
|
|
|
+ useDirtyRect: false
|
|
|
+ });
|
|
|
+ this.option_1 = {
|
|
|
+ grid: {
|
|
|
+ left: '4%',
|
|
|
+ right: '10%',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ right: '10%',
|
|
|
+ feature: {
|
|
|
+ dataZoom: { yAxisIndex: 'none' },
|
|
|
+ mySaveAsExcel: {
|
|
|
+ show: true,
|
|
|
+ title: 'save excel',
|
|
|
+ icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
|
|
|
+ onclick: () => {
|
|
|
+ this.exportExcelTemplate();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ iconStyle: {
|
|
|
+ borderColor: "white",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#008080', '#546fc6'],
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ axisLabel: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ max: 100,
|
|
|
+ axisLabel: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14,
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true, // 是否显示轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e0e6f1', // 刻度线的颜色
|
|
|
+ width: 1, // 刻度线的宽度
|
|
|
+ type: 'dashed' // 刻度线的类型
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ //max: 8000,
|
|
|
+ axisLabel: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14,
|
|
|
+ formatter: '{value} pcs'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false, // 是否显示轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e0e6f1', // 刻度线的颜色
|
|
|
+ width: 1, // 刻度线的宽度
|
|
|
+ type: 'dashed' // 刻度线的类型
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ legend: {
|
|
|
+ data: ['稼动率', '待料率', '报警率', '换料率', '产能'],
|
|
|
+ textStyle: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: []
|
|
|
+ };
|
|
|
+ this.option_2 = {
|
|
|
+ title: {
|
|
|
+ left: 'center',
|
|
|
+ text: 'Y5 Chamber 9台平均稼动率',
|
|
|
+ textStyle: {
|
|
|
+ color: "white"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '4%',
|
|
|
+ right: '10%',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ right: '10%',
|
|
|
+ feature: {
|
|
|
+ dataZoom: { yAxisIndex: 'none' }
|
|
|
+ },
|
|
|
+ iconStyle: {
|
|
|
+ borderColor: "white",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#008080', '#546fc6'],
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ axisLabel: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ max: function (value) {
|
|
|
+ var val = Math.ceil(value.max * 1.2);
|
|
|
+ if (val >= 100) {
|
|
|
+ return 100;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14,
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true, // 是否显示轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e0e6f1', // 刻度线的颜色
|
|
|
+ width: 1, // 刻度线的宽度
|
|
|
+ type: 'dashed' // 刻度线的类型
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ //max: 8000,
|
|
|
+ axisLabel: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14,
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false, // 是否显示轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e0e6f1', // 刻度线的颜色
|
|
|
+ width: 1, // 刻度线的宽度
|
|
|
+ type: 'dashed' // 刻度线的类型
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ legend: {
|
|
|
+ data: ['平均稼动率', '平均待料率', '平均故障率'],
|
|
|
+ textStyle: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ "top": "5.5%"
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.option_3 = {
|
|
|
+ title: {
|
|
|
+ left: 'center',
|
|
|
+ text: 'Y5 Chamber 单台稼动率明细',
|
|
|
+ textStyle: {
|
|
|
+ color: "white"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: '10%',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ right: '10%',
|
|
|
+ feature: {
|
|
|
+ dataZoom: { yAxisIndex: 'none' }
|
|
|
+ },
|
|
|
+ iconStyle: {
|
|
|
+ borderColor: "white",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ color: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#008080', '#546fc6'],
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: [],
|
|
|
+ axisLabel: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14,
|
|
|
+ interval: 0,
|
|
|
+ rotate: 30
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ max: function (value) {
|
|
|
+ var val = Math.ceil(value.max * 1.2);
|
|
|
+ if (val >= 100) {
|
|
|
+ return 100;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return val;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14,
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true, // 是否显示轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e0e6f1', // 刻度线的颜色
|
|
|
+ width: 1, // 刻度线的宽度
|
|
|
+ type: 'dashed' // 刻度线的类型
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ //max: 8000,
|
|
|
+ axisLabel: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14,
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false, // 是否显示轴线
|
|
|
+ lineStyle: {
|
|
|
+ color: '#e0e6f1', // 刻度线的颜色
|
|
|
+ width: 1, // 刻度线的宽度
|
|
|
+ type: 'dashed' // 刻度线的类型
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ legend: {
|
|
|
+ data: ['稼动率', '待机率', '故障率'],
|
|
|
+ textStyle: {
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ "top": "5.5%"
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '稼动率',
|
|
|
+ data: [],
|
|
|
+ type: 'bar',
|
|
|
+ stack: "stack1",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '待机率',
|
|
|
+ data: [],
|
|
|
+ type: 'bar',
|
|
|
+ stack: "stack1",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '故障率',
|
|
|
+ data: [],
|
|
|
+ type: 'bar',
|
|
|
+ stack: "stack1",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.myChart.on('click', (params) => this.getOutputs(params, this.mode));
|
|
|
+ if (this.option_1 && typeof option_1 === 'object') {
|
|
|
+ this.myChart.setOption(this.option_1);
|
|
|
+ }
|
|
|
+ if (this.option_2 && typeof option_2 === 'object') {
|
|
|
+ this.myChart.setOption(this.option_2);
|
|
|
+ }
|
|
|
+ this.myChart_2.on('click', (params) => this.getOutputs(params, this.mode));
|
|
|
+ if (this.option_3 && typeof option_3 === 'object') {
|
|
|
+ this.myChart_2.setOption(this.option_3);
|
|
|
+ }
|
|
|
+ window.addEventListener('resize', this.myChart.resize);
|
|
|
+ window.addEventListener('resize', this.myChart_2.resize);
|
|
|
+ },
|
|
|
+ getOutputs(params, mode) {
|
|
|
+ console.log(params);
|
|
|
+ if (params.componentType == 'series') {
|
|
|
+ var oee;
|
|
|
+ if (mode == 1) {
|
|
|
+ console.log(this.oees_1)
|
|
|
+ $("#tbdata").attr("class", "col-md-12");
|
|
|
+ oee = this.oees_1[params.dataIndex];
|
|
|
+ this.outputInfo = oee.date + ' ' + oee.shift;
|
|
|
+ this.outputs = [];
|
|
|
+ this.outputs = oee.outPutPerHours;
|
|
|
+ var flagList = [false, false, false, false, false];
|
|
|
+ var num = 8;
|
|
|
+ for (let i = 0; i < this.OEEExtendSetting2.length; i++) {
|
|
|
+ if (this.OEEExtendSetting2[i] != "") {
|
|
|
+ flagList[i] = true;
|
|
|
+ num++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var width = 62 / (num - 4);
|
|
|
+ var htmlstr = '<thead>< tr >'
|
|
|
+ + '<th style="width: 10%">时段</th>'
|
|
|
+ + '<th style="width: 10%">机种</th>'
|
|
|
+ + '<th style="width: ' + width + '%">运行时间</th>'
|
|
|
+ + '<th style="width: ' + width + '%">报警时间</th>'
|
|
|
+ + '<th style="width: ' + width + '%">待料时间</th>';
|
|
|
+ for (let i = 0; i < flagList.length; i++) {
|
|
|
+ if (i == 3) {
|
|
|
+ htmlstr += '<th style="width: 10%">报警次数</th>';
|
|
|
+ }
|
|
|
+ if (flagList[i]) {
|
|
|
+ htmlstr = htmlstr + '<th style="width: ' + width + '%">' + this.OEEExtendSetting2[i] + '</th>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var moduleTypelist = [];
|
|
|
+ var numlist = [0, 0, 0];
|
|
|
+ htmlstr = htmlstr
|
|
|
+ + ' <th style = "width: 8%"> 产能</th> '
|
|
|
+ + '<th style="width: 8%">TT</th>';
|
|
|
+ for (var item in this.outputs) {
|
|
|
+ if (!moduleTypelist.includes(this.outputs[item].moduleType)) {
|
|
|
+ moduleTypelist.push(this.outputs[item].moduleType);
|
|
|
+ }
|
|
|
+ htmlstr = htmlstr + '<tbody><tr>'
|
|
|
+ + '<td>' + this.outputs[item].period + '</td>'
|
|
|
+ + '<td>' + this.outputs[item].moduleType + '</td>'
|
|
|
+ + '<td>' + Math.round(this.outputs[item].autoRunTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(this.outputs[item].alarmTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(this.outputs[item].idleTime / 60 * 10) / 10 + '</td>';
|
|
|
+ if (flagList[0]) {
|
|
|
+ htmlstr = htmlstr + '<td>' + Math.round(this.outputs[item].loadMATTime / 60 * 10) / 10 + '</td>';
|
|
|
+ }
|
|
|
+ if (flagList[1]) {
|
|
|
+ htmlstr = htmlstr + '<td>' + Math.round(this.outputs[item].reservedOne / 60 * 10) / 10 + '</td>';
|
|
|
+ }
|
|
|
+ if (flagList[2]) {
|
|
|
+ htmlstr = htmlstr + '<td>' + Math.round(this.outputs[item].reservedThree / 60 * 10) / 10 + '</td>';
|
|
|
+ }
|
|
|
+ htmlstr = htmlstr + '<td>' + this.outputs[item].alarmSum + '</td>';
|
|
|
+ numlist[0] += this.outputs[item].alarmSum;
|
|
|
+ if (flagList[3]) {
|
|
|
+ numlist[1] += this.outputs[item].loadMATSum;
|
|
|
+ htmlstr = htmlstr + '<td>' + this.outputs[item].loadMATSum + '</td>';
|
|
|
+ }
|
|
|
+ if (flagList[4]) {
|
|
|
+ numlist[2] += this.outputs[item].reservedTwo;
|
|
|
+ htmlstr = htmlstr + '<td>' + this.outputs[item].reservedTwo + '</td>';
|
|
|
+ }
|
|
|
+ htmlstr = htmlstr + '<td>' + this.outputs[item].outPut + '</td>'
|
|
|
+ + '<td>' + this.outputs[item].tt + '</td>'
|
|
|
+ + '</tr></tbody>';
|
|
|
+ }
|
|
|
+ htmlstr = htmlstr + '<tbody><tr>'
|
|
|
+ + '<td>合计</td>'
|
|
|
+ + '<td>' + moduleTypelist.toString() + '</td>'
|
|
|
+ + '<td>' + Math.round(oee.runTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(oee.downTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(oee.idelTime / 60 * 10) / 10 + '</td>';
|
|
|
+ if (flagList[0]) {
|
|
|
+ htmlstr = htmlstr + '<td>' + Math.round(oee.loadMATTime / 60 * 10) / 10 + '</td>';
|
|
|
+ }
|
|
|
+ if (flagList[1]) {
|
|
|
+ htmlstr = htmlstr + '<td>' + Math.round(oee.reservedOne / 60 * 10) / 10 + '</td>';
|
|
|
+ }
|
|
|
+ if (flagList[2]) {
|
|
|
+ htmlstr = htmlstr + '<td>' + Math.round(oee.reservedThree / 60 * 10) / 10 + '</td>';
|
|
|
+ }
|
|
|
+ htmlstr = htmlstr + '<td>' + numlist[0] + '</td>';
|
|
|
+ if (flagList[3]) {
|
|
|
+ htmlstr = htmlstr + '<td>' + numlist[1] + '</td>';
|
|
|
+ }
|
|
|
+ if (flagList[4]) {
|
|
|
+ htmlstr = htmlstr + '<td>' + numlist[2] + '</td>';
|
|
|
+ }
|
|
|
+ var TT = 0;
|
|
|
+ if (oee.outputs != 0) {
|
|
|
+ TT = Math.round(oee.runTime / oee.outputs * 10) / 10;
|
|
|
+ }
|
|
|
+ htmlstr = htmlstr
|
|
|
+ + '<td>' + oee.outputs + '</td>'
|
|
|
+ + '<td>' + TT + '</td>'
|
|
|
+ + '</tr></tbody>';
|
|
|
+ $("#data").html(htmlstr);
|
|
|
+ }
|
|
|
+ else if (mode == 2) {
|
|
|
+ $("#tbdata").attr("class", "col-md-5");
|
|
|
+ if (params.seriesName == "平均稼动率" || params.seriesName == "平均待料率" || params.seriesName == "平均故障率") {
|
|
|
+ this.EchartsDataIndex = params.dataIndex;
|
|
|
+ var runratedata = [];
|
|
|
+ var idleratedata = [];
|
|
|
+ var downratedata = [];
|
|
|
+ var x_data = [];
|
|
|
+ var outputs_temp = {};
|
|
|
+
|
|
|
+ for (var item in this.oees_2) {
|
|
|
+ for (var item2 in this.CheckedChamber) {
|
|
|
+ if (item == this.CheckedChamber[item2].id) {
|
|
|
+ x_data.push(this.CheckedChamber[item2].name);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var outputperhours = this.oees_2[item][params.dataIndex].outPutPerHours;
|
|
|
+ for (var item3 in outputperhours) {
|
|
|
+ if (outputperhours[item3].dataTime in outputs_temp) {
|
|
|
+ outputs_temp[outputperhours[item3].dataTime].autoRunTime += outputperhours[item3].autoRunTime;
|
|
|
+ outputs_temp[outputperhours[item3].dataTime].idleTime += outputperhours[item3].idleTime;
|
|
|
+ outputs_temp[outputperhours[item3].dataTime].alarmTime += outputperhours[item3].alarmTime;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ outputs_temp[outputperhours[item3].dataTime] = {
|
|
|
+ "period": outputperhours[item3].period,
|
|
|
+ "dataTime": outputperhours[item3].dataTime,
|
|
|
+ "moduleType": outputperhours[item3].moduleType,
|
|
|
+ "autoRunTime": outputperhours[item3].autoRunTime,
|
|
|
+ "idleTime": outputperhours[item3].idleTime,
|
|
|
+ "alarmTime": outputperhours[item3].alarmTime
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ runratedata.push(this.oees_2[item][params.dataIndex].runTimeRate);
|
|
|
+ idleratedata.push(this.oees_2[item][params.dataIndex].idelTimeRate);
|
|
|
+ downratedata.push(this.oees_2[item][params.dataIndex].downTimeRate);
|
|
|
+ }
|
|
|
+ this.option_3.series[0].data = runratedata;
|
|
|
+ this.option_3.series[1].data = idleratedata;
|
|
|
+ this.option_3.series[2].data = downratedata;
|
|
|
+ this.option_3.xAxis.data = x_data;
|
|
|
+
|
|
|
+ $("#container2").show();
|
|
|
+
|
|
|
+ this.myChart_2.clear();
|
|
|
+ this.myChart_2.setOption(this.option_3, true);//true重绘
|
|
|
+ this.myChart_2.resize();
|
|
|
+
|
|
|
+
|
|
|
+ this.outputInfo = params.name + "【汇总】";
|
|
|
+ var htmlstr = '<thead>< tr >'
|
|
|
+ + '<th style="width: 10%">时间</th>'
|
|
|
+ + '<th style="width: 10%">机种</th>'
|
|
|
+ + '<th style="width: 10%">运行时间</th>'
|
|
|
+ + '<th style="width: 10%">故障时间</th>'
|
|
|
+ + '<th style="width: 10%">待料时间</th>'
|
|
|
+ if ($("#selectMonth").val() == 1) {
|
|
|
+ for (var item in outputs_temp) {
|
|
|
+ htmlstr = htmlstr + '<tbody><tr>'
|
|
|
+ + '<td>' + outputs_temp[item].period + '</td>'
|
|
|
+ + '<td>' + outputs_temp[item].moduleType + '</td>'
|
|
|
+ + '<td>' + Math.round(outputs_temp[item].autoRunTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(outputs_temp[item].alarmTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(outputs_temp[item].idleTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '</tr></tbody>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ for (var item in outputs_temp) {
|
|
|
+ var datetime = moment(outputs_temp[item].dataTime);
|
|
|
+ htmlstr = htmlstr + '<tbody><tr>'
|
|
|
+ + '<td>' + datetime.format('YYYY-MM-DD') + '</td>'
|
|
|
+ + '<td>' + outputs_temp[item].moduleType + '</td>'
|
|
|
+ + '<td>' + Math.round(outputs_temp[item].autoRunTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(outputs_temp[item].alarmTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(outputs_temp[item].idleTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '</tr></tbody>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $("#data").html(htmlstr);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ var outputperhours = this.oees_2[Object.keys(this.oees_2)[params.dataIndex]][this.EchartsDataIndex].outPutPerHours;
|
|
|
+ var datetimestr = this.oees_2[Object.keys(this.oees_2)[params.dataIndex]][this.EchartsDataIndex].date;
|
|
|
+ this.outputInfo = datetimestr + "【" + params.name + "】";
|
|
|
+ var htmlstr = '<thead>< tr >'
|
|
|
+ + '<th style="width: 10%">时间</th>'
|
|
|
+ + '<th style="width: 10%">机种</th>'
|
|
|
+ + '<th style="width: 10%">运行时间</th>'
|
|
|
+ + '<th style="width: 10%">报警时间</th>'
|
|
|
+ + '<th style="width: 10%">待料时间</th>'
|
|
|
+ if ($("#selectMonth").val() == 1) {
|
|
|
+ for (var item in outputperhours) {
|
|
|
+ htmlstr = htmlstr + '<tbody><tr>'
|
|
|
+ + '<td>' + outputperhours[item].period + '</td>'
|
|
|
+ + '<td>' + outputperhours[item].moduleType + '</td>'
|
|
|
+ + '<td>' + Math.round(outputperhours[item].autoRunTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(outputperhours[item].alarmTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(outputperhours[item].idleTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '</tr></tbody>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ for (var item in outputperhours) {
|
|
|
+ var datetime = moment(outputperhours[item].dataTime);
|
|
|
+ htmlstr = htmlstr + '<tbody><tr>'
|
|
|
+ + '<td>' + datetime.format('YYYY-MM-DD') + '</td>'
|
|
|
+ + '<td>' + outputperhours[item].moduleType + '</td>'
|
|
|
+ + '<td>' + Math.round(outputperhours[item].autoRunTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(outputperhours[item].alarmTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '<td>' + Math.round(outputperhours[item].idleTime / 60 * 10) / 10 + '</td>'
|
|
|
+ + '</tr></tbody>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $("#data").html(htmlstr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getOEES() {
|
|
|
+ if ($("#menuContent").css("display") == "block") {
|
|
|
+ $("#menuContent").css("display", "none");
|
|
|
+ }
|
|
|
+ let _this = this
|
|
|
+ if (_this.machine == "Y5Chamber") {
|
|
|
+ _this.mode = 2;
|
|
|
+ _this.param_temp.dataIndex = 14;
|
|
|
+ $("#methodchoose").show();
|
|
|
+ if ($("#selectMonth").val() == 1 && Math.floor(Math.abs(Date.parse($("#date2").val()) - Date.parse($("#date1").val())) / (1000 * 3600 * 24)) > 14) {
|
|
|
+ alert("按天统计时，不可超过15日！!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $.ajax({
|
|
|
+ url: '/EYZManufacturingPlatform/GetMachineStatisticV2',
|
|
|
+ type: 'POST',
|
|
|
+ async: false,
|
|
|
+ data: {
|
|
|
+ "id": _this.machineid,
|
|
|
+ "startTime": $("#date1").val(),
|
|
|
+ "endTime": $("#date2").val(),
|
|
|
+ "peroid": $("#selectMonth").val()
|
|
|
+ },
|
|
|
+ success: function (rev) {
|
|
|
+ if (rev.code === 0) {
|
|
|
+ _this.oees_2 = rev.data;
|
|
|
+ var xData = [];
|
|
|
+ _this.option_2.series = [];
|
|
|
+ var chambernum = 0;
|
|
|
+ var avgrunrate = [];
|
|
|
+ var avgidlerate = [];
|
|
|
+ var avgdownrate = [];
|
|
|
+ for (var i in rev.data) {
|
|
|
+ for (var k in rev.data[i]) {
|
|
|
+ if (chambernum == 0) {
|
|
|
+ xData.push(rev.data[i][k].date);
|
|
|
+ avgrunrate.push(rev.data[i][k].runTimeRate);
|
|
|
+ avgidlerate.push(rev.data[i][k].idelTimeRate);
|
|
|
+ avgdownrate.push(rev.data[i][k].downTimeRate);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ avgrunrate[k] += rev.data[i][k].runTimeRate;
|
|
|
+ avgidlerate[k] += rev.data[i][k].idelTimeRate;
|
|
|
+ avgdownrate[k] += rev.data[i][k].downTimeRate;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ chambernum++;
|
|
|
+ }
|
|
|
+ for (var item in avgrunrate) {
|
|
|
+ avgrunrate[item] = (avgrunrate[item] / chambernum).toFixed(1);
|
|
|
+ avgidlerate[item] = (avgidlerate[item] / chambernum).toFixed(1);
|
|
|
+ avgdownrate[item] = (avgdownrate[item] / chambernum).toFixed(1);
|
|
|
+ }
|
|
|
+ _this.option_2.series.push({
|
|
|
+ type: 'value',
|
|
|
+ name: '平均稼动率',
|
|
|
+ data: avgrunrate,
|
|
|
+ type: 'bar',
|
|
|
+ stack: "stack1",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _this.option_2.series.push({
|
|
|
+ type: 'value',
|
|
|
+ name: '平均待料率',
|
|
|
+ data: avgidlerate,
|
|
|
+ type: 'bar',
|
|
|
+ stack: "stack1",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _this.option_2.series.push({
|
|
|
+ type: 'value',
|
|
|
+ name: '平均故障率',
|
|
|
+ data: avgdownrate,
|
|
|
+ type: 'bar',
|
|
|
+ stack: "stack1",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _this.option_2.xAxis.data = xData;
|
|
|
+ _this.myChart.clear();
|
|
|
+ _this.myChart.setOption(_this.option_2, true);//true重绘
|
|
|
+ _this.param_temp.dataIndex = xData.length - 1;
|
|
|
+ _this.param_temp.seriesName = '平均稼动率';
|
|
|
+ _this.param_temp.name = xData[xData.length - 1];
|
|
|
+
|
|
|
+ } else {
|
|
|
+ alert(rev.message);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.mode = 1;
|
|
|
+ $("#methodchoose").hide();
|
|
|
+ $.ajax({
|
|
|
+ url: '/EYZManufacturingPlatform/GetMachineStatisticV1',
|
|
|
+ type: 'POST',
|
|
|
+ async: false,
|
|
|
+ data: {
|
|
|
+ "id": _this.machineid,
|
|
|
+ "startTime": $("#date1").val(),
|
|
|
+ "endTime": $("#date2").val()
|
|
|
+ },
|
|
|
+ success: function (rev) {
|
|
|
+ if (rev.code === 0) {
|
|
|
+ $.ajax({
|
|
|
+ url: '/EYZManufacturingPlatform/GetOEEExtendSetting',
|
|
|
+ type: 'POST',
|
|
|
+ async: false,
|
|
|
+ data: {
|
|
|
+ "id": _this.machineid
|
|
|
+ },
|
|
|
+ success: function (rst) {
|
|
|
+ if (rst.code != 0 || rst.data == "") {
|
|
|
+ _this.OEEExtendSetting1 = ["", "", ""];
|
|
|
+ _this.OEEExtendSetting2 = ["", "", "", "", ""];
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ var settinglist = rst.data.split(",");
|
|
|
+ _this.OEEExtendSetting1 = ["", "", ""];
|
|
|
+ _this.OEEExtendSetting2 = ["", "", "", "", ""];
|
|
|
+ if (settinglist[0] != '') {
|
|
|
+ if (settinglist[0] == "换料时间") {
|
|
|
+ _this.OEEExtendSetting1[0] = "换料率";
|
|
|
+ _this.OEEExtendSetting2[0] = "换料时间";
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ _this.OEEExtendSetting1[0] = settinglist[0] + "占比";
|
|
|
+ _this.OEEExtendSetting2[0] = settinglist[0];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (settinglist[2] != "") {
|
|
|
+ _this.OEEExtendSetting1[1] = settinglist[2] + "占比";
|
|
|
+ _this.OEEExtendSetting2[1] = settinglist[2];
|
|
|
+ }
|
|
|
+ if (settinglist[4] != "") {
|
|
|
+ _this.OEEExtendSetting1[2] = settinglist[4] + "占比";
|
|
|
+ _this.OEEExtendSetting2[2] = settinglist[4];
|
|
|
+ }
|
|
|
+ if (settinglist[1] != "") {
|
|
|
+ _this.OEEExtendSetting2[3] = settinglist[1];
|
|
|
+ }
|
|
|
+ if (settinglist[3] != "") {
|
|
|
+ _this.OEEExtendSetting2[4] = settinglist[3];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ _this.oees_1 = rev.data;
|
|
|
+ var xData = [];
|
|
|
+ var yDataProductA = [];
|
|
|
+ var yDataProductB = [];
|
|
|
+ var yDataProductC = [];
|
|
|
+ var yDataProductD = [];
|
|
|
+ var yDataProductE = [];//loadmatt
|
|
|
+ var yDataProductF = [];//reservedOne
|
|
|
+ var yDataProductG = [];//reservedThree
|
|
|
+
|
|
|
+ for (var i = 0; i < rev.data.length; i++) {
|
|
|
+ xData.push(rev.data[i].date + ' ' + rev.data[i].shift);
|
|
|
+ yDataProductA.push(rev.data[i].outputs);
|
|
|
+ yDataProductB.push(rev.data[i].runTimeRate);
|
|
|
+ yDataProductC.push(rev.data[i].idelTimeRate);
|
|
|
+ yDataProductD.push(rev.data[i].downTimeRate);
|
|
|
+ yDataProductE.push(rev.data[i].loadMATTimeRate);
|
|
|
+ yDataProductF.push(rev.data[i].reservedOneTimeRate);
|
|
|
+ yDataProductG.push(rev.data[i].reservedThreeTimeRate);
|
|
|
+ }
|
|
|
+
|
|
|
+ _this.option_1.series = [];
|
|
|
+ _this.option_1.xAxis.data = xData;
|
|
|
+ _this.option_1.series.push({
|
|
|
+ type: 'value',
|
|
|
+ name: '稼动率',
|
|
|
+ data: yDataProductB,
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'toral',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _this.option_1.series.push({
|
|
|
+ type: 'value',
|
|
|
+ name: '待料率',
|
|
|
+ data: yDataProductC,
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'toral',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _this.option_1.series.push({
|
|
|
+ type: 'value',
|
|
|
+ name: '故障率',
|
|
|
+ data: yDataProductD,
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'toral',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _this.option_1.color = ['#5b9bd5', '#ed7d31', '#a5a5a5'];
|
|
|
+ _this.option_1.legend.data = ["稼动率", "待料率", "故障率"];
|
|
|
+ var loadmatt = _this.OEEExtendSetting1[0];
|
|
|
+ if (loadmatt != "") {
|
|
|
+ _this.option_1.series.push({
|
|
|
+ type: 'value',
|
|
|
+ name: _this.OEEExtendSetting1[0],
|
|
|
+ data: yDataProductE,
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'toral',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _this.option_1.legend.data.push(_this.OEEExtendSetting1[0]);
|
|
|
+ _this.option_1.color.push('#008080');
|
|
|
+ }
|
|
|
+ var reservedOne = _this.OEEExtendSetting1[1];
|
|
|
+ if (reservedOne != "") {
|
|
|
+ _this.option_1.series.push({
|
|
|
+ type: 'value',
|
|
|
+ name: reservedOne,
|
|
|
+ data: yDataProductF,
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'toral',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _this.option_1.legend.data.push(_this.OEEExtendSetting1[1]);
|
|
|
+ _this.option_1.color.push('#f47a75');
|
|
|
+ }
|
|
|
+ var reservedTwo = _this.OEEExtendSetting1[2];
|
|
|
+ if (reservedTwo != "") {
|
|
|
+ _this.option_1.series.push({
|
|
|
+ type: 'value',
|
|
|
+ name: reservedTwo,
|
|
|
+ data: yDataProductG,
|
|
|
+ type: 'bar',
|
|
|
+ stack: 'toral',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _this.option_1.legend.data.push(_this.OEEExtendSetting1[2]);
|
|
|
+ _this.option_1.color.push('#765005');
|
|
|
+ }
|
|
|
+ _this.option_1.series.push({
|
|
|
+ type: 'value',
|
|
|
+ name: '产能',
|
|
|
+ data: yDataProductA,
|
|
|
+ type: 'bar',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} pcs'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: 'white',
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ yAxisIndex: 1
|
|
|
+ });
|
|
|
+ _this.option_1.legend.data.push("产能");
|
|
|
+ _this.option_1.color.push('#546fc6');
|
|
|
+
|
|
|
+ _this.myChart.clear();
|
|
|
+ _this.myChart.setOption(_this.option_1, true);//true重绘
|
|
|
+
|
|
|
+
|
|
|
+ _this.param_temp.dataIndex = xData.length - 1;
|
|
|
+ _this.param_temp.seriesName = '稼动率';
|
|
|
+ _this.param_temp.name = xData[xData.length - 1];
|
|
|
+ } else {
|
|
|
+ alert(rev.message);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ exportExcelTemplate() {
|
|
|
+ var sheetName = 'sheet1';
|
|
|
+ var workbook = {
|
|
|
+ SheetNames: [sheetName],
|
|
|
+ Sheets: {}
|
|
|
+ };
|
|
|
+
|
|
|
+ var sheet = {};
|
|
|
+
|
|
|
+ sheet['!ref'] = 'A1:' + 'K' + (this.oees_1.length + 1);
|
|
|
+ sheet['!cols'] = [
|
|
|
+ { wch: 10 },
|
|
|
+ { wch: 12 },
|
|
|
+ { wch: 12 },
|
|
|
+ { wch: 12 },
|
|
|
+ { wch: 12 },
|
|
|
+ { wch: 12 },
|
|
|
+ { wch: 12 },
|
|
|
+ { wch: 12 },
|
|
|
+ { wch: 12 },
|
|
|
+ { wch: 12 },
|
|
|
+ { wch: 12 }
|
|
|
+ ];
|
|
|
+
|
|
|
+ sheet['A1'] = { t: "s", v: "日期" };
|
|
|
+ sheet['B1'] = { t: "s", v: "班别" };
|
|
|
+ sheet['C1'] = { t: "s", v: "产能(pcs)" };
|
|
|
+ sheet['D1'] = { t: "s", v: "稼动时间(min)" };
|
|
|
+ sheet['E1'] = { t: "s", v: "待料时间(min)" };
|
|
|
+ sheet['F1'] = { t: "s", v: "报警时间(min)" };
|
|
|
+ sheet['G1'] = { t: "s", v: "换料时间(min)" };
|
|
|
+ sheet['H1'] = { t: "s", v: "稼动率(%)" };
|
|
|
+ sheet['I1'] = { t: "s", v: "待料率(%)" };
|
|
|
+ sheet['J1'] = { t: "s", v: "报警率(%)" };
|
|
|
+ sheet['K1'] = { t: "s", v: "换料率(%)" };
|
|
|
+
|
|
|
+ this.oees_1.forEach(function (row, i) {
|
|
|
+ sheet[String.fromCharCode(65) + (i + 2)] = { v: row.date };
|
|
|
+ sheet[String.fromCharCode(66) + (i + 2)] = { v: row.shift };
|
|
|
+ sheet[String.fromCharCode(67) + (i + 2)] = { v: row.outputs };
|
|
|
+ sheet[String.fromCharCode(68) + (i + 2)] = { v: row.runTime / 60 };
|
|
|
+ sheet[String.fromCharCode(69) + (i + 2)] = { v: row.idelTime / 60 };
|
|
|
+ sheet[String.fromCharCode(70) + (i + 2)] = { v: row.downTime / 60 };
|
|
|
+ sheet[String.fromCharCode(71) + (i + 2)] = { v: row.loadMATTime / 60 };
|
|
|
+ sheet[String.fromCharCode(72) + (i + 2)] = { v: row.runTimeRate };
|
|
|
+ sheet[String.fromCharCode(73) + (i + 2)] = { v: row.idelTimeRate };
|
|
|
+ sheet[String.fromCharCode(74) + (i + 2)] = { v: row.downTimeRate };
|
|
|
+ sheet[String.fromCharCode(75) + (i + 2)] = { v: row.loadMATTimeRate };
|
|
|
+ });
|
|
|
+
|
|
|
+ workbook.Sheets[sheetName] = sheet;
|
|
|
+
|
|
|
+ // 生成excel的配置项
|
|
|
+ var wopts = {
|
|
|
+ bookType: 'xlsx', // 要生成的文件类型
|
|
|
+ bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
|
|
|
+ type: 'binary'
|
|
|
+ };
|
|
|
+ var wbout = XLSX.write(workbook, wopts);
|
|
|
+ var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
|
|
|
+
|
|
|
+ // 字符串转ArrayBuffer
|
|
|
+ function s2ab(s) {
|
|
|
+ var buf = new ArrayBuffer(s.length);
|
|
|
+ var view = new Uint8Array(buf);
|
|
|
+ for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
|
|
|
+ return buf;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.openDownloadDialog(blob, '稼动数据.xlsx');
|
|
|
+ },
|
|
|
+ openDownloadDialog(url, saveName) {
|
|
|
+ if (typeof url == 'object' && url instanceof Blob) {
|
|
|
+ url = URL.createObjectURL(url); // 创建blob地址
|
|
|
+ }
|
|
|
+ var aLink = document.createElement('a');
|
|
|
+ aLink.href = url;
|
|
|
+ aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
|
|
|
+ var event;
|
|
|
+ if (window.MouseEvent) event = new MouseEvent('click');
|
|
|
+ else {
|
|
|
+ event = document.createEvent('MouseEvents');
|
|
|
+ event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
|
|
|
+ }
|
|
|
+ aLink.dispatchEvent(event);
|
|
|
+ },
|
|
|
+ selected() {
|
|
|
+ var v = $("#selectMonth").val();
|
|
|
+ if (v == 1 || v == 2 || v == "") {
|
|
|
+ $(".date").datepicker("destroy");
|
|
|
+ $(".date").datepicker({
|
|
|
+ minViewMode: 'days',
|
|
|
+ format: 'yyyy-mm-dd',
|
|
|
+ language: 'zh-CN',
|
|
|
+ autoclose: true,
|
|
|
+ todayBtn: 'linked'
|
|
|
+ }).on('changeDate', function () {
|
|
|
+
|
|
|
+ }).on('keydown', function (e) {
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ var date1 = new Date(new Date().setDate(new Date().getDate() - 15));
|
|
|
+ var date2 = new Date(new Date().setDate(new Date().getDate() - 1));
|
|
|
+ var date1_1 = moment(date1);
|
|
|
+ var date2_1 = moment(date2);
|
|
|
+ $("#date1").val(date1_1.format('YYYY-MM-DD'));
|
|
|
+ $("#date2").val(date2_1.format('YYYY-MM-DD'));
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ $(".date").datepicker("destroy");
|
|
|
+ $(".date").datepicker({
|
|
|
+ minViewMode: 'months',
|
|
|
+ format: 'yyyy-mm',
|
|
|
+ language: 'zh-CN',
|
|
|
+ autoclose: true,
|
|
|
+ todayBtn: 'linked'
|
|
|
+ }).on('changeDate', function () {
|
|
|
+
|
|
|
+ }).on('keydown', function (e) {
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ var date1 = new Date(new Date().setDate(new Date().getDate() - 7));
|
|
|
+ var date2 = new Date(new Date().setDate(new Date().getDate() - 1));
|
|
|
+ var date1_1 = moment(date1);
|
|
|
+ var date2_1 = moment(date2);
|
|
|
+ $("#date1").val(date1_1.format('YYYY-MM'));
|
|
|
+ $("#date2").val(date2_1.format('YYYY-MM'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+
|
|
|
+ },
|
|
|
+ created: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+ destroyed: function () {
|
|
|
+
|
|
|
+ }
|
|
|
+})
|
