diff --git a/src/assets/images/SecurityServiceOverview/aqzj.png b/src/assets/images/SecurityServiceOverview/aqzj.png new file mode 100644 index 0000000000000000000000000000000000000000..e0e21eb0e83545243a4badf406e600003468fd40 Binary files /dev/null and b/src/assets/images/SecurityServiceOverview/aqzj.png differ diff --git a/src/assets/images/SecurityServiceOverview/yjdw.png b/src/assets/images/SecurityServiceOverview/yjdw.png new file mode 100644 index 0000000000000000000000000000000000000000..9c0ea187ef872836e789f5198fc91353151f8bd1 Binary files /dev/null and b/src/assets/images/SecurityServiceOverview/yjdw.png differ diff --git a/src/assets/images/SecurityServiceOverview/yjwz.png b/src/assets/images/SecurityServiceOverview/yjwz.png new file mode 100644 index 0000000000000000000000000000000000000000..9dd753e05a32533f1aaa10d61dc74a37cb2759ef Binary files /dev/null and b/src/assets/images/SecurityServiceOverview/yjwz.png differ diff --git a/src/assets/images/SecurityServiceOverview/yjzb.png b/src/assets/images/SecurityServiceOverview/yjzb.png new file mode 100644 index 0000000000000000000000000000000000000000..143930c6864000d70ed11e5c3338eff840cd0a19 Binary files /dev/null and b/src/assets/images/SecurityServiceOverview/yjzb.png differ diff --git a/src/components/PieChart/Chart.tsx b/src/components/PieChart/Chart.tsx new file mode 100644 index 0000000000000000000000000000000000000000..beb68fdd9128512231ca4702e5eba29367f57d09 --- /dev/null +++ b/src/components/PieChart/Chart.tsx @@ -0,0 +1,41 @@ +//公用饼图 +import ReactEcharts from 'echarts-for-react'; +import { CSSProperties } from 'react'; +interface ChartProps { + data: any; + style?: CSSProperties; + color: string[]; +} +const Chart: React.FC = ({ data, color, style }) => { + const getOption = () => { + return { + color, + tooltip: { + trigger: 'item', + confine: true, + formatter: '{b0}: {c0}', + }, + series: [ + { + name: '', + type: 'pie', + minAngle: 20, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。 + radius: ['82%', '100%'], + label: { + show: false, + }, + data: data, + }, + ], + }; + }; + return ( + + ); +}; +export default Chart; diff --git a/src/components/PieChart/DotText/index.less b/src/components/PieChart/DotText/index.less new file mode 100644 index 0000000000000000000000000000000000000000..4bde9658abd7a169b0ee4290f390418a0a59a820 --- /dev/null +++ b/src/components/PieChart/DotText/index.less @@ -0,0 +1,26 @@ +.dottext { + line-height: 36px; + font-size: 14px; + color: #666565; + position: relative; + display: flex; + + &::before { + display: block; + content: ''; + width: 8px; + height: 8px; + border-radius: 8px; + background: var(--color); + position: absolute; + top: 13px; + } + + .type { + display: inline-block; + max-width: 80px; + overflow: hidden; + margin-left: 15px; + color: var(--fontcolor); + } +} \ No newline at end of file diff --git a/src/components/PieChart/DotText/index.tsx b/src/components/PieChart/DotText/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..12e60ee7d0d48f6e6049879e1ca792c1a50aabf8 --- /dev/null +++ b/src/components/PieChart/DotText/index.tsx @@ -0,0 +1,34 @@ +//文本前带圆点 +import { Popover } from 'antd'; +import classNames from 'classnames'; +import { CSSProperties } from 'react'; +import styles from './index.less'; +interface DotTextProps { + dotcolor: string; //圆点颜色 + title: string; //文本 + textColor?: string; //文本颜色 + titleStyle?: CSSProperties; //title样式 +} +const DotText: React.FC = ({ + textColor = '#666', + dotcolor, + title, + titleStyle, +}) => { + return ( +
+ + + {title} + + +
+ ); +}; +export default DotText; diff --git a/src/components/PieChart/index.less b/src/components/PieChart/index.less new file mode 100644 index 0000000000000000000000000000000000000000..8b60c69eb768f26de176f0106d2c0f242b7c7736 --- /dev/null +++ b/src/components/PieChart/index.less @@ -0,0 +1,44 @@ +.label { + width: 100%; + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + color: rgb(188, 206, 233); + font-size: 16px; + margin-top: 18px; + + .labelItem { + width: 200px; + height: 30px; + background: rgba(41, 180, 255, 0.269); + border-radius: 12px; + padding: 0 15px; + } + + p { + display: flex; + align-items: center; + color: rgb(188, 206, 233); + font-size: 14px; + width: 22%; + display: flex; + justify-content: flex-end; +margin: 0; + b { + + color: rgb(188, 206, 233); + margin-right: 4px; + + } + + &.valueWrap { + flex: 1; + display: flex; + justify-content: flex-end; + padding: 0 0 1px 8px !important; + align-items: center; + + } + } +} \ No newline at end of file diff --git a/src/components/PieChart/index.tsx b/src/components/PieChart/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..3ef0a307536d539fcd4d9b80341e768aa9a2216d --- /dev/null +++ b/src/components/PieChart/index.tsx @@ -0,0 +1,71 @@ +//公用饼图 +import EmptySpace from '@/components/EmptySpace'; +import { Flex } from 'antd'; +import classNames from 'classnames'; +import { CSSProperties } from 'react'; +import Chart from './Chart'; +import DotText from './DotText/index'; +import styles from './index.less'; +interface PieChartDto { + data?: API.BaseChartInfo[]; //数据源 + labelGap?: number; //label间距 + style?: CSSProperties; //样式 + chartStyle?: CSSProperties; //chartStyle样式 + labelStyle?: CSSProperties; + labelClassName?: string; //label样式 + color?: string[]; //颜色 +} +const PieChart: React.FC = ({ + style, + labelGap = 8, + chartStyle = { width: '260px', height: '300px' }, + data = [], + labelClassName, + labelStyle, + color = ['rgb(150, 216, 129)', 'rgb(83, 214, 255)', 'rgb(159, 159, 255)', 'rgb(247, 161, 91)', '#B5B42F'], +}) => { + return ( + + {data?.length > 0 ? ( + <> + +
+ {data.map((it, index) => ( + + +

+ + {it.value} + + 件 + + +

+ {/*

+ {parseFloat(Number(it.percent).toFixed(1))}% +

*/} + + ))} +
+ + ) : ( + + )} + + ); +}; +export default PieChart; diff --git a/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.tsx b/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.tsx index 2522125a0717d87e9bb13037746b779dca7dc8be..2cbb6c1cac2aedcecbc3e8c9e325f006a92487d8 100644 --- a/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.tsx +++ b/src/pages/GlobalModalServices/modals/DistrictIndex/RightBox/index.tsx @@ -39,8 +39,8 @@ const RightBox: React.FC<{ objectId: string }> = ({ objectId }) => { '#FFE335', '#D5D5D5', '#ff98f9', - ]; - let sourceData = cityPieData?.data.source; + ] + let sourceData = cityPieData?.data?.source; return sourceData?.map((it, index) => ({ name: it.name, value: it.count, diff --git a/src/pages/SecurityServiceOverview/SecurityState/FacilityWarn/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/FacilityWarn/index.tsx index 1b38a677e27ccf25488626044babc212127fe561..c736dd7c9cbc8e4b0eee6865a7cefc64b6901dcc 100644 --- a/src/pages/SecurityServiceOverview/SecurityState/FacilityWarn/index.tsx +++ b/src/pages/SecurityServiceOverview/SecurityState/FacilityWarn/index.tsx @@ -42,24 +42,24 @@ const FacilityWarn = ({ data }: { data: any }) => { }, ], }); - //照明预警数陈彭接口 - const { data: zmTotal } = useRequest(() => { - return services.CityRiskApi.getstatisticalEvent({ - parentTypeCode: 'zm', - }); - }); - //广告牌预警数陈彭接口 - const { data: ggzpTotal } = useRequest(() => { - return services.CityRiskApi.getstatisticalEvent({ - parentTypeCode: 'ggzp', - }); - }); - //管廊预警数陈彭接口 - const { data: glTotal } = useRequest(() => { - return services.CityRiskApi.getstatisticalEvent({ - parentTypeCode: 'gl', - }); - }); + // //照明预警数陈彭接口 + // const { data: zmTotal } = useRequest(() => { + // return services.CityRiskApi.getstatisticalEvent({ + // parentTypeCode: 'zm', + // }); + // }); + // //广告牌预警数陈彭接口 + // const { data: ggzpTotal } = useRequest(() => { + // return services.CityRiskApi.getstatisticalEvent({ + // parentTypeCode: 'ggzp', + // }); + // }); + // //管廊预警数陈彭接口 + // const { data: glTotal } = useRequest(() => { + // return services.CityRiskApi.getstatisticalEvent({ + // parentTypeCode: 'gl', + // }); + // }); //照明 const zm = useMemo(() => { // return data?.find((item: any) => item?.typeCode === 'zm'); @@ -181,7 +181,7 @@ const FacilityWarn = ({ data }: { data: any }) => { })}
- +
@@ -213,7 +213,7 @@ const FacilityWarn = ({ data }: { data: any }) => { })}
- +
@@ -245,7 +245,7 @@ const FacilityWarn = ({ data }: { data: any }) => { })}
- +
diff --git a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/DisposeFlow/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/DisposeFlow/index.tsx index 14536a3d9661b34d1e7659bd76bd48c1de9f96f0..d33f1f58632bb84a747fdb0c98b6f2a1ed174465 100644 --- a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/DisposeFlow/index.tsx +++ b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/DisposeFlow/index.tsx @@ -1,5 +1,20 @@ +import { useRequest } from 'ahooks'; import styles from './index.less'; -const DisposeFlow = ({countWidth}:{countWidth?:number}) => { +import services from '@/services'; +const DisposeFlow = ({ + countWidth, + typeCode, +}: { + countWidth?: number; + typeCode: string; +}) => { + const { data } = useRequest(() => { + return services.CityRiskApi.getstatisticalEvent({ + parentTypeCode:typeCode, + }); + }); + console.log(data); + return (
@@ -9,7 +24,9 @@ const DisposeFlow = ({countWidth}:{countWidth?:number}) => { className={styles.icon} />
预警
-
1423546576823
+
+ {data?.data?.monthEventTotal??'--'} +
{ alt="" className={styles.arrows} /> -
+
处置
-
123131313131
+
+ + {data?.data?.zgzEventTotal??'--'} +
-
+
办结
-
12323131313131
+
+ {data?.data?.yxcEventTotal??'--'} +
); diff --git a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.less b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.less index 58111bfd1115bc90bcc6fb134a50460e8ad507de..c184b2d53df3e5c19eb402e96a139772839baab6 100644 --- a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.less +++ b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.less @@ -18,15 +18,19 @@ display: flex; align-items: center; padding: 0 5px; - .wic{ + + .wic { width: 14.5px; height: 14.5px; } - .count{ + + .count { color: rgb(255, 255, 255); font-size: 14px; font-family: DingTalk JinBuTi; } + + } } @@ -42,7 +46,10 @@ } - + .count1 { + color: rgb(43, 136, 172); + font-size: 16px; + } .name { width: 100%; color: rgb(202, 223, 252); diff --git a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.tsx index 4ec59b4ead9f6192244c2d5933a10fb60aa7216a..92509c2448d91195a83802e8a27b049d288bae97 100644 --- a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.tsx +++ b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/IndustryWiget/index.tsx @@ -31,18 +31,23 @@ const IndustryWiget = ({ >
- { data?.warn&&
- -
222
-
} + {data?.warn && ( +
+ +
222
+
+ )}
-
{data?.total}
+
+ {data?.total} + {data?.c && /{data?.c}} +
{data?.typeName}
diff --git a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/index.tsx index 853db0c4390e0c35132afcfb00ea36c6ed8c784f..5f14742dfe522f3cdadd04ecc360327744b80cd6 100644 --- a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/index.tsx +++ b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/index.tsx @@ -2,11 +2,10 @@ import services from '@/services'; import { useRequest } from '@umijs/max'; import { useMemo } from 'react'; import CustomCard from '../../components/CustomCard'; +import DisposeFlow from './DisposeFlow'; import styles from './index.less'; import IndustryWiget from './IndustryWiget'; import StatusWiget from './StatusWiget'; -import WarnWiget from './WarnWiget'; -import DisposeFlow from './DisposeFlow'; const IndustryWarn = ({ data }: { data: any }) => { //环卫固废 const { data: hwgf } = useRequest(services.CityRiskApi.catalogData, { @@ -32,6 +31,7 @@ const IndustryWarn = ({ data }: { data: any }) => { typeName: '道路', parentCode: 'dlql', total: '0', + c:'20', children: [ { typeCode: '342', @@ -156,17 +156,6 @@ const IndustryWarn = ({ data }: { data: any }) => { }; }, [data]); - const { data: dlqlTotal } = useRequest(() => { - return services.CityRiskApi.getstatisticalEvent({ - parentTypeCode: 'dlql', - }); - }); - - const { data: hwTotal } = useRequest(() => { - return services.CityRiskApi.getstatisticalEvent({ - parentTypeCode: 'hw', - }); - }); return (
@@ -191,7 +180,7 @@ const IndustryWarn = ({ data }: { data: any }) => { icon: require('@/assets/images/SecurityServiceOverview/qiaoliang.png'), typeCode: dlql?.typeCode, parentData: dlql, - warn:33 + warn: 33, }} style={{ width: 170 }} /> @@ -199,9 +188,8 @@ const IndustryWarn = ({ data }: { data: any }) => { })}
- +
-
{ })}
- +
@@ -257,7 +245,6 @@ const IndustryWarn = ({ data }: { data: any }) => { icon: require('@/assets/images/SecurityServiceOverview/feigu.png'), typeCode: gf?.typeCode, parentData: gf, - }} style={{ width: 100 }} /> @@ -265,7 +252,7 @@ const IndustryWarn = ({ data }: { data: any }) => { })}
- +
diff --git a/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.less b/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.less index 68f0acf6a387b392525394d82b3d6023b7fe21cd..7e170294549e80743577dd32319891b25569b1d7 100644 --- a/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.less +++ b/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.less @@ -17,6 +17,73 @@ } - + .content { + display: flex; + justify-content: space-between; + padding: 0 14px 20px 24px; + + .leftWarp { + width: 46%; + height: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 10px; + grid-row-gap: 50px; + padding-top: 30px; + + .items { + display: flex; + align-items: center; + + .icon { + width: 61px; + height: 61px; + background-color: rgb(205, 89, 59); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + + .img { + width: 30px; + height: 30px; + } + } + + .info { + margin-left: 10px; + + .label { + color: rgb(202, 223, 252); + font-size: 18px; + } + + .count { + font-family: DingTalk JinBuTi; + color: rgb(66, 203, 255); + font-size: 26px; + width: 80px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } + + .rWarp { + margin-top: 10px; + width: 395px; + height: 230px; + background-color: rgba(18, 40, 69, 0.3); + border-radius: 15px; + padding: 14px; + .title{ + color: rgb(202, 223, 252); + font-size: 18px; + font-family: DingTalk JinBuTi; + } + } + } } \ No newline at end of file diff --git a/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx index 84d7597015a02aeee53210cf6674dc320226d9da..c6a579a7a2750af75a2b4babef5e269bd5a6c377 100644 --- a/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx +++ b/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx @@ -1,15 +1,111 @@ -import services from '@/services'; -import { useRequest } from '@umijs/max'; -import { useState } from 'react'; -import SafetyModal from '../SafetyTips/SafetyModal'; +import PieChart from '@/components/PieChart'; +import { useMemo } from 'react'; import styles from './index.less'; - +import { values } from 'lodash'; +import { useRequest } from 'ahooks'; +import services from '@/services'; const MeetSafeguard = () => { - + const { data } = useRequest(services.Information.getArticleList, { + defaultParams: [ + { + pushCategoryName: '气象预警', + 'category.scopeList': '1', + attributeList: '0,1', + current: '1', + size: 3, + }, + ], + }); + + const items = useMemo(() => { + return [ + { + icon: require('@/assets/images/SecurityServiceOverview/yjdw.png'), + label: '应急队伍', + value: 1586, + }, + { + icon: require('@/assets/images/SecurityServiceOverview/aqzj.png'), + label: '安全专家', + value: 1586, + }, + { + icon: require('@/assets/images/SecurityServiceOverview/yjwz.png'), + label: '应急物资', + value: 1586, + }, + { + icon: require('@/assets/images/SecurityServiceOverview/yjzb.png'), + label: '应急装备', + value: 158313131316, + }, + ]; + }, []); + // //获取问题来源getEventCountBySource + // const { data: eventSource, loading: eventSourceLoading } = useRequest( + // services.Physicalsign.getEventCountBySource, + // { + // defaultParams: [ + // { + // physicalSignType: '1', + // indexId: '1', + // indexType: '1', + // objectId: areaId, + // }, + // ], + // }, + // ); + const pieData=useMemo(()=>{ +return [{ + name:'应急防护物资', + value:1234 +}, +{ + name:'运输保障物资', + value:1234 +}, +{ + name:'生活救生物资', + value:1234 +}, +{ + name:'其他物资', + value:1234 +}] + },[]) return (
-
应急保障
+
应急保障
+
+
+ {items?.map((item) => { + return ( +
+
+ +
+
+
{item?.label}
+
{item?.value}
+
+
+ ); + })} +
+
+
应急装备
+
+ +
+
+
); }; diff --git a/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.tsx index 880eeea4e77c8eeab89535a751a978e4366dd9f5..6de7561948d8c5f8f6ec0cb5ed855f8d36860b10 100644 --- a/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.tsx +++ b/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.tsx @@ -37,9 +37,6 @@ const SafetyTips = () => { ], }); - console.log('BigImgData', BigImgData); - console.log('data', data); - const handleCarouselItemClick = (item: any) => { setSelectedCarouselItem(item); diff --git a/src/pages/SecurityServiceOverview/index.tsx b/src/pages/SecurityServiceOverview/index.tsx index b3bea0814b6984c913ff2118a0152db803509159..ad8cbb034e0f13325b99691e6c5d68da9443fa7a 100644 --- a/src/pages/SecurityServiceOverview/index.tsx +++ b/src/pages/SecurityServiceOverview/index.tsx @@ -26,8 +26,9 @@ const SecurityServiceOverview = () => { {/* */} - + + ); }; diff --git a/src/services/core/typings.d.ts b/src/services/core/typings.d.ts index f5b38d7f1c7b8bb55656021cec5d742fc9980030..06570b164fc53d83c85ea84c1c61275cdaf7be33 100644 --- a/src/services/core/typings.d.ts +++ b/src/services/core/typings.d.ts @@ -17,7 +17,7 @@ declare namespace API { name: string; value: string | number; unit?: string; - percent: string; + percent?: string; } interface OptionsDto {