8.10 首页基本完成

src/pages/MonitorScreen/Home/index.tsx

@@ -1,9 +1,13 @@
 import { Col, Descriptions, Radio, Row, Table } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import './style.less';
+import './china'
 import * as echarts from 'echarts';
 import warn_icon_01 from '@/assets/screen/warn_icon_01.png'
 import warn_icon_02 from '@/assets/screen/warn_icon_02.png'
+import crown_01 from '@/assets/screen/crown_01.png'
+import crown_02 from '@/assets/screen/crown_02.png'
+import crown_03 from '@/assets/screen/crown_03.png'
 import moment from 'moment';
 
 const onCell = (_: any, rowIndex: any) => ({ className: rowIndex % 2 == 0 ? "screen-table-odd-content" : "screen-table-even-content", });
@@ -139,11 +143,17 @@ const dataSource = [
 const GraphChart = (props: { type: string }) => {
     const { type } = props;
     const random = Math.random().toString();
+    /**
+         * 地图数据
+        */
+    const randomData = () => {
+        return Math.round(Math.random() * 1000);
+    }
     useEffect(() => {
         type EChartsOption = echarts.EChartsOption;
         const chartDom = document.getElementById(random)!;
         const myChart = echarts.init(chartDom);
-        const categoryOption: any = {
+        const categoryOption: EChartsOption = {
             legend: { top: '3%', textStyle: { color: '#fff' } },
             tooltip: {},
             grid: { left: '8%', right: '4%', top: '16%', bottom: 60 },
@@ -164,7 +174,7 @@ const GraphChart = (props: { type: string }) => {
             // to a column of dataset.source by default.
             series: [{ type: 'bar' }, { type: 'bar' }]
         };
-        const pieOption: any = {
+        const pieOption: EChartsOption = {
             legend: {
                 orient: 'vertical',
                 right: '3%',
@@ -188,7 +198,6 @@ const GraphChart = (props: { type: string }) => {
                     type: 'pie',
                     radius: ['44%', '77%'],
                     center: ['15%', '45%'],
-                    // No encode specified, by default, it is 'today'.
                     label: {
                         show: false,
                         position: 'center'
@@ -196,10 +205,14 @@ const GraphChart = (props: { type: string }) => {
                     emphasis: {
                         label: {
                             show: true,
-                            fontSize: 24,
+                            fontSize: '20px',
                             fontWeight: 'bold',
                             color: '#fff'
                         }
+                    },
+                    encode: {
+                        itemName: 'product',
+                        value: 'today'
                     }
                 },
                 {
@@ -213,7 +226,7 @@ const GraphChart = (props: { type: string }) => {
                     emphasis: {
                         label: {
                             show: true,
-                            fontSize: 24,
+                            fontSize: '20px',
                             fontWeight: 'bold',
                             color: '#fff'
                         }
@@ -246,27 +259,115 @@ const GraphChart = (props: { type: string }) => {
                 }
             ]
         };
+        const mapOption: EChartsOption = {
+            tooltip: {
+                trigger: 'item',
+                showDelay: 0,
+                transitionDuration: 0.2,
+                padding: [5, 10],
+                formatter: (params: any) => {
+                    return `<div style="display:flex;justify-content:flex-start;align-items:center;font-weight:600">
+                                <div style="width:8px;height:8px;border-radius:8px;background:#FFCC00;margin-right:8px"></div>${params.data.name}
+                            </div>
+                            <div style="margin-top:8px;margin-left:16px;">
+                                评标室间数：${params.data.value}
+                            </div>
+                            <div style="margin-top:8px;margin-left:16px;">
+                                正在评标：${params.data.value}
+                            </div>
+                            <div style="margin-top:8px;margin-left:16px;">
+                                评标专家：${params.data.value}
+                            </div>
+                            <div style="margin-top:8px;margin-left:16px;">
+                                累计评标次数：${params.data.value}
+                            </div>`
+                }
+            },
+            visualMap: {
+                show: false,
+                min: 0,
+                max: 1000,
+                inRange: {
+                    color: [
+                        '#ECF3F4',
+                        '#E3F4FF',
+                        '#D1ECFD',
+                        '#A0D6F8',
+                        '#5DCAF2',
+                        '#09A6F7',
+                        '#0081C4',
+                        '#26519E',
+                        '#052D74',
+                        '#001F53',
+                    ]
+                },
+            },
+            series: [
+                {
+                    name: '累计评标次数',
+                    type: 'map',
+                    roam: false,
+                    map: 'china',
+                    emphasis: {
+                        label: {
+                            show: false,
+                        },
+                        itemStyle: {
+                            areaColor: '#FFCC00'
+                        }
+                    },
+                    select: {
+                        disabled: true,
+                    },
+                    data: [
+                        { name: "上海", value: randomData() },
+                        { name: "北京", value: 200 },
+                        { name: "天津", value: randomData() },
+                        { name: "重庆", value: randomData() },
+                        { name: "河北", value: randomData() },
+                        { name: "河南", value: randomData() },
+                        { name: "云南", value: randomData() },
+                        { name: "辽宁", value: randomData() },
+                        { name: "黑龙江", value: randomData() },
+                        { name: "湖南", value: randomData() },
+                        { name: "安徽", value: randomData() },
+                        { name: "山东", value: randomData() },
+                        { name: "新疆", value: randomData() },
+                        { name: "江苏", value: randomData() },
+                        { name: "浙江", value: randomData() },
+                        { name: "江西", value: randomData() },
+                        { name: "湖北", value: randomData() },
+                        { name: "广西", value: randomData() },
+                        { name: "甘肃", value: randomData() },
+                        { name: "山西", value: randomData() },
+                        { name: "内蒙古", value: randomData() },
+                        { name: "陕西", value: randomData() },
+                        { name: "吉林", value: randomData() },
+                        { name: "福建", value: randomData() },
+                        { name: "贵州", value: randomData() },
+                        { name: "广东", value: randomData() },
+                        { name: "青海", value: randomData() },
+                        { name: "西藏", value: randomData() },
+                        { name: "四川", value: randomData() },
+                        { name: "宁夏", value: randomData() },
+                        { name: "海南", value: randomData() },
+                        { name: "台湾", value: randomData() },
+                        { name: "香港", value: randomData() },
+                        { name: "澳门", value: randomData() },
+                        { name: "南海诸岛", value: randomData() }
+                    ]
+                }
+            ]
+        };
 
-        const option: EChartsOption = type == "pie" ? pieOption : categoryOption;
+        const option: EChartsOption = type == "pie" ? pieOption : type == "map" ? mapOption : categoryOption;
         myChart.setOption(option);
     }, [])
     return (
-        <div id={random} style={{ width: '100%', height: '100%' }}></div>
+        <div id={random} style={{ width: '100%', height: '100%', zIndex: 99 }}></div>
     )
 }
 
-export default () => {
-    const [time, setTime] = useState<string>('');
-    useEffect(() => {
-
-        const interval = setInterval(function () {
-            const date = moment().format("YYYY-MM-DD HH:mm:ss");
-            setTime(date);
-        }, 1000);
-        return () => {
-            clearInterval(interval)
-        };
-    }, [])
 //异常预警
 const EarlyWarn = ({ img, name, num }: { img: string, name: string, num: string | number }) => {
     return (
@@ -279,6 +380,28 @@ export default () => {
         </div>
     )
 }
+
+export default () => {
+    const [time, setTime] = useState<string>('');
+    const categoryChart = useMemo(() => {
+        return <GraphChart type="category" />
+    }, [])
+    const pieChart = useMemo(() => {
+        return <GraphChart type="pie" />
+    }, [])
+    const mapChart = useMemo(() => {
+        return <GraphChart type="map" />
+    }, [])
+    useEffect(() => {
+        const interval = setInterval(function () {
+            const date = moment().format("YYYY-MM-DD HH:mm:ss");
+            setTime(date);
+        }, 1000);
+        return () => {
+            clearInterval(interval)
+        };
+    }, [])
+
     return (
         <div className="screen-bg">
             <div className='top-block'>
@@ -287,7 +410,7 @@ export default () => {
                 <Row>
                     <Col span={6}>
                         <div className='top-left'>
-                            <span>当前时间：2022-07-14 07:00:00</span>
+                            {/* <span>当前时间：2022-07-14 07:00:00</span> */}
                         </div>
                     </Col>
                     <Col span={12}>
@@ -310,7 +433,7 @@ export default () => {
                                 <div className='card-title'>
                                     <span>今日评标专家数量</span>
                                 </div>
-                                <GraphChart type="category" />
+                                {categoryChart}
                             </div>
                             <div className='screen-card screen-top8'>
                                 <div className='card-title'>
@@ -328,7 +451,25 @@ export default () => {
                         <Col span={16} className='screen-left4 screen-right4'>
                             <div className='middle-c'>
                                 <div className='map-bg'>
-                                    大屏地图
+                                    {mapChart}
+                                    <div className='map-total-num'>
+                                        <span>当前全国评标数量：50</span>
+                                    </div>
+                                    <div className='map-grand'>
+                                        <div className='map-grand-title'>累计评标</div>
+                                        <div>
+                                            <img src={crown_01} className='map-grand-img' />
+                                            <span>北京：100</span>
+                                        </div>
+                                        <div className='map-grand-content'>
+                                            <img src={crown_02} className='map-grand-img' />
+                                            <span>浙江：90</span>
+                                        </div>
+                                        <div className='map-grand-content'>
+                                            <img src={crown_03} className='map-grand-img' />
+                                            <span>辽宁：80</span>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </Col>
@@ -344,7 +485,7 @@ export default () => {
                                     </Radio.Group>
                                 </div>
                                 <div className='screen-graph-chart'>
-                                    <GraphChart type="pie" />
+                                    {pieChart}
                                 </div>
                                 <div className='screen-graph-end'>
                                     <span>&gt;&gt;项目列表</span>

src/pages/MonitorScreen/Home/style.less

@@ -121,6 +121,28 @@
             width: 30%;
             text-align: center;
         }
+
+        .ant-radio-button-wrapper:first-child {
+            border-radius: 4px 0 0 4px;
+        }
+
+        .ant-radio-button-wrapper:last-child {
+            border-radius: 0 4px 4px 0;
+        }
+
+        .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+            color: #fff;
+            background: #72c1db;
+            border-color: #72c1db;
+        }
+
+        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
+            background-color: #72c1db;
+        }
+
+        .ant-radio-button-wrapper {
+            color: #72c1db;
+        }
     }
 
     .screen-graph-chart {
@@ -129,14 +151,6 @@
 
     .screen-graph-end {
         color: #2cdbf5;
-        // display: flex;
-        // justify-content: flex-end;
-
-        // &>span {
-        //     width: 9%;
-        //     position: relative;
-        //     top: -6px;
-        // }
         position: absolute;
         right: 4%;
         bottom: 2px;
@@ -225,7 +239,54 @@
         padding: 1rem;
         border-radius: 4px;
         box-shadow: 0 0 3rem rgba(100, 200, 255, .5) inset;
-        background: rgba(0, 0, 0, 0);
+        background: rgba(255, 255, 255, 0.15);
         box-sizing: border-box;
+
+        .map-total-num {
+            color: #9cf040;
+            font-size: 1rem;
+            line-height: 1rem;
+            position: absolute;
+            left: 2rem;
+            top: 2rem;
+        }
+
+        .map-grand {
+            position: absolute;
+            right: 2rem;
+            bottom: 2rem;
+
+            .map-grand-title {
+                color: #2bddf4;
+                font-size: 1rem;
+                line-height: 1rem;
+                padding-left: 0.75rem;
+                margin-bottom: 0.75rem;
+
+                &::before {
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    top: 1px;
+                    left: 0;
+                    width: 3px;
+                    height: 16px;
+                    background-color: #2bddf4;
+                }
+            }
+
+            .map-grand-content {
+                margin-top: 0.5rem;
+            }
+
+            .map-grand-img {
+                height: 14px;
+                width: 16px;
+                vertical-align: text-bottom;
+                position: relative;
+                top: -2px;
+                margin-right: 0.5rem;
+            }
+        }
     }
 }