90 lines
2.5 KiB
Vue
90 lines
2.5 KiB
Vue
<template>
|
|
<div class="left-content-order fix-table">
|
|
<techy-table :page="1" :limit="8" :show-index="false" :table-config="tableProps" :table-data="tableData" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TechyTable from './TechyTable.vue'
|
|
|
|
const ProcessCircle = {
|
|
name: 'ProcessCircle',
|
|
props: {
|
|
injectData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log('finished', this.injectData.finished)
|
|
},
|
|
methods: {},
|
|
render: function(h) {
|
|
return h('el-progress', {
|
|
class: {
|
|
'lb-progress-bar': true
|
|
},
|
|
props: {
|
|
type: 'circle',
|
|
percentage: this.injectData.finished,
|
|
width: 14,
|
|
'stroke-width': 2,
|
|
color: '#47FF27'
|
|
},
|
|
style: {
|
|
color: 'blue'
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const tableProps = [
|
|
{ prop: 'orderCode', label: '订单编码', align: 'center', 'min-width': 120 },
|
|
{ prop: 'clientName', label: '客户名称', align: 'center', 'min-width': 100 },
|
|
{ prop: 'specs', label: '规格', align: 'center', 'min-width': 90 },
|
|
{ prop: 'finished', label: '完成度', align: 'center', 'min-width': 80, subcomponent: ProcessCircle }
|
|
]
|
|
const tableData = [
|
|
{ orderCode: 'DD202200910', clientName: '中建材', specs: '50cm', finished: 80 },
|
|
{ orderCode: 'DD202200911', clientName: '蚌埠研究院', specs: '5mm', finished: 40 },
|
|
{ orderCode: 'DD202200912', clientName: '中建材', specs: '50cm', finished: 77 },
|
|
{ orderCode: 'DD202200913', clientName: '国资委', specs: '50cm', finished: 66 },
|
|
{ orderCode: 'DD202200914', clientName: '合肥新能源', specs: '50cm', finished: 55 },
|
|
{ orderCode: 'DD202200915', clientName: '中信科技', specs: '50cm', finished: 77 },
|
|
{ orderCode: 'DD202200916', clientName: 'H', specs: '50cm', finished: 33 }
|
|
]
|
|
|
|
export default {
|
|
name: 'LeftContentOrder',
|
|
components: { TechyTable },
|
|
data() {
|
|
return { tableData, tableProps }
|
|
},
|
|
created() {},
|
|
mounted() {},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fix-table >>> .el-table td .cell {
|
|
width: 70% !important;
|
|
margin: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.left-content-order >>> .el-progress-circle {
|
|
position: relative;
|
|
left: calc(24px * var(--beilv));
|
|
width: calc(12px * var(--beilv)) !important;
|
|
height: calc(12px * var(--beilv)) !important;
|
|
}
|
|
|
|
.left-content-order >>> .el-progress__text {
|
|
font-size: calc(12px * var(--beilv)) !important;
|
|
line-height: calc(14px * var(--beilv)) !important;
|
|
left: calc(-2px * var(--beilv));
|
|
color: #ffffffb3 !important;
|
|
}
|
|
</style>
|