nili
8 months ago
12 changed files with 274 additions and 45 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +0,0 @@ |
|||
"use strict";(self.webpackChunkant_design_pro=self.webpackChunkant_design_pro||[]).push([[628],{58451:function(_e,p,_){_.r(p);var U=_(97857),A=_.n(U),C=_(15009),r=_.n(C),T=_(99289),v=_.n(T),R=_(5574),m=_.n(R),E=_(48357),I=_(4025),o=_(31847),x=_(90930),B=_(57470),f=_(64317),W=_(34540),g=_(27484),K=_.n(g),L=_(9220),l=_(67294),y=_(96974),a=_(85893),S=function(){var Z=(0,l.useState)(),D=m()(Z,2),i=D[0],F=D[1],z=(0,l.useState)([]),O=m()(z,2),h=O[0],G=O[1],$=(0,l.useState)([]),P=m()($,2),H=P[0],J=P[1],ae=o.Z.Divider,N=(0,l.useState)(!1),M=m()(N,2),Q=M[0],V=M[1],X=(0,y.UO)(),j=X.code,Y=function(){var t=v()(r()().mark(function e(){var n;return r()().wrap(function(s){for(;;)switch(s.prev=s.next){case 0:return s.next=2,(0,E.d1)({appCode:j});case 2:n=s.sent,n.data&&F(n.data);case 4:case"end":return s.stop()}},e)}));return function(){return t.apply(this,arguments)}}(),w=function(){var t=v()(r()().mark(function e(){var n;return r()().wrap(function(s){for(;;)switch(s.prev=s.next){case 0:return s.next=2,(0,E.ln)();case 2:n=s.sent,n.data&&J(n.data);case 4:case"end":return s.stop()}},e)}));return function(){return t.apply(this,arguments)}}(),b=function(){var t=v()(r()().mark(function e(n){var u;return r()().wrap(function(d){for(;;)switch(d.prev=d.next){case 0:return d.next=2,(0,E.Zb)(n);case 2:u=d.sent,u.data&&G(u.data);case 4:case"end":return d.stop()}},e)}));return function(n){return t.apply(this,arguments)}}();(0,l.useEffect)(function(){Y(),w(),b({code:j})},[]);var c=function(e){return e?parseFloat((e/1e5).toFixed(2)):0},k=function(e){var n=e+"";return n.slice(4,6)+"/"+n.slice(6,8)},q=h.map(function(t){return{date:k(t.date),income:c(t.income)}}),ee={data:q,xField:"date",yField:"income",tooltip:{name:"\u6536\u5165",field:"income"},axis:{date:{title:"\u65E5\u671F"},income:{title:"\u6536\u5165\uFF08\u5143\uFF09"}},title:"\u533A\u95F4\u7D2F\u8BA1"+c(h.reduce(function(t,e){return t+(e.income?e.income:0)},0))+"\u5143",height:400,label:{text:function(e){return e.income>0?e.income:""},textBaseline:"bottom",visible:!0,type:"point"},line:{style:{stroke:"#eb0fcc",strokeWidth:2},shapeField:"smooth"},shapeField:"smooth",style:{fill:"linear-gradient(-90deg, white 0%, #eb0fcc 100%)"}};return(0,a.jsxs)(x._z,{children:[(0,a.jsx)(L.Z,{onResize:function(e){V(e.width<596)},children:(0,a.jsx)(o.Z,{children:(0,a.jsxs)(o.Z.Group,{direction:Q?"column":"row",children:[(0,a.jsx)(o.Z,{statistic:{title:"\u7D2F\u8BA1\u6536\u5165\uFF08\u5143\uFF09",value:c(i==null?void 0:i.totalIncome)}}),(0,a.jsx)(o.Z,{statistic:{title:"\u6628\u65E5\u6536\u5165\uFF08\u5143\uFF09",value:c(i==null?void 0:i.yesterdayIncome)}})]})})},"resize-observer"),(0,a.jsxs)("div",{style:{marginTop:"20px",padding:"40px",backgroundColor:"white"},children:[(0,a.jsxs)(B.t,{defaultCollapsed:!0,split:!0,onFinish:b,children:[(0,a.jsx)(f.Z,{name:"code",label:"\u5E94\u7528",options:H.map(function(t){return{label:t.name,value:t.code}})}),(0,a.jsx)(f.Z,{label:"\u5E73\u53F0",name:"platform",valueEnum:{1:"\u7A7F\u5C71\u7532",2:"\u817E\u8BAF",5:"\u5FEB\u624B",7:"Sigmob"}}),(0,a.jsx)(f.Z,{name:"advType",label:"\u5E7F\u544A\u7C7B\u578B",valueEnum:{1:"\u6A2A\u5E45",2:"\u63D2\u9875",3:"\u6FC0\u52B1\u89C6\u9891"}}),(0,a.jsx)(W.Z,{fieldProps:{disabledDate:function(e){return e&&e>=K()().startOf("day")}},name:"date",label:"\u65F6\u95F4"})]}),(0,a.jsx)(I.Z,A()({},ee))]})]})};p.default=S}}]); |
|||
@ -0,0 +1 @@ |
|||
"use strict";(self.webpackChunkant_design_pro=self.webpackChunkant_design_pro||[]).push([[628],{58451:function(_e,p,_){_.r(p);var U=_(97857),A=_.n(U),C=_(15009),r=_.n(C),T=_(99289),E=_.n(T),R=_(5574),d=_.n(R),f=_(48357),I=_(4025),x=_(90930),m=_(31847),B=_(57470),v=_(64317),W=_(34540),g=_(27484),K=_.n(g),L=_(9220),o=_(67294),y=_(96974),a=_(85893),S=function(){var F=(0,o.useState)(),D=d()(F,2),i=D[0],Z=D[1],z=(0,o.useState)([]),O=d()(z,2),h=O[0],G=O[1],$=(0,o.useState)([]),P=d()($,2),H=P[0],J=P[1],N=(0,o.useState)(!1),M=d()(N,2),Q=M[0],V=M[1],X=(0,y.UO)(),j=X.code,Y=function(){var t=E()(r()().mark(function e(){var n;return r()().wrap(function(s){for(;;)switch(s.prev=s.next){case 0:return s.next=2,(0,f.d1)({appCode:j});case 2:n=s.sent,n.data&&Z(n.data);case 4:case"end":return s.stop()}},e)}));return function(){return t.apply(this,arguments)}}(),w=function(){var t=E()(r()().mark(function e(){var n;return r()().wrap(function(s){for(;;)switch(s.prev=s.next){case 0:return s.next=2,(0,f.ln)();case 2:n=s.sent,n.data&&J(n.data);case 4:case"end":return s.stop()}},e)}));return function(){return t.apply(this,arguments)}}(),b=function(){var t=E()(r()().mark(function e(n){var l;return r()().wrap(function(u){for(;;)switch(u.prev=u.next){case 0:return u.next=2,(0,f.Zb)(n);case 2:l=u.sent,l.data&&G(l.data);case 4:case"end":return u.stop()}},e)}));return function(n){return t.apply(this,arguments)}}();(0,o.useEffect)(function(){Y(),w(),b({code:j})},[]);var c=function(e){return e?parseFloat((e/1e5).toFixed(2)):0},k=function(e){var n=e+"";return n.slice(4,6)+"/"+n.slice(6,8)},q=h.map(function(t){return{date:k(t.date),income:c(t.income)}}),ee={data:q,xField:"date",yField:"income",tooltip:{name:"\u6536\u5165",field:"income"},axis:{date:{title:"\u65E5\u671F"},income:{title:"\u6536\u5165\uFF08\u5143\uFF09"}},title:"\u533A\u95F4\u7D2F\u8BA1"+c(h.reduce(function(t,e){return t+(e.income?e.income:0)},0))+"\u5143",height:400,label:{text:function(e){return e.income>0?e.income:""},textBaseline:"bottom",visible:!0,type:"point"},line:{style:{stroke:"#eb0fcc",strokeWidth:2},shapeField:"smooth"},shapeField:"smooth",style:{fill:"linear-gradient(-90deg, white 0%, #eb0fcc 100%)"}};return(0,a.jsxs)(x._z,{children:[(0,a.jsx)(L.Z,{onResize:function(e){V(e.width<596)},children:(0,a.jsx)(m.Z,{children:(0,a.jsxs)(m.Z.Group,{direction:Q?"column":"row",children:[(0,a.jsx)(m.Z,{statistic:{title:"\u7D2F\u8BA1\u6536\u5165\uFF08\u5143\uFF09",value:c(i==null?void 0:i.totalIncome)}}),(0,a.jsx)(m.Z,{statistic:{title:"\u6628\u65E5\u6536\u5165\uFF08\u5143\uFF09",value:c(i==null?void 0:i.yesterdayIncome)}})]})})},"resize-observer"),(0,a.jsxs)("div",{style:{marginTop:"20px",padding:"40px",backgroundColor:"white"},children:[(0,a.jsxs)(B.t,{defaultCollapsed:!0,split:!0,onFinish:b,children:[(0,a.jsx)(v.Z,{name:"code",label:"\u5E94\u7528",options:H.map(function(t){return{label:t.name,value:t.code}})}),(0,a.jsx)(v.Z,{label:"\u5E73\u53F0",name:"platform",valueEnum:{1:"\u7A7F\u5C71\u7532",2:"\u817E\u8BAF",5:"\u5FEB\u624B",7:"Sigmob"}}),(0,a.jsx)(v.Z,{name:"advType",label:"\u5E7F\u544A\u7C7B\u578B",valueEnum:{1:"\u6A2A\u5E45",2:"\u63D2\u9875",3:"\u6FC0\u52B1\u89C6\u9891"}}),(0,a.jsx)(W.Z,{fieldProps:{disabledDate:function(e){return e&&e>=K()().startOf("day")}},name:"date",label:"\u65F6\u95F4"})]}),(0,a.jsx)(I.Z,A()({},ee))]})]})};p.default=S}}]); |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,173 @@ |
|||
import { appList } from '@/services/matrix/admin'; |
|||
import { incomeDaily1, incomeOverview1 } from '@/services/matrix/device'; |
|||
import { Area } from '@ant-design/charts'; |
|||
import { |
|||
PageContainer, |
|||
ProFormDateRangePicker, |
|||
ProFormSelect, |
|||
QueryFilter, |
|||
StatisticCard, |
|||
} from '@ant-design/pro-components'; |
|||
import moment from 'moment'; |
|||
import RcResizeObserver from 'rc-resize-observer'; |
|||
import { useEffect, useState } from 'react'; |
|||
import { useParams } from 'react-router-dom'; |
|||
|
|||
const Overview: React.FC = () => { |
|||
const [overview, setOverview] = useState<API.OverviewBo>(); |
|||
const [daily, setDaily] = useState<API.DateIncome[]>([]); |
|||
const [appArr, setAppArr] = useState<API.MatrixApp[]>([]); |
|||
const [responsive, setResponsive] = useState(false); |
|||
|
|||
const { code } = useParams(); |
|||
|
|||
const fetchData = async () => { |
|||
const res = await incomeOverview1({ appCode: code }); |
|||
if (res.data) { |
|||
setOverview(res.data); |
|||
} |
|||
}; |
|||
|
|||
const fetchApp = async () => { |
|||
const res = await appList(); |
|||
if (res.data) { |
|||
setAppArr(res.data); |
|||
} |
|||
}; |
|||
|
|||
const fetchDaily = async (params: API.IncomeQuery) => { |
|||
const res = await incomeDaily1(params); |
|||
if (res.data) { |
|||
setDaily(res.data); |
|||
} |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
fetchData(); |
|||
fetchApp(); |
|||
fetchDaily({ code: code }); |
|||
}, []); |
|||
|
|||
const formatIncome = (v: number | undefined) => { |
|||
if (!v) { |
|||
return 0; |
|||
} |
|||
return parseFloat((v / 1000_00).toFixed(2)); |
|||
}; |
|||
|
|||
const formatDate = (x: number | undefined) => { |
|||
const str = x + ''; |
|||
return str.slice(4, 6) + '/' + str.slice(6, 8); |
|||
}; |
|||
|
|||
// 在渲染折线图组件时，对数据进行处理
|
|||
const processedChartData: { date: string | number; income: number }[] = daily.map((item) => ({ |
|||
date: formatDate(item.date), |
|||
income: formatIncome(item.income), |
|||
})); |
|||
|
|||
const config = { |
|||
data: processedChartData, |
|||
// theme: 'Light',
|
|||
xField: 'date', |
|||
yField: 'income', |
|||
// theme: 'classicDark',
|
|||
tooltip: { |
|||
name: '收入', |
|||
field: 'income', |
|||
}, |
|||
axis: { |
|||
date: { |
|||
title: '日期', |
|||
}, |
|||
income: { |
|||
title: '收入（元）', |
|||
}, |
|||
}, |
|||
title: |
|||
'区间累计' + |
|||
formatIncome(daily.reduce((acc, data) => acc + (data.income ? data.income : 0), 0)) + |
|||
'元', |
|||
height: 400, |
|||
label: { |
|||
text: (d: any) => (d.income > 0 ? d.income : ''), |
|||
textBaseline: 'bottom', |
|||
visible: true, |
|||
type: 'point', |
|||
}, |
|||
line: { |
|||
style: { |
|||
stroke: '#eb0fcc', |
|||
strokeWidth: 2, |
|||
}, |
|||
shapeField: 'smooth', |
|||
}, |
|||
shapeField: 'smooth', |
|||
style: { |
|||
fill: 'linear-gradient(-90deg, white 0%, #eb0fcc 100%)', |
|||
}, |
|||
// point: { visible: true },
|
|||
}; |
|||
|
|||
return ( |
|||
<PageContainer> |
|||
<RcResizeObserver |
|||
key="resize-observer" |
|||
onResize={(offset) => { |
|||
setResponsive(offset.width < 596); |
|||
}} |
|||
> |
|||
<StatisticCard> |
|||
<StatisticCard.Group direction={responsive ? 'column' : 'row'}> |
|||
<StatisticCard |
|||
statistic={{ |
|||
title: '累计收入（元）', |
|||
value: formatIncome(overview?.totalIncome), |
|||
}} |
|||
/> |
|||
|
|||
<StatisticCard |
|||
statistic={{ |
|||
title: '昨日收入（元）', |
|||
value: formatIncome(overview?.yesterdayIncome), |
|||
}} |
|||
/> |
|||
</StatisticCard.Group> |
|||
</StatisticCard> |
|||
</RcResizeObserver> |
|||
|
|||
<div style={{ marginTop: '20px', padding: '40px', backgroundColor: 'white' }}> |
|||
<QueryFilter defaultCollapsed split onFinish={fetchDaily}> |
|||
<ProFormSelect |
|||
name="code" |
|||
label="应用" |
|||
options={appArr.map((x) => ({ |
|||
label: x.name, |
|||
value: x.code, |
|||
}))} |
|||
/> |
|||
<ProFormSelect |
|||
label="平台" |
|||
name="platform" |
|||
valueEnum={{ |
|||
1: '穿山甲', |
|||
2: '腾讯', |
|||
5: '快手', |
|||
7: 'Sigmob', |
|||
}} |
|||
/> |
|||
<ProFormDateRangePicker |
|||
fieldProps={{ |
|||
disabledDate: (current: any) => current && current >= moment().startOf('day'), |
|||
}} |
|||
name="date" |
|||
label="时间" |
|||
/> |
|||
</QueryFilter> |
|||
<Area {...config} /> |
|||
</div> |
|||
</PageContainer> |
|||
); |
|||
}; |
|||
|
|||
export default Overview; |
|||
Loading…
Reference in new issue