From 9c0f089bc687bd0db1d104801a9ba9f509fc1ad4 Mon Sep 17 00:00:00 2001
From: tangshaojian <63377964@qq.com>
Date: Wed, 18 Dec 2024 14:28:37 +0800
Subject: [PATCH] =?UTF-8?q?tsj:=20=E4=BF=AE=E6=94=B9=E7=BB=9F=E8=A7=88?=
=?UTF-8?q?=E6=A8=A1=E5=BC=8F--=E5=B7=A6=E4=BE=A7--=E8=80=81=E7=99=BE?=
=?UTF-8?q?=E5=A7=93=E6=8A=95=E8=AF=89=E7=89=88=E9=9D=A2=EF=BC=9B=E5=8C=85?=
=?UTF-8?q?=E6=8B=AC=E5=9B=BE=E8=A1=A8=E7=9A=84=E4=B8=9A=E5=8A=A1=E9=80=BB?=
=?UTF-8?q?=E8=BE=91=E3=80=81=E6=80=BB=E7=BB=93=E7=9A=84=E4=B8=9A=E5=8A=A1?=
=?UTF-8?q?=E9=80=BB=E8=BE=91=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/ModeSwitch/index.css | 2 +-
.../NewLeftSidebar/CityRealTimeCQI/index.css | 16 ++-
.../AreaDistribution/index.css | 4 +-
.../AreaDistribution/index.less | 10 +-
.../AreaDistribution/index.tsx | 34 ++++-
.../PeopleComplaint/ComplaintTrend/index.css | 2 +-
.../PeopleComplaint/ComplaintTrend/index.less | 2 +-
.../HighIncidenceTime/LineCharts/index.tsx | 44 +++++-
.../HighIncidenceTime/index.css | 42 +++++-
.../HighIncidenceTime/index.less | 54 +++++--
.../HighIncidenceTime/index.tsx | 133 +++++++++++++++++-
.../TypeDistribution/LineBarCharts/index.tsx | 5 +-
.../TypeDistribution/index.css | 45 +++---
.../TypeDistribution/index.less | 74 +++++-----
.../TypeDistribution/index.tsx | 36 +++--
.../components/Card/index.css | 2 +-
.../IndustryOperationNew/index.css | 2 +-
.../components/Card/index.css | 2 +-
18 files changed, 389 insertions(+), 120 deletions(-)
diff --git a/src/components/ModeSwitch/index.css b/src/components/ModeSwitch/index.css
index 8de9b197..14755e4a 100644
--- a/src/components/ModeSwitch/index.css
+++ b/src/components/ModeSwitch/index.css
@@ -31,7 +31,7 @@
transform: translateX(126px);
}
.container .textWrapper {
- position: relative;
+ position: relaDingTalk JinBuTi
z-index: 1;
width: 100%;
height: 100%;
diff --git a/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.css b/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.css
index 00c6f02b..cba65a70 100644
--- a/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.css
+++ b/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.css
@@ -1,9 +1,8 @@
.container {
height: 150px;
- background: rgba(68, 120, 195, 0.2);
+ background: url('@/assets/images/bg.png');
border-radius: 20px;
- border: 2px solid rgba(119, 199, 255, 0.1);
- padding: 20px;
+ padding: 20px 27px 16px 19px;
display: flex;
flex-direction: column;
overflow: hidden;
@@ -34,12 +33,14 @@
font-size: 26px;
font-weight: 400;
line-height: 31px;
+ color: #B3D6F7;
}
.container .header .tip {
font-size: 18px;
+ cursor: pointer;
}
.container .header .icon {
- color: #6194c7;
+ color: #b3d6f7;
font-size: 20px;
cursor: pointer;
margin: 0 10px;
@@ -52,6 +53,7 @@
}
.container .content .scoreSection .desc {
color: #d9d9d9;
+ font-family: DingTalk JinBuTi;
font-size: 18px;
line-height: 1;
font-weight: 400;
@@ -77,7 +79,7 @@
padding: 2px;
}
.container .content .scoreSection .title {
- font-family: '钉钉进步体';
+ font-family: DingTalk JinBuTi;
font-size: 18px;
font-weight: 400;
line-height: 22px;
@@ -87,7 +89,7 @@
}
.container .content .dimensionItem {
width: 90px;
- height: 62px;
+ height: 71px;
border-radius: 14px;
display: flex;
flex-direction: column;
@@ -99,7 +101,7 @@
.container .content .dimensionItem .name {
color: #ffffff;
font-family: '思源黑体';
- font-size: 18px;
+ font-size: 20px;
font-weight: 400;
line-height: 1;
}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.css
index 76fbf96b..b116ad2e 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.css
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.css
@@ -1,4 +1,5 @@
.container {
+ margin-top: 12px;
width: 100%;
height: 325px;
}
@@ -9,7 +10,7 @@
}
.container .header .title {
color: #BDCEE9;
- font-family: '钉钉进步体';
+ font-family: 'DingTalk JinBuTi';
font-size: 22px;
font-weight: 400;
line-height: 26px;
@@ -44,6 +45,7 @@
width: 20px;
height: 14px;
cursor: pointer;
+ z-index: 1;
}
.container .progressWrap {
height: calc(100% - 46px);
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.less
index f2356667..fc8196a1 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.less
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.less
@@ -1,5 +1,5 @@
.container {
-// margin-top: 20px;
+ margin-top: 12px;
// padding: 20px;
// background: rgba(8, 24, 63, 0.7);
// border-radius: 15px;
@@ -15,7 +15,7 @@
.title {
color: #BDCEE9;
- font-family: '钉钉进步体';
+ font-family: 'DingTalk JinBuTi';
font-size: 22px;
font-weight: 400;
line-height: 26px;
@@ -52,13 +52,9 @@
width: 20px;
height: 14px;
cursor: pointer;
+ z-index: 1;
}
}
- // .quoteIcon {
- // width: 24px;
- // height: 24px;
- // cursor: pointer;
- // }
}
.progressWrap {
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.tsx
index 8bddfaff..185048ab 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.tsx
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.tsx
@@ -52,7 +52,27 @@ const AreaDistribution: React.FC = () => {
}, []);
const renderSummaryContent = () => {
- // console.log(pieData)
+ // 按数量分类
+ const categorizeRegions = (data: any[]) => {
+ const above400 = data.filter(item => item.num >= 400);
+ const above300 = data.filter(item => item.num >= 300 && item.num < 400);
+ const between100And300 = data.filter(item => item.num >= 100 && item.num < 300);
+ const below100 = data.filter(item => item.num < 100);
+
+ return {
+ above400,
+ above300,
+ between100And300,
+ below100
+ };
+ };
+
+ const regions = categorizeRegions(statisticTotal?.records || []);
+
+ const above300Count = regions.above300.length + regions.above400.length;
+ const above400Names = regions.above400.map(item => item.ssqy).join('和');
+ const below100Names = regions.below100.map(item => item.ssqy).join('、');
+
return (
//
//
@@ -95,8 +115,20 @@ const AreaDistribution: React.FC = () => {
彭州市、大邑县、成都东部新区、蒲江县。
+
//
//
+ //
+ //
区域分布总结
+ //
+ // 从具体区(市)县看,有{above300Count}个区(市)县案件均超过
+ // 300件
+ // {regions.above400.length > 0 && <>,其中{above400Names}超过了400件>};
+ // {regions.between100And300.length}个区(市)县处理投诉案件数在100-300件之间;
+ // 有{regions.below100.length}个区(市)县处理投诉案件少于100件,分别是
+ // {below100Names}。
+ //
+ //
);
};
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/index.css
index e7f6a51b..5f04ea36 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/index.css
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/index.css
@@ -10,7 +10,7 @@
}
.container .header .title {
color: #BDCEE9;
- font-family: '钉钉进步体';
+ font-family: 'DingTalk JinBuTi';
font-size: 22px;
font-weight: 400;
line-height: 26px;
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/index.less
index afa670ef..4448fa81 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/index.less
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/index.less
@@ -15,7 +15,7 @@
.title {
color: #BDCEE9;
- font-family: '钉钉进步体';
+ font-family: 'DingTalk JinBuTi';
font-size: 22px;
font-weight: 400;
line-height: 26px;
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/LineCharts/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/LineCharts/index.tsx
index c700ebc3..7a3eacd4 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/LineCharts/index.tsx
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/LineCharts/index.tsx
@@ -14,10 +14,15 @@ const LineCharts = ({ dataSource }: { dataSource: any[] }) => {
name: item?.name,
type: 'line',
data: item?.data?.map((v: any) => v.num),
+ lineStyle: {
+ width: 3,
+ },
+ smooth: true, // 使用平滑曲线
+ showSymbol: false, // 不显示数据点
}
})
- console.log(series)
+ // console.log(series)
return {
color: ['#36BD3B', '#FF9743', '#FF67CB', '#9259FF', '#FFE543'],
@@ -39,7 +44,7 @@ const LineCharts = ({ dataSource }: { dataSource: any[] }) => {
left: '0',
right: '0',
bottom: '2%',
- top: '25%',
+ top: '30%',
containLabel: true,
},
legend: {
@@ -109,7 +114,40 @@ const LineCharts = ({ dataSource }: { dataSource: any[] }) => {
},
}
],
- series: series
+ series: series
+ // series: [
+ // {
+ // // name: '投诉量',
+ // // type: 'line',
+ // // smooth: true, // 使用平滑曲线
+ // // showSymbol: false, // 不显示数据点
+ // lineStyle: {
+ // width: 3,
+ // },
+ // // areaStyle: {
+ // // // 添加渐变填充
+ // // opacity: 0.3,
+ // // color: {
+ // // type: 'linear',
+ // // x: 0,
+ // // y: 0,
+ // // x2: 0,
+ // // y2: 1,
+ // // colorStops: [
+ // // {
+ // // offset: 0,
+ // // color: '#3CE88F',
+ // // },
+ // // {
+ // // offset: 1,
+ // // color: 'rgba(60,232,143,0)',
+ // // },
+ // // ],
+ // // },
+ // // },
+ // data: series,
+ // },
+ // ],
}
}, [dataSource])
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.css
index 21a59ea4..e273941c 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.css
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.css
@@ -1,4 +1,5 @@
.container {
+ margin-top: 12px;
width: 100%;
height: 160px;
}
@@ -8,7 +9,7 @@
}
.container .header .title {
color: #BDCEE9;
- font-family: '钉钉进步体';
+ font-family: 'DingTalk JinBuTi';
font-size: 22px;
font-weight: 400;
line-height: 26px;
@@ -42,15 +43,46 @@
.container .header .quoteWrapper .quoteIcon {
width: 20px;
height: 14px;
+ z-index: 1;
}
.container .content {
height: 100%;
}
.summaryPopover :global .ant-popover-inner {
- background: rgba(41, 84, 136, 0.95);
- padding: 20px;
+ background: #08183f !important;
+ border: 1px solid #136596;
+ box-shadow: 0px 0px 20px 0px rgba(19, 101, 150, 0.5);
+ border-radius: 15px;
+ padding: 0;
+}
+.summaryPopover :global .ant-popover-inner-content {
+ padding: 0;
+}
+.summaryPopover :global .ant-popover-arrow {
+ display: none;
+}
+.summaryPopover .content {
+ color: #546aa2;
+ font-size: 16px;
+ line-height: 32px;
+ font-weight: 400;
+ padding: 0px 10px;
+}
+.summaryPopover .content p {
+ margin: 0;
+}
+.summaryPopover .title {
+ color: #FFFFFF;
+ font-family: 'DingTalk JinBuTi';
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 24px;
+ margin-bottom: 12px;
+ padding: 0px 10px 0;
}
.summaryPopover .highlight {
- color: #1B90FF;
- font-weight: 700;
+ color: #ffcd4b;
+ font-size: 16px;
+ line-height: 32px;
+ font-weight: 400;
}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.less
index f4f1744d..783b4613 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.less
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.less
@@ -1,5 +1,5 @@
.container {
-// margin-top: 20px;
+ margin-top: 12px;
// padding: 20px;
// background: rgba(8, 24, 63, 0.7);
// border-radius: 15px;
@@ -15,7 +15,7 @@
.title {
color: #BDCEE9;
- font-family: '钉钉进步体';
+ font-family: 'DingTalk JinBuTi';
font-size: 22px;
font-weight: 400;
line-height: 26px;
@@ -47,17 +47,14 @@
box-sizing: border-box;
margin-left: 10px;
cursor: pointer;
-
+
.quoteIcon {
width: 20px;
height: 14px;
+ z-index: 1;
+ // cursor: pointer;
}
}
- // .quoteIcon {
- // width: 24px;
- // height: 14px;
- // cursor: pointer;
- // }
}
.content {
@@ -69,13 +66,46 @@
.summaryPopover {
:global {
.ant-popover-inner {
- background: rgba(41, 84, 136, 0.95);
- padding: 20px;
+ background: rgb(8, 24, 63) !important;
+ border: 1px solid rgb(19, 101, 150);
+ box-shadow: 0px 0px 20px 0px rgba(19, 101, 150, 0.5);
+ border-radius: 15px;
+ padding: 0;
+ }
+ .ant-popover-inner-content {
+ padding: 0;
+ }
+ .ant-popover-arrow {
+ display: none;
+ }
+ }
+
+ .content {
+ color: rgb(84, 106, 162);
+ font-size: 16px;
+ line-height: 32px;
+ font-weight: 400;
+ padding: 0px 10px;
+
+ p {
+ margin: 0;
}
}
+ .title {
+ color: #FFFFFF;
+ font-family: 'DingTalk JinBuTi';
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 24px;
+ margin-bottom: 12px;
+ padding: 0px 10px 0;
+ }
+
.highlight {
- color: #1B90FF;
- font-weight: 700;
+ color: rgb(255, 205, 75);
+ font-size: 16px;
+ line-height: 32px;
+ font-weight: 400;
}
}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.tsx
index fd17290b..265e55fe 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.tsx
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/index.tsx
@@ -8,6 +8,7 @@ import quoteIcon from '@/assets/images/newMain/quote.png';
const HighIncidenceTime: React.FC = () => {
const [statisticTotal, setStatisticTotal] = useState([]);
+ const [statisticTotalForCharts, setStatisticTotalForCharts] = useState([]);
const getDate = () => {
const oneMonthAgo = dayjs().subtract(1, 'month');
@@ -26,7 +27,41 @@ const HighIncidenceTime: React.FC = () => {
});
if (resp.code === 200) {
const data = [resp.data?.all, ...resp.data?.data];
+ console.log(data)
setStatisticTotal(data);
+
+ // 处理数据,确保每个时间点都有数据,并按自然顺序排序
+ const processData = (rawData: any) => {
+ // 生成0-23的完整时间序列
+ const fullTimeData = Array.from({ length: 24 }, (_, i) => ({
+ times: i,
+ num: 0
+ }));
+
+ // 用实际数据填充
+ rawData.forEach((item: any) => {
+ const index = item.times;
+ if (index >= 0 && index < 24) {
+ fullTimeData[index].num = item.num;
+ }
+ });
+
+ return fullTimeData;
+ };
+ // setStatisticTotalForCharts(data);
+ // setStatisticTotalForCharts(processData(data));
+
+ const processedData = [
+ { ...resp.data?.all, data: processData(resp.data?.all?.data) },
+ ...resp.data?.data.map((item: any) => ({
+ ...item,
+ data: processData(item.data)
+ }))
+ ];
+ console.log(processedData)
+
+ // setStatisticTotal(resp.data?.all?.data);
+ setStatisticTotalForCharts(processedData);
}
};
@@ -35,13 +70,95 @@ const HighIncidenceTime: React.FC = () => {
}, []);
const getSummaryText = () => {
+ // 找到"整体"数据
+ const overallData = statisticTotal.find((item: any) => item.name === "整体");
+
+ // 获取整体数据中前三高发时段
+ const overallTop3Times = overallData?.data
+ .sort((a: any, b: any) => b.num - a.num)
+ .slice(0, 3)
+ .map((item: any) => item.times + '点')
+ .join('、');
+
+ // 获取除"整体"外数量最多的前三类型
+ const top3Types = statisticTotal
+ .filter((item: any) => item.name !== "整体")
+ .sort((a: any, b: any) => b.num - a.num)
+ .slice(0, 3);
+
+ // 获取每个类型的前三高发时段
+ const typeTimesSummary = top3Types.map((type: any) => {
+ const top3Times = type.data
+ .sort((a: any, b: any) => b.num - a.num)
+ .slice(0, 3)
+ .map((item: any) => item.times + '点')
+ .join('、');
+
+ return {
+ name: type.name,
+ times: top3Times
+ };
+ });
+
+ return (
+
+
高发时间总结
+
+
近一个月投诉主要集中在 {overallTop3Times}。
+
其中市民关注和反映问题较多问题:
+ {typeTimesSummary.map((item: any, index: any) => (
+
+ {item.name}集中在 {item.times}。
+
+ ))}
+
+
+ );
+ };
+
+ const getSummaryText1 = () => {
+ // 找到"整体"数据
+ const overallData = statisticTotal.find((item: any) => item.name === "整体");
+
+ // 获取整体数据中前三高发时段
+ const overallTop3Times = overallData?.data
+ .sort((a: any, b: any) => b.num - a.num)
+ .slice(0, 3)
+ .map((item: any) => item.times + '点')
+ .join('、');
+
+ // 获取除"整体"外数量最多的前三类型
+ const top3Types = statisticTotal
+ .filter((item: any) => item.name !== "整体")
+ .sort((a: any, b: any) => b.num - a.num)
+ .slice(0, 3);
+
+ // 获取每个类型的前三高发时段
+ const typeTimesSummary = top3Types.map((type: any) => {
+ const top3Times = type.data
+ .sort((a: any, b: any) => b.num - a.num)
+ .slice(0, 3)
+ .map((item: any) => item.times + '点')
+ .join('、');
+
+ return {
+ name: type.name,
+ times: top3Times
+ };
+ });
+
return (
-
-
今日投诉主要集中在 4点、6点 、10点。
-
其中市民关注和反映问题较多问题:
-
噪音扰民集中在 8点、10点 、12点。
-
占道经营集中在 6点、7点 、21点。
-
油烟扰民集中在12点、17点 、19点。
+
+
高发时间总结
+
+
近一个月投诉主要集中在 {overallTop3Times}。
+
其中市民关注和反映问题较多问题:
+ {typeTimesSummary.map((item: any, index: any) => (
+
+ {item.name}集中在 {item.times}。
+
+ ))}
+
);
};
@@ -55,6 +172,8 @@ const HighIncidenceTime: React.FC = () => {
placement="bottomRight"
trigger="click"
overlayClassName={styles.summaryPopover}
+ // overlayStyle={{ width: 262 }}
+ destroyTooltipOnHide
>

@@ -63,7 +182,7 @@ const HighIncidenceTime: React.FC = () => {
-
+
);
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/LineBarCharts/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/LineBarCharts/index.tsx
index 0b469916..732d234b 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/LineBarCharts/index.tsx
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/LineBarCharts/index.tsx
@@ -99,7 +99,7 @@ const LineBarCharts = ({ dataSource }: { dataSource: any[] }) => {
valueAnimation: true,
color: '#fff',
fontWeight: 700,
- fontSize: 20
+ fontSize: 14
}
}]
};
@@ -108,7 +108,8 @@ const LineBarCharts = ({ dataSource }: { dataSource: any[] }) => {
return (
);
};
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.css
index b4b701e9..c99ae2a2 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.css
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.css
@@ -11,7 +11,7 @@
}
.container .header .title {
color: #BDCEE9;
- font-family: '钉钉进步体';
+ font-family: 'DingTalk JinBuTi';
font-size: 22px;
font-weight: 400;
line-height: 26px;
@@ -46,31 +46,36 @@
width: 20px;
height: 14px;
}
-.container .summaryContent {
- padding: 16px;
- background: rgba(41, 84, 136, 0.95);
- border-radius: 4px;
- min-width: 200px;
- width: 552px;
- max-width: 552px;
- padding: 0 20px;
- height: 400px;
+.summaryPopover :global .ant-popover-inner {
+ background: #08183f !important;
+ border: 1px solid #136596;
+ box-shadow: 0px 0px 20px 0px rgba(19, 101, 150, 0.5);
+ border-radius: 15px;
+ padding: 0;
}
-.container .summaryContent .title {
+.summaryPopover :global .ant-popover-inner-content {
+ padding: 0;
+}
+.summaryPopover :global .ant-popover-arrow {
+ display: none;
+}
+.summaryPopover .content {
+ color: #546aa2;
+ font-size: 16px;
+ line-height: 32px;
+ font-weight: 400;
+}
+.summaryPopover .title {
color: #FFFFFF;
- font-family: '钉钉进步体';
+ font-family: 'DingTalk JinBuTi';
font-size: 20px;
font-weight: 400;
line-height: 24px;
margin-bottom: 12px;
}
-.container .summaryContent .content {
- font-size: 18px;
+.summaryPopover .highlight {
+ color: #ffcd4b;
+ font-size: 16px;
+ line-height: 32px;
font-weight: 400;
- line-height: 2;
- color: #CBEDFF;
-}
-.container .summaryContent .content .highlight {
- color: #1B90FF;
- font-weight: 700;
}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.less
index b93a1dd9..8256af17 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.less
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.less
@@ -15,7 +15,7 @@
.title {
color: #BDCEE9;
- font-family: '钉钉进步体';
+ font-family: 'DingTalk JinBuTi';
font-size: 22px;
font-weight: 400;
line-height: 26px;
@@ -54,44 +54,44 @@
}
}
}
+}
-// .content {
-// flex: 1;
- // margin-top: 10px;
- // height: calc(100% - 46px);
- // height: 100%;
-// }
-
- .summaryContent {
- padding: 16px;
- background: rgba(41, 84, 136, 0.95);
- border-radius: 4px;
- min-width: 200px;
-
- width: 552px;
- max-width: 552px;
- padding: 0 20px;
- height: 400px;
-
- .title {
- color: #FFFFFF;
- font-family: '钉钉进步体';
- font-size: 20px;
- font-weight: 400;
- line-height: 24px;
- margin-bottom: 12px;
+.summaryPopover {
+ :global {
+ .ant-popover-inner {
+ background: rgb(8, 24, 63) !important;
+ // background: rgba(8, 24, 63, 0.9) !important;
+ border: 1px solid rgb(19, 101, 150);
+ box-shadow: 0px 0px 20px 0px rgba(19, 101, 150, 0.5);
+ border-radius: 15px;
+ padding: 0;
}
-
- .content {
- font-size: 18px;
- font-weight: 400;
- line-height: 2;
- color: #CBEDFF;
-
- .highlight {
- color: #1B90FF;
- font-weight: 700;
- }
+ .ant-popover-inner-content {
+ padding: 0;
+ }
+ .ant-popover-arrow {
+ display: none;
}
}
+
+ .content {
+ color: rgb(84, 106, 162);
+ font-size: 16px;
+ line-height: 32px;
+ font-weight: 400;
+ }
+ .title {
+ color: #FFFFFF;
+ font-family: 'DingTalk JinBuTi';
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 24px;
+ margin-bottom: 12px;
+ }
+ .highlight {
+ color: rgb(255, 205, 75);
+ font-size: 16px;
+ line-height: 32px;
+ font-weight: 400;
+ }
}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.tsx
index d1f1e6d6..3d667dc9 100644
--- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.tsx
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/index.tsx
@@ -41,23 +41,33 @@ const TypeDistribution: React.FC = () => {
// 生成总结文本
const getSummaryText = () => {
+ // 计算总数
+ const total = statisticTotal.reduce((acc, cur) => acc + cur.num, 0);
+
+ // 获取前三名
+ const top3 = statisticTotal.slice(0, 3);
+
+ // 生成类型名称字符串
+ const typeNames = top3.map(item => item.lx).join('、');
+
+ // 生成数值字符串
+ const numbers = top3.map(item => item.num).join('件、') + '件';
+
+ // console.log(statisticTotal, total, top3);
+
+ // 生成比例字符串
+ // const percents = top3.map(item => (item.num / total * 100).toFixed(2) + '%').join('、');
+
return (
大类分布总结
- 今日环境保护、市容秩序与广告招牌、规划执法等3大类型投诉案件数较多,分别为
- 45651件、30407件25481件,占全市总投诉案件的比重分别为
- 37.73%、25.13%、21.06%。
+ 今日{typeNames}
+ 等{top3.length}大类型投诉案件数较多,分别为
+ {numbers}。
+ {/* 占全市总投诉案件的比重分别为 */}
+ {/* {percents}。 */}
-
- {/*
- 从具体区(市)县看,有6个区(市)县案件均超过
- 300件,其中成华区和
- 成都高新区超过了400件;
- 11有个区(市)县处理投诉案件数在100-300件之间;
- 有6个区(市)县处理投诉案件少于100件,分别是青白江区、新津区、
- 彭州市、大邑县、成都东部新区、蒲江县。
-
*/}
);
};
@@ -71,6 +81,8 @@ const TypeDistribution: React.FC = () => {
placement="bottomRight"
trigger="click"
overlayClassName={styles.summaryPopover}
+ overlayStyle={{ width: 262 }}
+ destroyTooltipOnHide
>

diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.css b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.css
index f423044b..58d1fa58 100644
--- a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.css
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.css
@@ -6,7 +6,7 @@
}
.container .cardTitle {
color: #bdcee9;
- font-family: 'DingTalk JinBuTi';
+ font-family: 'DingTalk JinBuTialk JinBuTi';
font-size: 22px;
font-weight: 400;
line-height: 26px;
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.css b/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.css
index fa3dd628..c91ba0b7 100644
--- a/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.css
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.css
@@ -19,7 +19,7 @@
border-radius: 38px 0px 25.5px 0px;
background: rgba(62, 147, 199, 0.3);
color: #ffffff;
- font-family: 'DingTalk JinBuTi';
+ font-family: 'DingTalk JinBuTialk JinBuTi';
font-size: 30px;
font-weight: 400;
line-height: 36px;
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.css b/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.css
index 62035f0f..afee059d 100644
--- a/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.css
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.css
@@ -6,7 +6,7 @@
}
.container .cardTitle {
color: #bdcee9;
- font-family: 'DingTalk JinBuTi';
+ font-family: 'DingTalk JinBuTialk JinBuTi';
font-size: 22px;
font-weight: 400;
line-height: 26px;
--
GitLab