mt-fe-group/yudao-dev
12
0
Bifurcation 0
Code Tickets Demandes d'ajout Publications Wiki Activité

merge test

Parcourir la source
Cette révision appartient à :
朱菊兰 2024-01-17 09:12:43 +08:00
révision 2e5ba8a891
1 fichiers modifiés avec 0 ajouts et 98 suppressions
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences Développer tous les fichiers Réduire tous les fichiers

98
src/views/databoard/wholePlant/OrderStatus copy.vue
Voir le fichier

@ -1,98 +0,0 @@
<template>
<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'/>
</div>
<button @click='bb'>aa</button>
</Container>
</div>
</template>
<script>
import Container from '../components/Container'
import { formatDate } from '@/utils'
export default {
name: 'OrderStatus',
components: { Container },
computed: {
order() {
return this.$store.state.websocket.order
}
},
data() {
return {
config: {
header: ['上线时间', '客户名称', '规格','完成度'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [155, 180, 140],
data: [],
rowNum: 8
}
}
},
mounted() {},
methods:{
bb() {
let aaa = [
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.1},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.3},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.4},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.5},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.7},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.8},
{planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:1}
]
let outArr = aaa.map((item) => [
formatDate(item.planStartTime) || '',
`<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
`<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
`<span style="display:inline-block;width:60px;">${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)<=50?3.6*item.completeRate*100:180):0}deg)"></div>
<div class="bg2"></div>
<div style="${item.completeRate?(item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'):'display:none;'}" class="rount2"></div>
</div>`
]);
this.config.data = outArr
this.$refs['orderScrollBoard'].updateRows(outArr)
}
}
// }
// watch:{
// order: {
// handler(newVal, oldVal) {
// let outArr = this.order.map((item) => [
// 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)<=50?3.6*item.completeRate*100:180):0}deg)"></div>
// <div class="bg2"></div>
// <div style="${item.completeRate?(item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'):'display:none;'}" class="rount2"></div>
// </div>`
// ]);
// this.config.data = outArr
// this.$refs['orderScrollBoard'].updateRows(outArr)
// }
// }
// }
}
</script>
<style lang='scss'>
.orderContainer {
.box{width:16px;height:12px;margin: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:#283851 4px solid}
.box .bg2{border:#283851 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>