ui测试修改
This commit is contained in:
98
src/views/databoard/wholePlant/OrderStatus copy.vue
Normal file
98
src/views/databoard/wholePlant/OrderStatus copy.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<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>
|
||||
@@ -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>
|
||||
@@ -107,7 +107,7 @@ export default {
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
|
||||
let wholePlantContainerBox = document.getElementById('wholePlantContainer')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width)
|
||||
|
||||
Reference in New Issue
Block a user