同步更新

This commit is contained in:
qiaomu 2025-07-15 09:10:15 +08:00
parent 61b79fb0a1
commit 728eeec2cb
2 changed files with 523 additions and 292 deletions

View File

@ -51,14 +51,17 @@ export const UserReport: FC = () => {
const [downloadLoading, setDownloadLoading] = useState(false); const [downloadLoading, setDownloadLoading] = useState(false);
const printRef = useRef() const printRef = useRef()
const handlePrint = async () => { const handlePrint = async () => {
const opt = { const opt = {
margin: 0, margin: 0,
filename: `${data?.comprehensive?.startDate ? dayjs(data?.comprehensive?.startDate).format("YYYY年MM月") : null}${data?.tenement?.fullName || '报表'}.pdf`, filename: `${data?.tenement?.fullName + '-' + dayjs(data?.comprehensive?.startDate).format("YYYY年MM月") || '报表-' + dayjs(data?.comprehensive?.startDate).format("YYYY年MM月")}.pdf`,
image: { type: "jpeg", quality: 0.98, }, image: {type: "jpeg", quality: 0.98,},
enableLinks: true, enableLinks: true,
html2canvas: { scale: 3, useCORS: true, allowTaint: false, }, html2canvas: {scale: 3, useCORS: true, allowTaint: false,},
pagebreak: {
// mode: ['avoid-all', 'css'], // 优先使用CSS分页规则
before: '.page-break' // 在指定元素前分页可添加class到需要分页的位置
},
jsPDF: { jsPDF: {
unit: 'pt', // pt、mm、cm、in unit: 'pt', // pt、mm、cm、in
format: 'a4', format: 'a4',
@ -146,16 +149,16 @@ export const UserReport: FC = () => {
) )
} }
{ {/*{*/}
data?.park?.meter04kvType === Meter04KvType.DisableValley ? {/* data?.park?.meter04kvType === Meter04KvType.DisableValley ?*/}
<td>{outputWithPrecision(item?.publicAmount, 2, '-')}</td> : {/* <td>{outputWithPrecision(item?.publicAmount, 2, '-')}</td> :*/}
<td> {/* <td>*/}
<div> {item?.poolSharp || 0} </div> {/* <div> 尖:{item?.poolSharp || 0} </div>*/}
<div> {item?.poolPeak || 0} </div> {/* <div> 峰:{item?.poolPeak || 0} </div>*/}
<div> {item?.poolFlat || 0} </div> {/* <div> 平:{item?.poolFlat || 0} </div>*/}
<div> {item?.poolValley || 0} </div> {/* <div> 谷:{item?.poolValley || 0} </div>*/}
</td> {/* </td>*/}
} {/*}*/}
<td>{outputWithPrecision(item?.finalAmount, 2, '-')}</td> <td>{outputWithPrecision(item?.finalAmount, 2, '-')}</td>
@ -164,15 +167,212 @@ export const UserReport: FC = () => {
}) })
}, [data?.meters, data?.park?.meter04kvType]) }, [data?.meters, data?.park?.meter04kvType])
const renderFee = useCallback(() => {
return <table border={1} width={"100%"} cellSpacing="0">
<thead>
<tr>
<td></td>
<td></td>
{
data?.tenement?.feeType === 3 ? null : <>
<td>线</td>
<td></td>
</>
}
{/*<td>退补电量</td>*/}
<td></td>
<td></td>
{
data?.tenement?.feeType === 3 ? null : <>
<td>线</td>
<td></td>
</>
}
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> {data?.comprehensive?.sharpAmount} </td>
{
data?.tenement?.feeType === 3 ? null : <>
<td> {data?.comprehensive?.lossSharp} </td>
<td> {getRoundNumber(
Number(data?.comprehensive?.finalSharpAmount || 0)
)} </td>
</>
}
{/*<td> {data?.comprehensive?.refundSharp} </td>*/}
<td> {data?.comprehensive?.priceSharp} </td>
<td> {getRoundNumber(
Number(data?.comprehensive?.sharpFee || 0)
)} </td>
{
data?.tenement?.feeType === 3 ? null : <>
<td> {getRoundNumber(
Number(data?.comprehensive?.lossSharpFee || 0)
)} </td>
<td> {getRoundNumber(
Number(
data?.comprehensive?.finalSharpFee || 0
)
)} </td>
</>
}
</tr>
<tr>
<td> </td>
<td> {data?.comprehensive?.peakAmount} </td>
{
data?.tenement?.feeType === 3 ? null : <>
<td> {data?.comprehensive?.lossPeak} </td>
<td> {getRoundNumber(
Number(data?.comprehensive?.finalPeakAmount || 0)
)} </td>
</>
}
{/*<td> {data?.comprehensive?.refundPeak} </td>*/}
<td> {data?.comprehensive?.pricePeak} </td>
<td> {getRoundNumber(
Number(data?.comprehensive?.peakFee || 0)
)} </td>
{
data?.tenement?.feeType === 3 ? null : <>
<td> {getRoundNumber(
Number(data?.comprehensive?.lossPeakFee || 0)
)} </td>
<td> {getRoundNumber(
Number(
data?.comprehensive?.finalPeakFee || 0
)
)} </td>
</>
}
</tr>
<tr>
<td> </td>
<td> {data?.comprehensive?.flatAmount} </td>
{
data?.tenement?.feeType === 3 ? null : <>
<td> {data?.comprehensive?.lossFlat} </td>
<td> {getRoundNumber(
Number(data?.comprehensive?.finalFlatAmount || 0)
)} </td>
</>
}
{/*<td> {data?.comprehensive?.refundFlat} </td>*/}
<td> {data?.comprehensive?.priceFlat} </td>
<td> {getRoundNumber(
Number(data?.comprehensive?.flatFee || 0)
)} </td>
{
data?.tenement?.feeType === 3 ? null : <>
<td> {getRoundNumber(
Number(data?.comprehensive?.lossFlatFee || 0)
)} </td>
<td> {getRoundNumber(
Number(
data?.comprehensive?.finalFlatFee || 0
)
)} </td>
</>
}
</tr>
<tr>
<td> </td>
<td> {data?.comprehensive?.valleyAmount} </td>
{
data?.tenement?.feeType === 3 ? null : <>
<td> {data?.comprehensive?.lossValley} </td>
<td> {getRoundNumber(
Number(data?.comprehensive?.finalValleyAmount || 0)
)} </td>
</>
}
{/*<td> {data?.comprehensive?.refundValley} </td>*/}
<td> {data?.comprehensive?.priceValley} </td>
<td> {getRoundNumber(
Number(data?.comprehensive?.valleyFee || 0)
)} </td>
{
data?.tenement?.feeType === 3 ? null : <>
<td> {getRoundNumber(
Number(data?.comprehensive?.lossValleyFee || 0)
)} </td>
<td> {getRoundNumber(
Number(
data?.comprehensive?.finalValleyFee || 0
)
)} </td>
</>
}
</tr>
<tr>
<td> </td>
<td> {data?.comprehensive?.consumption} </td>
{
data?.tenement?.feeType === 3 ? null : <>
<td> {data?.comprehensive?.loss?.amount} </td>
<td> {getRoundNumber(
Number(data?.comprehensive?.finalAmount || 0)
)} </td>
</>
}
{/*<td> {data?.comprehensive?.refundOverall} </td>*/}
<td> - </td>
<td> {getRoundNumber(
Number(data?.comprehensive?.fee || 0)
)} </td>
{
data?.tenement?.feeType === 3 ? null : <>
<td> {getRoundNumber(
Number(data?.comprehensive?.finalLossFee || 0)
)} </td>
<td> {getRoundNumber(
Number(
data?.comprehensive?.total || 0
)
)} </td>
</>
}
</tr>
</tbody>
</table>
}, [data])
const renderTableSum = useCallback(() => { const renderTableSum = useCallback(() => {
if (data?.meters?.length < 2) { if (data?.meters?.length < 2) {
return null; return null;
} }
return <tr key={data?.meters?.length + 1}> return <tr key={data?.meters?.length + 1}>
<td> </td> <td> </td>
<td> - </td> <td> -</td>
<td> - </td> <td> -</td>
<td> - </td> <td> -</td>
{ {
data?.park?.meter04kvType === Meter04KvType.DisableValley ? data?.park?.meter04kvType === Meter04KvType.DisableValley ?
<td>{data?.comprehensive?.refundOverall}</td> : <td>{data?.comprehensive?.refundOverall}</td> :
@ -218,29 +418,29 @@ export const UserReport: FC = () => {
) )
} }
{ {/*{*/}
data?.park?.meter04kvType === Meter04KvType.DisableValley ? {/* data?.park?.meter04kvType === Meter04KvType.DisableValley ?*/}
<td>{outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')}</td> : {/* <td>{outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')}</td> :*/}
<td> {/* <td>*/}
<div> {data?.comprehensive?.poolSharp || 0} </div> {/* <div> 尖:{data?.comprehensive?.poolSharp || 0} </div>*/}
<div> {data?.comprehensive?.poolPeak || 0} </div> {/* <div> 峰:{data?.comprehensive?.poolPeak || 0} </div>*/}
<div> {data?.comprehensive?.poolFlat || 0} </div> {/* <div> 平:{data?.comprehensive?.poolFlat || 0} </div>*/}
<div> {data?.comprehensive?.poolValley || 0} </div> {/* <div> 谷:{data?.comprehensive?.poolValley || 0} </div>*/}
</td> {/* </td>*/}
} {/*}*/}
<td>{outputWithPrecision( <td>{outputWithPrecision(
`${(data?.park?.meter04kvType === 0 ? amount?.current : data?.comprehensive?.finalAmount) || 0}`, 2, '-')}</td> `${(data?.park?.meter04kvType === 0 ? amount?.current : data?.comprehensive?.finalAmount) || 0}`, 2, '-')}</td>
</tr> </tr>
}, [data?.meters, data?.park?.meter04kvType, data?.comprehensive]) }, [data?.meters, data?.park?.meter04kvType, data?.comprehensive])
const totalFee = data?.tenement?.feeType === 3 ? data?.comprehensive?.fee : data?.comprehensive?.total
return ( return (
<> <>
<style> <style>
{ {
` `
td { td {
padding: 0.2cm padding: 0.2cm
} }
${ ${
@ -262,6 +462,17 @@ export const UserReport: FC = () => {
#content, .ant-col { #content, .ant-col {
font-size: 0.34cm; font-size: 0.34cm;
} }
@media print {
.page-break {
page-break-before: always; /* 在此元素前分页 */
/* 或 page-break-after: always; 在此元素后分页 */
}
}
#content {
padding: 20px
}
` `
} }
</style> </style>
@ -358,283 +569,299 @@ export const UserReport: FC = () => {
</Card> </Card>
<Card style={{marginLeft: 20}}> <Card style={{marginLeft: 20}}>
<h4 tw='mt-1 mb-1'> </h4> <h4 tw='mt-1 mb-1'> </h4>
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} &nbsp;&nbsp;</div> <div> {outputWithPrecision(totalFee, 2, '-')} &nbsp;&nbsp;</div>
</Card> </Card>
</div> </div>
<div tw='mt-3'> <div tw='mt-3'>
{
data?.tenement?.feeType === 3 ? <span style={{marginLeft: 20}}>
=*
</span> : <span style={{marginLeft: 20}}>
=+线*
</span>
}
<Divider tw='mt-2 mb-4 flex flex-col w-full'/> <Divider tw='mt-2 mb-4 flex flex-col w-full'/>
</div> </div>
{ {
data?.park?.meter04kvType === 0 ? ( data?.park?.meter04kvType === 0 ? (
<div tw='flex flex-row items-center' style={{ <div tw='flex flex-row items-center' style={{
height: 'fit-content', height: 'fit-content',
alignItems: "stretch", alignItems: "stretch",
flexGrow: "stratch" flexGrow: "stratch"
}}> }}>
<div tw='flex flex-row items-center flex-wrap'> <div tw='flex flex-row items-center flex-wrap'>
<Unit> </Unit> <Unit> </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> </h4> <h4 tw='mt-1 mb-1'> </h4>
<div> {outputWithPrecision(data?.comprehensive?.consumption, 2, '-')} &nbsp;&nbsp;</div> <div> {outputWithPrecision(data?.comprehensive?.consumption, 2, '-')} &nbsp;&nbsp;</div>
</Card> </Card>
{ {
data?.tenement?.feeType === 3 ? null : ( data?.tenement?.feeType === 3 ? null : (
<> <>
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> 线 </h4> <h4 tw='mt-1 mb-1'> 线 </h4>
<div> {outputWithPrecision(data?.comprehensive?.lossAmount, 2, '-')} &nbsp;&nbsp;</div> <div> {outputWithPrecision(data?.comprehensive?.lossAmount, 2, '-')} &nbsp;&nbsp;</div>
</Card> </Card>
</> </>
) )
} }
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> </h4> <h4 tw='mt-1 mb-1'> </h4>
<div> {outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')} &nbsp;&nbsp;</div> <div> {outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')} &nbsp;&nbsp;</div>
</Card> </Card>
{/*<Unit> - </Unit>*/} {/*<Unit> - </Unit>*/}
{/*<Card>*/} {/*<Card>*/}
{/* <h4 tw='mt-1 mb-1'> 退补电量: </h4>*/} {/* <h4 tw='mt-1 mb-1'> 退补电量: </h4>*/}
{/* <div> {outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/} {/* <div> {outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/}
{/*</Card>*/} {/*</Card>*/}
<Unit> </Unit><Unit> * </Unit> <Unit> </Unit><Unit> * </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> </h4> <h4 tw='mt-1 mb-1'> </h4>
<div> {outputWithPrecision(data?.comprehensive?.price, 6, '-')} &nbsp;&nbsp;/</div> <div> {outputWithPrecision(data?.comprehensive?.price, 6, '-')} &nbsp;&nbsp;/</div>
</Card> </Card>
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> </h4> <h4 tw='mt-1 mb-1'> </h4>
<div> {outputWithPrecision(data?.comprehensive?.basicPooled, 2, '-')} </div> <div> {outputWithPrecision(data?.comprehensive?.basicPooled, 2, '-')} </div>
</Card> </Card>
{/*<Unit> + </Unit>*/} {/*<Unit> + </Unit>*/}
{/*<Card>*/} {/*<Card>*/}
{/* <h4 tw='mt-1 mb-1'> 调整电费: </h4>*/} {/* <h4 tw='mt-1 mb-1'> 调整电费: </h4>*/}
{/* <div> {outputWithPrecision(data?.comprehensive?.adjustPooled, 2, '-')} 元</div>*/} {/* <div> {outputWithPrecision(data?.comprehensive?.adjustPooled, 2, '-')} 元</div>*/}
{/*</Card>*/} {/*</Card>*/}
</div>
<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}>
<Unit> = </Unit>
<Card style={{height: 200}}>
<h4 tw='mt-1 mb-1'> </h4>
<div> {outputWithPrecision(totalFee, 2, '-')} </div>
</Card>
</div>
</div> </div>
<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}> ) :
<Unit> = </Unit> renderFee()
<Card style={{height: 200}}> // (
<h4 tw='mt-1 mb-1'> </h4> // <div tw='' style={{
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} </div> // height: 'fit-content',
</Card> // alignItems: "stretch",
</div> // flexGrow: "stratch"
</div> // }}>
) : ( // <div tw='flex flex-row items-center flex-wrap'>
<div tw='' style={{ // <Unit> </Unit>
height: 'fit-content', // <Card>
alignItems: "stretch", // <h4 tw='mt-1 mb-1'> 电度电量(尖): </h4>
flexGrow: "stratch" // <div> {outputWithPrecision(data?.comprehensive?.sharpAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
}}> // </Card>
<div tw='flex flex-row items-center flex-wrap'> // {
<Unit> </Unit> // data?.tenement?.feeType === 3 ? null : (
<Card> // <>
<h4 tw='mt-1 mb-1'> </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.sharpAmount, 2, '-')} &nbsp;&nbsp;</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 线损电量(尖): </h4>
{ // <div> {outputWithPrecision(data?.comprehensive?.lossSharp, 2, '-')} &nbsp;&nbsp;千瓦时</div>
data?.tenement?.feeType === 3 ? null : ( // </Card>
<> // </>
<Unit> + </Unit> // )
<Card> // }
<h4 tw='mt-1 mb-1'> 线 </h4> //
<div> {outputWithPrecision(data?.comprehensive?.lossSharp, 2, '-')} &nbsp;&nbsp;</div> // <Unit> + </Unit>
</Card> // <Card>
</> // <h4 tw='mt-1 mb-1'> 公摊电量(尖): </h4>
) // <div> {outputWithPrecision(data?.comprehensive?.poolSharp || '0', 2, '-')} &nbsp;&nbsp;千瓦时</div>
} // </Card>
// {/*<Unit> - </Unit>*/}
<Unit> + </Unit> // {/*<Card>*/}
<Card> // {/* <h4 tw='mt-1 mb-1'> 退补电量(尖): </h4>*/}
<h4 tw='mt-1 mb-1'> </h4> // {/* <div> {outputWithPrecision(data?.comprehensive?.refundSharp, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/}
<div> {outputWithPrecision(data?.comprehensive?.poolSharp || '0', 2, '-')} &nbsp;&nbsp;</div> // {/*</Card>*/}
</Card> // <Unit> </Unit><Unit> * </Unit>
{/*<Unit> - </Unit>*/} // <Card>
{/*<Card>*/} // <h4 tw='mt-1 mb-1'> 电度单价(尖): </h4>
{/* <h4 tw='mt-1 mb-1'> 退补电量(尖): </h4>*/} // <div> {outputWithPrecision(data?.comprehensive?.priceSharp, 6, '-')} &nbsp;&nbsp;千瓦时/元</div>
{/* <div> {outputWithPrecision(data?.comprehensive?.refundSharp, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/} // </Card>
{/*</Card>*/} // <Unit> = </Unit>
<Unit> </Unit><Unit> * </Unit> // <Card>
<Card> // <h4 tw='mt-1 mb-1'> 电费(尖): </h4>
<h4 tw='mt-1 mb-1'> </h4> // <div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} 元&nbsp;&nbsp;</div>
<div> {outputWithPrecision(data?.comprehensive?.priceSharp, 6, '-')} &nbsp;&nbsp;/</div> // </Card>
</Card> // </div>
<Unit> = </Unit> // <div tw='flex flex-row items-center flex-wrap'>
<Card> // <Unit> </Unit>
<h4 tw='mt-1 mb-1'> </h4> // <Card>
<div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} &nbsp;&nbsp;</div> // <h4 tw='mt-1 mb-1'> 电度电量(峰): </h4>
</Card> // <div> {outputWithPrecision(data?.comprehensive?.peakAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</div> // </Card>
<div tw='flex flex-row items-center flex-wrap'> // {
<Unit> </Unit> // data?.tenement?.feeType === 3 ? null : (
<Card> // <>
<h4 tw='mt-1 mb-1'> </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.peakAmount, 2, '-')} &nbsp;&nbsp;</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 线损电量(峰): </h4>
{ // <div> {outputWithPrecision(data?.comprehensive?.lossPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div>
data?.tenement?.feeType === 3 ? null : ( // </Card>
<> // </>
<Unit> + </Unit> // )
<Card> // }
<h4 tw='mt-1 mb-1'> 线 </h4> //
<div> {outputWithPrecision(data?.comprehensive?.lossPeak, 2, '-')} &nbsp;&nbsp;</div> // <Unit> + </Unit>
</Card> // <Card>
</> // <h4 tw='mt-1 mb-1'> 公摊电量(峰): </h4>
) // <div> {outputWithPrecision(data?.comprehensive?.poolPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div>
} // </Card>
// {/*<Unit> - </Unit>*/}
<Unit> + </Unit> // {/*<Card>*/}
<Card> // {/* <h4 tw='mt-1 mb-1'> 退补电量(峰): </h4>*/}
<h4 tw='mt-1 mb-1'> </h4> // {/* <div> {outputWithPrecision(data?.comprehensive?.refundPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/}
<div> {outputWithPrecision(data?.comprehensive?.poolPeak, 2, '-')} &nbsp;&nbsp;</div> // {/*</Card>*/}
</Card> // <Unit> </Unit><Unit> * </Unit>
{/*<Unit> - </Unit>*/} // <Card>
{/*<Card>*/} // <h4 tw='mt-1 mb-1'> 用电单价(峰): </h4>
{/* <h4 tw='mt-1 mb-1'> 退补电量(峰): </h4>*/} // <div> {outputWithPrecision(data?.comprehensive?.pricePeak, 6, '-')} &nbsp;&nbsp;千瓦时/元</div>
{/* <div> {outputWithPrecision(data?.comprehensive?.refundPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/} // </Card>
{/*</Card>*/} // <Unit> = </Unit>
<Unit> </Unit><Unit> * </Unit> // <Card>
<Card> // <h4 tw='mt-1 mb-1'> 电费(峰): </h4>
<h4 tw='mt-1 mb-1'> </h4> // <div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} 元&nbsp;&nbsp;</div>
<div> {outputWithPrecision(data?.comprehensive?.pricePeak, 6, '-')} &nbsp;&nbsp;/</div> // </Card>
</Card> // </div>
<Unit> = </Unit> // <div tw='flex flex-row items-center flex-wrap'>
<Card> // <Unit> </Unit>
<h4 tw='mt-1 mb-1'> </h4> // <Card>
<div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} &nbsp;&nbsp;</div> // <h4 tw='mt-1 mb-1'> 电度电量(平): </h4>
</Card> // <div> {outputWithPrecision(data?.comprehensive?.flatAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</div> // </Card>
<div tw='flex flex-row items-center flex-wrap'> // {
<Unit> </Unit> // data?.tenement?.feeType === 3 ? null : (
<Card> // <>
<h4 tw='mt-1 mb-1'> </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.flatAmount, 2, '-')} &nbsp;&nbsp;</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 线损电量(平): </h4>
{ // <div> {outputWithPrecision(data?.comprehensive?.lossFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div>
data?.tenement?.feeType === 3 ? null : ( // </Card>
<> // </>
<Unit> + </Unit> // )
<Card> // }
<h4 tw='mt-1 mb-1'> 线 </h4> //
<div> {outputWithPrecision(data?.comprehensive?.lossFlat, 2, '-')} &nbsp;&nbsp;</div> // <Unit> + </Unit>
</Card> // <Card>
</> // <h4 tw='mt-1 mb-1'> 公摊电量(平): </h4>
) // <div> {outputWithPrecision(data?.comprehensive?.poolFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div>
} // </Card>
// {/*<Unit> - </Unit>*/}
<Unit> + </Unit> // {/*<Card>*/}
<Card> // {/* <h4 tw='mt-1 mb-1'> 退补电量(平): </h4>*/}
<h4 tw='mt-1 mb-1'> </h4> // {/* <div> {outputWithPrecision(data?.comprehensive?.refundFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/}
<div> {outputWithPrecision(data?.comprehensive?.poolFlat, 2, '-')} &nbsp;&nbsp;</div> // {/*</Card>*/}
</Card> // <Unit> </Unit><Unit> * </Unit>
{/*<Unit> - </Unit>*/} // <Card>
{/*<Card>*/} // <h4 tw='mt-1 mb-1'> 用电单价(平): </h4>
{/* <h4 tw='mt-1 mb-1'> 退补电量(平): </h4>*/} // <div> {outputWithPrecision(data?.comprehensive?.priceFlat, 6, '-')} &nbsp;&nbsp;千瓦时/元</div>
{/* <div> {outputWithPrecision(data?.comprehensive?.refundFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/} // </Card>
{/*</Card>*/} // <Unit> = </Unit>
<Unit> </Unit><Unit> * </Unit> // <Card>
<Card> // <h4 tw='mt-1 mb-1'> 电费(平): </h4>
<h4 tw='mt-1 mb-1'> </h4> // <div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} 元 &nbsp;&nbsp;</div>
<div> {outputWithPrecision(data?.comprehensive?.priceFlat, 6, '-')} &nbsp;&nbsp;/</div> // </Card>
</Card> // </div>
<Unit> = </Unit> // <div tw='flex flex-row items-center flex-wrap'>
<Card> // <Unit> </Unit>
<h4 tw='mt-1 mb-1'> </h4> // <Card>
<div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} &nbsp;&nbsp;</div> // <h4 tw='mt-1 mb-1'> 电度电量(谷): </h4>
</Card> // <div> {outputWithPrecision(data?.comprehensive?.valleyAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</div> // </Card>
<div tw='flex flex-row items-center flex-wrap'> // {
<Unit> </Unit> // data?.tenement?.feeType === 3 ? null : (
<Card> // <>
<h4 tw='mt-1 mb-1'> </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.valleyAmount, 2, '-')} &nbsp;&nbsp;</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 线损电量(谷): </h4>
{ // <div> {outputWithPrecision(data?.comprehensive?.lossValley, 2, '-')} &nbsp;&nbsp;千瓦时</div>
data?.tenement?.feeType === 3 ? null : ( // </Card>
<> // </>
<Unit> + </Unit> // )
<Card> // }
<h4 tw='mt-1 mb-1'> 线 </h4> //
<div> {outputWithPrecision(data?.comprehensive?.lossValley, 2, '-')} &nbsp;&nbsp;</div> // <Unit> + </Unit>
</Card> // <Card>
</> // <h4 tw='mt-1 mb-1'> 公摊电量(谷): </h4>
) // <div> {outputWithPrecision(data?.comprehensive?.poolValley, 2, '-')} &nbsp;&nbsp;千瓦时</div>
} // </Card>
// {/*<Unit> - </Unit>*/}
<Unit> + </Unit> // {/*<Card>*/}
<Card> // {/* <h4 tw='mt-1 mb-1'> 退补电量(谷): </h4>*/}
<h4 tw='mt-1 mb-1'> </h4> // {/* <div> {outputWithPrecision(data?.comprehensive?.refundValley, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/}
<div> {outputWithPrecision(data?.comprehensive?.poolValley, 2, '-')} &nbsp;&nbsp;</div> // {/*</Card>*/}
</Card> // <Unit> </Unit><Unit> * </Unit>
{/*<Unit> - </Unit>*/} // <Card>
{/*<Card>*/} // <h4 tw='mt-1 mb-1'> 用电单价(谷): </h4>
{/* <h4 tw='mt-1 mb-1'> 退补电量(谷): </h4>*/} // <div> {outputWithPrecision(data?.comprehensive?.priceValley, 6, '-')} &nbsp;&nbsp;千瓦时/元</div>
{/* <div> {outputWithPrecision(data?.comprehensive?.refundValley, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/} // </Card>
{/*</Card>*/} // <Unit> = </Unit>
<Unit> </Unit><Unit> * </Unit> // <Card>
<Card> // <h4 tw='mt-1 mb-1'> 电费(谷): </h4>
<h4 tw='mt-1 mb-1'> </h4> // <div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} 元 &nbsp;&nbsp;</div>
<div> {outputWithPrecision(data?.comprehensive?.priceValley, 6, '-')} &nbsp;&nbsp;/</div> // </Card>
</Card> // </div>
<Unit> = </Unit> // <div tw='flex flex-row items-center flex-wrap'>
<Card> // <Card>
<h4 tw='mt-1 mb-1'> </h4> // <h4 tw='mt-1 mb-1'> 电费(尖): </h4>
<div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} &nbsp;&nbsp;</div> // <div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} 元
</Card> // </div>
</div> // </Card>
<div tw='flex flex-row items-center flex-wrap'> // <Unit> + </Unit>
<Card> // <Card>
<h4 tw='mt-1 mb-1'> </h4> // <h4 tw='mt-1 mb-1'> 电费(峰): </h4>
<div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} // <div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} 元
</div> // </div>
</Card> // </Card>
<Unit> + </Unit> // <Unit> + </Unit>
<Card> // <Card>
<h4 tw='mt-1 mb-1'> </h4> // <h4 tw='mt-1 mb-1'> 电费(平): </h4>
<div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} // <div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} 元
</div> // </div>
</Card> // </Card>
<Unit> + </Unit> // <Unit> + </Unit>
<Card> // <Card>
<h4 tw='mt-1 mb-1'> </h4> // <h4 tw='mt-1 mb-1'> 电费(谷): </h4>
<div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} // <div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} 元
</div> // </div>
</Card> // </Card>
<Unit> + </Unit> // <Unit> = </Unit>
<Card> // <Card>
<h4 tw='mt-1 mb-1'> </h4> // <h4 tw='mt-1 mb-1'> 本期总电费: </h4>
<div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} // <div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} 元 &nbsp;&nbsp;</div>
</div> // </Card>
</Card> // </div>
<Unit> = </Unit> // {/*<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}>*/}
<Card> // {/* <Unit> = </Unit>*/}
<h4 tw='mt-1 mb-1'> </h4> // {/* <Card style={{height: 200}}>*/}
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} &nbsp;&nbsp;</div> // {/* <h4 tw='mt-1 mb-1'> 本期总电费(元): </h4>*/}
</Card> // {/* <div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} </div>*/}
</div> // {/* </Card>*/}
{/*<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}>*/} // {/*</div>*/}
{/* <Unit> = </Unit>*/} // </div>
{/* <Card style={{height: 200}}>*/} // )
{/* <h4 tw='mt-1 mb-1'> 本期总电费(元): </h4>*/}
{/* <div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} </div>*/}
{/* </Card>*/}
{/*</div>*/}
</div>
)
} }
</div> </div>
<div> <div className={"page-break"} style={{paddingTop: 30}}>
<div tw='mt-4'> <div>
<span style={{marginLeft: 20}}> <span style={{marginLeft: 20}}>
=-*-退- =-*-退-
=+线+ =+线
{/*+公摊电量*/}
</span> </span>
<Divider tw='mt-2 mb-4 flex flex-col w-full'/> <Divider tw='mt-2 mb-4 flex flex-col w-full'/>
</div> </div>
@ -655,7 +882,7 @@ export const UserReport: FC = () => {
<td>线</td> <td>线</td>
) )
} }
<td></td> {/*<td>公摊电量</td>*/}
<td></td> <td></td>
</tr> </tr>
</thead> </thead>

View File

@ -499,6 +499,10 @@ export type TenementComprehensiveDetail = PooledSumDetail & {
*/ */
finalAmount: string; finalAmount: string;
finalLossFee: string; finalLossFee: string;
finalSharpAmount: string,
finalPeakAmount: string,
finalFlatAmount: string,
finalValleyAmount: string,
}; };
/** /**