99 lines
4.4 KiB
Vue
99 lines
4.4 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: () => ({})
|
|
}
|
|
},
|
|
methods: {},
|
|
render: function(h) {
|
|
return h('el-progress', {
|
|
props: {
|
|
type: 'circle',
|
|
percentage: this.injectData.finished,
|
|
width: 14,
|
|
'stroke-width': 2,
|
|
color: '#47FF27',
|
|
'define-back-color': '#ffffff' // 背景色, 该选项不起作用，可能和 element ui 版本相关
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
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: 'ODFG20210724195124', clientName: '阿特斯阳光电力集团', specs: '3.2-1032*1747', finished: 72 },
|
|
{ orderCode: 'ODPG20220712231003', clientName: '阳光能源控股有限公司', specs: '2.0-1128*1716', finished: 67 },
|
|
{ orderCode: 'ODFG20210819002810', clientName: '浙江正泰新能源开发有限公司', specs: '3.2-1128*1716', finished: 46 },
|
|
{ orderCode: 'ODPG20201003193028', clientName: '阿特斯阳光电力集团', specs: '2.0-1128*2251', finished: 89 },
|
|
{ orderCode: 'ODPG20200113134639', clientName: '协鑫集成科技股份有限公司', specs: '3.2-1128*1718', finished: 54 },
|
|
{ orderCode: 'ODFG20211115145712', clientName: '晶科能源股份有限公司', specs: '3.2-1033*2089', finished: 93 },
|
|
{ orderCode: 'ODFG20211102234340', clientName: '浙江正泰新能源开发有限公司', specs: '3.2-1032*1747', finished: 57 },
|
|
{ orderCode: 'ODFG20200303145849', clientName: '晶澳太阳能科技股份有限公司', specs: '2.0-1128*2272', finished: 76 },
|
|
{ orderCode: 'ODFG20220208030640', clientName: '苏州中来光伏新材股份有限公司', specs: '2.0-1128*2251', finished: 62 },
|
|
{ orderCode: 'ODFG20200916123727', clientName: '常州亿晶光电科技有限公司', specs: '3.2-1128*1718', finished: 23 },
|
|
{ orderCode: 'ODFG20200117065400', clientName: '晶澳太阳能科技股份有限公司', specs: '3.2-1033*2089', finished: 75 },
|
|
{ orderCode: 'ODPG20211020214146', clientName: '英利绿色能源控股有限公司', specs: '3.2-1128*1716', finished: 44 },
|
|
{ orderCode: 'ODPG20221015223506', clientName: '阿特斯阳光电力集团', specs: '2.0-1128*2272', finished: 3 },
|
|
{ orderCode: 'ODFG20211112131234', clientName: '江苏赛拉弗光伏系统有限公司', specs: '3.2-1128*1716', finished: 90 },
|
|
{ orderCode: 'ODPG20200411040019', clientName: '阳光能源控股有限公司', specs: '3.2-1033*2089', finished: 4 },
|
|
{ orderCode: 'ODPG20220622002234', clientName: '苏州中来光伏新材股份有限公司', specs: '3.2-1128*1718', finished: 43 },
|
|
{ orderCode: 'ODPG20220806035106', clientName: '江苏赛拉弗光伏系统有限公司', specs: '3.2-1128*1716', finished: 60 },
|
|
{ orderCode: 'ODPG20220530081525', clientName: '晶科能源股份有限公司', specs: '2.0-1128*2272', finished: 21 },
|
|
{ orderCode: 'ODPG20210228222705', clientName: '阿特斯阳光电力集团', specs: '3.2-1128*1718', finished: 75 },
|
|
{ orderCode: 'ODPG20210408102029', clientName: '常州亿晶光电科技有限公司', specs: '3.2-1128*1718', finished: 99 }
|
|
]
|
|
|
|
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;
|
|
}
|
|
|
|
.left-content-order >>> .el-progress-circle__track {
|
|
stroke: #283851;
|
|
}
|
|
</style>
|