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

Compare commits

base: zly:master
Branches Tags
zly:master
zly:dev
..
compare: zly:dev
Branches Tags
zly:dev
zly:master

2 Commits
master ... dev

Author SHA1 Message Date
qiaomu
61b79fb0a1 支持峰谷 2025-04-27 10:08:35 +08:00
qiaomu
ab0cecf77a 支持峰谷 2025-04-21 14:44:45 +08:00
4 changed files with 262 additions and 150 deletions
Show Stats Expand all files Collapse all files

2
src/pages/report/components/Card.tsx
View File

@ -1,7 +1,7 @@
import 'twin.macro' import 'twin.macro'
export default function(props) { 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 || {}) }}> 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 style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>
<div> <div>

406
src/pages/report/index.tsx
View File

@ -16,26 +16,18 @@ import TopContent from './components/TopContent';
// 核心代码 // 核心代码
import { useSearchParams } from 'react-router-dom' import { useSearchParams } from 'react-router-dom'
import {getRoundNumber} from "@/utils"; import {getRoundNumber} from "@/utils";
import 'twin.macro';
import {Meter04KvType} from "@/shared/model-park";
function getAmount(amount: string, loss: string, refund: string, price: string): string { function getNestAmount(arr: string[] = []): string {
return `${ if (!arr.length) {
getRoundNumber( return "0"
Number( }
getRoundNumber( return arr?.reduce((prev, next) => {
Number( return getRoundNumber(Number(prev || 0) + Number(next || 0))
(Number( })
(Number(amount) + Number(loss)
)
) -
Number(refund)
)
)
)
) * Number(price)
)}`
} }
export const UserReport: FC = () => { export const UserReport: FC = () => {
const [searchParams] = useSearchParams() const [searchParams] = useSearchParams()
const tid = searchParams.get("tenement"); const tid = searchParams.get("tenement");
@ -83,23 +75,165 @@ export const UserReport: FC = () => {
const renderTable = useCallback(() => { const renderTable = useCallback(() => {
return data?.meters?.map((item, index) => { 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 ( return (
<tr key={index}> <tr key={index}>
<td>{item?.meterNo}</td>
<td>{item?.address}</td> <td>{item?.address}</td>
<td>{outputWithPrecision(item?.startNumber, 2, '-')}</td> {
<td>{outputWithPrecision(item?.endNumber, 2, '-')}</td> data?.park?.meter04kvType === Meter04KvType.DisableValley ?
<td>{outputWithPrecision(item?.displayRatio, 2, '-')}</td> <td>{outputWithPrecision(item?.startNumber, 2, '-')}</td> :
<td>{outputWithPrecision(item?.overall?.amount, 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?.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> data?.tenement?.feeType === 3 ? null : (
<td>{outputWithPrecision(finalAmount, 2, '-')}</td> 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> </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 ( return (
<> <>
@ -109,16 +243,20 @@ export const UserReport: FC = () => {
td { td {
padding: 0.2cm 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) { 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: 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) {
width: 2cm; width: 2cm;
} }
#content, .ant-col { #content, .ant-col {
@ -215,9 +353,13 @@ export const UserReport: FC = () => {
<h4 tw='mt-1 mb-1'> 合计电量： </h4> <h4 tw='mt-1 mb-1'> 合计电量： </h4>
<div> { <div> {
outputWithPrecision( outputWithPrecision(
`${Number(amount.current || 0)}`, 2, '-')} &nbsp;&nbsp;千瓦时 `${Number((data?.park?.meter04kvType === 0 ? amount?.current : data?.comprehensive?.finalAmount) || 0)}`, 2, '-')} &nbsp;&nbsp;千瓦时
</div> </div>
</Card> </Card>
<Card style={{marginLeft: 20}}>
<h4 tw='mt-1 mb-1'> 合计电费： </h4>
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} 元 &nbsp;&nbsp;</div>
</Card>
</div> </div>
<div tw='mt-3'> <div tw='mt-3'>
电费构成 电费构成
@ -253,11 +395,11 @@ export const UserReport: FC = () => {
<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>
@ -266,19 +408,19 @@ export const UserReport: FC = () => {
<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>
<Unit> + </Unit>
<Card>
<h4 tw='mt-1 mb-1'> 调整电费： </h4>
<div> {outputWithPrecision(data?.comprehensive?.adjustPooled, 2, '-')} </div>
</Card> </Card>
{/*<Unit> + </Unit>*/}
{/*<Card>*/}
{/* <h4 tw='mt-1 mb-1'> 调整电费： </h4>*/}
{/* <div> {outputWithPrecision(data?.comprehensive?.adjustPooled, 2, '-')} 元</div>*/}
{/*</Card>*/}
</div> </div>
<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}> <div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}>
<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(data?.comprehensive?.total, 2, '-')} 元</div>
</Card> </Card>
</div> </div>
</div> </div>
@ -291,7 +433,7 @@ export const UserReport: FC = () => {
<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?.sharpAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.sharpAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</Card> </Card>
{ {
@ -299,7 +441,7 @@ export const UserReport: FC = () => {
<> <>
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> 尖线损电量： </h4> <h4 tw='mt-1 mb-1'> 线损电量（尖）： </h4>
<div> {outputWithPrecision(data?.comprehensive?.lossSharp, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.lossSharp, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</Card> </Card>
</> </>
@ -308,34 +450,29 @@ export const UserReport: FC = () => {
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> 尖公摊电量： </h4> <h4 tw='mt-1 mb-1'> 公摊电量（尖）： </h4>
<div> {outputWithPrecision(data?.comprehensive?.poolSharp || '0', 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.poolSharp || '0', 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?.refundSharp, 2, '-')} &nbsp;&nbsp;千瓦时</div> {/* <div> {outputWithPrecision(data?.comprehensive?.refundSharp, 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?.priceSharp, 6, '-')} &nbsp;&nbsp;千瓦时/元</div> <div> {outputWithPrecision(data?.comprehensive?.priceSharp, 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(getAmount( <div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} 元&nbsp;&nbsp;</div>
data?.comprehensive?.sharpAmount || "0",
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossSharp || "0"),
data?.comprehensive?.refundSharp || "0",
data?.comprehensive?.priceSharp || "0",
), 2, '-')} &nbsp;&nbsp;</div>
</Card> </Card>
</div> </div>
<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?.peakAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.peakAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</Card> </Card>
{ {
@ -343,7 +480,7 @@ export const UserReport: FC = () => {
<> <>
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> 峰线损电量： </h4> <h4 tw='mt-1 mb-1'> 线损电量（峰）： </h4>
<div> {outputWithPrecision(data?.comprehensive?.lossPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.lossPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</Card> </Card>
</> </>
@ -352,34 +489,29 @@ export const UserReport: FC = () => {
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> 峰公摊电量： </h4> <h4 tw='mt-1 mb-1'> 公摊电量（峰）： </h4>
<div> {outputWithPrecision(data?.comprehensive?.poolPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.poolPeak, 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?.refundPeak, 2, '-')} &nbsp;&nbsp;千瓦时</div> {/* <div> {outputWithPrecision(data?.comprehensive?.refundPeak, 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?.pricePeak, 6, '-')} &nbsp;&nbsp;千瓦时/元</div> <div> {outputWithPrecision(data?.comprehensive?.pricePeak, 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(getAmount( <div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} 元&nbsp;&nbsp;</div>
data?.comprehensive?.peakAmount || "0",
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossPeak || "0"),
data?.comprehensive?.refundPeak || "0",
data?.comprehensive?.pricePeak || "0",
), 2, '-')} &nbsp;&nbsp;</div>
</Card> </Card>
</div> </div>
<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?.flatAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.flatAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</Card> </Card>
{ {
@ -387,7 +519,7 @@ export const UserReport: FC = () => {
<> <>
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> 平线损电量： </h4> <h4 tw='mt-1 mb-1'> 线损电量（平）： </h4>
<div> {outputWithPrecision(data?.comprehensive?.lossFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.lossFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</Card> </Card>
</> </>
@ -396,34 +528,29 @@ export const UserReport: FC = () => {
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> 平公摊电量： </h4> <h4 tw='mt-1 mb-1'> 公摊电量（平）： </h4>
<div> {outputWithPrecision(data?.comprehensive?.poolFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.poolFlat, 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?.refundFlat, 2, '-')} &nbsp;&nbsp;千瓦时</div> {/* <div> {outputWithPrecision(data?.comprehensive?.refundFlat, 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?.priceFlat, 6, '-')} &nbsp;&nbsp;千瓦时/元</div> <div> {outputWithPrecision(data?.comprehensive?.priceFlat, 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(getAmount( <div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} 元 &nbsp;&nbsp;</div>
data?.comprehensive?.flatAmount || "0",
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossFlat || "0"),
data?.comprehensive?.refundFlat || "0",
data?.comprehensive?.priceFlat || "0",
), 2, '-')} &nbsp;&nbsp;</div>
</Card> </Card>
</div> </div>
<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?.valleyAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.valleyAmount, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</Card> </Card>
{ {
@ -431,7 +558,7 @@ export const UserReport: FC = () => {
<> <>
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> 谷线损电量： </h4> <h4 tw='mt-1 mb-1'> 线损电量（谷）： </h4>
<div> {outputWithPrecision(data?.comprehensive?.lossValley, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.lossValley, 2, '-')} &nbsp;&nbsp;千瓦时</div>
</Card> </Card>
</> </>
@ -440,74 +567,53 @@ export const UserReport: FC = () => {
<Unit> + </Unit> <Unit> + </Unit>
<Card> <Card>
<h4 tw='mt-1 mb-1'> 谷公摊电量： </h4> <h4 tw='mt-1 mb-1'> 公摊电量（谷）： </h4>
<div> {outputWithPrecision(data?.comprehensive?.poolValley, 2, '-')} &nbsp;&nbsp;千瓦时</div> <div> {outputWithPrecision(data?.comprehensive?.poolValley, 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?.refundValley, 2, '-')} &nbsp;&nbsp;千瓦时</div> {/* <div> {outputWithPrecision(data?.comprehensive?.refundValley, 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?.priceValley, 6, '-')} &nbsp;&nbsp;千瓦时/元</div> <div> {outputWithPrecision(data?.comprehensive?.priceValley, 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(getAmount( <div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} 元 &nbsp;&nbsp;</div>
data?.comprehensive?.valleyAmount || "0",
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossValley || "0"),
data?.comprehensive?.refundValley || "0",
data?.comprehensive?.priceValley || "0",
), 2, '-')} &nbsp;&nbsp;</div>
</Card> </Card>
</div> </div>
<div tw='flex flex-row items-center flex-wrap'> <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(getAmount( <div> {outputWithPrecision(data?.comprehensive?.finalSharpFee, 2, '-')} 元
data?.comprehensive?.sharpAmount || "0", </div>
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossSharp || "0"),
data?.comprehensive?.refundSharp || "0",
data?.comprehensive?.priceSharp || "0",
), 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(getAmount( <div> {outputWithPrecision(data?.comprehensive?.finalPeakFee, 2, '-')} 元
data?.comprehensive?.peakAmount || "0", </div>
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossPeak || "0"),
data?.comprehensive?.refundPeak || "0",
data?.comprehensive?.pricePeak || "0",
), 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(getAmount( <div> {outputWithPrecision(data?.comprehensive?.finalFlatFee, 2, '-')} 元
data?.comprehensive?.flatAmount || "0", </div>
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossFlat || "0"),
data?.comprehensive?.refundFlat || "0",
data?.comprehensive?.priceFlat || "0",
), 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(getAmount( <div> {outputWithPrecision(data?.comprehensive?.finalValleyFee, 2, '-')} 元
data?.comprehensive?.valleyAmount || "0", </div>
data?.tenement?.feeType === 3 ? "0" : (data?.comprehensive?.lossValley || "0"),
data?.comprehensive?.refundValley || "0",
data?.comprehensive?.priceValley || "0",
), 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?.total, 2, '-')} &nbsp;&nbsp;</div> <div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} 元 &nbsp;&nbsp;</div>
</Card> </Card>
</div> </div>
{/*<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}>*/} {/*<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}>*/}
@ -524,17 +630,24 @@ export const UserReport: FC = () => {
<div> <div>
<div tw='mt-4'> <div tw='mt-4'>
用电明细 用电明细
<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>
<div tw="mt-3" style={{fontSize: 12}}> <div tw="mt-3" style={{fontSize: 12}}>
<table border={1} width={"100%"} cellSpacing="0"> <table border={1} width={"100%"} cellSpacing="0">
<thead> <thead>
<tr> <tr>
<td>电表编号</td>
<td>电表地址</td> <td>电表地址</td>
<td>起码</td> <td>起码</td>
<td>止码</td> <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> <td>公摊电量</td>
<td>合计电量</td> <td>合计电量</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{renderTable()} {renderTable()}
{renderTableSum()}
</tbody> </tbody>
</table> </table>
@ -560,7 +673,6 @@ export const UserReport: FC = () => {
</ContentArea> </ContentArea>
</div> </div>
</> </>
); );

2
src/queries/axios_instance.ts
View File

@ -8,7 +8,7 @@ import { isNil } from 'ramda';
import { MaybeMapFactory } from '@/shared/foundation'; import { MaybeMapFactory } from '@/shared/foundation';
let engineCache: AxiosInstance | null = null; let engineCache: AxiosInstance | null = null;
export const baseUrl = '/api3' export const baseUrl = '/api'
/** /**
* 应用中所需要使用的AJAX引擎。 * 应用中所需要使用的AJAX引擎。
* @param forceUnauthorized 是否强制丢弃用户会话令牌信息。 * @param forceUnauthorized 是否强制丢弃用户会话令牌信息。

2
vite.config.ts
View File

@ -104,7 +104,7 @@ export default mode => {
}) })
], ],
envDir: './', envDir: './',
publicDir: "/user-report", // publicDir: "/user-report",
base: './', base: './',
server: { server: {
port: 3000, port: 3000,