12.30 第七版

2022-12-30 19:05:36 +08:00
parent e5cfd2c71a
commit acfec75a18
7 changed files with 139 additions and 53 deletions
--- 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,
--- 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,
        }
--- 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();
    }
--- 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>
--- 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 {
--- 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%;
--- 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 {