Merge branch 'master' of http://39.108.216.210:3000/web/measure into master

src/components/gradient-card/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="hc-gradient-card-box">
+        <div class="flex radius hc-gradient-card" :class="'bg-' + bgColor + '-gradient'">
+            <div class="hc-card-dot hc-card-dot1" :class="'bg-' + bgColor + '-gradient'"/>
+            <div class="hc-card-dot hc-card-dot2" :class="'bg-' + bgColor + '-gradient'"/>
+            <div class="hc-card-dot hc-card-dot3" :class="'bg-' + bgColor + '-gradient'"/>
+            <div class="hc-card-main">
+                <slot></slot>
+            </div>
+        </div>
+        <div class="hc-gradient-card-bg" :class="'bg-' + bgColor"/>
+    </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue"
+
+//初始
+const props = defineProps({
+    color: {
+        type: String,
+        default: 'blue'
+    }
+})
+
+const bgColor = ref(props.color)
+
+//监听
+watch(() => [
+    props.color,
+], ([color]) => {
+    bgColor.value = color
+})
+</script>
+
+<style lang="scss" scoped>
+@import "./style.scss";
+</style>

src/components/gradient-card/style.scss

@@ -0,0 +1,79 @@
+.hc-gradient-card-box {
+    position: relative;
+    .hc-gradient-card {
+        position: relative;
+        z-index: 2;
+        border-radius: 6px;
+        overflow: hidden;
+        .hc-card-main {
+            position: relative;
+            flex: 1;
+            z-index: 3;
+        }
+    }
+    .hc-gradient-card-bg {
+        position: relative;
+        z-index: 2;
+        text-shadow: 2px 3px 5px rgba(0,0,0,.1);
+    }
+    .hc-card-dot {
+        position: absolute;
+        z-index: 1;
+        border-radius: 50%;
+        transition: all 0.6s cubic-bezier(.08,.82,.17,1);
+        opacity: .3;
+        &.hc-card-dot1 {
+            width: 200px;
+            height: 200px;
+            left: 0;
+            top: auto;
+            right: auto;
+            bottom: -150px;
+            filter: hue-rotate(30deg)  brightness(160%);
+        }
+        &.hc-card-dot2 {
+            left: -40px;
+            top: auto;
+            right: auto;
+            bottom: -10px;
+            width: 150px;
+            height: 150px;
+            filter: brightness(80%);
+        }
+        &.hc-card-dot3 {
+            top: -60px;
+            right: -60px;
+            opacity: 0.6;
+            width: 120px;
+            height: 120px;
+            filter: brightness(120%);
+        }
+    }
+    .hc-gradient-card-bg {
+        position: absolute;
+        z-index: 0;
+        width: calc(100% - 20px);
+        height: 15px;
+        bottom: -7px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        border-radius: 5px;
+        // filter: blur(10px);
+        opacity: 0.2;
+    }
+    &:hover {
+        .hc-card-dot1 {
+            transform: translateX(-50px) translatey(-180px);
+            filter:  hue-rotate(-30deg) brightness(80%);
+        }
+        .hc-card-dot2 {
+            transform: translateX(150px) translatey(0px);
+            filter: brightness(120%);
+        }
+        .hc-card-dot3 {
+            filter: brightness(80%);
+            transform: translateX(-150px) translatey(120px);
+        }
+    }
+}

src/components/index.js

@@ -9,10 +9,12 @@ import HcTitle from './hc-title/hc-title.vue'
 import HcSearchInput from './search-input/search-input.vue'
 import HcTasksUser from './hc-tasks-user/index.vue'
 import HcViewReport from './view-report/view-report.vue'
+import HcGradientCard from './gradient-card/index.vue'
 
 
 //注册全局组件
 export const setupComponents = (App) => {
+    App.component('HcGradientCard', HcGradientCard)
     App.component('HcTooltip', HcTooltip)
     App.component('HcTipItem', HcTipItem)
     App.component('HcChoiceUser', HcChoiceUser)
@@ -24,4 +26,6 @@ export const setupComponents = (App) => {
     App.component('HcSearchInput', HcSearchInput)
     App.component('HcTasksUser', HcTasksUser)
     App.component('HcViewReport', HcViewReport)
+
+
 }

src/router/modules/base.js

@@ -341,6 +341,27 @@ export default [
                     },
                 ],
             },
+            {
+                path: '/debit-pay/deduction-ledger',
+                name: 'debit-pay-deduction-ledger',
+                redirect: '/debit-pay/deduction-ledger/datarelate',
+                meta: { title: '支付扣回台账' },
+                children: [
+                    {
+                        path: '/debit-pay/deduction-ledger/datarelate',
+                        name: 'debit-pay-deduction-ledger-datarelate',
+                        meta: { title: '资料关联台账' },
+                        component: () => import('~src/views/debit-pay/ledgers/datarelate.vue'),
+                    },
+                    {
+                        path: '/debit-pay/deduction-ledger/deductstatic',
+                        name: 'debit-pay-deduction-ledger-deductstatic',
+                        meta: { title: '扣回统计' },
+                        component: () => import('~src/views/debit-pay/ledgers/deductstatic.vue'),
+                    },
+                 
+                ],
+            },
             {
                 path: '/debit-pay/project',
                 name: 'debit-pay-project',

src/styles/app/main.scss

@@ -55,3 +55,71 @@ embed {
 .hc_tree_card_border {
     border-right: 1px dotted #EEEEEE;
 }
+.bg-purple1 {
+    background-color: rgb(184, 122, 253);
+}
+.bg-purple1-gradient {
+    background: linear-gradient(90.99deg, rgba(98,113,252,1) 0.63%,rgba(115,115,252,1) 19%,rgba(152,119,253,1) 35.04%,rgba(163,121,253,1) 51.28%,rgba(178,122,253,1) 73.03%,rgba(184,122,253,1) 97.29%);
+    color: white;
+}
+
+.bg-blue1 {
+    background-color: rgba(109,131,251,1);
+}
+.bg-blue1-gradient {
+    background: linear-gradient(90.99deg, rgba(62,162,246,1) 0.63%,rgba(74,154,247,1) 20.93%,rgba(71,155,247,1) 37.36%,rgba(87,145,249,1) 53.8%,rgba(101,136,250,1) 73.03%,rgba(109,131,251,1) 97.29%);
+    color: white;
+}
+
+.bg-blue2 {
+    background-color: rgba(109,131,251,1);
+}
+.bg-blue2-gradient {
+    background: linear-gradient(90.99deg, rgba(62,162,246,1) 0.63%,rgba(74,154,247,1) 20.93%,rgba(71,155,247,1) 37.36%,rgba(87,145,249,1) 53.8%,rgba(101,136,250,1) 73.03%,rgba(109,131,251,1) 97.29%);
+    color: white;
+}
+
+.bg-red1 {
+    background-color: rgba(239,148,100,1);
+}
+.bg-red1-gradient {
+    background: linear-gradient(90.99deg, rgba(234,100,110,1) 0.63%,rgba(235,111,110,1) 19%,rgba(236,121,108,1) 35.04%,rgba(237,134,104,1) 51.28%,rgba(238,141,101,1) 73.13%,rgba(239,148,100,1) 97.29%);
+    color: white;
+}
+
+.bg-green1 {
+    background-color: rgba(111,210,165,1);
+}
+.bg-green1-gradient {
+    background: linear-gradient(90.99deg, rgba(74,199,214,1) 0.63%,rgba(84,202,203,1) 19%,rgba(92,205,189,1) 35.04%,rgba(101,207,180,1) 51.28%,rgba(103,208,178,1) 73.03%,rgba(111,210,165,1) 97.29%);
+    color: white;
+}
+.bg-green2 {
+    background-color:#9AF20E;
+}
+.bg-green2-gradient {
+    background: linear-gradient(90.99deg, rgb(12, 218, 29) 0.63%,rgb(37, 216, 102) 19%,rgb(73, 236, 136) 35.04%,rgb(102, 240, 93) 51.28%,rgb(22, 225, 49) 73.03%,rgb(33, 226, 75) 97.29%);
+    color: white;
+}
+.bg-pink1 {
+    background-color: rgba(239,148,100,1);
+}
+.bg-pink1-gradient {
+    background: linear-gradient(90.99deg, rgba(234,100,110,1) 0.63%,rgba(235,111,110,1) 19%,rgba(236,121,108,1) 35.04%,rgba(237,134,104,1) 51.28%,rgba(238,141,101,1) 73.13%,rgba(239,148,100,1) 97.29%);
+    color: white;
+}
+.bg-yellow1 {
+    background-color: rgba(223,226,100,1);
+}
+.bg-yellow1-gradient {
+    background: linear-gradient(90.99deg, rgba(223,226,100) 0.63%,rgb(223,226,100) 19%,rgb(223,226,100,1) 35.04%,rgb(2223,226,100,1) 51.28%,rgb(223,226,100) 73.13%,rgb(223,226,100) 97.29%);
+    color: white;
+}
+.bg-orange1 {
+    background-color: rgba(242,162,8,1);
+}
+.bg-orange1-gradient {
+    background: linear-gradient(90.99deg, rgb(242,162,8) 0.63%,rgb(242,162,8) 19%,rgb(234, 162, 68) 35.04%,rgb(242,162,8) 51.28%,rgb(242,162,8) 73.13%,rgb(242,162,8) 97.29%);
+    color: white;
+}
+

src/views/debit-pay/admin/components/middlepay/addModal.vue

@@ -102,6 +102,9 @@
                             <template #containChangeTotal="{ row }">
                                 <hc-table-input v-model="row.containChangeTotal" :disabled="isView" @blur="containChangeTotalBlur(row)" />
                             </template>
+                            <template #upPayRatio="{ row }">
+                                <hc-table-input v-model="row.upPayRatio" :disabled="isView" @blur="unPayRatioBlur(row)" />
+                            </template>
                             <template #currentMeterMoney="{ row }">
                                 <hc-table-input v-model="row.currentMeterMoney" disabled />
                             </template>
@@ -419,6 +422,7 @@ const addTableColumn = ref([
     { key: 'resolveTotal', name: '分解数量', width: '100' },
     { key: 'changeTotal', name: '变更后数量', width: '100' },
     { key: 'currentMeterTotal', name: '本期计量数量', width: '140' },
+    { key: 'upPayRatio', name: '支付比例', width: '140' },
     { key: 'containChangeTotal', name: '含变更数量', width: '100' },
     { key: 'currentMeterMoney', name: '本期计量金额', width: '120' },
     { key: 'allMeterTotal', name: '累计计量量', width: '100' },
@@ -446,6 +450,31 @@ const currentMeterTotalBlur = (row) => {
             meterMoney = (BigNumber(meterMoney).plus(table[i].currentMeterMoney)).toString()
         }
         baseForm.value.meterMoney = meterMoney
+
+
+     
+     //  累计计量金额 > 最高支付金额   变红
+    // 当前行多返回一个字段otherPayMoney 代表其他期计量金额
+    // 累计计量金额 = 其他期计量金额+（本期计量金额*支付比例）
+    // 当前行多返回一个字段upPayMoney 代表最高支付金额
+    let otherPayMoney = new BigNumber(row.otherPayMoney )//其他期计量金额
+    let currentMeterMoney = new BigNumber(row.currentMeterMoney )//本期计量金额
+    let upPayRatio = new BigNumber(row.upPayRatio ).dividedBy(100)//支付比例
+    let upPayRatioMoney = (otherPayMoney.plus((currentMeterMoney.multipliedBy(upPayRatio)).toNumber()))//累计计量金额
+    let upPayMoney = new BigNumber(row.upPayMoney)//最高支付金额
+    const isComparedmoney = upPayRatioMoney.comparedTo(upPayMoney)
+    //a 大于 b = 1，a 等于 b = 0，a 小于 b = -1， a 或 b 的值异常时 = null
+        if (isComparedmoney === 1 || isComparedmoney === null) {
+            isCanSave.value = true
+          
+           window.$message.warning('累计计量金额超出支付比列，如需计量100%，请完成关联对应的质保资料')
+            return '--el-table-tr-bg-color: #fe0000; --el-table-row-hover-bg-color: #fe0000; color: white;'
+            
+        
+        } else {
+            isCanSave.value = false
+           
+        }
     })
 }
 
@@ -460,21 +489,38 @@ const containChangeTotalBlur = (row) => {
         row.containChangeTotal = val
     })
 }
