wilson
/
ckt-kanban
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

看板改变

master
ruanqi 4 years ago
parent
2459f0253a
commit
715bfecc47
1 changed files with 143 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 208
      src/views/newScheduledBoard.vue

208
src/views/newScheduledBoard.vue
View File

@ -45,12 +45,56 @@
data() { data() {
return { return {
myChart: null, myChart: null,
number1:0,
number2:0,
option:null,
chartDom:null,
option2:null,
tableList:null,
pieList:null,
barList:null,
resourceId:'',
ip:'192.168.1.130'
} }
}, },
components: { components: {
TimeC TimeC
}, },
methods: { methods: {
searchData(){
let that = this;
$.ajax({
url: "/board/getNewScheduledData",
type: "post",
data: {ip:that.ip,number:that.number1
},
dataType: "json",
success: (data) => {
if (data.number==-1) {
}else {
that.number1=data.number;
that.pieList=data.pieList;
that.barList=data.barList;
that.resourceId=data.pieList[0].resourceId;
this.number2=0;
this.draw();
this.draw2()
$('#table').bootstrapTable('refresh');
window.setTimeout(() => {
$('#table').bootstrapTable('refresh');
}, 3000);
window.setTimeout(() => {
$('#table').bootstrapTable('refresh');
}, 6000);
window.setTimeout(() => {
$('#table').bootstrapTable('refresh');
}, 9000);
}
}
})
},
draw(){ draw(){
// if (data_temp[i].percentage >= 100) { // if (data_temp[i].percentage >= 100) {
if (true) { if (true) {
@ -58,9 +102,12 @@
} else { } else {
var color = '#fff300'; var color = '#fff300';
} }
let option = ({
if (this.myChart!=null) {
this.myChart.clear()
}
this.option = ({
title: [{ title: [{
text: '工序：' + "打磨",
text: '设备：' + this.pieList[0].resourceId,
// text: '工序：' + data_temp[i + x].itemNo, // text: '工序：' + data_temp[i + x].itemNo,
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'center', x: 'center',
@ -76,7 +123,7 @@
} }
}, },
{ {
text: '20%',
text: this.pieList[0].qtyPercent + '%',
// text: data_temp[i + x].percentage + '%', // text: data_temp[i + x].percentage + '%',
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'center', x: 'center',
@ -99,8 +146,8 @@
data: [ // 数据数组，name 为数据项名称，value 为数据项值 data: [ // 数据数组，name 为数据项名称，value 为数据项值
// {value: data_temp[i + x].approveQty, name: ''}, // {value: data_temp[i + x].approveQty, name: ''},
// {value: data_temp[i + x].unapproveQty, name: ''} // {value: data_temp[i + x].unapproveQty, name: ''}
{value: 20, name: ''},
{value: 80, name: ''}
{value: this.pieList[0].qtyReported, name: ''},
{value: this.pieList[0].qtyUnReported, name: ''}
], ],
color: ['#90ca75', '#ec6566'], color: ['#90ca75', '#ec6566'],
labelLine: { labelLine: {
@ -120,11 +167,15 @@
} }
] ]
}); });
this.myChart = echarts.init(document.getElementById('pie'));
this.myChart.setOption(option);
this.myChart = echarts.init(document.getElementById('pie'));
this.myChart.setOption(this.option);
}, },
tableInit() { tableInit() {
let that=this;
$('#table').bootstrapTable({ $('#table').bootstrapTable({
url: "/board/getNewScheduledTableData",
method: 'post', //请求方式（*）
contentType: 'application/x-www-form-urlencoded',
striped: true, //是否显示行间隔色 striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: false, //是否显示分页（*） pagination: false, //是否显示分页（*）
@ -132,7 +183,11 @@
sortOrder: "asc", //排序方式 sortOrder: "asc", //排序方式
queryParamsType: "undefined", //排序方式 queryParamsType: "undefined", //排序方式
queryParams: function queryParams(params) { //设置查询参数 queryParams: function queryParams(params) { //设置查询参数
var param = {
"resourceId": that.resourceId,
"number": that.number2,
};
return param;
}, },
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页 pageNumber: 1, //初始化加载第一页，默认第一页
@ -154,66 +209,80 @@
columns: [{ columns: [{
field: 't1',
field: 'seqno',
title: '派工单号', title: '派工单号',
halign:'left', halign:'left',
width: 100,
width: 80,
cellStyle: function () { cellStyle: function () {
return {css: {"height": "30px", "color": "yellow"}}
return {css: {"height": "20px", "color": "yellow"}}
} }
// }, {
// field: 'orderno',
// title: '订单号',
// halign:'left',
// width: 100,
// cellStyle: function () {
// return {css: {"height": "20px", "color": "yellow"}}
// }
}, { }, {
field: 't1',
title: '操作员工号',
halign:'left',
width: 100,
cellStyle: function () {
return {css: {"height": "30px", "color": "yellow"}}
}
}, {
field: 't1',
title: '设备编码',
field: 'partNo',
title: '物料编号',
halign:'left', halign:'left',
width: 100,
width: 60,
cellStyle: function () { cellStyle: function () {
return {css: {"height": "30px", "color": "yellow"}}
return {css: {"height": "20px", "color": "yellow"}}
} }
// }, {
// field: 'partDesc',
// title: '物料名称',
// halign:'left',
// width: 100,
// cellStyle: function () {
// return {css: {"height": "20px", "color": "yellow"}}
// }
}, { }, {
field: 't1',
title: '班次',
halign:'left',
width: 100,
cellStyle: function () {
return {css: {"height": "30px", "color": "yellow"}}
}
}, {
field: 't1',
field: 'qtyRequired',
title: '派工数量', title: '派工数量',
halign:'left', halign:'left',
width: 100,
// align:'right',
width: 60,
cellStyle: function () { cellStyle: function () {
return {css: {"height": "30px", "color": "yellow"}}
return {css: {"height": "20px", "color": "yellow"}}
} }
}, { }, {
field: 't1',
title: '已完工数量',
field: 'qtyReported',
title: '已完工数',
halign:'left', halign:'left',
width: 100,
// align:'right',
width: 60,
cellStyle: function () { cellStyle: function () {
return {css: {"height": "30px", "color": "yellow"}}
return {css: {"height": "20px", "color": "yellow"}}
} }
}, { }, {
field: 't1',
title: '未完工数量',
field: 'qtyUnReported',
title: '未完工数',
halign:'left', halign:'left',
width: 100,
// align:'right',
width: 60,
cellStyle: function () { cellStyle: function () {
return {css: {"height": "30px", "color": "yellow"}}
return {css: {"height": "20px", "color": "yellow"}}
},
formatter : function(value, row){
if(value<0){
return 0;
}else {
return value;
}
} }
} }
], ],
onLoadSuccess: function (data) { onLoadSuccess: function (data) {
if(data.total<5){
that.number2=0;
}else {
that.number2+=1;
}
} }
}); });
@ -232,16 +301,17 @@
}, },
draw2(){ draw2(){
let chartDom = document.getElementById('main');
let myChart = echarts.init(chartDom);
let option;
// document.getElementById('main').style.height="300px";
if(this.option!=null){
document.getElementById('main').removeAttribute('_echarts_instance_')
this.option = null
if (this.myChart2!=null) {
this.myChart2.clear()
} }
option = {
color:["#11e2b6", "#ff0000"],
this.myChart2 = echarts.init(document.getElementById('main'));
// document.getElementById('main').style.height="300px";
// if(this.option2!=null){
// document.getElementById('main').removeAttribute('_echarts_instance_')
// this.option2 = null
// }
this.option2 = {
color:["#90ca75", "#ec6566"],
legend: { legend: {
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
color: '#fff', color: '#fff',
@ -255,43 +325,43 @@
// data: xAxisData // data: xAxisData
data: [ data: [
{ {
value: '周一',
value: this.getDate(this.barList[6].strDate),
textStyle: { textStyle: {
color: '#EEE' color: '#EEE'
} }
}, },
{ {
value: '周二',
value: this.getDate(this.barList[5].strDate),
textStyle: { textStyle: {
color: '#EEE' color: '#EEE'
} }
}, },
{ {
value: '周三',
value: this.getDate(this.barList[4].strDate),
textStyle: { textStyle: {
color: '#EEE' color: '#EEE'
} }
}, },
{ {
value: '周四',
value: this.getDate(this.barList[3].strDate),
textStyle: { textStyle: {
color: '#EEE' color: '#EEE'
} }
}, },
{ {
value: '周五',
value: this.getDate(this.barList[2].strDate),
textStyle: { textStyle: {
color: '#EEE' color: '#EEE'
} }
}, },
{ {
value: '周六',
value: this.getDate(this.barList[1].strDate),
textStyle: { textStyle: {
color: '#EEE' color: '#EEE'
} }
}, },
{ {
value: '周日',
value: this.getDate(this.barList[0].strDate),
textStyle: { textStyle: {
color: '#EEE' color: '#EEE'
} }
@ -333,7 +403,7 @@
focus: 'series' focus: 'series'
}, },
// data: seriesData1 // data: seriesData1
data: [320, 332, 301, 334, 390, 330, 320]
data: [this.barList[6].num1, this.barList[5].num1, this.barList[4].num1, this.barList[3].num1, this.barList[2].num1, this.barList[1].num1, this.barList[0].num1]
}, },
{ {
name: '晚班', name: '晚班',
@ -342,19 +412,27 @@
focus: 'series' focus: 'series'
}, },
// data: seriesData2 // data: seriesData2
data: [120, 132, 101, 134, 90, 230, 210]
data: [this.barList[6].num2, this.barList[5].num2, this.barList[4].num2, this.barList[3].num2, this.barList[2].num2, this.barList[1].num2, this.barList[0].num2]
} }
] ]
}; };
option && myChart.setOption(option);
this.option2 && this.myChart2.setOption(this.option2);
},
getDate(value) {
var date = value.substring(5, 10);
return date;
},
pie(){
window.setInterval(() => {
this.searchData();
}, 12000);
} }
}, },
mounted() { mounted() {
this.draw();
this.tableInit(); this.tableInit();
this.data();
this.draw2();
this.searchData();
this. pie();
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save