diff --git a/src/pages/Common/Quality/TraceSourceOfLostPoints/index.tsx b/src/pages/Common/Quality/TraceSourceOfLostPoints/index.tsx index 135bce5e9dee19ea353c3f6e5c05ab1b8c2c7695..e274273a25e9b1271e7d053df7c9a63ab3c9c669 100644 --- a/src/pages/Common/Quality/TraceSourceOfLostPoints/index.tsx +++ b/src/pages/Common/Quality/TraceSourceOfLostPoints/index.tsx @@ -29,7 +29,7 @@ const TraceSourceOfLostPoints: React.FC = (props) let newData: any = []; data?.forEach((item) => { item['value'] = item?.lostScore > 0 ? `-${item?.lostScore}` : ""; - item['collapsed'] = true + item['collapsed'] = false newData.push(item); if (item.children && item.children.length) { item.children = deepData(item.children); @@ -38,6 +38,17 @@ const TraceSourceOfLostPoints: React.FC = (props) return newData; }; + const handleDataCollapsed = (data:any) => { + data?.forEach((item:any) => { + if (item.children && item.children.length) { + item.children.forEach((v:any) => { + v.collapsed = true; + }) + } + }); + return data + } + const option = { title: { text: '', @@ -124,7 +135,7 @@ const TraceSourceOfLostPoints: React.FC = (props) }, }, }, - data: deepData(data?.children?.length ? [data] : []), + data:handleDataCollapsed(deepData(data?.children?.length ? [data] : [])), }, ], }; diff --git a/src/pages/NewHome/NewLeftSidebar/CitySecurityInfo/index.tsx b/src/pages/NewHome/NewLeftSidebar/CitySecurityInfo/index.tsx index fadcced3a204fc7c08ddf56561bedc5f44d9a31c..7ffb76d462d752648255cf5e85f99aface2e2953 100644 --- a/src/pages/NewHome/NewLeftSidebar/CitySecurityInfo/index.tsx +++ b/src/pages/NewHome/NewLeftSidebar/CitySecurityInfo/index.tsx @@ -97,9 +97,9 @@ const CitySecurityInfo = () => { className={styles.num} style={{ background: item.color, backgroundClip: 'text' }} > - {item.value} + {/* {item.value} */}-- - {item?.value !== '--' && 个} + {/* {item?.value !== '--' && 个} */}
{item.label}
diff --git a/src/pages/SecurityServiceOverview/SafetyMap/index.tsx b/src/pages/SecurityServiceOverview/SafetyMap/index.tsx index bc8ba405a4bfc59062f9dc41c2b23c749d4d6534..ddcb3eb54e1a582f74f000936762332ab9c2d939 100644 --- a/src/pages/SecurityServiceOverview/SafetyMap/index.tsx +++ b/src/pages/SecurityServiceOverview/SafetyMap/index.tsx @@ -119,19 +119,7 @@ const SafetyMap = () => { }, ); - // const { data: mapMark } = useRequest( - // () => services.CityRiskApi.findListForMap(searchParams), - // { - // refreshDeps: [searchParams], - // }, - // ); - // //safetyRiskEventMap - // const { data: warnMark } = useRequest( - // () => services.CityRiskApi.safetyRiskEventMap(searchParams), - // { - // refreshDeps: [searchParams], - // }, - // ); + //行业点位详情 const { @@ -185,7 +173,7 @@ const SafetyMap = () => { }; return (
-
+
{
- {/*
+
{ setSearchParams({ ...searchParams, parentTypeCode: e }); }} checkCode={searchParams.parentTypeCode} /> -
*/} +
{/* 事件详情 */} { }, ); + return (
} + // extra={} + extra={} >
} + extra={} >
@@ -254,7 +255,7 @@ const IndustryWarn = ({ })}
- +
@@ -269,7 +270,7 @@ const IndustryWarn = ({ backgroundImage: `url(${cardBg})`, backgroundSize: '100% 100%', }} - extra={} + extra={} >
@@ -289,7 +290,7 @@ const IndustryWarn = ({ })}
- +
diff --git a/src/pages/SecurityServiceOverview/SecurityState/index.less b/src/pages/SecurityServiceOverview/SecurityState/index.less index 3c8a62208e2d599bfa19b47007d796544202451c..8f71d152b7c848d5aa3924e6debe656a803a0f97 100644 --- a/src/pages/SecurityServiceOverview/SecurityState/index.less +++ b/src/pages/SecurityServiceOverview/SecurityState/index.less @@ -8,7 +8,7 @@ .mapCenter { flex: 1; border-radius: 20px; - padding-top: 20px; + padding-top: 30px; padding-right: 20px; padding-left: 20px; padding-bottom: 20px; diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/PopoverCardWarn/index.less b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/PopoverCardWarn/index.less index f03f6fb00bb91980785b7e84db7eacbe09e350a0..81b84616e914ed5b4b93a9e1654cefa64948d936 100644 --- a/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/PopoverCardWarn/index.less +++ b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/PopoverCardWarn/index.less @@ -28,15 +28,12 @@ .tag { position: absolute; left: 10px; - bottom: 10px; + bottom: 14px; display: inline-block; width: 83px; height: 24px; border-radius: 12px; - background: linear-gradient(180deg, - rgba(26, 66, 110, 0), - rgb(122, 94, 111) 100%); - color: #ff7a7a; + text-align: center; font-size: 16px; line-height: 23px; diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/PopoverCardWarn/index.tsx b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/PopoverCardWarn/index.tsx index eabd76308aac1ec7898e73a241c5777ece4b669e..4c19a4f43c9adca906ff47a9a1f041b1d216af1c 100644 --- a/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/PopoverCardWarn/index.tsx +++ b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/PopoverCardWarn/index.tsx @@ -5,45 +5,14 @@ import yellowBg from '@/assets/images/SecurityServiceOverview/right/yellowBg.png import LabelImgText from '@/components/LabelImgText'; import React, { CSSProperties } from 'react'; import styles from './index.less'; +import { colorConfig } from '..'; interface PropsType { data: DistrictAPI.RealtimeIndexDTO; } /** @name 气泡卡片 */ const PopoverCardWarn: React.FC = (props) => { const { data } = props; - 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', - }, - }; + console.log(data); const valueStyle = { color: '#fff', @@ -55,30 +24,28 @@ const PopoverCardWarn: React.FC = (props) => { }; return (
-
{data?.event_type}
+
{data?.riskdescription}
-
- {data?.risklevel} +
+
-
{data?.current_status}
+
{data?.status}
diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx index d154a0a2d110b480565bb09296895b40b4f1f71a..799c670016ed9bd3db4f700fe34808b3da9f1a32 100644 --- a/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx +++ b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx @@ -16,15 +16,57 @@ import BMapService from '@/utils/mapService'; import { getColorByIndex } from '@/utils/ui'; import { IMG_URL } from '@/utils/variables'; import { useModel, useRequest } from '@umijs/max'; -import { ConfigProvider, Flex, Tree } from 'antd'; +import { Flex } from 'antd'; import dayjs from 'dayjs'; import React, { CSSProperties, useEffect, useRef, useState } from 'react'; import BaseInfo from '../../BaseInfo'; +import LeftTab from '../LeftTab'; +import RiskIssue from '../RiskIssue'; import styles from './index.less'; import PopoverCard from './PopoverCard'; -import PopoverCardKnotty from './PopoverCardKnotty'; -import PopoverCardWarn from './PopoverCardWarn'; - +export const colorConfig: Record< + string, + { + color: CSSProperties['color']; + bg: string; + icon: string; + bigIcon: string; + tag: string; + } +> = { + 红色预警: { + //红色风险 + color: '#FFBCBC', + bg: redBg, + icon: risk1, + bigIcon: 'redIcon', + tag: require('@/assets/images/SecurityServiceOverview/dtyjtag1.png'), + }, + 橙色预警: { + //橙色风险 + color: '#FDDFCE', + bg: orangeBg, + icon: risk2, + bigIcon: 'orangeIcon', + tag: require('@/assets/images/SecurityServiceOverview/dtyjtag2.png'), + }, + 黄色预警: { + //黄色风险 + color: '#FFE892', + bg: yellowBg, + icon: risk3, + bigIcon: 'yellowIcon', + tag: require('@/assets/images/SecurityServiceOverview/dtyjtag3.png'), + }, + 一般预警: { + //一般风险 + color: '#BFE4FF', + bg: blueBg, + icon: risk4, + bigIcon: 'blueIcon', + tag: require('@/assets/images/SecurityServiceOverview/dtyjtag4.png'), + }, +}; /** 地图 */ const DistrictMap: React.FC = () => { const { initialState } = useModel('@@initialState'); @@ -33,56 +75,13 @@ const DistrictMap: React.FC = () => { const [playingStatus, setPlayingStatus] = useState(true); //区域选择 const [selected, setSelected] = useState(); - //风险 - const [fxSelectd, setFxSelectd] = useState(); - //问题 - const [kontSelectd, setKontSelectd] = useState(); - const colorConfig: Record< - string, - { - color: CSSProperties['color']; - bg: string; - icon: string; - bigIcon: string; - } - > = { - 红色风险: { - //红色风险 - color: '#FFBCBC', - bg: redBg, - icon: risk1, - bigIcon: 'redIcon', - }, - 橙色风险: { - //橙色风险 - color: '#FDDFCE', - bg: orangeBg, - icon: risk2, - bigIcon: 'orangeIcon', - }, - 黄色风险: { - //黄色风险 - color: '#FFE892', - bg: yellowBg, - icon: risk3, - bigIcon: 'yellowIcon', - }, - 一般风险: { - //一般风险 - color: '#BFE4FF', - bg: blueBg, - icon: risk4, - bigIcon: 'blueIcon', - }, - }; - /** @description store */ const [checkedKeys, setCheckedKeys] = useState([ // '安全风险', - // '红色风险', - // '橙色风险', - // '黄色风险', - // '一般风险', + // '红色预警', + // '橙色预警', + // '黄色预警', + // '一般预警', '城市问题', '其他问题', '突出问题', @@ -90,15 +89,9 @@ const DistrictMap: React.FC = () => { const MapRef = useRef(); const eventHtmlRef = useRef(null); - const { selectDistrict, areaListDto, getIndexs, indexs } = useModel( - 'regionalIndex', - (store) => ({ - areaListDto: store.areaListDto, - selectDistrict: store.selectDistrict!, - getIndexs: store.getIndexs, - indexs: store.indexs, - }), - ); + const { indexs } = useModel('regionalIndex', (store) => ({ + indexs: store.indexs, + })); // 事件详情弹窗 const [modalOpt, setModalOpt] = useState({ open: false, @@ -116,14 +109,6 @@ const DistrictMap: React.FC = () => { const [data, setData] = useState([]); const [eventData, setEventData] = 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({ @@ -184,48 +169,6 @@ const DistrictMap: React.FC = () => { // }; // }, [playingStatus]); - //safetyRiskEventMap - const { data: warnMark } = useRequest( - () => services.CityRiskApi.safetyRiskEventMap(searchParams), - { - refreshDeps: [searchParams], - }, - ); - - const pList = [ - { - l: [103.87453593938976, 30.746739203687397], - type: 1, - name: '突出问题', - icon: require('@/assets/images/tuchuIc.png'), - }, - { - l: [103.9541617397942, 30.735316951515046], - type: 2, - name: '突出问题', - icon: require('@/assets/images/tuchuIc.png'), - }, - { - l: [103.87424848162657, 30.72240319350852], - type: 3, - name: '突出问题', - icon: require('@/assets/images/tuchuIc.png'), - }, - { - l: [103.92455359018533, 30.71569728382409], - type: 4, - name: '未结案', - icon: require('@/assets/images/wtIc.png'), - }, - { - l: [103.87453593938976, 30.71569728382409], - type: 5, - name: '未结案', - icon: require('@/assets/images/wtIc.png'), - }, - ]; - - //safetyRiskEventMap const { data: signData } = useRequest(() => services.districtController.getListIndexInstance({ physicalSignType: '1', @@ -236,27 +179,21 @@ const DistrictMap: React.FC = () => { objectHierarchy: '1', }), ); - const { data: eventList } = useRequest(() => - services.CityRiskApi.getEventPage({ page: 1, count: 2 }), - ); /** 标题渲染 */ const titleRender = () => { return ( -
{detailModalOpt?.eventType}
- - {detailModalOpt?.riskLevelName} +
{detailModalOpt?.riskdescription}
+ + + + {detailModalOpt?.industry_name_dl}-{detailModalOpt?.name} - {detailModalOpt?.position} ); }; @@ -342,259 +279,21 @@ const DistrictMap: React.FC = () => { )} ) : ( - <> - {warnMark?.items - ?.filter((item: any) => checkedKeys?.includes(item?.riskLevel)) - ?.map((item: any, index: number) => { - const point = [Number(item?.x_pos), Number(item?.y_pos)]; - - return ( - { - const res = await services.CityRiskApi.getInfo({ - // riskId: '24555845', - riskId: item?.riskId, - }); - - setFxSelectd({ ...res?.data, riskId: item?.riskId }); - }} - > - - - ); - })} - {eventData - ?.filter((item) => - checkedKeys?.includes( - item?.protrudeFlag == '2' ? '突出问题' : '其他问题', - ), - ) - ?.map((item, index) => { - const point = [Number(item?.lon), Number(item?.lat)]; - return ( - { - setKontSelectd(item); - }} - position={point} - icon={ - item?.protrudeFlag == '2' - ? require('@/assets/images/tuchuIc.png') - : require('@/assets/images/wtIc.png') - } - > - ); - })} - {/**预警popover */} - {fxSelectd && ( - { - setDetailModalOpt({ - open: true, - eventId: fxSelectd?.riskId, - ...fxSelectd, - }); - }} - onClose={(e) => { - setFxSelectd(undefined); - }} - > -
- -
- - )} - {/**问题popover */} - {kontSelectd && ( - { - // e?.stopPropagation(); - // e?.nativeEvent?.stopImmediatePropagation(); - setModalOpt({ - open: true, - title: '事件详情', - ...kontSelectd, - }); - }} - onClose={(e) => { - // e?.stopPropagation(); - // e?.nativeEvent?.stopImmediatePropagation(); - - setKontSelectd(undefined); - }} - > -
- -
- - )} - + )} - {selectDistrict && ( -
{selectDistrict.objectName}
- )}
-
-
-
图层图例
-
setLeftTabKey('1')} - > - CQI -
-
-
-
- 应急态 - {/* <60 */} -
-
-
-
-
预警态 <85
-
-
-
-
标准态 85-95
-
-
-
-
理想态 >95
-
-
setLeftTabKey('2')} - > - 风险预警与问题分布 -
- {leftTabKey == '2' && ( - - { - setCheckedKeys(e); - }} - checkedKeys={checkedKeys} - treeData={[ - { - title: '安全风险', - key: '安全风险', - disabled: true, - children: [ - { - title: ( -
- 红色风险 -
- ), - key: '红色风险', - disabled: true, - }, - { - title: ( -
- 橙色风险 -
- ), - disabled: true, - key: '橙色风险', - }, - { - title: ( -
- 黄色风险 -
- ), - disabled: true, - key: '黄色风险', - }, - { - title: ( -
- 一般风险 -
- ), - disabled: true, - key: '一般风险', - }, - ], - }, - { - title: '城市问题', - key: '城市问题', - children: [ - { - title: ( -
- - 其他问题 -
- ), - key: '其他问题', - }, - { - title: ( -
- - 突出问题 -
- ), - key: '突出问题', - }, - ], - }, - ]} - /> - - )} -
+
@@ -659,8 +358,8 @@ const DistrictMap: React.FC = () => { setDetailModalOpt({ ...detailModalOpt, - position: val?.position, - eventType: val?.event_type, + position: val?.region_name, + riskLevelName: val?.risklevel, }); }} diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/EmphasisAreaMap/index.tsx b/src/pages/SecurityServiceOverview/components/MapCantainer/EmphasisAreaMap/index.tsx index 8632efd271640cbc4f768822fb3fc9cd24d10043..59ea8c05b5edde34a7924e4a8352f8ac6f726025 100644 --- a/src/pages/SecurityServiceOverview/components/MapCantainer/EmphasisAreaMap/index.tsx +++ b/src/pages/SecurityServiceOverview/components/MapCantainer/EmphasisAreaMap/index.tsx @@ -1,97 +1,48 @@ -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 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 CooglMap from '@/components/CooglMap'; import Modal from '@/components/HncyModal'; import EventDetail from '@/pages/Common/Event/EventDetail'; import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider'; import services from '@/services'; import { cqiDisplay, getColorByIndex, getCqiStatusStyle } from '@/utils/ui'; -import { useModel } from '@umijs/max'; -import { useRequest } from 'ahooks'; -import { ConfigProvider, Flex, Space, Tree } from 'antd'; -import React, { CSSProperties, useEffect, useRef, useState } from 'react'; +import { Flex, Space } from 'antd'; +import React, { useEffect, useRef, useState } from 'react'; import BaseInfo from '../../BaseInfo'; -import PopoverCardKnotty from '../DistrictMap/PopoverCardKnotty'; -import PopoverCardWarn from '../DistrictMap/PopoverCardWarn'; +import { colorConfig } from '../DistrictMap'; +import LeftTab from '../LeftTab'; +import RiskIssue from '../RiskIssue'; import styles from './index.less'; import PopoverCardArea from './PopoverCardArea'; const EmphasisAreaMap: React.FC = () => { - const colorConfig: Record< - string, - { - color: CSSProperties['color']; - bg: string; - icon: string; - bigIcon: string; - } - > = { - 红色风险: { - //红色风险 - color: '#FFBCBC', - bg: redBg, - icon: risk1, - bigIcon: 'redIcon', - }, - 橙色风险: { - //橙色风险 - color: '#FDDFCE', - bg: orangeBg, - icon: risk2, - bigIcon: 'orangeIcon', - }, - 黄色风险: { - //黄色风险 - color: '#FFE892', - bg: yellowBg, - icon: risk3, - bigIcon: 'yellowIcon', - }, - 一般风险: { - //一般风险 - color: '#BFE4FF', - bg: blueBg, - icon: risk4, - bigIcon: 'blueIcon', - }, - }; // 事件详情弹窗 const [modalOpt, setModalOpt] = useState({ open: false, title: '', eventId: '', }); - const { initialState } = useModel('@@initialState'); - const { areaId } = initialState; + const [checkedKeys, setCheckedKeys] = useState([ + // '安全风险', + // '红色预警', + // '橙色预警', + // '黄色预警', + // '一般预警', + '城市问题', + '其他问题', + '突出问题', + ]); + + //区域切换 const [center, setCenter] = useState(); - //风险 - const [fxSelectd, setFxSelectd] = useState(); + //区域 const [areaSelectd, setAreaSelectd] = useState(); - //问题 - const [kontSelectd, setKontSelectd] = useState(); + const [expand, setExpand] = useState(); const ref = useRef(0); const { dispatch } = useGlobalModalServices(); - /** 是否启用百度地图 */ - const [isBmap, setIsBmap] = useState(false); + const MapRef = useRef(); const [leftTabKey, setLeftTabKey] = useState('1'); - const [checkedKeys, setCheckedKeys] = useState([ - // '安全风险', - // '红色风险', - // '橙色风险', - // '黄色风险', - // '一般风险', - '城市问题', - '其他问题', - '突出问题', - ]); + // 事件详情弹窗 const [detailModalOpt, setDetailModalOpt] = useState({ open: false, @@ -100,18 +51,10 @@ const EmphasisAreaMap: React.FC = () => { }); 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 p1 = [103.74243115816007, 30.79721665183887]; + // const p1 = [103.74243115816007, 30.79721665183887]; - const p2 = [104.48437948789275, 30.807638945537175]; + // const p2 = [104.48437948789275, 30.807638945537175]; /** * @description 设置地图视野 @@ -122,28 +65,11 @@ const EmphasisAreaMap: React.FC = () => { // map.setViewport([p1, p2]); // } }; - const { data: newEvent } = useRequest( - services.CityProblemApi.getUpToDateEvent, - { - defaultParams: [ - { - page: 1, - count: 10, - }, - ], - }, - ); - /** @description 移动视角到能显示全部覆盖物 */ - useEffect(() => { - setViewport(); - }, [MapRef.current]); - const { data: warnMark } = useRequest( - () => services.CityRiskApi.safetyRiskEventMap(searchParams), - { - refreshDeps: [searchParams], - }, - ); + // /** @description 移动视角到能显示全部覆盖物 */ + // useEffect(() => { + // setViewport(); + // }, [MapRef.current]); // 重点区域列表 const getImportantAreaList = async () => { @@ -164,39 +90,6 @@ const EmphasisAreaMap: React.FC = () => { getImportantAreaList(); }, []); - const pList = [ - { - l: [103.87453593938976, 30.746739203687397], - type: 1, - name: '突出问题', - icon: require('@/assets/images/tuchuIc.png'), - }, - { - l: [103.9541617397942, 30.735316951515046], - type: 2, - name: '突出问题', - icon: require('@/assets/images/tuchuIc.png'), - }, - { - l: [103.87424848162657, 30.72240319350852], - type: 3, - name: '突出问题', - icon: require('@/assets/images/tuchuIc.png'), - }, - { - l: [103.92455359018533, 30.71569728382409], - type: 4, - name: '未结案', - icon: require('@/assets/images/wtIc.png'), - }, - { - l: [103.87453593938976, 30.71569728382409], - type: 5, - name: '未结案', - icon: require('@/assets/images/wtIc.png'), - }, - ]; - const getObjectPolygon = async () => { const params = { physicalSignType: 1, @@ -237,217 +130,111 @@ const EmphasisAreaMap: React.FC = () => { }; return (
- {isBmap ? ( - <> - ) : ( - - {leftTabKey === '1' ? ( - <> - {allAreaMapData?.map((item: any) => ( - { - try { - const params = { - physicalSignType: '1', // 1实况指数 3周期指数 - indexType: '1', // 指数体系类型 0:内评价 1:外评价 - indexHierarchy: '1,2', // 指数层级，从1开始，多个用,逗号隔开 - objectId: item?.objectId, // 区域网格id - indexId: '', // 指数id - }; - const res = - await services.Physicalsign.getComparisonIndexInstance( - params, - ); - - const res1 = - await services.Physicalsign.getTotalCountForKeyAreas({ - keyAreaId: item?.objectId, - eventStatus: '处置中', - }); + + {leftTabKey === '1' ? ( + <> + {allAreaMapData?.map((item: any) => ( + { + try { + const params = { + physicalSignType: '1', // 1实况指数 3周期指数 + indexType: '1', // 指数体系类型 0:内评价 1:外评价 + indexHierarchy: '1,2', // 指数层级，从1开始，多个用,逗号隔开 + objectId: item?.objectId, // 区域网格id + indexId: '', // 指数id + }; + const res = + await services.Physicalsign.getComparisonIndexInstance( + params, + ); - setAreaSelectd({ - ...res?.data, - centerX: item?.centerX, - centerY: item?.centerY, - objectName: item?.objectName, - issueCount: res1?.data, + const res1 = + await services.Physicalsign.getTotalCountForKeyAreas({ + keyAreaId: item?.objectId, + eventStatus: '处置中', }); - } catch (error) { - console.log(error); - } - }} - key={item.objectId} - > -
-
- {item?.objectName} - - {cqiDisplay(item?.qualitySign)} - -
-
-
- - ))} - {areaSelectd && ( - { - dispatch.push('KeyAreaDetail', { - title: areaSelectd.objectName, - props: { - objectId: areaSelectd?.objectId, - cqi: areaSelectd?.qualitySign, - }, - }); - }} - onClose={(e) => { - setAreaSelectd(undefined); - // console.log('close', e); - }} - > -
- -
- - )} - {center && ( - - )} - - ) : ( - <> - {warnMark?.data?.items - ?.filter((item: any) => checkedKeys?.includes(item?.riskLevel)) - ?.map((item: any, index: number) => { - const point = [Number(item?.x_pos), Number(item?.y_pos)]; - return ( - { - const res = await services.CityRiskApi.getInfo({ - // riskId: '24555845', - riskId: item?.riskId, - }); - setFxSelectd({ ...res?.data, riskId: item?.riskId }); - }} - > - - - ); - })} - {newEvent?.data?.items - ?.filter((item: any) => - checkedKeys?.includes( - item?.protrudeFlag == '2' ? '突出问题' : '其他问题', - ), - ) - .map((item: any, index: number) => { - const point = [Number(item?.lon), Number(item?.lat)]; - return ( - { - setKontSelectd(item); - }} - position={point} - icon={ - item?.protrudeFlag == '2' - ? require('@/assets/images/tuchuIc.png') - : require('@/assets/images/wtIc.png') - } - > - ); - })} - {fxSelectd && ( - { - setDetailModalOpt({ - open: true, - eventId: fxSelectd?.riskId, - ...fxSelectd, - }); - }} - onClose={(e) => { - setFxSelectd(undefined); - }} - > -
- -
- - )} - {/**问题popover */} - {kontSelectd && ( - { - // e?.stopPropagation(); - // e?.nativeEvent?.stopImmediatePropagation(); - setModalOpt({ - open: true, - title: '事件详情', - ...kontSelectd, + setAreaSelectd({ + ...res?.data, + centerX: item?.centerX, + centerY: item?.centerY, + objectName: item?.objectName, + issueCount: res1?.data, }); - }} - onClose={(e) => { - // e?.stopPropagation(); - // e?.nativeEvent?.stopImmediatePropagation(); - - setKontSelectd(undefined); - }} - > -
- + } catch (error) { + console.log(error); + } + }} + key={item.objectId} + > +
+
+ {item?.objectName} + + {cqiDisplay(item?.qualitySign)} +
- - )} - - )} - - )} - +
+
+ + ))} + {areaSelectd && ( + { + dispatch.push('KeyAreaDetail', { + title: areaSelectd.objectName, + props: { + objectId: areaSelectd?.objectId, + cqi: areaSelectd?.qualitySign, + }, + }); + }} + onClose={(e) => { + setAreaSelectd(undefined); + // console.log('close', e); + }} + > +
+ +
+ + )} + {center && ( + + )} + + ) : ( + + )} +
重点区域列表
@@ -519,7 +306,7 @@ const EmphasisAreaMap: React.FC = () => { // roll: 0, // }, }); - + setLeftTabKey('1'); setCenter(data); // destination: { @@ -555,146 +342,12 @@ const EmphasisAreaMap: React.FC = () => {
-
-
-
图层图例
-
setLeftTabKey('1')} - > - CQI -
-
-
-
应急态
-
-
-
-
预警态 <85
-
-
-
-
标准态 85-95
-
-
-
-
理想态 >95
-
-
setLeftTabKey('2')} - > - 风险预警与问题分布 -
- {leftTabKey == '2' && ( - - { - setCheckedKeys(e); - }} - checkedKeys={checkedKeys} - treeData={[ - { - title: '安全风险', - key: '安全风险', - disabled: true, - children: [ - { - title: ( -
- 红色风险 -
- ), - key: '红色风险', - disabled: true, - }, - { - title: ( -
- 橙色风险 -
- ), - key: '橙色风险', - disabled: true, - }, - { - title: ( -
- 黄色风险 -
- ), - key: '黄色风险', - disabled: true, - }, - { - title: ( -
- 一般风险 -
- ), - disabled: true, - key: '一般风险', - }, - ], - }, - { - title: '城市问题', - key: '城市问题', - children: [ - { - title: ( -
- - 其他问题 -
- ), - key: '其他问题', - }, - { - title: ( -
- - 突出问题 -
- ), - key: '突出问题', - }, - ], - }, - ]} - /> - - )} -
+
{/* 事件详情 */} void; + setCheckedKeys:(val:any[])=>void +}) => { + return ( +
+
+
+
图层图例
+
setLeftTabKey('1')} + > + CQI +
+
+
+
+ 应急态 + {/* <60 */} +
+
+
+
+
预警态 <85
+
+
+
+
标准态 85-95
+
+
+
+
理想态 >95
+
+
setLeftTabKey('2')} + > + 风险预警与问题分布 +
+ {leftTabKey == '2' && ( + + { + setCheckedKeys(e); + }} + checkedKeys={checkedKeys} + treeData={[ + { + title: '安全风险', + key: '安全风险', + disabled: true, + children: [ + { + title: ( +
+ 红色风险 +
+ ), + key: '红色预警', + disabled: true, + }, + { + title: ( +
+ 橙色风险 +
+ ), + disabled: true, + key: '橙色预警', + }, + { + title: ( +
+ 黄色风险 +
+ ), + disabled: true, + key: '黄色预警', + }, + { + title: ( +
+ 一般风险 +
+ ), + disabled: true, + key: '一般预警', + }, + ], + }, + { + title: '城市问题', + key: '城市问题', + children: [ + { + title: ( +
+ + 其他问题 +
+ ), + key: '其他问题', + }, + { + title: ( +
+ + 突出问题 +
+ ), + key: '突出问题', + }, + ], + }, + ]} + /> + + )} +
+
+ ); +}; + +export default memo(LeftTab); diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/RiskIssue/index.less b/src/pages/SecurityServiceOverview/components/MapCantainer/RiskIssue/index.less new file mode 100644 index 0000000000000000000000000000000000000000..efed354df92ba89a2407b7d98aa9bcb2374b96af --- /dev/null +++ b/src/pages/SecurityServiceOverview/components/MapCantainer/RiskIssue/index.less @@ -0,0 +1,74 @@ +.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; + } + } + .window1 { + box-sizing: border-box; + + &::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; + } + } + .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( + 180deg, + 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/RiskIssue/index.tsx b/src/pages/SecurityServiceOverview/components/MapCantainer/RiskIssue/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..fe4c26b1018ddff365692cfc9dca8d6c9b8b88a8 --- /dev/null +++ b/src/pages/SecurityServiceOverview/components/MapCantainer/RiskIssue/index.tsx @@ -0,0 +1,159 @@ +import CooglMap from '@/components/CooglMap'; +import services from '@/services'; +import { useRequest } from 'ahooks'; +import { memo, useEffect, useState } from 'react'; +import { colorConfig } from '../DistrictMap'; +import PopoverCardKnotty from '../DistrictMap/PopoverCardKnotty'; +import PopoverCardWarn from '../DistrictMap/PopoverCardWarn'; +import styles from './index.less'; +const RiskIssue = ({ + checkedKeys, + setDetailModalOpt, + setModalOpt, +}: { + checkedKeys: any[]; + setModalOpt: (val: any) => void; + setDetailModalOpt:(val:any)=>void +}) => { + + const [eventData, setEventData] = useState([]); + //风险 + const [fxSelectd, setFxSelectd] = useState(); + //问题 + const [kontSelectd, setKontSelectd] = useState(); + + //预警点位 + const { data: earlyData } = useRequest(() => + services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-aq-yjxx', + params: { + pageNo: 1, + pageSize: 10, + }, + }), + ); + console.log(earlyData); + + useEffect(() => { + //最新事件 + services.CityProblemApi.getUpToDateEvent({ + page: 1, + count: 10, + // protrudeFlag: '1', + }).then((res: any) => { + console.log('getUpToDateEvent', res); + if (res.code === 200) { + setEventData(res.data?.items); + } + }); + }, []); + + return ( + <> + {earlyData?.data?.data?.records + ?.filter((item: any) => checkedKeys?.includes(item?.risklevel)) + ?.map((item: any, index: number) => { + const point = [Number(item?.longitude), Number(item?.latitude)]; + + return ( + { + try { + console.log(item); + + setFxSelectd(item); + } catch (error) { + console.log(error); + } + }} + > + + + ); + })} + {eventData + ?.filter((item) => + checkedKeys?.includes( + item?.protrudeFlag == '2' ? '突出问题' : '其他问题', + ), + ) + ?.map((item, index) => { + const point = [Number(item?.lon), Number(item?.lat)]; + return ( + { + setKontSelectd(item); + }} + > + + + ); + })} + {/**预警popover */} + {fxSelectd && ( + { + setDetailModalOpt({ + open: true, + eventId: fxSelectd?.riskId, + ...fxSelectd, + }); + }} + onClose={(e) => { + setFxSelectd(undefined); + }} + > +
+ +
+ + )} + {/**问题popover */} + {kontSelectd && ( + { + setModalOpt({ + open: true, + title: '事件详情', + ...kontSelectd, + }); + }} + onClose={(e) => { + setKontSelectd(undefined); + }} + > +
+ +
+ + )} + + ); +}; +export default memo(RiskIssue); diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/index.less b/src/pages/SecurityServiceOverview/components/MapCantainer/index.less index 7e5ee42250efa06380184c69bb24c39fd6a1d0a9..33260cc3526e9a1bc9c9217d572190373824dd88 100644 --- a/src/pages/SecurityServiceOverview/components/MapCantainer/index.less +++ b/src/pages/SecurityServiceOverview/components/MapCantainer/index.less @@ -15,7 +15,7 @@ position: absolute; bottom: 20px; - left: 29%; + left: 34%; display: flex; justify-content: center; z-index: 997; diff --git a/src/pages/UrbanSecuritySituation/RiskLevelNum/index.less b/src/pages/UrbanSecuritySituation/RiskLevelNum/index.less index 916c1e0d0d093ecaf33f483e141e0fd07a6f536a..b17507e0394c425b887cb663bc3b84d73f29d5df 100644 --- a/src/pages/UrbanSecuritySituation/RiskLevelNum/index.less +++ b/src/pages/UrbanSecuritySituation/RiskLevelNum/index.less @@ -19,5 +19,7 @@ padding: 0 8px; position: relative; top: -4px; - } + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text;} } \ No newline at end of file diff --git a/src/pages/UrbanSecuritySituation/RiskLevelNum/index.tsx b/src/pages/UrbanSecuritySituation/RiskLevelNum/index.tsx index 1575ff1dc035e85578206e19a7884306c27b7d88..a25f7d3c356c0cac9d7e61d22e9636f39d9dfc24 100644 --- a/src/pages/UrbanSecuritySituation/RiskLevelNum/index.tsx +++ b/src/pages/UrbanSecuritySituation/RiskLevelNum/index.tsx @@ -4,12 +4,12 @@ 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 Modal from '@/components/HncyModal'; -import EventPicList from '@/pages/Common/components/EventPicList'; +import RiskEvents from '@/pages/Common/Event/RiskEvents'; +import services from '@/services'; +import { useRequest } from 'ahooks'; import { Flex, Space } from 'antd'; import { useMemo, useState } from 'react'; import styles from './index.less'; -import { useRequest } from 'ahooks'; -import services from '@/services'; const RiskLevelNum: React.FC = () => { //事件列表 const [listData, setListData] = useState({ @@ -29,48 +29,60 @@ const RiskLevelNum: React.FC = () => { title: '', type: '', }); - const { data: levelData } = useRequest( - services.CityRiskApi.getStatisticalRiskLevel, + + //预警数 + const { data: warnCoutnData } = useRequest(() => + services.DataBase.getSjdzInfoData({ + typeCode: 'zzcc-aq-yjdjtj', + }), ); const riskData = useMemo(() => { return [ { - type: '1', + type: '红色风险', label: '红色风险', - value: levelData?.data?.majorRiskTotal, + value: + warnCoutnData?.data?.data?.records?.[0]?.stat?.find( + (item) => item?.risklevel === '红色预警', + )?.num || '--', icon: risk1, - color: - 'linear-gradient(180.00deg, rgb(255, 138, 138),rgb(208, 62, 62))', + color: 'linear-gradient(180deg, rgb(255, 138, 138), rgb(208, 62, 62))', }, { - type: '2', + type: '橙色风险', label: '橙色风险', - value: levelData?.data?.significantRiskTotal, + value: + warnCoutnData?.data?.data?.records?.[0]?.stat?.find( + (item) => item?.risklevel === '橙色预警', + )?.num || '--', icon: risk2, - color: - 'linear-gradient(180.00deg, rgb(255, 176, 121),rgb(238, 126, 48))', + color: 'linear-gradient(180deg, rgb(255, 176, 121), rgb(238, 126, 48))', }, { - type: '3', + type: '黄色风险', label: '黄色风险', - value: levelData?.data?.generalRiskTotal, + value: + warnCoutnData?.data?.data?.records?.[0]?.stat?.find( + (item) => item?.risklevel === '黄色预警', + )?.num || '--', icon: risk3, - color: - 'linear-gradient(180.00deg, rgb(255, 228, 155),rgb(231, 182, 55))', + color: 'linear-gradient(180deg, rgb(255, 228, 155), rgb(231, 182, 55))', }, { - type: '4', + type: '一般风险', label: '一般风险', - value:levelData?.data?.ybfxRiskTotal, + value: + warnCoutnData?.data?.data?.records?.[0]?.stat?.find( + (item) => item?.risklevel === '一般预警', + )?.num || '--', icon: risk4, color: - 'linear-gradient(180.00deg, rgb(122, 177, 255),rgb(37, 128, 255))', + 'linear-gradient(to right, rgb(122, 177, 255), rgb(37, 128, 255))', }, ]; - - - }, [levelData]); - console.log(levelData); + }, [warnCoutnData]); + + return ( {riskData.map((item) => ( @@ -81,7 +93,7 @@ const RiskLevelNum: React.FC = () => { setModalOpt({ open: true, type: item.type, - title: '红色风险', + title: '安全风险', }) } > @@ -93,13 +105,13 @@ const RiskLevelNum: React.FC = () => { - {item.value ?? 0} + {/* {item?.value ?? 0} */}-- - 个 + {/* {item?.value !== '--' && 个} */} @@ -107,16 +119,15 @@ const RiskLevelNum: React.FC = () => { ))} - {modalOpt?.title}-当前还有5个红色风险在整改中 - - } + title={modalOpt?.title} onCancel={() => setModalOpt({ open: false, title: '', type: '' })} width={1772} height={846} > - + ); diff --git a/src/pages/UrbanSituation/Security/index.tsx b/src/pages/UrbanSituation/Security/index.tsx index 2b023ddc3bff8dfcf3cbdc28ffd5bb6fe5a4aef3..deedc67306af949e56b4ecfa7d6deb342695cf89 100644 --- a/src/pages/UrbanSituation/Security/index.tsx +++ b/src/pages/UrbanSituation/Security/index.tsx @@ -103,9 +103,9 @@ const Security = () => { className={styles.num} style={{ background: item.color, backgroundClip: 'text' }} > - {item?.value} + {/* {item?.value} */}-- - {item?.value !== '--' && 个} + {/* {item?.value !== '--' && 个} */}
{item.label}