-
+const unPayRatioBlur = (row)=>{
+    nextTick(()=>{
+             
+     //  累计计量金额 > 最高支付金额   变红
+    // 当前行多返回一个字段otherPayMoney 代表其他期计量金额
+    // 累计计量金额 = 其他期计量金额+（本期计量金额*支付比例）
+    // 当前行多返回一个字段upPayMoney 代表最高支付金额
+    let otherPayMoney = new BigNumber(row.otherPayMoney )//其他期计量金额
+    let currentMeterMoney = new BigNumber(row.currentMeterMoney )//本期计量金额
+    let upPayRatio = new BigNumber(row.upPayRatio ).dividedBy(100)//支付比例
+    let upPayRatioMoney = (otherPayMoney.plus((currentMeterMoney.multipliedBy(upPayRatio)).toNumber()))//累计计量金额
+    let upPayMoney = new BigNumber(row.upPayMoney)//最高支付金额
+    const isComparedmoney = upPayRatioMoney.comparedTo(upPayMoney)
+    //a 大于 b = 1，a 等于 b = 0，a 小于 b = -1， a 或 b 的值异常时 = null
+        if (isComparedmoney === 1 || isComparedmoney === null) {
+            isCanSave.value = true
+          
+           window.$message.warning('累计计量金额超出支付比列，如需计量100%，请完成关联对应的质保资料')
+            return '--el-table-tr-bg-color: #fe0000; --el-table-row-hover-bg-color: #fe0000; color: white;'
+            
+        
+        } else {
+            isCanSave.value = false
+           
+        }
+    })
+    
+}
 //判断是否红色
 const isCanSave = ref(false)
