Skip to content

J
jinfa-platform
Commit 3f589a5d authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

Merge branch 'dev-srm' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into dev-srm

parents d983c4da e11db7f2
Hide whitespace changes
Inline Side-by-side
Showing with 381 additions and 349 deletions
config/routes/index.ts
View file @ 3f589a5d
......@@ -5,7 +5,7 @@
* @LastEditTime: 2021-04-21 16:53:13
*/
// import CommodityRoute from './commodityRoute' // 商品能力路由
import MemberRoute from './memberRoute' // 会员能力路由
// import MemberRoute from './memberRoute' // 会员能力路由
// import ShopRoute from './shopRoute' // 店铺能力路由
// import ChannelRoute from './channelRoute' // 渠道能力路由
// import TranactionRoute from './tranactionRoute' // 交易能力路由
......
src/pages/channel/channelInfo/index.tsx
View file @ 3f589a5d
......@@ -28,6 +28,8 @@ const defaultCityData = { index: 0, provinceCode: 0, province: '', cityCode: 0,
const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
const { siteUrl, siteId } = props.SiteStore
const [door, setDoor] = useState<string>('');
const [resUrl, setResUrl] = useState<string>('');
const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
const [formIsHalfFilledOut, setFormIsHalfFilledOut] = useState(false)
const [form] = Form.useForm()
......@@ -78,7 +80,7 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
const fetchAllShop = () => {
const param: any = {
siteId,
type: 2
type: 3
}
PublicApi.getManageShopFindShopsBySiteId(param).then(res => {
if (res.code === 1000) {
......@@ -265,68 +267,26 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
})
}
const handleMallSelectChange = (mallId: number) => {
setShopId(mallId)
if (!shopInfo) {
return
}
if (shopInfo.shopId && shopInfo.memberId) {
const resUrl = getMallItemAndSetUrl(mallId)
setStoreUrl(resUrl)
} else {
setStoreUrl(null)
}
const handleFormValueChange = () => {
setFormIsHalfFilledOut(true)
}
const getMallItemAndSetUrl = (mallId) => {
let result = ""
const mallItem = allMallList.filter(item => item.id === mallId)[0]
if (!mallItem) {
return ""
}
let newSiteUrl = siteUrl
if (newSiteUrl.indexOf('http') < 0) {
newSiteUrl = `${REQUEST_HEADER}${newSiteUrl}`
}
if (mallItem.environment === 1) {
switch (mallItem.type) {
case 3:
result = `${REQUEST_HEADER}${GlobalConfig.channelRootRoute}.${TOP_DOMAIN}/m${shopInfo.memberId}`
break
case 4:
result = `${REQUEST_HEADER}${GlobalConfig.ichannelRootRoute}.${TOP_DOMAIN}/m${shopInfo.memberId}`
break
default:
result = ""
break
/** 获取店铺链接 */
const checkUrl = (url) => {
if (url && typeof url === 'string') {
if (url.indexOf('/') === 0) {
return url.replace('/', '').trim()
} else {
return `${url}`.trim()
}
} else {
result = ""
}
return result
}
const handleFormValueChange = () => {
setFormIsHalfFilledOut(true)
}
const getSelectMallStoreUrl = () => {
if (!shopInfo) {
return null
}
if (shopId && shopInfo.memberId) {
const resUrl = getMallItemAndSetUrl(shopId)
return resUrl ? (
<div className={styles.shop_url}>
<span>当前商城链接：</span>
<label title={resUrl}>{resUrl}</label>
<CopyOutlined className={styles.copy_icon} onClick={() => handleCopyLinke(resUrl)} />
</div>
) : null
const handleMallSelectChange = (val, option) => {
setDoor(option.children);
if (option.url) {
checkUrl(option.url) ? setResUrl(`${checkUrl(option.url)}.${siteUrl}`) : setResUrl(`${siteUrl}`)
}
return null
}
return (
......@@ -442,7 +402,7 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
{Object.keys(file).length > 0 && (
<div className={styles.upload_item}>
<div className={styles.upload_left}>
<LinkOutlined style={{ marginRight: '5px'}} />
<LinkOutlined style={{ marginRight: '5px' }} />
<Typography.Link
href={`/api/contract/contractTemplate/downloadContract?contractName=${file.albumName}&contractUrl=${file.albumURL}`}
target="_blank"
......@@ -482,9 +442,13 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
))
}
</Select>
{
getSelectMallStoreUrl()
}
{resUrl && (
<div className={styles.shop_url}>
<span>当前{door}链接:</span>
<label>{resUrl}</label>
<CopyOutlined className={styles.copy_icon} onClick={() => handleCopyLinke(resUrl)} />
</div>
)}
</Form.Item>
<Form.Item
label={<RequireItem label="" />}
......
src/pages/handling/handlingInfo/index.tsx
View file @ 3f589a5d
......@@ -30,6 +30,8 @@ const defaultCategoryData = { index: 0, firstId: 0, secondId: 0, thirdlyId: 0, f
const HandlingInfo: React.FC<HandlingInfoPropsType> = (props) => {
const { siteUrl, siteId } = props.SiteStore
const [door, setDoor] = useState<string>('');
const [resUrl, setResUrl] = useState<string>('');
const [formIsHalfFilledOut, setFormIsHalfFilledOut] = useState(false)
const [form] = Form.useForm()
const [allMallList, setAllMallList] = useState([])
......@@ -80,7 +82,7 @@ const HandlingInfo: React.FC<HandlingInfoPropsType> = (props) => {
const fetchAllShop = () => {
const param: any = {
siteId,
type: 1
type: 8
}
PublicApi.getManageShopFindShopsBySiteId(param).then(res => {
if (res.code === 1000) {
......@@ -365,64 +367,26 @@ const HandlingInfo: React.FC<HandlingInfoPropsType> = (props) => {
})
}
const handleMallSelectChange = (mallId: number) => {
setShopId(mallId)
if (!shopInfo) {
return null
}
if (shopInfo.shopId && shopInfo.memberId) {
const resUrl = getMallItemAndSetUrl(mallId)
}
const handleFormValueChange = () => {
setFormIsHalfFilledOut(true)
}
const getMallItemAndSetUrl = (mallId) => {
let result = ""
const mallItem = allMallList.filter(item => item.id === mallId)[0]
if (!mallItem) {
return ""
}
if (mallItem.environment === 1) {
let newSiteUrl = siteUrl
if (newSiteUrl.indexOf('http') < 0) {
newSiteUrl = `http://` + newSiteUrl
}
switch (mallItem.type) {
case 1:
result = `${newSiteUrl}/shop?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId, roleId: shopInfo.roleId }))}`
break
case 2:
result = `${newSiteUrl}/shop/pointsMall?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId, roleId: shopInfo.roleId }))}`
break
default:
result = ""
break
/** 获取店铺链接 */
const checkUrl = (url) => {
if (url && typeof url === 'string') {
if (url.indexOf('/') === 0) {
return url.replace('/', '').trim()
} else {
return `${url}`.trim()
}
} else {
result = ""
}
return result
}
const handleFormValueChange = () => {
setFormIsHalfFilledOut(true)
}
const getSelectMallStoreUrl = () => {
if (!shopInfo) {
return null
}
if (shopId && shopInfo.memberId) {
const resUrl = getMallItemAndSetUrl(shopId)
return resUrl ? (
<div className={styles.shop_url}>
<span>当前店铺链接：</span>
<label>{resUrl}</label>
<CopyOutlined className={styles.copy_icon} onClick={() => handleCopyLinke(resUrl)} />
</div>
) : null
const handleMallSelectChange = (val, option) => {
setDoor(option.children);
if (option.url) {
checkUrl(option.url) ? setResUrl(`${checkUrl(option.url)}.${siteUrl}`) : setResUrl(`${siteUrl}`)
}
return null
}
return (
......@@ -638,9 +602,13 @@ const HandlingInfo: React.FC<HandlingInfoPropsType> = (props) => {
))
}
</Select>
{
getSelectMallStoreUrl()
}
{resUrl && (
<div className={styles.shop_url}>
<span>当前{door}链接:</span>
<label>{resUrl}</label>
<CopyOutlined className={styles.copy_icon} onClick={() => handleCopyLinke(resUrl)} />
</div>
)}
</Form.Item>
</TabPane>
<TabPane tab='SEO' key='2' forceRender>
......
src/pages/home/components/Centers/ProductCenter.tsx
View file @ 3f589a5d
......@@ -46,7 +46,7 @@ const ProductCenter: React.FC<Iprops> = () => {
"商品总数": "",
"品牌总数": "",
"待提交审核商品": "statusList=1",
"待上架商品": "statusList=2",
"待上架商品": "statusList=4",
"待提交审核品牌": "status=1",
}
return status
......
src/pages/logistics/logisticsInfo/index.tsx
View file @ 3f589a5d
......@@ -82,7 +82,7 @@ const LogisticsInfo: React.FC<LogisticsInfoPropsType> = (props) => {
const fetchAllShop = () => {
const param: any = {
siteId,
type: 1
type: 7
}
PublicApi.getManageShopFindShopsBySiteId(param).then(res => {
if (res.code === 1000) {
......@@ -352,66 +352,7 @@ const LogisticsInfo: React.FC<LogisticsInfoPropsType> = (props) => {
slideshowBOList: result
})
}
/**
const handleMallSelectChange = (mallId: number) => {
setShopId(mallId)
if (!shopInfo) {
return null
}
if (shopInfo.shopId && shopInfo.memberId) {
const resUrl = getMallItemAndSetUrl(mallId)
setStoreUrl(resUrl)
} else {
setStoreUrl(null)
}
}
const getMallItemAndSetUrl = (mallId) => {
let result = ""
const mallItem = allMallList.filter(item => item.id === mallId)[0]
if (!mallItem) {
return ""
}
if (mallItem.environment === 1) {
let newSiteUrl = siteUrl
if (newSiteUrl.indexOf('http') < 0) {
newSiteUrl = `http://` + newSiteUrl
}
switch (mallItem.type) {
case 1:
result = `${newSiteUrl}/shop?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId, roleId: shopInfo.roleId }))}`
break
case 2:
result = `${newSiteUrl}/shop/pointsMall?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId, roleId: shopInfo.roleId }))}`
break
default:
result = ""
break
}
} else {
result = ""
}
return result
}
const getSelectMallStoreUrl = () => {
if (!shopInfo) {
return null
}
if (shopId && shopInfo.memberId) {
const resUrl = getMallItemAndSetUrl(shopId)
return resUrl ? (
<div className={styles.shop_url}>
<span>当前店铺链接：</span>
<label>{resUrl}</label>
<CopyOutlined className={styles.copy_icon} onClick={() => handleCopyLinke(resUrl)} />
</div>
) : null
}
return null
}
*/
const handleFormValueChange = () => {
setFormIsHalfFilledOut(true)
}
......
src/pages/member/memberWarning/dashboard/components/AfterSoldEvaluation/index.tsx
View file @ 3f589a5d
......@@ -39,7 +39,7 @@ const AfterSoldEvaluation = () => {
{
data.map((_item) => {
return (
<div style={{marginBottom: '48px'}}>
<div style={{marginBottom: '48px'}} key={_item.title}>
<PercentChart data={_item.value} title={_item.title} />
</div>
)
......
src/pages/member/memberWarning/dashboard/components/AnnotationArc/annotationArc.tsx
View file @ 3f589a5d
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useMemo } from 'react';
import {
Chart,
Area,
......@@ -16,9 +16,8 @@ registerShape('point', 'pointer', {
draw(cfg, container) {
const group = container.addGroup();
console.log(cfg.y)
const center = this.parsePoint({ x: 0, y: 0 }); // 获取极坐标系下画布中心点
const start = this.parsePoint({ x: 0, y: 0.5 }); // 获取极坐标系下起始点
// const start = this.parsePoint({ x: 0, y: 0.5 }); // 获取极坐标系下起始点
// 绘制指针
const line = group.addShape('line', {
attrs: {
......@@ -41,31 +40,10 @@ registerShape('point', 'pointer', {
fill: '#fff',
},
});
const preAngle = this.preAngle || 0;
const angle1 = Math.atan((start.y - center.y) / (start.x - center.x));
const angle = (Math.PI - 2 * (angle1)) * cfg.points[0].x;
if (group.cfg.animable) {
group.animate((ratio) => {
group.resetMatrix();
group.rotateAtPoint(center.x, center.y, preAngle + (angle - preAngle) * ratio);
}, 300);
} else {
group.rotateAtPoint(center.x, center.y, angle);
}
this.preAngle = angle;
return group;
},
});
// registerAnimation('cust-animation', (shape) => {
// console.log('cust-animation', shape)
// })
const scale = {
value: {
min: 0,
......@@ -75,15 +53,35 @@ const scale = {
}
}
const AnnotationArc = () => {
const [data, setData] = useState([{ value: 0.56 }]);
useEffect(() => {
setTimeout(() => {
setData([{ value: 0.20 }])
setData([{ value: 0.9 }])
}, 1000)
}, [])
const steps = useMemo(() => {
return [
{
color: '#1fBF87',
start: 0
},
{
color: '#A0D911',
start: 0.5
},
{
color: '#F7A128',
start: 0.75
},
{
color: '#e05a55',
start: 1
}
]
}, [])
return (
<Chart
height={255}
......@@ -110,44 +108,23 @@ const AnnotationArc = () => {
position="value*1"
color="#1890FF"
shape="pointer"
/>
<Annotation.Arc
start={[0, 1]}
end={[1, 1]}
style={{
stroke: '#1fBF87',
lineWidth: 18,
lineDash: null,
}}
/>
<Annotation.Arc
start={[0.25, 1]}
end={[1, 1]}
style={{
stroke: '#A0D911',
lineWidth: 18,
lineDash: null,
}}
/>
<Annotation.Arc
start={[0.5, 1]}
end={[1, 1]}
style={{
stroke: '#F7A128',
lineWidth: 18,
lineDash: null,
}}
/>
<Annotation.Arc
start={[0.75, 1]}
end={[1, 1]}
style={{
stroke: '#e05a55',
lineWidth: 18,
lineDash: null,
}}
/>
{
steps.map((_item, key) => {
return (
<Annotation.Arc
key={key}
start={[_item.start, 1]}
end={[1, 1]}
style={{
stroke: _item.color,
lineWidth: 18,
lineDash: null,
}}
/>
)
})
}
</Chart>
)
}
......
src/pages/member/memberWarning/dashboard/components/AnnotationArc/container.tsx
View file @ 3f589a5d
......@@ -6,7 +6,7 @@ import styles from './index.less'
const DashboardContainer = () => {
return (
<CustomizeCard title="单笔订单金额超出单次合作金额" bodyStyle={{height: '312px', padding: '0'}}>
<CustomizeCard title="单笔订单金额超出单次合作金额" bodyStyle={{minHeight: '312px', padding: '0'}}>
<div className={styles.section}>
<AnnotationArc />
<div className={styles.tips}>
......
src/pages/member/memberWarning/dashboard/components/Contract/index.less → src/pages/member/memberWarning/dashboard/components/CircleChart/index.less
View file @ 3f589a5d
......@@ -16,28 +16,4 @@
}
.renderItem {
display: flex;
flex-direction: row;
.range {
font-size: 12px;
color: #5c626a;
padding-right: 8px;
border-right: 1px solid #EBECF0;
}
.dataInfo {
margin-left: 8px;
.percent {
color: #91959B;
font-size: 12px;
margin-right: 8px;
}
.count {
color: #5C626A;
font-size: 12px;
}
}
}
src/pages/member/memberWarning/dashboard/components/CircleChart/index.tsx 0 → 100644
View file @ 3f589a5d
import React from 'react';
import CustomizeCard from '../CustomizeCard';
import CommonDonutChart from '../DonutChart';
import StatusLabel from '../StatusLabel';
import styles from './index.less';
import cx from 'classnames';
interface Iprops {
title: string,
options: {
label: string,
render: () => React.ReactNode
}[]
}
const CircleChart: React.FC<Iprops> = (props: Iprops) => {
const { title, options } = props;
return (
<CustomizeCard
title={title}
bodyStyle={{height: '312px', padding: '0'}}
>
<div className={styles.container}>
<div className={styles.sectionItem}>
<CommonDonutChart />
</div>
<div className={cx(styles.sectionItem, styles.labelSection)}>
<StatusLabel direction={"column"} options={options} type="circle"/>
</div>
</div>
</CustomizeCard>
)
}
export default CircleChart
src/pages/member/memberWarning/dashboard/components/Contract/purchaseContractExpire.tsx 0 → 100644
View file @ 3f589a5d
import React from 'react';
import StatusLabel from '../StatusLabel';
import CircleChart from '../CircleChart';
const Item = StatusLabel.Item;
const PurchaseContractExpire = () => {
const options = [
{
label: '30天',
render: () => {
return <Item percent={'30%'} value={12} range={"30天"} />
}
},
{
label: '15天',
render: () => {
return <Item percent={'30%'} value={8} range={"15天"} />
}
},
{
label: '7天',
render: () => {
return <Item percent={'30%'} value={5} range={"7天"} />
}
},
{
label: '3天',
render: () => {
return <Item percent={'30%'} value={4} range={"3天"} />
}
},
{
label: '1天',
render: () => {
return <Item percent={'30%'} value={3} range={"1天"} />
}
},
{
label: '已过期',
render: () => {
return <Item percent={'30%'} value={3} range={"已过期"} />
}
}
]
return (
<CircleChart title="采购合同到期" options={options} />
)
}
export default PurchaseContractExpire
src/pages/member/memberWarning/dashboard/components/Contract/ContractPrice.tsx → src/pages/member/memberWarning/dashboard/components/Contract/purchaseContractPrice.tsx
View file @ 3f589a5d
import React from 'react';
import CustomizeCard from '../CustomizeCard';
import CommonDonutChart from '../DonutChart';
import StatusLabel from '../StatusLabel';
import styles from './index.less';
import cx from 'classnames';
import CircleChart from '../CircleChart';
const Item = StatusLabel.Item;
const ContractPrice = () => {
const renderItem = (data: { percent: string, range: string, value: number }) => {
return (
<div className={styles.renderItem}>
<span className={styles.range}>{data.range}</span>
<div className={styles.dataInfo}>
<span className={styles.percent}>36%</span>
<span className={styles.count}>12</span>
</div>
</div>
)
}
const options = [
{
label: '90%-100%',
render: () => {
return renderItem({ percent: '36%', value: 12, range: "90% - 100%" })
return <Item percent={'30%'} value={12} range={"90% - 100%"} />
}
},
{
label: '80%-89%',
render: () => {
return renderItem({ percent: '36%', value: 12, range: "90% - 100%" })
return <Item percent={'30%'} value={12} range={"90% - 100%"} />
}
},
{
label: '70%-79%',
render: () => {
return renderItem({ percent: '36%', value: 12, range: "90% - 100%" })
return <Item percent={'30%'} value={12} range={"90% - 100%"} />
}
}
]
return (
<CustomizeCard
title="采购合同执行金额"
bodyStyle={{height: '312px', padding: '0'}}
>
<div className={styles.container}>
<div className={styles.sectionItem}>
<CommonDonutChart />
</div>
<div className={cx(styles.sectionItem, styles.labelSection)}>
<StatusLabel direction={"column"} options={options} type="circle"/>
</div>
</div>
</CustomizeCard>
<CircleChart title="采购合同执行金额" options={options} />
)
}
......
src/pages/member/memberWarning/dashboard/components/CustomizeCard/index.less
View file @ 3f589a5d
......@@ -16,6 +16,16 @@
line-height: 16px;
color: #252D37;
font-weight: 600;
.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.extra {
overflow: hidden;
}
}
.body {
......
src/pages/member/memberWarning/dashboard/components/DocExpire/index.tsx 0 → 100644
View file @ 3f589a5d
import React from 'react';
import StatusLabel from '../StatusLabel';
import CircleChart from '../CircleChart';
const Item = StatusLabel.Item;
const DocExpire = () => {
const options = [
{
label: '30天',
render: () => {
return <Item percent={'30%'} value={12} range={"30天"} />
}
},
{
label: '15天',
render: () => {
return <Item percent={'30%'} value={8} range={"15天"} />
}
},
{
label: '7天',
render: () => {
return <Item percent={'30%'} value={5} range={"7天"} />
}
},
{
label: '3天',
render: () => {
return <Item percent={'30%'} value={4} range={"3天"} />
}
},
{
label: '1天',
render: () => {
return <Item percent={'30%'} value={3} range={"1天"} />
}
},
{
label: '已过期',
render: () => {
return <Item percent={'30%'} value={3} range={"已过期"} />
}
}
]
return (
<CircleChart title="资质文件到期" options={options} />
)
}
export default DocExpire;
src/pages/member/memberWarning/dashboard/components/MemberEvaluateScore/container.tsx
View file @ 3f589a5d
import React, { useMemo } from 'react';
import CustomizeCard from '../CustomizeCard';
import StatusLabel from '../StatusLabel';
import styles from './index.less'
import Chart from './Chart'
import Chart from './scoreChart'
const MemberEvaluateScoreContainer = () => {
const options = [
......
src/pages/member/memberWarning/dashboard/components/MemberEvaluateScore/Chart.tsx → src/pages/member/memberWarning/dashboard/components/MemberEvaluateScore/scoreChart.tsx
View file @ 3f589a5d
......@@ -28,10 +28,9 @@ function Labelline() {
},
};
return (
<Chart height={300} data={data} scale={cols} autoFit>
<Legend visible={false} /> /
<Chart height={300} padding={[16, 16]} data={data} scale={cols} autoFit>
<Legend visible={false} />
<Coordinate type="theta" radius={0.75} />
<Tooltip showTitle={false} />
<Axis visible={false} />
......
src/pages/member/memberWarning/dashboard/components/OverVIew/OverView.tsx
View file @ 3f589a5d
......@@ -38,7 +38,6 @@ const OverView = () => {
}
];
return (
<>
{
......
src/pages/member/memberWarning/dashboard/components/Record/recordList.tsx
View file @ 3f589a5d
import React from 'react';
import RecordItem from './recordItem';
type RecordItemType = React.ComponentProps<typeof RecordItem>
interface Iprops {
height: number,
dataSource: RecordItemType[]
}
const RecordList = (props: Iprops) => {
const { height } = props;
const { height, dataSource } = props;
return (
<div style={{height: `${height}px`, overflowY: 'scroll', margin: '8px 0 16px 16px'}}>
{
[1,2,3,4,5,6,7,8,9,10,11].map((_item) => {
dataSource?.map((_item, key) => {
return (
<div key={_item} style={{marginBottom: '24px'}}>
<div key={key} style={{marginBottom: '24px'}}>
<RecordItem type="danger" alert="合同到期" content="江南皮革厂倒闭了" />
</div>
)
......
src/pages/member/memberWarning/dashboard/components/StatusLabel/index.less
View file @ 3f589a5d
......@@ -16,6 +16,12 @@
.item {
margin-right: @margin-md;
text-overflow: ellipsis;
white-space: nowrap;
// overflow: hidden;
}
.last {
margin-right: 0;
}
}
......@@ -25,6 +31,9 @@
.item {
margin-bottom: @margin-md;
}
.last {
margin-bottom: 0;
}
}
.circle {
......@@ -42,3 +51,29 @@
display: inline-block;
margin-right: @margin-sm;
}
.renderItem {
display: flex;
flex-direction: row;
.range {
font-size: 12px;
color: #0a0b0c;
padding-right: 8px;
border-right: 1px solid #EBECF0;
}
.dataInfo {
margin-left: 8px;
.percent {
color: #91959B;
font-size: 12px;
margin-right: 8px;
}
.count {
color: #5C626A;
font-size: 12px;
}
}
}
src/pages/member/memberWarning/dashboard/components/StatusLabel/index.tsx
View file @ 3f589a5d
......@@ -14,9 +14,9 @@ interface Iprops {
options: Options[]
}
const colors = ["#1fbf87", "#4b8bfa", "#5d7092", "#f7a12b", "#e05a55", "#fff", "#000"]
const colors = ["#1fbf87", "#4b8bfa", "#5d7092", "#f7a12b", "#e05a55", "#000", "#000"]
const StatusLabel: React.FC<Iprops> = (props: Iprops) => {
const StatusLabel: React.FC<Iprops> & { Item: typeof Item } = (props: Iprops) => {
const { direction, type, options } = props;
const containerCx = cx(styles.container, styles[direction])
return (
......@@ -24,9 +24,9 @@ const StatusLabel: React.FC<Iprops> = (props: Iprops) => {
{
options.map((_item, index) => {
return (
<div className={styles.item} key={index}>
<span className={cx(styles[type])} style={_item.color ? {background: _item.color} : {background: colors[index] || '#fff'}}></span>
<span>{_item.render?.() || _item.label}</span>
<div className={cx(styles.item, { [styles.last]: index + 1 === options.length })} key={index}>
<div className={cx(styles[type])} style={_item.color ? {background: _item.color} : {background: colors[index] || '#fff'}}></div>
<div>{_item.render?.() || _item.label}</div>
</div>
)
})
......@@ -35,6 +35,26 @@ const StatusLabel: React.FC<Iprops> = (props: Iprops) => {
)
}
interface ItemProps {
percent: string,
range: string,
value: number
}
const Item: React.FC<ItemProps> = (props: ItemProps) => {
return (
<div className={styles.renderItem}>
<span className={styles.range}>{props.range}</span>
<div className={styles.dataInfo}>
<span className={styles.percent}>{props.percent}</span>
<span className={styles.count}>{props.value}</span>
</div>
</div>
)
}
StatusLabel.Item = Item;
StatusLabel.defaultProps = {
direction: "row",
type: 'square'
......
src/pages/member/memberWarning/dashboard/components/WarningProject/index.tsx 0 → 100644
View file @ 3f589a5d
import React from 'react';
import CustomizeCard from '../CustomizeCard';
import { Row, Col } from 'antd';
import ProjectItem from './projectItem';
type ProjectItemType = React.ComponentProps<typeof ProjectItem>
interface Iprops {
dataSource: ProjectItemType[]
}
const WarningProject: React.FC<Iprops> = (props: Iprops) => {
const { dataSource } = props;
return (
<CustomizeCard title="预警项目">
<Row gutter={[8, 8]}>
{
dataSource?.map((_item) => {
return (
<Col span={12} key={`${_item.name}-${_item.count}`}>
<ProjectItem name={"合同到期"} count={3} />
</Col>
)
})
}
</Row>
</CustomizeCard>
)
}
export default WarningProject
src/pages/member/memberWarning/dashboard/components/ProjectItem/index.tsx → src/pages/member/memberWarning/dashboard/components/WarningProject/projectItem.tsx
View file @ 3f589a5d
import React from 'react';
import styles from './index.less';
import styles from './projectItem.less';
const ProjectItem = () => {
interface Iprops {
name: string,
count: number
}
const ProjectItem: React.FC<Iprops> = (props: Iprops) => {
const { name, count } = props;
return (
<div className={styles.container}>
<span className={styles.count}>3</span>
......
src/pages/member/memberWarning/dashboard/index.tsx
View file @ 3f589a5d
......@@ -4,16 +4,18 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { OverView } from './components/OverVIew';
import { RecordList } from './components/Record';
import WarningArea from './components/WarningArea';
import ProjectItem from './components/ProjectItem';
// import AnnotationArc from './components/AnnotationArc';
import CustomizeCard from './components/CustomizeCard';
import AnnotationArc from './components/AnnotationArc';
import MemberEvaluateScoreContainer from './components/MemberEvaluateScore/container';
import Suggestion from './components/Suggestion';
import ContractPrice from './components/Contract/ContractPrice';
import ContractPrice from './components/Contract/purchaseContractPrice';
import TimelyDeliveryRate from './components/TimelyDeliveryRate';
import AfterServiceRate from './components/AfterServiceRate';
import AfterSoldEvaluation from './components/AfterSoldEvaluation';
import WarningProject from './components/WarningProject';
import PurchaseContractExpire from './components/Contract/purchaseContractExpire';
import DocExpire from './components/DocExpire'
const Dashboard = () => {
return (
......@@ -22,60 +24,45 @@ const Dashboard = () => {
>
<Row gutter={[16,16]}>
<OverView />
<Col xxl={6} lg={6} md={6} sm={24}>
<Col xxl={6} lg={6} md={24} sm={24}>
<CustomizeCard title="今日预警记录" bodyStyle={{padding: '0', height: '408px'}} >
<RecordList height={384} />
<RecordList dataSource={[]} height={384} />
</CustomizeCard>
</Col>
<Col xxl={12} lg={18} md={18} sm={24}>
<Col xxl={12} lg={18} md={24} sm={24}>
<WarningArea />
</Col>
<Col xxl={6} lg={6} md={6} sm={24}>
<CustomizeCard title="预警项目" headStyle={{color: 'red'}} bodyStyle={{height: '408px'}}>
<Row gutter={[16, 16]}>
<Col span={12}>
<ProjectItem />
</Col>
<Col span={12}>
<ProjectItem />
</Col>
<Col span={12}>
<ProjectItem />
</Col>
<Col span={12}>
<ProjectItem />
</Col>
</Row>
</CustomizeCard>
<Col xxl={6} lg={6} md={10} sm={24}>
<WarningProject dataSource={[]} />
</Col>
<Col span={8}>
<Col xxl={8} lg={9} md={14}>
<AnnotationArc />
</Col>
<Col span={8}>
<Col xxl={8} lg={9} md={24}>
<MemberEvaluateScoreContainer />
</Col>
<Col span={8}>
<Col xxl={8} lg={12} md={24}>
<Suggestion />
</Col>
<Col span={8}>
<Col xxl={8} lg={12} md={24}>
<ContractPrice />
</Col>
<Col span={8}>
<ContractPrice />
<Col xxl={8} lg={12} md={24}>
<PurchaseContractExpire />
</Col>
<Col span={8}>
<ContractPrice />
<Col xxl={8} lg={12} md={24}>
<DocExpire />
</Col>
<Col span={12}>
<Col xxl={12} lg={12} md={24}>
<TimelyDeliveryRate />
</Col>
<Col span={12}>
<Col xxl={12} lg={12} md={24}>
<AfterServiceRate />
</Col>
<Col span={16}>
<Col xxl={16} lg={16} md={24}>
<AfterSoldEvaluation />
</Col>
<Col span={8}>
<Col xxl={8} lg={8} md={24}>
<MemberEvaluateScoreContainer />
</Col>
</Row>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment