diff --git a/src/assets/images/SecurityServiceOverview/risk/blue.png b/src/assets/images/SecurityServiceOverview/risk/blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f88d6bf1e0d5b2ffa9dff95a786a14b4ebc5d69
Binary files /dev/null and b/src/assets/images/SecurityServiceOverview/risk/blue.png differ
diff --git a/src/assets/images/SecurityServiceOverview/risk/orange.png b/src/assets/images/SecurityServiceOverview/risk/orange.png
new file mode 100644
index 0000000000000000000000000000000000000000..5067f94e73e9494c258057fdb22c998353b58a3f
Binary files /dev/null and b/src/assets/images/SecurityServiceOverview/risk/orange.png differ
diff --git a/src/assets/images/SecurityServiceOverview/risk/red.png b/src/assets/images/SecurityServiceOverview/risk/red.png
new file mode 100644
index 0000000000000000000000000000000000000000..c21409c1b8ed00462069ef980fcfcd2a1981bd73
Binary files /dev/null and b/src/assets/images/SecurityServiceOverview/risk/red.png differ
diff --git a/src/assets/images/SecurityServiceOverview/risk/yellow.png b/src/assets/images/SecurityServiceOverview/risk/yellow.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7501a908c868ead279a9de03c9e67b884e79eeb
Binary files /dev/null and b/src/assets/images/SecurityServiceOverview/risk/yellow.png differ
diff --git a/src/pages/Common/components/EventPicList/index.tsx b/src/pages/Common/components/EventPicList/index.tsx
index 91f781feff62086475207fd0f13ccf1db1186be2..53408ba5bb3bdc478f4e669f271c44b511f573cf 100644
--- a/src/pages/Common/components/EventPicList/index.tsx
+++ b/src/pages/Common/components/EventPicList/index.tsx
@@ -1,79 +1,108 @@
//公用事件列表
import { imageOptions } from '@/utils/comm';
-import { Flex, Image, List, Spin } from 'antd';
-import React, { useRef } from 'react';
+import { IMG_URL } from '@/utils/variables';
+import { Flex, Image, List, Modal, Spin } from 'antd';
+import React, { useRef, useState } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
+import EventDetail from '../../Event/EventDetail';
import styles from './index.less';
-import { IMG_URL } from '@/utils/variables'
interface EventPicListProps {
listData: any;
- setParams: (params: any) => void;
- listHeight?: number;//高度
+ setParams?: (params: any) => void;
+ listHeight?: number; //高度
handleDetail?: (record: any) => void;
+ showEventDetail?: boolean; //是否展示详情
}
-const EventPicList: React.FC<EventPicListProps> = ({ listData, listHeight = 700, setParams, handleDetail }) => {
-
+const EventPicList: React.FC<EventPicListProps> = ({
+ listData,
+ listHeight = 700,
+ setParams,
+ handleDetail,
+ showEventDetail = false,
+}) => {
+ // 事件详情弹窗
+ const [detailModalOpt, setDetailModalOpt] = useState<{
+ open: boolean;
+ eventId: string;
+ }>({
+ open: false,
+ eventId: '',
+ });
const page = useRef({
page: 1,
- })
+ });
//下一页
const loadMoreData = () => {
- page.current.page++
+ page.current.page++;
// setParams(page)
};
-
return (
- <div
- style={{
- height: listHeight,
- overflow: 'auto',
- }}
- >
- <InfiniteScroll
- style={{ overflow: 'hidden' }}
- loadMore={loadMoreData}
- hasMore={listData?.hasNext}
- useWindow={false}
- loader={
- <div style={{ textAlign: 'center' }}>
- <Spin />
- </div>
- }
+ <>
+ <div
+ style={{
+ height: listHeight,
+ overflow: 'auto',
+ }}
>
- <List
- grid={{ column: 4, gutter: 20 }}
- dataSource={listData.items}
- loading={false}
- renderItem={(item: any) => (
- <List.Item key={item.eventId}>
- <div className={styles.cardWrap} >
- <Image
- {...imageOptions}
- src={IMG_URL + item.disposePicPath}
- width={'100%'}
- height={'160px'}
- style={{ objectFit: 'cover' }}
- />
- <div className={styles.info} onClick={() => handleDetail && handleDetail(item)}>
- <p className={styles.cardText}>
- {item.standardEventTitle ?? '无标题'}
- </p>
- <Flex align='center'>
- <span className={styles.status}>{item.caseStatusText}</span>
- <span className={styles.type}>{item.collectionModeName || item.eventTypeName}</span>
- </Flex>
- <div>
- <span>上报时间：</span>
- <span>{item.reportTime}</span>
- </div>
- <div className={styles.textellipsis}>
- <span>发生位置：</span>
- <span>{item.address}</span>
- </div>
- {/* <LabelImgText
+ <InfiniteScroll
+ style={{ overflow: 'hidden' }}
+ loadMore={loadMoreData}
+ hasMore={listData?.hasNext}
+ useWindow={false}
+ loader={
+ <div style={{ textAlign: 'center' }}>
+ <Spin />
+ </div>
+ }
+ >
+ <List
+ grid={{ column: 4, gutter: 20 }}
+ dataSource={listData.items}
+ loading={false}
+ renderItem={(item: any) => (
+ <List.Item key={item.eventId}>
+ <div className={styles.cardWrap}>
+ <Image
+ {...imageOptions}
+ src={IMG_URL + item.disposePicPath}
+ width={'100%'}
+ height={'160px'}
+ style={{ objectFit: 'cover' }}
+ />
+ <div
+ className={styles.info}
+ onClick={() => {
+ showEventDetail &&
+ setDetailModalOpt({
+ open: true,
+ eventId: item.eventId,
+ });
+ handleDetail && handleDetail(item);
+ }}
+ >
+ <p className={styles.cardText}>
+ {item.standardEventTitle ?? '无标题'}
+ </p>
+ <Flex align="center">
+ <span className={styles.status}>
+ {item.caseStatusText}
+ </span>
+ <span className={styles.type}>
+ {item.collectionModeName || item.eventTypeName}
+ </span>
+ </Flex>
+ <div>
+ <span>上报时间：</span>
+ <span>{item.reportTime}</span>
+ </div>
+ <div className={styles.textellipsis}>
+ <span>发生位置：</span>
+ <span>{item.address}</span>
+ </div>
+ {/* <LabelImgText
value={<><span style={{ color: '#CBEDFF' }}>上报时间：{item.reportTime}</span></>}
valueStyle={{ color: '#fff', fontSize: '16px' }}
/>
@@ -89,13 +118,24 @@ const EventPicList: React.FC<EventPicListProps> = ({ listData, listHeight = 700,
value={item.address}
valueStyle={{ color: '#6A738E', fontSize: '14px' }}
/> */}
+ </div>
</div>
- </div>
- </List.Item>
- )}
- />
- </InfiniteScroll>
- </div>
+ </List.Item>
+ )}
+ />
+ </InfiniteScroll>
+ </div>
+ {/* 展示详情框 */}
+ <Modal
+ open={detailModalOpt?.open}
+ title={'事件详情'}
+ onCancel={() => setDetailModalOpt({ open: false, eventId: '' })}
+ width={1160}
+ height={950}
+ >
+ <EventDetail eventId={detailModalOpt?.eventId} />
+ </Modal>
+ </>
);
};
diff --git a/src/pages/IndustryOperation/components/Advertisement/index.tsx b/src/pages/IndustryOperation/components/Advertisement/index.tsx
index 2ce4b96cf1ab9a44a33b982e3dd6b995cdad9ca0..0a7d9acebb21112d3ea5dfb41f6d41e1554a4284 100644
--- a/src/pages/IndustryOperation/components/Advertisement/index.tsx
+++ b/src/pages/IndustryOperation/components/Advertisement/index.tsx
@@ -9,11 +9,7 @@ const Advertisement: React.FC = () => {
<div className={styles.container}>
<div className={styles.container}>
<Flex justify="space-between">
- <RealtimeIndex
- riskNum={3}
- value={89.5}
- compareOneHour={-1.3}
- ></RealtimeIndex>
+ <RealtimeIndex indexId="205" />
<div className={styles.rightWrap}>
<DescriptionItem value={86.2} name="“门前五包”履约率" unit="%" />
<DescriptionItem
diff --git a/src/pages/IndustryOperation/components/DigitalUrbanManagement/index.tsx b/src/pages/IndustryOperation/components/DigitalUrbanManagement/index.tsx
index 100364559c7a26934bf9b8dc0c9fd8ff7bb0b440..4ba6e86289eda8c3f3fecc3a9ee68dfe3c6539dc 100644
--- a/src/pages/IndustryOperation/components/DigitalUrbanManagement/index.tsx
+++ b/src/pages/IndustryOperation/components/DigitalUrbanManagement/index.tsx
@@ -2,9 +2,9 @@ import { CaretUpOutlined } from '@ant-design/icons';
import { Col, Flex, Row } from 'antd';
import ReactECharts from 'echarts-for-react';
import React from 'react';
-import DescriptionItem from '../../../../components/DescriptionItem';
-import styles from './index.less';
+import DescriptionItem from '../../../../components/DescriptionItem';
import { lineOption } from '../../option';
+import styles from './index.less';
const DigitalUrbanManagement: React.FC = () => {
return (
@@ -40,7 +40,7 @@ const DigitalUrbanManagement: React.FC = () => {
<ReactECharts
style={{ height: 100, minWidth: 450, margin: '0 auto' }}
- option={lineOption}
+ option={lineOption()}
/>
</div>
);
diff --git a/src/pages/IndustryOperation/components/Illumination/index.tsx b/src/pages/IndustryOperation/components/Illumination/index.tsx
index 2f8a431160a5a2147d5bff6db30d63479229a68f..9fe618921b567814061536b84975af21582cc0a5 100644
--- a/src/pages/IndustryOperation/components/Illumination/index.tsx
+++ b/src/pages/IndustryOperation/components/Illumination/index.tsx
@@ -9,11 +9,7 @@ const Illumination: React.FC = () => {
<div className={styles.container}>
<div className={styles.container}>
<Flex justify="space-between">
- <RealtimeIndex
- riskNum={0}
- value={95.5}
- compareOneHour={1.3}
- ></RealtimeIndex>
+ <RealtimeIndex indexId="203" />
<div className={styles.rightWrap}>
<DescriptionItem value={48} name="中心城区路灯完好率" unit="%" />
<DescriptionItem
diff --git a/src/pages/IndustryOperation/components/LawEnforcement/index.tsx b/src/pages/IndustryOperation/components/LawEnforcement/index.tsx
index 17ef6dd5582490bb78dd76bf2d2b54014f827119..165c712b1e3de0f8cf2b2b32d65b1e34545c4d4f 100644
--- a/src/pages/IndustryOperation/components/LawEnforcement/index.tsx
+++ b/src/pages/IndustryOperation/components/LawEnforcement/index.tsx
@@ -8,11 +8,7 @@ const LawEnforcement: React.FC = () => {
return (
<div className={styles.container}>
<Flex justify="space-between">
- <RealtimeIndex
- riskNum={3}
- value={78.5}
- compareOneHour={1.3}
- ></RealtimeIndex>
+ <RealtimeIndex indexId={'206'}></RealtimeIndex>
<div className={styles.rightWrap}>
<DescriptionItem
direction="horizontal"
diff --git a/src/pages/IndustryOperation/components/RaiseDust/index.tsx b/src/pages/IndustryOperation/components/RaiseDust/index.tsx
index 81ab17255b5500d495a32ca552972aa284e8511a..fad283407b6a2dccf4edc8377cbaa0a09a6b9246 100644
--- a/src/pages/IndustryOperation/components/RaiseDust/index.tsx
+++ b/src/pages/IndustryOperation/components/RaiseDust/index.tsx
@@ -9,11 +9,7 @@ const RaiseDust: React.FC = () => {
<div className={styles.container}>
<div className={styles.container}>
<Flex justify="space-between">
- <RealtimeIndex
- riskNum={0}
- value={99.5}
- compareOneHour={1.3}
- ></RealtimeIndex>
+ <RealtimeIndex indexId="207" />
<div className={styles.rightWrap}>
<DescriptionItem
value={86.2}
diff --git a/src/pages/IndustryOperation/components/RealtimeIndex/index.tsx b/src/pages/IndustryOperation/components/RealtimeIndex/index.tsx
index 2aec553edf7dc0a9bef81205b48b88719839e7e0..cf53a1ef4260ed92eef7b9aefc33858dfe581869 100644
--- a/src/pages/IndustryOperation/components/RealtimeIndex/index.tsx
+++ b/src/pages/IndustryOperation/components/RealtimeIndex/index.tsx
@@ -2,20 +2,28 @@ import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import classNames from 'classnames';
import ReactECharts from 'echarts-for-react';
-import React from 'react';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import { IndustryContext } from '../..';
import { lineOption } from '../../option';
import styles from './index.less';
interface PropsType {
- riskNum: number;
- value: number;
- compareOneHour: number;
+ indexId: string; //指标
+ riskNum?: number | undefined;
+ value?: number | string;
+ compareOneHour?: number;
}
const RealtimeIndex: React.FC<PropsType> = (props) => {
- const { riskNum, value, compareOneHour } = props;
-
- const getStatus = (val: number) => {
+ let { indexId, riskNum, value } = props;
+ const { indutryIndexData } = React.useContext(IndustryContext);
+ //指标数据
+ const indexData = useMemo(() => {
+ return _.find(indutryIndexData, ['indexId', indexId]);
+ }, [indutryIndexData]);
+ const getStatus = (val: number | string | undefined) => {
+ val = Number(val);
if (val > 95) {
return {
bg: 'rgb(87, 239, 88)',
@@ -35,16 +43,17 @@ const RealtimeIndex: React.FC<PropsType> = (props) => {
};
}
};
-
+ value = value ?? indexData?.qualitySign;
+ riskNum = riskNum ?? indexData?.warningNum ?? 0;
return (
<div className={styles.container}>
<div style={{ color: getStatus(value)?.bg }} className={styles.value}>
{value}
</div>
- <div className={styles.desc}>{getStatus(value)?.desc}</div>
+ <div className={styles.desc}>{indexData?.statusDesc}</div>
<Flex className={classNames(styles.desc)}>
- 较1小时前
- {compareOneHour > 0 ? (
+ {indexData?.desc}
+ {indexData?.status === 'up' ? (
<CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
) : (
<CaretDownOutlined
@@ -53,10 +62,13 @@ const RealtimeIndex: React.FC<PropsType> = (props) => {
)}
<span
style={{
- color: compareOneHour > 0 ? 'rgb(9, 195, 92)' : 'rgb(255, 71, 71)',
+ color:
+ indexData?.status === 'up'
+ ? 'rgb(9, 195, 92)'
+ : 'rgb(255, 71, 71)',
}}
>
- {compareOneHour}%
+ {Number(indexData?.diffValue)?.toFixed(2)}
</span>
</Flex>
<div className={styles.risk}>
@@ -67,7 +79,14 @@ const RealtimeIndex: React.FC<PropsType> = (props) => {
</Space>
)}
</div>
- <ReactECharts style={{ height: 48, width: 190 }} option={lineOption} />
+ {indexData && (
+ <ReactECharts
+ notMerge={true}
+ lazyUpdate={true}
+ style={{ height: 48, width: 190 }}
+ option={lineOption(indexData?.cqiTrend)}
+ />
+ )}
</div>
);
};
diff --git a/src/pages/IndustryOperation/components/RefuseDisposal/index.tsx b/src/pages/IndustryOperation/components/RefuseDisposal/index.tsx
index 44a108a2425beb46203dc5d95c9b46aa0def710b..3e55315bebb62f10c032e88d0caa2d2b90f4e04e 100644
--- a/src/pages/IndustryOperation/components/RefuseDisposal/index.tsx
+++ b/src/pages/IndustryOperation/components/RefuseDisposal/index.tsx
@@ -9,11 +9,7 @@ const RefuseDisposal: React.FC = () => {
<div className={styles.container}>
<div className={styles.container}>
<Flex justify="space-between">
- <RealtimeIndex
- riskNum={0}
- value={95.5}
- compareOneHour={1.3}
- ></RealtimeIndex>
+ <RealtimeIndex indexId="209" />
<div className={styles.rightWrap}>
<DescriptionItem
value={48}
diff --git a/src/pages/IndustryOperation/components/RoadAndBridge/index.tsx b/src/pages/IndustryOperation/components/RoadAndBridge/index.tsx
index 80f16fe626043aa3c00f692efc596fbd59aa0634..f1aa7f9fcff19eb74a642044db318c1676b5f54c 100644
--- a/src/pages/IndustryOperation/components/RoadAndBridge/index.tsx
+++ b/src/pages/IndustryOperation/components/RoadAndBridge/index.tsx
@@ -9,11 +9,7 @@ const RoadAndBridge: React.FC = () => {
<div className={styles.container}>
<div className={styles.container}>
<Flex justify="space-between">
- <RealtimeIndex
- riskNum={0}
- value={95.5}
- compareOneHour={1.3}
- ></RealtimeIndex>
+ <RealtimeIndex indexId="202" />
<div className={styles.rightWrap}>
<DescriptionItem value={48} name="道桥病害" unit="处" />
<DescriptionItem
diff --git a/src/pages/IndustryOperation/index.tsx b/src/pages/IndustryOperation/index.tsx
index da1df31238d1fd64b6d463524779c3d514ca6c97..90b4fcda1dcbb75a6d7fb44f5de95167c3a78aa5 100644
--- a/src/pages/IndustryOperation/index.tsx
+++ b/src/pages/IndustryOperation/index.tsx
@@ -1,7 +1,9 @@
import Modal from '@/components/HncyModal';
import IndustrySystem from '@/pages/Common/Sign/IndustrySystem';
+import services from '@/services';
import { DoubleRightOutlined } from '@ant-design/icons';
-import { Flex, Space } from 'antd';
+import { useRequest } from 'ahooks';
+import { Flex, Space, Spin } from 'antd';
import React, { useMemo, useState } from 'react';
import Advertisement from './components/Advertisement';
import Card from './components/Card';
@@ -13,7 +15,11 @@ 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[];
+ },
+);
/** @module 行业运行情况 */
const IndustryOperation: React.FC = () => {
const [modalOpt, setModalOpt] = useState<{
@@ -23,6 +29,12 @@ const IndustryOperation: React.FC = () => {
open: false,
title: '',
});
+ const { data: indutryIndexData, loading } = useRequest(() =>
+ services.Physicalsign.getAllIndutryIndexInstance({
+ physicalSignType: '1',
+ objectId: '510100',
+ }),
+ );
const views = useMemo(() => {
return [
{
@@ -35,19 +47,19 @@ const IndustryOperation: React.FC = () => {
},
{
title: '市容广告',
- children: <Advertisement></Advertisement>,
+ children: <Advertisement />,
},
{
title: '道桥监管',
- children: <RoadAndBridge></RoadAndBridge>,
+ children: <RoadAndBridge />,
},
{
title: '照明监管',
- children: <Illumination></Illumination>,
+ children: <Illumination />,
},
{
title: '扬尘治理',
- children: <RaiseDust></RaiseDust>,
+ children: <RaiseDust />,
},
{
title: '垃圾分类',
@@ -55,45 +67,58 @@ const IndustryOperation: React.FC = () => {
},
{
title: '垃圾处置',
- children: <RefuseDisposal></RefuseDisposal>,
+ children: <RefuseDisposal />,
},
];
}, []);
return (
- <div className={styles.container}>
- <Flex justify="space-between" align="center" className={styles.header}>
- <div>行业运行情况</div>
- <Space>
- <div
- className={styles.header_right_text}
- onClick={() =>
- setModalOpt({ open: true, title: ' 目前已接入16个行业系统' })
- }
+ <IndustryContext.Provider
+ value={{
+ indutryIndexData:
+ indutryIndexData?.data as PhysicalsignApi.IndutryIndexInstanceDto[],
+ }}
+ >
+ <Spin spinning={loading}>
+ <div className={styles.container}>
+ <Flex
+ justify="space-between"
+ align="center"
+ className={styles.header}
>
- 目前已接入<span>16</span>个行业系统
+ <div>行业运行情况</div>
+ <Space>
+ <div
+ className={styles.header_right_text}
+ onClick={() =>
+ setModalOpt({ open: true, title: ' 目前已接入16个行业系统' })
+ }
+ >
+ 目前已接入<span>16</span>个行业系统
+ </div>
+ <DoubleRightOutlined className={styles.header_right_icon} />
+ </Space>
+ </Flex>
+ <div className={styles.content}>
+ {views.map((item, index) => {
+ return (
+ <Card key={item.title} title={item.title}>
+ {item.children}
+ </Card>
+ );
+ })}
</div>
- <DoubleRightOutlined className={styles.header_right_icon} />
- </Space>
- </Flex>
- <div className={styles.content}>
- {views.map((item, index) => {
- return (
- <Card key={item.title} title={item.title}>
- {item.children}
- </Card>
- );
- })}
- </div>
- <Modal
- open={modalOpt?.open}
- title={modalOpt?.title}
- onCancel={() => setModalOpt({ open: false, title: '' })}
- width={1104}
- height={846}
- >
- <IndustrySystem />
- </Modal>
- </div>
+ <Modal
+ open={modalOpt?.open}
+ title={modalOpt?.title}
+ onCancel={() => setModalOpt({ open: false, title: '' })}
+ width={1104}
+ height={846}
+ >
+ <IndustrySystem />
+ </Modal>
+ </div>
+ </Spin>
+ </IndustryContext.Provider>
);
};
diff --git a/src/pages/IndustryOperation/option.ts b/src/pages/IndustryOperation/option.ts
index 80f48b831ab37e762ca9b0efdab0a580fe92417c..1aa695fb9a55f698f51eb750bdfb524ad6a476ee 100644
--- a/src/pages/IndustryOperation/option.ts
+++ b/src/pages/IndustryOperation/option.ts
@@ -1,67 +1,91 @@
import * as echarts from 'echarts';
-export const lineOption: echarts.EChartsOption = {
- tooltip: {
- show: false,
- },
- legend: {
- show: false,
- },
- grid: {
- top: '10%',
- left: 0,
- right: 0,
- bottom: '1%',
- },
- xAxis: [
+export const lineOption: (data?: any) => echarts.EChartsOption = (
+ data = [
{
- type: 'category',
- boundaryGap: false,
-
- show: false,
+ name: 1,
+ value: 1,
+ },
+ {
+ name: 12,
+ value: 12,
+ },
+ {
+ name: 13,
+ value: 13,
+ },
+ {
+ name: 14,
+ value: 14,
},
],
- yAxis: {
- type: 'value',
- splitLine: {
+) => {
+ return {
+ tooltip: {
+ show: true,
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ color: '#3791FD',
+ },
+ },
+ },
+ legend: {
show: false,
},
- show: false,
- axisLabel: {
+ grid: {
+ top: '10%',
+ left: 0,
+ right: 0,
+ bottom: '1%',
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: data?.map((it: any) => it.name),
show: false,
},
- },
-
- series: [
- {
- type: 'line',
- symbol: 'none',
- smooth: false,
-
- lineStyle: {
- width: 3,
- color: 'rgb(68, 242, 255)',
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ show: false,
},
- areaStyle: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: 'rgb(68, 242, 255)',
- },
- {
- offset: 1,
- color: 'rgba(68, 242, 255, 0)',
- },
- ],
- false,
- ),
+ show: false,
+ axisLabel: {
+ show: false,
},
- data: [3, 3, 4, 2, 5, 6, 7],
},
- ],
+
+ series: [
+ {
+ type: 'line',
+ symbol: 'none',
+ smooth: false,
+ data: data?.map((it: any) => it.value),
+ lineStyle: {
+ width: 3,
+ color: 'rgb(68, 242, 255)',
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: 'rgb(68, 242, 255)',
+ },
+ {
+ offset: 1,
+ color: 'rgba(68, 242, 255, 0)',
+ },
+ ],
+ false,
+ ),
+ },
+ },
+ ],
+ };
};
diff --git a/src/pages/SecurityServiceOverview/components/CustomCard/index.less b/src/pages/SecurityServiceOverview/components/CustomCard/index.less
index 6b6fdfc01dd06af1162dabd688e0f921ac305fdf..0c500854d8fa2c292a2090a6525b8a75ce7cf5f4 100644
--- a/src/pages/SecurityServiceOverview/components/CustomCard/index.less
+++ b/src/pages/SecurityServiceOverview/components/CustomCard/index.less
@@ -1,21 +1,21 @@
.wrap {
border-radius: 20px;
- backdrop-filter: blur(20px);
- background: rgba(110, 175, 255, 0.2);
+ backdrop-filter: blur(20px);
+ background: rgba(63, 149, 229, 0.1);
+
.header {
.titleBox {
.block {
width: 10px;
height: 24px;
border-radius: 0px 4px 4px 0px;
- background: linear-gradient(
- 135.87deg,
- rgb(86, 167, 255),
- rgb(86, 238, 255) 99.55%
- );
+ background: linear-gradient(135.87deg,
+ rgb(86, 167, 255),
+ rgb(86, 238, 255) 99.55%);
opacity: 0.6;
margin-right: 7px;
}
+
.title {
white-space: nowrap;
text-overflow: ellipsis;
@@ -27,4 +27,4 @@
}
}
}
-}
+}
\ No newline at end of file
diff --git a/src/pages/UrbanSecuritySituation/IndustryRisk/index.less b/src/pages/UrbanSecuritySituation/IndustryRisk/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..c4ac1515a6197ed54a5e2c7dbaca3a05098d5385
--- /dev/null
+++ b/src/pages/UrbanSecuritySituation/IndustryRisk/index.less
@@ -0,0 +1,44 @@
+.numWrap {
+ padding: 23px 40px;
+ font-size: 16px;
+ color: #BED1EE;
+ font-family: DingTalk JinBuTi;
+
+ &:hover{
+ cursor: pointer;
+ }
+}
+
+.text {
+ margin-bottom: 14px;
+ color: #b6cbeb;
+ span {
+ font-size: 20px;
+ margin-left: 5px;
+
+ &.warnNum {
+ color: #E35050;
+ }
+
+ &.dealNum {
+ color: #23C2FF;
+ }
+ }
+}
+
+.notWarn {
+ box-sizing: border-box;
+ border: 2px solid rgba(65, 255, 117, 0.1);
+ border-radius: 20px;
+ background: rgb(32, 83, 106);
+ width: 187px;
+ height: 40px;
+ font-family: DingTalk JinBuTi;
+ font-size: 18px;
+ color: #CAFCE9;
+ margin-top: 40px;
+
+ .icon {
+ width: 30px;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/UrbanSecuritySituation/IndustryRisk/index.tsx b/src/pages/UrbanSecuritySituation/IndustryRisk/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..576bfeaab3618aa9a740c45904d2970126f45c87
--- /dev/null
+++ b/src/pages/UrbanSecuritySituation/IndustryRisk/index.tsx
@@ -0,0 +1,112 @@
+//风险数
+import Modal from '@/components/HncyModal';
+import EventPicList from '@/pages/Common/components/EventPicList';
+import CustomCard from '@/pages/SecurityServiceOverview/components/CustomCard';
+import WarnProgress from '@/pages/SecurityServiceOverview/SecurityState/IndustryWarn/WarnProgress';
+import { Flex, Space } from 'antd';
+import { useState } from 'react';
+import styles from './index.less';
+
+const IndustryRisk: React.FC = () => {
+ const [modalOpt, setModalOpt] = useState<{
+ open: boolean;
+ title?: string;
+ }>({
+ open: false,
+ title: '',
+ });
+ const [listData, setListData] = useState<any>({
+ items: [],
+ loading: true,
+ total: 0,
+ page: 1,
+ hasNext: false,
+ });
+ const riskList = [
+ {
+ label: '道路桥梁',
+ },
+ {
+ label: '固废处置',
+ },
+ {
+ label: '城市照明',
+ },
+ {
+ label: '城市环卫',
+ },
+ {
+ label: '户外广告招牌',
+ },
+ {
+ label: '综合管廊',
+ },
+ {
+ label: '油烟扬尘',
+ },
+ ];
+ return (
+ <Flex gap={30} justify="space-between">
+ {riskList?.map((it, index) => (
+ <CustomCard
+ key={it.label}
+ title={it.label}
+ width={276}
+ height={261}
+ titleStyle={{ color: '#fff' }}
+ style={{
+ paddingTop: 22,
+ backgroundColor: 'rgba(63, 149, 229, 0.2)',
+ }}
+ >
+ <div
+ className={styles.numWrap}
+ onClick={() => setModalOpt({ open: true, title: it.label })}
+ >
+ <p className={styles.text}>
+ 风险源数<span> 12</span>
+ </p>
+ {index % 2 === 0 ? (
+ <>
+ <p className={styles.text}>
+ 预警数<span className={styles.warnNum}> 12</span>
+ </p>
+ <p className={styles.text}>
+ 已处置<span className={styles.dealNum}> 12</span>
+ </p>
+ <WarnProgress
+ size={{ height: 14 }}
+ percent={80}
+ success={{ percent: 71 }}
+ />
+ </>
+ ) : (
+ <Flex className={styles.notWarn} align="center" justify="center">
+ <img
+ src={require('@/assets/images/SecurityServiceOverview/notWarnIcon.png')}
+ alt=""
+ className={styles.icon}
+ />
+ <span>无风险预警</span>
+ </Flex>
+ )}
+ </div>
+ </CustomCard>
+ ))}
+ <Modal
+ open={modalOpt?.open}
+ title={
+ <Space>
+ {modalOpt?.title}-<span>当前还有5个红色风险在整改中</span>
+ </Space>
+ }
+ onCancel={() => setModalOpt({ open: false, title: '' })}
+ width={1772}
+ height={846}
+ >
+ <EventPicList showEventDetail listData={listData} listHeight={640} />
+ </Modal>
+ </Flex>
+ );
+};
+export default IndustryRisk;
diff --git a/src/pages/UrbanSecuritySituation/LineCharts/index.tsx b/src/pages/UrbanSecuritySituation/LineCharts/index.tsx
index 07e9b6282eef207d7a97a83cd9fd3ba9a3bbb470..9ace2abc75590399a2fdc376a45dd3f6124edae3 100644
--- a/src/pages/UrbanSecuritySituation/LineCharts/index.tsx
+++ b/src/pages/UrbanSecuritySituation/LineCharts/index.tsx
@@ -1,20 +1,38 @@
-import { useMemo } from 'react'
import ReactEcharts from 'echarts-for-react';
-const LineCharts = () => {
-
+import { useMemo } from 'react';
+const LineCharts = ({ data }: { data: any[] }) => {
const option = useMemo(() => {
- // const data: any = [100, 50, 60, 70, 50]
- const showXAis = false
+ const chartData: any = [
+ '100',
+ '90',
+ '80',
+ '100',
+ '90',
+ '80',
+ '100',
+ '90',
+ '80',
+ '100',
+ '90',
+ '80',
+ '100',
+ '90',
+ '80',
+ '100',
+ '90',
+ '80',
+ ];
+ const showXAis = true;
return {
- color: ['#EB6A6A', '#F69552', '#F0C85E'],
xAxis: {
type: 'category',
boundaryGap: false,
- show: false,
- data: showXAis ? ['09:15', '09:15', '09:15', '09:15', '09:15'] : [],
+ show: showXAis,
+ data: showXAis ? data?.map((item) => item.name) : [],
axisLabel: {
+ show: false,
color: '#CBEDFF',
- interval: 0 // 设置为0以显示所有坐标点
+ interval: 3, // 设置为0以显示所有坐标点
},
axisLine: {
show: false,
@@ -25,30 +43,18 @@ const LineCharts = () => {
show: false,
},
grid: {
- left: '0', // 左边距
+ left: '0', // 左边距
right: '0', // 右边距
- top: '25%', // 上边距
- bottom: '0' // 下边距
- },
- legend: {
- data: ['重大风险', '较大风险', '一般风险'],
- icon: "circle",
- top: 0,
- itemGap: 50,
- textStyle: {
- fontSize: '16px',
- color: '#E4EDFF',
- }
+ top: '10%', // 上边距
+ bottom: '30%', // 下边距
},
series: [
- {
- name: '重大风险',
- data: [100, 50, 60, 70, 50, 100, 50, 60, 70, 50,100, 50, 60, 70, 50,100, 50, 60, 70, 50],
- symbol: "none",
+ {
+ data: chartData,
+ symbol: 'none',
type: 'line',
lineStyle: {
- color: "#EB6A6A",
- width: 4
+ color: '#57EFE5',
},
areaStyle: {
@@ -62,78 +68,12 @@ const LineCharts = () => {
colorStops: [
{
offset: 0,
- color: 'rgba(235, 106, 106, 0.2)', // 0% 处的颜色
- },
-
- {
- offset: 1,
- color: 'rgba(235, 106, 106, 0.1)', // 100% 处的颜色
+ color: 'rgba(87, 239, 229, 0)', // 0% 处的颜色
},
- ],
- global: false, // 缺省为 false
- },
- },
- },
- {
- name: '较大风险',
- data: [80, 30, 20, 60, 90, 80, 30, 20, 60, 90,80, 30, 20, 60, 90,80, 30, 20, 60, 90],
- symbol: "none",
- type: 'line',
- lineStyle: {
- color: "#F69552",
- width: 4
- },
- areaStyle: {
- // 区域填充样式。设置后显示成区域面积图。
- color: {
- type: 'linear',
- x: 0,
- y: 1,
- x2: 0,
- y2: 0.2,
- colorStops: [
- {
- offset: 0,
- color: 'rgba(246, 149, 82, 0.2)', // 0% 处的颜色
- },
-
- {
- offset: 1,
- color: 'rgba(246, 149, 82, 0.1)', // 100% 处的颜色
- },
- ],
- global: false, // 缺省为 false
- },
- },
- },
- {
- name: '一般风险',
- data: [50, 20, 40, 80, 60, 50, 20, 40, 80, 60, 50, 20, 40, 80, 60, 50, 20, 40, 80, 60],
- symbol: "none",
- type: 'line',
- lineStyle: {
- color: "#F0C85E",
- width: 4
- },
-
- areaStyle: {
- // 区域填充样式。设置后显示成区域面积图。
- color: {
- type: 'linear',
- x: 0,
- y: 1,
- x2: 0,
- y2: 0.2,
- colorStops: [
- {
- offset: 0,
- color: 'rgb(240, 200, 94, 0.2)', // 0% 处的颜色
- },
-
{
offset: 1,
- color: 'rgba(240, 200, 94, 0.1)', // 100% 处的颜色
+ color: 'rgba(87, 239, 229, 0.36)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
@@ -141,15 +81,15 @@ const LineCharts = () => {
},
},
],
- }
- }, [])
+ };
+ }, [data]);
return (
<ReactEcharts
option={option} // option：图表配置项
- style={{ width: '100%', height: '180px', margin: '0 auto' }}
+ style={{ width: '100%', height: '187px' }}
/>
- )
-}
+ );
+};
-export default LineCharts
\ No newline at end of file
+export default LineCharts;
diff --git a/src/pages/UrbanSecuritySituation/RiskLevelNum/index.less b/src/pages/UrbanSecuritySituation/RiskLevelNum/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..916c1e0d0d093ecaf33f483e141e0fd07a6f536a
--- /dev/null
+++ b/src/pages/UrbanSecuritySituation/RiskLevelNum/index.less
@@ -0,0 +1,23 @@
+.riskWrap {
+ width: 50%;
+ margin: 40px auto;
+ font-size: 20px;
+ color: #bccee9;
+ >div:hover{
+ cursor: pointer;
+ font-weight: bold;
+ filter: brightness(108%);
+ }
+
+ .riskIcon {
+ width: 48px;
+ }
+
+ .num {
+ font-family: D-DIN;
+ font-size: 40px;
+ padding: 0 8px;
+ position: relative;
+ top: -4px;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/UrbanSecuritySituation/RiskLevelNum/index.tsx b/src/pages/UrbanSecuritySituation/RiskLevelNum/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cfb8bbe91727c1f7a8b01b0710f7b9d6ad34c886
--- /dev/null
+++ b/src/pages/UrbanSecuritySituation/RiskLevelNum/index.tsx
@@ -0,0 +1,118 @@
+//风险级别
+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 Modal from '@/components/HncyModal';
+import EventPicList from '@/pages/Common/components/EventPicList';
+import { Flex, Space } from 'antd';
+import { useMemo, useState } from 'react';
+import styles from './index.less';
+const RiskLevelNum: React.FC = () => {
+ //事件列表
+ const [listData, setListData] = useState<any>({
+ items: [],
+ loading: true,
+ total: 0,
+ page: 1,
+ hasNext: false,
+ });
+ const [statisticsData, setStatisticsData] = useState<any>({});
+ const [modalOpt, setModalOpt] = useState<{
+ open: boolean;
+ title: string;
+ type: string;
+ }>({
+ open: false,
+ title: '',
+ type: '',
+ });
+
+ const riskData = useMemo(() => {
+ return [
+ {
+ type: '1',
+ label: '红色风险',
+ value: statisticsData?.majorRiskTotal,
+ icon: risk1,
+ color:
+ 'linear-gradient(180.00deg, rgb(255, 138, 138),rgb(208, 62, 62))',
+ },
+ {
+ type: '2',
+ label: '橙色风险',
+ value: statisticsData?.significantRiskTotal,
+ icon: risk2,
+ color:
+ 'linear-gradient(180.00deg, rgb(255, 176, 121),rgb(238, 126, 48))',
+ },
+ {
+ type: '3',
+ label: '黄色风险',
+ value: statisticsData?.generalRiskTotal,
+ icon: risk3,
+ color:
+ 'linear-gradient(180.00deg, rgb(255, 228, 155),rgb(231, 182, 55))',
+ },
+ {
+ type: '4',
+ label: '一般风险',
+ value: statisticsData?.ybfxRiskTotal,
+ icon: risk4,
+ color:
+ 'linear-gradient(180.00deg, rgb(122, 177, 255),rgb(37, 128, 255))',
+ },
+ ];
+ }, [statisticsData]);
+ return (
+ <Flex justify="space-between" className={styles.riskWrap}>
+ {riskData.map((item) => (
+ <div
+ key={item.label}
+ className={styles.riskItem}
+ onClick={() =>
+ setModalOpt({
+ open: true,
+ type: item.type,
+ title: '红色风险',
+ })
+ }
+ >
+ <Space size={6}>
+ <img src={item.icon} alt="" className={styles.riskIcon} />
+ <Flex align="center">
+ <span>{item.label}</span>
+ <Flex align="center">
+ <span
+ className={styles.num}
+ style={{
+ background: item.color,
+ backgroundClip: 'text',
+ }}
+ >
+ {item.value ?? 0}
+ </span>
+ <span>个</span>
+ </Flex>
+ </Flex>
+ </Space>
+ </div>
+ ))}
+ <Modal
+ open={modalOpt?.open}
+ title={
+ <Space>
+ {modalOpt?.title}-<span>当前还有5个红色风险在整改中</span>
+ </Space>
+ }
+ onCancel={() => setModalOpt({ open: false, title: '', type: '' })}
+ width={1772}
+ height={846}
+ >
+ <EventPicList showEventDetail listData={listData} listHeight={640} />
+ </Modal>
+ </Flex>
+ );
+};
+
+export default RiskLevelNum;
diff --git a/src/pages/UrbanSecuritySituation/SignCard/index.less b/src/pages/UrbanSecuritySituation/SignCard/index.less
deleted file mode 100644
index 9bc8f162512eab4ef06c707dc56dd059bf6f1548..0000000000000000000000000000000000000000
--- a/src/pages/UrbanSecuritySituation/SignCard/index.less
+++ /dev/null
@@ -1,52 +0,0 @@
-.wrap {
- width: 100%;
- padding: 50px 100px;
- .card {
- width: 224px;
- height: 147px;
- border-radius: 20px;
- background: linear-gradient(
- 180deg,
- rgba(51, 120, 219, 0.5),
- rgba(49, 147, 173, 0.4) 100%
- );
- padding: 15px 0 0 24px;
-
- .name {
- font-family: DingTalk JinBuTi;
- font-size: 30px;
- font-weight: 400;
- line-height: 1;
- }
- .num {
- font-family: D-DIN;
- font-size: 40px;
- font-weight: 700;
- }
- .tag {
- border-radius: 20px;
- background: rgba(87, 239, 88, 0.3);
- color: #ffffff;
- height: 30px;
- padding: 0 10px;
- font-size: 18px;
- }
- .riskName {
- font-size: 18px;
- font-weight: 400;
- color: #ff7474;
- vertical-align: 3px;
- }
- .riskNum {
- border-radius: 5px;
- background: rgba(233, 125, 125, 0.3);
- color: #ff7474;
- font-family: D-DIN;
- font-size: 20px;
- height: 24px;
- line-height: 24px;
- padding: 0 10px;
- font-weight: 700;
- }
- }
-}
diff --git a/src/pages/UrbanSecuritySituation/SignCard/index.tsx b/src/pages/UrbanSecuritySituation/SignCard/index.tsx
deleted file mode 100644
index 4c456b0475a88003ae70e4a7a7c5e1dbf3cb70cc..0000000000000000000000000000000000000000
--- a/src/pages/UrbanSecuritySituation/SignCard/index.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-
-import { useState, useEffect } from 'react'
-import { Flex, Space } from 'antd'
-import styles from './index.less'
-import Modal from '@/components/HncyModal'
-import IndustrySign from '@/pages/Common/Sign/IndustrySign'
-import services from '@/services';
-import { getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui'
-
-const SignCard = () => {
- const [modalOpt, setModalOpt] = useState<{
- open: boolean;
- title: string;
- }>({
- open: false,
- title: '',
- })
-
- const [list, setList] = useState<any>([])
-
-
- const getDepartIndustryPhysicalSignIndexData = () => {
- const params = {
- physicalSignType: 1
- }
- services.Physicalsign.getDepartIndustryPhysicalSignIndex(params).then((res) => {
- console.log(res)
- if(res.code === 200) {
- setList(res.data)
- }
- })
- }
-
- useEffect(() => {
- getDepartIndustryPhysicalSignIndexData()
- }, [])
-
- return (
- <div className={styles.wrap}>
- <Flex justify='space-between' align='center'>
- {
- list.map((item: any) => (
- <div key={item.objectId} className={styles.card} onClick={() => setModalOpt({ open: true, title: item.objectName })}>
- <div className={styles.name}>{item?.objectName}</div>
- <Space style={{ cursor: 'pointer'}}>
- <span className={styles.num} style={{ color: getCqiStatusStyle(item?.cqi)?.color }}>{item?.cqi}</span>
- <div className={styles.tag} style={{ ...getCqiStatusStyle(item?.cqi) }}>{item?.status || getCqiStatusTexts(item?.cqi)?.text}</div>
- </Space>
- <Space>
- <span className={styles.riskName}>{item.riskName}</span>
- {
- item.riskNum && <div className={styles.riskNum}>{item.riskNum}</div>
- }
- </Space>
- </div>
- ))
- }
- </Flex>
- <Modal
- open={modalOpt?.open}
- title={modalOpt?.title}
- onCancel={() => setModalOpt({ open: false, title: ''})}
- width={1772}
- height={846}
- >
- <IndustrySign />
- </Modal>
- </div>
- )
-}
-
-export default SignCard;
\ No newline at end of file
diff --git a/src/pages/UrbanSecuritySituation/index.less b/src/pages/UrbanSecuritySituation/index.less
index 1d3267bdc0adac55e84b30a82f98d586a81d920a..0e330da1a61a0139e650c954408feb84de566217 100644
--- a/src/pages/UrbanSecuritySituation/index.less
+++ b/src/pages/UrbanSecuritySituation/index.less
@@ -1,34 +1,42 @@
.container {
height: 100%;
+
.top {
padding: 32px 76px 0 54px;
margin-bottom: 25px;
+
.title {
font-family: DingTalk JinBuTi;
font-size: 40px;
color: #fff;
}
+
.right {
font-size: 20px;
color: #b3d6f7;
cursor: pointer;
}
}
+
.main {
flex: 1;
padding: 0 60px 60px;
+
.center {
height: 100%;
border-radius: 40px;
- background: linear-gradient(
- 180deg,
- rgba(27, 50, 89, 0.3),
- rgba(27, 50, 89, 0.3) 100%
- );
- padding-top: 45px;
+ background: linear-gradient(180deg,
+ rgba(27, 50, 89, 0.3),
+ rgba(27, 50, 89, 0.3) 100%);
+ padding: 40px;
.sign {
text-align: center;
+
+ &:hover {
+ cursor: pointer;
+ }
+
.title {
font-family: DingTalk JinBuTi;
font-size: 40px;
@@ -36,37 +44,45 @@
color: #e4edff;
margin-bottom: 30px;
}
+
.num {
font-family: D-DIN;
font-size: 80px;
font-weight: 700;
color: #57ef58;
line-height: 1;
+ margin-right: 20px;
}
+
.desc {
font-size: 18px;
font-weight: 400;
color: #d9d9d9;
}
- }
- .chartSection {
- width: 1195px;
- .title {
- font-size: 20px;
- font-weight: 700;
- color: #e4edff;
- }
+
.rateName {
font-size: 18px;
font-weight: 400;
color: #d9d9d9;
}
+
.rate {
font-size: 20px;
font-weight: 700;
font-family: D-DIN;
}
}
+
+ .chartSection {
+ flex: 1;
+ height: 187px;
+
+ .title {
+ font-size: 20px;
+ font-weight: 700;
+ color: #e4edff;
+ }
+ }
}
}
-}
+}
\ No newline at end of file
diff --git a/src/pages/UrbanSecuritySituation/index.tsx b/src/pages/UrbanSecuritySituation/index.tsx
index 2128dc93253ef195446143d1d0ebc545daae1ba3..93acd39fdfd358a4139e2ab8484b5a5fa2cc7a50 100644
--- a/src/pages/UrbanSecuritySituation/index.tsx
+++ b/src/pages/UrbanSecuritySituation/index.tsx
@@ -1,65 +1,129 @@
+import Modal from '@/components/HncyModal';
+import services from '@/services';
+import { getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui';
+import { CaretUpFilled } from '@ant-design/icons';
+import { history } from '@umijs/max';
+import { useRequest } from 'ahooks';
import { Flex, Space } from 'antd';
import React, { useEffect, useState } from 'react';
-import { history } from '@umijs/max';
+import ModalContent from '../SecurityServiceOverview/components/ModalContent';
import styles from './index.less';
-import { CaretUpFilled } from '@ant-design/icons';
+import IndustryRisk from './IndustryRisk';
import LineCharts from './LineCharts';
-import SignCard from './SignCard';
-import services from '@/services';
-import { getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui'
-
+import RiskLevelNum from './RiskLevelNum';
/** @module 城市安全态势 */
-
const UrbanSecuritySituation: React.FC = () => {
-
- const [cqiData, setCqiData] = useState<any>({})
-
+ const [cqiData, setCqiData] = useState<any>({});
+ const { data: signData } = useRequest(() => {
+ return services.Physicalsign.getComparisonIndexInstance({
+ indexId: 2,
+ physicalSignType: 1,
+ indexType: 1,
+ objectId: '50010',
+ });
+ });
+ const [modalOpt, setModalOpt] = useState<{
+ open: boolean;
+ title?: string;
+ }>({
+ open: false,
+ title: '安全指数溯源',
+ });
useEffect(() => {
const params = {
physicalSignTyp: 1,
indexType: 1,
indexHierarchy: '1,2',
objectId: '',
- indexId: ''
- }
+ indexId: '',
+ };
services.Physicalsign.getIndexInstanceData(params).then((res) => {
- console.log(res)
- if(res.code === 200) {
- setCqiData(res.data)
+ console.log(res);
+ if (res.code === 200) {
+ setCqiData(res.data);
}
- })
- }, [])
-
+ });
+ }, []);
return (
<Flex vertical className={styles.container}>
- <Flex justify='space-between' align='center' className={styles.top}>
+ <Flex justify="space-between" align="center" className={styles.top}>
<span className={styles.title}>城市安全态势</span>
- <span className={styles.right} onClick={() => history.push('/securityServiceOverview')}>安全一张图</span>
+ <span
+ className={styles.right}
+ onClick={() => history.push('/securityServiceOverview')}
+ >
+ 安全一张图
+ </span>
</Flex>
<div className={styles.main}>
- <Flex vertical align='center' className={styles.center}>
- <div className={styles.sign}>
- <div className={styles.title}>今日城市安全综合指数</div>
- <Space direction='vertical' size={10}>
- <span className={styles.num} style={{ color: getCqiStatusStyle(cqiData?.cqi)?.color }}>{cqiData?.cqi}</span>
- <span className={styles.desc}>{cqiData?.statusDesc || getCqiStatusTexts(cqiData?.cqi)?.desc}</span>
- </Space>
- </div>
- <div className={styles.chartSection}>
- <Flex justify='space-between'>
- <span className={styles.title}>近30天安全态势</span>
- <span>
- <span className={styles.rateName}>月同比</span>
- <CaretUpFilled style={{ color: '#09C35C', fontSize: 26, verticalAlign: '-5px' }} />
- <span className={styles.rate} style={{ color: '#09C35C' }}>1.3%</span>
- </span>
- </Flex>
- <LineCharts />
- </div>
- <SignCard />
- </Flex>
+ <div className={styles.center}>
+ <Flex gap={100}>
+ <div
+ className={styles.sign}
+ onClick={() => setModalOpt({ open: true })}
+ >
+ <div className={styles.title}>今日城市安全综合指数</div>
+ <Space size={10}>
+ <span
+ className={styles.num}
+ style={{ color: getCqiStatusStyle(cqiData?.cqi)?.color }}
+ >
+ {cqiData?.cqi}
+ </span>
+ <div>
+ <span className={styles.desc}>
+ {cqiData?.statusDesc ||
+ getCqiStatusTexts(cqiData?.cqi)?.desc}
+ </span>
+ <Flex style={{ marginTop: '4px' }}>
+ <span className={styles.rateName}>月同比</span>
+ <CaretUpFilled
+ style={{
+ color: '#09C35C',
+ fontSize: 26,
+ verticalAlign: '-5px',
+ }}
+ />
+ <span className={styles.rate} style={{ color: '#09C35C' }}>
+ 1.3%
+ </span>
+ </Flex>
+ </div>
+ </Space>
+ </div>
+ <div className={styles.chartSection}>
+ <Flex justify="space-between">
+ <span className={styles.title}>近30天趋势</span>
+ </Flex>
+ <LineCharts data={[]} />
+ </div>
+ </Flex>
+ <RiskLevelNum />
+ <IndustryRisk />
+ </div>
</div>
+ <Modal
+ open={modalOpt?.open}
+ title={'安全指数溯源'}
+ onCancel={() => setModalOpt({ open: false, title: '' })}
+ width={2233}
+ height={846}
+ >
+ <ModalContent
+ item={{
+ indexId: signData?.currentIndex?.indexId,
+
+ statusDescription: '理想态',
+ }}
+ lineData={
+ signData?.currentIndex?.indexDataList?.map((item: any) => ({
+ name: item.time,
+ value: item.qualitySign,
+ })) || []
+ }
+ />
+ </Modal>
</Flex>
);
};
diff --git a/src/services/Physicalsign.ts b/src/services/Physicalsign.ts
index 49e9ac084ae9f76163e04b112c6dd8182b9f1fc6..2356862d616fd0f13eaf564f5f93524fe21b672c 100644
--- a/src/services/Physicalsign.ts
+++ b/src/services/Physicalsign.ts
@@ -277,3 +277,16 @@ export async function getCityEventGroupBySource(params: {
params,
});
}
+
+//获取所有行业情况
+export async function getAllIndutryIndexInstance(
+ params: {
+ physicalSignType: '1';
+ objectId: '510100';
+ },
+): Promise<PhysicalsignApi.Result<PhysicalsignApi.IndutryIndexInstanceDto>> {
+ return request(urlProxyApis(`/zhgl/getAllIndutryIndexInstance`), {
+ method: 'GET',
+ params,
+ });
+}
\ No newline at end of file
diff --git a/src/services/core/Physicalsign.d.ts b/src/services/core/Physicalsign.d.ts
index 122d1c6adc693e89b8caff5b0eeed49cddc68d39..b5c426722d04bd7ecb2780892f8ef88a17f8ae59 100644
--- a/src/services/core/Physicalsign.d.ts
+++ b/src/services/core/Physicalsign.d.ts
@@ -109,4 +109,24 @@ declare namespace PhysicalsignApi {
objectName: string;
cqi: string;
}
+
+ interface IndutryIndexInstanceDto {
+ desc: string;
+ diffValue: -0.5799999999999983;
+ indexId: string;
+ indexName: string;
+ indexStatus: string;
+ indexStatusColor: string;
+ qualitySign: string;
+ status: 'down' | 'up';
+ statusDesc: string;
+ time: string;
+ warningNum: number;
+ cqiTrend: {
+ name: string;
+ objectId: string;
+ objectName: string;
+ value: string;
+ }[];
+ }
}