支持峰谷
This commit is contained in:
parent
ab0cecf77a
commit
61b79fb0a1
@ -1,7 +1,7 @@
|
||||
import 'twin.macro'
|
||||
|
||||
export default function(props) {
|
||||
return <div tw='' style={{marginTop: "20px", marginBottom: "20px",
|
||||
return <div tw='' style={{marginTop: "20px", marginBottom: "12px",
|
||||
border: '1px solid #ccc', borderRadius: '5px', display: "inline-block", width: '138px', height: '80px', ...(props.style || {}) }}>
|
||||
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>
|
||||
<div>
|
||||
|
||||
@ -16,26 +16,18 @@ import TopContent from './components/TopContent';
|
||||
// 核心代码
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import {getRoundNumber} from "@/utils";
|
||||
import 'twin.macro';
|
||||
import {Meter04KvType} from "@/shared/model-park";
|
||||
|
||||
function getAmount(amount: string, loss: string, refund: string, price: string): string {
|
||||
return `${
|
||||
getRoundNumber(
|
||||
Number(
|
||||
getRoundNumber(
|
||||
Number(
|
||||
(Number(
|
||||
(Number(amount) + Number(loss)
|
||||
)
|
||||
) -
|
||||
Number(refund)
|
||||
)
|
||||
)
|
||||
)
|
||||
) * Number(price)
|
||||
)}`
|
||||
function getNestAmount(arr: string[] = []): string {
|
||||
if (!arr.length) {
|
||||
return "0"
|
||||
}
|
||||
return arr?.reduce((prev, next) => {
|
||||
return getRoundNumber(Number(prev || 0) + Number(next || 0))
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export const UserReport: FC = () => {
|
||||
const [searchParams] = useSearchParams()
|
||||
const tid = searchParams.get("tenement");
|
||||
@ -83,23 +75,165 @@ export const UserReport: FC = () => {
|
||||
|
||||
const renderTable = useCallback(() => {
|
||||
return data?.meters?.map((item, index) => {
|
||||
const finalAmount = Number(item?.overall?.amount || 0) + Number(item?.loss?.amount || 0) + Number(item?.publicAmount || 0)
|
||||
// const finalAmount = Number(item?.overall?.amount || 0) + Number(item?.loss?.amount || 0) + Number(item?.publicAmount || 0)
|
||||
return (
|
||||
<tr key={index}>
|
||||
<td>{item?.meterNo}</td>
|
||||
<td>{item?.address}</td>
|
||||
<td>{outputWithPrecision(item?.startNumber, 2, '-')}</td>
|
||||
<td>{outputWithPrecision(item?.endNumber, 2, '-')}</td>
|
||||
<td>{outputWithPrecision(item?.displayRatio, 2, '-')}</td>
|
||||
<td>{outputWithPrecision(item?.overall?.amount, 2, '-')}</td>
|
||||
{
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{outputWithPrecision(item?.startNumber, 2, '-')}</td> :
|
||||
<td>
|
||||
<div> 尖：{item?.startSharp} </div>
|
||||
<div> 峰：{item?.startPeak} </div>
|
||||
<div> 平：{item?.startFlat} </div>
|
||||
<div> 谷：{item?.startValley} </div>
|
||||
</td>
|
||||
}
|
||||
{
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{outputWithPrecision(item?.endNumber, 2, '-')}</td> :
|
||||
<td>
|
||||
<div> 尖：{item?.endSharp} </div>
|
||||
<div> 峰：{item?.endPeak} </div>
|
||||
<div> 平：{item?.endFlat} </div>
|
||||
<div> 谷：{item?.endValley} </div>
|
||||
</td>
|
||||
}
|
||||
|
||||
<td>{outputWithPrecision(item?.ratio, 2, '-')}</td>
|
||||
{
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{item?.refundAmount}</td> :
|
||||
<td>
|
||||
<div> 尖：{item?.refundSharp} </div>
|
||||
<div> 峰：{item?.refundPeak} </div>
|
||||
<div> 平：{item?.refundFlat} </div>
|
||||
<div> 谷：{item?.refundValley} </div>
|
||||
</td>
|
||||
}
|
||||
{
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{item?.nestOverall}</td> :
|
||||
<td>
|
||||
<div> 尖：{item?.nestSharp} </div>
|
||||
<div> 峰：{item?.nestPeak} </div>
|
||||
<div> 平：{item?.nestFlat} </div>
|
||||
<div> 谷：{item?.nestValley} </div>
|
||||
</td>
|
||||
}
|
||||
{
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{outputWithPrecision(item?.overall?.amount, 2, '-')}</td> :
|
||||
<td>
|
||||
<div> 尖：{item?.critical?.amount} </div>
|
||||
<div> 峰：{item?.peak?.amount} </div>
|
||||
<div> 平：{item?.flat?.amount} </div>
|
||||
<div> 谷：{item?.valley?.amount} </div>
|
||||
</td>
|
||||
}
|
||||
|
||||
{/* <td>{outputWithPrecision(item?.finalTotal ? (1 / (1 - Number(item?.loss?.amount) / Number(item?.finalTotal)) - 1) * 100 : undefined, 2, '-')} %</td> */}
|
||||
<td>{outputWithPrecision(item?.loss?.amount, 2, '-')}</td>
|
||||
<td>{outputWithPrecision(item?.publicAmount, 2, '-')}</td>
|
||||
<td>{outputWithPrecision(finalAmount, 2, '-')}</td>
|
||||
{
|
||||
data?.tenement?.feeType === 3 ? null : (
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{outputWithPrecision(item?.loss?.amount, 2, '-')}</td> :
|
||||
<td>
|
||||
<div> 尖：{item?.lossSharp} </div>
|
||||
<div> 峰：{item?.lossPeak} </div>
|
||||
<div> 平：{item?.lossFlat} </div>
|
||||
<div> 谷：{item?.lossValley} </div>
|
||||
</td>
|
||||
|
||||
)
|
||||
}
|
||||
{
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{outputWithPrecision(item?.publicAmount, 2, '-')}</td> :
|
||||
<td>
|
||||
<div> 尖：{item?.poolSharp || 0} </div>
|
||||
<div> 峰：{item?.poolPeak || 0} </div>
|
||||
<div> 平：{item?.poolFlat || 0} </div>
|
||||
<div> 谷：{item?.poolValley || 0} </div>
|
||||
</td>
|
||||
}
|
||||
|
||||
|
||||
<td>{outputWithPrecision(item?.finalAmount, 2, '-')}</td>
|
||||
</tr>
|
||||
)
|
||||
)
|
||||
})
|
||||
}, [data?.meters])
|
||||
}, [data?.meters, data?.park?.meter04kvType])
|
||||
|
||||
const renderTableSum = useCallback(() => {
|
||||
if (data?.meters?.length < 2) {
|
||||
return null;
|
||||
}
|
||||
return <tr key={data?.meters?.length + 1}>
|
||||
<td> 总计 </td>
|
||||
<td> - </td>
|
||||
<td> - </td>
|
||||
<td> - </td>
|
||||
{
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{data?.comprehensive?.refundOverall}</td> :
|
||||
<td>
|
||||
<div> 尖：{data?.comprehensive?.refundSharp} </div>
|
||||
<div> 峰：{data?.comprehensive?.refundPeak} </div>
|
||||
<div> 平：{data?.comprehensive?.refundFlat} </div>
|
||||
<div> 谷：{data?.comprehensive?.refundValley} </div>
|
||||
</td>
|
||||
}
|
||||
{
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{getNestAmount(data?.meters?.map(item => item?.nestOverall))}</td> :
|
||||
<td>
|
||||
<div> 尖：{getNestAmount(data?.meters?.map(item => item?.nestSharp))} </div>
|
||||
<div> 峰：{getNestAmount(data?.meters?.map(item => item?.nestPeak))} </div>
|
||||
<div> 平：{getNestAmount(data?.meters?.map(item => item?.nestFlat))} </div>
|
||||
<div> 谷：{getNestAmount(data?.meters?.map(item => item?.nestValley))} </div>
|
||||
</td>
|
||||
}
|
||||
{
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{outputWithPrecision(data?.comprehensive?.consumption, 2, '-')}</td> :
|
||||
<td>
|
||||
<div> 尖：{data?.comprehensive?.sharpAmount} </div>
|
||||
<div> 峰：{data?.comprehensive?.peakAmount} </div>
|
||||
<div> 平：{data?.comprehensive?.flatAmount} </div>
|
||||
<div> 谷：{data?.comprehensive?.valleyAmount} </div>
|
||||
</td>
|
||||
}
|
||||
|
||||
{/* <td>{outputWithPrecision(item?.finalTotal ? (1 / (1 - Number(item?.loss?.amount) / Number(item?.finalTotal)) - 1) * 100 : undefined, 2, '-')} %</td> */}
|
||||
{
|
||||
data?.tenement?.feeType === 3 ? null : (
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{outputWithPrecision(data?.comprehensive?.lossAmount, 2, '-')}</td> :
|
||||
<td>
|
||||
<div> 尖：{data?.comprehensive?.lossSharp} </div>
|
||||
<div> 峰：{data?.comprehensive?.lossPeak} </div>
|
||||
<div> 平：{data?.comprehensive?.lossFlat} </div>
|
||||
<div> 谷：{data?.comprehensive?.lossValley} </div>
|
||||
</td>
|
||||
|
||||
)
|
||||
}
|
||||
{
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ?
|
||||
<td>{outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')}</td> :
|
||||
<td>
|
||||
<div> 尖：{data?.comprehensive?.poolSharp || 0} </div>
|
||||
<div> 峰：{data?.comprehensive?.poolPeak || 0} </div>
|
||||
<div> 平：{data?.comprehensive?.poolFlat || 0} </div>
|
||||
<div> 谷：{data?.comprehensive?.poolValley || 0} </div>
|
||||
</td>
|
||||
}
|
||||
|
||||
|
||||
<td>{outputWithPrecision(
|
||||
`${(data?.park?.meter04kvType === 0 ? amount?.current : data?.comprehensive?.finalAmount) || 0}`, 2, '-')}</td>
|
||||
</tr>
|
||||
}, [data?.meters, data?.park?.meter04kvType, data?.comprehensive])
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -109,16 +243,20 @@ export const UserReport: FC = () => {
|
||||
td {
|
||||
padding: 0.2cm
|
||||
}
|
||||
tr td:nth-child(1) {
|
||||
width: 3.5cm;
|
||||
${
|
||||
data?.park?.meter04kvType === Meter04KvType.DisableValley ? ` tr td:nth-child(1) {
|
||||
|
||||
width: 4.5cm;
|
||||
}` : ` tr td:nth-child(1) {
|
||||
width: 2cm;
|
||||
|
||||
}`
|
||||
}
|
||||
|
||||
tr td:nth-child(2), tr td:nth-child(3), tr td:nth-child(4) {
|
||||
width: 1.5cm;
|
||||
}
|
||||
tr td:nth-child(2) {
|
||||
width: 4.5cm;
|
||||
}
|
||||
tr td:nth-child(3), tr td:nth-child(4), tr td:nth-child(5) {
|
||||
width: 1.8cm;
|
||||
}
|
||||
tr td:nth-child(6), tr td:nth-child(7), tr td:nth-child(8), tr td:nth-child(9) {
|
||||
tr td:nth-child(5), tr td:nth-child(6), tr td:nth-child(7), tr td:nth-child(8), tr td:nth-child(9), tr td:nth-child(10) {
|
||||
width: 2cm;
|
||||
}
|
||||
#content, .ant-col {
|
||||
@ -215,9 +353,13 @@ export const UserReport: FC = () => {
|
||||
<h4 tw='mt-1 mb-1'> 合计电量： </h4>
|
||||
<div> {
|
||||
outputWithPrecision(
|
||||
`${Number(amount.current || 0)}`, 2, '-')} 千瓦时
|
||||
`${Number((data?.park?.meter04kvType === 0 ? amount?.current : data?.comprehensive?.finalAmount) || 0)}`, 2, '-')} 千瓦时
|
||||
</div>
|
||||
</Card>
|
||||
<Card style={{marginLeft: 20}}>
|
||||
<h4 tw='mt-1 mb-1'> 合计电费： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} 元 </div>
|
||||
</Card>
|
||||
</div>
|
||||
<div tw='mt-3'>
|
||||
电费构成
|
||||
@ -253,11 +395,11 @@ export const UserReport: FC = () => {
|
||||
<h4 tw='mt-1 mb-1'> 公摊电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
<Unit> - </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 退补电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{/*<Unit> - </Unit>*/}
|
||||
{/*<Card>*/}
|
||||
{/* <h4 tw='mt-1 mb-1'> 退补电量： </h4>*/}
|
||||
{/* <div> {outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')} 千瓦时</div>*/}
|
||||
{/*</Card>*/}
|
||||
<Unit> ） </Unit><Unit> * </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 电度单价： </h4>
|
||||
@ -266,19 +408,19 @@ export const UserReport: FC = () => {
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 基本电费： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.basicPooled, 2, '-')} </div>
|
||||
</Card>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 调整电费： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.adjustPooled, 2, '-')} </div>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.basicPooled, 2, '-')} 元</div>
|
||||
</Card>
|
||||
{/*<Unit> + </Unit>*/}
|
||||
{/*<Card>*/}
|
||||
{/* <h4 tw='mt-1 mb-1'> 调整电费： </h4>*/}
|
||||
{/* <div> {outputWithPrecision(data?.comprehensive?.adjustPooled, 2, '-')} 元</div>*/}
|
||||
{/*</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(data?.comprehensive?.total, 2, '-')} </div>
|
||||
<h4 tw='mt-1 mb-1'> 本期总电费： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} 元</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
@ -291,7 +433,7 @@ export const UserReport: FC = () => {
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Unit> （ </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 尖电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 电度电量（尖）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.sharpAmount, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{
|
||||
@ -299,7 +441,7 @@ export const UserReport: FC = () => {
|
||||
<>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 尖线损电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 线损电量（尖）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.lossSharp, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
</>
|
||||
@ -308,34 +450,29 @@ export const UserReport: FC = () => {
|
||||
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 尖公摊电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 公摊电量（尖）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.poolSharp || '0', 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
<Unit> - </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 尖退补电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.refundSharp, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{/*<Unit> - </Unit>*/}
|
||||
{/*<Card>*/}
|
||||
{/* <h4 tw='mt-1 mb-1'> 退补电量（尖）： </h4>*/}
|
||||
{/* <div> {outputWithPrecision(data?.comprehensive?.refundSharp, 2, '-')} 千瓦时</div>*/}
|
||||
{/*</Card>*/}
|
||||
<Unit> ） </Unit><Unit> * </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 尖用电单价： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 电度单价（尖）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.priceSharp, 6, '-')} 千瓦时/元</div>
|
||||
</Card>
|
||||
<Unit> = </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 尖电费： </h4>
|
||||
<div> {outputWithPrecision(getAmount(
|
||||
data?.comprehensive?.sharpAmount || "0",
|
||||
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossSharp || "0"),
|
||||
data?.comprehensive?.refundSharp || "0",
|
||||
data?.comprehensive?.priceSharp || "0",
|
||||
), 2, '-')} </div>
|
||||
<h4 tw='mt-1 mb-1'> 电费（尖）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} 元 </div>
|
||||
</Card>
|
||||
</div>
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Unit> （ </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 峰电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 电度电量（峰）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.peakAmount, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{
|
||||
@ -343,7 +480,7 @@ export const UserReport: FC = () => {
|
||||
<>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 峰线损电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 线损电量（峰）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.lossPeak, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
</>
|
||||
@ -352,34 +489,29 @@ export const UserReport: FC = () => {
|
||||
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 峰公摊电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 公摊电量（峰）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.poolPeak, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
<Unit> - </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 峰退补电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.refundPeak, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{/*<Unit> - </Unit>*/}
|
||||
{/*<Card>*/}
|
||||
{/* <h4 tw='mt-1 mb-1'> 退补电量（峰）： </h4>*/}
|
||||
{/* <div> {outputWithPrecision(data?.comprehensive?.refundPeak, 2, '-')} 千瓦时</div>*/}
|
||||
{/*</Card>*/}
|
||||
<Unit> ） </Unit><Unit> * </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 峰用电单价： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 用电单价（峰）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.pricePeak, 6, '-')} 千瓦时/元</div>
|
||||
</Card>
|
||||
<Unit> = </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 峰电费： </h4>
|
||||
<div> {outputWithPrecision(getAmount(
|
||||
data?.comprehensive?.peakAmount || "0",
|
||||
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossPeak || "0"),
|
||||
data?.comprehensive?.refundPeak || "0",
|
||||
data?.comprehensive?.pricePeak || "0",
|
||||
), 2, '-')} </div>
|
||||
<h4 tw='mt-1 mb-1'> 电费（峰）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} 元 </div>
|
||||
</Card>
|
||||
</div>
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Unit> （ </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 平电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 电度电量（平）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.flatAmount, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{
|
||||
@ -387,7 +519,7 @@ export const UserReport: FC = () => {
|
||||
<>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 平线损电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 线损电量（平）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.lossFlat, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
</>
|
||||
@ -396,34 +528,29 @@ export const UserReport: FC = () => {
|
||||
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 平公摊电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 公摊电量（平）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.poolFlat, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
<Unit> - </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 平退补电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.refundFlat, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{/*<Unit> - </Unit>*/}
|
||||
{/*<Card>*/}
|
||||
{/* <h4 tw='mt-1 mb-1'> 退补电量（平）： </h4>*/}
|
||||
{/* <div> {outputWithPrecision(data?.comprehensive?.refundFlat, 2, '-')} 千瓦时</div>*/}
|
||||
{/*</Card>*/}
|
||||
<Unit> ） </Unit><Unit> * </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 平用电单价： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 用电单价（平）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.priceFlat, 6, '-')} 千瓦时/元</div>
|
||||
</Card>
|
||||
<Unit> = </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 平电费： </h4>
|
||||
<div> {outputWithPrecision(getAmount(
|
||||
data?.comprehensive?.flatAmount || "0",
|
||||
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossFlat || "0"),
|
||||
data?.comprehensive?.refundFlat || "0",
|
||||
data?.comprehensive?.priceFlat || "0",
|
||||
), 2, '-')} </div>
|
||||
<h4 tw='mt-1 mb-1'> 电费（平）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} 元 </div>
|
||||
</Card>
|
||||
</div>
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Unit> （ </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 谷电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 电度电量（谷）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.valleyAmount, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{
|
||||
@ -431,7 +558,7 @@ export const UserReport: FC = () => {
|
||||
<>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 谷线损电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 线损电量（谷）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.lossValley, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
</>
|
||||
@ -440,74 +567,53 @@ export const UserReport: FC = () => {
|
||||
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 谷公摊电量： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 公摊电量（谷）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.poolValley, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
<Unit> - </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 谷退补电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.refundValley, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{/*<Unit> - </Unit>*/}
|
||||
{/*<Card>*/}
|
||||
{/* <h4 tw='mt-1 mb-1'> 退补电量（谷）： </h4>*/}
|
||||
{/* <div> {outputWithPrecision(data?.comprehensive?.refundValley, 2, '-')} 千瓦时</div>*/}
|
||||
{/*</Card>*/}
|
||||
<Unit> ） </Unit><Unit> * </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 谷用电单价： </h4>
|
||||
<h4 tw='mt-1 mb-1'> 用电单价（谷）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.priceValley, 6, '-')} 千瓦时/元</div>
|
||||
</Card>
|
||||
<Unit> = </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 谷电费： </h4>
|
||||
<div> {outputWithPrecision(getAmount(
|
||||
data?.comprehensive?.valleyAmount || "0",
|
||||
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossValley || "0"),
|
||||
data?.comprehensive?.refundValley || "0",
|
||||
data?.comprehensive?.priceValley || "0",
|
||||
), 2, '-')} </div>
|
||||
<h4 tw='mt-1 mb-1'> 电费（谷）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} 元 </div>
|
||||
</Card>
|
||||
</div>
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 尖电费： </h4>
|
||||
<div> {outputWithPrecision(getAmount(
|
||||
data?.comprehensive?.sharpAmount || "0",
|
||||
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossSharp || "0"),
|
||||
data?.comprehensive?.refundSharp || "0",
|
||||
data?.comprehensive?.priceSharp || "0",
|
||||
), 2, '-')} </div>
|
||||
<h4 tw='mt-1 mb-1'> 电费（尖）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} 元
|
||||
</div>
|
||||
</Card>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 峰电费： </h4>
|
||||
<div> {outputWithPrecision(getAmount(
|
||||
data?.comprehensive?.peakAmount || "0",
|
||||
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossPeak || "0"),
|
||||
data?.comprehensive?.refundPeak || "0",
|
||||
data?.comprehensive?.pricePeak || "0",
|
||||
), 2, '-')} </div>
|
||||
<h4 tw='mt-1 mb-1'> 电费（峰）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} 元
|
||||
</div>
|
||||
</Card>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 平电费： </h4>
|
||||
<div> {outputWithPrecision(getAmount(
|
||||
data?.comprehensive?.flatAmount || "0",
|
||||
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossFlat || "0"),
|
||||
data?.comprehensive?.refundFlat || "0",
|
||||
data?.comprehensive?.priceFlat || "0",
|
||||
), 2, '-')}</div>
|
||||
<h4 tw='mt-1 mb-1'> 电费（平）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} 元
|
||||
</div>
|
||||
</Card>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 谷电费： </h4>
|
||||
<div> {outputWithPrecision(getAmount(
|
||||
data?.comprehensive?.valleyAmount || "0",
|
||||
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossValley || "0"),
|
||||
data?.comprehensive?.refundValley || "0",
|
||||
data?.comprehensive?.priceValley || "0",
|
||||
), 2, '-')}</div>
|
||||
<h4 tw='mt-1 mb-1'> 电费（谷）： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} 元
|
||||
</div>
|
||||
</Card>
|
||||
<Unit> = </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 本期总电费： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} </div>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} 元 </div>
|
||||
</Card>
|
||||
</div>
|
||||
{/*<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}>*/}
|
||||
@ -524,17 +630,24 @@ export const UserReport: FC = () => {
|
||||
<div>
|
||||
<div tw='mt-4'>
|
||||
用电明细
|
||||
<span style={{marginLeft: 20}}>
|
||||
（
|
||||
电度电量=（止码-起码）*倍率-退补电量-从表电量，
|
||||
合计电量=电度电量+线损电量+公摊电量
|
||||
）
|
||||
</span>
|
||||
<Divider tw='mt-2 mb-4 flex flex-col w-full'/>
|
||||
</div>
|
||||
<div tw="mt-3" style={{fontSize: 12}}>
|
||||
<table border={1} width={"100%"} cellSpacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>电表编号</td>
|
||||
<td>电表地址</td>
|
||||
<td>起码</td>
|
||||
<td>止码</td>
|
||||
<td>表倍率</td>
|
||||
<td>退补电量</td>
|
||||
<td>从表电量</td>
|
||||
<td>电度电量</td>
|
||||
{/* <td>线损占比</td> */}
|
||||
{
|
||||
@ -542,13 +655,13 @@ export const UserReport: FC = () => {
|
||||
<td>线损电量</td>
|
||||
)
|
||||
}
|
||||
<td>退补电量</td>
|
||||
<td>公摊电量</td>
|
||||
<td>合计电量</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{renderTable()}
|
||||
{renderTableSum()}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -560,7 +673,6 @@ export const UserReport: FC = () => {
|
||||
</ContentArea>
|
||||
</div>
|
||||
|
||||
|
||||
</>
|
||||
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user