zly/electricity_bill_calc_userReport
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

同步更新

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

685
src/pages/report/index.tsx
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,6 +167,203 @@ 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;
@ -218,23 +418,23 @@ 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>
@ -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,11 +569,24 @@ 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>
{ {
@ -420,220 +644,223 @@ export const UserReport: FC = () => {
<Unit> = </Unit> <Unit> = </Unit>
<Card style={{height: 200}}> <Card style={{height: 200}}>
<h4 tw='mt-1 mb-1'> 本期总电费： </h4> <h4 tw='mt-1 mb-1'> 本期总电费： </h4>
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} 元</div> <div> {outputWithPrecision(totalFee, 2, '-')} 元</div>
</Card> </Card>
</div> </div>
</div> </div>
) : ( ) :
<div tw='' style={{ renderFee()
height: 'fit-content', // (
alignItems: "stretch", // <div tw='' style={{
flexGrow: "stratch" // height: 'fit-content',
}}> // alignItems: "stretch",
<div tw='flex flex-row items-center flex-wrap'> // flexGrow: "stratch"
<Unit> （ </Unit> // }}>
<Card> // <div tw='flex flex-row items-center flex-wrap'>
<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?.sharpAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
data?.tenement?.feeType === 3 ? null : ( // </Card>
<> // {
<Unit> + </Unit> // data?.tenement?.feeType === 3 ? null : (
<Card> // <>
<h4 tw='mt-1 mb-1'> 线损电量（尖）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.lossSharp, 2, '-')} &nbsp;&nbsp;千瓦时</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 线损电量（尖）： </h4>
</> // <div> {outputWithPrecision(data?.comprehensive?.lossSharp, 2, '-')} &nbsp;&nbsp;千瓦时</div>
) // </Card>
} // </>
// )
<Unit> + </Unit> // }
<Card> //
<h4 tw='mt-1 mb-1'> 公摊电量（尖）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.poolSharp || '0', 2, '-')} &nbsp;&nbsp;千瓦时</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 公摊电量（尖）： </h4>
{/*<Unit> - </Unit>*/} // <div> {outputWithPrecision(data?.comprehensive?.poolSharp || '0', 2, '-')} &nbsp;&nbsp;千瓦时</div>
{/*<Card>*/} // </Card>
{/* <h4 tw='mt-1 mb-1'> 退补电量（尖）： </h4>*/} // {/*<Unit> - </Unit>*/}
{/* <div> {outputWithPrecision(data?.comprehensive?.refundSharp, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/} // {/*<Card>*/}
{/*</Card>*/} // {/* <h4 tw='mt-1 mb-1'> 退补电量（尖）： </h4>*/}
<Unit> ） </Unit><Unit> * </Unit> // {/* <div> {outputWithPrecision(data?.comprehensive?.refundSharp, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/}
<Card> // {/*</Card>*/}
<h4 tw='mt-1 mb-1'> 电度单价（尖）： </h4> // <Unit> ） </Unit><Unit> * </Unit>
<div> {outputWithPrecision(data?.comprehensive?.priceSharp, 6, '-')} &nbsp;&nbsp;千瓦时/元</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 电度单价（尖）： </h4>
<Unit> = </Unit> // <div> {outputWithPrecision(data?.comprehensive?.priceSharp, 6, '-')} &nbsp;&nbsp;千瓦时/元</div>
<Card> // </Card>
<h4 tw='mt-1 mb-1'> 电费（尖）： </h4> // <Unit> = </Unit>
<div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} 元&nbsp;&nbsp;</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 电费（尖）： </h4>
</div> // <div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} 元&nbsp;&nbsp;</div>
<div tw='flex flex-row items-center flex-wrap'> // </Card>
<Unit> （ </Unit> // </div>
<Card> // <div tw='flex flex-row items-center flex-wrap'>
<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?.peakAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
data?.tenement?.feeType === 3 ? null : ( // </Card>
<> // {
<Unit> + </Unit> // data?.tenement?.feeType === 3 ? null : (
<Card> // <>
<h4 tw='mt-1 mb-1'> 线损电量（峰）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.lossPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 线损电量（峰）： </h4>
</> // <div> {outputWithPrecision(data?.comprehensive?.lossPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div>
) // </Card>
} // </>
// )
<Unit> + </Unit> // }
<Card> //
<h4 tw='mt-1 mb-1'> 公摊电量（峰）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.poolPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 公摊电量（峰）： </h4>
{/*<Unit> - </Unit>*/} // <div> {outputWithPrecision(data?.comprehensive?.poolPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div>
{/*<Card>*/} // </Card>
{/* <h4 tw='mt-1 mb-1'> 退补电量（峰）： </h4>*/} // {/*<Unit> - </Unit>*/}
{/* <div> {outputWithPrecision(data?.comprehensive?.refundPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/} // {/*<Card>*/}
{/*</Card>*/} // {/* <h4 tw='mt-1 mb-1'> 退补电量（峰）： </h4>*/}
<Unit> ） </Unit><Unit> * </Unit> // {/* <div> {outputWithPrecision(data?.comprehensive?.refundPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/}
<Card> // {/*</Card>*/}
<h4 tw='mt-1 mb-1'> 用电单价（峰）： </h4> // <Unit> ） </Unit><Unit> * </Unit>
<div> {outputWithPrecision(data?.comprehensive?.pricePeak, 6, '-')} &nbsp;&nbsp;千瓦时/元</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 用电单价（峰）： </h4>
<Unit> = </Unit> // <div> {outputWithPrecision(data?.comprehensive?.pricePeak, 6, '-')} &nbsp;&nbsp;千瓦时/元</div>
<Card> // </Card>
<h4 tw='mt-1 mb-1'> 电费（峰）： </h4> // <Unit> = </Unit>
<div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} 元&nbsp;&nbsp;</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 电费（峰）： </h4>
</div> // <div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} 元&nbsp;&nbsp;</div>
<div tw='flex flex-row items-center flex-wrap'> // </Card>
<Unit> （ </Unit> // </div>
<Card> // <div tw='flex flex-row items-center flex-wrap'>
<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?.flatAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
data?.tenement?.feeType === 3 ? null : ( // </Card>
<> // {
<Unit> + </Unit> // data?.tenement?.feeType === 3 ? null : (
<Card> // <>
<h4 tw='mt-1 mb-1'> 线损电量（平）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.lossFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 线损电量（平）： </h4>
</> // <div> {outputWithPrecision(data?.comprehensive?.lossFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div>
) // </Card>
} // </>
// )
<Unit> + </Unit> // }
<Card> //
<h4 tw='mt-1 mb-1'> 公摊电量（平）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.poolFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 公摊电量（平）： </h4>
{/*<Unit> - </Unit>*/} // <div> {outputWithPrecision(data?.comprehensive?.poolFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div>
{/*<Card>*/} // </Card>
{/* <h4 tw='mt-1 mb-1'> 退补电量（平）： </h4>*/} // {/*<Unit> - </Unit>*/}
{/* <div> {outputWithPrecision(data?.comprehensive?.refundFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/} // {/*<Card>*/}
{/*</Card>*/} // {/* <h4 tw='mt-1 mb-1'> 退补电量（平）： </h4>*/}
<Unit> ） </Unit><Unit> * </Unit> // {/* <div> {outputWithPrecision(data?.comprehensive?.refundFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/}
<Card> // {/*</Card>*/}
<h4 tw='mt-1 mb-1'> 用电单价（平）： </h4> // <Unit> ） </Unit><Unit> * </Unit>
<div> {outputWithPrecision(data?.comprehensive?.priceFlat, 6, '-')} &nbsp;&nbsp;千瓦时/元</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 用电单价（平）： </h4>
<Unit> = </Unit> // <div> {outputWithPrecision(data?.comprehensive?.priceFlat, 6, '-')} &nbsp;&nbsp;千瓦时/元</div>
<Card> // </Card>
<h4 tw='mt-1 mb-1'> 电费（平）： </h4> // <Unit> = </Unit>
<div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} 元 &nbsp;&nbsp;</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 电费（平）： </h4>
</div> // <div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} 元 &nbsp;&nbsp;</div>
<div tw='flex flex-row items-center flex-wrap'> // </Card>
<Unit> （ </Unit> // </div>
<Card> // <div tw='flex flex-row items-center flex-wrap'>
<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?.valleyAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
data?.tenement?.feeType === 3 ? null : ( // </Card>
<> // {
<Unit> + </Unit> // data?.tenement?.feeType === 3 ? null : (
<Card> // <>
<h4 tw='mt-1 mb-1'> 线损电量（谷）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.lossValley, 2, '-')} &nbsp;&nbsp;千瓦时</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 线损电量（谷）： </h4>
</> // <div> {outputWithPrecision(data?.comprehensive?.lossValley, 2, '-')} &nbsp;&nbsp;千瓦时</div>
) // </Card>
} // </>
// )
<Unit> + </Unit> // }
<Card> //
<h4 tw='mt-1 mb-1'> 公摊电量（谷）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.poolValley, 2, '-')} &nbsp;&nbsp;千瓦时</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 公摊电量（谷）： </h4>
{/*<Unit> - </Unit>*/} // <div> {outputWithPrecision(data?.comprehensive?.poolValley, 2, '-')} &nbsp;&nbsp;千瓦时</div>
{/*<Card>*/} // </Card>
{/* <h4 tw='mt-1 mb-1'> 退补电量（谷）： </h4>*/} // {/*<Unit> - </Unit>*/}
{/* <div> {outputWithPrecision(data?.comprehensive?.refundValley, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/} // {/*<Card>*/}
{/*</Card>*/} // {/* <h4 tw='mt-1 mb-1'> 退补电量（谷）： </h4>*/}
<Unit> ） </Unit><Unit> * </Unit> // {/* <div> {outputWithPrecision(data?.comprehensive?.refundValley, 2, '-')} &nbsp;&nbsp;千瓦时</div>*/}
<Card> // {/*</Card>*/}
<h4 tw='mt-1 mb-1'> 用电单价（谷）： </h4> // <Unit> ） </Unit><Unit> * </Unit>
<div> {outputWithPrecision(data?.comprehensive?.priceValley, 6, '-')} &nbsp;&nbsp;千瓦时/元</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 用电单价（谷）： </h4>
<Unit> = </Unit> // <div> {outputWithPrecision(data?.comprehensive?.priceValley, 6, '-')} &nbsp;&nbsp;千瓦时/元</div>
<Card> // </Card>
<h4 tw='mt-1 mb-1'> 电费（谷）： </h4> // <Unit> = </Unit>
<div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} 元 &nbsp;&nbsp;</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 电费（谷）： </h4>
</div> // <div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} 元 &nbsp;&nbsp;</div>
<div tw='flex flex-row items-center flex-wrap'> // </Card>
<Card> // </div>
<h4 tw='mt-1 mb-1'> 电费（尖）： </h4> // <div tw='flex flex-row items-center flex-wrap'>
<div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} 元 // <Card>
</div> // <h4 tw='mt-1 mb-1'> 电费（尖）： </h4>
</Card> // <div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} 元
<Unit> + </Unit> // </div>
<Card> // </Card>
<h4 tw='mt-1 mb-1'> 电费（峰）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} 元 // <Card>
</div> // <h4 tw='mt-1 mb-1'> 电费（峰）： </h4>
</Card> // <div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} 元
<Unit> + </Unit> // </div>
<Card> // </Card>
<h4 tw='mt-1 mb-1'> 电费（平）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} 元 // <Card>
</div> // <h4 tw='mt-1 mb-1'> 电费（平）： </h4>
</Card> // <div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} 元
<Unit> + </Unit> // </div>
<Card> // </Card>
<h4 tw='mt-1 mb-1'> 电费（谷）： </h4> // <Unit> + </Unit>
<div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} 元 // <Card>
</div> // <h4 tw='mt-1 mb-1'> 电费（谷）： </h4>
</Card> // <div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} 元
<Unit> = </Unit> // </div>
<Card> // </Card>
<h4 tw='mt-1 mb-1'> 本期总电费： </h4> // <Unit> = </Unit>
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} 元 &nbsp;&nbsp;</div> // <Card>
</Card> // <h4 tw='mt-1 mb-1'> 本期总电费： </h4>
</div> // <div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} 元 &nbsp;&nbsp;</div>
{/*<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}>*/} // </Card>
{/* <Unit> = </Unit>*/} // </div>
{/* <Card style={{height: 200}}>*/} // {/*<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}>*/}
{/* <h4 tw='mt-1 mb-1'> 本期总电费（元）： </h4>*/} // {/* <Unit> = </Unit>*/}
{/* <div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} </div>*/} // {/* <Card style={{height: 200}}>*/}
{/* </Card>*/} // {/* <h4 tw='mt-1 mb-1'> 本期总电费（元）： </h4>*/}
{/*</div>*/} // {/* <div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} </div>*/}
</div> // {/* </Card>*/}
) // {/*</div>*/}
// </div>
// )
} }
</div> </div>
<div className={"page-break"} style={{paddingTop: 30}}>
<div> <div>
<div tw='mt-4'>
用电明细 用电明细
<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'/>
@ -655,7 +882,7 @@ export const UserReport: FC = () => {
<td>线损电量</td> <td>线损电量</td>
) )
} }
<td>公摊电量</td> {/*<td>公摊电量</td>*/}
<td>合计电量</td> <td>合计电量</td>
</tr> </tr>
</thead> </thead>

4
src/shared/model-publicity.ts
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,
}; };
/** /**