mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

驾驶舱提测ui

Browse Source
This commit is contained in:
朱菊兰
2024-01-11 13:44:38 +08:00
parent b1458827f1
commit 6c02990cb5
20 changed files with 441 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/databoard/wholePlant/OrderStatus.vue
View File

@@ -1,5 +1,5 @@
<template>
<div style="flex: 1;">
<div style="flex: 1;" class="orderContainer">
<Container name="订单完成情况" size="small" style="">
<div style="padding: 5px 10px;">
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
@@ -9,6 +9,7 @@
</template>
<script>
import Container from '../components/Container'
import { formatDate } from '@/utils'
export default {
name: 'OrderStatus',
components: { Container },
@@ -25,37 +26,43 @@ export default {
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
// columnWidth: [60],
columnWidth: [155, 180, 150],
align: ['center'],
data: [
['2023-12-01', '客户1', '行1列3', ''],
['2023-12-01', '客户2', '行2列3', ''],
['2023-12-01', '客户3', '行3列3', ''],
['2023-12-01', '客户4', '行4列3', ''],
['2023-12-01', '客户5', '行5列3', ''],
['2023-12-01', '客户6', '行6列3', ''],
['2023-12-01', '客户7', '行7列3', ''],
['2023-12-01', '客户8', '行8列3', ''],
['2023-12-01', '客户9', '行9列3', ''],
['2023-12-01', '客户10', '行10列3', '']
],
data: [],
rowNum: 6
}
}
},
mounted() {},
watch:{
order: {
handler(newVal, oldVal) {
let outArr = this.order.map((item) => [
item.startProduceTime,
item.name,
item.specifications,
item.completeRate
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>
</div>`
]);
this.config.data = outArr
this.$refs['orderScrollBoard'].updateRows(outArr)
this.config.data = outArr
this.$refs['orderScrollBoard'].updateRows(outArr)
}
}
}
}
</script>
</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>