ui测试修改
This commit is contained in:
@@ -25,7 +25,7 @@ export default {
|
||||
headerBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
|
||||
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
|
||||
columnWidth: [155, 180, 150],
|
||||
columnWidth: [155, 160, 150],
|
||||
data: [],
|
||||
rowNum: 6
|
||||
}
|
||||
@@ -33,34 +33,24 @@ export default {
|
||||
},
|
||||
mounted() {},
|
||||
watch:{
|
||||
order: {
|
||||
handler(newVal, oldVal) {
|
||||
order:{
|
||||
handler() {
|
||||
let outArr = this.order.map((item) => [
|
||||
formatDate(item.planStartTime) || '',
|
||||
formatDate(item.planStartTime) || '',
|
||||
`<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
|
||||
`<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
|
||||
`<span style="display:inline-block;width:40px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
|
||||
<div class="box" style="display:inline-block;">
|
||||
<div class="bg"></div>
|
||||
<div class="rount" style="-webkit-transform:rotate(${(item.completeRate?(item.completeRate*100).toFixed(2):0)<=50?3.6*item.completeRate*100:180}deg)"></div>
|
||||
<div class="bg2"></div>
|
||||
<div style="${item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'}" class="rount2"></div>
|
||||
`<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
|
||||
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
|
||||
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
|
||||
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
|
||||
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${item.completeRate?item.completeRate.toFixed(2)*37.68+','+((1-item.completeRate.toFixed(2))*37.68):(0+','+37.68)}"/>
|
||||
</svg>
|
||||
</div>`
|
||||
]);
|
||||
this.config.data = outArr
|
||||
this.$refs['orderScrollBoard'].updateRows(outArr)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.orderContainer {
|
||||
.box{width:16px;height:12px;margin:1px auto;position:relative;}
|
||||
.box div{position:absolute;top:0;left:0;border-radius:50%;height:16px;width:16px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}
|
||||
.box .bg{border:silver 4px solid}
|
||||
.box .bg2{border:silver 4px solid;clip:rect(0,8px,20px,0);}
|
||||
.box .rount{border:#47FF27 4px solid;clip:rect(0,8px,24px,0);-webkit-transform:rotate(0deg);}
|
||||
.box .rount2{border:#47FF27 4px solid;clip:rect(0,40px,40px,8px);-webkit-transform:rotate(0deg);display:none}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
Reference in New Issue
Block a user