|
|
|
@@ -2,16 +2,16 @@ |
|
|
|
* @Author: zwq |
|
|
|
* @Date: 2021-07-19 15:18:30 |
|
|
|
* @LastEditors: zhp |
|
|
|
* @LastEditTime: 2024-04-03 17:14:03 |
|
|
|
* @LastEditTime: 2024-04-10 16:10:11 |
|
|
|
* @Description: |
|
|
|
--> |
|
|
|
<template> |
|
|
|
<div id="container" ref="container" class="visual-container" :style="styles"> |
|
|
|
<el-row class="container-title" :style="{ |
|
|
|
height: 88 + 'px', |
|
|
|
lineHeight: 88 + 'px', |
|
|
|
fontSize: 31 + 'px', |
|
|
|
}"> |
|
|
|
height: 88 + 'px', |
|
|
|
lineHeight: 88 + 'px', |
|
|
|
fontSize: 31 + 'px', |
|
|
|
}"> |
|
|
|
<img src="../../assets/img/logo.png" style="width: 1.1em; position: relative; top: 0.22em" alt="" /> |
|
|
|
许昌安彩深加工看板 |
|
|
|
<h3 class="unit">单位：河南汇融数字科技有限公司</h3> |
|
|
|
@@ -39,10 +39,23 @@ |
|
|
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%"> |
|
|
|
<base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'"> |
|
|
|
<div class="order" style="width: 100%; overflow: hidden scroll; height: 350px"> |
|
|
|
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: .5em"> |
|
|
|
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: .5em;overflow: hidden;"> |
|
|
|
<!-- <el-col :span="12"> --> |
|
|
|
|
|
|
|
<p class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</p> |
|
|
|
<!-- <div style="height: 34px;"> --> |
|
|
|
<span class="now-secondary-title" style="font-size: 14px;opacity: calc(.6);">{{ op.name }}</span> |
|
|
|
<el-divider class="split" v-if="op.specifications" direction="vertical"></el-divider> |
|
|
|
<!-- <span v-if="op.size" class="split"></span> --> |
|
|
|
<span v-if="op.specifications" class="orderSize" style="font-size: 14px;opacity: calc(.6);">{{ |
|
|
|
op.specifications }}</span> |
|
|
|
<el-divider class="split" v-if="op.planQuantity" direction="vertical"></el-divider> |
|
|
|
<span v-if="op.planQuantity" class="orderPlan" style="font-size: 14px;opacity: calc(.6);">{{ |
|
|
|
op.planQuantity }}</span> |
|
|
|
<span v-if="op.actualQuantity" class="orderFinish" |
|
|
|
style="font-size: 14px;opacity: calc(.6);margin-left: 130px;">{{ |
|
|
|
op.actualQuantity |
|
|
|
}}</span> |
|
|
|
<el-divider class="split" v-if="op.actualQuantity" direction="vertical"></el-divider> |
|
|
|
<!-- </div> --> |
|
|
|
<el-progress style="width: 620px;" text-color="rgba(255, 255, 255, .6)" :stroke-width="10" |
|
|
|
define-back-color="rgba(32, 57, 96, 1)" :percentage="op.progressRate" class="custom-progress-bar" /> |
|
|
|
</el-row> |
|
|
|
@@ -67,7 +80,7 @@ |
|
|
|
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> |
|
|
|
<base-container :show-time="true" :no-content-padding="true" :height="318 + 338 + 16" :size="'eqStatus'" |
|
|
|
:title="'产线产量及良品率'" :title-icon="'productLine'"> |
|
|
|
<div class="myLegend"> |
|
|
|
<div class="myLegend"> |
|
|
|
<div class=" barCircleLegend"></div> |
|
|
|
<div class=" barCircle"></div> |
|
|
|
<h4 class="barText">产线良品率</h4> |
|
|
|
@@ -364,42 +377,66 @@ export default { |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
name: '测试工单', |
|
|
|
progressRate: 0.933333, |
|
|
|
progressRate: 0.933333, |
|
|
|
specifications: '1100*5554*22', |
|
|
|
plan: 11111, |
|
|
|
finish:111, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '测试工单2', |
|
|
|
progressRate: 0.932323, |
|
|
|
progressRate: 0.932323, |
|
|
|
size: '1100*5554*22', |
|
|
|
plan: 11111, |
|
|
|
finish: 111, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
name: '测试工单3', |
|
|
|
progressRate: 0.23232, |
|
|
|
progressRate: 0.23232, |
|
|
|
size: '1100*5554*22', |
|
|
|
plan: 11111, |
|
|
|
finish: 111, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '4', |
|
|
|
name: '测试工单4', |
|
|
|
progressRate: 0.32323, |
|
|
|
progressRate: 0.32323, |
|
|
|
size: '1100*5554*22', |
|
|
|
plan: 11111, |
|
|
|
finish: 111, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '4', |
|
|
|
id: '5', |
|
|
|
name: '测试工单4', |
|
|
|
progressRate: 0.32323, |
|
|
|
size: '1100*5554*22', |
|
|
|
plan: 11111, |
|
|
|
finish: 111, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '4', |
|
|
|
id: '6', |
|
|
|
name: '测试工单4', |
|
|
|
size: '1100*5554*22', |
|
|
|
progressRate: 0.32323, |
|
|
|
plan: 11111, |
|
|
|
finish: 111, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '4', |
|
|
|
id: '7', |
|
|
|
name: '测试工单4', |
|
|
|
size: '1100*5554*22', |
|
|
|
progressRate: 0.32323, |
|
|
|
plan: 11111, |
|
|
|
finish: 111, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '4', |
|
|
|
id: '8', |
|
|
|
name: '测试工单4', |
|
|
|
progressRate: 0.32323, |
|
|
|
size: '1100*5554*22', |
|
|
|
plan: 11111, |
|
|
|
finish: 111, |
|
|
|
}, |
|
|
|
// { |
|
|
|
// id: '5', |
|
|
|
@@ -416,7 +453,10 @@ export default { |
|
|
|
return { |
|
|
|
id: ele.id, |
|
|
|
name: ele.name, |
|
|
|
progressRate: parseFloat((ele.progressRate * 100).toFixed(0)), |
|
|
|
progressRate: parseFloat((ele.progressRate * 100).toFixed(0)), |
|
|
|
specifications: ele.specifications ? '规格' + ele.specifications :null, |
|
|
|
planQuantity: ele.plan ? '计划' + ele.plan + '片' : null, |
|
|
|
finish: ele.finish + '片', |
|
|
|
}; |
|
|
|
} |
|
|
|
}); |
|
|
|
@@ -440,8 +480,8 @@ export default { |
|
|
|
<span style="color:rgba(255,255,255,0.5)" >${item.name || ''} |
|
|
|
</span>`, |
|
|
|
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`, |
|
|
|
`<span style="color:rgba(255,255,255,0.5)">${item.status || ''}</span>`, |
|
|
|
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`, |
|
|
|
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:13px 10px 0 0 '}"></div> ${item.status || ''}</span>`, |
|
|
|
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == '是' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:13px 10px 0 0 '}"></div> ${item.error || ''}</span>`, |
|
|
|
]); |
|
|
|
this.eqConfig.data = eqArr; |
|
|
|
let data = [ |
|
|
|
@@ -690,7 +730,10 @@ export default { |
|
|
|
return { |
|
|
|
id: ele.id, |
|
|
|
name: ele.name, |
|
|
|
progressRate: parseFloat((ele.progressRate * 100).toFixed(0)), |
|
|
|
progressRate: parseFloat((ele.progressRate * 100).toFixed(0)), |
|
|
|
specifications: ele.specifications ? '规格' + ele.specifications :null, |
|
|
|
planQuantity: ele.planQuantity ? '计划' + ele.planQuantity + '片' : null, |
|
|
|
actualQuantity: ele.actualQuantity ? ele.actualQuantity + '片' : null, |
|
|
|
}; |
|
|
|
} |
|
|
|
}); |
|
|
|
@@ -704,12 +747,8 @@ export default { |
|
|
|
`<span style="color:rgba(255,255,255,0.5)">${ |
|
|
|
item.code || '' |
|
|
|
}</span>`, |
|
|
|
`<span style="color:rgba(255,255,255,0.5)"><span style="color:rgba(255,255,255,0.5)"></span> ${ |
|
|
|
item.status || '' |
|
|
|
}</span>`, |
|
|
|
`<span style="color:rgba(255,255,255,0.5)">${ |
|
|
|
item.error || '' |
|
|
|
}</span>`, |
|
|
|
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.status == '运行' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.status || ''}</span>`, |
|
|
|
`<span style="color:rgba(255,255,255,0.5)"><div style="${item.error == '是' ? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:10px 10px 0 0 ' : 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%; background-color: #FFBD02;float:left;margin:10px 10px 0 0 '}"></div> ${item.error || ''}</span>`, |
|
|
|
]); |
|
|
|
this.eqConfig.data = eqArr; |
|
|
|
// this.$nextTick(() => { |
|
|
|
@@ -802,6 +841,18 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.split{ |
|
|
|
width: 1px; |
|
|
|
// display: inline-block; |
|
|
|
height: 14px; |
|
|
|
// margin-top: 2px; |
|
|
|
// line-height: 0; |
|
|
|
margin-left: 8px; |
|
|
|
opacity:calc(.6); |
|
|
|
margin-right: 8px; |
|
|
|
background-color: #C8CDD7; |
|
|
|
// border: 1px solid #C8CDD7; |
|
|
|
} |
|
|
|
.myLegend { |
|
|
|
position: absolute; |
|
|
|
top: -28px; |
|
|
|
@@ -902,12 +953,39 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.now-secondary-title { |
|
|
|
display: inline-block; |
|
|
|
width: 70px; |
|
|
|
margin: 0; |
|
|
|
font-size: 1em; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 2em; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.orderSize { |
|
|
|
display: inline-block; |
|
|
|
width: 120px; |
|
|
|
margin: 0; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 2em; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.orderFinish { |
|
|
|
display: inline-block; |
|
|
|
width: 60px; |
|
|
|
margin: 0; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 2em; |
|
|
|
text-align: right; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.orderPlan { |
|
|
|
display: inline-block; |
|
|
|
width: 100px; |
|
|
|
margin: 0; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 2em; |
|
|
|
color: #fff; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
.now-team-content { |
|
|
|
font-size: 3em; |
|
|
|
line-height: 1em; |
|
|
|
|
