初步支持峰谷
This commit is contained in:
parent
14b0692c13
commit
31290a776e
|
|
@ -10,25 +10,46 @@ import Card from './components/Card';
|
|||
import Unit from './components/Unit';
|
||||
import { outputWithPrecision } from '@u/funcs';
|
||||
import html2pdf from "html2pdf.js";
|
||||
import ReactToPrint from 'react-to-print';
|
||||
import dayjs from "dayjs";
|
||||
import TopTitle from './components/TopTitle';
|
||||
import TopContent from './components/TopContent';
|
||||
// 核心代码
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import {getRoundNumber} from "@/utils";
|
||||
|
||||
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)
|
||||
)}`
|
||||
}
|
||||
|
||||
|
||||
export const UserReport: FC = () => {
|
||||
const [searchParams] = useSearchParams()
|
||||
const tid = searchParams.get("tenement");
|
||||
const rid = searchParams.get("report");
|
||||
|
||||
const amount = useRef<string>();
|
||||
const { data } = useQuery(
|
||||
['report-tenement-detail', rid, tid],
|
||||
() => reportTenementDetail(rid, tid),
|
||||
{
|
||||
select: res => {
|
||||
if (isCorrectResult(res)) return res.detail;
|
||||
if (isCorrectResult(res)) {
|
||||
amount.current = res.amount;
|
||||
return res.detail
|
||||
}
|
||||
message.error(res.message || '获取商户电费详情失败');
|
||||
return null;
|
||||
}
|
||||
|
|
@ -81,10 +102,10 @@ export const UserReport: FC = () => {
|
|||
}, [data?.meters])
|
||||
|
||||
return (
|
||||
<>
|
||||
<style>
|
||||
{
|
||||
`
|
||||
<>
|
||||
<style>
|
||||
{
|
||||
`
|
||||
td {
|
||||
padding: 0.2cm
|
||||
}
|
||||
|
|
@ -104,148 +125,443 @@ export const UserReport: FC = () => {
|
|||
font-size: 0.34cm;
|
||||
}
|
||||
`
|
||||
}
|
||||
</style>
|
||||
<div style={{position: 'fixed',width: '100%', height: '100%', left: 0, right: 0, top: 0, bottom: 0, margin: 'auto', zIndex: 99, background: '#fff', display: 'flex', justifyContent: 'center', alignItems: "center" }}>
|
||||
|
||||
<Button loading={downloadLoading} type='primary' tw='' onClick={() => handlePrint()}> 下载 </Button>
|
||||
}
|
||||
</style>
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
margin: 'auto',
|
||||
zIndex: 99,
|
||||
background: '#fff',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: "center"
|
||||
}}>
|
||||
|
||||
|
||||
</div>
|
||||
<div ref={printRef}>
|
||||
<ContentArea>
|
||||
<div id="content">
|
||||
<div>
|
||||
<img src={Logo} alt="" width={60} height={60}/>
|
||||
</div>
|
||||
<div tw='mt-4' style={{fontSize: "18px", fontWeight: 600}}>
|
||||
尊敬的{data?.tenement?.fullName}，这是贵公司
|
||||
{dayjs(data?.comprehensive?.startDate).format("MM")} 月的电费账单
|
||||
</div>
|
||||
<div tw='flex mt-6 flex-row' style={{backgroundColor: "#f0f0f0", padding: '18px 20px'}}>
|
||||
<div tw='flex flex-1 flex-col'>
|
||||
<Row gutter={16}>
|
||||
<Col span={5} style={{display: "flex", flexDirection: "column"}}>
|
||||
<div>账单周期</div>
|
||||
<div style={{fontSize: "20px", fontWeight: 600, flex: 1, display: "flex", alignItems: "center"}}>
|
||||
{data?.comprehensive?.startDate ? dayjs(data?.comprehensive?.startDate).format("YYYY年MM月") : null}
|
||||
</div>
|
||||
{/* <div> {data?.comprehensive?.startDate} - {data?.comprehensive?.endDate} </div> */}
|
||||
</Col>
|
||||
<Col span={19}>
|
||||
<Row gutter={16}>
|
||||
<Col span={6}> <TopTitle> 商户编号 </TopTitle> <TopContent> {data?.tenement?.id} </TopContent> </Col>
|
||||
<Col span={6}> <TopTitle>商户名称</TopTitle><TopContent>{data?.tenement?.fullName}</TopContent> </Col>
|
||||
<Col span={6}> <TopTitle>用户类型</TopTitle><TopContent>工商业</TopContent> </Col>
|
||||
<Col span={6}> <TopTitle>电压等级</TopTitle><TopContent>0.4kv</TopContent> </Col>
|
||||
</Row>
|
||||
<Divider dashed tw='mt-2 mb-2 flex flex-col w-full' />
|
||||
<Row gutter={16}>
|
||||
<div tw='mt-3 flex-1 flex flex-row'>
|
||||
<Col span={6}> <TopTitle>所属园区</TopTitle> <TopContent> {data?.park?.name} </TopContent> </Col>
|
||||
<Col span={6}> <TopTitle>用户地址</TopTitle> <TopContent> {data?.tenement?.address} </TopContent> </Col>
|
||||
<Col span={6}> <TopTitle>抄表日期</TopTitle><TopContent>{data?.comprehensive?.endDate}</TopContent> </Col>
|
||||
<Col span={6}> <TopTitle>购电方式</TopTitle><TopContent>市场化零售客户</TopContent> </Col>
|
||||
</div>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tw='mt-6'>
|
||||
账单信息
|
||||
<Divider tw='mt-2 mb-2 flex flex-col w-full' />
|
||||
</div>
|
||||
<div tw='mt-2'>
|
||||
<div tw='flex flex-row'>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 本期电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.consumption, 2, '-')} 千瓦时 </div>
|
||||
</Card>
|
||||
</div>
|
||||
<div tw='mt-3'>
|
||||
电费构成
|
||||
<Divider tw='mt-2 mb-4 flex flex-col w-full' />
|
||||
</div>
|
||||
<div tw='flex flex-row items-center' style={{height: 'fit-content', alignItems: "stretch", flexGrow: "stratch" }}>
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Unit> （ </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 本期用电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.consumption, 2, '-')} 千瓦时 </div>
|
||||
</Card>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 本期线损电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.lossAmount, 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>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.price, 6, '-')} 千瓦时/元 </div>
|
||||
</Card>
|
||||
<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>
|
||||
</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>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tw='mt-4'>
|
||||
用电明细
|
||||
<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>
|
||||
<td>合计电量</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<Button loading={downloadLoading} type='primary' tw='' onClick={() => handlePrint()}> 下载 </Button>
|
||||
|
||||
|
||||
</div>
|
||||
<div ref={printRef}>
|
||||
<ContentArea>
|
||||
<div id="content">
|
||||
<div>
|
||||
<img src={Logo} alt="" width={60} height={60}/>
|
||||
</div>
|
||||
<div tw='mt-4' style={{fontSize: "18px", fontWeight: 600}}>
|
||||
尊敬的{data?.tenement?.fullName}，这是贵公司
|
||||
{dayjs(data?.comprehensive?.startDate).format("MM")} 月的电费账单
|
||||
</div>
|
||||
<div tw='flex mt-6 flex-row' style={{backgroundColor: "#f0f0f0", padding: '18px 20px'}}>
|
||||
<div tw='flex flex-1 flex-col'>
|
||||
<Row gutter={16}>
|
||||
<Col span={5} style={{display: "flex", flexDirection: "column"}}>
|
||||
<div>账单周期</div>
|
||||
<div style={{
|
||||
fontSize: "20px",
|
||||
fontWeight: 600,
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
{data?.comprehensive?.startDate ? dayjs(data?.comprehensive?.startDate).format("YYYY年MM月") : null}
|
||||
</div>
|
||||
{/* <div> {data?.comprehensive?.startDate} - {data?.comprehensive?.endDate} </div> */}
|
||||
</Col>
|
||||
<Col span={19}>
|
||||
<Row gutter={16}>
|
||||
<Col span={6}> <TopTitle> 商户编号 </TopTitle>
|
||||
<TopContent> {data?.tenement?.id} </TopContent> </Col>
|
||||
<Col span={6}>
|
||||
<TopTitle>商户名称</TopTitle><TopContent>{data?.tenement?.fullName}</TopContent>
|
||||
</Col>
|
||||
<Col span={6}> <TopTitle>用户类型</TopTitle><TopContent>工商业</TopContent>
|
||||
</Col>
|
||||
<Col span={6}> <TopTitle>电压等级</TopTitle><TopContent>0.4kv</TopContent>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider dashed tw='mt-2 mb-2 flex flex-col w-full'/>
|
||||
<Row gutter={16}>
|
||||
<div tw='mt-3 flex-1 flex flex-row'>
|
||||
<Col span={6}> <TopTitle>所属园区</TopTitle>
|
||||
<TopContent> {data?.park?.name} </TopContent> </Col>
|
||||
<Col span={6}> <TopTitle>用户地址</TopTitle>
|
||||
<TopContent> {data?.tenement?.address} </TopContent> </Col>
|
||||
<Col span={6}>
|
||||
<TopTitle>抄表日期</TopTitle><TopContent>{data?.comprehensive?.endDate}</TopContent>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<TopTitle>购电方式</TopTitle><TopContent>市场化零售客户</TopContent>
|
||||
</Col>
|
||||
</div>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tw='mt-6'>
|
||||
账单信息
|
||||
<Divider tw='mt-2 mb-2 flex flex-col w-full'/>
|
||||
</div>
|
||||
<div tw='mt-2'>
|
||||
<div tw='flex flex-row'>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 合计电量： </h4>
|
||||
<div> {
|
||||
outputWithPrecision(
|
||||
`${Number(amount.current || 0)}`, 2, '-')} 千瓦时
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div tw='mt-3'>
|
||||
电费构成
|
||||
<Divider tw='mt-2 mb-4 flex flex-col w-full'/>
|
||||
</div>
|
||||
{
|
||||
data?.park?.meter04kvType === 0 ? (
|
||||
<div tw='flex flex-row items-center' style={{
|
||||
height: 'fit-content',
|
||||
alignItems: "stretch",
|
||||
flexGrow: "stratch"
|
||||
}}>
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Unit> （ </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 电度电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.consumption, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{
|
||||
data?.tenement?.feeType === 3 ? null : (
|
||||
<>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 线损电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.lossAmount, 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>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.price, 6, '-')} 千瓦时/元</div>
|
||||
</Card>
|
||||
<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>
|
||||
</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>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div tw='' style={{
|
||||
height: 'fit-content',
|
||||
alignItems: "stretch",
|
||||
flexGrow: "stratch"
|
||||
}}>
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Unit> （ </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 尖电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.sharpAmount, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{
|
||||
data?.tenement?.feeType === 3 ? null : (
|
||||
<>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 尖线损电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.lossSharp, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<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><Unit> * </Unit>
|
||||
<Card>
|
||||
<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>
|
||||
</Card>
|
||||
</div>
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Unit> （ </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 峰电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.peakAmount, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{
|
||||
data?.tenement?.feeType === 3 ? null : (
|
||||
<>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 峰线损电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.lossPeak, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<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><Unit> * </Unit>
|
||||
<Card>
|
||||
<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>
|
||||
</Card>
|
||||
</div>
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Unit> （ </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 平电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.flatAmount, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{
|
||||
data?.tenement?.feeType === 3 ? null : (
|
||||
<>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 平线损电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.lossFlat, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<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><Unit> * </Unit>
|
||||
<Card>
|
||||
<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>
|
||||
</Card>
|
||||
</div>
|
||||
<div tw='flex flex-row items-center flex-wrap'>
|
||||
<Unit> （ </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 谷电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.valleyAmount, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
{
|
||||
data?.tenement?.feeType === 3 ? null : (
|
||||
<>
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 谷线损电量： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.lossValley, 2, '-')} 千瓦时</div>
|
||||
</Card>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
<Unit> + </Unit>
|
||||
<Card>
|
||||
<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><Unit> * </Unit>
|
||||
<Card>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</Card>
|
||||
<Unit> = </Unit>
|
||||
<Card>
|
||||
<h4 tw='mt-1 mb-1'> 本期总电费： </h4>
|
||||
<div> {outputWithPrecision(data?.comprehensive?.total, 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>*/}
|
||||
{/* </Card>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<div tw='mt-4'>
|
||||
用电明细
|
||||
<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> */}
|
||||
{
|
||||
data?.tenement?.feeType === 3 ? null : (
|
||||
<td>线损电量</td>
|
||||
)
|
||||
}
|
||||
<td>退补电量</td>
|
||||
<td>公摊电量</td>
|
||||
<td>合计电量</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{renderTable()}
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ContentArea>
|
||||
</div>
|
||||
</ContentArea>
|
||||
</div>
|
||||
|
||||
|
||||
</>
|
||||
</>
|
||||
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -304,6 +304,10 @@ export interface TenementInfo {
|
|||
phone: null | string;
|
||||
/** 简称 */
|
||||
shortName: null | string;
|
||||
/** 收费类型 */
|
||||
feeType: number;
|
||||
/** 限电状态 */
|
||||
exceptionalCase: number;
|
||||
}
|
||||
|
||||
export interface MeterByTenement {
|
||||
|
|
|
|||
|
|
@ -170,6 +170,174 @@ export interface ReportTenement extends TenementInfo {
|
|||
consumptionAmount: string
|
||||
}
|
||||
|
||||
|
||||
export interface ReportTenementMeters extends Meter04KvInfo, PooledSumDetail, ReportMeterUnit{
|
||||
finalAmount: string,
|
||||
|
||||
/**
|
||||
* 户址
|
||||
*/
|
||||
address: null | string;
|
||||
/**
|
||||
* 摊薄调整电费
|
||||
*/
|
||||
adjustPooled: string;
|
||||
/**
|
||||
* 接入系统时间，挂表
|
||||
*/
|
||||
attachedAt: string;
|
||||
/**
|
||||
* 摊薄基本电费
|
||||
*/
|
||||
basicPooled: string;
|
||||
/**
|
||||
* 所在建筑名称
|
||||
*/
|
||||
buildingName: null | string;
|
||||
/**
|
||||
* 表计编号
|
||||
*/
|
||||
code: string;
|
||||
/**
|
||||
* 首次抄表时间
|
||||
*/
|
||||
currentTermReadings: string;
|
||||
/**
|
||||
* 从系统移除时间，拆表
|
||||
*/
|
||||
detachedAt: null | string;
|
||||
/**
|
||||
* 表计表显倍率，仅用于展示。
|
||||
*/
|
||||
displayRatio: string;
|
||||
/**
|
||||
* 是否可用
|
||||
*/
|
||||
enabled: boolean;
|
||||
/**
|
||||
* 核算周期内末次抄表度数，2312
|
||||
*/
|
||||
endNumber: number;
|
||||
/**
|
||||
* 合计电费
|
||||
*/
|
||||
finalTotal: string;
|
||||
/**
|
||||
* 表计id
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* 最近抄表时间
|
||||
*/
|
||||
lastTermReadings: string;
|
||||
/**
|
||||
* 平线损电量
|
||||
*/
|
||||
lossFlat: string;
|
||||
/**
|
||||
* 平线损电费
|
||||
*/
|
||||
lossFlatFee: string;
|
||||
/**
|
||||
* 峰线损电量
|
||||
*/
|
||||
lossPeak: string;
|
||||
/**
|
||||
* 峰线损电费
|
||||
*/
|
||||
lossPeakFee: string;
|
||||
/**
|
||||
* 摊薄线损电费
|
||||
*/
|
||||
lossPooled: string;
|
||||
/**
|
||||
* 尖线损电量
|
||||
*/
|
||||
lossSharp: string;
|
||||
/**
|
||||
* 尖线损电费
|
||||
*/
|
||||
lossSharpFee: string;
|
||||
/**
|
||||
* 谷线损电量
|
||||
*/
|
||||
lossValley: string;
|
||||
/**
|
||||
* 谷线损电费
|
||||
*/
|
||||
lossValleyFee: string;
|
||||
/**
|
||||
* 表计表号
|
||||
*/
|
||||
meterNo: string;
|
||||
/**
|
||||
* 子对象
|
||||
*/
|
||||
nestMeter: ReportTenementMeters[];
|
||||
/**
|
||||
* 从表电量总和
|
||||
*/
|
||||
nestOverall: string;
|
||||
/**
|
||||
* 所在楼层
|
||||
*/
|
||||
onFloor: null | string;
|
||||
/**
|
||||
* 所属园区ID
|
||||
*/
|
||||
parkId: string;
|
||||
/**
|
||||
* 峰电量部分
|
||||
*/
|
||||
peak: Consumption;
|
||||
/**
|
||||
* 公摊电量
|
||||
*/
|
||||
publicAmount: string;
|
||||
/**
|
||||
* 公摊电费
|
||||
*/
|
||||
publicPooled: string;
|
||||
/**
|
||||
* 表计计算倍率，参与表计读数计算。
|
||||
*/
|
||||
ratio: string;
|
||||
/**
|
||||
* 退补电量
|
||||
*/
|
||||
refundAmount: string;
|
||||
/**
|
||||
* 平
|
||||
*/
|
||||
refundFlat: string;
|
||||
/**
|
||||
* 峰
|
||||
*/
|
||||
refundPeak: string;
|
||||
/**
|
||||
* 尖
|
||||
*/
|
||||
refundSharp: string;
|
||||
/**
|
||||
* 谷
|
||||
*/
|
||||
refundValley: string;
|
||||
/**
|
||||
* 抄表序号
|
||||
*/
|
||||
seq: number;
|
||||
/**
|
||||
* 核算周期内首次抄表度数，2312
|
||||
*/
|
||||
startNumber: number;
|
||||
/**
|
||||
* 表计类型，0：商户电表，1：园区电表，2：公摊电表
|
||||
*/
|
||||
type: number;
|
||||
[property: string]: any;
|
||||
|
||||
|
||||
}
|
||||
/**
|
||||
* 商户详情
|
||||
*/
|
||||
|
|
@ -177,22 +345,7 @@ export interface ReportTenementDetail {
|
|||
park: SimpleParkInfo;
|
||||
tenement: TenementInfo;
|
||||
comprehensive: TenementComprehensiveDetail;
|
||||
meters: (Meter04KvInfo &
|
||||
PooledSumDetail &
|
||||
ReportMeterUnit & { /** 合计电费 */ finalTotal: string; loss: Consumption } & {
|
||||
/** 首次抄表时间 */
|
||||
currentTermReadings: string,
|
||||
/** 最近抄表时间 */
|
||||
lastTermReadings: string,
|
||||
}
|
||||
& {
|
||||
startNumber: number,
|
||||
endNumber: number,
|
||||
displayRatio: number,
|
||||
publicAmount: string,
|
||||
refundAmount: string,
|
||||
}
|
||||
)[];
|
||||
meters: ReportTenementMeters[];
|
||||
|
||||
|
||||
pooled: (Meter04KvInfo & ReportMeterUnit)[];
|
||||
|
|
@ -226,6 +379,126 @@ export type TenementComprehensiveDetail = PooledSumDetail & {
|
|||
endDate: string;
|
||||
/** 本期公摊电量 */
|
||||
publicAmount: number
|
||||
/** 尖电量
|
||||
*/
|
||||
sharpAmount: string;
|
||||
/** 峰电量 */
|
||||
peakAmount: string;
|
||||
/** 平电量 */
|
||||
flatAmount: string;
|
||||
/** 谷电量 */
|
||||
valleyAmount: string;
|
||||
/**
|
||||
* 平线损电量
|
||||
*/
|
||||
lossFlat: string;
|
||||
/**
|
||||
* 平线损电费
|
||||
*/
|
||||
lossFlatFee: string;
|
||||
/**
|
||||
* 峰线损电量
|
||||
*/
|
||||
lossPeak: string;
|
||||
/**
|
||||
* 峰线损电费
|
||||
*/
|
||||
lossPeakFee: string;
|
||||
/**
|
||||
* 摊薄线损电费
|
||||
*/
|
||||
lossPooled: string;
|
||||
/**
|
||||
* 尖线损电量
|
||||
*/
|
||||
lossSharp: string;
|
||||
/**
|
||||
* 尖线损电费
|
||||
*/
|
||||
lossSharpFee: string;
|
||||
/**
|
||||
* 谷线损电量
|
||||
*/
|
||||
lossValley: string;
|
||||
/**
|
||||
* 退补尖
|
||||
*/
|
||||
refundSharp: string;
|
||||
/**
|
||||
* 退补峰
|
||||
*/
|
||||
refundPeak: string;
|
||||
/**
|
||||
* 退补平
|
||||
*/
|
||||
refundFlat: string;
|
||||
/**
|
||||
* 退补谷
|
||||
*/
|
||||
refundValley: string;
|
||||
/**
|
||||
* 尖电价
|
||||
*/
|
||||
priceSharp: string;
|
||||
/**
|
||||
* 峰电价
|
||||
*/
|
||||
pricePeak: string;
|
||||
/**
|
||||
* 平电价
|
||||
*/
|
||||
priceFlat: string;
|
||||
/**
|
||||
* 谷电价
|
||||
*/
|
||||
priceValley: string;
|
||||
refundOverall?: string
|
||||
poolSharp?: string
|
||||
poolValley?: string
|
||||
poolPeak?: string
|
||||
poolFlat?: string
|
||||
|
||||
/**
|
||||
* 平
|
||||
*/
|
||||
finalFlatFee: string;
|
||||
/**
|
||||
* 峰
|
||||
*/
|
||||
finalPeakFee: string;
|
||||
/**
|
||||
* 合计尖电费
|
||||
*/
|
||||
finalSharpFee: string;
|
||||
/**
|
||||
* 谷
|
||||
*/
|
||||
finalValleyFee: string;
|
||||
/**
|
||||
* 平
|
||||
*/
|
||||
flatFee: string;
|
||||
/**
|
||||
* 谷线损电费
|
||||
*/
|
||||
lossValleyFee: string;
|
||||
/**
|
||||
* 峰
|
||||
*/
|
||||
peakFee: string;
|
||||
/**
|
||||
* 尖电度电费
|
||||
*/
|
||||
sharpFee: string;
|
||||
/**
|
||||
* 谷
|
||||
*/
|
||||
valleyFee: string;
|
||||
/**
|
||||
* 合计电量
|
||||
*/
|
||||
finalAmount: string;
|
||||
finalLossFee: string;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@ export function throttle(fn: Function, delay: number) {
|
|||
}
|
||||
|
||||
// 获取列表中序号
|
||||
export function getIndex(page: number, index: number) : string {
|
||||
return `${(page - 1) * 20 + Number(index) + 1}`
|
||||
export function getIndex(page: number, size: number, index: number) : string {
|
||||
return `${(page - 1) * size + Number(index) + 1}`
|
||||
}
|
||||
|
||||
interface Response {
|
||||
|
|
@ -75,4 +75,12 @@ export function getFetchFileList(files: FileList[]) : string[] {
|
|||
return files.filter(item => item.status === "done").map(item => {
|
||||
return item?.response?.data
|
||||
})
|
||||
}
|
||||
|
||||
export function getRoundNumber(number: number) : string {
|
||||
return (Math.round(number * 100) / 100).toFixed(2)
|
||||
}
|
||||
|
||||
export function getFileName(url: string) : string {
|
||||
return url.substring(url.lastIndexOf('/') + 1);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user