9.14 首页饼图修改

src/pages/ElecEvaluation/MonitorScreen/Home/index.tsx

@@ -56,7 +56,7 @@ export const proviceEnum = {
     "001000": "集团"
 }
 function dealWithData() {
-    var geoCoordMap = {
+    let geoCoordMap = {
         长春: [125.35, 43.88, 20],
         沈阳: [123.38, 41.8, 19],
         集团: [116.26, 39.92, 18],
@@ -89,8 +89,8 @@ function dealWithData() {
         合肥: [117.27, 31.86, 10],
         武汉: [114.31, 30.52, 10],
     };
-    var data = [];
+    let data = [];
-    for (var key in geoCoordMap) {
+    for (let key in geoCoordMap) {
         data.push({ name: key, value: geoCoordMap[key] });
     }
     return data;
@@ -152,10 +152,17 @@ export const LocalTime = () => {
         <span>当前时间：{time}</span>
     )
 }
-
+/**
+ * 评标室项目情况-跳转
+ */
 const projectClick = () => {
     history.push("/ElecMonitorScreen/MonitorRoom");
 }
+/**
+ * echarts图表
+ * @param props 
+ * @returns 
+ */
 const GraphChart = (props: { type: string, chartData: any[] }) => {
     const { type, chartData } = props;
     const random = Math.random().toString();
@@ -176,9 +183,9 @@ const GraphChart = (props: { type: string, chartData: any[] }) => {
             // to a column of dataset.source by default.
             series: [{ type: 'bar' }, { type: 'bar' }]
         };
-        var dataValue = dealWithData();
+        let dataValue = dealWithData();
-        var data1 = dataValue.splice(0, 3);
+        let data1 = dataValue.splice(0, 3);
-        var index = 0;
+        let index = 0;
         const autoTooltip = () => {
             const dataLength = data1.length;
             setTimeout(() => {
@@ -202,17 +209,30 @@ const GraphChart = (props: { type: string, chartData: any[] }) => {
                 orient: 'vertical',
                 right: '3%',
                 top: 'middle',
-                textStyle: { color: '#fff' }
+                textStyle: { color: '#fff' },
+                icon: 'circle',
+                formatter: (name) => {
+                    let total = 0; // 用于计算总数
+                    let target; // 遍历拿到数据
+                    for (let i = 0, chartLength = chartData.length; i < chartLength; i++) {
+                        total += chartData[i].value;
+                        if (chartData[i].name == name) {
+                            target = chartData[i].value;
+                        }
+                    }
+                    let v = ((target / total) * 100).toFixed(0);
+                    return `${name} ${target}个，占比${v}%`;
                 },
-            tooltip: {},
+            },
-            dataset: {
+            tooltip: {
-                source: chartData
+                trigger: 'item'
             },
             series: [
                 {
                     type: 'pie',
                     radius: ['40%', '70%'],
-                    center: ['15%', '50%'],
+                    center: ['30%', '50%'],
+                    avoidLabelOverlap: false,
                     label: {
                         show: false,
                         position: 'center'
@@ -225,52 +245,10 @@ const GraphChart = (props: { type: string, chartData: any[] }) => {
                             color: '#fff'
                         }
                     },
-                    encode: {
+                    labelLine: {
-                        itemName: 'product',
+                        show: false
-                        value: 'reserve'
-                    }
                     },
-                {
+                    data: chartData,
-                    type: 'pie',
-                    radius: ['40%', '70%'],
-                    center: ['45%', '50%'],
-                    label: {
-                        show: false,
-                        position: 'center'
-                    },
-                    emphasis: {
-                        label: {
-                            show: true,
-                            fontSize: '20px',
-                            fontWeight: 'bold',
-                            color: '#fff'
-                        }
-                    },
-                    encode: {
-                        itemName: 'product',
-                        value: 'ing'
-                    }
-                },
-                {
-                    type: 'pie',
-                    radius: ['40%', '70%'],
-                    center: ['75%', '50%'],
-                    label: {
-                        show: false,
-                        position: 'center'
-                    },
-                    emphasis: {
-                        label: {
-                            show: true,
-                            fontSize: '20px',
-                            fontWeight: 'bold',
-                            color: '#fff'
-                        }
-                    },
-                    encode: {
-                        itemName: 'product',
-                        value: 'end'
-                    }
                 }
             ]
         };
@@ -418,6 +396,38 @@ export const EarlyWarn = ({ img, name, num }: { img: string, name: string, num:
         </div>
     )
 }
+//饼图数据格式化
+const formatPieData = (data: any[]) => {
+    const list = [{ name: "招标项目", value: Number(data[0].number) + Number(data[1].number) }];//招标项目=公开招标+邀请招标
+    for (const ite of data) {
+        if (method.includes(ite.bidMethod)) {
+            list.push({ name: ite.bidMethod, value: Number(ite.number) });
+        }
+    }
+    var str = list.splice(3, 1);
+    list.push(str[0]);
+    return list;
+}
+//单个饼图
+const PieChart = (props: { data: any[], title: string }) => {
+    const { data, title } = props;
+    const pieChart = useMemo(() => {
+        if (data && data.length > 0) {
+            const pieData = formatPieData(data);
+            return <GraphChart type="pie" chartData={pieData} />
+        }
+        return false;
+    }, [data])
+
+    return (
+        <div className='screen-graph-chart'>
+            {pieChart}
+            <div className="screen-graph-bottom">
+                <span className='screen-graph-title'>{title}</span>
+            </div>
+        </div>
+    );
+}
 
 const randomData = () => Math.round(Math.random() * 100);
 
@@ -431,7 +441,7 @@ export default () => {
     //今日评标专家数量数据
     const [todayExpertNum, setTodayExpertNum] = useState<any[]>([]);
     //评标室应用情况数据
-    const [evalApplData, setEvalApplData] = useState<any[]>([]);
+    const [evalApplData, setEvalApplData] = useState<any>();
     //当前播放的设备参数
     const [cameraParams, setCameraParams] = useState<any>();
     //当月&年转换
@@ -445,9 +455,6 @@ export default () => {
     const categoryChart = useMemo(() => {
         return todayExpertNum.length > 0 && <GraphChart type="category" chartData={todayExpertNum} />
     }, [todayExpertNum])
-    const pieChart = useMemo(() => {
-        return evalApplData.length > 0 && <GraphChart type="pie" chartData={evalApplData} />
-    }, [evalApplData])
     const mapChart = useMemo(() => {
         return centerMapData?.list && <GraphChart type="map" chartData={centerMapData?.list} />
     }, [centerMapData])
@@ -514,58 +521,8 @@ export default () => {
         getApplicationData({ type }).then(res => {
             if (res?.code == 200) {
                 // const data = res?.data;
-                const data = { "type": null, "reserveNumber": [{ "bidMethod": "公开招标", "number": "3" }, { "bidMethod": "邀请招标", "number": randomData() }, { "bidMethod": "公开比选", "number": randomData() }, { "bidMethod": "公开招募", "number": randomData() }, { "bidMethod": "竞争性谈判", "number": randomData() }, { "bidMethod": "单一来源", "number": randomData() }, { "bidMethod": "公开询价", "number": randomData() }, { "bidMethod": "竞拍", "number": randomData() }, { "bidMethod": "单一来源简化流程", "number": randomData() }], "ingNumber": [{ "bidMethod": "公开招标", "number": "1" }, { "bidMethod": "邀请招标", "number": randomData() }, { "bidMethod": "公开比选", "number": randomData() }, { "bidMethod": "公开招募", "number": randomData() }, { "bidMethod": "竞争性谈判", "number": randomData() }, { "bidMethod": "单一来源", "number": randomData() }, { "bidMethod": "公开询价", "number": randomData() }, { "bidMethod": "竞拍", "number": randomData() }, { "bidMethod": "单一来源简化流程", "number": randomData() }], "endNumber": [{ "bidMethod": "公开招标", "number": "1" }, { "bidMethod": "邀请招标", "number": randomData() }, { "bidMethod": "公开比选", "number": randomData() }, { "bidMethod": "公开招募", "number": "1" }, { "bidMethod": "竞争性谈判", "number": "1" }, { "bidMethod": "单一来源", "number": randomData() }, { "bidMethod": "公开询价", "number": randomData() }, { "bidMethod": "竞拍", "number": randomData() }, { "bidMethod": "单一来源简化流程", "number": randomData() }] };
+                const data = { "type": null, "reserveNumber": [{ "bidMethod": "公开招标", "number": "5" }, { "bidMethod": "邀请招标", "number": "2" }, { "bidMethod": "公开比选", "number": "4" }, { "bidMethod": "公开招募", "number": "4" }, { "bidMethod": "竞争性谈判", "number": "6" }, { "bidMethod": "单一来源", "number": "7" }, { "bidMethod": "公开询价", "number": "5" }, { "bidMethod": "竞拍", "number": "3" }, { "bidMethod": "单一来源简化流程", "number": "2" }], "ingNumber": [{ "bidMethod": "公开招标", "number": "1" }, { "bidMethod": "邀请招标", "number": "2" }, { "bidMethod": "公开比选", "number": "3" }, { "bidMethod": "公开招募", "number": "6" }, { "bidMethod": "竞争性谈判", "number": "1" }, { "bidMethod": "单一来源", "number": "5" }, { "bidMethod": "公开询价", "number": "7" }, { "bidMethod": "竞拍", "number": "4" }, { "bidMethod": "单一来源简化流程", "number": "6" }], "endNumber": [{ "bidMethod": "公开招标", "number": "5" }, { "bidMethod": "邀请招标", "number": "4" }, { "bidMethod": "公开比选", "number": "7" }, { "bidMethod": "公开招募", "number": "4" }, { "bidMethod": "竞争性谈判", "number": "6" }, { "bidMethod": "单一来源", "number": "8" }, { "bidMethod": "公开询价", "number": "7" }, { "bidMethod": "竞拍", "number": "5" }, { "bidMethod": "单一来源简化流程", "number": "6" }] }
-                let formatData = [['product', 'reserve', 'ing', 'end'], ['招标项目', String(Number(data.reserveNumber[0].number) + Number(data.reserveNumber[1].number)), String(Number(data.ingNumber[0].number) + Number(data.ingNumber[1].number)), String(Number(data.endNumber[0].number) + Number(data.endNumber[1].number))]];
+                setEvalApplData(data);
-                let comp = ['公开比选'];
-                let inqu = ['公开询价'];
-                let rect = ['公开招募'];
-                let nego = ['竞争性谈判'];
-                let only = ['单一来源'];
-                for (const ite of data.reserveNumber) {
-                    if (ite.bidMethod == method[0]) {
-                        comp.push(ite.number)
-                    } else if (ite.bidMethod == method[1]) {
-                        inqu.push(ite.number)
-                    } else if (ite.bidMethod == method[2]) {
-                        rect.push(ite.number)
-                    } else if (ite.bidMethod == method[3]) {
-                        nego.push(ite.number)
-                    } else if (ite.bidMethod == method[4]) {
-                        only.push(ite.number)
-                    }
-                }
-                for (const ite of data.ingNumber) {
-                    if (ite.bidMethod == method[0]) {
-                        comp.push(ite.number)
-                    } else if (ite.bidMethod == method[1]) {
-                        inqu.push(ite.number)
-                    } else if (ite.bidMethod == method[2]) {
-                        rect.push(ite.number)
-                    } else if (ite.bidMethod == method[3]) {
-                        nego.push(ite.number)
-                    } else if (ite.bidMethod == method[4]) {
-                        only.push(ite.number)
-                    }
-                }
-                for (const ite of data.endNumber) {
-                    if (ite.bidMethod == method[0]) {
-                        comp.push(ite.number)
-                    } else if (ite.bidMethod == method[1]) {
-                        inqu.push(ite.number)
-                    } else if (ite.bidMethod == method[2]) {
-                        rect.push(ite.number)
-                    } else if (ite.bidMethod == method[3]) {
-                        nego.push(ite.number)
-                    } else if (ite.bidMethod == method[4]) {
-                        only.push(ite.number)
-                    }
-                }
-                formatData.push(comp);
-                formatData.push(inqu);
-                formatData.push(rect);
-                formatData.push(nego);
-                formatData.push(only);
-                setEvalApplData(formatData);
             }
         })
     }
@@ -704,22 +661,22 @@ export default () => {
                                     <div className='screen-graph-left-title'>
                                         评标室应用情况统计
                                     </div>
-                                    {evalApplData.length > 0 && <Radio.Group buttonStyle="solid" size='small' value={radioSelect} onChange={onRadioChange}>
+                                    {evalApplData && <Radio.Group buttonStyle="solid" size='small' value={radioSelect} onChange={onRadioChange}>
                                         <Radio.Button value="1">当月</Radio.Button>
                                         <Radio.Button value="2"> 年 </Radio.Button>
                                     </Radio.Group>}
                                 </div>
-                                <div className='screen-graph-chart'>
+                                <div className='screen-graph-chart' style={{ display: 'flex' }}>
-                                    {pieChart}
+                                    <div style={{ flex: 1 }}>
+                                        <PieChart data={evalApplData?.reserveNumber} title="已预约" />
+                                    </div>
+                                    <div style={{ flex: 1 }}>
+                                        <PieChart data={evalApplData?.ingNumber} title="评审中" />
+                                    </div>
+                                    <div style={{ flex: 1 }}>
+                                        <PieChart data={evalApplData?.endNumber} title="评审结束" />
                                     </div>
-                                <div className='screen-graph-bottom'>
-                                    <span className='screen-graph-title'>已预约</span>
-                                    <span className='screen-graph-title'>评审中</span>
-                                    <span className='screen-graph-title'>评审结束</span>
                                 </div>
-                                {/* <div className='screen-graph-end'>
-                                    <span>&gt;&gt;项目列表</span>
-                                </div> */}
                             </div>
                         </Col>
                     </Row>

src/pages/ElecEvaluation/MonitorScreen/Home/style.less

@@ -145,13 +145,13 @@
 
         .screen-graph-title {
             display: inline-block;
-            width: 30%;
+            width: 20%;
             text-align: center;
         }
     }
 
     .screen-graph-chart {
-        height: calc(~"100%");
+        height: 100%;
     }
 
     // .screen-graph-end {