初步支持峰谷
This commit is contained in:
parent
14b0692c13
commit
31290a776e
@ -10,25 +10,46 @@ import Card from './components/Card';
|
|||||||
import Unit from './components/Unit';
|
import Unit from './components/Unit';
|
||||||
import { outputWithPrecision } from '@u/funcs';
|
import { outputWithPrecision } from '@u/funcs';
|
||||||
import html2pdf from "html2pdf.js";
|
import html2pdf from "html2pdf.js";
|
||||||
import ReactToPrint from 'react-to-print';
|
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import TopTitle from './components/TopTitle';
|
import TopTitle from './components/TopTitle';
|
||||||
import TopContent from './components/TopContent';
|
import TopContent from './components/TopContent';
|
||||||
// 核心代码
|
// 核心代码
|
||||||
import { useSearchParams } from 'react-router-dom'
|
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 = () => {
|
export const UserReport: FC = () => {
|
||||||
const [searchParams] = useSearchParams()
|
const [searchParams] = useSearchParams()
|
||||||
const tid = searchParams.get("tenement");
|
const tid = searchParams.get("tenement");
|
||||||
const rid = searchParams.get("report");
|
const rid = searchParams.get("report");
|
||||||
|
const amount = useRef<string>();
|
||||||
const { data } = useQuery(
|
const { data } = useQuery(
|
||||||
['report-tenement-detail', rid, tid],
|
['report-tenement-detail', rid, tid],
|
||||||
() => reportTenementDetail(rid, tid),
|
() => reportTenementDetail(rid, tid),
|
||||||
{
|
{
|
||||||
select: res => {
|
select: res => {
|
||||||
if (isCorrectResult(res)) return res.detail;
|
if (isCorrectResult(res)) {
|
||||||
|
amount.current = res.amount;
|
||||||
|
return res.detail
|
||||||
|
}
|
||||||
message.error(res.message || '获取商户电费详情失败');
|
message.error(res.message || '获取商户电费详情失败');
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
@ -81,10 +102,10 @@ export const UserReport: FC = () => {
|
|||||||
}, [data?.meters])
|
}, [data?.meters])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<style>
|
<style>
|
||||||
{
|
{
|
||||||
`
|
`
|
||||||
td {
|
td {
|
||||||
padding: 0.2cm
|
padding: 0.2cm
|
||||||
}
|
}
|
||||||
@ -104,148 +125,443 @@ export const UserReport: FC = () => {
|
|||||||
font-size: 0.34cm;
|
font-size: 0.34cm;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
</style>
|
</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 style={{
|
||||||
|
position: 'fixed',
|
||||||
<Button loading={downloadLoading} type='primary' tw='' onClick={() => handlePrint()}> 下载 </Button>
|
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>
|
||||||
</div>
|
|
||||||
<div ref={printRef}>
|
|
||||||
<ContentArea>
|
</div>
|
||||||
<div id="content">
|
<div ref={printRef}>
|
||||||
<div>
|
<ContentArea>
|
||||||
<img src={Logo} alt="" width={60} height={60}/>
|
<div id="content">
|
||||||
</div>
|
<div>
|
||||||
<div tw='mt-4' style={{fontSize: "18px", fontWeight: 600}}>
|
<img src={Logo} alt="" width={60} height={60}/>
|
||||||
尊敬的{data?.tenement?.fullName}，这是贵公司
|
</div>
|
||||||
{dayjs(data?.comprehensive?.startDate).format("MM")} 月的电费账单
|
<div tw='mt-4' style={{fontSize: "18px", fontWeight: 600}}>
|
||||||
</div>
|
尊敬的{data?.tenement?.fullName}，这是贵公司
|
||||||
<div tw='flex mt-6 flex-row' style={{backgroundColor: "#f0f0f0", padding: '18px 20px'}}>
|
{dayjs(data?.comprehensive?.startDate).format("MM")} 月的电费账单
|
||||||
<div tw='flex flex-1 flex-col'>
|
</div>
|
||||||
<Row gutter={16}>
|
<div tw='flex mt-6 flex-row' style={{backgroundColor: "#f0f0f0", padding: '18px 20px'}}>
|
||||||
<Col span={5} style={{display: "flex", flexDirection: "column"}}>
|
<div tw='flex flex-1 flex-col'>
|
||||||
<div>账单周期</div>
|
<Row gutter={16}>
|
||||||
<div style={{fontSize: "20px", fontWeight: 600, flex: 1, display: "flex", alignItems: "center"}}>
|
<Col span={5} style={{display: "flex", flexDirection: "column"}}>
|
||||||
{data?.comprehensive?.startDate ? dayjs(data?.comprehensive?.startDate).format("YYYY年MM月") : null}
|
<div>账单周期</div>
|
||||||
</div>
|
<div style={{
|
||||||
{/* <div> {data?.comprehensive?.startDate} - {data?.comprehensive?.endDate} </div> */}
|
fontSize: "20px",
|
||||||
</Col>
|
fontWeight: 600,
|
||||||
<Col span={19}>
|
flex: 1,
|
||||||
<Row gutter={16}>
|
display: "flex",
|
||||||
<Col span={6}> <TopTitle> 商户编号 </TopTitle> <TopContent> {data?.tenement?.id} </TopContent> </Col>
|
alignItems: "center"
|
||||||
<Col span={6}> <TopTitle>商户名称</TopTitle><TopContent>{data?.tenement?.fullName}</TopContent> </Col>
|
}}>
|
||||||
<Col span={6}> <TopTitle>用户类型</TopTitle><TopContent>工商业</TopContent> </Col>
|
{data?.comprehensive?.startDate ? dayjs(data?.comprehensive?.startDate).format("YYYY年MM月") : null}
|
||||||
<Col span={6}> <TopTitle>电压等级</TopTitle><TopContent>0.4kv</TopContent> </Col>
|
</div>
|
||||||
</Row>
|
{/* <div> {data?.comprehensive?.startDate} - {data?.comprehensive?.endDate} </div> */}
|
||||||
<Divider dashed tw='mt-2 mb-2 flex flex-col w-full' />
|
</Col>
|
||||||
<Row gutter={16}>
|
<Col span={19}>
|
||||||
<div tw='mt-3 flex-1 flex flex-row'>
|
<Row gutter={16}>
|
||||||
<Col span={6}> <TopTitle>所属园区</TopTitle> <TopContent> {data?.park?.name} </TopContent> </Col>
|
<Col span={6}> <TopTitle> 商户编号 </TopTitle>
|
||||||
<Col span={6}> <TopTitle>用户地址</TopTitle> <TopContent> {data?.tenement?.address} </TopContent> </Col>
|
<TopContent> {data?.tenement?.id} </TopContent> </Col>
|
||||||
<Col span={6}> <TopTitle>抄表日期</TopTitle><TopContent>{data?.comprehensive?.endDate}</TopContent> </Col>
|
<Col span={6}>
|
||||||
<Col span={6}> <TopTitle>购电方式</TopTitle><TopContent>市场化零售客户</TopContent> </Col>
|
<TopTitle>商户名称</TopTitle><TopContent>{data?.tenement?.fullName}</TopContent>
|
||||||
</div>
|
</Col>
|
||||||
</Row>
|
<Col span={6}> <TopTitle>用户类型</TopTitle><TopContent>工商业</TopContent>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
<Col span={6}> <TopTitle>电压等级</TopTitle><TopContent>0.4kv</TopContent>
|
||||||
</div>
|
</Col>
|
||||||
</div>
|
</Row>
|
||||||
<div>
|
<Divider dashed tw='mt-2 mb-2 flex flex-col w-full'/>
|
||||||
<div tw='mt-6'>
|
<Row gutter={16}>
|
||||||
账单信息
|
<div tw='mt-3 flex-1 flex flex-row'>
|
||||||
<Divider tw='mt-2 mb-2 flex flex-col w-full' />
|
<Col span={6}> <TopTitle>所属园区</TopTitle>
|
||||||
</div>
|
<TopContent> {data?.park?.name} </TopContent> </Col>
|
||||||
<div tw='mt-2'>
|
<Col span={6}> <TopTitle>用户地址</TopTitle>
|
||||||
<div tw='flex flex-row'>
|
<TopContent> {data?.tenement?.address} </TopContent> </Col>
|
||||||
<Card>
|
<Col span={6}>
|
||||||
<h4 tw='mt-1 mb-1'> 本期电量： </h4>
|
<TopTitle>抄表日期</TopTitle><TopContent>{data?.comprehensive?.endDate}</TopContent>
|
||||||
<div> {outputWithPrecision(data?.comprehensive?.consumption, 2, '-')} 千瓦时 </div>
|
</Col>
|
||||||
</Card>
|
<Col span={6}>
|
||||||
</div>
|
<TopTitle>购电方式</TopTitle><TopContent>市场化零售客户</TopContent>
|
||||||
<div tw='mt-3'>
|
</Col>
|
||||||
电费构成
|
</div>
|
||||||
<Divider tw='mt-2 mb-4 flex flex-col w-full' />
|
</Row>
|
||||||
</div>
|
</Col>
|
||||||
<div tw='flex flex-row items-center' style={{height: 'fit-content', alignItems: "stretch", flexGrow: "stratch" }}>
|
</Row>
|
||||||
<div tw='flex flex-row items-center flex-wrap'>
|
</div>
|
||||||
<Unit> （ </Unit>
|
</div>
|
||||||
<Card>
|
<div>
|
||||||
<h4 tw='mt-1 mb-1'> 本期用电量： </h4>
|
<div tw='mt-6'>
|
||||||
<div> {outputWithPrecision(data?.comprehensive?.consumption, 2, '-')} 千瓦时 </div>
|
账单信息
|
||||||
</Card>
|
<Divider tw='mt-2 mb-2 flex flex-col w-full'/>
|
||||||
<Unit> + </Unit>
|
</div>
|
||||||
<Card>
|
<div tw='mt-2'>
|
||||||
<h4 tw='mt-1 mb-1'> 本期线损电量： </h4>
|
<div tw='flex flex-row'>
|
||||||
<div> {outputWithPrecision(data?.comprehensive?.lossAmount, 2, '-')} 千瓦时 </div>
|
<Card>
|
||||||
</Card>
|
<h4 tw='mt-1 mb-1'> 合计电量： </h4>
|
||||||
<Unit> + </Unit>
|
<div> {
|
||||||
<Card>
|
outputWithPrecision(
|
||||||
<h4 tw='mt-1 mb-1'> 本期公摊电量： </h4>
|
`${Number(amount.current || 0)}`, 2, '-')} 千瓦时
|
||||||
<div> {outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')} 千瓦时 </div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
<Unit> ） </Unit><Unit> * </Unit>
|
</div>
|
||||||
<Card>
|
<div tw='mt-3'>
|
||||||
<h4 tw='mt-1 mb-1'> 用电单价： </h4>
|
电费构成
|
||||||
<div> {outputWithPrecision(data?.comprehensive?.price, 6, '-')} 千瓦时/元 </div>
|
<Divider tw='mt-2 mb-4 flex flex-col w-full'/>
|
||||||
</Card>
|
</div>
|
||||||
<Unit> + </Unit>
|
{
|
||||||
<Card>
|
data?.park?.meter04kvType === 0 ? (
|
||||||
<h4 tw='mt-1 mb-1'> 摊薄基本电费： </h4>
|
<div tw='flex flex-row items-center' style={{
|
||||||
<div> {outputWithPrecision(data?.comprehensive?.basicPooled, 2, '-')} </div>
|
height: 'fit-content',
|
||||||
</Card>
|
alignItems: "stretch",
|
||||||
<Unit> + </Unit>
|
flexGrow: "stratch"
|
||||||
<Card>
|
}}>
|
||||||
<h4 tw='mt-1 mb-1'> 摊薄调整电费： </h4>
|
<div tw='flex flex-row items-center flex-wrap'>
|
||||||
<div> {outputWithPrecision(data?.comprehensive?.adjustPooled, 2, '-')} </div>
|
<Unit> （ </Unit>
|
||||||
</Card>
|
<Card>
|
||||||
</div>
|
<h4 tw='mt-1 mb-1'> 电度电量： </h4>
|
||||||
<div tw='flex flex-row items-center' style={{height: '100%', flex: 1}}>
|
<div> {outputWithPrecision(data?.comprehensive?.consumption, 2, '-')} 千瓦时</div>
|
||||||
<Unit> = </Unit>
|
</Card>
|
||||||
<Card style={{height: 200}}>
|
{
|
||||||
<h4 tw='mt-1 mb-1'> 本期总电费（元）： </h4>
|
data?.tenement?.feeType === 3 ? null : (
|
||||||
<div> {outputWithPrecision(data?.comprehensive?.total, 2, '-')} </div>
|
<>
|
||||||
</Card>
|
<Unit> + </Unit>
|
||||||
</div>
|
<Card>
|
||||||
</div>
|
<h4 tw='mt-1 mb-1'> 线损电量： </h4>
|
||||||
</div>
|
<div> {outputWithPrecision(data?.comprehensive?.lossAmount, 2, '-')} 千瓦时</div>
|
||||||
<div>
|
</Card>
|
||||||
<div tw='mt-4'>
|
</>
|
||||||
用电明细
|
)
|
||||||
<Divider tw='mt-2 mb-4 flex flex-col w-full' />
|
}
|
||||||
</div>
|
|
||||||
<div tw="mt-3" style={{fontSize: 12}}>
|
<Unit> + </Unit>
|
||||||
<table border={1} width={"100%"} cellSpacing="0" >
|
<Card>
|
||||||
<thead>
|
<h4 tw='mt-1 mb-1'> 公摊电量： </h4>
|
||||||
<tr>
|
<div> {outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')} 千瓦时</div>
|
||||||
<td>电表编号</td>
|
</Card>
|
||||||
<td>电表地址</td>
|
<Unit> - </Unit>
|
||||||
<td>起码</td>
|
<Card>
|
||||||
<td>止码</td>
|
<h4 tw='mt-1 mb-1'> 退补电量： </h4>
|
||||||
<td>表倍率</td>
|
<div> {outputWithPrecision(data?.comprehensive?.publicAmount, 2, '-')} 千瓦时</div>
|
||||||
<td>用户电量</td>
|
</Card>
|
||||||
{/* <td>线损占比</td> */}
|
<Unit> ） </Unit><Unit> * </Unit>
|
||||||
<td>线损电量</td>
|
<Card>
|
||||||
<td>公摊电量</td>
|
<h4 tw='mt-1 mb-1'> 电度单价： </h4>
|
||||||
<td>合计电量</td>
|
<div> {outputWithPrecision(data?.comprehensive?.price, 6, '-')} 千瓦时/元</div>
|
||||||
</tr>
|
</Card>
|
||||||
</thead>
|
<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>
|
<tbody>
|
||||||
{renderTable()}
|
{renderTable()}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</ContentArea>
|
</ContentArea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</>
|
</>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -304,6 +304,10 @@ export interface TenementInfo {
|
|||||||
phone: null | string;
|
phone: null | string;
|
||||||
/** 简称 */
|
/** 简称 */
|
||||||
shortName: null | string;
|
shortName: null | string;
|
||||||
|
/** 收费类型 */
|
||||||
|
feeType: number;
|
||||||
|
/** 限电状态 */
|
||||||
|
exceptionalCase: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface MeterByTenement {
|
export interface MeterByTenement {
|
||||||
|
|||||||
@ -170,6 +170,174 @@ export interface ReportTenement extends TenementInfo {
|
|||||||
consumptionAmount: string
|
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;
|
park: SimpleParkInfo;
|
||||||
tenement: TenementInfo;
|
tenement: TenementInfo;
|
||||||
comprehensive: TenementComprehensiveDetail;
|
comprehensive: TenementComprehensiveDetail;
|
||||||
meters: (Meter04KvInfo &
|
meters: ReportTenementMeters[];
|
||||||
PooledSumDetail &
|
|
||||||
ReportMeterUnit & { /** 合计电费 */ finalTotal: string; loss: Consumption } & {
|
|
||||||
/** 首次抄表时间 */
|
|
||||||
currentTermReadings: string,
|
|
||||||
/** 最近抄表时间 */
|
|
||||||
lastTermReadings: string,
|
|
||||||
}
|
|
||||||
& {
|
|
||||||
startNumber: number,
|
|
||||||
endNumber: number,
|
|
||||||
displayRatio: number,
|
|
||||||
publicAmount: string,
|
|
||||||
refundAmount: string,
|
|
||||||
}
|
|
||||||
)[];
|
|
||||||
|
|
||||||
|
|
||||||
pooled: (Meter04KvInfo & ReportMeterUnit)[];
|
pooled: (Meter04KvInfo & ReportMeterUnit)[];
|
||||||
@ -226,6 +379,126 @@ export type TenementComprehensiveDetail = PooledSumDetail & {
|
|||||||
endDate: string;
|
endDate: string;
|
||||||
/** 本期公摊电量 */
|
/** 本期公摊电量 */
|
||||||
publicAmount: number
|
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 {
|
export function getIndex(page: number, size: number, index: number) : string {
|
||||||
return `${(page - 1) * 20 + Number(index) + 1}`
|
return `${(page - 1) * size + Number(index) + 1}`
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Response {
|
interface Response {
|
||||||
@ -75,4 +75,12 @@ export function getFetchFileList(files: FileList[]) : string[] {
|
|||||||
return files.filter(item => item.status === "done").map(item => {
|
return files.filter(item => item.status === "done").map(item => {
|
||||||
return item?.response?.data
|
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…
x
Reference in New Issue
Block a user