Skip to content

A
admin-ci-test
提交 f42b95c3 作者: 龚洪江
操作

功能：数据看板

上级 18999000
正在显示 包含 912 行增加 和 16 行删除
package.json
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"antd": "^5.4.2", "antd": "^5.4.2",
"axios": "^1.4.0", "axios": "^1.4.0",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
"echarts": "^5.4.3",
"events": "^3.3.0", "events": "^3.3.0",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"js-base64": "^3.7.3", "js-base64": "^3.7.3",
......
pnpm-lock.yaml
...@@ -29,6 +29,9 @@ dependencies: ...@@ -29,6 +29,9 @@ dependencies:
dayjs: dayjs:
specifier: ^1.11.7 specifier: ^1.11.7
version: registry.npmmirror.com/dayjs@1.11.7 version: registry.npmmirror.com/dayjs@1.11.7
echarts:
specifier: ^5.4.3
version: registry.npmmirror.com/echarts@5.4.3
events: events:
specifier: ^3.3.0 specifier: ^3.3.0
version: registry.npmmirror.com/events@3.3.0 version: registry.npmmirror.com/events@3.3.0
...@@ -2352,6 +2355,15 @@ packages: ...@@ -2352,6 +2355,15 @@ packages:
ssr-window: registry.npmmirror.com/ssr-window@3.0.0 ssr-window: registry.npmmirror.com/ssr-window@3.0.0
dev: false dev: false
registry.npmmirror.com/echarts@5.4.3:
resolution: {integrity: sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz}
name: echarts
version: 5.4.3
dependencies:
tslib: registry.npmmirror.com/tslib@2.3.0
zrender: registry.npmmirror.com/zrender@5.4.4
dev: false
registry.npmmirror.com/electron-to-chromium@1.4.404: registry.npmmirror.com/electron-to-chromium@1.4.404:
resolution: {integrity: sha512-te57sWvQdpxmyd1GiswaodKdXdPgn9cN4ht8JlNa04QgtrfnUdWEo1261rY2vaC6TKaiHn0E7QerJWPKFCvMVw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.404.tgz} resolution: {integrity: sha512-te57sWvQdpxmyd1GiswaodKdXdPgn9cN4ht8JlNa04QgtrfnUdWEo1261rY2vaC6TKaiHn0E7QerJWPKFCvMVw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.404.tgz}
name: electron-to-chromium name: electron-to-chromium
...@@ -5509,6 +5521,12 @@ packages: ...@@ -5509,6 +5521,12 @@ packages:
version: 1.14.1 version: 1.14.1
dev: true dev: true
registry.npmmirror.com/tslib@2.3.0:
resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz}
name: tslib
version: 2.3.0
dev: false
registry.npmmirror.com/tslib@2.5.3: registry.npmmirror.com/tslib@2.5.3:
resolution: {integrity: sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tslib/-/tslib-2.5.3.tgz} resolution: {integrity: sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/tslib/-/tslib-2.5.3.tgz}
name: tslib name: tslib
...@@ -5796,3 +5814,11 @@ packages: ...@@ -5796,3 +5814,11 @@ packages:
version: 0.1.0 version: 0.1.0
engines: {node: '>=10'} engines: {node: '>=10'}
dev: true dev: true
registry.npmmirror.com/zrender@5.4.4:
resolution: {integrity: sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz}
name: zrender
version: 5.4.4
dependencies:
tslib: registry.npmmirror.com/tslib@2.3.0
dev: false
src/App.tsx
import './assets/style/App.scss'; import './assets/style/App.scss';
import PrivateRouter from '~/router/privateRouter'; import PrivateRouter from '~/router/privateRouter';
import { BrowserRouter } from 'react-router-dom'; import { BrowserRouter } from 'react-router-dom';
import { useEffect } from 'react';
const App = () => ( const App = () => {
<> const resizeListener = () => {
<BrowserRouter> // 定义设计图的尺寸 3840
<PrivateRouter /> const designSize = 1920;
</BrowserRouter> // 获取 html 元素
</> const html = document.documentElement;
); // 定义窗口的宽度
const clientW = html.clientWidth;
// html 的fontsize 大小
const htmlRem = (clientW * 12) / designSize;
html.style.fontSize = htmlRem + 'px';
};
useEffect(() => {
window.addEventListener('resize', resizeListener);
resizeListener();
}, []);
return (
<>
<BrowserRouter>
<PrivateRouter />
</BrowserRouter>
</>
);
};
export default App; export default App;
src/api/index.ts
...@@ -17,6 +17,7 @@ import { FlyerCenterAPI } from './modules/flyerCenterAPI'; ...@@ -17,6 +17,7 @@ import { FlyerCenterAPI } from './modules/flyerCenterAPI';
import { RentManageAPI } from './modules/rentManageAPI'; import { RentManageAPI } from './modules/rentManageAPI';
import { DepleteManageTypeAPI } from './modules/depleteManageTypeAPI'; import { DepleteManageTypeAPI } from './modules/depleteManageTypeAPI';
import { FddInterfaceAPI } from './modules/fddInterfaceAPI'; import { FddInterfaceAPI } from './modules/fddInterfaceAPI';
import { DataDashboardsAPI } from './modules/dataDashboardsAPI';
export { export {
CommonAPI, CommonAPI,
...@@ -38,4 +39,5 @@ export { ...@@ -38,4 +39,5 @@ export {
RentManageAPI, RentManageAPI,
DepleteManageTypeAPI, DepleteManageTypeAPI,
FddInterfaceAPI, FddInterfaceAPI,
DataDashboardsAPI,
}; };
src/api/interface/dataDashboardsType.ts 0 → 100644
import { InterFunction } from '~/api/interface';
// 数据看板-用户概况
export type userReportDataType = InterFunction<
any,
{
/**
* 飞手认证数量
*/
dronePilotCount?: number;
/**
* 实名认证数量
*/
realNameCount?: number;
/**
* 用户数量
*/
userCount?: number;
/**
* 昨日活跃用户数量
*/
yesterdayActiveUserCount?: number;
/**
* 昨日新增用户数量
*/
yesterdayAddUserCount?: number;
}
>;
//数据看板-信息发布
export type releaseReportDataType = InterFunction<
any,
{
/**
* 订单发布数量
*/
orderReleaseCount?: number;
/**
* 帖子发布数量
*/
postsReleaseCount?: number;
/**
* 信息发布总数
*/
releaseCount?: number;
/**
* 话题发布数量
*/
topicReleaseCount?: number;
}
>;
// 数据看板-加盟信息
export type userJoinReportDataType = InterFunction<
any,
{
/**
* 品牌商
*/
brandStore?: number;
/**
* 入驻商家总数
*/
joinStoreCount?: number;
/**
* 出租商品
*/
leaseProduct?: number;
/**
* 租赁商
*/
leaseStore?: number;
/**
* 在线课程
*/
onlineCourse?: number;
/**
* 维修商
*/
repairStore?: number;
/**
* 销售商品
*/
saleProduct?: number;
/**
* 服务商品
*/
serviceProduct?: number;
/**
* 服务商
*/
serviceStore?: number;
/**
* 培训机构
*/
trainingInstitution?: number;
}
>;
src/api/modules/dataDashboardsAPI.ts 0 → 100644
import {
releaseReportDataType,
userJoinReportDataType,
userReportDataType,
} from '~/api/interface/dataDashboardsType';
import axios from '../request';
export class DataDashboardsAPI {
// 数据看板-用户概况
static getUserReportData: userReportDataType = () =>
axios.get('/userapp/user/report/getUserReportData');
// 数据看板-信息发布
static getReleaseReportData: releaseReportDataType = () =>
axios.get('/release/release/report/getReleaseReportData');
// 数据看板-加盟信息
static getUserJoinReportData: userJoinReportDataType = () =>
axios.get('/pms/product/report/getUserReportData');
}
src/pages/common/login/index.tsx
...@@ -50,7 +50,9 @@ function LoginView() { ...@@ -50,7 +50,9 @@ function LoginView() {
localStorage.setItem('roleId', res.result.roleInfo.id.toString()); localStorage.setItem('roleId', res.result.roleInfo.id.toString());
authRouterList().then((value: any) => { authRouterList().then((value: any) => {
if (value.length) { if (value.length) {
navigate({ pathname: value[0].children.find((v: any) => !v.meta.hidden)?.path }); navigate({
pathname: value[0].children?.find((v: any) => !v.meta.hidden)?.path || value[0].path,
});
} else { } else {
message.warning('请先配置权限'); message.warning('请先配置权限');
} }
...@@ -95,7 +97,9 @@ function LoginView() { ...@@ -95,7 +97,9 @@ function LoginView() {
localStorage.setItem('roleId', result.roleInfo.id.toString()); localStorage.setItem('roleId', result.roleInfo.id.toString());
authRouterList().then((value: any) => { authRouterList().then((value: any) => {
if (value.length) { if (value.length) {
navigate({ pathname: value[0].children.find((v: any) => !v.meta.hidden)?.path }); navigate({
pathname: value[0].children?.find((v: any) => !v.meta.hidden)?.path || value[0].path,
});
} else { } else {
message.warning('请先配置权限'); message.warning('请先配置权限');
} }
......
src/pages/dataDashboards/components/joinInfo/index.scss 0 → 100644
@import '@/style/covert.scss';
$design_width:1712;
$design_height:856;
.join-info{
margin-left: 20px;
width: toVw(468,$design_width);
&-card-1{
height: toVh(160,1080);
background: linear-gradient(316deg, #0066F5 0%, #007AFF 100%);
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.join-count{
font-size: 4.33rem;
font-weight: bold;
color: #FFFFFF;
line-height: 6.08rem;
&:after{
content: '家';
font-size: 3rem;
font-weight: bold;
color: #FFFFFF;
}
}
.join-meta{
font-size: 2rem;
color: #F4F5F7;
line-height: 2.75rem;
}
}
&-card-2,&-card-3{
background: linear-gradient(180deg, rgba(238,239,242,0.9) 0%, #FFFFFF 100%);
box-shadow: 0px 10px 20px 0px rgba(23,29,52,0.2), inset 0px 1px 3px 0px #FFFFFF;
border-radius: 32px;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2)) 2 2;
backdrop-filter: blur(10px);
margin-top: 16px;
.card-header{
&-icon{
background: #0075FC;
}
}
}
&-card-2{
height: toVh(355,1080);
.card-echarts{
width: 100%;
height: toVh(200,1080);
}
}
&-card-3{
height: toVh(346,1080);
.card-header{
.sku-count{
font-size: 2.33rem;
font-weight: bold;
color: #010101;
line-height: 3.33rem;
}
}
.card-progress{
padding: 0 53px 0 39px;
margin-bottom: 19px;
.progress-item{
display: flex;
align-items: center;
&-label{
font-size: 1.2rem;
color: #707070;
font-weight: bold;
}
&-info{
flex: 1;
margin: 0 36px 0 24px;
}
&-value{
font-size: 1.67rem;
font-weight: bold;
color: #000000;
}
}
}
}
}
src/pages/dataDashboards/components/joinInfo/index.tsx 0 → 100644
import './index.scss';
import { useEffect, useState } from 'react';
import * as echarts from 'echarts';
import { Progress } from 'antd';
import { DataDashboardsAPI } from '~/api';
import { InterDataType } from '~/api/interface';
import { userJoinReportDataType } from '~/api/interface/dataDashboardsType';
// 数据看板-加盟返回类型
type joinReportDataType = InterDataType<userJoinReportDataType>;
const JoinInfo = () => {
const [joinReportDataType, setJoinReportDataType] = useState<joinReportDataType>();
// 数据看板-加盟信息
const getUserJoinReportData = () => {
DataDashboardsAPI.getUserJoinReportData().then(({ result }) => {
if (result) {
setJoinReportDataType(result);
}
});
};
// 初始化饼图
const initEchartsPie = () => {
const myChart = echarts.init(document.getElementById('pie'));
myChart.setOption({
tooltip: {
trigger: 'item',
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
normal: {
color: function (params: any) {
const colorList = ['#FF4100', '#6600FF', '#006BFF', '#FF9E00', '#64C9C9'];
return colorList[params.dataIndex];
},
},
},
data: [
{ value: 40, name: '品牌商' },
{ value: 38, name: '维修商' },
{ value: 32, name: '培训机构' },
{ value: 30, name: '服务商' },
{ value: 28, name: '租赁商' },
],
},
],
});
window.addEventListener('resize', function () {
myChart.resize();
});
};
useEffect(() => {
initEchartsPie();
getUserJoinReportData();
}, []);
return (
<div className='join-info'>
<div className='join-info-card-1'>
<div className='join-count'>{joinReportDataType?.joinStoreCount}</div>
<div className='join-meta'>入驻商家总数</div>
</div>
<div className='join-info-card-2'>
<div className='card-header'>
<div className='card-header-icon'></div>
<div className='card-header-title'>入驻商家</div>
</div>
<div className='card-echarts' id='pie'></div>
</div>
<div className='join-info-card-3'>
<div className='card-header'>
<div className='card-header-icon'></div>
<div className='card-header-title'>上架商品 (SKU)</div>
<div className='sku-count'>2400</div>
</div>
<div className='card-progress'>
<div className='progress-item'>
<div className='progress-item-label'>售卖商品</div>
<div className='progress-item-info'>
<Progress percent={30} strokeColor='#F4872A' showInfo={false} />
</div>
<div className='progress-item-value'>122</div>
</div>
<div className='progress-item'></div>
<div className='progress-item'></div>
</div>
</div>
</div>
);
};
export default JoinInfo;
src/pages/dataDashboards/components/tradeInfo/index.scss 0 → 100644
@import '@/style/covert.scss';
$design_width:1712;
$design_height:856;
.trade-info{
margin-left: 20px;
width: toVw(740,$design_width);
&-card-1{
height: toVh(160,1080);
background: linear-gradient(180deg, #B14BFF 0%, #7330B1 100%);
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
.total-price{
font-size: 4.33rem;
font-weight: bold;
color: #FFFFFF;
line-height: 6.08rem;
&:before{
content: "￥";
font-size: 3rem;
font-weight: bold;
color: #FFFFFF;
}
&-meta{
font-size: 2rem;
color: #F4F5F7;
line-height: 2.75rem;
}
}
.time{
position: absolute;
right: 2.23rem;
top: 1.67rem;
font-size: 1.33rem;
color: rgba(255,255,255,0.6);
line-height: 1.83rem;
}
}
&-card-2{
height: toVh(716,1080);
background: linear-gradient(180deg, rgba(238,239,242,0.9) 0%, #FFFFFF 100%);
box-shadow: 0px 10px 20px 0px rgba(23,29,52,0.2), inset 0px 1px 3px 0px #FFFFFF;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2)) 2 2;
backdrop-filter: blur(10px);
border-radius: 32px;
margin-top: 16px;
.card-header{
&-icon{
background: #F22D40;
}
}
.card-echarts{
width: 100%;
height: toVh(300,1080);
}
.card-table{
padding: 0 35px;
&-header{
display: flex;
align-items: center;
.header-td{
flex: 1;
font-size: 1.3rem;
font-weight: bold;
color: rgba(0,0,0,0.6);
&:first-child{
margin-left: 29px;
}
&:not(:first-child){
text-align: center;
}
}
}
&-tr{
margin-top: 20px;
min-height: 46px;
background: rgba(#D8D8D8,0.2);
display: flex;
align-items: center;
.td{
flex: 1;
font-size: 1.5rem;
font-weight: bold;
color: #000000;
&:first-child{
margin-left: 29px;
}
&:not(:first-child){
text-align: center;
}
}
}
}
}
}
src/pages/dataDashboards/components/tradeInfo/index.tsx 0 → 100644
import './index.scss';
import * as echarts from 'echarts';
import { useEffect } from 'react';
const TradeInfo = () => {
// 初始化柱状图
const initEchartsBar = () => {
const myChart = echarts.init(document.getElementById('histogram'));
myChart.setOption({
legend: {
right: 20,
top: 0,
data: [
{
name: '总订单数',
icon: 'pin',
},
{
name: '总交易额',
icon: 'pin',
},
],
},
xAxis: {
data: ['商城', '租赁', '服务'],
axisLabel: {
color: '#000',
fontSize: 15,
},
},
yAxis: {},
series: [
{
name: '总订单数',
type: 'bar',
data: [50, 20, 36],
barWidth: '13',
itemStyle: {
barBorderRadius: [7, 7, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#0B7CFE' },
{ offset: 1, color: '#FFFFFF' },
]),
},
},
{
name: '总交易额',
type: 'bar',
data: [50, 20, 36],
barWidth: '13',
itemStyle: {
barBorderRadius: [7, 7, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#F22D40' },
{ offset: 1, color: '#FFFFFF' },
]),
},
},
],
});
window.addEventListener('resize', function () {
myChart.resize();
});
};
useEffect(() => {
initEchartsBar();
}, []);
return (
<div className='trade-info'>
<div className='trade-info-card-1'>
<div className='total-price'>12987.00</div>
<div className='total-price-meta'>实时交易总额 (GMV)</div>
<div className='time'>09.05更新</div>
</div>
<div className='trade-info-card-2'>
<div className='card-header'>
<div className='card-header-icon'></div>
<div className='card-header-title'>交易详情</div>
</div>
<div className='card-echarts' id='histogram'></div>
<div className='card-table'>
<div className='card-table-header'>
<div className='header-td'>类型</div>
<div className='header-td'>订单总数(个)</div>
<div className='header-td'>交易总额(元)</div>
</div>
<div className='card-table-tr'>
<div className='td'>商城售卖</div>
<div className='td'>123</div>
<div className='td'>¥187.00</div>
</div>
<div className='card-table-tr'>
<div className='td'>商品租赁</div>
<div className='td'>123</div>
<div className='td'>¥187.00</div>
</div>{' '}
<div className='card-table-tr'>
<div className='td'>服务订单</div>
<div className='td'>123</div>
<div className='td'>¥187.00</div>
</div>
</div>
</div>
</div>
);
};
export default TradeInfo;
src/pages/dataDashboards/components/userInfo/index.scss 0 → 100644
@import '@/style/covert.scss';
$design_width:1712;
$design_height:856;
.user-info{
width: toVw(424,$design_width);
&-card-1{
height: toVh(160,1080);
background: linear-gradient(360deg, #2DB058 0%, #29B84F 100%);
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.user-count-value{
font-size: 4.33rem;
font-weight: bold;
color: #FFFFFF;
line-height: 6.08rem;
&:after{
content: '人';
font-size: 3rem;
font-weight: bold;
color: #FFFFFF;
}
}
.user-count-meta{
font-size: 2rem;
color: #F4F5F7;
line-height: 2.75rem;
}
}
&-card-2,&-card-3{
background: linear-gradient(180deg, rgba(238,239,242,0.9) 0%, #FFFFFF 100%);
box-shadow: 0px 10px 20px 0px rgba(23,29,52,0.2), inset 0px 1px 3px 0px #FFFFFF;
border-radius: 32px;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2)) 2 2;
backdrop-filter: blur(10px);
margin-top: 16px;
}
&-card-2,&-card-3{
.card-header{
&-icon{
background: #51B986;
}
}
}
&-card-2{
height: toVh(355,1080);
.card-info-1,.card-info-2{
display: flex;
align-items: center;
.add, .active,.user-auth,.flyer-auth{
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.label{
font-size: 1.67rem;
color: #5B5B5B;
margin-top: 13px;
line-height: 2.33rem;
}
.value{
font-size: 2.67rem;
line-height: 3.75rem;
font-weight: bold;
}
}
}
.card-info-1{
.add,.active{
.value{
color: #009531;
}
}
}
.card-info-2{
margin-top: 2.17rem;
.user-auth,.flyer-auth{
.value{
color: #FF4C30;
}
}
}
}
&-card-3{
height: toVh(346,1080);
.card-header{
.publish-count{
font-size: 2.33rem;
font-weight: bold;
color: #000000;
line-height: 3.33rem;
}
}
.card-info{
margin-bottom: 26px;
display: flex;
padding: 0 40px 0 35px;
display: flex;
align-items: center;
justify-content: space-between;
.label{
font-size: 1.67rem;
font-weight:bold;
color: #5B5B5B;
line-height: 2.33rem;
}
.value{
font-size: 1.67rem;
font-weight: bold;
color: #000000;
line-height: 2.33rem;
}
}
}
}
src/pages/dataDashboards/components/userInfo/index.tsx 0 → 100644
import './index.scss';
import { DataDashboardsAPI } from '~/api';
import { useEffect, useState } from 'react';
import { InterDataType } from '~/api/interface';
import { releaseReportDataType, userReportDataType } from '~/api/interface/dataDashboardsType';
// 数据报表-用户信息返回类型
type userInfoDataType = InterDataType<userReportDataType>;
// 数据报表-信息发布返回类型
type releaseReportData = InterDataType<releaseReportDataType>;
const UserInfo = () => {
const [userReportData, setUserReportData] = useState<userInfoDataType>();
const [releaseReportData, setReleaseReportData] = useState<releaseReportData>();
// 获取用户信息数据
const getUserReportData = () => {
DataDashboardsAPI.getUserReportData().then(({ result }) => {
if (result) {
setUserReportData(result);
}
});
};
// 获取信息发布数据
const getReleaseReportData = () => {
DataDashboardsAPI.getReleaseReportData().then(({ result }) => {
if (result) {
setReleaseReportData(result);
}
});
};
useEffect(() => {
getUserReportData();
getReleaseReportData();
}, []);
return (
<div className='user-info'>
<div className='user-info-card-1'>
<div className='user-count-value'>{userReportData?.userCount}</div>
<div className='user-count-meta'>用户总人数</div>
</div>
<div className='user-info-card-2'>
<div className='card-header'>
<div className='card-header-icon'></div>
<div className='card-header-title'>用户概况</div>
</div>
<div className='card-info-1'>
<div className='add'>
<div className='value'>+{userReportData?.yesterdayAddUserCount}</div>
<div className='label'>昨日新增</div>
</div>
<div className='active'>
<div className='value'>{userReportData?.yesterdayActiveUserCount}</div>
<div className='label'>昨日活跃</div>
</div>
</div>
<div className='card-info-2'>
<div className='user-auth'>
<div className='value'>{userReportData?.dronePilotCount}</div>
<div className='label'>实名认证</div>
</div>
<div className='flyer-auth'>
<div className='value'>{userReportData?.realNameCount}</div>
<div className='label'>飞手认证</div>
</div>
</div>
</div>
<div className='user-info-card-3'>
<div className='card-header'>
<div className='card-header-icon'></div>
<div className='card-header-title'>信息发布</div>
<div className='publish-count'>{releaseReportData?.releaseCount}</div>
</div>
<div className='card-info'>
<div className='label'>帖子发布</div>
<div className='value'>{releaseReportData?.postsReleaseCount}</div>
</div>
<div className='card-info'>
<div className='label'>话题发布</div>
<div className='value'>{releaseReportData?.topicReleaseCount}</div>
</div>
<div className='card-info'>
<div className='label'>订单发布</div>
<div className='value'>{releaseReportData?.orderReleaseCount}</div>
</div>
</div>
</div>
);
};
export default UserInfo;
src/pages/dataDashboards/index.scss 0 → 100644
.data-dashboards{
background-color: #161823;
height: 100vh;
width: 100vw;
box-sizing: border-box;
position: relative;
&-header{
height: calc(70vw/21.75);
text-align: center;
img{
width:70vw;
height: 100%;
vertical-align: top;
}
}
&-operate{
width: 100px;
height: 30px;
background: #1F1F1F;
border-radius: 5px;
border: 1px solid #4E4E4E;
position: absolute;
top: 36px;
left: 25px;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:active{
background-color: rgba(0,0,0,0.5);
}
img{
width: 17px;
height: 10px;
margin-right: 4px;
}
}
&-content{
height: calc(100vh - (70vw/21.75));
padding: 25px;
box-sizing: border-box;
.content-card{
background: #EBEEFC;
border-radius: 40px;
height: 100%;
padding:25px;
box-sizing: border-box;
display: flex;
overflow-y:scroll ;
.card-header{
padding: 20px 40px 26px 17px;
display: flex;
align-items: center;
&-icon{
width: 6px;
height: 28px;
}
&-title{
margin-left: 16px;
font-size: 2.33rem;
font-weight: 600;
color: #000000;
line-height: 3.33rem;
flex: 1;
}
}
}
}
}
src/pages/dataDashboards/index.tsx
import './index.scss';
import dataDashboardsHeaderImg from '~/assets/image/data-dashboards-header.png';
import dataDashboardsLogoImg from '~/assets/image/data-dashboards-logo.png';
import UserInfo from './components/userInfo';
import TradeInfo from './components/tradeInfo';
import JoinInfo from './components/joinInfo';
import { authRouterList } from '~/router';
import { useNavigate } from 'react-router-dom';
const DataDashboards = () => { const DataDashboards = () => {
return <div className='data-dashboards'></div>; const navigate = useNavigate();
// 跳转后台
const toBackEndRoute = () => {
authRouterList().then((value) => {
navigate({
pathname: value[1].children?.find((v: any) => !v.meta.hidden)?.path || value[1].path,
});
});
};
return (
<div className='data-dashboards'>
<div className='data-dashboards-header'>
<img src={dataDashboardsHeaderImg} alt='' />
</div>
<div className='data-dashboards-operate' onClick={toBackEndRoute}>
<img src={dataDashboardsLogoImg} alt='' />
<span>进入后台</span>
</div>
<div className='data-dashboards-content'>
<div className='content-card'>
<UserInfo />
<TradeInfo />
<JoinInfo />
</div>
</div>
</div>
);
}; };
export default DataDashboards; export default DataDashboards;
src/pages/orderManage/procurementOrder/orderDetail/index.tsx
...@@ -10,12 +10,14 @@ import './index.scss'; ...@@ -10,12 +10,14 @@ import './index.scss';
import { decode } from 'js-base64'; import { decode } from 'js-base64';
import FileSaver from 'file-saver'; import FileSaver from 'file-saver';
import LogisticsStepModal from '~/components/order/productOrder/logisticsStepModal'; import LogisticsStepModal from '~/components/order/productOrder/logisticsStepModal';
import { useSelector } from 'react-redux';
// 采购订单详情返回类型 // 采购订单详情返回类型
type detailType = InterDataType<purchaseOrderDetailType>; type detailType = InterDataType<purchaseOrderDetailType>;
const ProcurementOrderDetail = () => { const ProcurementOrderDetail = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const { userInfo } = useSelector((state: any) => state.userInfo);
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const [purchaseOrderDetail, setPurchaseOrderDetail] = useState<detailType>(); const [purchaseOrderDetail, setPurchaseOrderDetail] = useState<detailType>();
// 订单状态 // 订单状态
...@@ -128,10 +130,14 @@ const ProcurementOrderDetail = () => { ...@@ -128,10 +130,14 @@ const ProcurementOrderDetail = () => {
</Button> </Button>
} }
> >
<Descriptions.Item label='供应商名称：'> <Descriptions.Item
label={`${userInfo.companyInfoVO.companyType === 0 ? '供应商' : '采购商'}名称：`}
>
{purchaseOrderDetail?.companyName} {purchaseOrderDetail?.companyName}
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label='供应商电话：'> <Descriptions.Item
label={`${userInfo.companyInfoVO.companyType === 0 ? '供应商' : '采购商'}电话：`}
>
{purchaseOrderDetail?.thirdPhoneNum} {purchaseOrderDetail?.thirdPhoneNum}
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
......
src/pages/orderManage/procurementOrder/orderList/components/remarkModal/index.tsx
import { Form, Input, Modal, ModalProps } from 'antd'; import { Form, Input, message, Modal, ModalProps } from 'antd';
import { FC, useEffect } from 'react'; import { FC, useEffect } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { listPurchaseOrderType } from '~/api/interface/orderManageType'; import { listPurchaseOrderType } from '~/api/interface/orderManageType';
...@@ -29,6 +29,7 @@ const RemarkModal: FC<ModalProps & selfProps> = ({ open, onCancel, onOk, current ...@@ -29,6 +29,7 @@ const RemarkModal: FC<ModalProps & selfProps> = ({ open, onCancel, onOk, current
id: currentOrderItem?.id, id: currentOrderItem?.id,
content: value.remark, content: value.remark,
}).then(() => { }).then(() => {
message.success('操作成功');
onOk(); onOk();
form.resetFields(); form.resetFields();
}); });
......
src/router/privateRouter.tsx
...@@ -26,7 +26,9 @@ function PrivateRouter() { ...@@ -26,7 +26,9 @@ function PrivateRouter() {
const routes = [...value, ...whiteRouterList]; const routes = [...value, ...whiteRouterList];
setRouter(routes); setRouter(routes);
if (path === '/') { if (path === '/') {
navigate({ pathname: value[0].children?.find((v: any) => !v.meta.hidden)?.path }); navigate({
pathname: value[0].children?.find((v: any) => !v.meta.hidden)?.path || value[0].path,
});
} }
} else { } else {
message.warning('该账号暂无权限'); message.warning('该账号暂无权限');
......
src/router/router.tsx
...@@ -212,6 +212,7 @@ const withLoadingComponent = (comp: JSX.Element) => ( ...@@ -212,6 +212,7 @@ const withLoadingComponent = (comp: JSX.Element) => (
{comp} {comp}
</React.Suspense> </React.Suspense>
); );
// 路由白名单 // 路由白名单
export const whiteRouterList: Array<RouteObject & RouteObjectType> = [ export const whiteRouterList: Array<RouteObject & RouteObjectType> = [
{ {
...@@ -236,6 +237,7 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -236,6 +237,7 @@ export const routerList: Array<RouteObjectType> = [
// icon: <BarChartOutlined />, // icon: <BarChartOutlined />,
// title: '数据看板', // title: '数据看板',
// id: 300, // id: 300,
// hidden: true,
// develop: true, // develop: true,
// }, // },
// }, // },
...@@ -1284,7 +1286,7 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -1284,7 +1286,7 @@ export const routerList: Array<RouteObjectType> = [
element: withLoadingComponent(<CompanyDetailView />), element: withLoadingComponent(<CompanyDetailView />),
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
meta: { meta: {
id: 1450, id: 1460,
title: '单位详情', title: '单位详情',
icon: <BankOutlined />, icon: <BankOutlined />,
hidden: true, hidden: true,
...@@ -1306,7 +1308,7 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -1306,7 +1308,7 @@ export const routerList: Array<RouteObjectType> = [
element: withLoadingComponent(<RealNameAuthView />), element: withLoadingComponent(<RealNameAuthView />),
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
meta: { meta: {
id: 1460, id: 1450,
title: '实名认证', title: '实名认证',
icon: <VerifiedOutlined />, icon: <VerifiedOutlined />,
develop: true, develop: true,
......
src/style/covert.scss 0 → 100644
@use "sass:math";
@function toVw($px,$designWidth){
@return math.div($px, $designWidth) * 100vw
}
@function toVh($px,$designHeight){
@return math.div($px,$designHeight) * 100vh
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论