|
|
|
@ -1,80 +1,132 @@ |
|
|
|
<template> |
|
|
|
<div class="container" > |
|
|
|
<div style="width:100%;height: 20%;text-align:center;"> |
|
|
|
<div style="width:100%;height: 19%;text-align:center;"> |
|
|
|
<div style="float: left;width: 25%;height: 100%;text-align:left; "> |
|
|
|
<div style="height: 60%;width: 100%;text-align: left;margin-top: 1%"> |
|
|
|
<label style="font-size: 40px;color: #9c0202;margin-left: 2%">Liftech</label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<TimeC></TimeC> |
|
|
|
<!-- <div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div>--> |
|
|
|
<div style="float: left;width: 25%;height: 100%;text-align:center;margin-left: 37% "> |
|
|
|
<div style="height: 40%;width: 100%;text-align: center;margin-top: 3%;"> |
|
|
|
<label style="font-size: 30px;color: #ffffff">生产情况看板</label> |
|
|
|
</div> |
|
|
|
<div style="height: 40%;width: 100%;text-align: center;margin-top: 0%;"> |
|
|
|
<label id="resourceIdName" style="font-size: 24px;color: #fff300"></label> |
|
|
|
<div style="float: left;width: 35%;height: 100%;text-align:center;margin-left: 7% "> |
|
|
|
<div style="height: 45%;width: 100%;text-align: center;margin-top: 3%;"> |
|
|
|
<label style="font-size: 30px;color: #ffffff">生产情况看板<br>Production Board</label> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="width:100%;height: 79%;"> |
|
|
|
<div style="float: left;height: 100%;width: 35%; "> |
|
|
|
<div style="height: 12%;width: 100%;margin-top: 1%"> |
|
|
|
<div |
|
|
|
style="width: 12%;height: 40%;float: left;margin-left: 18%;border-radius: 10px; background-color: #ec6566;"></div> |
|
|
|
<div style="width: 25%;height: 50%;float: left;margin-left: 3%;"> |
|
|
|
<label style="font-size: 16px;color:#ffffff; ">未完成</label> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style="width: 12%;height: 40%;float: left;margin-left: 1%;border-radius: 10px; background-color: #90ca75;"></div> |
|
|
|
<div style="width: 25%;height: 50%;float: left;margin-left: 3%;"> |
|
|
|
<label style="font-size: 16px;color:#ffffff; ">已完成</label> |
|
|
|
</div> |
|
|
|
<!-- <div style="float: left;height: 100%;width: 35%; ">--> |
|
|
|
<!-- <div style="height: 12%;width: 100%;margin-top: 1%">--> |
|
|
|
<!-- <div--> |
|
|
|
<!-- style="width: 12%;height: 40%;float: left;margin-left: 18%;border-radius: 10px; background-color: #ec6566;"></div>--> |
|
|
|
<!-- <div style="width: 25%;height: 50%;float: left;margin-left: 3%;">--> |
|
|
|
<!-- <label style="font-size: 16px;color:#ffffff; ">未完成</label>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div--> |
|
|
|
<!-- style="width: 12%;height: 40%;float: left;margin-left: 1%;border-radius: 10px; background-color: #90ca75;"></div>--> |
|
|
|
<!-- <div style="width: 25%;height: 50%;float: left;margin-left: 3%;">--> |
|
|
|
<!-- <label style="font-size: 16px;color:#ffffff; ">已完成</label>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- <div style="height: 88%;width: 100%;">--> |
|
|
|
<!-- <div id="pie" style="float:left;margin-left: 0px; margin-top: 0%; width: 100%; height:80%;"></div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<div style="float: left;height: 100%;width: 38%; "> |
|
|
|
<div style="height: 28%;width: 100%;margin-top: 0.5%" class="board2"> |
|
|
|
<el-table |
|
|
|
height="150" |
|
|
|
:data="tableList2" |
|
|
|
:cell-style="board2Function" |
|
|
|
style="width: 100%"> |
|
|
|
<el-table-column |
|
|
|
prop="qty1" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="40" |
|
|
|
label="排产数/PlanQty" |
|
|
|
:render-header="renderHeader" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="qty2" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="63" |
|
|
|
label="已入库/WarehouseQty" |
|
|
|
:render-header="renderHeader"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="qty3" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="60" |
|
|
|
label="未入库已生产/InProgressQty" |
|
|
|
:render-header="renderHeader"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="qty4" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="62" |
|
|
|
label="未生产/UnapproveQty" |
|
|
|
:render-header="renderHeader"> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<div style="height: 88%;width: 100%;"> |
|
|
|
<div id="pie" style="float:left;margin-left: 0px; margin-top: 0%; width: 100%; height:80%;"></div> |
|
|
|
<div style="height: 72%;width: 100%;"> |
|
|
|
<div id="pie" style="float:left;margin-left: 0px; margin-top: -3%; width: 100%; height:100%;"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="float: left;height: 45%;width: 58%;margin-left:3% " class="board"> |
|
|
|
<table class="table table-bordered" style="width:100%;font-size:16px;color: #ffffff" id="table"> |
|
|
|
</table> |
|
|
|
<div style="float: left;height: 53%;width: 53%;margin-left:3% " class="board"> |
|
|
|
<el-table |
|
|
|
:height="height" |
|
|
|
height="250" |
|
|
|
:data="tableList" |
|
|
|
style="width: 100%"> |
|
|
|
<el-table-column |
|
|
|
prop="resourceDesc" |
|
|
|
prop="resourceId" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="100" |
|
|
|
label="机台名称"> |
|
|
|
min-width="72" |
|
|
|
label="机台名称/Machine" |
|
|
|
:render-header="renderHeader" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="qtyRequired" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="100" |
|
|
|
label="排产数量"> |
|
|
|
min-width="75" |
|
|
|
label="排产数量/PlanQty" |
|
|
|
:render-header="renderHeader"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="qtyApprove" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="100" |
|
|
|
label="完成数量"> |
|
|
|
min-width="90" |
|
|
|
label="完成数量/ApproveQty" |
|
|
|
:render-header="renderHeader"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="qtyReported" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="100" |
|
|
|
label="已入库数量"> |
|
|
|
min-width="108" |
|
|
|
label="已入库数量/WarehouseQty" |
|
|
|
:render-header="renderHeader"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="qtyUnReported" |
|
|
|
header-align="center" |
|
|
|
align="center" |
|
|
|
min-width="100" |
|
|
|
label="未入库数量"> |
|
|
|
min-width="125" |
|
|
|
label="未入库数量/UnwarehouseQty" |
|
|
|
:render-header="renderHeader">> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<div style="float: left;height: 49%;width: 65%; "> |
|
|
|
<div style="float: left;height: 47%;width: 62%; "> |
|
|
|
<div id="main" style="width: 100%;height: 100%;margin-top: 0px"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -104,6 +156,7 @@ |
|
|
|
height:200, |
|
|
|
// ip:'', |
|
|
|
refreshTime:5, |
|
|
|
tableList2:[], |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
@ -115,6 +168,15 @@ |
|
|
|
getScheduledData().then(({data}) => { |
|
|
|
this.pieData=data.pieData; |
|
|
|
this.barList=data.barList; |
|
|
|
this.tableList2=[], |
|
|
|
this.tableList2.push(this.pieData); |
|
|
|
let pieData2={ |
|
|
|
qty1: '-', |
|
|
|
qty2: this.pieData.per2 +'%', |
|
|
|
qty3: this.pieData.per3 +'%', |
|
|
|
qty4: this.pieData.per4 +'%', |
|
|
|
} |
|
|
|
this.tableList2.push(pieData2) |
|
|
|
console.log(data.pieData) |
|
|
|
console.log(data.barList) |
|
|
|
this.number2=0; |
|
|
|
@ -143,40 +205,47 @@ |
|
|
|
if (this.myChart!=null) { |
|
|
|
this.myChart.clear() |
|
|
|
} |
|
|
|
// $("#resourceIdName").html("总完成情况"); |
|
|
|
|
|
|
|
this.option = ({ |
|
|
|
title: [{ |
|
|
|
text: '总完成情况' , |
|
|
|
text: '总生产情况\nProduction State' , |
|
|
|
// text: '工序：' + data_temp[i + x].itemNo, |
|
|
|
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） |
|
|
|
x: 'center', |
|
|
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） |
|
|
|
y: 'bottom', |
|
|
|
y: '264px', |
|
|
|
// itemGap设置主副标题纵向间隔，单位px，默认为10， |
|
|
|
backgroundColor: '#EEE', |
|
|
|
// 主标题文本样式设置 |
|
|
|
textStyle: { |
|
|
|
fontSize: 20, |
|
|
|
fontSize: 18, |
|
|
|
fontWeight: 'bolder', |
|
|
|
color: '#fff300' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: this.pieData.qtyPercent + '%', |
|
|
|
// text: data_temp[i + x].percentage + '%', |
|
|
|
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） |
|
|
|
x: 'center', |
|
|
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） |
|
|
|
y: 'center', |
|
|
|
// itemGap设置主副标题纵向间隔，单位px，默认为10， |
|
|
|
backgroundColor: 'rgba(0,0,0,0)', |
|
|
|
// 主标题文本样式设置 |
|
|
|
textStyle: { |
|
|
|
fontSize: 20, |
|
|
|
fontWeight: 'bolder', |
|
|
|
color: color |
|
|
|
}, |
|
|
|
}], |
|
|
|
// { |
|
|
|
// text: this.pieData.qtyPercent + '%', |
|
|
|
// // text: data_temp[i + x].percentage + '%', |
|
|
|
// // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） |
|
|
|
// x: 'center', |
|
|
|
// // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） |
|
|
|
// y: 'center', |
|
|
|
// // itemGap设置主副标题纵向间隔，单位px，默认为10， |
|
|
|
// backgroundColor: 'rgba(0,0,0,0)', |
|
|
|
// // 主标题文本样式设置 |
|
|
|
// textStyle: { |
|
|
|
// fontSize: 20, |
|
|
|
// fontWeight: 'bolder', |
|
|
|
// color: color |
|
|
|
// }, |
|
|
|
// } |
|
|
|
], |
|
|
|
// legend: { |
|
|
|
// orient: 'vertical', |
|
|
|
// left: 10, |
|
|
|
// data: ['直接访问', '邮件营销'], |
|
|
|
// color: ['#90ca75', '#ec6566'], |
|
|
|
// }, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '入库数量统计', |
|
|
|
@ -185,10 +254,11 @@ |
|
|
|
data: [ // 数据数组，name 为数据项名称，value 为数据项值 |
|
|
|
// {value: data_temp[i + x].approveQty, name: ''}, |
|
|
|
// {value: data_temp[i + x].unapproveQty, name: ''} |
|
|
|
{value: this.pieData.qtyApprove, name: ''}, |
|
|
|
{value: this.pieData.qtyUnApprove, name: ''} |
|
|
|
{value: this.pieData.qty2, name: ''}, |
|
|
|
{value: this.pieData.qty3, name: ''}, |
|
|
|
{value: this.pieData.qty4, name: ''} |
|
|
|
], |
|
|
|
color: ['#90ca75', '#ec6566'], |
|
|
|
color: ['#90ca75','#dbd81a', '#ec6566'], |
|
|
|
labelLine: { |
|
|
|
normal: { |
|
|
|
show: false |
|
|
|
@ -196,13 +266,17 @@ |
|
|
|
}, |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
position: 'outer', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）' |
|
|
|
position: 'inner', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）' |
|
|
|
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b} |
|
|
|
// {a}指series.name {b}指series.data的name |
|
|
|
// {c}指series.data的value {d}%指这一部分占总数的百分比 |
|
|
|
formatter: '{b}' |
|
|
|
// formatter: '{d}'+'%', |
|
|
|
formatter:function(data){ |
|
|
|
return data.percent.toFixed(1)+"%"; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
] |
|
|
|
}); |
|
|
|
@ -228,7 +302,7 @@ |
|
|
|
let valueApproveData=[]; |
|
|
|
for (let a = 0; a <this.barList.length ; a++) { |
|
|
|
let resourceData={ |
|
|
|
value: this.barList[a].resourceDesc, |
|
|
|
value: this.barList[a].resourceId, |
|
|
|
textStyle: { |
|
|
|
color: '#EEE' |
|
|
|
} |
|
|
|
@ -424,6 +498,24 @@ |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
renderHeader(h, { column, $index }) { |
|
|
|
return h("span", {}, [ |
|
|
|
h("span", {}, column.label.split("/")[0]), |
|
|
|
h("br"), |
|
|
|
h("span", {}, column.label.split("/")[1]) |
|
|
|
]); |
|
|
|
}, |
|
|
|
board2Function({row, column, rowIndex, columnIndex}){ |
|
|
|
if(columnIndex==1){ |
|
|
|
return 'background-color: #90ca75;' |
|
|
|
} |
|
|
|
if(columnIndex==2){ |
|
|
|
return 'background-color: #dbd81a;' |
|
|
|
} |
|
|
|
if(columnIndex==3){ |
|
|
|
return 'background-color: #ec6566;' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
created(){ |
|
|
|
@ -440,7 +532,7 @@ |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<<style > |
|
|
|
<style > |
|
|
|
.container { |
|
|
|
height: 109%; |
|
|
|
position: fixed; |
|
|
|
@ -481,4 +573,52 @@ |
|
|
|
.board .el-table, .el-table__expanded-cell { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
.el-table thead { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
.board .el-table th .cell { |
|
|
|
line-height: 20px; |
|
|
|
font-size: 15px; |
|
|
|
height: 40px; |
|
|
|
padding: 0px; |
|
|
|
color: yellow; |
|
|
|
} |
|
|
|
.board2 .el-table .cell { |
|
|
|
line-height: 18px; |
|
|
|
font-size: 18px; |
|
|
|
height: 18px; |
|
|
|
padding: 0px; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
/* 表格内背景颜色 */ |
|
|
|
.board2 .el-table th, .el-table tr,.el-table td{ |
|
|
|
border: 0; |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
/* 使表格背景透明 */ |
|
|
|
.board2 .el-table th, .el-table tr { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
/* 删除表格下横线 */ |
|
|
|
.board2 .el-table::before { |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 0px; |
|
|
|
} |
|
|
|
/* 表格表头字体颜色 */ |
|
|
|
.board2 .el-table, .el-table__expanded-cell { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.board2 .el-table th .cell { |
|
|
|
line-height: 18px; |
|
|
|
font-size: 13px; |
|
|
|
height: 36px; |
|
|
|
padding: 0px; |
|
|
|
color: white; |
|
|
|
} |
|
|
|
</style> |
