diff --git a/src/components/ModeSwitch/index.css b/src/components/ModeSwitch/index.css index 8de9b197f56800d52e18b88feb783c736edd7412..14755e4ad420ea7c58fe095d10f965cdbe03394c 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 00c6f02b9e9661d702a9456940930e9a1fb5e57e..cba65a70f27d97beda942e34ebac579db835fc5f 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 76fbf96b401a33ea698a5bcea13c3222cad0aaca..b116ad2e76be0713e43249363ccf92b32e13383b 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 f23566673e6263c18e10dfa5e00007f5858ce6fc..fc8196a101805784303caedfe02b49b738c10f99 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 8bddfaffca76a81b4dbd078ca5de74fa123deca4..185048ab6874c2f7b7ce305692eb958372cf1484 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 e7f6a51bcc4820c9fe93f1670b9b636259b68cf4..5f04ea369974fe97a5df96224d10c6134eb4c266 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 afa670effcfc80283258061f167275a1fe6af347..4448fa815d6b00ccfa5d28e6e55f7d4647a57de5 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 c700ebc3ba730bc4420d210b70eaf61fbb6187d7..7a3eacd45ac25c24999c540c2872b935118bd0b5 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 21a59ea4ba2c8748a38c42041e32f2a9e6559c6c..e273941ccb1a9bc59f38caf903f85e1596935f63 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 f4f1744db9693731ffac8a0ed01d205678cf98d6..783b46133ff9756d18d2cdcde12110cb007f7a74 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 fd17290bf4c70d228a861e1ff77c75304703308d..265e55fe5877715cc1c5b288e720ee87b3d69b84 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 0b469916b887e04c0fbd9d75ce8673e6312dbe57..732d234be045c05cbaad93456a37d4a2c74713bf 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 b4b701e9522e40d33bf0412ab9799a5038c7bc65..c99ae2a20498ef052740fa27cd22635e65313dd7 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 b93a1dd9c9fe9f2512b0433ba8eb24df10b3d29d..8256af172bf178ed7ade1155a8a153ffe00bfee7 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 d1f1e6d6b4195a9fabd5c026cf6c70b44cdfbd00..3d667dc9816d9c065b9e855b24bea9d96d113d66 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 f423044b4b88ee7e4014187e59dd247e066474f3..58d1fa58849d17701a2636c09302d4eaafd2b068 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 fa3dd628d4cca3c4a9c00ffaf07920ca9a4046de..c91ba0b72a5fe584393bffea96d38c9eb44b6ecd 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 62035f0f0f83d80eeacecb08dce5e7626550ebf3..afee059de6253f5691df74f29f86a1e1d95a935d 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;