+ {unit}
+
+
+ {name}
+
+ );
+
return (
-
-
-
);
};
diff --git a/src/components/ModeSwitch/index.css b/src/components/ModeSwitch/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..fb3316e23d142ec9b37b3e93df5b3a7fbe3f5a4e
--- /dev/null
+++ b/src/components/ModeSwitch/index.css
@@ -0,0 +1,43 @@
+.container {
+ width: 257px;
+ height: 40px;
+ border-radius: 25px;
+ background: #123D66;
+ position: relative;
+ cursor: pointer;
+ overflow: hidden;
+}
+.container .slider {
+ position: absolute;
+ width: 131px;
+ height: 40px;
+ border-radius: 25px;
+ background: linear-gradient(180deg, #1cc0ff, #5294ff 100%);
+ transition: transform 0.3s ease;
+ transform: translateX(0);
+}
+.container .slider.checked {
+ transform: translateX(126px);
+}
+.container .textWrapper {
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+}
+.container .textWrapper span {
+ width: 80px;
+ font-size: 20px;
+ font-family: '钉钉进步体';
+ font-weight: 400;
+ line-height: 24px;
+ text-align: center;
+ transition: color 0.3s ease;
+ color: #6194c7;
+}
+.container .textWrapper span.active {
+ color: #ffffff;
+}
diff --git a/src/components/ModeSwitch/index.less b/src/components/ModeSwitch/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..3c8c8e168961cdff23dcc9d04f0ce2c0fd010104
--- /dev/null
+++ b/src/components/ModeSwitch/index.less
@@ -0,0 +1,48 @@
+.container {
+ width: 257px;
+ height: 40px;
+ border-radius: 25px;
+ background: #123D66;
+ position: relative;
+ cursor: pointer;
+ overflow: hidden;
+
+ .slider {
+ position: absolute;
+ width: 131px;
+ height: 40px;
+ border-radius: 25px;
+ background: linear-gradient(180deg, rgb(28, 192, 255), rgb(82, 148, 255) 100%);
+ transition: transform 0.3s ease;
+ transform: translateX(0);
+
+ &.checked {
+ transform: translateX(126px);
+ }
+ }
+
+ .textWrapper {
+ position: relative;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+
+ span {
+ width: 80px;
+ font-size: 20px;
+ font-family: '钉钉进步体';
+ font-weight: 400;
+ line-height: 24px;
+ text-align: center;
+ transition: color 0.3s ease;
+ color: rgb(97, 148, 199);
+
+ &.active {
+ color: rgb(255, 255, 255);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/ModeSwitch/index.tsx b/src/components/ModeSwitch/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0feb5f43042ee35d53bd3793e5ed0417f3f385a5
--- /dev/null
+++ b/src/components/ModeSwitch/index.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import styles from './index.less';
+import classNames from 'classnames';
+
+interface ModeSwitchProps {
+ checked: boolean;
+ onChange: (checked: boolean) => void;
+}
+
+const ModeSwitch: React.FC
- {unit}
-
-
- {name}
-
+ {reverseName ? (
+ <>
+ {Label}
+ {ValueAndUnit}
+
+ ) : (
+ <>
+ {ValueAndUnit}
+ {Label}
+
+ )}
onChange(!checked)}>
+
+
+ );
+};
+
+export default ModeSwitch;
\ No newline at end of file
diff --git a/src/layouts/Header/index.css b/src/layouts/Header/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..d1098d7e9da4d784e407c8b1a349c366b3a86d0a
--- /dev/null
+++ b/src/layouts/Header/index.css
@@ -0,0 +1,79 @@
+.container {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ height: 90px;
+ padding: 0 70px;
+ position: relative;
+}
+.container .title {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 690px;
+ height: 63px;
+ top: 16px;
+}
+.container .leftCard {
+ border-radius: 29px;
+ -webkit-backdrop-filter: blur(4px);
+ backdrop-filter: blur(4px);
+ height: 58px;
+ background: linear-gradient(139.3deg, rgba(89, 186, 238, 0.4) 7%, rgba(96, 155, 236, 0.4) 94%);
+ display: flex;
+ padding: 0 12px 0 26px;
+ align-items: center;
+ gap: 16px;
+}
+.container .leftCard > :nth-child(1) {
+ color: rgba(255, 255, 255, 0.8);
+ font-size: 20px;
+ font-weight: 400;
+}
+.container .leftCard > :nth-child(2) {
+ color: #ffffff;
+ font-size: 20px;
+ font-weight: 700;
+}
+.container .leftCard img {
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+}
+.container .leftCard img:hover {
+ filter: brightness(0.8);
+}
+.container .leftCard img:active {
+ transform: scale(0.95);
+}
+.container .rightCard {
+ color: #ffffff;
+ font-size: 20px;
+ font-weight: 700;
+ -webkit-backdrop-filter: blur(4px);
+ backdrop-filter: blur(4px);
+ width: 145px;
+ border-radius: 29px;
+ height: 58px;
+ text-align: center;
+ cursor: pointer;
+ line-height: 58px;
+ background: linear-gradient(139.3deg, rgba(89, 186, 238, 0.3) 7%, rgba(96, 155, 236, 0.3) 94%);
+}
+.container .rightCard:hover {
+ filter: brightness(0.8);
+}
+.container .rightCard:active {
+ transform: scale(0.95);
+}
+.container .modeSwitch {
+ min-width: 100px;
+ height: 32px;
+}
+.container .modeSwitch .ant-switch-inner {
+ font-size: 20px;
+ font-weight: 700;
+}
+.container .modeSwitch.ant-switch-checked {
+ background: #1890ff;
+}
diff --git a/src/layouts/Header/index.less b/src/layouts/Header/index.less
index e8f54bf6eac792efce7844f03c7f8997546820e6..0066b0da12d5e2adb19a2c0b4912c8e3a49d2d16 100644
--- a/src/layouts/Header/index.less
+++ b/src/layouts/Header/index.less
@@ -84,4 +84,20 @@
transform: scale(0.95);
}
}
+
+ .modeSwitch {
+ min-width: 100px;
+ height: 32px;
+
+ // :global {
+ .ant-switch-inner {
+ font-size: 20px;
+ font-weight: 700;
+ }
+
+ &.ant-switch-checked {
+ background: #1890ff;
+ }
+ // }
+ }
}
diff --git a/src/layouts/Header/index.tsx b/src/layouts/Header/index.tsx
index 9af3663338f85dbb5f2a2d60e3faacecd7c61855..fbf66742f5f4606785f8782d47995032b0666aa3 100644
--- a/src/layouts/Header/index.tsx
+++ b/src/layouts/Header/index.tsx
@@ -1,45 +1,54 @@
-import { Avatar, Badge, Space } from "antd";
-import styles from "./index.less";
+import ModeSwitch from '@/components/ModeSwitch';
+import { useLocation, useNavigate } from '@umijs/max';
+import { Avatar, Space } from 'antd';
+import styles from './index.less';
-/** @name Header */
+/** @name Header */
export default function Header() {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const isOverviewMode = location.pathname === '/overview';
+
+ const handleModeChange = (checked: boolean) => {
+ // true 为统览模式, false 为专题模式
+ navigate(checked ? '/overview' : '/home/urbanSituation');
+ };
const handleJump = () => {
- const url = 'https://10.1.174.34:13000'
+ const url = 'https://10.1.174.34:13000';
window.open(url, '_blank');
- }
+ };
return (
+ 专题模式
+ 统览模式
+
+ ![]({require("@/assets/images/common/title.png")})
-
+ />
+
+
![]({require("@/assets/images/common/phone.png")})
+ })
+
- */}
+
+
指挥长
- 郭明天
-
+ //
+
值班长
- 张明
-
+ //
+
值班员
- 赵明
-
- //
+
+ 指挥调度
-
+ 指挥调度
+
+
{
diff --git a/src/pages/Common/Quality/Category/index.tsx b/src/pages/Common/Quality/Category/index.tsx
index 35e17d0b3b4a55b80909d88f3585aaef091c2c7b..fd30952295fb6c52030eb31324a54487efdb6bb1 100644
--- a/src/pages/Common/Quality/Category/index.tsx
+++ b/src/pages/Common/Quality/Category/index.tsx
@@ -8,12 +8,10 @@ import SignLeft from './SignLeft';
import SignTop from './SignTop';
import styles from './index.less';
import services from '@/services';
-import { useModel } from '@umijs/max';
const Category = ({ item }: { item: any }) => {
- const { initialState } = useModel('@@initialState');
- const { areaId } = initialState;
+
console.log('category', item)
const [indexSystemData, setIndexSystemData] = useState({})
diff --git a/src/pages/Common/Quality/SafetyProblem/index.tsx b/src/pages/Common/Quality/SafetyProblem/index.tsx
index 222afed9eb3274a8dc571ba73b360d18b2a27498..34c8066c5b4a68d19171ac7434344918a39ebd44 100644
--- a/src/pages/Common/Quality/SafetyProblem/index.tsx
+++ b/src/pages/Common/Quality/SafetyProblem/index.tsx
@@ -43,14 +43,16 @@ const SafetyProblem: React.FC = ({ listHeight = 650, indexsI
//下一页
const loadMoreData = () => {
- page.current.page++
+ // page.current.page++
};
const getListData = () => {
const params = {
indexId: indexsItems?.id,
objectId: indexsItems?.objectId,
- indexType: '1'
+ indexType: '1',
+ pageNo: page.current.page,
+ pageSize: 50
}
services.Physicalsign.getIndexSafetyProblemList(params).then((res: any) => {
if (res.code === 200) {
@@ -60,8 +62,10 @@ const SafetyProblem: React.FC = ({ listHeight = 650, indexsI
}
useEffect(() => {
- getListData()
- }, [])
+ if(indexsItems?.objectId) {
+ getListData()
+ }
+ }, [indexsItems?.objectId])
return (
diff --git a/src/pages/Common/Quality/TraceSourceOfLostPoints/index.tsx b/src/pages/Common/Quality/TraceSourceOfLostPoints/index.tsx
index f95c6bad2bcabd8627710012f0eb5c96897dfa4f..da96db6d6e9089bac84d114d1d42e8beb4e0c4c2 100644
--- a/src/pages/Common/Quality/TraceSourceOfLostPoints/index.tsx
+++ b/src/pages/Common/Quality/TraceSourceOfLostPoints/index.tsx
@@ -1,3 +1,4 @@
+import EmptySpace from '@/components/EmptySpace';
import services from '@/services';
import { useModel } from '@umijs/max';
import ReactEcharts from 'echarts-for-react';
@@ -217,6 +218,15 @@ const TraceSourceOfLostPoints: React.FC = (props)
}
}
- return
{item.sub.map((subItem) => (
- setSignModalOpt({ open: false, title: '', data: {} })}
+ width={1470}
+ height={846}
+ >
+
);
};
diff --git a/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.less b/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.less
index 03d307544684a764f5aa7030e639ff7b183994ca..e82b77d7ec891a726f3e81065a2fce902ebac9f9 100644
--- a/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.less
+++ b/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.less
@@ -2,7 +2,7 @@
width: 639px;
height: 156px;
border-radius: 20px;
- padding: 30px 18px;
+ padding: 30px 18px 10px 18px;
background: rgba(57, 122, 183, 0.2);
}
@@ -138,3 +138,28 @@
text-align: center;
}
}
+
+.content {
+ font-size: 20px;
+ color: #bccee9;
+ padding: 0 34px;
+ margin-top: 22px;
+ .riskItem {
+ cursor: pointer;
+ .label {
+ // margin-left: -20px;
+ // vertical-align: -5px;
+ }
+ }
+}
+
+.riskNum {
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ font-family: D-DIN;
+ font-size: 40px;
+ font-weight: 700;
+ vertical-align: -5px;
+ margin-right: 10px;
+}
diff --git a/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.tsx b/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.tsx
index ff9fd96bad846cb054b803b91c5c89419a029caa..c586cb9527705510457b0e6b280373dde7529516 100644
--- a/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.tsx
+++ b/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.tsx
@@ -5,9 +5,15 @@ import EmptySpace from '@/components/EmptySpace';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Flex, Space } from 'antd';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
import PieChart from '../PieChart';
import styles from './index.less';
+import risk1 from '@/assets/images/urbanSituation/risk1.svg'
+import risk2 from '@/assets/images/urbanSituation/risk2.svg'
+import risk3 from '@/assets/images/urbanSituation/risk3.svg'
+import risk4 from '@/assets/images/urbanSituation/risk4.svg'
+import Modal from '@/components/HncyModal';
+import RiskEvents from '@/pages/Common/Event/RiskEvents';
const RightBox: React.FC<{ objectId: string }> = ({ objectId }) => {
//查询城市问题
const { data: cityPieData } = useRequest(() =>
@@ -19,6 +25,9 @@ const RightBox: React.FC<{ objectId: string }> = ({ objectId }) => {
startTime: '',
endTime: '',
}),
+ {
+ refreshDeps: [objectId],
+ },
);
//查询重点关注
const { data: importAreaData } = useRequest(() =>
@@ -30,6 +39,9 @@ const RightBox: React.FC<{ objectId: string }> = ({ objectId }) => {
indexHierarchy: '1',
objectHierarchy: '19',
}),
+ {
+ refreshDeps: [objectId],
+ },
);
//城市问题饼图
const cityProblem = useMemo(() => {
@@ -63,20 +75,94 @@ const RightBox: React.FC<{ objectId: string }> = ({ objectId }) => {
};
return (total - noHandle) / total;
}, [cityPieData]);
+
+ const [modalOpt, setModalOpt] = useState<{
+ open: boolean;
+ title: string;
+ type: string; // 弹窗类型：todayNum 今日事件数，disposalNum 待处理事件数
+ }>({
+ open: false,
+ title: '',
+ type: ''
+ })
+
+ const [statisticsData, setStatisticsData] = useState{
- window.open(subItem?.url)
- }}>
+ {
- const { title, extra, data, strokeColor } = props
+ const { title, extra, data, strokeColor } = props;
return (
{
}}
>
= ({
width: 336,
height: 85,
}}
- data={indexs?.indexDataList?.map((item: any) => ({
+ data={cqiData?.currentIndex?.indexDataList?.map((item: any) => ({
value: item?.qualitySign,
- name: item?.objectName,
+ name: item?.time,
}))}
/>
@@ -156,6 +193,11 @@ const RealtimeCQI: React.FC<{ data: any; indexs: any }> = ({
key={index}
className={styles.card}
style={{ background: item.background }}
+ onClick={() => {
+ setModalOpen(true);
+ setModalOpt([{ title: item.name, type: 'category' }]);
+ setCurrentCqiData({ ...item, objectId: cqiData?.currentIndex?.objectId });
+ }}
>
+
- ))}
+ )}
+ {
+ indexTop3?.data?.length ? (
+ <>
+ {indexTop3?.data?.map((item, index) => (
+ setSignModalOpt({ open: true, title: '影响指标', data: item })}
+ >
+
+
+
+ }
+ >
+
+
+ {
+ if (subItem?.url === '') {
+ message.error('暂未获取系统链接！');
+ } else {
+ window.open(subItem?.url);
+ }
+ }}
+ >
{subItem.name}
))}
diff --git a/src/pages/Common/Sign/SignModel/SignStatus/index.less b/src/pages/Common/Sign/SignModel/SignStatus/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..21a186a5d3e3d4564912ad945d3e48a194e63ca1
--- /dev/null
+++ b/src/pages/Common/Sign/SignModel/SignStatus/index.less
@@ -0,0 +1,35 @@
+.container {
+ padding: 50px 100px;
+
+ .itemWarp {
+ margin-bottom: 48px;
+ .titleWarp {
+ display: flex;
+ align-items: center;
+
+ .dot {
+ width: 30px;
+ height: 20px;
+ border-radius: 10px;
+ }
+
+ .title {
+ margin-left: 20px;
+ color: rgb(255, 255, 255);
+ font-size: 18px;
+
+ span {
+ font-family: DingTalk JinBuTi;
+ font-size: 22px;
+ }
+ }
+ }
+
+ .desc {
+ color: rgb(203, 237, 255);
+ font-size: 18px;
+ padding-left: 50px;
+ margin-top: 15px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Common/Sign/SignModel/SignStatus/index.tsx b/src/pages/Common/Sign/SignModel/SignStatus/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0fecd2e7587f39a5994e42b32aac56a9d987c222
--- /dev/null
+++ b/src/pages/Common/Sign/SignModel/SignStatus/index.tsx
@@ -0,0 +1,50 @@
+import styles from './index.less';
+const SignStatus = () => {
+ const list = [
+ {
+ name: '理想态',
+ pre: '（95分以上）',
+ desc: '表示问题数量少、处置效率高，城市管理整体运行良好。',
+ color: 'rgb(87, 239, 88)',
+ },
+ {
+ name: '标准态',
+ pre: '（85分-95分）',
+ desc: '表示管理达标，但仍有优化空间。',
+ color: 'rgb(68, 127, 240)',
+ },
+ {
+ name: '预警态',
+ pre: '（85分一下）',
+ desc: '提示问题积压或处置效率下降，需要加大治理力度。',
+ color: 'rgb(255, 162, 80)',
+ },
+ {
+ name: '应急态',
+ pre: '（发生重大应急事件）',
+ desc: '发生重大应急事件时，提醒管理资源需快速响应。',
+ color: 'rgb(255, 95, 95)',
+ },
+ ];
+ return (
+
+ {list?.map((item) => {
+ return (
+
+ );
+};
+
+export default SignStatus;
diff --git a/src/pages/Common/Sign/SignModel/index.tsx b/src/pages/Common/Sign/SignModel/index.tsx
index 75db54784244e2a7fd1388b4af0aa900a50ebc67..d050ddac1400863ebd367d39d0b210c622c69181 100644
--- a/src/pages/Common/Sign/SignModel/index.tsx
+++ b/src/pages/Common/Sign/SignModel/index.tsx
@@ -7,6 +7,7 @@ import SignArithmetic from './SignArithmetic';
import styles from './index.less';
import { treeToArray } from '@/utils/index';
import BaseCard from '@/pages/Common/components/BaseCard';
+import SignStatus from './SignStatus';
/**
* @description 体征模型
@@ -98,6 +99,13 @@ const SignModel = () => {
const tabItems = useMemo(() => {
return [
+ {
+ label: `体征状态`,
+ key: '0',
+ children: (
+
+
+ );
+ })}
+
+
+
+
+
+
+ {item.name} {item.pre}
+
+ {item.desc}
+
- {
- data.map((item, index) => (
-
- = ({
- data,
- indexs,
+const RealtimeCQI: React.FC<{ objectId: string; }> = ({
+ objectId,
}) => {
+ console.log('realtimeCqi', objectId);
+ const { setModalOpen, setModalOpt, setCurrentCqiData } = useModel(
+ 'qualityModal',
+ (model) => ({
+ setModalOpen: model.setModalOpen,
+ setModalOpt: model.setModalOpt,
+ setCurrentCqiData: model.setCurrentCqiData,
+ }),
+ );
+ const [signModalOpt, setSignModalOpt] = useState<{
+ open: boolean;
+ title: string;
+ data: any;
+ }>({
+ open: false,
+ title: '',
+ data: {}
+ })
+ const [cqiData, setCqiData] = useState({})
//影响指标Top3
- const { data: indexTop3 } = useRequest(
+ const { data: indexTop3, loading } = useRequest(
() =>
services.Physicalsign.getPhysicalsignindexquestioninstanceListTop({
- objectId: data?.objectId, // 对象id
+ objectId: objectId, // 对象id
indexId: '1',
n: '3', // Top3
indexType: '1', // 内评价0，外评价1，默认外评价
physicalSignType: '1',
}),
{
- refreshDeps: [data?.objectId],
+ refreshDeps: [objectId],
},
);
const cards = useMemo(() => {
@@ -32,60 +55,74 @@ const RealtimeCQI: React.FC<{ data: any; indexs: any }> = ({
{
name: '安全',
value:
- indexs?.indexs?.find((item: any) => item.name === '安全')?.value ?? 0,
- ...getCqiStatusStyle(indexs?.indexs?.find((item: any) => item.name === '安全')?.value)
- // color: '#57EF58',
- // background: 'rgba(39, 211, 134, 0.2)',
+ cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '安全')?.value ?? 0,
+ ...getCqiStatusStyle(cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '安全')?.value)
},
{
name: '整洁',
value:
- indexs?.indexs?.find((item: any) => item.name === '整洁')?.value ?? 0,
- ...getCqiStatusStyle(indexs?.indexs?.find((item: any) => item.name === '整洁')?.value)
- // color: '#FFA250',
- // background: 'rgba(255, 188, 130, 0.2)',
+ cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '整洁')?.value ?? 0,
+ ...getCqiStatusStyle(cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '整洁')?.value)
},
{
name: '有序',
value:
- indexs?.indexs?.find((item: any) => item.name === '有序')?.value ?? 0,
- ...getCqiStatusStyle(indexs?.indexs?.find((item: any) => item.name === '有序')?.value)
- // color: '#447FF0',
- // background: 'rgba(130, 173, 255, 0.2)',
+ cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '有序')?.value ?? 0,
+ ...getCqiStatusStyle(cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '有序')?.value)
},
{
name: '便民',
value:
- indexs?.indexs?.find((item: any) => item.name === '便民')?.value ?? 0,
- ...getCqiStatusStyle(indexs?.indexs?.find((item: any) => item.name === '便民')?.value)
- // color: '#57EF58',
- // background: 'rgba(39, 211, 134, 0.2)',
+ cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '便民')?.value ?? 0,
+ ...getCqiStatusStyle(cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '便民')?.value)
},
{
name: '美观',
value:
- indexs?.indexs?.find((item: any) => item.name === '美观')?.value ?? 0,
- ...getCqiStatusStyle(indexs?.indexs?.find((item: any) => item.name === '美观')?.value)
- // color: '#57EF58',
- // background: 'rgba(39, 211, 134, 0.2)',
+ cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '美观')?.value ?? 0,
+ ...getCqiStatusStyle(cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '美观')?.value)
},
];
- }, [indexs]);
+ }, [cqiData]);
+
+ // 获取CQI数据
+ const getCqiData = () => {
+ const params = {
+ physicalSignType: '1', // 1实况指数 3周期指数
+ indexType: '1', // 指数体系类型 0:内评价 1:外评价
+ indexHierarchy: '1,2', // 指数层级，从1开始，多个用,逗号隔开
+ objectId: objectId, // 区域网格id
+ indexId: '', // 指数id
+ };
+ services.Physicalsign.getComparisonIndexInstance(params).then((res) => {
+ if (res.code === 200) {
+ setCqiData(res.data);
+ }
+ });
+ };
+
+ useEffect(() => {
+ if(objectId) {
+ getCqiData();
+ }
+ }, [objectId]);
+
+
return (
实时CQI
- {data?.indexTime}
+ {cqiData?.currentIndex?.time}
- 较{dayjs().diff(data?.indexTime, 'h')}小时前
+ 较{dayjs().diff(cqiData?.indexTime, 'h')}小时前
- {data?.status === 'up' ? (
+ {cqiData?.status === 'up' ? (
@@ -117,20 +154,20 @@ const RealtimeCQI: React.FC<{ data: any; indexs: any }> = ({
- {data?.qualitySign}
+ {cqiData?.currentIndex?.cqi}
- {getStatus(data?.qualitySign)?.tag}
+ {getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.text}
- {getStatus(data?.qualitySign)?.desc}
+ {getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.desc}
{item.name}
-
-
+ {data.map((item, index) => (
+
+
+
-
-
- ))
- }
+
- )
-}
+ );
+};
-export default ProcessCard
\ No newline at end of file
+export default ProcessCard;
diff --git a/src/pages/GlobalModalServices/components/LineCharts/index.tsx b/src/pages/GlobalModalServices/components/LineCharts/index.tsx
index f242dde407108d18a3ed347a0d6e503b6806119d..30b6b327ac4ac93904ac475a7ec785a36b20af6b 100644
--- a/src/pages/GlobalModalServices/components/LineCharts/index.tsx
+++ b/src/pages/GlobalModalServices/components/LineCharts/index.tsx
@@ -10,11 +10,14 @@ const LineCharts = ({
const option = useMemo(() => {
const showXAis = false;
return {
+ tooltip: {
+ trigger: 'axis',
+ },
xAxis: {
type: 'category',
boundaryGap: false,
show: showXAis,
- data: showXAis ? data?.map((item: any) => item.name) : [],
+ data: data?.map((item: any) => item.name) || [],
},
yAxis: {
type: 'value',
@@ -59,7 +62,7 @@ const LineCharts = ({
},
],
};
- }, []);
+ }, [data]);
return (
+ {item.name}
+
+
+
+
+
+ {item?.value}
+ 件
-
- {item?.value}
- 件
-
-
- {item?.percent}
- %
-
-
+ {item?.percent}
+ %
+
+
+
+ ))}
{item.name}
@@ -167,37 +209,62 @@ const RealtimeCQI: React.FC<{ data: any; indexs: any }> = ({
影响指标TOP3
- {indexTop3?.data?.map((item, index) => (
-
-
-
-
- }
- >
- TOP{index + 1}
- {item.conditionName}
- {item.fullName} -
-
-
-
- {item.conditionName}
- {item.fullName} -
- 影响占比
- {item.percentage}
- %
-
+ {loading && (
+ TOP{index + 1}
+ {item.conditionName}
+ {item.fullName} +
+
+
+
+ {item.conditionName}
+ {item.fullName} +
+ 影响占比
+ {item.percentage}
+ %
+
+
+ ))}
+
+ ) : 城市风险
- 重大风险12个
-
-
- 较大风险12个
-
-
- 一般风险12个
-
+ {
+ riskData.map((item) => (
+ setModalOpt({
+ open: true,
+ type: item.type,
+ title: '安全风险',
+ })}
+ >
+
+ 
+
+
+
+
+
+ ))
+ }
+ {item.value}
+ 个
+
+ {item.label}
+
@@ -152,8 +238,9 @@ const RightBox: React.FC<{ objectId: string }> = ({ objectId }) => {
style={{
marginTop: 16,
}}
+ gap={20}
>
- {importAreaData?.data?.map((item, index) => (
+ {importAreaData?.data?.slice(0, 3)?.map((item, index) => (
= ({ objectId }) => {
))}
+
-
diff --git a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.less b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.less
index 4545665c8030edcadb92fa8f7d85d41d94a4640c..404e05600b97be8bdecbaa84fd7fad469ecd2462 100644
--- a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.less
+++ b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.less
@@ -78,6 +78,7 @@
left: 0;
top: 40px;
padding: 16px 25px;
+ overflow-y: auto;
}
.listTitle {
diff --git a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx
index a5f881b8f3e022c44a0d75e7e20418c935bc8f1a..39a65d30d98884e3f8dd8a499601dfa6c0968897 100644
--- a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx
+++ b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx
@@ -1,11 +1,13 @@
// import BMapView from '@/components/BMapView';
import CooglMap from '@/components/CooglMap';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
-import { getColorByIndex } from '@/utils/ui';
+import BMapService from '@/utils/mapService';
+import { getColorByIndex, getCqiStatusStyle } from '@/utils/ui';
import { DownCircleFilled, UpCircleFilled } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import React, { CSSProperties, useEffect, useRef, useState } from 'react';
import styles from './index.less';
+import services from '@/services';
const Map: React.FC = () => {
const [expand, setExpand] = useState
{/* {isBmap ? (
@@ -199,7 +223,7 @@ const Map: React.FC = () => {
重点区域列表
- {data.map((item, index) => {
+ {areaList?.map((item, index) => {
return (
{
setExpand(index);
}}
>
-
-
{expand === index && (
= (props) => {
+ const { objectId } = props;
+
+ const [currentObjectData, setCurrentObjectData] = useState({})
-const Map: React.FC = () => {
const [expandStatus, setExpandStatus] = useState(true);
const listRef = useRef(null);
const MapRef = useRef();
@@ -73,6 +83,25 @@ const Map: React.FC = () => {
8: require('@/assets/images/keyArea/people.png'),
};
+ const getObjectPolygon = async () => {
+ const params = {
+ physicalSignType: 1,
+ objectHierarchy: 19,
+ objectId
+ }
+ const res = await services.Physicalsign.getObjectPolygon(params)
+ if (res.code === 200) {
+ if (res.data?.length) {
+ console.log(res.data)
+ setCurrentObjectData(res.data[0])
+ }
+ }
+ }
+
+ useEffect(() => {
+ getObjectPolygon()
+ }, [objectId])
+
return (
{item.name}
+ {item?.objGroup}
{item.num}
+ {item?.objects?.length}
个
{index === expand ? (
- {item.child.map((child, child_index) => {
+ {item?.objects.map((child, child_index) => {
return (
{
className={styles.childItem}
justify="space-between"
>
-
-
);
};
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx
index 645e6cada1793053ccacfbc31b8327362c352f5b..2ea1afccff15c9980a73d348878f967e7cf9e12f 100644
--- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx
+++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx
@@ -5,13 +5,23 @@ import CooglMap from '@/components/CooglMap';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import gsap from 'gsap';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Marker } from 'react-bmapgl';
import FilterTree from '../FilterTree';
import LiveSlideshow from '../LiveSlideshow';
import InfoWindow from './components/InfoWindow';
import styles from './index.less';
+import services from '@/services';
+
+interface MapProps {
+ objectId: string;
+}
+
+const Map: React.FC{child.name}
-
- {child.value}
+
-
-
);
};
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.tsx
index e9431326739bbd2d51495bb18fd330fabf34f4b9..a83851610da4deee177759563d59aa9a88e3f33f 100644
--- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.tsx
+++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.tsx
@@ -25,9 +25,9 @@ const LiveSlideshow: React.FC = () => {
{child.objectName}
+
+ {child.cqi}
);
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/AreaCQI/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/AreaCQI/index.tsx
index 53991a62420c423d4d698201b16503aa5e0e1950..edca50aeaf2030c9707bdd4c57d2e2da88eccd28 100644
--- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/AreaCQI/index.tsx
+++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/AreaCQI/index.tsx
@@ -4,11 +4,12 @@ import React from 'react';
import Map from '../Map';
import styles from './index.less';
-const AreaCQI: React.FC = () => {
+const AreaCQI: React.FC<{ objectId: string }> = (props) => {
+ const { objectId } = props;
return (
非机动车乱停放
+ {/*
*/}
更
多 -
+ 多 -
{/* {isBmap ? (
@@ -81,7 +110,7 @@ const Map: React.FC = () => {
ref={MapRef}
onClick={(e) => console.log(e)}
style={{ width: '100%', height: '110%' }}
- center={new BMapGL.Point(104.066349, 30.658842)}
+ center={new BMapGL.Point(currentObjectData?.centerX, currentObjectData?.centerY)}
>
{pList.map((item, index) => {
return (
@@ -109,34 +138,41 @@ const Map: React.FC = () => {
>
)}
- ) : ( */}
-
- {pList.map((item, index) => {
- return (
- {
- setSelected(item);
+ ) : (
+
+ {pList.map((item, index) => {
+ return (
+ {
+ setSelected(item);
+ }}
+ position={item.l}
+ icon={(iconList as any)[index + 1]}
+ >
+ );
+ })}
+ {selected && (
+ {
+ setSelected(undefined);
}}
- position={item.l}
- icon={(iconList as any)[index + 1]}
- >
- );
- })}
- {selected && (
- {
- setSelected(undefined);
- }}
- >
- )}
-
- {/* )} */}
+ >
+ )}
+
*/}
-
+
+ {/*
@@ -162,22 +198,22 @@ const Map: React.FC = () => {
alt=""
>
-
+ */}
);
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/SidebarMenu/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/SidebarMenu/index.tsx
index 49496cd473337a6ab372ae9dc6d7258680bfef16..c70005cb1f4d415ac7b68f59081eae732ea4f974 100644
--- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/SidebarMenu/index.tsx
+++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/SidebarMenu/index.tsx
@@ -1,76 +1,100 @@
import { getColorByIndex } from '@/utils/ui';
-import React from 'react';
+import React, { useMemo } from 'react';
import styles from './index.less';
/** @name 侧边栏目录 */
const SidebarMenu: React.FC<{
menuClickHandle: (params: any) => void;
active: number;
+ cqi: string
}> = (props) => {
- const { menuClickHandle, active } = props;
+ const { menuClickHandle, active, cqi } = props;
- const menu = [
- {
- element: (
- 启用百度地图
- 值班元
张三 15885632365
{expandStatus ? (
-
-
+
收
起
-
+
@@ -190,7 +226,7 @@ const Map: React.FC = () => {
展
开
-川大路152号
+ {/*
-
+
*/}
移动AI感知源
公交车-川A12345
@@ -256,7 +292,7 @@ const Map: React.FC = () => {
>
-
- ),
- },
- {
- element: (
- CQI
- 98.5
-
-
- ),
- },
- {
- element: (
-
- 6件
-
- 城市问题
-
-
- 6件
+ const menuList = useMemo(() => {
+ return [
+ {
+ element: (
+
- ),
- },
- {
- element: (
-
+
- CQI
+ {cqi}
城市风险
-
-
- 12个
+ ),
+ },
+ {
+ element: (
+
- ),
- },
- {
- element: (
-
+
-
+ 6件
+
+ 城市问题
城市部件
-
-
- ),
- },
- {
- element: (
-
- 12个
-
- 感知源
-
-
- ),
- },
+ ),
+ },
+ ]
+ }, [cqi])
+
+ const menu = [
+ // {
+ // element: (
+ // 巡查
- 覆盖
-
+ //
+ // ),
+ // },
+ // {
+ // element: (
+ // CQI
+ // 98.5
+ //
+ //
+ // ),
+ // },
+ // {
+ // element: (
+ //
+ // 6件
+ //
+ // 城市问题
+ //
+ //
+ // ),
+ // },
+ // {
+ // element: (
+ //
+ // 6件
+ //
+ // 城市风险
+ //
+ //
+ // ),
+ // },
+ // {
+ // element: (
+ //
+ // 12个
+ //
+ // 城市部件
+ //
+ //
+ // ),
+ // },
+ // {
+ // element: (
+ //
+ // 12个
+ //
+ // 感知源
+ //
+ //
+ // ),
+ // },
];
return (
巡查
+ // 覆盖
+ //
- {menu.map((item, i) => (
+ {menuList.map((item, i) => (
menuClickHandle(i)}
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/index.tsx
index 20c3475c049ffd10db324f1ce70e8c46f3596cfe..c630e8b5ca2532aff38aaf0b1f1e73a540cbbe9d 100644
--- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/index.tsx
+++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/index.tsx
@@ -6,9 +6,10 @@ import SidebarMenu from './SidebarMenu';
import UrbanProblem from './UrbanProblem';
/** @name 重点区域 */
-const KeyAreaDetail: React.FC = () => {
+const KeyAreaDetail: React.FC<{ objectId: string, cqi: string }> = (props) => {
const [active, setActive] = useState(0);
-
+ const { objectId, cqi } = props
+ console.log('KeyAreaDetail', objectId)
return (
{
setActive(params);
}}
active={active}
+ cqi={cqi}
>
- {active === 0 &&
);
diff --git a/src/pages/Home/index.css b/src/pages/Home/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..bce36a7ee9cb1969ea6d540f64ca8b773f588874
--- /dev/null
+++ b/src/pages/Home/index.css
@@ -0,0 +1,27 @@
+.container {
+ width: 100%;
+ height: 100%;
+ background-image: url("@/assets/images/common/BG.png");
+ background-size: 100% 100%;
+ box-sizing: border-box;
+ -webkit-user-select: none;
+ user-select: none;
+}
+.container .content {
+ display: flex;
+ height: 860px;
+ padding: 0 70px;
+ margin-top: 50px;
+ gap: 30px;
+}
+.container .content > div {
+ width: 700px;
+}
+.container .content > div:nth-of-type(2) {
+ width: 2235px;
+ height: 100%;
+ border-radius: 50px;
+ background-image: url("@/assets/images/common/pageBg.png");
+ background-size: 100% 100%;
+ overflow: hidden;
+}
diff --git a/src/pages/Home/index.less b/src/pages/Home/index.less
index d123fbd2cd28b7a4178b8391a92ba45e07988b45..8002b5ea06ec7d8bfe46bd8034617200c10e7513 100644
--- a/src/pages/Home/index.less
+++ b/src/pages/Home/index.less
@@ -1,6 +1,7 @@
.container {
width: 100%;
height: 100%;
+ // background-image: url("@/assets/images/newMain/BG.png");
background-image: url("@/assets/images/common/BG.png");
background-size: 100% 100%;
box-sizing: border-box;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index dff559d2e375ecd6ec439ff3d6e3eb15f56fdd46..7fc2916b62dfafeafe695f41749ab6bf8a511b6e 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -5,11 +5,14 @@ import Header from '@/layouts/Header';
import LeftSidebarMenu from '@/layouts/LeftSidebarMenu';
import RightSidebarMenu from '@/layouts/RightSidebarMenu';
+import NewLeftSidebar from "../NewHome/NewLeftSidebar";
+
const Home: React.FC = () => {
return (
+//
+//
+//
+// );
+// };
+// const Home: React.FC = () => {
+// return (
+//
+ {/* > = (props) => {
content={
{
({});
+ const [signModalOpen, setSignModalOpen] = useState(false);
+ const { setModalOpen, setModalOpt, setCurrentCqiData } = useModel(
+ 'qualityModal',
+ (model) => ({
+ setModalOpen: model.setModalOpen,
+ setModalOpt: model.setModalOpt,
+ setCurrentCqiData: model.setCurrentCqiData,
+ }),
+ );
+
+ // 获取CQI数据
+ const getCqiData = () => {
+ const params = {
+ physicalSignType: '1',
+ indexType: '1',
+ indexHierarchy: '1,2',
+ objectId: areaId,
+ indexId: '',
+ };
+ services.Physicalsign.getComparisonIndexInstance(params).then((res) => {
+ if (res.code === 200) {
+ setCqiData(res.data);
+ }
+ });
+ };
+
+ useEffect(() => {
+ getCqiData();
+ }, []);
+
+ return (
+ ({});
+
+ const riskData = useMemo(() => {
+ return [
+ {
+ type: '红色风险',
+ label: '红色风险',
+ value: statisticsData?.majorRiskTotal,
+ icon: risk1,
+ color: 'linear-gradient(180deg, rgb(255, 138, 138), rgb(208, 62, 62))',
+ },
+ {
+ type: '橙色风险',
+ label: '橙色风险',
+ value: statisticsData?.significantRiskTotal,
+ icon: risk4,
+ color: 'linear-gradient(180deg, rgb(255, 176, 121), rgb(238, 126, 48))',
+ },
+ {
+ type: '黄色风险',
+ label: '黄色风险',
+ value: statisticsData?.generalRiskTotal,
+ icon: risk3,
+ color: 'linear-gradient(180deg, rgb(255, 228, 155), rgb(231, 182, 55))',
+ },
+ {
+ type: '一般风险',
+ label: '一般风险',
+ value: statisticsData?.ybfxRiskTotal,
+ icon: risk2,
+ color:
+ 'linear-gradient(to right, rgb(122, 177, 255), rgb(37, 128, 255))',
+ },
+ ];
+ }, [statisticsData]);
+
+ const getStatisticsData = () => {
+ services.CityRiskApi.queryStatisticalRiskLevel().then((res) => {
+ if (res.code === 200) {
+ setStatisticsData(res.data);
+ }
+ });
+ };
+
+ useEffect(() => {
+ getStatisticsData();
+ }, []);
+
+ return (
+ = ({
+ style,
+ labelGap = 8,
+ chartStyle = { width: '260px', height: '300px' },
+ data = [],
+ labelClassName,
+ color = ['#FF9B5D', '#FFE335', '#29B5FF'],
+}) => {
+ return (
+
+ {data.length > 0 ? (
+ <>
+
+ );
+};
+export default PieChart;
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..76fbf96b401a33ea698a5bcea13c3222cad0aaca
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.css
@@ -0,0 +1,91 @@
+.container {
+ width: 100%;
+ height: 325px;
+}
+.container .header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+}
+.container .header .title {
+ color: #BDCEE9;
+ font-family: '钉钉进步体';
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 26px;
+ position: relative;
+ padding-left: 20px;
+}
+.container .header .title::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 10px;
+ height: 24px;
+ background: linear-gradient(135.87deg, #56A7FF, #56EEFF 99.55%);
+ border-radius: 0px 4px 4px 0px;
+}
+.container .header .quoteWrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ background: rgba(255, 163, 65, 0.2);
+ border: 1px solid rgba(255, 163, 65, 0.5);
+ border-radius: 50%;
+ box-sizing: border-box;
+ margin-left: 10px;
+ cursor: pointer;
+}
+.container .header .quoteWrapper .quoteIcon {
+ width: 20px;
+ height: 14px;
+ cursor: pointer;
+}
+.container .progressWrap {
+ height: calc(100% - 46px);
+ overflow-y: auto;
+}
+.container .progressWrap .itemName {
+ width: 90px;
+ font-size: 16px;
+ font-weight: 400;
+ color: #fff;
+}
+.container .progressWrap .progress {
+ width: 220px;
+ padding-top: 4px;
+}
+.container .progressWrap .itemNum {
+ font-size: 18px;
+ color: #cbedff;
+}
+.container .progressWrap .itemNum .num {
+ font-family: D-DIN;
+ font-weight: 700;
+ color: #fff;
+ margin-right: 4px;
+}
+.summaryDetail {
+ width: 552px;
+ max-width: 552px;
+ padding: 0 20px;
+ height: 400px;
+ overflow: auto;
+}
+.summaryDetail .desc {
+ flex: 1;
+ width: 100% ;
+ padding-top: 20px;
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 2;
+ color: #CBEDFF;
+}
+.summaryDetail .desc .highlight {
+ color: #1B90FF;
+ font-weight: 700;
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f23566673e6263c18e10dfa5e00007f5858ce6fc
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.less
@@ -0,0 +1,167 @@
+.container {
+// margin-top: 20px;
+// padding: 20px;
+// background: rgba(8, 24, 63, 0.7);
+// border-radius: 15px;
+ width: 100%;
+// width: 440px;
+ height: 325px;
+
+ .header {
+ display: flex;
+ align-items: center;
+ // justify-content: space-between;
+ margin-bottom: 20px;
+
+ .title {
+ color: #BDCEE9;
+ font-family: '钉钉进步体';
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 26px;
+ position: relative;
+ padding-left: 20px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 10px;
+ height: 24px;
+ background: linear-gradient(135.87deg, #56A7FF, #56EEFF 99.55%);
+ border-radius: 0px 4px 4px 0px;
+ }
+ }
+
+ .quoteWrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ background: rgba(255, 163, 65, 0.2);
+ border: 1px solid rgba(255, 163, 65, 0.5);
+ border-radius: 50%;
+ box-sizing: border-box;
+ margin-left: 10px;
+ cursor: pointer;
+
+ .quoteIcon {
+ width: 20px;
+ height: 14px;
+ cursor: pointer;
+ }
+ }
+ // .quoteIcon {
+ // width: 24px;
+ // height: 24px;
+ // cursor: pointer;
+ // }
+ }
+
+ .progressWrap {
+ height: calc(100% - 46px);
+ overflow-y: auto;
+
+ .itemName {
+ width: 90px;
+ font-size: 16px;
+ font-weight: 400;
+ color: #fff;
+ }
+
+ .progress {
+ width: 220px;
+ padding-top: 4px;
+ }
+
+ .itemNum {
+ font-size: 18px;
+ color: #cbedff;
+ .num {
+ font-family: D-DIN;
+ font-weight: 700;
+ color: #fff;
+ margin-right: 4px;
+ }
+ }
+ }
+}
+
+// .summaryContent {
+// padding: 20px;
+// height: 100%;
+
+// .progressWrap {
+// max-width: calc(100% - 600px);
+// min-width: calc(100% - 600px);
+// // height: 550px;
+// overflow-y: auto;
+
+// .itemName {
+// width: 90px;
+// font-size: 16px;
+// font-weight: 400;
+// color: #fff;
+// }
+
+// .progress {
+// width: 484px;
+// padding-top: 4px;
+// }
+
+// .itemNum {
+// font-size: 18px;
+// color: #cbedff;
+// .num {
+// font-family: D-DIN;
+// font-weight: 700;
+// color: #fff;
+// }
+// }
+// }
+
+// .content {
+// padding: 0 20px;
+// height: 500px;
+// overflow: auto;
+// .desc {
+// flex: 1;
+// padding-top: 10px;
+// font-size: 18px;
+// font-weight: 400;
+// line-height: 2;
+// .tipsText {
+// color: #1B90FF;
+// font-weight: 700;
+// }
+// }
+// }
+// }
+
+.summaryDetail {
+ width: 552px;
+ max-width: 552px;
+ padding: 0 20px;
+ height: 400px;
+ overflow: auto;
+
+ .desc {
+ flex: 1;
+ width: 100% ;
+ padding-top: 20px;
+ // padding: 20px;
+ // padding-left: 20px;
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 2;
+ color: #CBEDFF;
+
+ .highlight {
+ color: #1B90FF;
+ font-weight: 700;
+ }
+ }
+ }
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8bddfaffca76a81b4dbd078ca5de74fa123deca4
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/index.tsx
@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from 'react';
+import { Flex, Popover, Progress } from 'antd';
+import Modal from '@/components/HncyModal';
+import BaseCard from '@/pages/Common/components/BaseCard';
+import dayjs from 'dayjs';
+import services from '@/services';
+import styles from './index.less';
+import quoteIcon from '@/assets/images/newMain/quote.png';
+import PieChart from './PieChart'
+
+const AreaDistribution: React.FC = () => {
+ const [statisticTotal, setStatisticTotal] = useState([]);
+ const [modalVisible, setModalVisible] = useState(false);
+ const [pieData, setPieData] = useState([]);
+
+ const getDate = () => {
+ const oneMonthAgo = dayjs().subtract(1, 'month');
+ return {
+ startTime: oneMonthAgo.format('YYYY-MM-DD'),
+ endTime: dayjs().format('YYYY-MM-DD')
+ };
+ };
+
+ const getData = async () => {
+ const resp = await services.DataBase.getSjdzInfoData({
+ typeCode: "quhs-quyj",
+ params: {
+ ...getDate()
+ }
+ });
+ if (resp.code === 200) {
+ setStatisticTotal(resp.data?.data?.records);
+ }
+ };
+
+ const getPieData = async () => {
+ const resp = await services.DataBase.getSjdzInfoData({
+ typeCode: "quhs-tsfbzj",
+ params: {
+ ...getDate()
+ }
+ });
+ if (resp.code === 200) {
+ // console.log(resp.data?.data?.records)
+ setPieData(resp.data?.data?.records);
+ }
+ };
+
+ useEffect(() => {
+ getData();
+ getPieData();
+ }, []);
+
+ const renderSummaryContent = () => {
+ // console.log(pieData)
+ return (
+ //
+ //
+
+
+ //
+ //
+ );
+ };
+
+ return (
+ ([]);
+
+ const getDate = () => {
+ const oneMonthAgo = dayjs().subtract(1, 'month');
+ return {
+ startTime: oneMonthAgo.format('YYYY-MM-DD'),
+ endTime: dayjs().format('YYYY-MM-DD'),
+ };
+ };
+
+ const getData = async () => {
+ const resp = await services.DataBase.getSjdzInfoData({
+ typeCode: 'quhs-jqqs',
+ params: {
+ ...getDate(),
+ },
+ });
+ if (resp.code === 200) {
+ setStatisticRecent(resp.data?.data?.records);
+ }
+ };
+
+ useEffect(() => {
+ getData();
+ }, []);
+
+ return (
+ ([]);
+
+ const getDate = () => {
+ const oneMonthAgo = dayjs().subtract(1, 'month');
+ return {
+ startTime: oneMonthAgo.format('YYYY-MM-DD'),
+ endTime: dayjs().format('YYYY-MM-DD')
+ };
+ };
+
+ const getData = async () => {
+ const resp = await services.DataBase.getQzGfData({
+ typeCode: "quhs-gfsj",
+ params: {
+ ...getDate()
+ }
+ });
+ if (resp.code === 200) {
+ const data = [resp.data?.all, ...resp.data?.data];
+ setStatisticTotal(data);
+ }
+ };
+
+ useEffect(() => {
+ getData();
+ }, []);
+
+ const getSummaryText = () => {
+ return (
+ ([]);
+ const [modalVisible, setModalVisible] = useState(false);
+
+ const getDate = () => {
+ const oneMonthAgo = dayjs().subtract(1, 'month');
+ return {
+ startTime: oneMonthAgo.format('YYYY-MM-DD'),
+ endTime: dayjs().format('YYYY-MM-DD')
+ };
+ };
+
+ // 获取类型分布数据
+ const getData = async () => {
+ const resp = await services.DataBase.getSjdzInfoData({
+ typeCode: "quhs-tslxfb",
+ params: {
+ type: '1', // 默认展示大类
+ ...getDate()
+ }
+ });
+ if (resp.code === 200) {
+ const data = resp.data?.data?.records || [];
+ setStatisticTotal(data);
+ }
+ };
+
+ useEffect(() => {
+ getData();
+ }, []);
+
+ // 生成总结文本
+ const getSummaryText = () => {
+ return (
+ ({});
+ // 办理质效数据
+ const [qualityData, setQualityData] = useState({});
+
+ const getDate = () => {
+ const oneMonthAgo = dayjs().subtract(1, 'month');
+ return {
+ startTime: oneMonthAgo.format('YYYY-MM-DD'),
+ endTime: dayjs().format('YYYY-MM-DD')
+ };
+ };
+
+ // 获取整体态势数据
+ const getOverallData = async () => {
+ const resp = await services.DataBase.getSjdzInfoData({
+ typeCode: "quhs-ztts",
+ params: {
+ ...getDate()
+ }
+ });
+ if (resp.code === 200) {
+ setOverallData(resp.data?.data?.records[0]);
+ }
+ };
+
+ // 获取办理质效数据
+ const getQualityData = async () => {
+ const resp = await services.DataBase.getSjdzInfoData({
+ typeCode: "blzx",
+ params: {
+ ...getDate()
+ }
+ });
+ if (resp.code === 200) {
+ setQualityData(resp.data?.data?.records[0]);
+ }
+ };
+
+ useEffect(() => {
+ getOverallData();
+ getQualityData();
+ }, []);
+
+ // 整体态势统计项
+ const overallStatistics = [
+ {
+ label: '投诉总量',
+ value: overallData?.zl || 0,
+ unit: '件'
+ },
+ {
+ label: '处置中',
+ value: overallData?.blz || 0,
+ unit: '件'
+ }
+ ];
+
+ // 办理质效统计项
+ const qualityStatistics = [
+ {
+ label: '按时办结率',
+ value: qualityData?.asbj || 95,
+ unit: '%'
+ },
+ {
+ label: '重办率',
+ value: qualityData?.cb || 5.5,
+ unit: '%'
+ },
+ {
+ label: '平均回复周期',
+ value: qualityData?.pjsj || 2.5,
+ unit: 'h'
+ },
+ {
+ label: '满意率',
+ value: qualityData?.my || 95,
+ unit: '%'
+ }
+ ];
+
+ return (
+ ({});
+
+ // 渲染弹窗内容
+ const renderModal = useMemo(() => {
+ const comp: any = {
+ CgftEvent:
+
+ );
+};
+
+export default ProcessCard;
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard1/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard1/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..a06d297de5843487c63984f89574d4f5e95e7957
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard1/index.css
@@ -0,0 +1,44 @@
+.wrap {
+ height: 100%;
+ padding: 20px;
+}
+.wrap .item {
+ margin-bottom: 15px;
+}
+.wrap .item .name {
+ width: 79.91px;
+ height: 24px;
+ color: #E4EDFF;
+ font-family: '微软雅黑';
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 24px;
+ margin-right: 20px;
+}
+.wrap .item .progressBar {
+ flex: 1;
+ margin: 0 20px;
+}
+.wrap .item .progressBar :global .ant-progress .ant-progress-outer .ant-progress-inner {
+ height: 15px;
+ border-radius: 7.5px;
+}
+.wrap .item .numBox .num span:first-child {
+ width: 47.13px;
+ height: 24px;
+ color: #59EEFF;
+ font-family: 'D-DIN Exp';
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 24px;
+}
+.wrap .item .numBox .num span:last-child {
+ width: 18.44px;
+ height: 24px;
+ color: #E4EDFF;
+ font-family: '微软雅黑';
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 24px;
+ margin-left: 4px;
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard1/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard1/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..a02c4cdde69e35a28ce7f129c7fbea3025eb7bf9
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard1/index.less
@@ -0,0 +1,60 @@
+.wrap {
+ height: 100%;
+ padding: 20px;
+
+ .item {
+ margin-bottom: 15px;
+
+ .name {
+ width: 79.91px;
+ height: 24px;
+ color: #E4EDFF;
+ font-family: '微软雅黑';
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 24px;
+ margin-right: 20px;
+ }
+
+ .progressBar {
+ flex: 1;
+ margin: 0 20px;
+
+ :global {
+ .ant-progress {
+ .ant-progress-outer {
+ .ant-progress-inner {
+ height: 15px;
+ border-radius: 7.5px;
+ }
+ }
+ }
+ }
+ }
+
+ .numBox {
+ .num {
+ span:first-child {
+ width: 47.13px;
+ height: 24px;
+ color: #59EEFF;
+ font-family: 'D-DIN Exp';
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 24px;
+ }
+
+ span:last-child {
+ width: 18.44px;
+ height: 24px;
+ color: #E4EDFF;
+ font-family: '微软雅黑';
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 24px;
+ margin-left: 4px;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard1/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard1/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7823e01203233f13fecfbcb86ac1e11f2c1fefc8
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard1/index.tsx
@@ -0,0 +1,47 @@
+import { Flex, Progress, Space } from 'antd';
+import styles from './index.less';
+import { ReactNode } from 'react';
+
+interface Props {
+ data: any[];
+ title?: string;
+ extra?: ReactNode;
+ strokeColor?: {
+ '0%': string;
+ '100%': string;
+ };
+}
+
+const ProcessCard1 = (props: Props) => {
+ const { title, extra, data, strokeColor } = props;
+
+ return (
+ > = (props) => {
+ const { title, children, jumpSystem } = props;
+
+ const jumpOtherSystem = (url: string) => {
+ window.open(url, '_blank');
+ };
+
+ return (
+
+ );
+};
+
+export default Card;
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.css b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..1cc6b5c965c614b4d70135bc525c972187ccfbd2
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.css
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.less b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..6be9d6fbc356bcde35590eb71f0c5b95b7d9de72
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.less
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3f7286d9ed116f75e202f819d4bd1378d2747115
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Flex } from 'antd';
+import DescriptionItem from '@/components/DescriptionItem';
+import styles from './index.less';
+
+const CityLighting: React.FC = () => {
+ const commonValueStyle = {
+ background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ fontFamily: 'D-DIN Exp',
+ fontSize: '36px',
+ fontWeight: 700,
+ };
+
+ const commonLabelStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 700,
+ lineHeight: '26px',
+ marginTop: '-10px',
+ };
+
+ const commonUnitStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '26px',
+ };
+
+ return (
+ > = (props) => {
+ const { title, children, jumpSystem } = props;
+
+ //跳转其他系统
+ const handleClick = (item: { url?: string; onClick?: () => void }) => {
+ if (item.onClick) {
+ item.onClick();
+ } else if (item.url) {
+ window.open(item.url, '_blank');
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default Card;
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/DataElement/index.css b/src/pages/NewHome/NewRightContent/ResourceElements/components/DataElement/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..2a5f3d8b792ba9f6a4e3cb094b6a741ea9c305a2
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/DataElement/index.css
@@ -0,0 +1,5 @@
+.container {
+ width: 347px;
+ height: 196px;
+ padding: 40px;
+}
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/DataElement/index.less b/src/pages/NewHome/NewRightContent/ResourceElements/components/DataElement/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..eeadc9c848ad4808f8a5543cea34d766518cad43
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/DataElement/index.less
@@ -0,0 +1,28 @@
+.container {
+ width: 347px;
+ height: 196px;
+ padding: 20px;
+}
+
+.box {
+ flex: 1;
+ // width: 333px;
+ height: 100px;
+ line-height: 100px;
+ border-radius: 20px;
+ background: rgba(58, 126, 188, 0.2);
+ text-align: center;
+ cursor: pointer;
+ .unit {
+ font-size: 16px;
+ font-weight: 400;
+ color: #bccee9;
+ line-height: normal;
+ }
+ .name {
+ font-size: 22px;
+ font-weight: 700;
+ color: #bccee9;
+ line-height: 85px;
+ }
+}
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/DataElement/index.tsx b/src/pages/NewHome/NewRightContent/ResourceElements/components/DataElement/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8b4857345a460b6efcbcf2b54e8994c7f707b742
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/DataElement/index.tsx
@@ -0,0 +1,59 @@
+import DescriptionItem from '@/components/DescriptionItem';
+import DataGovernance from '@/pages/GlobalModalServices/DataGovernance';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
+import { Flex } from 'antd';
+import React, { useState } from 'react';
+import styles from './index.less';
+
+const DataElement: React.FC = () => {
+ const [isGovernanceModalOpen, setIsGovernanceModalOpen] = useState(false);
+ const { dispatch } = useGlobalModalServices();
+
+ return (
+
{jumpSystem?.map((it) => (
- jumpOtherSystem(it.url)}>{it.name}
+ jumpOtherSystem(it.url)}>
+ {it.name}
+
))}
}
diff --git a/src/pages/IndustryOperation/index.tsx b/src/pages/IndustryOperation/index.tsx
index 1f7aac237b064a685a4317fb395ea7c290214c51..159239fb3cfd38fc73156def5a89499824265449 100644
--- a/src/pages/IndustryOperation/index.tsx
+++ b/src/pages/IndustryOperation/index.tsx
@@ -2,6 +2,7 @@ import Modal from '@/components/HncyModal';
import IndustrySystem from '@/pages/Common/Sign/IndustrySystem';
import services from '@/services';
import { DoubleRightOutlined } from '@ant-design/icons';
+import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Flex, Space, Spin } from 'antd';
import React, { useMemo, useState } from 'react';
@@ -11,11 +12,6 @@ import DigitalUrbanManagement from './components/DigitalUrbanManagement';
import GarbageSorting from './components/GarbageSorting';
import Illumination from './components/Illumination';
import LawEnforcement from './components/LawEnforcement';
-import RaiseDust from './components/RaiseDust';
-import RefuseDisposal from './components/RefuseDisposal';
-import RoadAndBridge from './components/RoadAndBridge';
-import styles from './index.less';
-import { useModel } from '@umijs/max';
import Item1 from './components/NewChildrens/Item1';
import Item2 from './components/NewChildrens/Item2';
import Item3 from './components/NewChildrens/Item3';
@@ -24,6 +20,10 @@ import Item5 from './components/NewChildrens/Item5';
import Item6 from './components/NewChildrens/Item6';
import Item7 from './components/NewChildrens/Item7';
import Item8 from './components/NewChildrens/Item8';
+import RaiseDust from './components/RaiseDust';
+import RefuseDisposal from './components/RefuseDisposal';
+import RoadAndBridge from './components/RoadAndBridge';
+import styles from './index.less';
export const IndustryContext = React.createContext(
{} as {
indutryIndexData: PhysicalsignApi.IndutryIndexInstanceDto[];
@@ -66,10 +66,10 @@ const IndustryOperation: React.FC = () => {
name: '违法建设治理系统',
url: 'https://wjzl.cdcgzfzd.cn:1234/',
},
- {
- name: '综合行政执法智慧服务平台',
- url: 'http://171.221.172.80:6888/eUrbanMIS/main.htm',
- },
+ // {
+ // name: '综合行政执法智慧服务平台',
+ // url: 'http://171.221.172.80:6888/eUrbanMIS/main.htm',
+ // },
],
},
{
@@ -140,7 +140,7 @@ const IndustryOperation: React.FC = () => {
return [
{
title: '数字城管',
- children:
- setModalOpt({ open: true, title: ' 目前已接入11个行业系统' })
+ setModalOpt({ open: true, title: ' 行业系统接入清单' })
}
>
- 目前已接入11个行业系统
+ 目前已接入10个行业系统
+ setSignModalOpen(false)}
+ width={1470}
+ height={846}
+ >
+
+
+
+ );
+};
+
+export default CityRealTimeCQI;
diff --git a/src/pages/NewHome/NewLeftSidebar/CitySecurityInfo/index.less b/src/pages/NewHome/NewLeftSidebar/CitySecurityInfo/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..5db70260a6e184754abd3d7a1b8c4e3c3285827d
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/CitySecurityInfo/index.less
@@ -0,0 +1,93 @@
+.container {
+ height: 96px;
+ background: rgba(68, 120, 195, 0.2);
+ border-radius: 20px;
+ border: 2px solid rgba(119, 199, 255, 0.1);
+ // padding: 20px;
+ padding: 0 30px;
+ position: relative;
+ overflow: hidden;
+
+ // 添加渐变背景效果
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(
+ 452.143px at 1.12915% 5.89299%,
+ #3caeff 0%,
+ rgba(24, 40, 255, 0) 100%
+ );
+ opacity: 0.8;
+ z-index: -1;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(
+ 530.198px at 173.826% 100%,
+ #1354ff 0%,
+ rgba(23, 255, 149, 0) 100%
+ );
+ opacity: 0.1;
+ z-index: -1;
+ }
+
+ .header {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ justify-content: space-between;
+ gap: 40px;
+ // margin-bottom: 20px;
+
+ .title {
+ width: 70px;
+ color: #b3d6f7;
+ font-family: '钉钉进步体';
+ font-size: 26px;
+ font-weight: 400;
+ line-height: 31px;
+ }
+
+ .riskList {
+ display: flex;
+ gap: 40px;
+ flex: 1;
+ justify-content: space-between;
+
+ .riskItem {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ .num {
+ -webkit-background-clip: text; /* 背景剪裁为文字 */
+ -webkit-text-fill-color: transparent; /* 文字填充透明 */
+ font-family: D-DIN;
+ font-size: 40px;
+ font-weight: 700;
+ line-height: 40px;
+ margin-right: 5px;
+ }
+
+ .label {
+ color: #bccee9;
+ font-family: '微软雅黑';
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 26px;
+ }
+
+ img {
+ width: 63px;
+ height: 59px;
+ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/CitySecurityInfo/index.tsx b/src/pages/NewHome/NewLeftSidebar/CitySecurityInfo/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9f691bc7830a87e48511323298db02aedac8d61d
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/CitySecurityInfo/index.tsx
@@ -0,0 +1,119 @@
+import risk1 from '@/assets/images/centralize/risk1.png';
+import risk2 from '@/assets/images/centralize/risk2.png';
+import risk3 from '@/assets/images/centralize/risk3.png';
+import risk4 from '@/assets/images/centralize/risk4.png';
+import Modal from '@/components/HncyModal';
+import RiskEvents from '@/pages/Common/Event/RiskEvents';
+import services from '@/services';
+import { useEffect, useMemo, useState } from 'react';
+import styles from './index.less';
+
+const CitySecurityInfo = () => {
+ const [modalOpt, setModalOpt] = useState<{
+ open: boolean;
+ title: string;
+ type: string;
+ }>({
+ open: false,
+ title: '',
+ type: '',
+ });
+
+ const [statisticsData, setStatisticsData] = useState
+ 成都市实时CQI
+
+
+
+ setSignModalOpen(true)}
+ />
+ 体征模型
+
+
+
+
+ {cqiData?.currentIndex?.indexs?.map((item: any) => (
+
+
+
+
+
+
+
+
+
+ {/*
+
+
+ {getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.text}
+
+
+ {cqiData?.currentIndex?.cqi}
+
+
+ {getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.desc}
+
+ */}
+
*/}
+
+ {
+ setModalOpen(true);
+ setModalOpt([{ title: item.name, type: 'category' }]);
+ setCurrentCqiData({
+ ...item,
+ objectId: cqiData?.currentIndex?.objectId,
+ });
+ }}
+ >
+
+ ))}
+ {item.name}
+
+ {item.value}
+
+
+ setModalOpt({ open: false, title: '', type: '' })}
+ width={1772}
+ height={846}
+ >
+
+
+ );
+};
+
+export default CitySecurityInfo;
diff --git a/src/pages/NewHome/NewLeftSidebar/DutyInfo/index.css b/src/pages/NewHome/NewLeftSidebar/DutyInfo/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..d0d10e9e3b7f82daf26267d8f927a3d43339b428
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/DutyInfo/index.css
@@ -0,0 +1,5 @@
+.container {
+ height: 36px;
+ display: flex;
+ gap: 30px;
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/DutyInfo/index.less b/src/pages/NewHome/NewLeftSidebar/DutyInfo/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..6f3cf1f2ed98884ddb3dc1690210453d7f8eb84f
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/DutyInfo/index.less
@@ -0,0 +1,5 @@
+.container {
+ height: 36px;
+ display: flex;
+ gap: 30px;
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/DutyInfo/index.tsx b/src/pages/NewHome/NewLeftSidebar/DutyInfo/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..518199856364dac3fbf5668e0fbbc5f155e9fa17
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/DutyInfo/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './index.less';
+
+const DutyInfo: React.FC = () => {
+ return (
+
+ 城市安全
+
+
+
+ {riskData.map((item) => (
+
+
+ setModalOpt({
+ open: true,
+ type: item.type,
+ title: '安全风险',
+ })
+ }
+ >
+
+
+ ))}
+
+
+ {item.value}
+
+ 个
+
+ {item.label}
+
+ {/* 值班信息组件内容 */}
+
+ );
+};
+
+export default DutyInfo;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..877047874120a5715ec56386e33592f830311f74
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.less
@@ -0,0 +1,10 @@
+// .container {
+// // width: 438px;
+// height: 100%;
+
+// padding: 20px;
+// display: flex;
+// flex-direction: column;
+
+
+// }
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c74bb409075fb6f26ac32085ce97766a3ea40ad1
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import ProcessCard from '../components/ProcessCard';
+import styles from './index.less';
+
+const HighFrequencyArea: React.FC<{
+ areaStatistics?: any[];
+}> = ({ areaStatistics = [] }) => {
+ return (
+
+ {/*
+ );
+};
+
+export default HighFrequencyArea;
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..e1277fa0e78d6272077505c1e5a06fa016dfc4de
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.less
@@ -0,0 +1,47 @@
+// .container {
+// height: 100%;
+// border-radius: 40px;
+// // background: linear-gradient(
+// // 180deg,
+// // rgba(27, 50, 89, 0.3),
+// // rgba(27, 50, 89, 0) 100%
+// // );
+// padding: 20px;
+// display: flex;
+// flex-direction: column;
+
+// .header {
+// margin-bottom: 20px;
+
+// .title {
+// color: #E4EDFF;
+// font-size: 22px;
+// font-weight: 400;
+// margin-bottom: 15px;
+// display: block;
+// }
+
+// .tabs {
+// :global {
+// .ant-tabs-nav {
+// margin: 0;
+// }
+// .ant-tabs-tab {
+// padding: 4px 8px;
+// font-size: 14px;
+
+// &.ant-tabs-tab-active {
+// .ant-tabs-tab-btn {
+// color: #FFFFFF;
+// }
+// }
+// }
+// .ant-tabs-ink-bar {
+// background: #00E0FF;
+// }
+// }
+// }
+// }
+
+// // ProcessCard会自动填充剩余空间
+// }
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8e4899c092131d594730b2775fe5253c7acf084b
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.tsx
@@ -0,0 +1,93 @@
+import Tabs from '@/components/Tabs';
+import React, { useState } from 'react';
+import ProcessCard from '../components/ProcessCard';
+
+const HighFrequencyType: React.FC<{
+ categoryStatistics?: any[];
+ onTabChange?: (category: string) => void;
+}> = ({ categoryStatistics = [], onTabChange }) => {
+ const [activeTab, setActiveTab] = useState('mainClass');
+
+ const tabItems = [
+ {
+ key: 'mainClass',
+ label: '大类',
+ },
+ {
+ key: 'subClass',
+ label: '小类',
+ },
+ {
+ key: 'subdivisionClass',
+ label: '细类',
+ },
+ ];
+
+ const handleTabChange = (key: string) => {
+ setActiveTab(key);
+ onTabChange?.(key);
+ };
+
+ return (
+ // 高发区域
*/}
+
+ //
+ );
+};
+
+export default HighFrequencyType;
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/PieChart/Chart.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/PieChart/Chart.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d9beed9592fe4a0704d7535577aa94a9dccd5b2a
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/AreaDistribution/PieChart/Chart.tsx
@@ -0,0 +1,59 @@
+import { useMemo, useRef } from 'react'
+import ReactEcharts from 'echarts-for-react';
+const Chart = ({
+ data,
+ style,
+ color,
+}: {
+ data?: any[]; // 接收数据源
+ style?: React.CSSProperties;
+ color?: string[]
+}) => {
+
+ const ref = useRef(null)
+
+ const option = useMemo(() => {
+ const seriesData = data?.map(item => ({
+ name: item.ssqy,
+ value: item.num
+ }))
+ return {
+ tooltip: {
+ trigger: 'item',
+ formatter: (params: any) => {
+ return `${params?.data?.name}: ${params?.data?.value}`;
+ },
+ },
+ color: color ?? ['#FF9B5D', '#FFE335', '#29B5FF'],
+ series: [
+ {
+ name: '',
+ type: 'pie',
+ radius: ['65%', '90%'],
+ avoidLabelOverlap: false,
+ padAngle: 5,
+ label: {
+ show: false,
+ position: 'center',
+ },
+ labelLine: {
+ show: false,
+ },
+ data: seriesData,
+ },
+ ],
+ }
+ }, [data])
+
+ return (
+
+ // {/* 高发类型 */}
+ //
+
+ {data.map((it:any, index: number) => (
+
+
+
+ ))}
+
+
+ ) : (
+ {it.ssqy}
+ + {it.num} + 件 +
+ {/*+ {parseFloat(Number(it.percent).toFixed(1))}% +
*/} +
+ // {statisticTotal?.map((item: any, index: number) => (
+ //
+ //
+ // ))}
+ //
+ // {item.ssqy}
+ //
+ //
+ //
+ //
+ // {item.num}
+ // 件
+ //
+ //
+ 从具体区（市）县看，有6个区（市）县案件均超过
+ 300件，其中成华区和
+ 成都高新区超过了400件；
+ 11有个区（市）县处理投诉案件数在100-300件之间；
+ 有6个区（市）县处理投诉案件少于100件，分别是青白江区、新津区、
+ 彭州市、大邑县、成都东部新区、蒲江县。
+
+
+ setModalVisible(false)}
+ width={1470}
+ height={846}
+ >
+ {renderSummaryContent()}
+
+
+ );
+};
+
+export default AreaDistribution;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/LineCharts/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/LineCharts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4884e21ac7392cd2fd0b3b3aa621f320ff9d16a2
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/ComplaintTrend/LineCharts/index.tsx
@@ -0,0 +1,163 @@
+import ReactEcharts from 'echarts-for-react';
+import { useMemo } from 'react';
+
+const LineCharts = ({ dataSource }: { dataSource: any[] }) => {
+ const option = useMemo(() => {
+ const dates = dataSource?.map((item) => item.times) || [];
+ const values = dataSource?.map((item) => item.num) || [];
+ // console.log(dates)
+
+ const sampledDates = (() => {
+ const numSamples = 5;
+ const limitedDates = dates.slice(0, -1);
+ const total = limitedDates.length;
+ if (total <= numSamples) {
+ return limitedDates.map((date) => date.substring(5));
+ }
+ const step = (total - 1) / (numSamples - 1);
+ const ret = Array.from({ length: numSamples }, (_, i) =>
+ limitedDates[Math.round(i * step)].substring(5),
+ );
+ // console.log(ret)
+ return ret;
+ // return Array.from({ length: numSamples }, (_, i) => limitedDates[Math.round(i * step)].substring(5));
+ })();
+ // const sampledDates = (() => {
+ // const numSamples = 5;
+ // const total = dates.length;
+ // if (total <= numSamples) {
+ // return dates.map(date => date.substring(5));
+ // }
+ // const step = (total - 1) / (numSamples - 1);
+ // return Array.from({ length: numSamples }, (_, i) => dates[Math.round(i * step)].substring(5));
+ // })();
+
+ return {
+ color: ['#3CE88F'],
+ tooltip: {
+ trigger: 'axis',
+ borderWidth: '0',
+ backgroundColor: 'rgba(73,81,92,.95)',
+ textStyle: {
+ color: '#fff',
+ },
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999',
+ },
+ },
+ },
+ grid: {
+ left: '0',
+ right: '2.9%',
+ bottom: '4%',
+ top: '25%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ textStyle: {
+ padding: [2, 0, 0, 0],
+ color: '#CBEDFF',
+ },
+ formatter: (value: string, index: number, values: string[]) => {
+ if (index === values?.length - 1) {
+ return `{a|${value}}`;
+ }
+ return value;
+ },
+ rich: {
+ a: {
+ padding: [0, 0, 0, -20],
+ },
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ data: sampledDates,
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '件',
+ min: 0,
+ max: 'dataMax',
+ interval: 50,
+ axisLabel: {
+ textStyle: {
+ color: '#CBEDFF',
+ fontSize: 16,
+ },
+ },
+ nameTextStyle: {
+ align: 'left',
+ color: '#CBEDFF',
+ padding: [0, 0, 20, -20],
+ fontSize: 16,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ series: [
+ {
+ name: '投诉量',
+ type: 'line',
+ smooth: true, // 使用平滑曲线
+ showSymbol: false, // 不显示数据点
+ lineStyle: {
+ width: 4,
+ },
+ 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: values,
+ },
+ ],
+ };
+ }, [dataSource]);
+
+ // console.log(dataSource)
+
+ return (
+
+ 区域分布
+
+
+
+ {/* 
setModalVisible(true)}
+ /> */}
+
+
+
+
+
+
+ setModalVisible(true)}/>
+
*/}
+ {/*
+ {statisticTotal?.map((item: any, index: number) => (
+
+
+ ))}
+
+
+ {item.ssqy}
+
+
+
+
+ {item.num}
+ 件
+
+
+
+ );
+};
+
+export default ComplaintTrend;
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/LineCharts/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/LineCharts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c700ebc3ba730bc4420d210b70eaf61fbb6187d7
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/HighIncidenceTime/LineCharts/index.tsx
@@ -0,0 +1,125 @@
+
+import { useMemo } from 'react'
+import ReactEcharts from 'echarts-for-react';
+
+
+const LineCharts = ({ dataSource }: { dataSource: any[] }) => {
+
+ const option = useMemo(() => {
+
+ const names = dataSource?.map(item => item.name)
+
+ const series = dataSource?.map(item => {
+ return {
+ name: item?.name,
+ type: 'line',
+ data: item?.data?.map((v: any) => v.num),
+ }
+ })
+
+ console.log(series)
+
+ return {
+ color: ['#36BD3B', '#FF9743', '#FF67CB', '#9259FF', '#FFE543'],
+ tooltip: {
+ trigger: 'axis',
+ borderWidth: '0',
+ backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
+ textStyle: {
+ color: '#fff', //字体颜色
+ },
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999',
+ },
+ },
+ },
+ grid: {
+ left: '0',
+ right: '0',
+ bottom: '2%',
+ top: '25%',
+ containLabel: true,
+ },
+ legend: {
+ data: names,
+ // icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+ top: 10,
+ itemGap: 50,
+ textStyle: {
+ fontSize: '16px',
+ color: '#E4EDFF',
+ },
+ type: 'scroll', // 启用滚动
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true, //坐标轴两端不留空
+ axisLine: {
+ show: false, //隐藏X轴轴线
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ textStyle: {
+ padding: [2, 0, 0, 0],
+ color: '#CBEDFF',
+ },
+ },
+ axisTick: {
+ show: false, //隐藏X轴刻度
+ },
+ axisPointer: {
+ type: 'shadow',
+ },
+ data: ['00:00', '04:00', '08:00', '12:00','16:00', '20:00', '23:00'],
+ // data: ['0点', '1点', '2点', '3点','4点', '5点', '6点', '7点','8点','9点','10点','11点', '12点', '13点','14点','15点', '16点','17点','18点','19点','20点', '21点','22点', '23点'],
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ // name: '件',
+ min: 0,
+ max: 'dataMax',
+ // interval: 50,
+ axisLabel: {
+ textStyle: {
+ color: '#CBEDFF',
+ fontSize: 16
+ },
+ },
+ //name的样式设计
+ nameTextStyle: {
+ align: 'left',
+ color: '#CBEDFF',
+ padding: [0, 0, 20, -20],
+ fontSize: 16
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ }
+ ],
+ series: series
+ }
+ }, [dataSource])
+
+ return (
+
+ 投诉趋势
+
+
+
+
+
+ );
+ };
+
+ return (
+ 今日投诉主要集中在 4点、6点 、10点。
+其中市民关注和反映问题较多问题：
+噪音扰民集中在 8点、10点 、12点。
+占道经营集中在 6点、7点 、21点。
+油烟扰民集中在12点、17点 、19点。
+
+
+ );
+};
+
+export default HighIncidenceTime;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/LineBarCharts/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/LineBarCharts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6992d6c1ad2818a5726b7f699f36b6e87c908b25
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/TypeDistribution/LineBarCharts/index.tsx
@@ -0,0 +1,113 @@
+import { useMemo } from 'react';
+import ReactEcharts from 'echarts-for-react';
+
+const LineBarCharts = ({ dataSource }: { dataSource: any[] }) => {
+ const option = useMemo(() => {
+ const category = dataSource?.map(item => item.lx);
+ const realData = dataSource?.map(item => item.num);
+
+ return {
+ color: ['#FFEB6E', '#36BD3B'],
+ tooltip: {
+ trigger: 'axis',
+ borderWidth: '0',
+ backgroundColor: 'rgba(73,81,92,.95)',
+ textStyle: {
+ color: '#fff',
+ },
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999',
+ },
+ },
+ },
+ grid: {
+ left: '0',
+ right: '0',
+ bottom: '2%',
+ top: '25%',
+ containLabel: true,
+ },
+ legend: {
+ data: ['投诉量'],
+ icon: "circle",
+ top: 10,
+ itemGap: 50,
+ textStyle: {
+ fontSize: '16px',
+ color: '#E4EDFF',
+ }
+ },
+ xAxis: [{
+ type: 'category',
+ boundaryGap: true,
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ textStyle: {
+ padding: [2, 0, 0, 0],
+ color: '#CBEDFF',
+ fontSize: 16
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisPointer: {
+ type: 'shadow',
+ },
+ data: category,
+ }],
+ yAxis: [{
+ type: 'value',
+ name: '件',
+ min: 0,
+ // max: 'dataMax',
+ interval: 10,
+ axisLabel: {
+ textStyle: {
+ color: '#CBEDFF',
+ fontSize: 16
+ },
+ },
+ nameTextStyle: {
+ align: 'left',
+ color: '#CBEDFF',
+ padding: [0, 0, 20, -20],
+ fontSize: 16
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ }],
+ series: [{
+ // name: '投诉量',
+ type: 'bar',
+ barWidth: 20,
+ data: realData,
+ itemStyle: {
+ barBorderRadius: [12, 12, 12, 12],
+ },
+ }]
+ };
+ }, [dataSource]);
+
+ return (
+
+ 高发时间
+
+
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ return (
+ 大类分布总结
+
+ 今日环境保护、市容秩序与广告招牌、规划执法等3大类型投诉案件数较多，分别为
+ 45651件、30407件25481件，占全市总投诉案件的比重分别为
+ 37.73%、25.13%、21.06%。
+
+
+ {/*
+ 从具体区（市）县看，有6个区（市）县案件均超过
+ 300件，其中成华区和
+ 成都高新区超过了400件；
+ 11有个区（市）县处理投诉案件数在100-300件之间；
+ 有6个区（市）县处理投诉案件少于100件，分别是青白江区、新津区、
+ 彭州市、大邑县、成都东部新区、蒲江县。
+
*/}
+
+
+ );
+};
+
+export default TypeDistribution;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..321f89bb36258103b6e53ff35abd0b5dcf9d86ed
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/index.css
@@ -0,0 +1,51 @@
+.container {
+ width: 100%;
+ height: 100%;
+}
+.container .statisticsRow {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.container .statisticsRow .statisticItem {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+.container .statisticsRow .statisticItem .label {
+ color: #BCCEE9;
+ font-family: '微软雅黑';
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 21px;
+}
+.container .statisticsRow .statisticItem :global .ant-statistic {
+ display: inline-block;
+}
+.container .statisticsRow .statisticItem :global .ant-statistic .ant-statistic-content .ant-statistic-content-value {
+ background: linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-family: 'D-DIN Exp';
+ font-size: 26px;
+ font-weight: 700;
+}
+.container .statisticsRow .statisticItem .unit {
+ color: #BCCEE9;
+ font-family: '微软雅黑';
+ font-size: 16px;
+ font-weight: 400;
+}
+.container .gridContainer {
+ display: grid;
+ grid-template-columns: 580px 440px;
+ gap: 20px;
+ margin-top: 20px;
+ justify-content: space-between;
+}
+.container .gridContainer .leftColumn {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..ed6fdf52867bfa2860a0fbe26b9dd2b3d58d8023
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/index.less
@@ -0,0 +1,67 @@
+.container {
+ width: 100%;
+ height: 100%;
+// padding: 20px;
+
+ .statisticsRow {
+ width: 100%;
+ // background: rgba(8, 24, 63, 0.7);
+ // border-radius: 15px;
+ // padding: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .statisticItem {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ .label {
+ color: #BCCEE9;
+ font-family: '微软雅黑';
+ font-size: 16px;
+ font-weight: 700;
+ line-height: 21px;
+ }
+
+ :global {
+ .ant-statistic {
+ display: inline-block;
+
+ .ant-statistic-content {
+ .ant-statistic-content-value {
+ background: linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-family: 'D-DIN Exp';
+ font-size: 26px;
+ font-weight: 700;
+ }
+ }
+ }
+ }
+
+ .unit {
+ color: #BCCEE9;
+ font-family: '微软雅黑';
+ font-size: 16px;
+ font-weight: 400;
+ }
+ }
+ }
+
+ .gridContainer {
+ display: grid;
+ grid-template-columns: 580px 440px;
+ gap: 20px;
+ margin-top: 20px;
+ justify-content: space-between;
+
+ .leftColumn {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3effd7348b0f865a054b4acdbc96a896a39d621e
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/PeopleComplaint/index.tsx
@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from 'react';
+import { Flex, Space, Statistic } from 'antd';
+import type { StatisticProps } from 'antd';
+import CountUp from 'react-countup';
+import dayjs from 'dayjs';
+import services from '@/services';
+import styles from './index.less';
+import TypeDistribution from './TypeDistribution';
+import HighIncidenceTime from './HighIncidenceTime';
+import ComplaintTrend from './ComplaintTrend';
+import AreaDistribution from './AreaDistribution';
+
+const formatter: StatisticProps['formatter'] = (value) => (
+
+ 投诉类型分布
+
+
+
+
+
+
+
+
+
+
+ {/* 整体态势 */}
+
+ {overallStatistics.map((item, index) => (
+
+
+ );
+};
+
+export default PeopleComplaint;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..04796e65315a1b2c976a34721f3c3b4510f66ce2
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.css
@@ -0,0 +1,59 @@
+.wrap {
+ width: 100%;
+ height: 100%;
+ border-radius: 40px;
+ background: linear-gradient(180deg, rgba(27, 50, 89, 0.3), rgba(27, 50, 89, 0) 100%);
+ padding: 20px;
+}
+.wrap .content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+.wrap .content .card {
+ text-align: center;
+}
+.wrap .content .card .numCard {
+ width: 115px;
+ height: 112px;
+ border-radius: 10px;
+ background: rgba(67, 113, 180, 0.3);
+ text-align: center;
+ color: #bccee9;
+ cursor: pointer;
+}
+.wrap .content .card .numCard .name {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1;
+}
+.wrap .content .center {
+ width: 557px;
+ height: 189px;
+ box-sizing: border-box;
+ border-radius: 37px;
+ box-shadow: 0 0 80px 0 rgba(10, 18, 61, 0.6);
+ background: linear-gradient(0.57deg, rgba(73, 147, 163, 0.32) 5.085%, rgba(34, 129, 247, 0.33) 95.731%);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 2vh;
+ font-size: clamp(14px, 1.8vh, 18px);
+ font-weight: 700;
+ color: #fff;
+}
+.wrap .content .unit {
+ font-weight: 400;
+ color: #bccee9;
+}
+.wrap .content :global .ant-statistic-content-value {
+ background: linear-gradient(180deg, #aafff6, #25bbff);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ font-family: D-DIN;
+ font-size: clamp(20px, 2.5vh, 30px);
+ font-weight: 700;
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..ff033b05dc62af1f77e8dc251c20e25c0095f096
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.less
@@ -0,0 +1,92 @@
+.wrap {
+ width: 100%;
+ height: 100%;
+ border-radius: 40px;
+
+ // padding: 2.5% 3%;
+ // display: flex;
+ // flex-direction: column;
+
+ .content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ // gap: 8px;
+
+ .card {
+ text-align: center;
+
+ .numCard {
+ width: 115px;
+ height: 112px;
+
+ // width: 24%;
+ // min-width: 120px;
+ // aspect-ratio: 1.66;
+ border-radius: 10px;
+ background: rgba(67, 113, 180, 0.3);
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #bccee9;
+ cursor: pointer;
+
+ .name {
+ // font-size: clamp(14px, 1.8vh, 18px);
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1;
+ }
+ }
+ }
+
+ .center {
+ width: 557px;
+ height: 189px;
+ box-sizing: border-box;
+
+ // width: 100%;
+ // aspect-ratio: 4.8;
+ // margin: 0 auto;
+ border-radius: 37px;
+ box-shadow: 0 0 80px 0 rgba(10, 18, 61, 0.6);
+ background: linear-gradient(
+ 0.57deg,
+ rgba(73, 147, 163, 0.32) 5.085%,
+ rgba(34, 129, 247, 0.33) 95.731%
+ );
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 2vh;
+ font-size: clamp(14px, 1.8vh, 18px);
+ font-weight: 700;
+ color: #fff;
+ }
+
+ .unit {
+ font-weight: 400;
+ color: #bccee9;
+ }
+
+ :global {
+ .ant-statistic-content-value {
+ background: linear-gradient(
+ 180deg,
+ rgb(170, 255, 246),
+ rgb(37, 187, 255)
+ );
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ font-family: D-DIN;
+ font-size: clamp(20px, 2.5vh, 30px);
+ font-weight: 700;
+ }
+ }
+ }
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fb1a460d5607e0f66e23a3c0d0eebb02112b7ad6
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.tsx
@@ -0,0 +1,291 @@
+import bottom from '@/assets/images/urbanSituation/bottom.png';
+import upIcon from '@/assets/images/urbanSituation/up.png';
+import Modal from '@/components/HncyModal';
+import AnalysisCompletionRate from '@/pages/Common/Event/AnalysisCompletionRate';
+import CgftEvent from '@/pages/Common/Event/CgftEvent';
+import CollectionEvent from '@/pages/Common/Event/CollectionEvent';
+import DifficultEvents from '@/pages/Common/Event/DifficultEvents';
+import GeneralSituation from '@/pages/Common/Event/GeneralSituation';
+import OtherEvent from '@/pages/Common/Event/OtherEvent';
+import ToDisposed from '@/pages/Common/Event/ToDisposed';
+import UrbanOperation from '@/pages/Common/Event/UrbanOperation';
+import services from '@/services';
+import type { StatisticProps } from 'antd';
+import { Flex, Space, Statistic } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import CountUp from 'react-countup';
+import styles from './index.less';
+
+const formatter: StatisticProps['formatter'] = (value) => (
+
+
+
+
+ ))}
+ {/* 办理质效 */}
+ {qualityStatistics.map((item, index) => (
+ {item.label}
+
+
+
+
+ ))}
+ {item.label}
+
+
+
+
+
+
+
+ setModalOpt({ open: false, title: '', type: '' })}
+ width={modalOpt?.width ?? 1772}
+ height={modalOpt?.height ?? 846}
+ >
+ {renderModal}
+
+
+ );
+};
+
+export default Problem;
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..85a853d0fdbe7c5ff0224b8f4eecd6efb4944a15
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard/index.css
@@ -0,0 +1,27 @@
+.wrap {
+ font-size: 16px;
+ color: #cbedff;
+ padding: 0 20px;
+ margin-top: 10px;
+ height: 70%;
+ overflow: auto;
+}
+.wrap .name {
+ max-width: 90px;
+ min-width: 90px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.wrap .numBox {
+ display: flex;
+}
+.wrap .numBox .num {
+ color: #fff;
+ font-size: 18px;
+ font-weight: 700;
+ width: fit-content;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..87466a481bdd3e2d03a558ead271424cc94b217a
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard/index.less
@@ -0,0 +1,29 @@
+.wrap {
+ font-size: 16px;
+ color: #cbedff;
+ padding: 0 20px;
+ margin-top: 10px;
+ height: 70%;
+ overflow: auto;
+
+ .name {
+ max-width: 90px;
+ min-width: 90px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .numBox {
+ display: flex;
+ .num {
+ color: #fff;
+ font-size: 18px;
+ font-weight: 700;
+ width: fit-content;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..80d72276c50ce9994f04b1ff5add202dd2d4217d
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/components/ProcessCard/index.tsx
@@ -0,0 +1,60 @@
+import BaseCard from '@/pages/Common/components/BaseCard';
+import type { ProgressProps } from 'antd';
+import { Flex, Progress, Space } from 'antd';
+import { ReactNode } from 'react';
+import styles from './index.less';
+
+interface Props {
+ data: any[];
+ title: string;
+ extra?: ReactNode;
+ style?: React.CSSProperties;
+ strokeColor?: ProgressProps['strokeColor'];
+}
+
+const ProcessCard = (props: Props) => {
+ const { title, extra, data, strokeColor } = props;
+
+ return (
+
+
+ {groupCard.topCard.map((item) => (
+
+
+
+ {groupCard.bottomCard.map((item) => (
+
+
+
+
+ 
+
+ ))}
+ setModalOpt({ open: true, ...item.modalConf })}
+ >
+
+
+
+ {item.name}
+
+
+ 事件总量
+
+
+ {groupCard.centerStatistic.map((item) => (
+
+
+
+ {
+ if (item.modalConf.type === 'difficultEvents') return;
+ setModalOpt({ open: true, ...item.modalConf });
+ }}
+ >
+
+
+
+ ))}
+ {item.name}
+
+ 
+
+
+
+
+ ))}
+ setModalOpt({ open: true, ...item.modalConf })}
+ >
+
+
+
+ {item.name}
+
+ {data.map((item, index) => (
+
+
+
+
+ ))}
+
+
+ {item.name}
+
+
+
+
+
+ {item?.value}
+ 件
+
+
+ {item?.percent}
+ %
+
+
+ {data.map((item, index) => (
+
+
+
+
+ ))}
+
+ );
+};
+
+export default ProcessCard1;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..d19c6a0b17e49c60223432d4d4ee0b02ddbcf445
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.css
@@ -0,0 +1,64 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 684px;
+ width: 100%;
+ background: rgba(68, 120, 195, 0.2);
+ border-radius: 20px;
+ border: 2px solid rgba(119, 199, 255, 0.1);
+ padding: 20px;
+}
+.container .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+.container .header .tabs {
+ flex: 1;
+}
+.container .header .tabs :global .ant-tabs-nav {
+ margin: 0;
+}
+.container .header .tabs :global .ant-tabs-tab {
+ padding: 8px 16px;
+ color: #E4EDFF;
+ font-size: 16px;
+}
+.container .header .tabs :global .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+ color: #FFFFFF;
+}
+.container .header .tabs :global .ant-tabs-ink-bar {
+ background: #00E0FF;
+}
+.container .header .dateText {
+ width: 54px;
+ height: 24px;
+ color: #BCCEE9;
+ font-family: '微软雅黑';
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 24px;
+ margin-left: auto;
+}
+.container .tabContent {
+ flex: 1;
+ display: grid;
+ grid-template-columns: 565px 440px;
+ grid-template-rows: 1fr 1fr;
+ gap: 20px;
+}
+.container .tabContent > div:nth-child(1) {
+ grid-row: 1 / span 2;
+ grid-column: 1;
+ width: 70%;
+ height: 70%;
+}
+.container .tabContent > div:nth-child(2) {
+ grid-row: 1;
+ grid-column: 2;
+}
+.container .tabContent > div:nth-child(3) {
+ grid-row: 2;
+ grid-column: 2;
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..3a588ae4c1b1f0490c43a0c78e8b92f577752431
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.less
@@ -0,0 +1,68 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 664px;
+ width: 100%;
+ background: rgba(68, 120, 195, 0.2);
+ border-radius: 20px;
+ border: 2px solid rgba(119, 199, 255, 0.1);
+ padding: 20px;
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+
+ .tabItem {
+ color: rgb(76, 134, 189);
+ font-family: DingTalk JinBuTi;
+ font-size: 26px;
+ font-weight: 400;
+ }
+
+ .active {
+ color: rgb(255, 255, 255);
+ font-size: 26px;
+ font-weight: 400;
+ }
+
+ .dateText {
+ width: 54px;
+ height: 24px;
+ color: #bccee9;
+ font-family: '微软雅黑';
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 24px;
+ margin-left: auto;
+ }
+ }
+
+ .content {
+ flex: 1;
+ }
+
+ .tabContent {
+ flex: 1;
+ display: grid;
+ grid-template-columns: 557px 1fr;
+ grid-template-rows: 1fr 1fr;
+ gap: 40px;
+
+ > div:nth-child(1) {
+ grid-row: 1 / span 2;
+ grid-column: 1;
+ }
+
+ > div:nth-child(2) {
+ grid-row: 1;
+ grid-column: 2;
+ }
+
+ > div:nth-child(3) {
+ grid-row: 2;
+ grid-column: 2;
+ }
+ }
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c5ca8f24e7f03e32ad3462137e1d93e8e608198e
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.tsx
@@ -0,0 +1,103 @@
+import services from '@/services';
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import HighFrequencyArea from './HighFrequencyArea';
+import HighFrequencyType from './HighFrequencyType';
+import styles from './index.less';
+import Problem from './Problem';
+import PeopleComplaint from './PeopleComplaint';
+
+const UrbanManagementIssues: React.FC = () => {
+ const [activeTab, setActiveTab] = useState('urbanManagement');
+ const [categoryStatistics, setCategoryStatistics] = useState([]);
+ const [areaStatistics, setAreaStatistics] = useState([]);
+
+ useEffect(() => {
+ getCategoryAnalysis();
+ getAreaAnalysis();
+ }, []);
+
+
+ // 获取高发类型和区域统计数据
+ const getCategoryAnalysis = (category = 'mainClass') => {
+ const params = {
+ category: category,
+ sourceSystemCode: '',
+ };
+ services.CityProblemApi.getCategoryAnalysisApi(params).then((res) => {
+ if (res.code === 200) {
+ setCategoryStatistics(res.data);
+ }
+ });
+ };
+
+ const getAreaAnalysis = () => {
+ const params = {
+ region: 'district',
+ sourceSystemCode: '',
+ };
+ services.CityProblemApi.getAreaAnalysisApi(params).then((res) => {
+ if (res.code === 200) {
+ setAreaStatistics(res.data);
+ }
+ });
+ };
+
+ const onChangeCategory = (value: string) => {
+ getCategoryAnalysis(value)
+ }
+
+ const tabItems = [
+ {
+ key: 'urbanManagement',
+ label: '城管问题',
+ children: (
+ {item.name}
+
+
+
+
+ {item?.value}
+ 件
+
+
+ {item?.percent}
+ %
+
+
+
+
+ ),
+ },
+ {
+ key: 'complaints',
+ label: '老百姓投诉情况',
+ children:
+
+ );
+};
+
+export default UrbanManagementIssues;
diff --git a/src/pages/NewHome/NewLeftSidebar/index.css b/src/pages/NewHome/NewLeftSidebar/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..b621de80af91ef1184d3554059b67f9da3aa31b1
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/index.css
@@ -0,0 +1,8 @@
+.container {
+ width: 1250px;
+ height: 1080px;
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/index.less b/src/pages/NewHome/NewLeftSidebar/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..9cef7f09d399da567dbf560251789edf44b6116c
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/index.less
@@ -0,0 +1,6 @@
+.container {
+ width: 1128px;
+ display: flex;
+ flex-direction: column;
+ row-gap: 12px;
+}
diff --git a/src/pages/NewHome/NewLeftSidebar/index.tsx b/src/pages/NewHome/NewLeftSidebar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b17d08c9de6f4cd7e929acc2787807a2bf5d5948
--- /dev/null
+++ b/src/pages/NewHome/NewLeftSidebar/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import CityRealTimeCQI from './CityRealTimeCQI';
+import CitySecurityInfo from './CitySecurityInfo';
+import styles from './index.less';
+import UrbanManagementIssues from './UrbanManagementIssues';
+
+const NewLeftSidebar: React.FC = () => {
+ return (
+
+
+ {tabItems.map((item, index) => {
+ return (
+
+
+
+ {activeTab === 'urbanManagement' ? '今日' : '近一月'}
+
+
+ {
+ setActiveTab(item.key);
+ }}
+ className={classNames(
+ styles.tabItem,
+ activeTab === item.key ? styles.active : undefined,
+ )}
+ >
+ {item.label}
+
+ );
+ })}
+
+ {tabItems.find((item) => item.key === activeTab)?.children}
+
+
+ {/*
+ );
+};
+
+export default NewLeftSidebar;
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.css b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..1cc6b5c965c614b4d70135bc525c972187ccfbd2
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.css
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.less b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..6be9d6fbc356bcde35590eb71f0c5b95b7d9de72
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.less
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3c2fbaa2d8746b912e53f920cbec87df6e8cb1d5
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Flex } from 'antd';
+import DescriptionItem from '@/components/DescriptionItem';
+import styles from './index.less';
+
+const Advertisement: React.FC = () => {
+ const commonValueStyle = {
+ background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ fontFamily: 'D-DIN Exp',
+ fontSize: '36px',
+ fontWeight: 700,
+ };
+
+ const commonLabelStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 700,
+ lineHeight: '26px',
+ };
+
+ const commonUnitStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '26px',
+ };
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default Advertisement;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.css b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..47e0c3fcc2abce5d8295dcef922dd2071948276a
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.css
@@ -0,0 +1,68 @@
+.container {
+ width: 347px;
+ height: 269px;
+ background: #08183f;
+ border-radius: 15px;
+}
+.container .cardTitle {
+ color: #BDCEE9;
+ font-family: '钉钉进步体';
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 26px;
+ position: relative;
+ padding-left: 20px;
+}
+.container .cardTitle::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 10px;
+ height: 24px;
+ background: linear-gradient(135.87deg, #56A7FF, #56EEFF 99.55%);
+ border-radius: 0px 4px 4px 0px;
+}
+.container .rightBtn {
+ background-color: rgba(28, 192, 255, 0.2);
+ width: 42px;
+ height: 42px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+.container .rightBtn.bindClick {
+ opacity: 0;
+}
+.container .rightBtn:hover {
+ background-color: #1cc0ff;
+}
+.container .rightBtn:active {
+ opacity: 0.6;
+}
+.container .content {
+ margin-top: 0px;
+}
+.container .otherSystem {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 12px;
+ min-width: 200px;
+}
+.container .otherSystem .systemItem {
+ width: 100%;
+}
+.container .otherSystem .systemItem span {
+ color: #CBEDFF;
+ font-size: 16px;
+ cursor: pointer;
+ display: block;
+ padding: 4px 0;
+}
+.container .otherSystem .systemItem span:hover {
+ color: #1B90FF;
+}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.less b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..191dad9b404d08b856921a51a0696ba2b9ca247b
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.less
@@ -0,0 +1,83 @@
+.container {
+ width: 347px;
+ height: 269px;
+ // background: rgba(207, 7, 7, 0.7);
+ background: fadein(rgb(8, 24, 63), 0.9);
+
+ // background: rgba(8, 24, 63, 0.7);
+ border-radius: 15px;
+ // padding: 20px;
+
+ .cardTitle {
+ color: #bdcee9;
+ font-family: '钉钉进步体';
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 26px;
+ position: relative;
+ padding-left: 20px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 10px;
+ height: 24px;
+ background: linear-gradient(135.87deg, #56a7ff, #56eeff 99.55%);
+ border-radius: 0px 4px 4px 0px;
+ }
+ }
+
+ .rightBtn {
+ background-color: rgba(28, 192, 255, 0.2);
+ width: 42px;
+ height: 42px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ &.bindClick {
+ opacity: 0;
+ }
+
+ &:hover {
+ background-color: rgb(28, 192, 255);
+ }
+
+ &:active {
+ opacity: 0.6;
+ }
+ }
+
+ .content {
+ margin-top: 0px;
+ }
+
+ .otherSystem {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 12px;
+ min-width: 200px;
+
+ .systemItem {
+ width: 100%;
+
+ span {
+ color: #cbedff;
+ font-size: 16px;
+ cursor: pointer;
+ display: block;
+ padding: 4px 0;
+
+ &:hover {
+ color: #1b90ff;
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3688c0660692441ac55b12ec0c3173be7e7aca3f
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.tsx
@@ -0,0 +1,66 @@
+import { RightOutlined } from '@ant-design/icons';
+import { ConfigProvider, Flex, Popover } from 'antd';
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
+import styles from './index.less';
+
+interface PropsType {
+ title: string;
+ jumpSystem?: { name: string; url: string }[]; //外跳系统
+}
+
+const Card: React.FC
+
+
+
+ {jumpSystem?.map((it, index) => (
+
+ }
+ placement="bottomRight"
+ >
+ {title}
+ 0 ? 10 : 0, + }} + key={it.name} + onClick={() => jumpOtherSystem(it.url)} + > + {it.name} +
+ ))} +
+
+
+
+
+ {children}
+
+
+
+
+
+
+ );
+};
+
+export default CityLighting;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.css b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..1cc6b5c965c614b4d70135bc525c972187ccfbd2
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.css
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.less b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..bcd6aa8ff226ce997c6dd6d83ac28d054cf26ef1
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.less
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..934951c8fb4a417b49832b38dae27f57d6a6af0e
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Flex } from 'antd';
+import DescriptionItem from '@/components/DescriptionItem';
+import styles from './index.less';
+
+const EnvironmentalHealth: React.FC = () => {
+ const commonValueStyle = {
+ background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ fontFamily: 'D-DIN Exp',
+ fontSize: '36px',
+ fontWeight: 700,
+ };
+
+ const commonLabelStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 700,
+ lineHeight: '26px',
+ };
+
+ const commonUnitStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '26px',
+ };
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default EnvironmentalHealth;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.css b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..1cc6b5c965c614b4d70135bc525c972187ccfbd2
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.css
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.less b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..18b2940206bc13b858516a7e1205c1e60f481c62
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.less
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..733c7fbcbb01daacbb940aeed883744bca08ca3f
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Flex } from 'antd';
+import DescriptionItem from '@/components/DescriptionItem';
+import styles from './index.less';
+
+const LawEnforcement: React.FC = () => {
+ const commonValueStyle = {
+ background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ fontFamily: 'D-DIN Exp',
+ fontSize: '36px',
+ fontWeight: 700,
+ };
+
+ const commonLabelStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 700,
+ lineHeight: '26px',
+ };
+
+ const commonUnitStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '26px',
+ };
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default LawEnforcement;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.css b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..1cc6b5c965c614b4d70135bc525c972187ccfbd2
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.css
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.less b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..6be9d6fbc356bcde35590eb71f0c5b95b7d9de72
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.less
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..37c5eaed11f84f384f623a3c7a5934149a379f71
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { Flex } from 'antd';
+import DescriptionItem from '@/components/DescriptionItem';
+import styles from './index.less';
+
+const MunicipalFacilities: React.FC = () => {
+ const commonValueStyle = {
+ background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ fontFamily: 'D-DIN Exp',
+ fontSize: '36px',
+ fontWeight: 700,
+ };
+
+ const commonLabelStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 700,
+ lineHeight: '26px',
+ };
+
+ const commonUnitStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '26px',
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MunicipalFacilities;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/WasteDisposal/index.css b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/WasteDisposal/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..1cc6b5c965c614b4d70135bc525c972187ccfbd2
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/WasteDisposal/index.css
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/WasteDisposal/index.less b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/WasteDisposal/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..6be9d6fbc356bcde35590eb71f0c5b95b7d9de72
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/WasteDisposal/index.less
@@ -0,0 +1,3 @@
+.container {
+ padding: 10px 20px 20px 20px;
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/WasteDisposal/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/WasteDisposal/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..21cd5b78a22eafb25c29aa97e9f0576e05e9b6c3
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/WasteDisposal/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { Flex } from 'antd';
+import DescriptionItem from '@/components/DescriptionItem';
+import styles from './index.less';
+
+const WasteDisposal: React.FC = () => {
+ const commonValueStyle = {
+ background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ fontFamily: 'D-DIN Exp',
+ fontSize: '36px',
+ fontWeight: 700,
+ };
+
+ const commonLabelStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 700,
+ lineHeight: '26px',
+ };
+
+ const commonUnitStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '26px',
+ };
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default WasteDisposal;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.css b/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..de46482c03de305607f0b3d3545b15f6150efd83
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.css
@@ -0,0 +1,38 @@
+.container {
+ width: 1128px;
+ height: 662px;
+ background: rgba(63, 149, 229, 0.15);
+ border-radius: 20px;
+ backdrop-filter: blur(20px);
+ padding: 20px;
+}
+.container .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
+.container .header .title {
+ color: #BDCEE9;
+ font-family: '钉钉进步体';
+ font-size: 30px;
+ font-weight: 400;
+ line-height: 36px;
+}
+.container .header .systemCount {
+ cursor: pointer;
+ color: #B3D6F7;
+ font-size: 20px;
+}
+.container .header .systemCount span {
+ font-family: 'D-DIN';
+ color: #4BFF9C;
+ font-size: 30px;
+ margin: 0 4px;
+}
+.container .content {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 20px;
+}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.less b/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..221c08ae3c176fc4597d0eff9bf0fffb142c92bd
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.less
@@ -0,0 +1,50 @@
+.container {
+ width: 1128px;
+ height: 662px;
+ // background: fadein(rgb(63, 149, 229) , 0.1);
+ background: rgba(63, 149, 229, 0.15);
+ border-radius: 20px;
+ backdrop-filter: blur(20px);
+ padding: 20px;
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+
+ .title {
+ color: #bdcee9;
+ font-family: '钉钉进步体';
+ font-size: 30px;
+ font-weight: 400;
+ line-height: 36px;
+ }
+
+ .systemCount {
+ cursor: pointer;
+ color: #b3d6f7;
+ font-size: 20px;
+
+ span {
+ font-family: 'D-DIN';
+ color: #4bff9c;
+ font-size: 30px;
+ margin: 0 4px;
+ }
+ .header_right_icon {
+ font-size: 20px;
+ color: rgb(179, 214, 247);
+ transform: translateY(5px);
+ }
+ }
+ }
+
+ .content {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ gap: 20px;
+ // height: calc(100% - 64px);
+ }
+}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6f3ce162f6605b836ca11e111931da7c8c4b82c8
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/index.tsx
@@ -0,0 +1,135 @@
+import Modal from '@/components/HncyModal';
+import IndustrySystem from '@/pages/Common/Sign/IndustrySystem';
+import { DoubleRightOutlined } from '@ant-design/icons';
+import { Space } from 'antd';
+import React, { useState } from 'react';
+import Advertisement from './components/Advertisement';
+import Card from './components/Card';
+import CityLighting from './components/CityLighting';
+import EnvironmentalHealth from './components/EnvironmentalHealth';
+import LawEnforcement from './components/LawEnforcement';
+import MunicipalFacilities from './components/MunicipalFacilities';
+import WasteDisposal from './components/WasteDisposal';
+import styles from './index.less';
+
+const IndustryOperationNew: React.FC = () => {
+ const [modalVisible, setModalVisible] = useState(false);
+
+ const cards = [
+ {
+ title: '环境卫生',
+ children:
+ setModalOpt({ open: false, title: '' })}
+ width={1104}
+ height={846}
+ >
+
+
+ );
+};
+
+export default IndustryOperationNew;
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.css b/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..02778ca8c0dd4ced41e511c99f5a1ecbc6a3cbf3
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.css
@@ -0,0 +1,58 @@
+.container {
+ width: 347px;
+ height: 196px;
+ background: rgba(8, 24, 63, 0.7);
+ border-radius: 15px;
+}
+.container .cardTitle {
+ color: #bdcee9;
+ font-family: '钉钉进步体';
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 26px;
+ position: relative;
+ padding-left: 20px;
+}
+.container .cardTitle::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 10px;
+ height: 24px;
+ background: linear-gradient(135.87deg, #56a7ff, #56eeff 99.55%);
+ border-radius: 0px 4px 4px 0px;
+}
+.container .rightBtn {
+ background-color: rgba(28, 192, 255, 0.2);
+ width: 42px;
+ height: 42px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+}
+.container .rightBtn.bindClick {
+ opacity: 0;
+}
+.container .rightBtn:hover {
+ background-color: #1cc0ff;
+}
+.container .rightBtn:active {
+ opacity: 0.6;
+}
+.container .otherSystem {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 10px;
+}
+.container .otherSystem span {
+ color: #fff;
+ cursor: pointer;
+}
+.container .otherSystem span:hover {
+ color: #1CC0FF;
+}
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.less b/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..50bcda7e23c430345a327fd0c0bb442f332987dd
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.less
@@ -0,0 +1,84 @@
+.container {
+ width: 347px;
+ height: 196px;
+ // background: rgba(150, 47, 64, 0.7);
+ background: rgba(8, 24, 63, 0.7);
+ border-radius: 15px;
+ // padding: 20px;
+
+ .cardTitle {
+ color: rgb(189, 206, 233);
+ font-family: '钉钉进步体';
+ font-size: 22px;
+ font-weight: 400;
+ line-height: 26px;
+ position: relative;
+ padding-left: 20px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 10px;
+ height: 24px;
+ background: linear-gradient(135.87deg, rgb(86, 167, 255), rgb(86, 238, 255) 99.55%);
+ border-radius: 0px 4px 4px 0px;
+ }
+ }
+
+ .rightBtn {
+ background-color: rgba(28, 192, 255, 0.2);
+ width: 42px;
+ height: 42px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ &.bindClick {
+ // pointer-events: none;
+ opacity: 0;
+ }
+
+ &:hover {
+ background-color: rgb(28, 192, 255);
+ }
+
+ &:active {
+ opacity: 0.6;
+ }
+ }
+ // .rightBtn {
+ // width: 24px;
+ // height: 24px;
+ // border-radius: 12px;
+ // background: linear-gradient(180deg, #1CC0FF 0%, #5294FF 100%);
+ // display: flex;
+ // align-items: center;
+ // justify-content: center;
+ // cursor: pointer;
+ // opacity: 0.2;
+
+ // &:not(.bindClick) {
+ // opacity: 1;
+ // }
+ // }
+
+ .otherSystem {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 10px;
+
+ span {
+ color: #fff;
+ cursor: pointer;
+ &:hover {
+ color: #1CC0FF;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.tsx b/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..50256ad6f85c1953f17eaf40e9c720cad0c9db47
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/Card/index.tsx
@@ -0,0 +1,68 @@
+import { RightOutlined } from '@ant-design/icons';
+import { ConfigProvider, Flex, Popover } from 'antd';
+import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
+import styles from './index.less';
+
+interface PropsType {
+ title: string;
+ jumpSystem?: {
+ name: string;
+ url?: string;
+ onClick?: () => void;
+ }[]; //外跳系统
+}
+
+const Card: React.FC
+ 行业运行情况
+ setModalOpt({ open: true, title: '行业系统接入清单' })}
+ >
+
+
+
+ 目前已接入10个行业系统
+
+
+ {cards.map((card) => (
+
+ {card.children}
+
+ ))}
+
+
+
+
+
+ {jumpSystem?.map((it) => (
+
+ }
+ placement="bottomRight"
+ >
+ {title}
+
+ handleClick(it)}>{it.name}
+
+ ))}
+
+
+
+
+
+ {children}
+
+
+ setIsGovernanceModalOpen(true)}
+ value={12.06}
+ decimals={2}
+ name="已汇聚数据"
+ unit="亿条"
+ valueStyle={{
+ background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ fontFamily: 'D-DIN Exp',
+ fontSize: '36px',
+ fontWeight: 700,
+ }}
+ labelStyle={{
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 700,
+ lineHeight: '26px',
+ }}
+ unitStyle={{
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '26px',
+ }}
+ />
+
+ setIsGovernanceModalOpen(false)}
+ />
+
+ );
+};
+
+export default DataElement;
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/ManagementElement/index.css b/src/pages/NewHome/NewRightContent/ResourceElements/components/ManagementElement/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ea107b672b9deaf902f7d9335086bc7a8eec714d
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/ManagementElement/index.css
@@ -0,0 +1,5 @@
+.container {
+ width: 347px;
+ height: 196px;
+ padding: 10px;
+}
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/ManagementElement/index.less b/src/pages/NewHome/NewRightContent/ResourceElements/components/ManagementElement/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..e45fe8d382b4799471ff8d0972689e1ace1439e0
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/ManagementElement/index.less
@@ -0,0 +1,5 @@
+.container {
+ width: 347px;
+ height: 196px;
+ padding: 10px;
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/ManagementElement/index.tsx b/src/pages/NewHome/NewRightContent/ResourceElements/components/ManagementElement/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cc638441e1ef68ebd181dc6a87a488284a961224
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/ManagementElement/index.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Flex } from 'antd';
+import DescriptionItem from '@/components/DescriptionItem';
+import styles from './index.less';
+
+const ManagementElement: React.FC = () => {
+ const commonValueStyle = {
+ background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ fontFamily: 'D-DIN Exp',
+ fontSize: '36px',
+ fontWeight: 700,
+ };
+
+ const commonLabelStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 700,
+ lineHeight: '26px',
+ // marginLeft: '100px',
+ };
+
+ const valueStyle = {
+ ...commonValueStyle,
+ marginLeft: '50px',
+ };
+
+ const labelStyle = {
+ ...commonLabelStyle,
+ marginTop: '-5px',
+ }
+
+ const commonUnitStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '26px',
+ };
+
+ return (
+ dispatch.push('DataActivity')}
+ >
+ 三级标签体系
+
+
+
+
+
+
+
+ );
+};
+
+export default ManagementElement;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.css b/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..b438408b4a88cb8c4231244a26bd14587b7baa57
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.css
@@ -0,0 +1,5 @@
+.container {
+ width: 347px;
+ height: 196px;
+ padding: 20px;
+}
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.less b/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..88314e325ad5efb20ab0e5000d5f894dd988b755
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.less
@@ -0,0 +1,5 @@
+.container {
+ width: 347px;
+ height: 196px;
+ padding: 20px;
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.tsx b/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..afd5b89564bd54837ad085ee2ab08da5d75fc6b3
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Flex } from 'antd';
+import DescriptionItem from '@/components/DescriptionItem';
+import styles from './index.less';
+
+const PerceptionSource: React.FC = () => {
+ const commonValueStyle = {
+ background: 'linear-gradient(180deg, #AAFFF6 0%, #25BBFF 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent',
+ fontFamily: 'D-DIN Exp',
+ fontSize: '36px',
+ fontWeight: 700,
+ };
+
+ const commonLabelStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 700,
+ lineHeight: '26px',
+ };
+
+ const commonUnitStyle = {
+ color: '#BCCEE9',
+ fontFamily: '微软雅黑',
+ fontSize: '20px',
+ fontWeight: 400,
+ lineHeight: '26px',
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+export default PerceptionSource;
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/index.css b/src/pages/NewHome/NewRightContent/ResourceElements/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e561fdb5cfce7626458eb9da008275977c08538b
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/index.css
@@ -0,0 +1,27 @@
+.container {
+ width: 1128px;
+ height: 289px;
+ background: rgba(63, 149, 229, 0.15);
+ border-radius: 20px;
+ backdrop-filter: blur(20px);
+ padding: 20px;
+}
+.container .title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 20px;
+}
+.container .title span {
+ color: #bdcee9;
+ font-family: '钉钉进步体';
+ font-size: 30px;
+ font-weight: 400;
+ line-height: 36px;
+}
+.container .content {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px;
+ height: calc(100% - 64px);
+}
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/index.less b/src/pages/NewHome/NewRightContent/ResourceElements/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..5df9feeb81e6e01035dc2b2c4cc64696cf6f715e
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/index.less
@@ -0,0 +1,36 @@
+.container {
+ width: 1128px;
+ height: 289px;
+ background: rgba(63, 149, 229, 0.15);
+ border-radius: 20px;
+ backdrop-filter: blur(20px);
+ padding: 20px;
+
+ .title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 20px;
+
+ // width: 215px;
+ // height: 52px;
+ // border-radius: 20px,0px,25.5px,0px;
+ // background: rgba(62, 147, 199, 0.3);
+
+
+ span {
+ color: rgb(189, 206, 233);
+ font-family: '钉钉进步体';
+ font-size: 30px;
+ font-weight: 400;
+ line-height: 36px;
+ }
+ }
+
+ .content {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px;
+ height: calc(100% - 64px);
+ }
+}
\ No newline at end of file
diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/index.tsx b/src/pages/NewHome/NewRightContent/ResourceElements/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..477f1c0112d3caceb7adfcf57aa66012b15bb869
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/ResourceElements/index.tsx
@@ -0,0 +1,79 @@
+import Modal from '@/components/HncyModal';
+import DataGovernance from '@/pages/GlobalModalServices/DataGovernance';
+import React, { useState } from 'react';
+import Card from './components/Card';
+import DataElement from './components/DataElement';
+import ManagementElement from './components/ManagementElement';
+import PerceptionSource from './components/PerceptionSource';
+import styles from './index.less';
+
+const ResourceElements: React.FC = () => {
+ const [modalVisible, setModalVisible] = useState(false);
+
+ const cards = [
+ {
+ title: '数据要素',
+ children:
+ setModalVisible(false)}
+ width={1470}
+ height={846}
+ >
+ setModalVisible(false)}
+ />
+
+
+ );
+};
+
+export default ResourceElements;
diff --git a/src/pages/NewHome/NewRightContent/index.css b/src/pages/NewHome/NewRightContent/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..8ecc455a432901f0af8191d71bf41710700505db
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/index.css
@@ -0,0 +1,7 @@
+.container {
+ width: 1128px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 17px;
+}
diff --git a/src/pages/NewHome/NewRightContent/index.less b/src/pages/NewHome/NewRightContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..64f10edb98d327e967e8fb2c943492653211c4bb
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/index.less
@@ -0,0 +1,8 @@
+.container {
+ width: 1128px;
+ height: 100%;
+// height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 17px;
+}
diff --git a/src/pages/NewHome/NewRightContent/index.tsx b/src/pages/NewHome/NewRightContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d036a8dfcef20bacb1e9167bf3fbeb6d111d4c8c
--- /dev/null
+++ b/src/pages/NewHome/NewRightContent/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './index.less';
+import ResourceElements from './ResourceElements';
+import IndustryOperationNew from './IndustryOperationNew';
+
+const NewRightContent: React.FC = () => {
+ return (
+
+ 资源要素
+
+
+ {cards.map((card) => (
+
+ {card.children}
+
+ ))}
+
+
+
+
+ );
+};
+
+export default NewRightContent;
\ No newline at end of file
diff --git a/src/pages/OverviewHome/index.css b/src/pages/OverviewHome/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..17aac65caad3e876ae418f792a59b008073e2d9c
--- /dev/null
+++ b/src/pages/OverviewHome/index.css
@@ -0,0 +1,23 @@
+.container {
+ width: 100%;
+ height: 100%;
+ background-image: url('@/assets/images/newMain/BG.png');
+ background-size: 100% 100%;
+ box-sizing: border-box;
+ -webkit-user-select: none;
+ user-select: none;
+}
+.container .content {
+ display: flex;
+ padding: 12px 30px;
+ gap: 30px;
+}
+.container .content > div:nth-of-type(1) {
+ width: 1128px;
+}
+.container .content .mapContainer {
+ height: 100%;
+}
+.container .content > div:nth-of-type(3) {
+ width: 1128px;
+}
diff --git a/src/pages/OverviewHome/index.less b/src/pages/OverviewHome/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f1ff767724a29ed8461521dc1d0f834e484eadba
--- /dev/null
+++ b/src/pages/OverviewHome/index.less
@@ -0,0 +1,38 @@
+.container {
+ width: 100%;
+ height: 100%;
+ // width: 100vw;
+ // height: 100vh;
+ background-image: url('@/assets/images/newMain/BG.png');
+ background-size: 100% 100%;
+ box-sizing: border-box;
+ -webkit-user-select: none;
+ user-select: none;
+
+ .content {
+ display: flex;
+ padding: 12px 30px;
+ gap: 30px;
+
+ > div:nth-of-type(1) {
+ width: 1128px;
+ }
+
+ .mapContainer {
+ // flex: 1;
+ height: 100%;
+ }
+ // > div:nth-of-type(2) {
+ // width: 2235px;
+ // height: 100%;
+ // border-radius: 50px;
+ // background-image: url("@/assets/images/common/pageBg.png");
+ // background-size: 100% 100%;
+ // overflow: hidden;
+ // }
+
+ > div:nth-of-type(3) {
+ width: 1128px;
+ }
+ }
+}
diff --git a/src/pages/OverviewHome/index.tsx b/src/pages/OverviewHome/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dfb8fd50c410b0ae90cdf36a0357fa6aaddc8ecb
--- /dev/null
+++ b/src/pages/OverviewHome/index.tsx
@@ -0,0 +1,51 @@
+import Header from '@/layouts/Header';
+import NewLeftSidebar from '@/pages/NewHome/NewLeftSidebar';
+import NewRightContent from '@/pages/NewHome/NewRightContent';
+import React from 'react';
+import MapCantainer from '../SecurityServiceOverview/components/MapCantainer';
+import styles from './index.less';
+
+const OverviewHome: React.FC = () => {
+ return (
+
+
+ );
+};
+
+// const OverviewHome: React.FC = () => {
+// return (
+//
+
+
+
+
+//
+// )
+// };
+export default OverviewHome;
diff --git a/src/pages/PeopleComplain/ManageQualityAndEffect/AreaDistribution/index.tsx b/src/pages/PeopleComplain/ManageQualityAndEffect/AreaDistribution/index.tsx
index 669e4eecd9f2cfc20a8952b0b71f4ba1189a1aaf..e081709d86cef7c6c8ffe8c908093897f341e5e2 100644
--- a/src/pages/PeopleComplain/ManageQualityAndEffect/AreaDistribution/index.tsx
+++ b/src/pages/PeopleComplain/ManageQualityAndEffect/AreaDistribution/index.tsx
@@ -73,7 +73,7 @@ const AreaDistribution = () => {
+// {/*
+//
+//
+//
{
- statisticTotal?.map((item, index) => (
+ statisticTotal?.map((item: any, index: number) => (
();
+ const colorConfig: Record<
+ string,
+ {
+ color: CSSProperties['color'];
+ bg: string;
+ icon: string;
+ }
+ > = {
+ 红色风险: {
+ //红色风险
+ color: '#FFBCBC',
+ bg: redBg,
+ icon: 'redIcon',
+ },
+ 橙色风险: {
+ //橙色风险
+ color: '#FDDFCE',
+ bg: orangeBg,
+ icon: 'orangeIcon',
+ },
+ 黄色风险: {
+ //黄色风险
+ color: '#FFE892',
+ bg: yellowBg,
+ icon: 'yellowIcon',
+ },
+ 一般风险: {
+ //一般风险
+ color: '#BFE4FF',
+ bg: blueBg,
+ icon: 'blueIcon',
+ },
+ };
+ /** @description store */
+
+ const [checkedKeys, setCheckedKeys] = useState(['aq', 'cswt']);
+ const MapRef = useRef();
+ const { selectDistrict, areaListDto, getIndexs, indexs } = useModel(
+ 'regionalIndex',
+ (store) => ({
+ areaListDto: store.areaListDto,
+ selectDistrict: store.selectDistrict!,
+ getIndexs: store.getIndexs,
+ indexs: store.indexs,
+ }),
+ );
+ // 事件详情弹窗
+ const [detailModalOpt, setDetailModalOpt] = useState({
+ open: false,
+ title: '',
+ eventId: '',
+ });
+ /** 是否启用百度地图 */
+ const [isBmap, setIsBmap] = useState(false);
+ const [leftTabKey, setLeftTabKey] = useState('1');
+ const [data, setData] = useState([]);
+
+ const { dispatch } = useGlobalModalServices();
+ const [searchParams, setSearchParams] = useState({
+ parentTypeCode: 'dlql',
+ lat: 30.680193,
+ lon: 104.075555,
+ distance: 1000,
+ page: 1,
+ count: 100,
+ });
+
+ useEffect(() => {
+ services.Physicalsign.getObjectPolygon({
+ physicalSignType: 1,
+ objectHierarchy: 1,
+ }).then((res) => {
+ setData(res.data);
+ });
+
+ //最新事件
+ // services.CityProblemApi.getUpToDateEvent({ page: 1, count: 3 }).then(
+ // (res) => {
+ // console.log('getUpToDateEvent', res);
+ // },
+ // );
+ }, []);
+
+ //safetyRiskEventMap
+ const { data: warnMark } = useRequest(
+ () => services.CityRiskApi.safetyRiskEventMap(searchParams),
+ {
+ refreshDeps: [searchParams],
+ },
+ );
+ const iconList = {
+ 1: require('@/assets/images/wtIc.png'),
+ 2: require('@/assets/images/tuchuIc.png'),
+ 3: require('@/assets/images/tuchuIc.png'),
+ 4: require('@/assets/images/wtIc.png'),
+ 5: require('@/assets/images/tuchuIc.png'),
+ };
+ const pList = [
+ {
+ l: [103.87453593938976, 30.746739203687397],
+ type: 1,
+ },
+ {
+ l: [103.9541617397942, 30.735316951515046],
+ type: 2,
+ },
+ {
+ l: [103.87424848162657, 30.72240319350852],
+ type: 3,
+ },
+ {
+ l: [103.92455359018533, 30.71569728382409],
+ type: 4,
+ },
+ {
+ l: [103.87453593938976, 30.71569728382409],
+ type: 5,
+ },
+ ];
+ const eventList = [
+ {
+ img: require('@/assets/images/event/newEvent.png'),
+ title: '道路不洁',
+ time: 5,
+ },
+ {
+ img: require('@/assets/images/event/newEvent.png'),
+ title: '道路不洁',
+ time: 5,
+ },
+ {
+ img: require('@/assets/images/event/newEvent.png'),
+ title: '道路不洁',
+ time: 5,
+ },
+ ];
+ /** 标题渲染 */
+ const titleRender = () => {
+ return (
+
+
+ );
+ };
+
+ return (
+ ();
+ const ref = useRef(0);
+ const { dispatch } = useGlobalModalServices();
+ /** 是否启用百度地图 */
+ const [isBmap, setIsBmap] = useState(false);
+ const MapRef = useRef();
+ const [leftTabKey, setLeftTabKey] = useState('1');
+ const [checkedKeys, setCheckedKeys] = useState(['aq', 'cswt'])
+ // 事件详情弹窗
+ const [detailModalOpt, setDetailModalOpt] = useState({
+ open: false,
+ title: '',
+ eventId: '',
+ });
+ const [areaList, setAreaList] = useState([])
+ const [allAreaMapData, setAllAreaMapData] = useState([])
+ const [searchParams, setSearchParams] = useState({
+ parentTypeCode: 'dlql',
+ lat: 30.680193,
+ lon: 104.075555,
+ distance: 1000,
+ page: 1,
+ count: 100,
+ });
+ const data = [
+ {
+ name: '党政机关',
+ num: 2,
+ child: [
+ {
+ name: '市委市政府',
+ value: 98.5,
+ },
+ {
+ name: '市城管委',
+ value: 78.5,
+ },
+ ],
+ },
+ {
+ name: '交通场站',
+ num: 6,
+ child: [
+ {
+ name: '市委市政府',
+ value: 98.5,
+ },
+ {
+ name: '市城管委',
+ value: 78.5,
+ },
+ ],
+ },
+ {
+ name: '美丽街区',
+ num: 6,
+ child: [
+ {
+ name: '市委市政府',
+ value: 98.5,
+ },
+ {
+ name: '市城管委',
+ value: 78.5,
+ },
+ ],
+ },
+ ];
+
+ const p1 = [103.74243115816007, 30.79721665183887];
+
+ const p2 = [104.48437948789275, 30.807638945537175];
+
+ /**
+ * @description 设置地图视野
+ */
+ const setViewport = () => {
+ // const map = MapRef.current?.map as BMapGL.Map;
+ // if (map) {
+ // map.setViewport([p1, p2]);
+ // }
+ };
+
+ /** @description 移动视角到能显示全部覆盖物 */
+ useEffect(() => {
+ setViewport();
+ }, [MapRef.current]);
+ const { data: warnMark } = useRequest(
+ () => services.CityRiskApi.safetyRiskEventMap(searchParams),
+ {
+ refreshDeps: [searchParams],
+ },
+ );
+ const iconList = {
+ 1: require('@/assets/images/wtIc.png'),
+ 2: require('@/assets/images/tuchuIc.png'),
+ 3: require('@/assets/images/tuchuIc.png'),
+ 4: require('@/assets/images/wtIc.png'),
+ 5: require('@/assets/images/tuchuIc.png'),
+ };
+
+ // 重点区域列表
+ const getImportantAreaList = async () => {
+ const params = {
+ physicalSignType: 1,
+ objectHierarchy: 19
+ }
+ const res = await services.Physicalsign.getGroupObjectPhysicalSignIndex(params)
+ console.log(res);
+ if (res.code === 200) {
+ setAreaList(res.data)
+ }
+ }
+
+ useEffect(() => {
+ getImportantAreaList()
+ }, [])
+
+ const pList = [
+ {
+ l: [103.87453593938976, 30.746739203687397],
+ type: 1,
+ },
+ {
+ l: [103.9541617397942, 30.735316951515046],
+ type: 2,
+ },
+ {
+ l: [103.87424848162657, 30.72240319350852],
+ type: 3,
+ },
+ {
+ l: [103.92455359018533, 30.71569728382409],
+ type: 4,
+ },
+ {
+ l: [103.87453593938976, 30.71569728382409],
+ type: 5,
+ },
+ ];
+
+ const getObjectPolygon = async () => {
+ const params = {
+ physicalSignType: 1,
+ objectHierarchy: 19,
+ }
+ const res = await services.Physicalsign.getObjectPolygon(params)
+ if (res.code === 200) {
+ if (res.data?.length) {
+ console.log(res.data)
+ setAllAreaMapData(res.data)
+ }
+ }
+ }
+
+ useEffect(() => {
+ getObjectPolygon()
+ }, [])
+
+
+ /** 标题渲染 */
+ const titleRender = () => {
+ return (
+
+
+ );
+ };
+ return (
+ = {
+ '1':
{item.ssqy}
diff --git a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.tsx
index 92509c2448d91195a83802e8a27b049d288bae97..42c8f4742ad82f0ac0c6a51d5f3980fc36f2b44c 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.tsx
@@ -24,7 +24,7 @@ const IndustryWiget = ({
onClick={() => {
setWayModalOpt({
open: true,
- title: data?.parentData?.typeName,
+ title: data?.typeName,
...data,
});
}}
diff --git a/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx
index dbd81df3708f8dcd48b9895c61d406598df4d628..edb5c2fc583d0e39bd51ce9b3e34dcdc86bed518 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx
@@ -212,7 +212,7 @@ const MeetSafeguard = () => {
key: 'name',
width: 80,
ellipsis: true,
- render: (text, record, index) => {
+ render: (text:any, record:any, index:number) => {
// 当前页码减1，乘以每页数量，再加上当前行的索引加1
return `${(searchData?.page - 1) * dataSource?.length + (index + 1)}`;
},
diff --git a/src/pages/SecurityServiceOverview/SecurityState/SecurityCqi/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/SecurityCqi/index.tsx
index 2dc2515d38434573e3c5b050a0a36e1c88813fa1..111306219cde9055f3b965905189669161af7146 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/SecurityCqi/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/SecurityCqi/index.tsx
@@ -127,7 +127,7 @@ const SecurityCqi = ({ warnLevel }: { warnLevel: number }) => {
{
-
const [warnLevel, setWarnLevel] = useState(2);
return (
{/* 左侧 */}
diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.less b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..80f74e7d4a60dcc38926ae9a04daa047dce2db51
--- /dev/null
+++ b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.less
@@ -0,0 +1,327 @@
+.container {
+ background-color: #005a8f;
+ position: relative;
+ background-size: 100% 100%;
+ overflow: hidden;
+ height: 960px;
+}
+
+.districtName {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 12px 30px;
+ border-radius: 20px 0px 20px 0px;
+ background: rgba(23, 125, 186, 0.9);
+ color: rgb(255, 255, 255);
+ font-family: DingTalk JinBuTi;
+ font-size: 30px;
+ line-height: 1;
+}
+
+.statusBar {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ // width: 625px;
+ padding: 20px 20px;
+ z-index: 997;
+
+ width: 300px;
+ border-radius: 10px;
+ background: rgba(12, 60, 112, 0.7);
+ // display: flex;
+ // align-items: center;
+ // justify-content: center;
+
+ color: rgb(203, 227, 240);
+ font-size: 16px;
+
+ .title {
+ color: rgb(188, 206, 233);
+ font-size: 18px;
+ margin-bottom: 10px;
+ }
+
+ .leftTab {
+ background: rgba(19, 145, 224, 0.464);
+ width: 175px;
+ height: 35px;
+ border-radius: 15px;
+ padding-left: 10px;
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ cursor: pointer;
+ }
+
+ .itemWarp {
+ display: flex;
+ align-items: center;
+ margin-bottom: 8px;
+ }
+
+ .rowItem {
+ margin-top: 16px;
+
+ img {
+ width: 20px;
+ height: 20px;
+ }
+ }
+.treeTitle{
+ display: flex;
+ align-items: center;
+ img{
+ margin-left: -10px;
+ margin-right: 5px;
+ width: 19px;
+ height: 18px;
+ }
+}
+ :global {
+ .css-dev-only-do-not-override-18ij7dm.ant-tree {
+ background-color: #1b47616a !important;
+ }
+
+ .css-dev-only-do-not-override-18ij7dm.ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner {
+ background-color: #48779d !important;
+ border: #99fdfa 1px solid !important;
+ }
+ .css-dev-only-do-not-override-18ij7dm.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
+ .css-dev-only-do-not-override-18ij7dm.ant-tree .ant-tree-checkbox+span.ant-tree-node-selected {
+ background-color: #1b47616a !important;
+ }
+ }
+}
+
+.leftWarp {
+ position: absolute;
+ left: 20px;
+ top: 100px;
+
+ .warnWarp {
+ .warnItem {
+ width: 100%;
+ height: 70px;
+ border-radius: 6px;
+ padding: 0 24px 0 70px;
+ color: var(--color);
+ margin-bottom: 20px;
+ position: relative;
+
+ .icon {
+ width: 100px;
+ position: absolute;
+ top: -25px;
+ left: -24px;
+ }
+
+
+ .title {
+ font-size: 18px;
+ font-family: DingTalk JinBuTi;
+ }
+
+ .address {
+ width: 110px;
+ font-size: 14px;
+ }
+
+ .time {
+ font-size: 14px;
+ width: 70px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+
+
+ }
+
+ .eventWarp {
+ width: 222px;
+ height: 463px;
+ background-color: rgba(12, 60, 112, 0.7);
+ border-radius: 20px;
+ padding: 16px 25px;
+
+ .title {
+ color: rgb(228, 237, 255);
+ text-align: center;
+ font-size: 24px;
+ font-family: DingTalk JinBuTi;
+ }
+
+ .listWarp {
+ margin-top: 20px;
+
+ .items {
+ width: 167px;
+ height: 97px;
+ border-radius: 10px;
+ background-color: #48779d;
+ position: relative;
+margin-bottom: 20px;
+ .img {
+ width: 167px;
+ height: 97px;
+ border-radius: 10px;
+ }
+
+ .bottomWarp {
+ position: absolute;
+ bottom: 0;
+ height: 32px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(0, 0, 0, 0.5);
+ font-size: 18px;
+ border-radius: 0px 0px 10px 10px;
+ }
+
+ .time {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ height: 32px;
+ background-color: rgba(0, 0, 0, 0.5);
+ border-radius: 10px;
+ height: 28px;
+ padding: 0 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+ .otherWarp{
+ display: flex;
+ justify-content: center;
+ .other{
+ width: 60px;
+ height: 27px;
+ border-radius: 20px;
+ background-color: rgba(22, 134, 255, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+ }
+}
+
+.mark {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ margin-right: 8px;
+}
+
+.mapController {
+ position: absolute;
+ right: 30px;
+ bottom: 30px;
+
+ z-index: 100;
+
+ >div {
+ width: 40px;
+ height: 40px;
+ border-radius: 4px;
+
+ background: rgb(0, 71, 113);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ cursor: pointer;
+ color: #a8cde8;
+ margin-top: 10px;
+ }
+}
+
+.indexMarker {
+ width: 44px;
+ height: 44px;
+ box-sizing: border-box;
+ border: 3px solid rgba(255, 255, 255, 0.5);
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
+ background: var(--bg-color);
+ border-radius: 22px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ color: var(--color);
+}
+
+.window {
+ box-sizing: border-box;
+ border: 2px solid rgba(64, 146, 217, 0.95);
+ border-radius: 10px;
+ background: rgb(3, 85, 135);
+ width: 460px;
+
+ &::after {
+ position: absolute;
+ content: '';
+ /**三角形 */
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 10px 10px 0 10px;
+ border-color: rgb(3, 85, 135) transparent transparent transparent;
+ bottom: -7px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 999;
+ }
+ &::before {
+ position: absolute;
+ content: '';
+ /**三角形 */
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 10px 10px 0 10px;
+ border-color: rgba(64, 146, 217, 0.95) transparent transparent transparent;
+ bottom: -10px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 998;
+ }
+}
+.modalTitle {
+ .title {
+ background: linear-gradient(180deg, rgb(255, 255, 255), rgb(181, 229, 255));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ font-family: DingTalk JinBuTi;
+ font-size: 30px;
+ margin-left: -10px;
+ }
+
+ .tag {
+ display: inline-block;
+ width: 83px;
+ height: 24px;
+ border-radius: 12px;
+ background: linear-gradient(180.00deg, rgba(26, 66, 110, 0), rgb(122, 94, 111) 100%);
+ color: #FF7A7A;
+ text-align: center;
+ font-size: 16px;
+ line-height: 23px;
+ margin: 0 10px 0 20px;
+ background-size: 100% 100%;
+ }
+
+ .type {
+ font-size: 16px;
+ color: #BCCEE9;
+ }
+}
diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..da0e8cf3698af2aec755881ef2e86bb8eb473db0
--- /dev/null
+++ b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx
@@ -0,0 +1,536 @@
+import blueBg from '@/assets/images/SecurityServiceOverview/right/blueBg.png';
+import orangeBg from '@/assets/images/SecurityServiceOverview/right/orangeBg.png';
+import redBg from '@/assets/images/SecurityServiceOverview/right/redBg.png';
+import yellowBg from '@/assets/images/SecurityServiceOverview/right/yellowBg.png';
+import risk4 from '@/assets/images/SecurityServiceOverview/risk/blue.png';
+import risk2 from '@/assets/images/SecurityServiceOverview/risk/orange.png';
+import risk1 from '@/assets/images/SecurityServiceOverview/risk/red.png';
+import risk3 from '@/assets/images/SecurityServiceOverview/risk/yellow.png';
+import CooglMap from '@/components/CooglMap';
+import Modal from '@/components/HncyModal';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
+import services from '@/services';
+import BMapService from '@/utils/mapService';
+import { getColorByIndex } from '@/utils/ui';
+import { useModel, useRequest } from '@umijs/max';
+import { ConfigProvider, Flex, Space, Tree } from 'antd';
+import classNames from 'classnames';
+import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import BaseInfo from '../../BaseInfo';
+import styles from './index.less';
+/** 地图 */
+const DistrictMap: React.FC = () => {
+ const [selected, setSelected] = useState
-
-
-
+
{/* 地图 */}
diff --git a/src/pages/SecurityServiceOverview/components/BaseInfo/DetMap/index.tsx b/src/pages/SecurityServiceOverview/components/BaseInfo/DetMap/index.tsx
index 86f5d3798865067b3abd61e1a3070579f423cc6d..1b90f72aa5ed5df10987d65fdc028a77e72fdc19 100644
--- a/src/pages/SecurityServiceOverview/components/BaseInfo/DetMap/index.tsx
+++ b/src/pages/SecurityServiceOverview/components/BaseInfo/DetMap/index.tsx
@@ -93,7 +93,7 @@ const DetMap = () => {
center={{ x: 104, y: 30.55 }}
showCustomComponent={false}
>
-
+ {/*
{warnMark?.items?.map((item: any, index: number) => {
const point = [Number(item?.x_pos), Number(item?.y_pos)];
@@ -120,7 +120,7 @@ const DetMap = () => {
);
})}
-
+ */}
{detailModalOpt?.eventType}
+
+ {detailModalOpt?.riskLevelName}
+
+ {detailModalOpt?.position}
+
+
+ {leftTabKey === '1' ? (
+ <>
+ {data?.map((item, index) => {
+ return (
+ {
+ console.log('hello world');
+ setSelected(item);
+ dispatch.push('districtIndex', {
+ title: item?.objectName + '运行情况',
+ props: {
+ data: item,
+ indexs: indexs,
+ },
+ });
+ }}
+ >
+
+ );
+ })}
+ {/* {selected && (
+ {
+ setSelected(undefined);
+ }}
+ >
+
+ )} */}
+
+ ) : (
+ <>
+ {warnMark?.items?.map((item: any, index: number) => {
+ const point = [Number(item?.x_pos), Number(item?.y_pos)];
+
+ return (
+ {
+ setDetailModalOpt({
+ open: true,
+ eventId: item?.riskId,
+ ...item,
+ });
+ }}
+ >
+ 
+
+ );
+ })}
+ {pList.map((item, index) => {
+ return (
+ {}}
+ position={item.l}
+ icon={(iconList as any)[index + 1]}
+ >
+ );
+ })}
+
+ )}
+
+
+ {selectDistrict && (
+ {
+ setDetailModalOpt({
+ open: false,
+ title: '事件详情',
+ eventId: '',
+ });
+ }}
+ width={2650}
+ height={900}
+ >
+ {detailModalOpt?.open && (
+ {
+ console.log(val);
+
+ setDetailModalOpt({
+ ...detailModalOpt,
+ position: val?.position,
+ eventType: val?.event_type,
+ riskLevelName: val?.risklevel,
+ });
+ }}
+ />
+ )}
+
+
+ );
+};
+
+export default DistrictMap;
diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/EmphasisAreaMap/index.less b/src/pages/SecurityServiceOverview/components/MapCantainer/EmphasisAreaMap/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..d4d940403c7c4782899186d8fd3bfcb949ada83a
--- /dev/null
+++ b/src/pages/SecurityServiceOverview/components/MapCantainer/EmphasisAreaMap/index.less
@@ -0,0 +1,258 @@
+.container {
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+
+ >img {
+ cursor: pointer;
+ }
+
+ >img:nth-of-type(1) {
+ position: absolute;
+ left: 700px;
+ top: 200px;
+ }
+
+ >img:nth-of-type(2) {
+ position: absolute;
+ left: 1100px;
+ top: 340px;
+ }
+}
+
+.mapController {
+ position: absolute;
+ right: 30px;
+ bottom: 30px;
+ z-index: 1001;
+
+ >div {
+ width: 40px;
+ height: 40px;
+ border-radius: 4px;
+
+ background: rgb(0, 71, 113);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 18px;
+ cursor: pointer;
+ color: #a8cde8;
+ margin-top: 10px;
+ }
+}
+
+.statusBar {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ // width: 625px;
+ padding: 20px 20px;
+ z-index: 997;
+
+
+ border-radius: 10px;
+ background: rgba(12, 60, 112, 0.7);
+ // display: flex;
+ // align-items: center;
+ // justify-content: center;
+
+ color: rgb(203, 227, 240);
+ font-size: 16px;
+
+ .title {
+ color: rgb(188, 206, 233);
+ font-size: 18px;
+ margin-bottom: 10px;
+ }
+
+ .leftTab {
+ background: rgba(19, 145, 224, 0.464);
+ width: 175px;
+ height: 35px;
+ border-radius: 15px;
+ padding-left: 10px;
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ cursor: pointer;
+ }
+
+ .itemWarp {
+ display: flex;
+ align-items: center;
+ margin-bottom: 8px;
+ }
+
+ .treeTitle {
+ display: flex;
+ align-items: center;
+
+ img {
+ margin-left: -10px;
+ margin-right: 5px;
+ width: 19px;
+ height: 18px;
+ }
+ }
+
+ :global {
+ .css-dev-only-do-not-override-18ij7dm.ant-tree {
+ background-color: #1b47616a !important;
+ }
+
+ .css-dev-only-do-not-override-18ij7dm.ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner {
+ background-color: #48779d !important;
+ border: #99fdfa 1px solid !important;
+ }
+
+ .css-dev-only-do-not-override-18ij7dm.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
+ .css-dev-only-do-not-override-18ij7dm.ant-tree .ant-tree-checkbox+span.ant-tree-node-selected {
+ background-color: #1b47616a !important;
+ }
+ }
+}
+
+.mark {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ margin-right: 8px;
+}
+
+.leftList {
+ width: 352px;
+ height: 605px;
+ z-index: 997;
+ border-radius: 20px;
+ -webkit-backdrop-filter: blur(20px);
+ backdrop-filter: blur(20px);
+ background: rgba(12, 60, 112, 0.7);
+ position: absolute;
+ left: 10px;
+ top: 100px;
+ padding: 16px 25px;
+ overflow-y: auto;
+}
+
+.listTitle {
+ color: rgb(179, 214, 247);
+ font-family: DingTalk JinBuTi;
+ font-size: 22px;
+ font-weight: 400;
+ margin-bottom: 10px;
+}
+
+.listItem {
+ height: 60px;
+ padding: 0 24px;
+ color: rgb(228, 237, 255);
+ font-family: D-DIN;
+ font-size: 20px;
+ border-radius: 18px;
+ margin-bottom: 10px;
+ cursor: pointer;
+
+ background: rgba(67, 177, 255, 0.13);
+}
+
+.childWrap {
+ margin-top: 5px;
+ margin-bottom: 10px;
+ border-radius: 18px;
+ background: rgba(67, 177, 255, 0.13);
+
+ .childItem {
+ border-radius: 18px;
+
+ height: 60px;
+ padding: 0 24px;
+
+ > :first-child {
+ color: rgb(228, 237, 255);
+ font-family: D-DIN;
+ font-size: 20px;
+ }
+
+ > :last-child {
+ font-family: D-DIN;
+ font-size: 28px;
+ font-weight: 700;
+ }
+
+ &:hover {
+ background: rgba(67, 177, 255, 0.37);
+ }
+ }
+}
+
+.indexMarker {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100px;
+ height: 100px;
+ pointer-events: none;
+}
+
+.markerIcon {
+ width: 22px;
+ height: 22px;
+ box-sizing: border-box;
+ border: 4px solid rgb(87, 239, 88);
+ background: rgba(87, 239, 88, 0.1);
+ border-radius: 50%;
+ border-color: var(--b-color);
+}
+
+.markerContent {
+ background-color: rgba(33, 50, 88, 0.9);
+ border-radius: 10px;
+
+ font-weight: 700;
+ white-space: nowrap;
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+ padding: 4px 15px;
+ cursor: pointer;
+
+ >span {
+ font-size: 28px;
+ font-family: D-DIN;
+ margin-left: 12px;
+ color: var(--b-color);
+ }
+}
+
+.modalTitle {
+ .title {
+ background: linear-gradient(180deg, rgb(255, 255, 255), rgb(181, 229, 255));
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ font-family: DingTalk JinBuTi;
+ font-size: 30px;
+ margin-left: -10px;
+ }
+
+ .tag {
+ display: inline-block;
+ width: 83px;
+ height: 24px;
+ border-radius: 12px;
+ background: linear-gradient(180.00deg, rgba(26, 66, 110, 0), rgb(122, 94, 111) 100%);
+ color: #FF7A7A;
+ text-align: center;
+ font-size: 16px;
+ line-height: 23px;
+ margin: 0 10px 0 20px;
+ background-size: 100% 100%;
+ }
+
+ .type {
+ font-size: 16px;
+ color: #BCCEE9;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/EmphasisAreaMap/index.tsx b/src/pages/SecurityServiceOverview/components/MapCantainer/EmphasisAreaMap/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a1b73e3db7af38aa465038231340a6ec26d1cb25
--- /dev/null
+++ b/src/pages/SecurityServiceOverview/components/MapCantainer/EmphasisAreaMap/index.tsx
@@ -0,0 +1,625 @@
+import blueBg from '@/assets/images/SecurityServiceOverview/right/blueBg.png';
+import orangeBg from '@/assets/images/SecurityServiceOverview/right/orangeBg.png';
+import redBg from '@/assets/images/SecurityServiceOverview/right/redBg.png';
+import yellowBg from '@/assets/images/SecurityServiceOverview/right/yellowBg.png';
+import risk4 from '@/assets/images/SecurityServiceOverview/risk/blue.png';
+import risk2 from '@/assets/images/SecurityServiceOverview/risk/orange.png';
+import risk1 from '@/assets/images/SecurityServiceOverview/risk/red.png';
+import risk3 from '@/assets/images/SecurityServiceOverview/risk/yellow.png';
+import BMapView from '@/components/BMapView';
+import CooglMap from '@/components/CooglMap';
+import Modal from '@/components/HncyModal';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
+import services from '@/services';
+import BMapService from '@/utils/mapService';
+import { getColorByIndex, getCqiStatusStyle } from '@/utils/ui';
+import { DownCircleFilled, UpCircleFilled } from '@ant-design/icons';
+import { useRequest } from 'ahooks';
+import { ConfigProvider, Flex, Space, Tree } from 'antd';
+import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import { CustomOverlay } from 'react-bmapgl';
+import styles from './index.less';
+import BaseInfo from '../../BaseInfo';
+const EmphasisAreaMap: React.FC = () => {
+ const colorConfig: Record<
+ string,
+ {
+ color: CSSProperties['color'];
+ bg: string;
+ icon: string;
+ }
+ > = {
+ 红色风险: {
+ //红色风险
+ color: '#FFBCBC',
+ bg: redBg,
+ icon: 'redIcon',
+ },
+ 橙色风险: {
+ //橙色风险
+ color: '#FDDFCE',
+ bg: orangeBg,
+ icon: 'orangeIcon',
+ },
+ 黄色风险: {
+ //黄色风险
+ color: '#FFE892',
+ bg: yellowBg,
+ icon: 'yellowIcon',
+ },
+ 一般风险: {
+ //一般风险
+ color: '#BFE4FF',
+ bg: blueBg,
+ icon: 'blueIcon',
+ },
+ };
+ const [expand, setExpand] = useState
+ {Number(item.qualitySign)}
+
+
+
+
+
+
+ 道路交通设施
+
+
+
+ 2113131
+
+ {selectDistrict.objectName}
+ )}
+
+ {/*
+ */}
+
+ {
+ console.log(e);
+ }}
+ onCheck={(e) => {
+ setCheckedKeys(e);
+ }}
+ checkedKeys={checkedKeys}
+ treeData={[
+ {
+ title: '安全风险',
+ key: 'aq',
+ children: [
+ {
+ title: (
+
+ )}
+
+ 启用百度地图
+ 图层图例
+ setLeftTabKey('1')}
+ >
+ CQI
+
+
+
+
+
+ 应急态
+ {/* <60 */}
+
+
+
+
+ 预警态 <85
+
+
+
+ 标准态 85-95
+
+
+
+ 理想态 >95
+ setLeftTabKey('2')}
+ >
+ 风险预警与问题分布
+
+ {leftTabKey == '2' && (
+
+ 
红色风险
+
+ ),
+ key: 'aqh',
+ },
+ {
+ title: (
+
+ 
橙色风险
+
+ ),
+ key: 'anc',
+ },
+ {
+ title: (
+
+ 
黄色风险
+
+ ),
+ key: 'anh',
+ },
+ {
+ title: (
+
+ 
一般风险
+
+ ),
+
+ key: 'any',
+ },
+ ],
+ },
+ {
+ title: '城市问题',
+ key: 'cswt',
+ children: [
+ {
+ title: (
+
+ })
+ 未结案
+
+ ),
+ key: 'cswt1',
+ },
+ {
+ title: (
+
+ 未结案
+
+ })
+ 突出问题
+
+ ),
+ key: 'cswt2',
+ },
+ ],
+ },
+ ]}
+ />
+
+ 突出问题
+
+
+ {/* 事件详情 */}
+
+ {
+ // setDetailModalOpt({
+ // open: true,
+ // eventId: it?.asriskId,
+ // ...it,
+ // });
+ }}
+ >
+ {colorConfig['红色风险']?.icon && (
+ })
+ )}
+
+
+ 成都市温江区人和...
+
+
+
+
+
+ )}
+
+ 广告设施用电不规范
+
+ 3分钟前
+
+
+ 最新事件
+
+ {eventList?.map((item, index) => {
+ return (
+
+ {/*
+ 
+
+ );
+ })}
+ 道路不洁
+ {item.time}分钟前
+
+
*/}
+ 更多
+ {detailModalOpt?.eventType}
+
+ {detailModalOpt?.riskLevelName}
+
+ {detailModalOpt?.position}
+
+ {isBmap ? (
+ console.log(e)}
+ >
+
+
+
+
+
+ ) : (
+
+ {leftTabKey === '1' ? (
+ <>
+ {/* {
+ dispatch.push('KeyAreaDetail', {
+ title: '市委市政府',
+ });
+ }}
+ onSet={() => {
+ console.log('hello world');
+ }}
+ >
+
+ {
+ dispatch.push('KeyAreaDetail', {
+ title: '城市管委',
+ });
+ }}
+ >
+ */}
+ {
+ allAreaMapData?.map((item: any) => (
+ {
+ dispatch.push('KeyAreaDetail', {
+ title: item.objectName,
+ props: {
+ objectId: item?.objectId,
+ cqi: item?.qualitySign,
+ },
+ });
+ }}
+ key={item.objectId}
+ >
+
+ ))
+ }
+
+ ) : (
+ <>
+ {warnMark?.data?.items?.map((item: any, index: number) => {
+ const point = [Number(item?.x_pos), Number(item?.y_pos)];
+
+ return (
+ {
+ setDetailModalOpt({
+ open: true,
+ eventId: item?.riskId,
+ ...item,
+ });
+ }}
+ >
+ 
+
+ );
+ })}
+ {pList.map((item, index) => {
+ return (
+ { }}
+ position={item.l}
+ icon={(iconList as any)[index + 1]}
+ >
+ );
+ })}
+
+ )}
+
+ )}
+
+ {
+ setDetailModalOpt({
+ open: false,
+ title: '事件详情',
+ eventId: '',
+ });
+ }}
+ width={2650}
+ height={900}
+ >
+ {detailModalOpt?.open && (
+ {
+ console.log(val);
+
+ setDetailModalOpt({
+ ...detailModalOpt,
+ position: val?.position,
+ eventType: val?.event_type,
+ riskLevelName: val?.risklevel,
+ });
+ }}
+ />
+ )}
+
+
+ );
+};
+
+export default EmphasisAreaMap;
diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/index.less b/src/pages/SecurityServiceOverview/components/MapCantainer/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..5ec0350a1a45a73b4c8a519018d63fd2a3648c68
--- /dev/null
+++ b/src/pages/SecurityServiceOverview/components/MapCantainer/index.less
@@ -0,0 +1,27 @@
+.container {
+ width: 100%;
+ height: 100%;
+ background-color: aqua;
+ position: relative;
+
+ .topTabsWarp {
+ position: absolute;
+ top: 30px;
+ left: 10px;
+ z-index: 997;
+
+ }
+
+ .botTabWarp {
+ width: 100%;
+ position: absolute;
+ bottom: 20px;
+ display: flex;
+ justify-content: center;
+ z-index: 997;
+ }
+ .mapContent{
+ width: 100%;
+ height: 950px;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx b/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..831c397f6d1ec0af89bea95d69579d1dd77854b5
--- /dev/null
+++ b/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx
@@ -0,0 +1,74 @@
+import Tabs from '@/components/Tabs';
+import { useState } from 'react';
+import DistrictMap from './DistrictMap';
+import EmphasisAreaMap from './EmphasisAreaMap';
+import styles from './index.less';
+const MapContainer = () => {
+ const [topKey, setTopKey] = useState('1');
+ const botItems = [
+ {
+ key: '1',
+ img: require('@/assets/images/cssktab.png'),
+ onclick: () => {},
+ },
+ {
+ key: '2',
+ img: require('@/assets/images/aqyztTab.png'),
+ onclick: () => {
+ // history.push('/securityServiceOverview');
+ window.open(
+ `${window.location.origin}/cd-comprehensive/securityServiceOverview`,
+ '_blank',
+ );
+ },
+ },
+ {
+ key: '3',
+ img: require('@/assets/images/zhddTab.png'),
+ onclick: () => {
+ window.open('https://10.1.174.34:13000');
+ },
+ },
+ ];
+ const Mpa: Record {
+ e.stopPropagation();
+
+ dispatch.push('KeyAreaDetail', {
+ title: '市委市政府',
+ });
+ }}
+ >
+
+
+ 市委市政府89
+
+
+
+
+
+ 市城管委
+ 98.5
+
+
+
+
+
+ 市委市政府89
+
+
+
+
+
+ 市城管委
+ 98.5
+
+
+
+
+
+ { item?.objectName }
+ {item?.qualitySign}
+
+
+
+
+
+
+ 重点区域列表
+
+ {areaList?.map((item, index) => {
+ return (
+
+
+ {
+ if (expand === index) {
+ setExpand(undefined);
+ return;
+ }
+ ref.current = index;
+
+ setExpand(index);
+ }}
+ >
+
+
+
+ {expand === index && (
+
+ );
+ })}
+ {item?.objGroup}
+ {item?.objects?.length}
+ 个
+ {index === expand ? (
+
+ {item?.objects.map((child, child_index) => {
+ return (
+
+
+ );
+ })}
+
+ )}
+ {child.objectName}
+
+ {child.cqi}
+
+
+ {/*
+ */}
+
+ {
+ console.log(e);
+
+ }}
+ onCheck={(e) => {
+
+ setCheckedKeys(e)
+ }}
+ checkedKeys={checkedKeys}
+ treeData={[
+ {
+ title: '安全风险',
+ key: 'aq',
+ children: [
+ {
+ title: (
+
+ )}
+
+ {/* 事件详情 */}
+ 启用百度地图
+ 图层图例
+ setLeftTabKey('1')}
+ >
+ CQI
+
+
+
+
+ 应急态 <60
+
+
+
+ 预警态 <85
+
+
+
+ 标准态 85-95
+
+
+
+ 理想态 >95
+ setLeftTabKey('2')}
+ >
+ 风险预警与问题分布
+
+ {leftTabKey == '2' && (
+
+ 红色风险
+
+ ),
+ key: 'aqh',
+ },
+ {
+ title: (
+
+ 橙色风险
+
+ ),
+ key: 'anc',
+ },
+ {
+ title: (
+
+ 黄色风险
+
+ ),
+ key: 'anh',
+ },
+ {
+ title: (
+
+ 一般风险
+
+ ),
+
+ key: 'any',
+ },
+ ],
+ },
+ {
+ title: '城市问题',
+ key: 'cswt',
+ children: [
+ {
+ title: (
+
+
+ 未结案
+
+ ),
+ key: 'cswt1',
+ },
+ {
+ title: (
+
+ 未结案
+
+
+ 突出问题
+
+ ),
+ key: 'cswt2',
+ },
+ ],
+ },
+ ]}
+ />
+
+ 突出问题
+
+
+ );
+};
+export default MapContainer;
diff --git a/src/pages/SecurityServiceOverview/components/RiskWarn/TopSearch/index.tsx b/src/pages/SecurityServiceOverview/components/RiskWarn/TopSearch/index.tsx
index 5cf2f481a13203c66674c1d40b8bece3da461e15..79e370996add66d3e774e924839cc7ed2c25b9bb 100644
--- a/src/pages/SecurityServiceOverview/components/RiskWarn/TopSearch/index.tsx
+++ b/src/pages/SecurityServiceOverview/components/RiskWarn/TopSearch/index.tsx
@@ -1,5 +1,5 @@
import services from '@/services';
-import { useRequest } from 'ahooks';
+import { useRequest, useUpdateEffect } from 'ahooks';
import { ConfigProvider, Select } from 'antd';
import classNames from 'classnames';
import { useEffect, useMemo, useState } from 'react';
@@ -34,9 +34,10 @@ const TopSearch = ({ onSearch }: { onSearch: (val: any) => void }) => {
},
];
}, [data]);
- useEffect(() => {
+ useUpdateEffect(() => {
onSearch(searchParams);
}, [searchParams]);
+
return (
+ {
+ setTopKey(e);
+ }}
+ />
+
+ {Mpa[topKey]}
+
+
+
+ {botItems?.map((item) => {
+ return (
+ 
{
+ item?.onclick();
+ }}
+ style={{ marginRight: 10 }}
+ />
+ );
+ })}
+
+
diff --git a/src/pages/SecurityServiceOverview/components/RiskWarn/index.tsx b/src/pages/SecurityServiceOverview/components/RiskWarn/index.tsx
index 9064a4e6963ffed943d63e123c0c04078854f5ae..727e1e58da901a782144d015be70688299b46514 100644
--- a/src/pages/SecurityServiceOverview/components/RiskWarn/index.tsx
+++ b/src/pages/SecurityServiceOverview/components/RiskWarn/index.tsx
@@ -24,6 +24,7 @@ const RiskWarn = ({ riskModalOpt }: { riskModalOpt: any }) => {
const params = {
page: 1,
count: 10,
+
};
const [listData, setListData] = useState({
items: [],
diff --git a/src/pages/SecurityServiceOverview/index.less b/src/pages/SecurityServiceOverview/index.less
index b360c8b2edd8fd6571fb59b3992f9b419f4cd977..588ce0e160011d7bc05bd719ae0e63035a4582c4 100644
--- a/src/pages/SecurityServiceOverview/index.less
+++ b/src/pages/SecurityServiceOverview/index.less
@@ -19,6 +19,19 @@
display: flex;
flex-direction: column;
+ .btnWarp {
+ display: flex;
+ justify-content: space-between;
+
+ .rWarp {
+ display: flex;
+ align-items: center;
+ .backHome {
+ width: 100px;
+ height: 38px;
+ }
+ }
+ }
.warp {
margin-top: 26px;
diff --git a/src/pages/SecurityServiceOverview/index.tsx b/src/pages/SecurityServiceOverview/index.tsx
index ad8cbb034e0f13325b99691e6c5d68da9443fa7a..a87dcd71fbf558088c71fabf5346b4f550de1c39 100644
--- a/src/pages/SecurityServiceOverview/index.tsx
+++ b/src/pages/SecurityServiceOverview/index.tsx
@@ -1,34 +1,83 @@
import titlePng from '@/assets/images/SecurityServiceOverview/title.png';
-import Modal from '@/components/HncyModal';
-import { useState } from 'react';
-import ModalContent from './components/ModalContent';
+import {
+ exitFullScreen,
+ isFullscreenElement,
+ requestFullScreen,
+} from '@/utils/ui';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { history } from '@umijs/max';
+import { useEffect, useState } from 'react';
import styles from './index.less';
import RegionSelect from './RegionSelect';
-
-import { Flex } from 'antd';
import SecurityState from './SecurityState';
-
/**
* @description 安全服务一张图
*/
const SecurityServiceOverview = () => {
+ const [fullScreen, setFullScreen] = useState(false);
+ const [originResizeFunc, setOriginResizeFunc] = useState(null);
+
+ useEffect(() => {
+ // 监听 键盘ESC 退出全屏(可以使用屏幕大小监听，触发对应的事件)
+ if (window.addEventListener) {
+ window.addEventListener('resize', onEscCancelFull, false);
+ } else {
+ setOriginResizeFunc(window.onresize);
+ window.onresize = onEscCancelFull;
+ }
+ // 销毁清除事件
+ return () => {
+ if (window.removeEventListener) {
+ window.removeEventListener('resize', onEscCancelFull, false);
+ } else {
+ window.onresize = originResizeFunc;
+ }
+ };
+ }, []); // eslint-disable-line react-hooks/exhaustive-deps
+ function onEscCancelFull() {
+ // 用于反显状态
+ setFullScreen(isFullscreenElement());
+ }
-
-
return (
);
};
diff --git a/src/pages/TheOperationOfCityOverall/index.tsx b/src/pages/TheOperationOfCityOverall/index.tsx
index 1cecf27e176d483dc66bf282c91fb74a17492dc9..6aa8262eadc735d7a43fe173885ceb68f52f6012 100644
--- a/src/pages/TheOperationOfCityOverall/index.tsx
+++ b/src/pages/TheOperationOfCityOverall/index.tsx
@@ -63,7 +63,7 @@ const TheOperationOfCityOverall: React.FC = () => {
- {indutryIndexData?.data[0]?.time} 更新
+ {indutryIndexData?.data?.[0]?.time} 更新
({
+ data={indexs?.indexDataList?.map((item:any) => ({
value: item?.qualitySign,
name: item?.objectName,
}))}
>
- 较{dayjs().diff(selectDistrict?.indexTime, 'h')}小时前
+ {selectDistrict?.desc}
@@ -171,7 +146,7 @@ const DistrictDetailBar: React.FC = () => {
([])
const [listLoading, setListLoading] = useState(false)
- const result = useMemo(() => {
- if (state === 'low') {
- return cloneDeep(areaListDto)?.reverse();
- } else {
- return cloneDeep(areaListDto);
- }
- }, [state, areaListDto]);
-
const resultList = useMemo(() => {
- console.log(state)
if (state === 'low') {
return cloneDeep(list)?.reverse();
} else {
@@ -49,7 +38,7 @@ const DistrictList: React.FC = () => {
}
}, [state, list]);
-
+ // 获取区市县列表
const getAreaList = async () => {
setListLoading(true)
let parmas = {
@@ -57,15 +46,12 @@ const DistrictList: React.FC = () => {
indexType: '1',
indexId: '',
objectId: areaId,
- indexHierarchy: '1'
+ indexHierarchy: '1',
+ objectHierarchy: '1'
};
- const resPonse = await services.Physicalsign.getAreaShapeAndIndexInstance({
- ...parmas,
- objectHierarchy: '1',
- });
- console.log(resPonse)
+ const resPonse = await services.districtController.getListIndexInstance(parmas);
if (resPonse.code === 200) {
- setList(resPonse.data.sort((a, b) => Number(a?.qualitySign) - Number(b?.qualitySign)))
+ setList(resPonse.data.sort((a:any, b:any) => Number(a?.qualitySign) - Number(b?.qualitySign)))
setListLoading(false)
}
}
@@ -117,76 +103,82 @@ const DistrictList: React.FC = () => {
}
- >
-
- );
- })}
+
+ )
+ })}
+
+ ) :
);
diff --git a/src/pages/TheOperationOfTheDistrictCityAndCounty/components/LineCharts/index.tsx b/src/pages/TheOperationOfTheDistrictCityAndCounty/components/LineCharts/index.tsx
index 23163ec3af702bbd8775339d7ce0421f74bda930..e75a2e067e33dd89fd55f0021cdf1ef3b40e9cf1 100644
--- a/src/pages/TheOperationOfTheDistrictCityAndCounty/components/LineCharts/index.tsx
+++ b/src/pages/TheOperationOfTheDistrictCityAndCounty/components/LineCharts/index.tsx
@@ -1,13 +1,12 @@
import ReactEcharts from 'echarts-for-react';
import { CSSProperties, useMemo } from 'react';
const LineCharts = ({
- data = [100, 50, 60, 70, 50, 40, 50, 60, 40, 40, 80, 30, 40, 100],
+ data = [],
style = {},
}: {
style?: CSSProperties;
data?: any[];
}) => {
- console.log(data);
const option = useMemo(() => {
const showXAis = false;
@@ -61,7 +60,7 @@ const LineCharts = ({
},
],
};
- }, []);
+ }, [data]);
return (
{
physicalSignType: 1,
objectHierarchy: 1,
}).then((res) => {
+ console.log(res)
setData(res.data);
});
}, []);
@@ -68,7 +69,6 @@ const DistrictMap: React.FC = () => {
{!selectDistrict ? (
{data?.map((item, index) => {
- console.log(item);
return (
= (props) => {
const { data } = props;
+ const { dispatch } = useGlobalModalServices();
- const getStatus = (val: number) => {
- if (val > 95) {
- return {
- bg: 'rgb(87, 239, 88)',
- desc: '运行良好',
- };
- }
- if (val < 95 && val > 85) {
- return {
- bg: '#0680f4',
- desc: '运行基本正常',
- };
- }
- if (val < 85) {
- return {
- bg: '#ffa250',
- desc: '运行随时会出现问题',
- };
- }
- };
return (
@@ -40,11 +23,11 @@ const PopoverCard: React.FC = (props) => {
数据要素
-
-
+ setIsGovernanceModalOpen(true)}
>
已汇集数据
-
今日新增
-
-
+
近一月汇聚趋势
-
-
+
业务库
-
+
基础库
-
+
主题库
-
+
专题库
-
- dispatch.push('DataActivity')}>
+ dispatch.push('DataActivity')}
+ >
{/*
- setIsGovernanceModalOpen(false)}
+ setIsGovernanceModalOpen(false)}
/>
- )
-}
+ );
+};
-export default DataElement
\ No newline at end of file
+export default DataElement;
diff --git a/src/pages/UrbanSituation/Focus/index.tsx b/src/pages/UrbanSituation/Focus/index.tsx
index aa5f1534ea3456dcf63b70770513216445b49a48..bb723b81688b1cddc566860c2f319da1f693130d 100644
--- a/src/pages/UrbanSituation/Focus/index.tsx
+++ b/src/pages/UrbanSituation/Focus/index.tsx
@@ -2,57 +2,22 @@ import area1 from '@/assets/images/urbanSituation/area1.png';
import area2 from '@/assets/images/urbanSituation/area2.png';
import area3 from '@/assets/images/urbanSituation/area3.png';
import bg1 from '@/assets/images/urbanSituation/bg1.png';
-import myVideo1 from '@/assets/media/movie.mp4';
-import myVideo from '@/assets/media/movie1.mp4';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
+import { useModel } from '@umijs/max';
import { Flex, Space } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';
-import { useModel } from '@umijs/max';
const Focus = () => {
- const [areaData, setAreaData] = useState([]);
+ const [areaData, setAreaData] = useState([]);
const { initialState } = useModel('@@initialState');
const { areaId } = initialState;
const { dispatch } = useGlobalModalServices();
- const areas = [
- {
- icon: area1,
- objectName: '省委省政府',
- cqi: 99.9,
- },
- {
- icon: area2,
- objectName: '市委市政府',
- cqi: 99.9,
- },
- {
- icon: area3,
- objectName: '市城管委',
- cqi: 99.9,
- },
- ];
-
const activity = [
- // {
- // name: '保障资源',
- // value: 12,
- // unit: '个',
- // },
- // {
- // name: '当前问题',
- // value: 12,
- // unit: '个',
- // },
- // {
- // name: '处置及时率',
- // value: 12,
- // unit: '%',
- // },
{
name: '保障点位',
value: 5,
@@ -82,7 +47,9 @@ const Focus = () => {
services.Physicalsign.getImportantDistrictIndexInstance(params).then(
(res) => {
if (res.code === 200) {
- setAreaData(res.data.slice(0, 3));
+ const includesObjectId = ['1', '2', '3']
+ const result = res.data.filter(item => includesObjectId.includes(item.objectId)).sort((a, b) => Number(a.objectId) - Number(b.objectId))
+ setAreaData(result);
}
},
);
@@ -91,7 +58,11 @@ const Focus = () => {
useEffect(() => {
getAreaData();
}, []);
-
+ const imgMap: Record = {
+ 0: require('@/assets/images/urbanSituation/zdgz1.png'),
+ 1: require('@/assets/images/urbanSituation/zdgz2.png'),
+ 2: require('@/assets/images/urbanSituation/zdgz3.png'),
+ };
return (
-
-
+
+ })
{
+ history.push('/home');
+ }}
+ >
+ {fullScreen ? (
+ {
+ exitFullScreen();
+ }}
+ style={{ fontSize: '24px', marginLeft: '10px' }}
+ />
+ ) : (
+ {
+ requestFullScreen(document.body);
+ }}
+ style={{ fontSize: '24px', marginLeft: '10px' }}
+ />
+ )}
+
+ {
+ history.push('/home');
+ }}
+ >
+ {fullScreen ? (
+
{/*
-
城市运行总体情况
城市管理运行日报
实时CQI
{selectDistrict.qualitySign}
@@ -188,6 +163,11 @@ const DistrictDetailBar: React.FC = () => {
key={index}
className={styles.card}
style={{ background: item.background }}
+ onClick={() => {
+ setModalOpen(true);
+ setModalOpt([{ title: item.name, type: 'category' }]);
+ setCurrentCqiData({...item, objectId: selectDistrict?.objectId});
+ }}
>
{item.name}
@@ -203,16 +183,20 @@ const DistrictDetailBar: React.FC = () => {
+ {dayjs(data?.lastMonthMinimumIndex?.time).format('YYYY-MM-DD HH:mm')}
+ {data?.lastMonthMinimumIndex?.week}
+
{
查看更多
+
+ 近30日最低CQI
+
{data?.lastMonthMinimumIndex?.cqi}
- 2024-10-02 周一
+ 城市问题
setSelectDistrict?.(item)}
- >
-
-
- {index < 9 ? '0' + (index + 1) : index}
-
-
- {item.objectName}
-
-
-
-
+ mouseEnterDelay={1}
+ color="transparent"
+ key={index}
+ content={
-
- setSelectDistrict?.(item)}
>
- {Number(item.qualitySign)}
+
- {item.status === 'up' ? (
-
+ {index < 9 ? '0' + (index + 1) : index}
+
+
+ {item.objectName}
+
+
+
+
+
+
+
+ {Number(item.qualitySign)}
+
+ {item.status === 'up' ? (
+ CQI
{Number(data?.qualitySign)}
- {getStatus(Number(data?.qualitySign))?.desc}
+ {getCqiStatusTexts(Number(data?.qualitySign))?.desc}
-
{data.status === 'up' ? (
@@ -69,7 +52,17 @@ const PopoverCard: React.FC = (props) => {
diff --git a/src/pages/UrbanManagementResourceElements/DataElement/index.tsx b/src/pages/UrbanManagementResourceElements/DataElement/index.tsx
index 247a2e812706e4e18be93c5d1d911772a0fd8219..8f192942becf58f7f55601eabcb0d668746ba977 100644
--- a/src/pages/UrbanManagementResourceElements/DataElement/index.tsx
+++ b/src/pages/UrbanManagementResourceElements/DataElement/index.tsx
@@ -1,11 +1,11 @@
-import { Flex, Statistic, Space, Row, Col } from 'antd'
+import DataGovernance from '@/pages/GlobalModalServices/DataGovernance';
+import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import type { StatisticProps } from 'antd';
+import { Col, Flex, Row, Space, Statistic } from 'antd';
+import { useState } from 'react';
import CountUp from 'react-countup';
-import styles from './index.less'
+import styles from './index.less';
import LineCharts from './LineCharts';
-import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
-import DataGovernance from '@/pages/GlobalModalServices/DataGovernance';
-import { useState } from 'react';
/**
* @description 数据要素
@@ -40,7 +40,7 @@ const formatValue = (value: number) => {
const fromWanToYi = (value: number) => {
return (value / 10000).toFixed(2);
-}
+};
const DataElement = () => {
const [isGovernanceModalOpen, setIsGovernanceModalOpen] = useState(false);
@@ -48,7 +48,7 @@ const DataElement = () => {
const openDataBaseModal = () => {
dispatch.push('DataBase');
- }
+ };
const formattedTotal = formatValue(totalActiveData);
const formattedDetailDb = formatValue(241752875);
@@ -61,71 +61,116 @@ const DataElement = () => {
较{dayjs().diff(data?.indexTime,'m')}分钟前
+ {data?.desc}
{data?.eventCount} 件
- 查看详情
+ {
+ dispatch.push('districtIndex', {
+ title: data.objectName + '运行情况',
+ props: {
+ data: data,
+ },
+ });
+ }}
+ >查看详情
@@ -110,19 +81,30 @@ const Focus = () => {
- {areas.map((item, index) => (
+ {areaData.map((item:any, index:number) => (
{
dispatch.push('KeyAreaDetail', {
title: item.objectName,
+ props: {
+ objectId: item.objectId,
+ cqi: item.cqi,
+ },
});
}}
key={index}
className={styles.areaCard}
>
-
+ {/*
+ */}
diff --git a/src/pages/UrbanSituation/Quality/DistrictCQI/index.tsx b/src/pages/UrbanSituation/Quality/DistrictCQI/index.tsx
index aab6e9271c39257b99788e41e724775d7be0742f..e84fbc57ed4be53831889f6e1d7cff01e866cc33 100644
--- a/src/pages/UrbanSituation/Quality/DistrictCQI/index.tsx
+++ b/src/pages/UrbanSituation/Quality/DistrictCQI/index.tsx
@@ -9,12 +9,21 @@ import React, { useEffect, useMemo, useState } from 'react';
import styles from './index.less';
import { useModel } from '@umijs/max';
import EmptySpace from '@/components/EmptySpace';
+import { getCqiStatusStyle } from '@/utils/ui';
/** @name 地区列表 */
const DistrictCQI: React.FC = () => {
const { initialState } = useModel('@@initialState');
const { areaId } = initialState;
+
+ const { getIndexs } = useModel(
+ 'regionalIndex',
+ (store) => ({
+ getIndexs: store.getIndexs
+ }),
+ );
+
const [state, { setLeft, setRight }] = useToggle('low', 'hight');
const { dispatch } = useGlobalModalServices();
@@ -25,44 +34,31 @@ const DistrictCQI: React.FC = () => {
const result = useMemo(() => {
if (state === 'low') {
- return cloneDeep(dataSource).reverse();
+ return cloneDeep(dataSource)?.reverse();
} else {
return cloneDeep(dataSource);
}
}, [state, dataSource]);
- const getData = () => {
+ const getData = async () => {
setLoading(true);
- services.districtController.getDistrictIndexList({ objectId: areaId }).then((res) => {
- setDataSource(res.data);
- setLoading(false);
- });
+ let parmas = {
+ physicalSignType: '1',
+ indexType: '1',
+ indexId: '',
+ objectId: areaId,
+ indexHierarchy: '1',
+ objectHierarchy: '1'
+ };
+ const resPonse = await services.districtController.getListIndexInstance(parmas);
+ setDataSource(resPonse.data.sort((a:any, b:any) => Number(a?.qualitySign) - Number(b?.qualitySign)));
+ setLoading(false);
}
useEffect(() => {
getData()
}, []);
- const getStatus = (val: number) => {
- if (val > 95) {
- return {
- bg: 'rgb(87, 239, 88)',
- desc: '运行良好',
- };
- }
- if (val < 95 && val > 85) {
- return {
- bg: '#0680f4',
- desc: '运行基本正常',
- };
- }
- if (val < 85) {
- return {
- bg: '#ffa250',
- desc: '运行随时会出现问题',
- };
- }
- };
return (
@@ -117,7 +113,7 @@ const DistrictCQI: React.FC = () => {
diff --git a/src/pages/UrbanSituation/Security/index.tsx b/src/pages/UrbanSituation/Security/index.tsx
index 98f100c75e62b9578a92bbc1e46002ff85b66f34..e7d0710844cf1a27e024f423ea4e51c84effc303 100644
--- a/src/pages/UrbanSituation/Security/index.tsx
+++ b/src/pages/UrbanSituation/Security/index.tsx
@@ -1,10 +1,10 @@
import { useEffect, useMemo, useState } from 'react';
import { Flex, Space } from 'antd'
import styles from './index.less'
-import risk1 from '@/assets/images/urbanSituation/risk1.png'
-import risk2 from '@/assets/images/urbanSituation/risk2.png'
-import risk3 from '@/assets/images/urbanSituation/risk3.png'
-import risk4 from '@/assets/images/urbanSituation/risk4.png'
+import risk1 from '@/assets/images/urbanSituation/risk1.svg'
+import risk2 from '@/assets/images/urbanSituation/risk2.svg'
+import risk3 from '@/assets/images/urbanSituation/risk3.svg'
+import risk4 from '@/assets/images/urbanSituation/risk4.svg'
import Modal from '@/components/HncyModal';
import RiskEvents from '@/pages/Common/Event/RiskEvents';
import services from '@/services';
diff --git a/src/services/CityProblem.ts b/src/services/CityProblem.ts
index d30a7c86a4867bcc5bef9a12a7a824b19641e865..5556b1b310c33a44f6faae6f8416ce5b029972d8 100644
--- a/src/services/CityProblem.ts
+++ b/src/services/CityProblem.ts
@@ -126,7 +126,7 @@ export async function getEventTypeListApi() {
*
* @description 事件列表
*/
-export async function getZzEventListApi(params:any) {
+export async function getZzEventListApi(params: any) {
return request>(
urlProxyApis('/zongzhi/getZzEventList'),
{
@@ -140,7 +140,7 @@ export async function getZzEventListApi(params:any) {
*
* @description 类别分析top
*/
-export async function getCategoryTopAnalysisApi(params:any) {
+export async function getCategoryTopAnalysisApi(params: any) {
return request>(
urlProxyApis('/cityScreen/getCategoryTopAnalysis'),
{
@@ -154,7 +154,7 @@ export async function getCategoryTopAnalysisApi(params:any) {
*
* @description 类别分析top
*/
-export async function getAreaDistribAnalysisApi(params:any) {
+export async function getAreaDistribAnalysisApi(params: any) {
return request>(
urlProxyApis('/cityScreen/getAreaDistribAnalysis'),
{
@@ -168,7 +168,7 @@ export async function getAreaDistribAnalysisApi(params:any) {
*
* @description 重要事件统计
*/
-export async function getImportEventStatisticsApi(params:any) {
+export async function getImportEventStatisticsApi(params: any) {
return request>(
urlProxyApis('/cityScreen/importEventStatistics'),
{
@@ -182,7 +182,7 @@ export async function getImportEventStatisticsApi(params:any) {
*
* @description 待处置统计
*/
-export async function getSourceStatisticsApi(params:any) {
+export async function getSourceStatisticsApi(params: any) {
return request>(
urlProxyApis('/cityScreen/getSourceStatistics'),
{
@@ -196,7 +196,7 @@ export async function getSourceStatisticsApi(params:any) {
*
* @description 统计整体结案率分析
*/
-export async function getAllCloseCaseStatisticsApi(params:any) {
+export async function getAllCloseCaseStatisticsApi(params: any) {
return request>(
urlProxyApis('/cityScreen/getAllCloseCaseStatistics'),
{
@@ -210,7 +210,7 @@ export async function getAllCloseCaseStatisticsApi(params:any) {
*
* @description 时限统计
*/
-export async function getTimeLimitsApi(params:any) {
+export async function getTimeLimitsApi(params: any) {
return request>(
urlProxyApis('/cityScreen/getTimeLimits'),
{
@@ -220,3 +220,12 @@ export async function getTimeLimitsApi(params:any) {
);
}
+//获取最新事件
+export async function getUpToDateEvent(
+ params: { page: number; count: number },
+): Promise> {
+ return request(urlProxyApis(`/comprehensiveDiscovery/getUpToDateEvent`), {
+ method: 'GET',
+ params,
+ });
+}
\ No newline at end of file
diff --git a/src/services/Physicalsign.ts b/src/services/Physicalsign.ts
index 394434421dfcbaf0d0e5e4cb5d576b63e0cbbe15..2362d138d9da390635664124fa9047fad0b2a472 100644
--- a/src/services/Physicalsign.ts
+++ b/src/services/Physicalsign.ts
@@ -79,16 +79,15 @@ export async function getObjectPolygon(
}
//中观体征县区体征数据
-export async function getGroupObjectPhysicalSignIndex(data: {
- physicalSignType: number;
- indexType: number;
-}): Promise> {
+export async function getGroupObjectPhysicalSignIndex(
+ params: any
+): Promise> {
return request(
urlProxyApis(
- `/middlePhysicalSign/getGroupObjectPhysicalSignIndex?physicalSignType=1&indexType=1`,
+ `/middlePhysicalSign/getGroupObjectPhysicalSignIndex`,
),
{
- params: data,
+ params,
},
);
}
@@ -227,7 +226,7 @@ export async function getDepartIndustryPhysicalSignIndex(
*/
export async function getIndexDetailEventStatic(
data: any,
-): Promise<{ noHandleEventCount: string; safetyWarningEventCount: string }> {
+): Promise<{ noHandleEventCount: string; safetyWarningEventCount: string; lastMonthMinimumIndex: any }> {
return request(urlProxyApis(`/zhgl/getIndexDetailEventStatic`), {
params: data,
});
diff --git a/src/services/districtController.ts b/src/services/districtController.ts
index a1cb5b83db85f2740ac531afc366e23fc8eb0d91..89a342e68e642a8951fc793f898d8cec896f5644 100644
--- a/src/services/districtController.ts
+++ b/src/services/districtController.ts
@@ -2,7 +2,7 @@ import { request } from '@umijs/max';
import { RespResultList } from './Resp';
const IS_PROD = process.env.NODE_ENV === 'production' ? true : false;
-const reqBaseUrl = IS_PROD ? '/cd-comprehensive/apis' : '/apis';
+const reqBaseUrl = IS_PROD ? '/cd-comprehensive/apis/physicalsignindex' : '/apis/physicalsignindex';
const urlProxyApis = (url: string) => {
return `${reqBaseUrl}${url}`;
@@ -26,7 +26,7 @@ export function getDistrictIndexList(params?: {
objectHierarchy?: number;
}) {
return request>(
- urlProxyApis('/physicalsignindex/main/getDistrictIndexInstanceRanking'),
+ urlProxyApis('/main/getDistrictIndexInstanceRanking'),
{
method: 'GET',
params: {
@@ -42,3 +42,13 @@ export function getDistrictIndexList(params?: {
},
);
}
+
+// 区市县运行情况 cqi排名
+export const getListIndexInstance = (
+ params: any,
+): Promise => {
+ return request(urlProxyApis(`/main/listIndexInstance`), {
+ params,
+ method: 'GET',
+ });
+};
diff --git a/src/utils/comm.ts b/src/utils/comm.ts
index 3384569b62eaa9c77a23740fa5be9f7f7a8ba68b..45525219461256cbfa4a276cd013b8dc428c7af2 100644
--- a/src/utils/comm.ts
+++ b/src/utils/comm.ts
@@ -37,6 +37,8 @@ export const ensureLength = (arr: any[], length = 7, fillValue = undefined) => {
* @param imgUrl 图片地址
*/
export const joinPictureHttp = (imgUrl: string) => {
- console.log(IMG_URL + imgUrl)
- return (imgUrl?.includes('http') || imgUrl?.includes('https')) ? imgUrl : (IMG_URL + imgUrl);
+ if(!imgUrl) {
+ return ''
+ }
+ return imgUrl?.includes('http') ? imgUrl : (IMG_URL + imgUrl);
};
diff --git a/src/utils/ui.ts b/src/utils/ui.ts
index bef99eb1101adf26d37f1fb4ef7cef860758b09b..d9d42311763c88168ea3c12d800d010a84d5f165 100644
--- a/src/utils/ui.ts
+++ b/src/utils/ui.ts
@@ -65,3 +65,35 @@ export const getCqiStatusTexts = (data: string | number) => {
}
return obj;
};
+const document: any = window.document;
+// 展开/全屏
+export function requestFullScreen(element: any) {
+ let requestMethod =
+ element.requestFullscreen ||
+ element.webkitRequestFullscreen ||
+ element.msRequestFullscreen ||
+ element.mozRequestFullScreen;
+ if (requestMethod) {
+ requestMethod.call(element);
+ }
+}
+// 退出/全屏
+export function exitFullScreen() {
+ let exitMethod =
+ document.exitFullscreen ||
+ document.webkitExitFullscreen ||
+ document.msExitFullscreen ||
+ document.mozCancelFullScreen;
+ if (exitMethod) {
+ exitMethod.call(document);
+ }
+}
+// 判断是否全屏
+export function isFullscreenElement() {
+ let isFull =
+ document.fullscreenElement ||
+ document.webkitFullscreenElement ||
+ document.msFullscreenElement ||
+ document.mozFullScreenElement;
+ return !!isFull;
+}
{item.objectName}
{item.cqi || 0}
@@ -148,10 +130,14 @@ const Focus = () => {
style={{ marginTop: 30 }}
>
重大活动保障
- {
- const url = 'https://10.1.174.34:13000'
- window.open(url, '_blank');
- }}>更多
+ {
+ const url = 'https://10.1.174.34:13000';
+ window.open(url, '_blank');
+ }}
+ >
+ 更多
+