From acfec75a182df61d183a1c3d982b83e2c5c18dde Mon Sep 17 00:00:00 2001
From: jl-zhoujl2 <jl-zhoujl2@chinaunicom.cn>
Date: Fri, 30 Dec 2022 19:05:36 +0800
Subject: [PATCH] =?UTF-8?q?12.30=20=E7=AC=AC=E4=B8=83=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Monitor/Exception/index.tsx               |  30 +++---
 .../ElecEvaluation/Monitor/Home/index.tsx     | 102 +++++++++++++++---
 .../ElecEvaluation/Monitor/Supplier/index.tsx |   1 -
 .../Monitor/TenderAgent/index.tsx             |  37 ++++---
 src/pages/ElecEvaluation/Monitor/style.less   |  16 +--
 .../MonitorScreen/Home/style.less             |   2 +-
 .../MonitorScreen/MonitorRoom/style.less      |   4 +-
 7 files changed, 139 insertions(+), 53 deletions(-)

diff --git a/src/pages/ElecEvaluation/Monitor/Exception/index.tsx b/src/pages/ElecEvaluation/Monitor/Exception/index.tsx
index 1422af5..aa114c4 100644
--- a/src/pages/ElecEvaluation/Monitor/Exception/index.tsx
+++ b/src/pages/ElecEvaluation/Monitor/Exception/index.tsx
@@ -137,16 +137,16 @@ const MonitorException: React.FC<{}> = () => {
             key: 'projectName',
             align: 'center',
             ellipsis: true,
-            width: '30%',
+            width: '25%',
             onCell,
             onHeaderCell,
         },
         {
-            title: '预算金额',
+            title: '预算金额（元）',
             dataIndex: 'budgetAmount',
             key: 'budgetAmount',
             align: 'center',
-            width: '20%',
+            width: '25%',
             onCell,
             onHeaderCell,
             render: (_: any, record: any) => isNotEmpty(record.budgetAmount) ? Number(record.budgetAmount).toFixed(2) : 0,
@@ -200,16 +200,16 @@ const MonitorException: React.FC<{}> = () => {
             key: 'projectName',
             align: 'center',
             ellipsis: true,
-            width: '30%',
+            width: '25%',
             onCell,
             onHeaderCell,
         },
         {
-            title: '预算金额',
+            title: '预算金额（元）',
             dataIndex: 'budgetAmount',
             key: 'budgetAmount',
             align: 'center',
-            width: '20%',
+            width: '25%',
             onCell,
             onHeaderCell,
             // render: (_: any, record: any) => isNotEmpty(record.budgetAmount) ? record.budgetAmount.toFixed(2) : 0,
@@ -263,16 +263,16 @@ const MonitorException: React.FC<{}> = () => {
             key: 'projectName',
             align: 'center',
             ellipsis: true,
-            width: '30%',
+            width: '25%',
             onCell,
             onHeaderCell,
         },
         {
-            title: '预算金额',
+            title: '预算金额（元）',
             dataIndex: 'bidSectContractPrice',
             key: 'bidSectContractPrice',
             align: 'center',
-            width: '20%',
+            width: '25%',
             onCell,
             onHeaderCell,
             // render: (_: any, record: any) => isNotEmpty(record.bidSectContractPrice) ? record.bidSectContractPrice.toFixed(2) : 0,
@@ -326,16 +326,16 @@ const MonitorException: React.FC<{}> = () => {
             key: 'projectName',
             align: 'center',
             ellipsis: true,
-            width: '30%',
+            width: '25%',
             onCell,
             onHeaderCell,
         },
         {
-            title: '预算金额',
+            title: '预算金额（元）',
             dataIndex: 'budgetAmount',
             key: 'budgetAmount',
             align: 'center',
-            width: '20%',
+            width: '25%',
             onCell,
             onHeaderCell,
             render: (_: any, record: any) => isNotEmpty(record.budgetAmount) ? Number(record.budgetAmount).toFixed(2) : 0,
@@ -389,16 +389,16 @@ const MonitorException: React.FC<{}> = () => {
             key: 'projectName',
             align: 'center',
             ellipsis: true,
-            width: '30%',
+            width: '25%',
             onCell,
             onHeaderCell,
         },
         {
-            title: '预算金额',
+            title: '预算金额（元）',
             dataIndex: 'budgetAmount',
             key: 'budgetAmount',
             align: 'center',
-            width: '20%',
+            width: '25%',
             onCell,
             onHeaderCell,
             // render: (_: any, record: any) => isNotEmpty(record.budgetAmount) ? record.budgetAmount.toFixed(2) : 0,
diff --git a/src/pages/ElecEvaluation/Monitor/Home/index.tsx b/src/pages/ElecEvaluation/Monitor/Home/index.tsx
index ad8c74e..ab51564 100644
--- a/src/pages/ElecEvaluation/Monitor/Home/index.tsx
+++ b/src/pages/ElecEvaluation/Monitor/Home/index.tsx
@@ -228,7 +228,7 @@ const tjColumns: any[] = [
         dataIndex: 'tender_agency_name',
         key: 'tender_agency_name',
         align: "center",
-        width: '25%',
+        width: '23%',
         ellipsis: true,
         onCell,
         onHeaderCell,
@@ -245,18 +245,18 @@ const tjColumns: any[] = [
     },
     {
         dataIndex: 'progress',
-        width: '25%',
+        width: '23%',
         align: "center",
         onCell,
         onHeaderCell,
         render: (_: any, record: any, index: any) => <Progress percent={Number((record.num / record.maxNum * 100).toFixed())} strokeColor="#1B7EF2" trailColor="#124a8d" showInfo={false} />
     },
     {
-        title: '采购预算',
+        title: '采购预算（亿元）',
         dataIndex: 'ys',
         key: 'ys',
         align: "center",
-        width: '20%',
+        width: '24%',
         onCell,
         onHeaderCell,
         render: (_: any, record: any, index: any) => isNotEmpty(record.ys) ? record.ys.toFixed(2) : 0
@@ -309,8 +309,8 @@ export const ProgressItem = (props: { title: string, progress: number, leftTitle
     )
 }
 //下拉框封装
-export const SelectItem = (props: { onSelectChange: (value: string | number) => void, options: ({ label: string, value: string | number })[], defaultText?: string }) => {
-    const { onSelectChange, options, defaultText = "全部" } = props;
+export const SelectItem = (props: { onSelectChange: (value: string) => void, options: ({ label: string, value: string })[], defaultText?: string, hidden?: boolean }) => {
+    const { onSelectChange, options, defaultText = "全部", hidden = false } = props;
     const [selectedItem, setSelectItem] = useState<string | number>(defaultText);
     const menu = (
         <Menu>
@@ -321,7 +321,7 @@ export const SelectItem = (props: { onSelectChange: (value: string | number) =>
     );
     return (
         <Dropdown overlay={menu} trigger={["click"]} overlayClassName="monitor-select-dropdown" placement="bottomRight">
-            <div className='monitor-select-btn'>
+            <div className='monitor-select-btn' hidden={hidden}>
                 <span>
                     <Space>
                         {selectedItem}
@@ -510,7 +510,6 @@ export const ModalList = (props: { modalVisible: boolean, onCancel: () => void,
     const contentStyle = { color: "#fff" };
     const titleStyle = { color: "#1b7ef2", fontWeight: "bold", marginBottom: '24px' };
     const dividerStyle = { borderColor: "#999", margin: "12px 0 24px" };
-    console.log("exceptionData", exceptionData)
     return (
         <Modal
             destroyOnClose
@@ -567,8 +566,6 @@ export const GraphChart = (props: { type: string, chartData: any[], chartColor?:
             dataValue = dealWithData(chartData);
             mapData = dataValue.splice(0, 3);
         }
-        console.log("dataValue", dataValue);
-        console.log("mapData", mapData)
         const autoTooltip = (index: number) => {
             myChart.dispatchAction({
                 type: 'showTip',
@@ -742,7 +739,7 @@ export const GraphChart = (props: { type: string, chartData: any[], chartColor?:
                     coordinateSystem: "geo",
                     data: dataValue,
                     symbolSize: function (val) {
-                        return val[2] == 0 ? 8 : Math.floor(val[2] / 1.2);
+                        return val[2] == 0 ? 8 : Math.floor(val[2] / 12.5);
                     },
                     symbol: "circle",
                     // symbolSize: 8,
@@ -1040,7 +1037,6 @@ export const GraphChart = (props: { type: string, chartData: any[], chartColor?:
                     showLegendSymbol: false, // 存在legend时显示
                     tooltip: {
                         formatter(value) {
-                            console.log("value", value);
                             if (value.data?.name) {
                                 let list = "";
                                 if (value.data?.data) {
@@ -1085,6 +1081,86 @@ export const GraphChart = (props: { type: string, chartData: any[], chartColor?:
                 },
             ]
         };
+        const mapForthOption: EChartsOption = {
+            tooltip: {
+                show: false,
+            },
+            geo: {
+                map: "china",
+                roam: false,// 一定要关闭拖拽
+                zoom: 1.2,
+                itemStyle: {
+                    areaColor: "rgba(128,128,128,0)",
+                    borderColor: "#29F0F9",
+                    borderWidth: 1, //设置外层边框
+                    shadowBlur: 10,
+                    shadowOffsetY: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: "#0e6f7a"
+                }
+            },
+            visualMap: {
+                min: 0,
+                max: 50,
+                inRange: {
+                    color: [
+                        '#01417f',
+                        '#26c4ff',
+                        '#abd5fc',
+                        '#42p4b7',
+                        '#1a315a',
+                        '#cacdda',
+                        '#0d4697',
+                        '#01192d',
+                    ]
+                },
+                show: false
+            },
+            series: [
+                {
+                    type: "map",
+                    map: "china",
+                    roam: false,
+                    zoom: 1.2,
+                    showLegendSymbol: false, // 存在legend时显示
+                    tooltip: {
+                        formatter(value) {
+                            if (value.data?.name) {
+                                return value.data.name + "<br/>" + value.data?.data.agencyName + "<br/>" + "实施项目数量：" + value.data.value + "<br/>" + "采购预算：" + value.data?.data.dlxmys + "亿";
+                            }
+                            return "";
+                        },
+                        backgroundColor: "#0a0c11cc",
+                        textStyle: {
+                            color: '#fff'
+                        },
+                        show: true
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                            color: '#fff'
+                        },
+                        itemStyle: {
+                            areaColor: '#127dff'
+                        }
+                    },
+                    select: {
+                        disabled: true,
+                    },
+                    label: {
+                        show: true,
+                        color: "#fff"
+                    },
+                    itemStyle: {
+                        areaColor: "rgba(128,128,128,0)",
+                        borderColor: "#29F0F9",
+                        borderWidth: 0.5
+                    },
+                    data: chartData,
+                },
+            ]
+        };
         const transverseBarOption: EChartsOption = {
             grid: {
                 left: '2%',
@@ -1138,7 +1214,6 @@ export const GraphChart = (props: { type: string, chartData: any[], chartColor?:
         };
         if (type == "mapTwice") {
             myChart.on('selectchanged', function (params: any) {
-                console.log("params", params)
                 if (params.selected.length > 0) {
                     onSelect(chartData[params.selected[0].dataIndex[0]].name);
                 } else {
@@ -1152,6 +1227,7 @@ export const GraphChart = (props: { type: string, chartData: any[], chartColor?:
             "gauge": gaugeOption,
             "mapTwice": mapTwiceOption,
             "mapThird": mapThirdOption,
+            "mapForth": mapForthOption,
             "category": categoryOption,
             "transverseBar": transverseBarOption,
         }
diff --git a/src/pages/ElecEvaluation/Monitor/Supplier/index.tsx b/src/pages/ElecEvaluation/Monitor/Supplier/index.tsx
index ff2144f..ce28fec 100644
--- a/src/pages/ElecEvaluation/Monitor/Supplier/index.tsx
+++ b/src/pages/ElecEvaluation/Monitor/Supplier/index.tsx
@@ -82,7 +82,6 @@ const Supplier: React.FC<{}> = () => {
     }, [chartData])
     //选择省份
     const onSelect = (value: string) => {
-        console.log("value", value);
         province.current = value;
         chartDataChange();
     }
diff --git a/src/pages/ElecEvaluation/Monitor/TenderAgent/index.tsx b/src/pages/ElecEvaluation/Monitor/TenderAgent/index.tsx
index cf765f7..96456f6 100644
--- a/src/pages/ElecEvaluation/Monitor/TenderAgent/index.tsx
+++ b/src/pages/ElecEvaluation/Monitor/TenderAgent/index.tsx
@@ -1,8 +1,7 @@
-import { Col, Progress, Radio, Row, Table } from 'antd';
-import { debounce } from 'lodash';
+import { Col, Radio, Row } from 'antd';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import '../style.less'
-import { authCheck, GraphChart, onCell, onHeaderCell, OverviewItem, proviceEnum, ScreenLabel, ScreenTitle, ScrollTable, SelectItem, StatisticTable } from '../Home';
+import { authCheck, GraphChart, onCell, onHeaderCell, OverviewItem, ScreenLabel, ScreenTitle, SelectItem, StatisticTable } from '../Home';
 import Circle3197 from '@/assets/monitor/circle-3197.png';
 import Circle3198 from '@/assets/monitor/circle-3198.png';
 import Circle3199 from '@/assets/monitor/circle-3199.png';
@@ -16,7 +15,7 @@ const columns: any[] = [
         dataIndex: 'agencyName',
         key: 'agencyName',
         align: 'center',
-        width: '20%',
+        width: '15%',
         ellipsis: true,
         onCell,
         onHeaderCell,
@@ -26,7 +25,7 @@ const columns: any[] = [
         dataIndex: 'dlxms',
         key: 'dlxms',
         align: 'center',
-        width: '20%',
+        width: '28%',
         onCell,
         onHeaderCell,
     },
@@ -35,7 +34,7 @@ const columns: any[] = [
         dataIndex: 'dlxmys',
         key: 'dlxmys',
         align: 'center',
-        width: '20%',
+        width: '30%',
         onCell,
         onHeaderCell,
         render: (_: any, record: any) => isNotEmpty(record.dlxmys) ? record.dlxmys.toFixed(2) : 0,
@@ -45,7 +44,7 @@ const columns: any[] = [
         dataIndex: 'wcl',
         key: 'wcl',
         align: 'center',
-        width: '20%',
+        width: '27%',
         onCell,
         onHeaderCell,
         render: (_: any, record: any) => isNotEmpty(record.wcl) ? (record.wcl * 100).toFixed(0) : 0,
@@ -90,6 +89,9 @@ const TenderAgent: React.FC<{}> = () => {
     const mapChart = useMemo(() => {
         return provinceData.length > 0 && <GraphChart type="mapThird" chartData={provinceData} />
     }, [provinceData])
+    const agencyMapChart = useMemo(() => {
+        return <GraphChart type="mapForth" chartData={provinceByAgencyData} />
+    }, [provinceByAgencyData])
 
     //相关统计数据
     const getTenderAgentData = () => {
@@ -125,10 +127,12 @@ const TenderAgent: React.FC<{}> = () => {
         })
     }
     //代理分布省分
-    const getProvinceByAgency = () => {
-        getProvinceByAgencyAPI("101152137").then(res => {
+    const getProvinceByAgency = (agencyId: string) => {
+        getProvinceByAgencyAPI(agencyId).then(res => {
             if (res?.code == 200) {
-                setProvinceByAgencyData(res?.data);
+                const data = res?.data;
+                const agencyData = data.map((item: any) => ({ name: item.province, value: Number(item.dlxms), data: item }));
+                setProvinceByAgencyData(agencyData);
             }
         })
     }
@@ -136,13 +140,16 @@ const TenderAgent: React.FC<{}> = () => {
         setBtnSelect(e.target.value);
     }
     //onSelectChange select变更事件
-    const onSelectChange = (value: string | number) => {
-
+    const onSelectChange = (value: string) => {
+        if (value != "all") {
+            getProvinceByAgency(value);
+        } else {
+            setProvinceByAgencyData([]);
+        }
     }
     useEffect(() => {
         if (auth.current) {
             getTenderAgentData();
-            getProvinceByAgency();
         }
     }, [])
     return (
@@ -195,10 +202,10 @@ const TenderAgent: React.FC<{}> = () => {
                             <Radio.Button value="0">代理分布省分</Radio.Button>
                             <Radio.Button value="1">省分代理分布</Radio.Button>
                         </Radio.Group>
-                        <SelectItem options={selectData} onSelectChange={onSelectChange} defaultText="请选择" />
+                        <SelectItem options={selectData} onSelectChange={onSelectChange} defaultText="请选择" hidden={btnSelect == "1"} />
                     </div>
                     <div className="monitor-tender-map">
-                        {mapChart}
+                        {btnSelect == "0" ? agencyMapChart : mapChart}
                     </div>
                 </Col>
             </Row>
diff --git a/src/pages/ElecEvaluation/Monitor/style.less b/src/pages/ElecEvaluation/Monitor/style.less
index a6288dc..678f877 100644
--- a/src/pages/ElecEvaluation/Monitor/style.less
+++ b/src/pages/ElecEvaluation/Monitor/style.less
@@ -9,7 +9,7 @@
 .screen-global {
     width: 100%;
     height: 100%;
-    background: url("~@/assets/monitor/background-3.gif") left top no-repeat;
+    background: url("~@/assets/monitor/background-3.jpg") left top no-repeat;
     background-size: cover;
     // background-color: #0a0c11;
 
@@ -50,7 +50,7 @@
 .monitor-main {
     height: 100%;
     // background-color: #0a0c11;
-    background: url("~@/assets/monitor/background-3.gif") left top no-repeat;
+    background: url("~@/assets/monitor/background-3.jpg") left top no-repeat;
     background-size: cover;
 
     .monitor-title {
@@ -1058,7 +1058,7 @@
 
 .monitor-modal-list {
     .ant-modal-body {
-        background: #12304ecc;
+        background: #0A1A34cc;
 
         &::-webkit-scrollbar {
             display: none;
@@ -1066,7 +1066,7 @@
     }
 
     .ant-modal-content {
-        background: #12304ecc;
+        background: #0A1A34cc;
     }
 
     .ant-modal-close-x {
@@ -1081,14 +1081,18 @@
 
     .modal-list-btn {
         padding: 4px 15px;
-        background-color: #12304e;
+        background-color: #0A1A34;
         border-radius: 20px;
         cursor: pointer;
         border: 1px solid #1b7ef2;
         width: 64px;
 
         &:hover {
-            background-color: #ffffffcc;
+            background-color: #1b7ef2;
+
+            &>span {
+                color: #fff;
+            }
         }
 
         &>span {
diff --git a/src/pages/ElecEvaluation/MonitorScreen/Home/style.less b/src/pages/ElecEvaluation/MonitorScreen/Home/style.less
index 01e6f69..f9ddcef 100644
--- a/src/pages/ElecEvaluation/MonitorScreen/Home/style.less
+++ b/src/pages/ElecEvaluation/MonitorScreen/Home/style.less
@@ -5,7 +5,7 @@
 
 .screen-bg {
     // background: @screen-color;
-    background: url("~@/assets/monitor/background-2.jpg") left top no-repeat;
+    background: url("~@/assets/monitor/background-3.jpg") left top no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
diff --git a/src/pages/ElecEvaluation/MonitorScreen/MonitorRoom/style.less b/src/pages/ElecEvaluation/MonitorScreen/MonitorRoom/style.less
index 30961fc..f2474dc 100644
--- a/src/pages/ElecEvaluation/MonitorScreen/MonitorRoom/style.less
+++ b/src/pages/ElecEvaluation/MonitorScreen/MonitorRoom/style.less
@@ -189,14 +189,14 @@
         }
 
         .list-card {
-            background: #041766;
+            background: #1b7ef224;
             border-radius: 4px;
             border: 1px solid #5c69a1;
             cursor: pointer;
             padding: 0 0.5rem;
 
             &:hover {
-                border-color: #fff;
+                border-color: #1b7ef2;
             }
 
             .list-card-title {