|
|
@@ -20,7 +20,18 @@ const Home: React.FC = () => {
|
|
|
const [barCorpUserData, setBarCorpUserData] = useState<Record<string, any>[]>([])
|
|
|
const [activeKey, setActiveKey] = useState<string>('1')
|
|
|
const [userData, setUserData] = useState<Record<string, any>[]>([])
|
|
|
- const [overflowData, setOverflowData] = useState<{ avgCorpRepeatUserRate: number, repeatUserRate: number, userCount: number }>({ avgCorpRepeatUserRate: 0, repeatUserRate: 0, userCount: 0 })
|
|
|
+ const [overflowData, setOverflowData] = useState<{
|
|
|
+ avgCorpRepeatUserRate: number,
|
|
|
+ repeatUserRate: number,
|
|
|
+ userCount: number,
|
|
|
+ qcUuidCount: number,
|
|
|
+ qcUuidCountRate: number,
|
|
|
+ qcUuidNullCount: number,
|
|
|
+ qcUuidNullCountRate: number,
|
|
|
+ deletedUserCount: number,
|
|
|
+ deletedUserCountRate: number
|
|
|
+ qcUuidUserCount: number
|
|
|
+ }>({ avgCorpRepeatUserRate: 0, repeatUserRate: 0, userCount: 0, qcUuidCount: 0, qcUuidCountRate: 0, qcUuidNullCount: 0, qcUuidNullCountRate: 0, deletedUserCount: 0, deletedUserCountRate: 0, qcUuidUserCount: 0 })
|
|
|
|
|
|
const getExternalUserRepeatCorp = useAjax(() => getExternalUserRepeatCorpApi())
|
|
|
const getExternalUserRepeatCorpUser = useAjax(() => getExternalUserRepeatCorpUserApi())
|
|
|
@@ -60,7 +71,18 @@ const Home: React.FC = () => {
|
|
|
if (res?.data) {
|
|
|
const cur = res.data
|
|
|
setCorpUserRepeat(cur)
|
|
|
- setOverflowData({ avgCorpRepeatUserRate: cur?.avgCorpRepeatUserRate || 0, repeatUserRate: cur?.repeatUserRate || 0, userCount: cur?.userCount || 0 })
|
|
|
+ setOverflowData({
|
|
|
+ avgCorpRepeatUserRate: cur?.avgCorpRepeatUserRate || 0,
|
|
|
+ repeatUserRate: cur?.repeatUserRate || 0,
|
|
|
+ userCount: cur?.userCount || 0,
|
|
|
+ qcUuidCount: cur?.qcUuidCount || 0,
|
|
|
+ qcUuidCountRate: cur?.qcUuidCountRate || 0,
|
|
|
+ qcUuidNullCount: cur?.qcUuidNullCount || 0,
|
|
|
+ qcUuidNullCountRate: cur?.qcUuidNullCountRate || 0,
|
|
|
+ deletedUserCount: cur?.deletedUserCount || 0,
|
|
|
+ deletedUserCountRate: cur?.deletedUserCountRate || 0,
|
|
|
+ qcUuidUserCount: cur?.qcUuidUserCount || 0,
|
|
|
+ })
|
|
|
setBarCorpUserData([
|
|
|
{ name: '仅添加1名客服', '人数': cur?.oneRepeatCount },
|
|
|
{ name: '添加2名客服', '人数': cur?.twoRepeatCount },
|
|
|
@@ -71,7 +93,7 @@ const Home: React.FC = () => {
|
|
|
])
|
|
|
} else {
|
|
|
setCorpUserRepeat({})
|
|
|
- setOverflowData({ avgCorpRepeatUserRate: 0, repeatUserRate: 0, userCount: 0 })
|
|
|
+ setOverflowData({ avgCorpRepeatUserRate: 0, repeatUserRate: 0, userCount: 0, qcUuidCount: 0, qcUuidCountRate: 0, qcUuidNullCount: 0, qcUuidNullCountRate: 0, deletedUserCount: 0, deletedUserCountRate: 0, qcUuidUserCount: 0 })
|
|
|
setBarCorpUserData([])
|
|
|
}
|
|
|
|
|
|
@@ -95,15 +117,40 @@ const Home: React.FC = () => {
|
|
|
<Statistic
|
|
|
title={<strong style={{ fontSize: 14 }}>集团总企微用户数</strong>}
|
|
|
value={overflowData.userCount}
|
|
|
+ style={{ flex: 1 }}
|
|
|
/>
|
|
|
<Avatar style={{ backgroundColor: '#DBEAFE', color: '#2563eb' }} size={40}><UserOutlined /></Avatar>
|
|
|
</Flex>
|
|
|
</Card>
|
|
|
+ <Card variant="borderless" style={{ width: '20%' }}>
|
|
|
+ <Flex justify='space-between'>
|
|
|
+ <Statistic
|
|
|
+ title={<Space>
|
|
|
+ <strong style={{ fontSize: 14 }}>集团跨主体去重企微用户数</strong>
|
|
|
+ <Tooltip title="集团跨主体去重企微用户数=未识别人数+添加1个客服人数+添加多个(>1)客服人数">
|
|
|
+ <QuestionCircleOutlined />
|
|
|
+ </Tooltip>
|
|
|
+ </Space>}
|
|
|
+ style={{ flex: 1 }}
|
|
|
+ value={overflowData.qcUuidUserCount}
|
|
|
+ />
|
|
|
+ <Avatar style={{ backgroundColor: '#fff0f6', color: '#f759ab' }} size={40}><UserOutlined /></Avatar>
|
|
|
+ </Flex>
|
|
|
+ </Card>
|
|
|
<Card variant="borderless" style={{ width: '20%' }}>
|
|
|
<Flex justify='space-between'>
|
|
|
<Statistic
|
|
|
title={<strong style={{ fontSize: 14 }}>已识别用户数</strong>}
|
|
|
- value={0}
|
|
|
+ value={overflowData.qcUuidCount}
|
|
|
+ style={{ flex: 1 }}
|
|
|
+ suffix={<div style={{ display: 'flex' }}>
|
|
|
+ (<Statistic
|
|
|
+ value={overflowData.qcUuidCountRate ? overflowData.qcUuidCountRate * 100 : 0}
|
|
|
+ precision={4}
|
|
|
+ suffix="%"
|
|
|
+ valueStyle={overflowData?.qcUuidCountRate < 0.8 ? { color: '#cf1322' } : { color: '#3f8600' }}
|
|
|
+ />)
|
|
|
+ </div>}
|
|
|
/>
|
|
|
<Avatar style={{ backgroundColor: '#DCFCE7', color: '#16a34a' }} size={40}><CheckOutlined /></Avatar>
|
|
|
</Flex>
|
|
|
@@ -112,7 +159,16 @@ const Home: React.FC = () => {
|
|
|
<Flex justify='space-between'>
|
|
|
<Statistic
|
|
|
title={<strong style={{ fontSize: 14 }}>未识别用户数</strong>}
|
|
|
- value={0}
|
|
|
+ value={overflowData?.qcUuidNullCount}
|
|
|
+ style={{ flex: 1 }}
|
|
|
+ suffix={<div style={{ display: 'flex' }}>
|
|
|
+ (<Statistic
|
|
|
+ value={overflowData.qcUuidNullCountRate ? overflowData.qcUuidNullCountRate * 100 : 0}
|
|
|
+ precision={4}
|
|
|
+ suffix="%"
|
|
|
+ valueStyle={overflowData?.qcUuidNullCountRate > 0.05 ? { color: '#cf1322' } : { color: '#3f8600' }}
|
|
|
+ />)
|
|
|
+ </div>}
|
|
|
/>
|
|
|
<Avatar style={{ backgroundColor: 'rgba(251, 192, 163, 1)', color: '#f50' }} size={40}><ExclamationOutlined /></Avatar>
|
|
|
</Flex>
|
|
|
@@ -121,7 +177,16 @@ const Home: React.FC = () => {
|
|
|
<Flex justify='space-between'>
|
|
|
<Statistic
|
|
|
title={<strong style={{ fontSize: 14 }}>双删用户数</strong>}
|
|
|
- value={0}
|
|
|
+ value={overflowData?.deletedUserCount}
|
|
|
+ style={{ flex: 1 }}
|
|
|
+ suffix={<div style={{ display: 'flex' }}>
|
|
|
+ (<Statistic
|
|
|
+ value={overflowData.deletedUserCountRate ? overflowData.deletedUserCountRate * 100 : 0}
|
|
|
+ precision={4}
|
|
|
+ suffix="%"
|
|
|
+ valueStyle={overflowData?.deletedUserCountRate > 0.4 ? { color: '#cf1322' } : { color: '#3f8600' }}
|
|
|
+ />)
|
|
|
+ </div>}
|
|
|
/>
|
|
|
<Avatar style={{ backgroundColor: '#ffcece', color: '#ff0606' }} size={40}><DeleteOutlined /></Avatar>
|
|
|
</Flex>
|
|
|
@@ -135,6 +200,7 @@ const Home: React.FC = () => {
|
|
|
<QuestionCircleOutlined />
|
|
|
</Tooltip>
|
|
|
</Space>}
|
|
|
+ style={{ flex: 1 }}
|
|
|
value={overflowData.repeatUserRate ? overflowData.repeatUserRate * 100 : 0}
|
|
|
precision={4}
|
|
|
suffix="%"
|
|
|
@@ -213,7 +279,7 @@ const Home: React.FC = () => {
|
|
|
children: <Card>
|
|
|
<Table
|
|
|
columns={CorpExternalUserColumns()}
|
|
|
- scroll={{ y: 300, x: 900 }}
|
|
|
+ scroll={{ y: 300, x: 1000 }}
|
|
|
bordered
|
|
|
dataSource={getCorpExternalUserRepeatList.data?.data?.records}
|
|
|
loading={getCorpExternalUserRepeatList.loading}
|
|
|
@@ -222,9 +288,20 @@ const Home: React.FC = () => {
|
|
|
total: getCorpExternalUserRepeatList.data?.data?.total,
|
|
|
current: getCorpExternalUserRepeatList?.data?.data?.current || 1,
|
|
|
pageSize: getCorpExternalUserRepeatList?.data?.data?.size || 20,
|
|
|
- onChange: (page: number, pageSize: number) => {
|
|
|
- setQueryParmasZt({ ...queryParmasZt, pageNum: page, pageSize })
|
|
|
+ }}
|
|
|
+ onChange={(pagination: any, _: any, sortData: any) => {
|
|
|
+ let { current, pageSize } = pagination
|
|
|
+ let newQueryForm = JSON.parse(JSON.stringify(queryParmasZt))
|
|
|
+ if (sortData && sortData?.order) {
|
|
|
+ newQueryForm['sortType'] = sortData?.order === 'ascend' ? 'ASC' : 'DESC'
|
|
|
+ newQueryForm['orderByField'] = sortData?.field
|
|
|
+ } else {
|
|
|
+ delete newQueryForm['sortType']
|
|
|
+ delete newQueryForm['orderByField']
|
|
|
}
|
|
|
+ newQueryForm.pageNum = current || newQueryForm.pageNum
|
|
|
+ newQueryForm.pageSize = pageSize || newQueryForm.pageSize
|
|
|
+ setQueryParmasZt({ ...newQueryForm })
|
|
|
}}
|
|
|
/>
|
|
|
</Card>
|
|
|
@@ -250,28 +327,51 @@ const Home: React.FC = () => {
|
|
|
</Tooltip>
|
|
|
</Space>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={corpRepeat?.userCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={corpRepeat?.userCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={style.item}>
|
|
|
+ <Space>
|
|
|
+ <span>集团跨主体去重企微用户数</span>
|
|
|
+ <Tooltip title="集团跨主体去重企微用户数=未识别人数+添加1个客服人数+添加多个(>1)客服人数">
|
|
|
+ <QuestionCircleOutlined />
|
|
|
+ </Tooltip>
|
|
|
+ </Space>
|
|
|
+ <div className={style.num}>
|
|
|
+ <Statistic value={corpRepeat?.qcUuidUserCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={style.item}>
|
|
|
- <span>未识别人数</span>
|
|
|
+ <span>未识别用户数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={corpRepeat?.wsbrsCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={corpRepeat?.qcUuidNullCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
+ (<Statistic
|
|
|
+ value={corpRepeat?.qcUuidNullCountRate ? corpRepeat?.qcUuidNullCountRate * 100 : 0}
|
|
|
+ valueStyle={corpRepeat?.qcUuidNullCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
+ suffix="%"
|
|
|
+ precision={4}
|
|
|
+ />)
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={style.item}>
|
|
|
<span>{`用户添加>1主体人数`}</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={corpRepeat?.addDy1ZtCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={corpRepeat?.gtOneRepeatCountTotal || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
+ (<Statistic
|
|
|
+ value={corpRepeat?.gtOneRepeatCountTotalRate ? corpRepeat?.gtOneRepeatCountTotalRate * 100 : 0}
|
|
|
+ valueStyle={corpRepeat?.gtOneRepeatCountTotalRate > 0.2 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
+ suffix="%"
|
|
|
+ precision={4}
|
|
|
+ />)
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={style.item}>
|
|
|
<span>仅添加1个主体人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={corpRepeat?.oneRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={corpRepeat?.oneRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={corpRepeat?.oneRepeatCountRate ? corpRepeat?.oneRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={corpRepeat?.oneRepeatCountRate > 0.5 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={corpRepeat?.oneRepeatCountRate > 0.5 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -280,10 +380,10 @@ const Home: React.FC = () => {
|
|
|
<div className={style.item}>
|
|
|
<span>添加2个主体人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={corpRepeat?.twoRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={corpRepeat?.twoRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={corpRepeat?.twoRepeatCountRate ? corpRepeat?.twoRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={corpRepeat?.twoRepeatCountRate > 0.1 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={corpRepeat?.twoRepeatCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -292,10 +392,10 @@ const Home: React.FC = () => {
|
|
|
<div className={style.item}>
|
|
|
<span>添加3个主体人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={corpRepeat?.threeRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={corpRepeat?.threeRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={corpRepeat?.threeRepeatCountRate ? corpRepeat?.threeRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={corpRepeat?.threeRepeatCountRate > 0.09 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={corpRepeat?.threeRepeatCountRate > 0.09 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -304,10 +404,10 @@ const Home: React.FC = () => {
|
|
|
<div className={style.item}>
|
|
|
<span>添加4个主体人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={corpRepeat?.fourRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={corpRepeat?.fourRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={corpRepeat?.fourRepeatCountRate ? corpRepeat?.fourRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={corpRepeat?.fourRepeatCountRate > 0.08 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={corpRepeat?.fourRepeatCountRate > 0.08 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -316,10 +416,10 @@ const Home: React.FC = () => {
|
|
|
<div className={style.item}>
|
|
|
<span>添加5个主体人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={corpRepeat?.fiveRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={corpRepeat?.fiveRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={corpRepeat?.fiveRepeatCountRate ? corpRepeat?.fiveRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={corpRepeat?.fiveRepeatCountRate > 0.07 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={corpRepeat?.fiveRepeatCountRate > 0.07 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -328,10 +428,10 @@ const Home: React.FC = () => {
|
|
|
<div className={style.item}>
|
|
|
<span>添加5个主体以上人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={corpRepeat?.gtFiveRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={corpRepeat?.gtFiveRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={corpRepeat?.gtFiveRepeatCountRate ? corpRepeat?.gtFiveRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={corpRepeat?.gtFiveRepeatCountRate > 0.06 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={corpRepeat?.gtFiveRepeatCountRate > 0.06 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -373,51 +473,104 @@ const DetailsTemplate: React.FC<{ data: { [x: string]: any }, title: string }> =
|
|
|
<div className={style.item}>
|
|
|
<Space>
|
|
|
<span>粉丝总数</span>
|
|
|
- <Tooltip title="未识别+添加2名+添加多名(>1)">
|
|
|
+ <Tooltip title="未识别+添加1名+添加多名(>1)">
|
|
|
<QuestionCircleOutlined />
|
|
|
</Tooltip>
|
|
|
</Space>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.userCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.userCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={style.item}>
|
|
|
+ <Space>
|
|
|
+ <span>集团跨主体去重企微用户数</span>
|
|
|
+ <Tooltip title="集团跨主体去重企微用户数=未识别人数+添加1个客服人数+添加多个(>1)客服人数">
|
|
|
+ <QuestionCircleOutlined />
|
|
|
+ </Tooltip>
|
|
|
+ </Space>
|
|
|
+ <div className={style.num}>
|
|
|
+ <Statistic value={data?.qcUuidUserCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={style.item}>
|
|
|
<span>未识别用户数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.wsbkfCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.qcUuidNullCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
+ (<Statistic
|
|
|
+ value={data?.qcUuidNullCountRate ? data?.qcUuidNullCountRate * 100 : 0}
|
|
|
+ valueStyle={data?.qcUuidNullCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
+ suffix="%"
|
|
|
+ precision={4}
|
|
|
+ />)
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={style.item}>
|
|
|
<span>已激活集团客服号数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.yjhkf || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.activatedCorpUserCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
+ (<Statistic
|
|
|
+ value={data?.activatedCorpUserCountRate ? data?.activatedCorpUserCountRate * 100 : 0}
|
|
|
+ valueStyle={data?.activatedCorpUserCountRate < 0.6 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
+ suffix="%"
|
|
|
+ precision={4}
|
|
|
+ />)
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className={style.item}>
|
|
|
+ <span>已禁用集团客服号数</span>
|
|
|
+ <div className={style.num}>
|
|
|
+ <Statistic value={data?.disabledCorpUserCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
+ (<Statistic
|
|
|
+ value={data?.disabledCorpUserCountRate ? data?.disabledCorpUserCountRate * 100 : 0}
|
|
|
+ valueStyle={data?.disabledCorpUserCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
+ suffix="%"
|
|
|
+ precision={4}
|
|
|
+ />)
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={style.item}>
|
|
|
<span>退出集团客服号数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.tckf || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.quitCorpUserCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
+ (<Statistic
|
|
|
+ value={data?.quitCorpUserCountRate ? data?.quitCorpUserCountRate * 100 : 0}
|
|
|
+ valueStyle={data?.quitCorpUserCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
+ suffix="%"
|
|
|
+ precision={4}
|
|
|
+ />)
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={style.item}>
|
|
|
<span>未激活集团客服号数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.wjhkf || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.unactivatedCorpUserCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
+ (<Statistic
|
|
|
+ value={data?.unactivatedCorpUserCountRate ? data?.unactivatedCorpUserCountRate * 100 : 0}
|
|
|
+ valueStyle={data?.unactivatedCorpUserCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
+ suffix="%"
|
|
|
+ precision={4}
|
|
|
+ />)
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={style.item}>
|
|
|
<span>{`用户添加>1客服号人数`}</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.addDy1kf || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.gtOneRepeatCountTotal || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
+ (<Statistic
|
|
|
+ value={data?.gtOneRepeatCountTotalRate ? data?.gtOneRepeatCountTotalRate * 100 : 0}
|
|
|
+ valueStyle={data?.gtOneRepeatCountTotalRate > 0.3 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
+ suffix="%"
|
|
|
+ precision={4}
|
|
|
+ />)
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={style.item}>
|
|
|
<span>仅添加1名客服人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.oneRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.oneRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={data?.oneRepeatCountRate ? data?.oneRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={data?.oneRepeatCountRate > 0.5 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={data?.oneRepeatCountRate > 0.5 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -426,10 +579,10 @@ const DetailsTemplate: React.FC<{ data: { [x: string]: any }, title: string }> =
|
|
|
<div className={style.item}>
|
|
|
<span>添加2名客服人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.twoRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.twoRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={data?.twoRepeatCountRate ? data?.twoRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={data?.twoRepeatCountRate > 0.1 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={data?.twoRepeatCountRate > 0.1 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -438,10 +591,10 @@ const DetailsTemplate: React.FC<{ data: { [x: string]: any }, title: string }> =
|
|
|
<div className={style.item}>
|
|
|
<span>添加3名客服人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.threeRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.threeRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={data?.threeRepeatCountRate ? data?.threeRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={data?.threeRepeatCountRate > 0.09 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={data?.threeRepeatCountRate > 0.09 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -450,10 +603,10 @@ const DetailsTemplate: React.FC<{ data: { [x: string]: any }, title: string }> =
|
|
|
<div className={style.item}>
|
|
|
<span>添加4名客服人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.fourRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.fourRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={data?.fourRepeatCountRate ? data?.fourRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={data?.fourRepeatCountRate > 0.08 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={data?.fourRepeatCountRate > 0.08 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -462,10 +615,10 @@ const DetailsTemplate: React.FC<{ data: { [x: string]: any }, title: string }> =
|
|
|
<div className={style.item}>
|
|
|
<span>添加5名客服人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.fiveRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.fiveRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={data?.fiveRepeatCountRate ? data?.fiveRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={data?.fiveRepeatCountRate > 0.07 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={data?.fiveRepeatCountRate > 0.07 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|
|
|
@@ -474,10 +627,10 @@ const DetailsTemplate: React.FC<{ data: { [x: string]: any }, title: string }> =
|
|
|
<div className={style.item}>
|
|
|
<span>添加5名客服以上人数</span>
|
|
|
<div className={style.num}>
|
|
|
- <Statistic value={data?.gtFiveRepeatCount || 0} valueStyle={{ fontSize: 16 }} />
|
|
|
+ <Statistic value={data?.gtFiveRepeatCount || 0} valueStyle={{ fontSize: 14 }} />
|
|
|
(<Statistic
|
|
|
value={data?.gtFiveRepeatCountRate ? data?.gtFiveRepeatCountRate * 100 : 0}
|
|
|
- valueStyle={data?.gtFiveRepeatCountRate > 0.06 ? { color: '#cf1322', fontSize: 16 } : { color: '#3f8600', fontSize: 16 }}
|
|
|
+ valueStyle={data?.gtFiveRepeatCountRate > 0.06 ? { color: '#cf1322', fontSize: 14 } : { color: '#3f8600', fontSize: 14 }}
|
|
|
suffix="%"
|
|
|
precision={4}
|
|
|
/>)
|