From 01d37732d211093b884b5cc5c3825f333ab4f4cc Mon Sep 17 00:00:00 2001 From: Joe Date: Sun, 7 Jul 2024 17:42:17 +0800 Subject: [PATCH] up --- config/routes.ts | 55 ++++++++- src/constants.ts | 15 +++ src/pages/Dashboard/BusinessViews.tsx | 116 ++++++++++++++++++ src/pages/Dashboard/ChannelStatistics.tsx | 86 +++++++++++++ src/pages/Dashboard/ScanDetail.tsx | 100 +++++++++++++++ .../{Dashboard.tsx => Dashboard/index.tsx} | 17 ++- .../OperationsDashboard/BusinessDetail.tsx | 111 +++++++++++++++++ .../OperationsDashboard/ProductDetail.tsx | 114 +++++++++++++++++ src/pages/OperationsDashboard/index.tsx | 114 +++++++++++++++++ 9 files changed, 725 insertions(+), 3 deletions(-) create mode 100644 src/pages/Dashboard/BusinessViews.tsx create mode 100644 src/pages/Dashboard/ChannelStatistics.tsx create mode 100644 src/pages/Dashboard/ScanDetail.tsx rename src/pages/{Dashboard.tsx => Dashboard/index.tsx} (91%) create mode 100644 src/pages/OperationsDashboard/BusinessDetail.tsx create mode 100644 src/pages/OperationsDashboard/ProductDetail.tsx create mode 100644 src/pages/OperationsDashboard/index.tsx diff --git a/config/routes.ts b/config/routes.ts index afc829f..dc02d60 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -4,7 +4,60 @@ export default [ layout: false, routes: [{ name: '登录', path: '/user/login', component: './User/Login' }], }, - { path: '/dashboard', access: 'dashboardQuery', name: '仪表盘', icon: 'home', component: './Dashboard' }, + { + path: '/dashboard', + access: 'dashboardQuery', + name: '仪表盘', + icon: 'home', + routes: [ + { + path: '', + component: './Dashboard', + }, + { + name: '商户浏览排行', + path: 'business-views', + hideInMenu: true, + component: './Dashboard/BusinessViews', + }, + { + name: '渠道商家数', + path: 'channel-statistics', + hideInMenu: true, + component: './Dashboard/ChannelStatistics', + }, + { + name: '扫码人明细', + path: 'scan-detail', + hideInMenu: true, + component: './Dashboard/ScanDetail', + }, + ], + }, + { + path: '/operations-dashboard', + access: 'dashboardQuery', + name: '运营看板', + icon: 'dashboard', + routes: [ + { + path: '', + component: './OperationsDashboard', + }, + { + name: '注册商家明细', + path: 'business-detail', + hideInMenu: true, + component: './OperationsDashboard/BusinessDetail', + }, + { + name: '注册商品明细', + path: 'product-detail', + hideInMenu: true, + component: './OperationsDashboard/ProductDetail', + } + ], + }, { name: '用户管理', path: '/user-list', diff --git a/src/constants.ts b/src/constants.ts index 4967f3c..6533e6d 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -98,6 +98,13 @@ const Constants = { 0: '卖家', 1: '买家' }, + /** + * 新老客 + */ + pbcMembersType: { + 0: '新客', + 1: '老客' + }, /** * 会员来源渠道 */ @@ -114,6 +121,14 @@ const Constants = { 1: '港澳居民来往内地通行证', 2: '台湾居民来往大陆通行证' }, + /** + * 访问来源 + */ + pbcVisitSourceEnum: { + qrcode: '二维码', + link: '链接', + share: '分享' + }, // 手机正则 PHONE_PATTERN: /^(?:(0\d{2,3}-)?\d{7,8}|1[3-9]\d{9})$/, //邮箱正则 diff --git a/src/pages/Dashboard/BusinessViews.tsx b/src/pages/Dashboard/BusinessViews.tsx new file mode 100644 index 0000000..e4d3a98 --- /dev/null +++ b/src/pages/Dashboard/BusinessViews.tsx @@ -0,0 +1,116 @@ +import { + pbcUsersPageUsingPost, +} from '@/services/pop-b2b2c/pbcUsersController'; +import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components'; +import { PageContainer } from '@ant-design/pro-layout'; +import { Link, useAccess } from '@umijs/max'; +import React, { useRef } from 'react'; + +/** + * 查询表格 + * @param param0 + */ +const fetchData = async (params: API.PageVO) => { + const msg = await pbcUsersPageUsingPost(params); + return { + data: msg.data?.records, + total: msg.data?.total, + success: msg.retcode, + } as any; +}; + +// eslint-disable-next-line @typescript-eslint/ban-types +const TableList: React.FC<{}> = () => { + const actionRef = useRef(); + const access: any = useAccess(); + + const columns: ProColumns[] = [ + { + title: '浏览次数', + dataIndex: 'pbcBusinessName', + search: false + }, + { + title: '商户编号', + dataIndex: 'pbcBusinessCode', + search: false + }, + { + title: '商户名称', + dataIndex: 'pbcBusinessName', + }, + { + title: '联系人', + width: 100, + dataIndex: 'pbcBusinessContact', + search: false + }, + { + title: '商户手机号', + width: 110, + dataIndex: 'pbcBusinessContactMobile', + search: false + }, + { + title: '主营品类', + dataIndex: 'pbcBusinessMainCategory', + ellipsis: true, + search: false, + }, + { + title: '注册日期', + dataIndex: 'pbcCreateAt', + width: 150, + valueType: 'dateTimeRange', + render: (text, record) => record.pbcCreateAt, + }, + { + title: '商户等级', + width: 80, + dataIndex: 'pbcBusinessLevel', + search: false + }, + { + title: '操作', + fixed: 'right', + width: 140, + valueType: 'option', + render: (text, record) => ( + 详情 + ), + }, + ]; + return ( + + + columns={columns} + actionRef={actionRef} + request={fetchData} + rowKey="pbcId" + size="small" + bordered + search={{ + labelWidth: 'auto', + span: 6, + }} + pagination={{ + defaultPageSize: 20, + showSizeChanger: true, + }} + scroll={{ + y: 'calc(100vh - 320px)', + }} + dateFormatter="string" + options={false} + toolBarRender={() => []} + /> + + ); +}; + +export default TableList; diff --git a/src/pages/Dashboard/ChannelStatistics.tsx b/src/pages/Dashboard/ChannelStatistics.tsx new file mode 100644 index 0000000..5d94b72 --- /dev/null +++ b/src/pages/Dashboard/ChannelStatistics.tsx @@ -0,0 +1,86 @@ +import Constants from '@/constants'; +import { + pbcUsersPageUsingPost, + } from '@/services/pop-b2b2c/pbcUsersController'; + import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components'; + import { PageContainer } from '@ant-design/pro-layout'; + import React, { useRef } from 'react'; + + /** + * 查询表格 + * @param param0 + */ + const fetchData = async (params: API.PageVO) => { + const msg = await pbcUsersPageUsingPost(params); + return { + data: msg.data?.records, + total: msg.data?.total, + success: msg.retcode, + } as any; + }; + + // eslint-disable-next-line @typescript-eslint/ban-types + const TableList: React.FC<{}> = () => { + const actionRef = useRef(); + + const columns: ProColumns[] = [ + { + title: '商户编号', + dataIndex: 'pbcBusinessCode', + search: false + }, + { + title: '商户名称', + dataIndex: 'pbcBusinessName', + search: false + }, + { + title: '渠道', + dataIndex: 'pbcVisitSourceEnum', + valueType: 'select', + valueEnum: Constants.pbcVisitSourceEnum + }, + { + title: '访问时间', + dataIndex: 'pbcCreateAt', + width: 150, + hideInTable: true, + valueType: 'dateTimeRange', + render: (text, record) => record.pbcCreateAt, + }, + ]; + return ( + + + columns={columns} + actionRef={actionRef} + request={fetchData} + rowKey="pbcId" + size="small" + bordered + search={{ + labelWidth: 'auto', + span: 6, + }} + pagination={{ + defaultPageSize: 20, + showSizeChanger: true, + }} + scroll={{ + y: 'calc(100vh - 320px)', + }} + dateFormatter="string" + options={false} + toolBarRender={() => []} + /> + + ); + }; + + export default TableList; + \ No newline at end of file diff --git a/src/pages/Dashboard/ScanDetail.tsx b/src/pages/Dashboard/ScanDetail.tsx new file mode 100644 index 0000000..68a7c6c --- /dev/null +++ b/src/pages/Dashboard/ScanDetail.tsx @@ -0,0 +1,100 @@ +import Constants from '@/constants'; +import { + pbcUsersPageUsingPost, +} from '@/services/pop-b2b2c/pbcUsersController'; +import { handlePageQuery } from '@/utils/utils'; +import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components'; +import { PageContainer } from '@ant-design/pro-layout'; +import React, { useRef } from 'react'; + +/** + * 查询表格 + * @param param0 + */ +const fetchData = async (params: API.PageVO) => { + const msg = await pbcUsersPageUsingPost(params); + return { + data: msg.data?.records, + total: msg.data?.total, + success: msg.retcode, + } as any; +}; + +// eslint-disable-next-line @typescript-eslint/ban-types +const TableList: React.FC<{}> = () => { + const actionRef = useRef(); + + const columns: ProColumns[] = [ + { + title: '人员名称', + dataIndex: 'pbcUserNickName', + search: false + }, + { + title: '手机号', + dataIndex: 'pbcUserMobile', + search: false + }, + { + title: '新老客', + dataIndex: 'pbcVipGradeName', + valueType: 'select', + valueEnum: Constants.pbcMembersType + }, + { + title: '扫码时间', + dataIndex: 'pbcCreateAt', + valueType: 'dateTimeRange', + render: (text, record) => record.pbcCreateAt + }, + ]; + return ( + + + columns={columns} + actionRef={actionRef} + request={(param: any) => { + console.log(param) + let hasUserType = false + if (param.pbcUserType) { + param.pbcUserType = parseInt(param.pbcUserType) + hasUserType = true + } + const queryParam = handlePageQuery(param); + if (!hasUserType && queryParam.filters) { + queryParam.filters.push({ + key: 'pbcUserType'.replace(/([A-Z])/g, '_$1').toLowerCase(), + value: 1, + action: '<=', + }); + } + return fetchData(queryParam); + }} + rowKey="pbcId" + size="small" + bordered + search={{ + labelWidth: 'auto', + span: 6, + }} + pagination={{ + defaultPageSize: 20, + showSizeChanger: true, + }} + scroll={{ + y: 'calc(100vh - 320px)', + }} + dateFormatter="string" + options={false} + toolBarRender={() => []} + /> + + ); +}; + +export default TableList; diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard/index.tsx similarity index 91% rename from src/pages/Dashboard.tsx rename to src/pages/Dashboard/index.tsx index c33a042..950a875 100644 --- a/src/pages/Dashboard.tsx +++ b/src/pages/Dashboard/index.tsx @@ -5,6 +5,7 @@ import { PageContainer, ProCard, ProForm, ProFormDateRangePicker, ProFormGroup, import { Card, Col, DatePickerProps, Row, Spin, Statistic } from 'antd'; import React, { useEffect, useRef, useState } from 'react'; import { querySearchKeyRankUsingPost } from '@/services/pop-b2b2c/pbcSearchKeyController'; +import { history, Link } from '@umijs/max'; const Welcome: React.FC = () => { @@ -231,6 +232,9 @@ const Welcome: React.FC = () => { + + + @@ -242,13 +246,22 @@ const Welcome: React.FC = () => { - + {'更多>>'} + } bordered={false}> - + { + plot.on('plot:click', (evt: { x: any; y: any; }) => { + const { x, y } = evt; + const tooltipData = plot.chart.getTooltipItems({ x, y }); + console.log(tooltipData); + history.push('/dashboard/channel-statistics') + }); + }} /> diff --git a/src/pages/OperationsDashboard/BusinessDetail.tsx b/src/pages/OperationsDashboard/BusinessDetail.tsx new file mode 100644 index 0000000..8cc824f --- /dev/null +++ b/src/pages/OperationsDashboard/BusinessDetail.tsx @@ -0,0 +1,111 @@ +import Constants from '@/constants'; +import { + pbcUsersPageUsingPost, +} from '@/services/pop-b2b2c/pbcUsersController'; +import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components'; +import { PageContainer } from '@ant-design/pro-layout'; +import { Link, useAccess } from '@umijs/max'; +import React, { useRef } from 'react'; + +/** + * 查询表格 + * @param param0 + */ +const fetchData = async (params: API.PageVO) => { + const msg = await pbcUsersPageUsingPost(params); + return { + data: msg.data?.records, + total: msg.data?.total, + success: msg.retcode, + } as any; +}; + +// eslint-disable-next-line @typescript-eslint/ban-types +const TableList: React.FC<{}> = () => { + const actionRef = useRef(); + const access: any = useAccess(); + + const columns: ProColumns[] = [ + { + title: '商户编号', + dataIndex: 'pbcBusinessCode', + search: false + }, + { + title: '商户名称', + dataIndex: 'pbcBusinessName', + }, + { + title: '联系人', + width: 100, + dataIndex: 'pbcBusinessContact', + search: false + }, + { + title: '商户手机号', + width: 110, + dataIndex: 'pbcBusinessContactMobile', + search: false + }, + { + title: '商户类别', + dataIndex: 'pbcBusinessType', + width: 80, + valueType: 'select', + search: false, + valueEnum: Constants.pbcBusinessType, + }, + { + title: '主营品类', + dataIndex: 'pbcBusinessMainCategory', + ellipsis: true, + search: false, + }, + { + title: '注册日期', + dataIndex: 'pbcCreateAt', + width: 150, + valueType: 'dateTimeRange', + render: (text, record) => record.pbcCreateAt, + }, + { + title: '商户等级', + width: 80, + dataIndex: 'pbcBusinessLevel', + search: false + }, + ]; + return ( + + + columns={columns} + actionRef={actionRef} + request={fetchData} + rowKey="pbcId" + size="small" + bordered + search={{ + labelWidth: 'auto', + span: 6, + }} + pagination={{ + defaultPageSize: 20, + showSizeChanger: true, + }} + scroll={{ + y: 'calc(100vh - 320px)', + }} + dateFormatter="string" + options={false} + toolBarRender={() => []} + /> + + ); +}; + +export default TableList; diff --git a/src/pages/OperationsDashboard/ProductDetail.tsx b/src/pages/OperationsDashboard/ProductDetail.tsx new file mode 100644 index 0000000..0111109 --- /dev/null +++ b/src/pages/OperationsDashboard/ProductDetail.tsx @@ -0,0 +1,114 @@ +import Constants from '@/constants'; +import { listAdminTreeUsingGet } from '@/services/pop-b2b2c/pbcCategoryController'; +import { + pbcUsersPageUsingPost, +} from '@/services/pop-b2b2c/pbcUsersController'; +import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components'; +import { PageContainer } from '@ant-design/pro-layout'; +import React, { useRef } from 'react'; + +/** + * 查询表格 + * @param param0 + */ +const fetchData = async (params: API.PageVO) => { + const msg = await pbcUsersPageUsingPost(params); + return { + data: msg.data?.records, + total: msg.data?.total, + success: msg.retcode, + } as any; +}; + +// eslint-disable-next-line @typescript-eslint/ban-types +const TableList: React.FC<{}> = () => { + const actionRef = useRef(); + + const columns: ProColumns[] = [ + { + title: '商品类目', + dataIndex: 'pbcProductCategoryId', + hideInTable: true, + valueType: 'cascader', + fieldProps: { + fieldNames: { label: 'pbcCategoryName', value: 'pbcId', children: 'children' }, + }, + request: async () => { + const msg = await listAdminTreeUsingGet({ type: 2 }); + if (msg.retcode && msg.data) { + return msg.data; + } + return []; + }, + }, + { + title: '商品大类', + dataIndex: 'pbcProductTopCategoryName', + search: false, + }, + { + title: '商品中类', + dataIndex: 'pbcProductParentCategoryName', + search: false, + }, + { + title: '商品小类', + dataIndex: 'pbcProductCategoryName', + search: false, + }, + { + title: '商品名称', + dataIndex: 'pbcProductTitle', + }, + { + title: '价格', + dataIndex: 'pbcProductPrice', + search: false, + }, + { + title: '所属商户', + dataIndex: 'pbcBusinessName', + search: false, + }, + { + title: '状态', + dataIndex: 'pbcState', + valueType: 'select', + search: false, + valueEnum: Constants.pbcProductState, + }, + ]; + return ( + + + columns={columns} + actionRef={actionRef} + request={fetchData} + rowKey="pbcId" + size="small" + bordered + search={{ + labelWidth: 'auto', + span: 6, + }} + pagination={{ + defaultPageSize: 20, + showSizeChanger: true, + }} + scroll={{ + y: 'calc(100vh - 320px)', + }} + dateFormatter="string" + options={false} + toolBarRender={() => []} + /> + + ); +}; + +export default TableList; diff --git a/src/pages/OperationsDashboard/index.tsx b/src/pages/OperationsDashboard/index.tsx new file mode 100644 index 0000000..548151f --- /dev/null +++ b/src/pages/OperationsDashboard/index.tsx @@ -0,0 +1,114 @@ +import { queryAllRoleUsingPost } from '@/services/pop-b2b2c/pbcRoleController'; +import { + pbcUsersPageUsingPost, +} from '@/services/pop-b2b2c/pbcUsersController'; +import { handlePageQuery } from '@/utils/utils'; +import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components'; +import { PageContainer } from '@ant-design/pro-layout'; +import React, { useRef } from 'react'; + +/** + * 查询表格 + * @param param0 + */ +const fetchData = async (params: API.PageVO) => { + const msg = await pbcUsersPageUsingPost(params); + return { + data: msg.data?.records, + total: msg.data?.total, + success: msg.retcode, + } as any; +}; + +// eslint-disable-next-line @typescript-eslint/ban-types +const TableList: React.FC<{}> = () => { + const actionRef = useRef(); + + const columns: ProColumns[] = [ + { + title: '人员姓名', + dataIndex: 'pbcUserNickName' + }, + { + title: '手机号', + dataIndex: 'pbcUserMobile', + search: false + }, + { + title: '角色', + dataIndex: 'pbcUserRole', + valueType: 'select', + request: async () => { + const msg = await queryAllRoleUsingPost(); + if (msg.retcode && msg.data) { + return msg.data.map((e) => { + return { + label: e.roleName, + value: e.pbcId, + }; + }); + } + return []; + }, + }, + { + title: '注册商家数', + dataIndex: 'pbcUserMobile', + search: false + }, + { + title: '上传商品数', + dataIndex: 'pbcUserMobile', + search: false + }, + ]; + return ( + + + columns={columns} + actionRef={actionRef} + request={(param: any) => { + console.log(param) + let hasUserType = false + if (param.pbcUserType) { + param.pbcUserType = parseInt(param.pbcUserType) + hasUserType = true + } + const queryParam = handlePageQuery(param); + if (!hasUserType && queryParam.filters) { + queryParam.filters.push({ + key: 'pbcUserType'.replace(/([A-Z])/g, '_$1').toLowerCase(), + value: 1, + action: '<=', + }); + } + return fetchData(queryParam); + }} + rowKey="pbcId" + size="small" + bordered + search={{ + labelWidth: 'auto', + span: 6, + }} + pagination={{ + defaultPageSize: 20, + showSizeChanger: true, + }} + scroll={{ + y: 'calc(100vh - 320px)', + }} + dateFormatter="string" + options={false} + toolBarRender={() => []} + /> + + ); +}; + +export default TableList;