nili
5 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