-const addTableRowStyle = ({ row }) => {
 
-    // let allMeterTotal = new BigNumber(row.allMeterTotal) //a 累计计量量
-    // let changeTotal = new BigNumber(row.changeTotal) //b 变更后数量
-    // //a 大于 b = 1，a 等于 b = 0，a 小于 b = -1， a 或 b 的值异常时 = null
-    // const isCompared = allMeterTotal.comparedTo(changeTotal)
-    // if (isCompared === 1 || isCompared === null) {
-    //     isCanSave.value = true
-    //     return '--el-table-tr-bg-color: #fe0000; --el-table-row-hover-bg-color: #fe0000; color: white;'
-    // } else {
-    //     isCanSave.value = false
-    // }
+const addTableRowStyle = ({ row }) => {
 
     // 判断施工图数量是否大于合同数据
     //      大于：如果超计= 1并且 划分=1
@@ -514,6 +560,9 @@ const addTableRowStyle = ({ row }) => {
                 isCanSave.value = false
             }
     }
+
+
+
 }
 
 //删除清单

src/views/debit-pay/ledgers/datarelate.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="relative h-full flex">
+        <div :id="`hc_tree_card_${uuid}`">
+            <hc-new-card scrollbar>
+                <template #header>
+                    <el-select v-model="searchForm.contractPeriodId" placeholder="选择计量期" filterable clearable block @change="searchKey1Click">
+                        <el-option v-for="item in key1Data" :key="item.id" :label="item.periodNumber" :value="item.id" clearable />
+                    </el-select>
+                </template>
+                <hc-lazy-tree :h-props="treeProps" tree-key="id" :auto-expand-keys="TreeAutoExpandKeys" @load="treeLoadNode" @node-tap="treeNodeTap" />
+            </hc-new-card>
+        </div>
+        <div :id="`hc_table_card_${uuid}`" class="flex-1">
+            <hc-new-card>
+                <hc-table
+                    :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new 
+                    :check-style="{ width: 29 }" :index-style="{ width: 60 }"
+                >
+                    <template #key3="{ row }">
+                        <el-tag v-if="row.key3" type="success">是</el-tag>
+                        <el-tag v-else type="danger">否</el-tag>
+                    </template>
+                    <template #action="{ row }">
+                        <el-button type="primary" @click="relateData(row)">关联质保资料</el-button>
+                    </template>
+                </hc-table>
+                <template #action>
+                    <hc-pages :pages="searchForm" @change="pageChange" />
+                </template>
+            </hc-new-card>
+        </div>
+    </div>
+    <!-- 关联质检资料 -->
+    <qualityRleation :quality-moadal="qualityMoadal" :cid="contractId" :period-id="searchForm.contractPeriodId" />
+</template>
+
+<script setup>
+import { nextTick, onActivated, onMounted, ref } from 'vue'
+import { getStoreValue, setStoreValue } from '~src/utils/storage'
+import { getArrValue, getObjValue, getRandom } from 'js-fast-way'
+import unitApi from '~api/project/debit/contract/unit'
+import mainApi from '~api/debit-pay/admin/middlepay'
+import qualityRleation from '~src/views/debit-pay/admin/components/middlepay/qualityRleation.vue'
+import { useAppStore } from '~src/store'
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId || '')
+const contractId = ref(useAppState.getContractId || '')
+const uuid = getRandom(4)
+
+//渲染完成
+onMounted(() => {
+    setSplitRef()
+})
+//激活
+onActivated(async () => {
+    await getKey1Data()
+ 
+})
+//初始化设置拖动分割线
+const setSplitRef = () => {
+    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
+    nextTick(() => {
+        window.$split(['#hc_tree_card_' + uuid, '#hc_table_card_' + uuid], {
+            sizes: [20, 80],
+            snapOffset: 0,
+            minSize: [50, 500],
+        })
+    })
+}
+
+
+//搜索表单
+const searchForm = ref({
+    contractPeriodId: null, contractUnitId: null, contractId: contractId.value, type: 1,
+    current: 1, size: 20, total: 0,
+})
+
+//计量期
+const key1Data = ref([])
+const getKey1Data = async ()=>{
+    const { error, code, data } = await mainApi.getAllPeriod({
+        contractId: contractId.value,
+        type: 1,
+    })
+    if (!error && code === 200) {
+        let newArr = getArrValue(data), info = getObjValue(newArr[newArr.length - 1])
+        searchForm.value.contractPeriodId = info.id
+        key1Data.value = newArr
+    } else {
+        key1Data.value = []
+    }
+}
+const searchKey1Click = () => {
+ 
+    searchForm.value.current = 1
+    getTableData()
+ 
+}
+
+
+//数据格式
+const treeProps = {
+    label: 'nodeName',
+    children: 'children',
+    isLeaf: 'notExsitChild',
+}
+const TreeAutoExpandKeys = ref(getStoreValue('middlepay-tree-auto-expand-keys') || [])
+//懒加载的数据
+const treeLoadNode = async ({ item, level }, resolve) => {
+    let id = 0
+    if (level !== 0) {
+        const nodeData = getObjValue(item)
+        id = nodeData?.id || ''
+    }
+    //获取数据
+    const { data } = await unitApi.lazyTree({
+        contractId: contractId.value,
+        id:id,
+        contractPeriodId:searchForm.value.contractPeriodId,
+    })
+    resolve(getArrValue(data))
+}
+const treeNodeTap = ({ data, keys }) => {
+    searchForm.value.current = 1
+    searchForm.value.contractUnitId = data.id
+    TreeAutoExpandKeys.value = keys || []
+    setStoreValue('middlepay-tree-auto-expand-keys', keys)
+    getTableData()
+}
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+
+//表格数据
+const tableLoading = ref(false)
+const tableColumn = ref([
+    { key: 'meterNumber', name: '计量单编号' },
+    { key: 'engineerDivide', name: '工程划分部位' },
+    { key: 'key3', name: '资料是否齐全' },
+    { key: 'meterMoney', name: '计量金额' },
+    { key: 'key5', name: '应扣回金额' },
+    { key: 'businessDate', name: '业务日期' },
+    { key: 'key7', name: '距离扣回金额日期' },
+    { key: 'action', name: '操作', width: 120, align: 'center' },
+])
+const tableData = ref([])
+const getTableData = async () => {
+    tableData.value = []
+    tableLoading.value = true
+    const { data } = await mainApi.getPage({
+        ...searchForm.value,
+        contractId: contractId.value,
+    })
+    tableData.value = getArrValue(data['records'])
+    searchForm.value.total = data.total || 0
+    tableLoading.value = false
+}
+
+//关联质检资料
+const qualityMoadal = ref(false)
+const relateData = ()=>{
+    qualityMoadal.value = true
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/debit-pay/ledgers/deductstatic.vue

@@ -0,0 +1,148 @@
+<!--  -->
+<template>
+    <hc-new-card>
+        <div class="hc-main-row">
+            <div class="title_box">
+                目前所有已计量但未补全资料的计量金额统计
+            </div>
+            <el-row :gutter="30">
+                <el-col :span="8">
+                    <hc-gradient-card color="purple1">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">总金额</span>
+                                <span class="fon-lg" style="opacity: 0;">1111111111</span>
+                            </div>
+                        </div>
+                    </hc-gradient-card>
+                </el-col>
+                <el-col :span="8">
+                    <HcGradientCard color="orange1">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">距离截止日期还剩</span>
+                                <span class="fon-lg">1</span>
+                                <span class="num">天</span>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+                <el-col :span="8">
+                    <HcGradientCard color="yellow1">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">距离截止日期还剩</span>
+                                <span class="fon-lg">10</span>
+                                <span class="num">天</span>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+            </el-row>
+            <el-row :gutter="30" class="mt-24">
+                <el-col :span="8">
+                    <hc-gradient-card color="green2">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">距离截止日期还剩</span>
+                                <span class="fon-lg">30</span>
+                                <span class="num">天</span>
+                            </div>
+                        </div>
+                    </hc-gradient-card>
+                </el-col>
+                <el-col :span="8">
+                    <HcGradientCard color="blue2">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">距离截止日期还剩</span>
+                                <span class="fon-lg">60</span>
+                                <span class="num">天</span>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+                <el-col :span="8">
+                    <HcGradientCard color="red1">
+                        <div class="hc-card-item-sub">
+                            <div class="item-sub-title">
+                                ￥50000
+                            </div>
+                            <div class="item-sub-num">
+                                <span class="num">已超过截止日期</span>
+                                <span class="fon-lg" style="opacity: 0;">11111</span>
+                            </div>
+                        </div>
+                    </HcGradientCard>
+                </el-col>
+            </el-row>
+        </div>
+    </hc-new-card>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+</script>
+
+<style lang='scss' scoped>
+.hc-main-row {
+    padding: 60px;
+    height: 100%;
+    overflow-y: auto;
+}
+.title_box{
+    width: 100%;
+
+    background-color:#6799D9 ;
+    border-radius: 25px;
+    text-align: center;
+    color: white;
+    font-weight: bolder;
+    line-height: 100px;
+    margin-bottom: 100px;
+    font-size: 50px;
+    word-wrap: break-word; /* 让文字在需要时自动换行 */
+}
+.hc-card-item-sub {
+   
+    position: relative;
+    padding: 20px;
+    .item-sub-title {
+        font-size: 45px;
+        font-weight: bold;
+    }
+    .item-sub-num {
+      
+        position: relative;
+        margin-top: 40px;
+        text-align: left;
+        .num {
+            font-size: 30px;
+            font-weight: bold;
+        }
+        .text {
+            margin-left: 5px;
+            font-size: 25px;
+            color: inherit;
+        }
+    }
+}
+.fon-lg{
+    font-size: 50px;
+}
+</style>

src/views/project/debit/contract/components/unit/row-data.vue

@@ -84,7 +84,14 @@
                             <el-input v-model="formModel.changePicture" />
                         </el-form-item>
                     </el-col>
-                    <el-col :span="24">
+                    <el-col v-if="isTable" :span="6">
+                        <el-form-item label="未关联质保资料中期最高支付比列(%):">
+                            <el-input
+                                v-model="formModel.upPayRatio" 
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="isTable ? 18 : 24">
                         <el-form-item label="备注：">
                             <el-input
                                 v-model="formModel.remarks" :autosize="{ minRows: 4, maxRows: 8 }"
@@ -110,6 +117,9 @@
                         <template #buildPictureTotal="{ row }">
                             <hc-table-input v-model="row.buildPictureTotal" :disabled="row.citeStatus === 1" @change="changeBuildPictureTotal(row)" />
                         </template>
+                        <template #upPayRatio="{ row }">
+                            <hc-table-input v-model="row.upPayRatio" :disabled="row.citeStatus === 1" />
+                        </template>
                         <template #action="{ row, index }">
                             <el-link v-if="row.citeStatus === 1" type="info" @click="delNoRow(row)">删除</el-link>
                             <el-link v-else type="danger" @click="delRow(row, index)">删除</el-link>
@@ -268,6 +278,7 @@ const tableColumn = ref([
     { key: 'residueNum', name: '分解剩余量' },
     { key: 'buildPictureTotal', name: '施工图数量' },
     { key: 'changeBuildPictureTotal', name: '施工图变更后数量' },
+    { key: 'upPayRatio', name: '资料未齐全的最高支付比例（%）' },
     { key: 'action', name: '操作', width: 80, align: 'center' },
 ])