fix: 修改预警工作台兼容低分辨率

config/routes/index.ts

@@ -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/home/components/Centers/ProductCenter.tsx

@@ -46,7 +46,7 @@ const ProductCenter: React.FC<Iprops> = () => {
       "商品总数": "",
       "品牌总数": "",
       "待提交审核商品": "statusList=1",
-      "待上架商品": "statusList=2",
+      "待上架商品": "statusList=4",
       "待提交审核品牌": "status=1",
     }
     return status

src/pages/member/memberWarning/dashboard/components/AfterSoldEvaluation/index.tsx

@@ -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

-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

@@ -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

@@ -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

+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

+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

 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

@@ -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

+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

 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

@@ -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

@@ -38,7 +38,6 @@ const OverView = () => {
     }
   ];
 
-
   return (
     <>
       {

src/pages/member/memberWarning/dashboard/components/Record/recordList.tsx

 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

@@ -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

@@ -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

+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

 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

@@ -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>