diff --git a/src/components/Waterfall.jsx b/src/components/Waterfall.jsx index 8c106ac..4df8f2d 100644 --- a/src/components/Waterfall.jsx +++ b/src/components/Waterfall.jsx @@ -66,7 +66,6 @@ export default observer((props) => { customItems: (originalItems) => { // process originalItems, const items = originalItems.map((ele) => ({ ...ele, title: `${ele.title} ${ele.data.groupsLabel}`, name: dataFieldAlias[ele.name]?.alias || ele.name })); - console.log(originalItems, items, 'llll'); return items; }, }, diff --git a/src/stores/Trade.js b/src/stores/Trade.js index 7837a2c..10c176f 100644 --- a/src/stores/Trade.js +++ b/src/stores/Trade.js @@ -54,7 +54,7 @@ class Trade { */ fetchTradeDataByDate(queryData) { this.timeData.loading = true; - Object.assign(queryData, { groupType: 'overview', groupDateType: 'month' }); + Object.assign(queryData, { groupType: 'overview', groupDateType: 'week' }); this.fetchTradeData(queryData).then((json) => { if (json.errcode === 0) { runInAction(() => { diff --git a/src/views/Home.jsx b/src/views/Home.jsx index 98336c1..b7c88e1 100644 --- a/src/views/Home.jsx +++ b/src/views/Home.jsx @@ -8,14 +8,15 @@ import Bullet from '../components/BulletWithSort'; import Waterfall from '../components/Waterfall'; import DataFieldRadio from './../components/DateFieldRadio'; import SearchForm from './../components/search/SearchForm'; -import { empty } from './../utils/commons'; +import { empty, cloneDeep } from './../utils/commons'; import { dataFieldAlias } from './../libs/ht'; +import { Line } from '@ant-design/charts'; import './home.css'; export default observer(() => { const navigate = useNavigate(); const { TradeStore } = useContext(stores_Context); - const { searchPayloadHome, sideData, summaryData, BuData, topData } = TradeStore; + const { searchPayloadHome, sideData, summaryData, BuData, topData, timeData } = TradeStore; const topSeries = [ { key: 'country', label: '国籍' }, @@ -34,6 +35,7 @@ export default observer(() => { const pageRefresh = (queryData) => { TradeStore.fetchSummaryData(queryData); + TradeStore.fetchTradeDataByDate(queryData); TradeStore.fetchTradeDataByBU(queryData); TradeStore.fetchTradeDataByMonth(queryData); for (const iterator of topSeries) { @@ -95,11 +97,52 @@ export default observer(() => { xField: 'groupsLabel', layout: 'vertical', }; + + const lineConfigSet = { + // data: orders_data.data, + padding: 'auto', + xField: 'groupDateVal', + yField: 'SumML', + seriesField: 'groupsLabel', + xAxis: { + type: 'cat', + }, + smooth: true, + point: { + size: 4, + shape: "cicle", + }, + legend: false, + meta: { ...cloneDeep(dataFieldAlias) + // [extProps.yField]: { + // alias: dataFieldAlias[extProps.yField]?.alias || extProps.yField, + // formatter: (v) => dataFieldAlias[extProps.yField]?.formatter(v) || v, + // max: Math.ceil(yMax / 0.95), + // }, + }, + }; + const [timeDataField, setTimeDataField] = useState('SumML'); + const [lineConfig, setLineConfig] = useState(cloneDeep(lineConfigSet)); + const handleChangetimeDataField = (key) => { + setTimeDataField(key); + setLineConfig({ + ...lineConfig, + yField: key, + // ? 全局的alias不起作用 + tooltip: { + customItems: (originalItems) => { + // process originalItems, + const items = originalItems.map((ele) => ({ ...ele, name: dataFieldAlias[key]?.alias || key })); + return items; + }, + }, + }); + }; return ( <> - + {/* style={{ margin: '-16px -8px', padding: 0 }} */} - + { }, shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'years'], fieldProps: { - DepartmentList: { show_all: true, }, - WebCode: { show_all: true, }, + DepartmentList: { show_all: true }, + WebCode: { show_all: true }, years: { hide_vs: true }, }, }} @@ -133,6 +176,14 @@ export default observer(() => { +
+ +

趋势

+ +
+
+ +

市场进度