<template>
|
<a-card :bordered='false'>
|
<a-table ref='table'
|
rowKey='id'
|
:columns='columns'
|
:dataSource='dataSource'
|
:pagination='ipagination'
|
@change='handleTableChange'>
|
<div slot='customTitle1' style='height: 90px;'>
|
<div style='width: 100%;height: 15px'></div>
|
<div style='position: relative;height: 60px;width: 100%;display: flex'>
|
|
<div style='position:absolute;width: 40px;height: 100%;z-index: 2;position: relative'>
|
<img style=' width: 40px;height: 100%' :src="require('../../assets/pro/icon_ld.png')">
|
</div>
|
<div
|
style='flex: 1;margin-left:-20px;width: 100%;height: 100%;display: flex;flex-direction: column;z-index: 1'>
|
<div style='flex: 2; text-align: center;display: flex;align-items: center;justify-content: center'>产品设计
|
</div>
|
<div style='flex: 1;border-top: 4px solid black'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
<div slot='customTitle2' style='height: 90px;'>
|
<div style='width: 100%;height: 15px'></div>
|
<div style='position: relative;height: 60px;width: 100%;display: flex'>
|
|
<div style='margin-left:-20px;position:absolute;width: 40px;height: 100%;z-index: 2;position: relative'>
|
<img style=' width: 40px;height: 100%' :src="require('../../assets/pro/icon_ld.png')">
|
</div>
|
<div
|
style='flex: 1;margin-left:-20px;width: 100%;height: 100%;display: flex;flex-direction: column;z-index: 1'>
|
<div style='flex: 2; text-align: center;display: flex;align-items: center;justify-content: center'>计划阶段
|
</div>
|
<div style='flex: 1;border-top: 4px solid black'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
<div slot='customTitle3' style='height: 90px;'>
|
<div style='width: 100%;height: 15px'></div>
|
<div style='position: relative;height: 60px;width: 100%;display: flex'>
|
|
<div style='margin-left:-20px;position:absolute;width: 40px;height: 100%;z-index: 2;position: relative'>
|
<img style=' width: 40px;height: 100%' :src="require('../../assets/pro/icon_ld.png')">
|
</div>
|
<div
|
style='flex: 1;margin-left:-20px;width: 100%;height: 100%;display: flex;flex-direction: column;z-index: 1'>
|
<div style='flex: 2; text-align: center;display: flex;align-items: center;justify-content: center'>详细设计
|
</div>
|
<div style='flex: 1;border-top: 4px solid black'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
<div slot='customTitle4' style='height: 90px;'>
|
<div style='width: 100%;height: 15px'></div>
|
<div style='position: relative;height: 60px;width: 100%;display: flex'>
|
|
<div style='margin-left:-20px;position:absolute;width: 40px;height: 100%;z-index: 2;position: relative'>
|
<img style=' width: 40px;height: 100%' :src="require('../../assets/pro/icon_ld.png')">
|
</div>
|
<div
|
style='flex: 1;margin-left:-20px;width: 100%;height: 100%;display: flex;flex-direction: column;z-index: 1'>
|
<div style='flex: 2; text-align: center;display: flex;align-items: center;justify-content: center'>样机阶段
|
</div>
|
<div style='flex: 1;border-top: 4px solid black'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
<div slot='customTitle5' style='height: 90px;'>
|
<div style='width: 100%;height: 15px'></div>
|
<div style='position: relative;height: 60px;width: 100%;display: flex'>
|
|
<div style='margin-left:-20px;position:absolute;width: 40px;height: 100%;z-index: 2;position: relative'>
|
<img style=' width: 40px;height: 100%' :src="require('../../assets/pro/icon_ld.png')">
|
</div>
|
<div
|
style='flex: 1;margin-left:-20px;width: 100%;height: 100%;display: flex;flex-direction: column;z-index: 1'>
|
<div style='flex: 2; text-align: center;display: flex;align-items: center;justify-content: center'>小批阶段
|
</div>
|
<div style='flex: 1;border-top: 4px solid black'></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
<div slot='customTitle6' style='height: 90px;'>
|
<div style='width: 100%;height: 15px'></div>
|
<div style='position: relative;height: 60px;width: 100%;display: flex'>
|
|
<div style='margin-left:-20px;position:absolute;width: 40px;height: 100%;z-index: 2;position: relative'>
|
<img style=' width: 40px;height: 100%' :src="require('../../assets/pro/icon_ld.png')">
|
</div>
|
<div
|
style='flex: 1;margin-left:-20px;width: 100%;height: 100%;display: flex;flex-direction: column;z-index: 1'>
|
<div style='flex: 2; text-align: center;display: flex;align-items: center;justify-content: center'>量产阶段
|
</div>
|
<div style='flex: 1;border-top: 4px solid black'></div>
|
|
</div>
|
<div style='margin-left:-20px;position:absolute;width: 40px;height: 100%;z-index: 2;position: relative'>
|
<img style=' width: 40px;height: 100%' :src="require('../../assets/pro/icon_ld.png')">
|
</div>
|
|
</div>
|
|
</div>
|
|
|
<div slot='customContent1' slot-scope='text, record,index'
|
v-if='record.lcb>=0'>
|
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span style='line-height: 30px;font-size: 12px'>{{ record.xmmc}}</span>
|
<!-- <span v-if='record.lcb==1' style='line-height: 30px;font-size: 12px'>当前:2022年10月1日</span>-->
|
</div>
|
<template v-if='record.lcb == 1 || record.lcb==0'>
|
|
<div style='display: flex;position:relative;'>
|
<div v-if='record.lcbzt==1' style='background-color: #00b24b;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==2' style='background-color: #eca82d;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==3' style='background-color: #e80c4e;width: 90%;height: 12px'></div>
|
<div v-else style='background-color: #93938e;width: 30%;height: 12px'></div>
|
<div
|
style='position: absolute;top: 50%;right: -10px; transform: translate(-50%, -50%); width: 10%;height: 30px'>
|
<img style='width: 100%;height: 100%' :src="require('../../assets/pro/icon_right.png')" />
|
</div>
|
|
</div>
|
</template>
|
|
<template v-else>
|
|
<div style='display: flex;position:relative;'>
|
<div style='background-color: #00b24b;width: 100%;height: 12px'></div>
|
|
</div>
|
</template>
|
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span style='line-height: 30px;font-size: 12px'>{{ record.ksrq }}</span>
|
<span v-if='record.lcb==1 || record.lcb==0' style='line-height: 30px;font-size: 12px'>预计:{{ record.jsrq }}</span>
|
</div>
|
|
</div>
|
|
|
<div slot='customContent2' slot-scope='text, record,index'
|
v-if='record.lcb>=2'>
|
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span></span>
|
<!-- <span v-if='record.lcb==2' style='line-height: 30px;font-size: 12px'>当前:2022年10月1日</span>-->
|
</div>
|
<template v-if='record.lcb == 2'>
|
|
<div style='display: flex;position:relative;'>
|
<div v-if='record.lcbzt==1' style='background-color: #00b24b;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==2' style='background-color: #eca82d;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==3' style='background-color: #e80c4e;width: 90%;height: 12px'></div>
|
<div v-else style='background-color: #93938e;width: 30%;height: 12px'></div>
|
<div
|
style='position: absolute;top: 50%;right: -10px; transform: translate(-50%, -50%); width: 10%;height: 30px'>
|
<img style='width: 100%;height: 100%' :src="require('../../assets/pro/icon_right.png')" />
|
</div>
|
|
</div>
|
</template>
|
|
<template v-else>
|
|
<div style='display: flex;position:relative;'>
|
<div style='background-color: #00b24b;width: 100%;height: 12px'></div>
|
|
</div>
|
</template>
|
|
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span></span>
|
<span v-if='record.lcb==2' style='line-height: 30px;font-size: 12px'>预计:{{ record.jsrq }}</span>
|
</div>
|
|
</div>
|
<div slot='customContent3' slot-scope='text, record,index'
|
v-if='record.lcb>=3'>
|
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span></span>
|
<!-- <span v-if='record.lcb==3' style='line-height: 30px;font-size: 12px'>当前:2022年10月1日</span>-->
|
</div>
|
<template v-if='record.lcb == 3'>
|
|
<div style='display: flex;position:relative;'>
|
<div v-if='record.lcbzt==1' style='background-color: #00b24b;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==2' style='background-color: #eca82d;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==3' style='background-color: #e80c4e;width: 90%;height: 12px'></div>
|
<div v-else style='background-color: #93938e;width: 30%;height: 12px'></div>
|
<div
|
style='position: absolute;top: 50%;right: -10px; transform: translate(-50%, -50%); width: 10%;height: 30px'>
|
<img style='width: 100%;height: 100%' :src="require('../../assets/pro/icon_right.png')" />
|
</div>
|
|
</div>
|
</template>
|
|
<template v-else>
|
|
<div style='display: flex;position:relative;'>
|
<div style='background-color: #00b24b;width: 100%;height: 12px'></div>
|
|
</div>
|
</template>
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span></span>
|
<span v-if='record.lcb==3' style='line-height: 30px;font-size: 12px'>预计:{{ record.jsrq }}</span>
|
</div>
|
|
</div>
|
<div slot='customContent4' slot-scope='text, record,index'
|
v-if='record.lcb>=4'>
|
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span></span>
|
<!-- <span v-if='record.lcb==4' style='line-height: 30px;font-size: 12px'>当前:2022年10月1日</span>-->
|
</div>
|
|
<template v-if='record.lcb == 4'>
|
|
<div style='display: flex;position:relative;'>
|
<div v-if='record.lcbzt==1' style='background-color: #00b24b;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==2' style='background-color: #eca82d;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==3' style='background-color: #e80c4e;width: 90%;height: 12px'></div>
|
<div v-else style='background-color: #93938e;width: 30%;height: 12px'></div>
|
<div
|
style='position: absolute;top: 50%;right: -10px; transform: translate(-50%, -50%); width: 10%;height: 30px'>
|
<img style='width: 100%;height: 100%' :src="require('../../assets/pro/icon_right.png')" />
|
</div>
|
|
</div>
|
</template>
|
|
<template v-else>
|
|
<div style='display: flex;position:relative;'>
|
<div style='background-color: #00b24b;width: 100%;height: 12px'></div>
|
|
</div>
|
</template>
|
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span></span>
|
<span v-if='record.lcb==4' style='line-height: 30px;font-size: 12px'>预计:{{ record.jsrq }}</span>
|
</div>
|
|
</div>
|
<div slot='customContent5' slot-scope='text, record,index'
|
v-if='record.lcb>=5'>
|
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span></span>
|
<!-- <span v-if='record.lcb==5' style='line-height: 30px;font-size: 12px'>当前:2022年10月1日</span>-->
|
</div>
|
<template v-if='record.lcb == 5'>
|
|
<div style='display: flex;position:relative;'>
|
<div v-if='record.lcbzt==1' style='background-color: #00b24b;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==2' style='background-color: #eca82d;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==3' style='background-color: #e80c4e;width: 90%;height: 12px'></div>
|
<div v-else style='background-color: #93938e;width: 30%;height: 12px'></div>
|
<div
|
style='position: absolute;top: 50%;right: -10px; transform: translate(-50%, -50%); width: 10%;height: 30px'>
|
<img style='width: 100%;height: 100%' :src="require('../../assets/pro/icon_right.png')" />
|
</div>
|
|
</div>
|
</template>
|
|
<template v-else>
|
|
<div style='display: flex;position:relative;'>
|
<div style='background-color: #00b24b;width: 100%;height: 12px'></div>
|
|
</div>
|
</template>
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span></span>
|
<span v-if='record.lcb==5' style='line-height: 30px;font-size: 12px'>预计:{{ record.jsrq }}</span>
|
</div>
|
|
</div>
|
<div slot='customContent6' slot-scope='text, record,index'
|
v-if='record.lcb>=6'>
|
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span></span>
|
<!-- <span v-if='record.lcb==6' style='line-height: 30px;font-size: 12px'>当前:2022年10月1日</span>-->
|
</div>
|
<template v-if='record.lcb == 6'>
|
|
<div style='display: flex;position:relative;'>
|
<div v-if='record.lcbzt==1' style='background-color: #00b24b;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==2' style='background-color: #eca82d;width: 90%;height: 12px'></div>
|
<div v-else-if='record.lcbzt==3' style='background-color: #e80c4e;width: 90%;height: 12px'></div>
|
<div v-else style='background-color: #93938e;width: 30%;height: 12px'></div>
|
<div
|
style='position: absolute;top: 50%;right: -10px; transform: translate(-50%, -50%); width: 10%;height: 30px'>
|
<img style='width: 100%;height: 100%' :src="require('../../assets/pro/icon_right.png')" />
|
</div>
|
|
</div>
|
</template>
|
|
<template v-else>
|
|
<div style='display: flex;position:relative;'>
|
<div style='background-color: #00b24b;width: 100%;height: 12px'></div>
|
|
</div>
|
</template>
|
<div style='height: 30px;display: flex;justify-content: space-between'>
|
<span></span>
|
<span v-if='record.lcb==6' style='line-height: 30px;font-size: 12px'>预计:{{ record.jsrq }}</span>
|
</div>
|
|
</div>
|
|
|
</a-table>
|
</a-card>
|
</template>
|
|
<script>
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import { getYearStartAndEnd } from '@/utils/util'
|
export default {
|
|
|
name: 'IndexLcb',
|
mixins: [JeecgListMixin],
|
props: {
|
dataType: {
|
type: Number,
|
default: 0,
|
required: false
|
}
|
},
|
watch: {
|
dataType: {
|
deep: true,
|
handler() {
|
if(this.dataType == 1){
|
this.queryParam.zdxm = 1
|
} else {
|
this.queryParam = {}
|
}
|
let year = getYearStartAndEnd(0)
|
this.queryParam.ksrq_begin = year.start
|
this.queryParam.ksrq_end = year.end
|
|
this.loadData(1)
|
}
|
}
|
},
|
data() {
|
return {
|
disableMixinCreated:true,
|
columns: [
|
{
|
dataIndex: 'id',
|
key:'id',
|
slots: { title: 'customTitle1' },
|
scopedSlots: { customRender: 'customContent1' }
|
|
},
|
{
|
dataIndex: 'xmbh',
|
key:'xmbh',
|
slots: { title: 'customTitle2' },
|
scopedSlots: { customRender: 'customContent2' }
|
},
|
{
|
dataIndex: 'xmms',
|
key:'xmms',
|
slots: { title: 'customTitle3' },
|
scopedSlots: { customRender: 'customContent3' }
|
},
|
{
|
dataIndex: 'ksrq',
|
key:'ksrq',
|
slots: { title: 'customTitle4' },
|
scopedSlots: { customRender: 'customContent4' }
|
},
|
{
|
dataIndex: 'jsrq',
|
key:'jsrq',
|
slots: { title: 'customTitle5' },
|
scopedSlots: { customRender: 'customContent5' }
|
},
|
{
|
dataIndex: 'bgrq',
|
slots: { title: 'customTitle6' },
|
scopedSlots: { customRender: 'customContent6' }
|
}
|
|
],
|
ipagination: {
|
current: 1,
|
pageSize: 5,
|
size: 'small',
|
pageSizeOptions: ['5','10', '15', '20'],
|
showTotal: (total, range) => {
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0
|
},
|
|
url: {
|
list: "pro/project/list",
|
},
|
}
|
},
|
mounted() {
|
let year = getYearStartAndEnd(0)
|
this.queryParam.ksrq_begin = year.start
|
this.queryParam.ksrq_end = year.end
|
|
console.info(this.queryParam)
|
this.loadData(1)
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
|
/deep/ .ant-table-tbody > tr > td {
|
padding: 16px 0;
|
width: 16.6%;
|
}
|
|
/deep/ .ant-table-thead > tr > th {
|
text-align: center;
|
padding: 0;
|
}
|
|
/deep/ .ant-table-header-column {
|
display: block;
|
width: 100%;
|
height: 90px;
|
}
|
|
/deep/ .ant-table-header-column::before {
|
|
|
}
|
|
/deep/ .ant-table-column-title {
|
display: block;
|
}
|
|
</style>
|
