diff --git a/src/assets/images/SecurityServiceOverview/title.png b/src/assets/images/SecurityServiceOverview/title.png
index 0b3782e42f8de262be022ce2360cab96d787eb4e..3dcd1684bd03f583a90f798d76d096c124449773 100644
Binary files a/src/assets/images/SecurityServiceOverview/title.png and b/src/assets/images/SecurityServiceOverview/title.png differ
diff --git a/src/components/CommonTable/index.less b/src/components/CommonTable/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..2b1ae0ecce66f85d2f3197db2f31e9aff0039181
--- /dev/null
+++ b/src/components/CommonTable/index.less
@@ -0,0 +1,136 @@
+.container {
+ :global {
+
+ ::-webkit-scrollbar {
+ /*滚动条整体样式*/
+ width: 5px !important;
+ /*高宽分别对应横竖滚动条的尺寸*/
+ height: 5px !important;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ /*滚动条里面小方块*/
+ border-radius: 10px;
+ background: #4f98e2;
+
+ }
+
+ ::-webkit-scrollbar-track {
+ /*滚动条里面轨道*/
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+ border-radius: 10px;
+
+ }
+
+
+
+ .ant-table-wrapper .ant-table-container {
+ background-color: transparent !important;
+ }
+
+ .ant-table-wrapper .ant-table {
+ background-color: transparent !important;
+ }
+
+ .ant-table-wrapper .ant-table-cell-scrollbar {
+ box-shadow: none !important;
+ }
+
+ .ant-table-thead>tr>th {
+ background-color: transparent !important;
+ // font-family: CustomFont;
+ color: rgb(188, 206, 233) !important;
+ border: 0px;
+
+ }
+
+ .ant-table-wrapper .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
+ width: 0px !important;
+ }
+
+ .ant-table-wrapper .ant-table-tbody>tr>td {
+
+
+ font-weight: 700;
+ font-size: 20px;
+ color: rgb(255, 255, 255);
+
+ }
+ .css-dev-only-do-not-override-z0m7uc.ant-table-wrapper table{
+ border-collapse: separate !important;
+ border-spacing: 0 10px !important;
+ }
+
+
+ .ant-table-wrapper .ant-table-tbody>tr>td {
+
+ border: 0;
+ }
+
+
+
+ // .ant-pagination .ant-pagination-prev .ant-pagination-item-link {
+ // font-size: 20px;
+ // color: #1086BE
+ // }
+
+ // .ant-pagination .ant-pagination-next .ant-pagination-item-link {
+ // font-size: 20px;
+ // color: #1086BE
+ // }
+
+ .ant-pagination .ant-pagination-item {
+ background-color: transparent;
+ font-family: PingFang SC;
+ font-weight: 500;
+ font-size: 22px;
+ color: #A6CDDD;
+
+ a {
+ color: #A6CDDD;
+ }
+ }
+
+ .ant-pagination .ant-pagination-item-active {
+ border: 0;
+ font-family: PingFang SC;
+ font-weight: 800;
+ font-size: 22px;
+ color: #29FFFC;
+ margin-top: 1px;
+
+ a {
+ color: #29FFFC;
+ }
+ }
+
+ .ant-pagination .ant-pagination-options-quick-jumper {
+ color: #A6CDDD;
+ font-size: 22px;
+ display: flex;
+
+ input {
+ background-color: transparent;
+ border: #1086BE 1px solid;
+ }
+ }
+ }
+
+ .rowStyle {
+ height: 50px;
+ border: 0;
+ // border-image: linear-gradient(0deg, #0C6E93, #15A7E0) 10 10;
+ background-color: rgba(57, 122, 183, 0.241);
+ background-size: 100% 100%;
+
+ border-radius: 16px;
+ overflow: hidden !important;
+ }
+
+ .rowStyle:hover {
+
+ background: rgba(57, 122, 183, 0.402) !important;
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/components/CommonTable/index.tsx b/src/components/CommonTable/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..108eab19fac712a84301e7eadb45d676a32aee83
--- /dev/null
+++ b/src/components/CommonTable/index.tsx
@@ -0,0 +1,32 @@
+import { ConfigProvider, Table } from 'antd';
+import { TableProps } from 'antd/lib';
+import { TableConfig } from 'antd/lib/config-provider/context';
+import styles from './index.less';
+const CommonTable = (props: TableConfig & TableProps) => {
+ return (
+ <div className={styles.container}>
+ <ConfigProvider
+ theme={{
+ components: {
+ Table: {
+ headerBg: '#103c62',
+ borderColor: '#103c62',
+ headerSplitColor: '#103c62',
+ },
+ },
+ }}
+ >
+ <Table
+ bordered={false}
+
+ rowClassName={() => {
+ return styles.rowStyle;
+ }}
+ {...props}
+ ></Table>
+ </ConfigProvider>
+ </div>
+ );
+};
+
+export default CommonTable;
diff --git a/src/constants/index.ts b/src/constants/index.ts
index a14b725f180274332490dd875e7159d9d99b61a9..4648bc21659bc9d1a9f04b472b8355d6e6f49041 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1 +1,3 @@
-export const DEFAULT_NAME = 'Umi Max';
+/**安全一张图，图片url */
+export const SafetyFileUrl =
+ 'http://10.1.235.36:6888/eUrbanMIS/mediadl/media/getdata/Media2/rec';
diff --git a/src/models/global.ts b/src/models/global.ts
index 708ccff9b54941dd0c18d59f54ef9f2faecdd22e..9e2abf2619780259bcca9cea620ef96c58dbffa3 100644
--- a/src/models/global.ts
+++ b/src/models/global.ts
@@ -1,9 +1,9 @@
// 全局共享数据示例
-import { DEFAULT_NAME } from '@/constants';
+
import { useState } from 'react';
const useUser = () => {
- const [name, setName] = useState<string>(DEFAULT_NAME);
+ const [name, setName] = useState<string>();
return {
name,
setName,
diff --git a/src/pages/SecurityServiceOverview/SafetyMap/index.tsx b/src/pages/SecurityServiceOverview/SafetyMap/index.tsx
index 9ed819f7a7d72227bf436223055e6e00e0d88429..0fb5a550ad140c4fff5b7fb734c70cf5a4517ce4 100644
--- a/src/pages/SecurityServiceOverview/SafetyMap/index.tsx
+++ b/src/pages/SecurityServiceOverview/SafetyMap/index.tsx
@@ -130,92 +130,13 @@ const SafetyMap = () => {
{isBmap ? (
<></>
) : (
- // <BMapView
- // zoom={13}
- // ref={MapRef}
- // style={{ width: '100%', height: '110%' }}
- // center={new BMapGL.Point(104.066349, 30.658842)}
- // >
- // <Fragment>
- // {warnMark?.items?.map((item: any, index: number) => {
- // const point = [Number(item?.x_pos), Number(item?.y_pos)];
- // if (index === 0) {
- // return (
- // <CustomOverlay position={point}>
- // <div
- // className={styles.newWarn}
- // onClick={() => {
- // setDetailModalOpt({
- // open: true,
- // eventId: item?.riskId,
- // ...item,
- // });
- // }}
- // >
- // <img
- // src={require(`@/assets/images/SecurityServiceOverview/right/${
- // colorConfig[item?.riskLevel]?.icon
- // }.png`)}
- // alt=""
- // style={{ width: 111, height: 111 }}
- // />
- // </div>
- // </CustomOverlay>
- // );
- // }
- // return (
- // <CustomOverlay position={point}>
- // <img
- // src={require(`@/assets/images/SecurityServiceOverview/right/${
- // colorConfig[item?.riskLevel]?.icon
- // }.png`)}
- // alt=""
- // style={{ width: 92, height: 92 }}
- // onClick={() => {
- // setDetailModalOpt({
- // open: true,
- // eventId: item?.riskId,
- // ...item,
- // });
- // }}
- // />
- // </CustomOverlay>
- // );
- // })}
- // {mapMark?.items?.map((item: any, index: number) => {
- // const point = [Number(item?.x_pos), Number(item?.y_pos)];
-
- // return (
- // <CustomOverlay position={point}>
- // <img
- // src={
- // items?.find(
- // (it) => it.typeCode === searchParams.parentTypeCode,
- // )?.icon
- // }
- // alt=""
- // style={{ width: 52, height: 52 }}
- // onClick={() => {
- // setWayModalOpt({
- // open: true,
- // title: item?.parentData?.typeName,
- // parentCode: item?.parentTypeCode,
- // typeCode: item?.parentTypeCode,
- // ...item,
- // });
- // run({ id: item?.id });
- // }}
- // />
- // </CustomOverlay>
- // );
- // })}
- // </Fragment>
- // </BMapView>
- <div style={{ width: '100%', height: 960 }}>
+
+ <div style={{ width: '100%', height: 730 }}>
<CooglMap.MapView
zoom={13}
ref={MapRef}
- center={{ x: 104.066349, y: 30.658842 }}
+ center={{ x: 104.80, y: 30.5 }}
+ showCustomComponent={false}
>
<Fragment>
{mapMark?.items?.map((item: any, index: number) => {
@@ -331,8 +252,8 @@ const SafetyMap = () => {
eventId: '',
});
}}
- width={1144}
- height={740}
+ width={2650}
+ height={900}
>
{detailModalOpt?.open && (
<BaseInfo
diff --git a/src/pages/SecurityServiceOverview/SecurityState/FacilityWarn/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/FacilityWarn/index.tsx
index a1010f8180991143c16c7772846ac642257b623f..1d9441df15b69e80df3224a386896eff114b20cc 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/FacilityWarn/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/FacilityWarn/index.tsx
@@ -8,11 +8,11 @@ import StatusWiget from '../IndustryWarn/StatusWiget';
import styles from './index.less';
const FacilityWarn = ({
- data,
+
warnLevel,
setWarnLevel,
}: {
- data: any;
+
warnLevel: number;
setWarnLevel: (val: number) => void;
}) => {
@@ -50,27 +50,10 @@ const FacilityWarn = ({
},
],
});
- // //照明预警数陈彭接口
- // 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');
+
return {
typeCode: 'zm',
typeName: '照明',
@@ -79,19 +62,19 @@ const FacilityWarn = ({
children: [
{
typeCode: 'dl',
- typeName: '路灯设施',
+ typeName: '路灯灯杆',
parentCode: 'dlql',
total: zmm?.data?.data?.records?.[0]?.ldss ?? '--',
},
{
typeCode: 'dl',
- typeName: '检修作业',
+ typeName: '电力设施',
parentCode: 'dlql',
total: zmm?.data?.data?.records?.[0]?.jxzy ?? '--',
},
],
};
- }, [data, zmm]);
+ }, [ zmm]);
//户外广告牌
const ggzp = useMemo(() => {
// return data?.find((item: any) => item?.typeCode === 'ggzp');
@@ -103,13 +86,19 @@ const FacilityWarn = ({
children: [
{
typeCode: 'dl',
- typeName: '广告招牌设备',
+ typeName: '户外广告',
+ parentCode: 'dlql',
+ total: gg?.data?.data?.records?.[0]?.ggzpss ?? '--',
+ },
+ {
+ typeCode: 'dl',
+ typeName: '广告招牌',
parentCode: 'dlql',
total: gg?.data?.data?.records?.[0]?.ggzpss ?? '--',
},
],
};
- }, [data, gg]);
+ }, [ gg]);
//管廊
const gl = useMemo(() => {
// return data?.find((item: any) => item?.typeCode === 'gl');
@@ -121,43 +110,43 @@ const FacilityWarn = ({
children: [
{
typeCode: 'dl',
- typeName: '管廊数',
+ typeName: '管网',
parentCode: 'gl',
total: apgl?.data?.data?.records?.[0]?.glss ?? '--',
},
{
typeCode: 'dl',
- typeName: '有限空间作业',
+ typeName: '窖井',
parentCode: 'gl',
total: apgl?.data?.data?.records?.[0]?.yxkjzy ?? '--',
},
],
};
- }, [data, apgl]);
- //油烟
+ }, [apgl]);
+ //其他
const yyrq = useMemo(() => {
// return data?.find((item: any) => item?.typeCode === 'yyrq');
return {
typeCode: 'yyrq',
- typeName: '油烟燃气',
+ typeName: '其他',
parentCode: null,
total: '--',
children: [
{
typeCode: 'dl',
- typeName: '油烟检测点位',
+ typeName: '自建房',
parentCode: 'dlql',
total: '--',
},
{
typeCode: 'dl',
- typeName: '扬尘管控点位',
+ typeName: '交通设施',
parentCode: 'dlql',
total: '--',
},
],
};
- }, [data]);
+ }, []);
return (
<div className={styles.container}>
diff --git a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/index.tsx
index 2bc425b81cc0427c532250eff67bc40fb83d112b..43c266b7566852b7077ad1b0aeab4cb6c2e04922 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/IndustryWarn/index.tsx
@@ -7,11 +7,9 @@ import styles from './index.less';
import IndustryWiget from './IndustryWiget';
import StatusWiget from './StatusWiget';
const IndustryWarn = ({
- data,
warnLevel,
setWarnLevel,
}: {
- data: any;
warnLevel: number;
setWarnLevel: (val: number) => void;
}) => {
@@ -40,69 +38,18 @@ const IndustryWarn = ({
parentCode: 'dlql',
total: '0',
c: '20',
- children: [
- {
- typeCode: '342',
- typeName: '涵洞',
- parentCode: 'dl',
- total: '1',
- children: [],
- },
- ],
+ children: [],
},
{
typeCode: 'ql',
typeName: '桥梁',
parentCode: 'dlql',
total: '50',
- children: [
- {
- typeCode: '338',
- typeName: '跨河桥 ',
- parentCode: 'ql',
- total: '--',
- children: [],
- },
- {
- typeCode: '339',
- typeName: ' 跨线桥',
- parentCode: 'ql',
- total: '--',
- children: [],
- },
- {
- typeCode: '340',
- typeName: '互通式立交桥',
- parentCode: 'ql',
- total: '--',
- children: [],
- },
- {
- typeCode: '341',
- typeName: '人行天桥',
- parentCode: 'ql',
- total: '--',
- children: [],
- },
- ],
- },
- {
- typeCode: 'rwhw',
- typeName: '损坏管控点',
- parentCode: 'dlql',
- total: '0',
- children: [],
- },
- {
- typeCode: 'whzz',
- typeName: '维护作业',
- parentCode: 'dlql',
- total: '0',
children: [],
},
],
};
- }, [data]);
+ }, []);
//城市环卫
const hw = useMemo(() => {
// return data?.find((item: any) => item?.typeCode === 'hw');
@@ -114,7 +61,7 @@ const IndustryWarn = ({
children: [
{
typeCode: 'dl',
- typeName: '环卫设施',
+ typeName: '垃圾转运站',
parentCode: 'dlql',
total: hwgf?.data?.records?.[0]?.hwss ?? '--',
},
@@ -130,15 +77,9 @@ const IndustryWarn = ({
parentCode: 'dlql',
total: hwgf?.data?.records?.[0]?.hwcl ?? '--',
},
- {
- typeCode: 'dl',
- typeName: '环卫车辆',
- parentCode: 'dlql',
- total: hwgf?.data?.records?.[0]?.hwzl ?? '--',
- },
],
};
- }, [data, hwgf]);
+ }, [hwgf]);
//固废
const gf = useMemo(() => {
// return data?.find((item: any) => item?.typeCode === 'gf');
@@ -150,19 +91,25 @@ const IndustryWarn = ({
children: [
{
typeCode: 'dl',
- typeName: '固废设备',
+ typeName: '填埋场',
+ parentCode: 'dlql',
+ total: '--',
+ },
+ {
+ typeCode: 'dl',
+ typeName: '焚烧发电厂',
parentCode: 'dlql',
total: '--',
},
{
typeCode: 'dl',
- typeName: '生产作业',
+ typeName: '餐厨厂',
parentCode: 'dlql',
total: '--',
},
],
};
- }, [data]);
+ }, []);
return (
<div className={styles.container}>
@@ -200,7 +147,7 @@ const IndustryWarn = ({
</div>
</CustomCard>
<CustomCard
- title="城市环卫"
+ title="环卫作业"
width={353}
height={380}
style={{
diff --git a/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.less b/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.less
index 7e170294549e80743577dd32319891b25569b1d7..3a4b7fd2ecbfa3a6f7ae975615ef3d2c64e299a5 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.less
+++ b/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.less
@@ -86,4 +86,10 @@
}
}
-}
\ No newline at end of file
+}
+.modalWarp{
+ .searchWarp{
+ display: flex;
+ align-items: center;
+ }
+}
diff --git a/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx
index c6a579a7a2750af75a2b4babef5e269bd5a6c377..13d6e03503ff739bf7c1002a5de32f0735d9574b 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/MeetSafeguard/index.tsx
@@ -1,11 +1,26 @@
import PieChart from '@/components/PieChart';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
import styles from './index.less';
-import { values } from 'lodash';
-import { useRequest } from 'ahooks';
-import services from '@/services';
+import CommonTable from '@/components/CommonTable';
+import Modal from '@/components/HncyModal';
+import Tabs from '@/components/Tabs';
+import services from '@/services';
+import { SearchOutlined } from '@ant-design/icons';
+import { useDebounceFn, useRequest } from 'ahooks';
+import { Input } from 'antd';
const MeetSafeguard = () => {
+ // 弹窗
+ const [detailModalOpt, setDetailModalOpt] = useState<any>({
+ open: false,
+ title: '',
+ eventId: '',
+ });
+ const [searchData, setSearchData] = useState({
+ page: 1,
+ count: 10,
+ });
+
const { data } = useRequest(services.Information.getArticleList, {
defaultParams: [
{
@@ -17,7 +32,7 @@ const MeetSafeguard = () => {
},
],
});
-
+
const items = useMemo(() => {
return [
{
@@ -56,24 +71,165 @@ const MeetSafeguard = () => {
// ],
// },
// );
- const pieData=useMemo(()=>{
-return [{
- name:'应急防护物资',
- value:1234
-},
-{
- name:'运输保障物资',
- value:1234
-},
-{
- name:'生活救生物资',
- value:1234
-},
-{
- name:'其他物资',
- value:1234
-}]
- },[])
+ const pieData = useMemo(() => {
+ return [
+ {
+ name: '应急防护物资',
+ value: 1234,
+ },
+ {
+ name: '运输保障物资',
+ value: 1234,
+ },
+ {
+ name: '生活救生物资',
+ value: 1234,
+ },
+ {
+ name: '其他物资',
+ value: 1234,
+ },
+ ];
+ }, []);
+ const dataSource = [
+ {
+ key: '1',
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '2',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '3',
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '4',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '5',
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '6',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '7',
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '8',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '9',
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '10',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '11',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ ];
+
+ const columns = [
+ {
+ title: '序号',
+ dataIndex: 'name',
+ key: 'name',
+ width: 80,
+ ellipsis: true,
+ render: (text, record, index) => {
+ // 当前页码减1，乘以每页数量，再加上当前行的索引加1
+ return `${(searchData?.page - 1) * dataSource?.length + (index + 1)}`;
+ },
+ },
+ {
+ width: 180,
+ ellipsis: true,
+ title: '装备名称',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ width: 150,
+ ellipsis: true,
+ title: '型号/规格',
+ dataIndex: 'age',
+ key: 'age',
+ },
+ {
+ title: '数量',
+ dataIndex: 'age',
+ key: 'address',
+ width: 150,
+ ellipsis: true,
+ },
+ {
+ title: '用途',
+ dataIndex: 'age',
+ key: 'age',
+ width: 150,
+ ellipsis: true,
+ },
+ {
+ title: '存放地点',
+ dataIndex: 'age',
+ key: 'age',
+ width: 300,
+ ellipsis: true,
+ },
+ {
+ title: '联络人',
+ dataIndex: 'age',
+ key: 'age',
+ width: 120,
+ ellipsis: true,
+ },
+ {
+ title: '联系方式',
+ dataIndex: 'age',
+ key: 'age',
+ width: 150,
+ ellipsis: true,
+ },
+ ];
+ const { run: InputChange } = useDebounceFn(
+ (e) => {
+ console.log(e.target.value);
+ },
+ {
+ wait: 500,
+ },
+ );
return (
<div className={styles.container}>
<div className={styles.tag}>应急保障</div>
@@ -81,7 +237,16 @@ return [{
<div className={styles.leftWarp}>
{items?.map((item) => {
return (
- <div className={styles.items}>
+ <div
+ className={styles.items}
+ onClick={() => {
+ setDetailModalOpt({
+ open: true,
+ title: '应急保障',
+ eventId: '',
+ });
+ }}
+ >
<div className={styles.icon}>
<img src={item.icon} alt="" className={styles.img} />
</div>
@@ -101,11 +266,72 @@ return [{
chartStyle={{ width: 125, height: 134 }}
labelClassName={styles.labelClassName}
labelStyle={{ height: 175, overflow: 'auto', width: 150 }}
- data={pieData||[]}
+ data={pieData || []}
/>
</div>
</div>
</div>
+ <Modal
+ open={detailModalOpt?.open}
+ title={detailModalOpt.title}
+ onCancel={() => {
+ setDetailModalOpt({
+ open: false,
+ title: '事件详情',
+ eventId: '',
+ });
+ }}
+ width={1550}
+ height={850}
+ >
+ <div className={styles.modalWarp}>
+ <div className={styles.searchWarp}>
+ <Tabs
+ size="large"
+ defaultActiveKey="1"
+ centered
+ items={[
+ { key: '1', label: '应急防护物资' },
+ { key: '2', label: '运输保障物资' },
+ { key: '3', label: '生活救生物资' },
+ { key: '4', label: '其他物资' },
+ ]}
+ onChange={(e) => {}}
+ />
+ <Input
+ style={{
+ width: 250,
+ background: 'rgba(50, 111, 167, 0.3)',
+ borderRadius: 20,
+ border: 'rgb(50, 111, 167)',
+ marginLeft: 20,
+ }}
+ onChange={InputChange}
+ placeholder="请输入名称搜索"
+ suffix={<SearchOutlined />}
+ ></Input>
+ </div>
+ <CommonTable
+ dataSource={dataSource}
+ columns={columns}
+ scroll={{ x: 700, y: 550 }}
+ pagination={{
+ total: dataSource?.length,
+ pageSize: searchData?.count,
+ showQuickJumper: false,
+ showSizeChanger: false,
+ onChange: (page, pageSize) => {
+ setSearchData({
+ ...searchData,
+ page: page,
+ count: pageSize,
+ });
+ },
+ // hideOnSinglePage: true,
+ }}
+ />
+ </div>
+ </Modal>
</div>
);
};
diff --git a/src/pages/SecurityServiceOverview/SecurityState/RightLayout/RiskNotice/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/RightLayout/RiskNotice/index.tsx
index 643678b3cb3c137ca852f99819afd2126bdf52d6..0a630a828ea537de86ace8e763ebbe2565dec762 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/RightLayout/RiskNotice/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/RightLayout/RiskNotice/index.tsx
@@ -221,8 +221,8 @@ const RiskNotice: React.FC = () => {
eventId: '',
});
}}
- width={1144}
- height={740}
+ width={2650}
+ height={900}
>
{detailModalOpt?.open && (
<BaseInfo
diff --git a/src/pages/SecurityServiceOverview/SecurityState/RightLayout/WeatherCard/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/RightLayout/WeatherCard/index.tsx
index 0dcde3b3230a7187d7ab1a44a8ba2ae78cffa6a9..beb0839c56d7690bf31158b681f36fd618f75bf0 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/RightLayout/WeatherCard/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/RightLayout/WeatherCard/index.tsx
@@ -2,7 +2,10 @@ import { RightOutlined } from '@ant-design/icons';
import styles from './index.less';
import { Modal } from 'antd';
import { useState } from 'react';
+import SafetyModal from '../../SafetyTips/SafetyModal';
const WeatherCard = () => {
+ const [selectedCarouselItem, setSelectedCarouselItem] = useState<any>(null);
+ const [isModalOpen, setIsModalOpen] = useState(false);
const [riskModalOpt, setRiskModalOpt] = useState<{
open: boolean;
title: string;
@@ -16,39 +19,52 @@ const WeatherCard = () => {
<div className={styles.title}>
气象预警<div className={styles.warnCount}>11</div>
</div>
- <div className={styles.link}>
+ {/* <div className={styles.link}>
<RightOutlined style={{ color: 'white' }} />
- </div>
+ </div> */}
</div>
<div className={styles.content}>
{[
{
icon: '',
- label: '简阳市 大风蓝色预警大风蓝色预警',
+ title: '简阳市 大风蓝色预警大风蓝色预警',
time: '2024-10-10 12:20:20',
},
{
icon: '',
- label: '简阳市 大风蓝色预警',
+ title: '简阳市 大风蓝色预警',
time: '2024-10-10 12:20:20',
},
{
icon: '',
- label: '简阳市 大风蓝色预警',
+ title: '简阳市 大风蓝色预警',
time: '2024-10-10 12:20:20',
},
]?.map((item) => {
return (
- <div className={styles.items}>
+ <div className={styles.items} onClick={()=>{
+ setSelectedCarouselItem(item);
+ setIsModalOpen(true);
+ }}>
<img src="" alt="" className={styles.img} />
<div className={styles.rwarp}>
- <div className={styles.title}>{item?.label}</div>
+ <div className={styles.title}>{item?.title}</div>
<div className={styles.time}>{item?.time}</div>
</div>
</div>
);
})}
</div>
+ {selectedCarouselItem && (
+ <SafetyModal
+ data={selectedCarouselItem}
+ open={isModalOpen}
+ onCancel={()=>{
+ setIsModalOpen(false);
+ setSelectedCarouselItem(null);
+ }}
+ />
+ )}
{/**风险预警 */}
<Modal
open={riskModalOpt?.open}
diff --git a/src/pages/SecurityServiceOverview/SecurityState/SafetyAccident/index.less b/src/pages/SecurityServiceOverview/SecurityState/SafetyAccident/index.less
index 3edb99766d766ffae8b5e42e29f4dd94cdcf54c5..359def962559ffe89f372f6d31fa99a372241480 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/SafetyAccident/index.less
+++ b/src/pages/SecurityServiceOverview/SecurityState/SafetyAccident/index.less
@@ -9,7 +9,7 @@
.tag {
padding: 0 20px;
background-color: rgba(62, 146, 199, 0.401);
- width: 220px;
+ width: 170px;
height: 50px;
border-radius: 17px 0px 25.5px 0px;
color: rgb(255, 255, 255);
diff --git a/src/pages/SecurityServiceOverview/SecurityState/SafetyAccident/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/SafetyAccident/index.tsx
index 1ee4119151b9b21295f840ca64d6d5a8c27a9824..b5ed85843df60227c4764cb7e18a6476b629a2db 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/SafetyAccident/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/SafetyAccident/index.tsx
@@ -35,7 +35,7 @@ const SafetyAccident = () => {
return (
<div className={styles.container}>
- <div className={styles.tag}>安全事故通报</div>
+ <div className={styles.tag}>安全事故</div>
{data?.data?.records?.length? <div className={styles.content}>
{data?.data?.records?.map((item: any) => {
diff --git a/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.less b/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.less
index 73febf7d3303396a001d8c035d486591b4674595..51e5bda4f7e7d3bffa7ff59522c98f88f6fcf2ed 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.less
+++ b/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.less
@@ -9,7 +9,7 @@
.tag {
padding: 0 20px;
background-color: rgba(62, 146, 199, 0.401);
- width: 220px;
+ width: 170px;
height: 50px;
border-radius: 17px 0px 25.5px 0px;
color: rgb(255, 255, 255);
diff --git a/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.tsx
index 6de7561948d8c5f8f6ec0cb5ed855f8d36860b10..d9d1a1947011824e5b8239d94894c684f32abaed 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/SafetyTips/index.tsx
@@ -3,8 +3,8 @@ import { useRequest } from 'ahooks';
import { Carousel, Typography } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';
-import SafetyModal from './SafetyModal';
import styles from './index.less';
+import SafetyModal from './SafetyModal';
import SafetyTipItem from './SafetyTipItem';
const { Paragraph } = Typography;
@@ -24,7 +24,7 @@ const SafetyTips = () => {
},
],
});
-
+
const { data } = useRequest(services.Information.getArticleList, {
defaultParams: [
{
@@ -37,7 +37,6 @@ const SafetyTips = () => {
],
});
-
const handleCarouselItemClick = (item: any) => {
setSelectedCarouselItem(item);
setIsModalOpen(true);
@@ -50,12 +49,15 @@ const SafetyTips = () => {
return (
<div className={styles.container}>
- <div className={styles.tag}>安全工作提示</div>
+ <div className={styles.tag}>安全工作</div>
<div className={styles.content}>
<Carousel autoplay style={{ width: 274 }}>
{BigImgData?.data?.records?.map((item: any) => {
return (
- <div className={styles.carouselItem} onClick={() => handleCarouselItemClick(item)}>
+ <div
+ className={styles.carouselItem}
+ onClick={() => handleCarouselItemClick(item)}
+ >
<img src={item?.coverList?.[0]} alt="" className={styles.img} />
<div className={styles.desc}>
<Paragraph
diff --git a/src/pages/SecurityServiceOverview/SecurityState/index.tsx b/src/pages/SecurityServiceOverview/SecurityState/index.tsx
index 52a9d27f4bf51237ed349e37861c2f26addf1222..c0c6130ce63fa86f5b27573e9cf7cd975966ede7 100644
--- a/src/pages/SecurityServiceOverview/SecurityState/index.tsx
+++ b/src/pages/SecurityServiceOverview/SecurityState/index.tsx
@@ -20,7 +20,7 @@ export const StateMap = {
};
const SecurityState = () => {
- const { data: tree } = useRequest(services.CityRiskApi.getTree);
+
const [warnLevel, setWarnLevel] = useState(2);
return (
@@ -28,8 +28,8 @@ const SecurityState = () => {
{/* 左侧 */}
<div className={styles.leftWrap}>
<SecurityCqi warnLevel={warnLevel}/>
- <IndustryWarn data={tree} warnLevel={warnLevel} setWarnLevel={setWarnLevel}/>
- <FacilityWarn data={tree} warnLevel={warnLevel} setWarnLevel={setWarnLevel}/>
+ <IndustryWarn warnLevel={warnLevel} setWarnLevel={setWarnLevel}/>
+ <FacilityWarn warnLevel={warnLevel} setWarnLevel={setWarnLevel}/>
</div>
{/* 地图 */}
<div className={styles.mapCenter}>
diff --git a/src/pages/SecurityServiceOverview/components/BaseInfo/Casecirculation/index.tsx b/src/pages/SecurityServiceOverview/components/BaseInfo/Casecirculation/index.tsx
index 0da8741b1a571698ed060ce441965bf4f2045a93..37b9e0e887a8d2d471fe87c52739e21903a99937 100644
--- a/src/pages/SecurityServiceOverview/components/BaseInfo/Casecirculation/index.tsx
+++ b/src/pages/SecurityServiceOverview/components/BaseInfo/Casecirculation/index.tsx
@@ -120,7 +120,7 @@ const CulationComponent = forwardRef<CulationComponentRef, culationProps>(
align="center"
>
<div className={styles.titleWrap}>
- <span>办理经过</span>
+ <span>风险处置流程</span>
</div>
<Space>
diff --git a/src/pages/SecurityServiceOverview/components/BaseInfo/DetMap/index.less b/src/pages/SecurityServiceOverview/components/BaseInfo/DetMap/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..05e1cc68135cd9f08d40e8f05110c99597601100
--- /dev/null
+++ b/src/pages/SecurityServiceOverview/components/BaseInfo/DetMap/index.less
@@ -0,0 +1,6 @@
+.container{
+ width: 1600px;
+ height: 100%;
+ overflow: hidden;
+
+}
\ No newline at end of file
diff --git a/src/pages/SecurityServiceOverview/components/BaseInfo/DetMap/index.tsx b/src/pages/SecurityServiceOverview/components/BaseInfo/DetMap/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a559de28ef6af06520192ec48b17797ac5049c1e
--- /dev/null
+++ b/src/pages/SecurityServiceOverview/components/BaseInfo/DetMap/index.tsx
@@ -0,0 +1,130 @@
+import { CSSProperties, Fragment, useRef, useState } from 'react';
+// import { CustomOverlay, Polygon } from 'react-bmapgl';
+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 CooglMap from '@/components/CooglMap';
+import services from '@/services';
+import { useRequest } from '@umijs/max';
+import { Flex } from 'antd';
+
+import styles from './index.less';
+const DetMap = () => {
+ const colorConfig: Record<
+ string,
+ {
+ color: CSSProperties['color'];
+ bg: string;
+ icon: string;
+ }
+ > = {
+ 红色风险: {
+ //红色风险
+ color: '#FFBCBC',
+ bg: redBg,
+ icon: 'redIcon',
+ },
+ 橙色风险: {
+ //橙色风险
+ color: '#FDDFCE',
+ bg: orangeBg,
+ icon: 'orangeIcon',
+ },
+ 黄色风险: {
+ //黄色风险
+ color: '#FFE892',
+ bg: yellowBg,
+ icon: 'yellowIcon',
+ },
+ 一般风险: {
+ //一般风险
+ color: '#BFE4FF',
+ bg: blueBg,
+ icon: 'blueIcon',
+ },
+ };
+
+ const MapRef = useRef<any>();
+
+ const [searchParams, setSearchParams] = useState({
+ parentTypeCode: 'dlql',
+ lat: 30.680193,
+ lon: 104.075555,
+ distance: 1000,
+ page: 1,
+ count: 100,
+ });
+ // 事件详情弹窗
+ const [detailModalOpt, setDetailModalOpt] = useState<any>({
+ open: false,
+ title: '',
+ eventId: '',
+ });
+ const [wayModalOpt, setWayModalOpt] = useState<{
+ open: boolean;
+ title: string;
+ }>({
+ open: false,
+ title: '道路桥梁情况',
+ });
+ const { data: mapMark } = useRequest(
+ () => services.CityRiskApi.findListForMap(searchParams),
+ {
+ refreshDeps: [searchParams],
+ },
+ );
+ //safetyRiskEventMap
+ const { data: warnMark } = useRequest(
+ () => services.CityRiskApi.safetyRiskEventMap(searchParams),
+ {
+ refreshDeps: [searchParams],
+ },
+ );
+
+
+ return (
+ <div className={styles.container}>
+ <div style={{ width: '100%', height: 500 }}>
+ <CooglMap.MapView
+ zoom={13}
+ ref={MapRef}
+ // center={{ x: 104.066349, y: 30.658842 }}
+ center={{ x: 104.9, y: 30.5 }}
+ showCustomComponent={false}
+ >
+ <Fragment>
+ {warnMark?.items?.map((item: any, index: number) => {
+ const point = [Number(item?.x_pos), Number(item?.y_pos)];
+
+ return (
+ <CooglMap.CustomOverlay
+ key={index}
+ position={point}
+ onSet={() => {
+ setDetailModalOpt({
+ open: true,
+ eventId: item?.riskId,
+ ...item,
+ });
+ }}
+ >
+ <img
+ data-event-key="set"
+ src={require(`@/assets/images/SecurityServiceOverview/right/${
+ colorConfig[item?.riskLevel]?.icon
+ }.png`)}
+ alt=""
+ style={{ width: 52, height: 52, zIndex: 999 }}
+ />
+ </CooglMap.CustomOverlay>
+ );
+ })}
+ </Fragment>
+ </CooglMap.MapView>
+ </div>
+ </div>
+ );
+};
+
+export default DetMap;
diff --git a/src/pages/SecurityServiceOverview/components/BaseInfo/index.less b/src/pages/SecurityServiceOverview/components/BaseInfo/index.less
index ad7aed2559e6693621921dde11a549a3d112ba36..6a6e42995138af4bd22d318424cb85389bf34194 100644
--- a/src/pages/SecurityServiceOverview/components/BaseInfo/index.less
+++ b/src/pages/SecurityServiceOverview/components/BaseInfo/index.less
@@ -1,14 +1,16 @@
.baseInfoWrap {
width: 100%;
height: 100%;
+ display: flex;
+ justify-content: space-between;
}
-.left {
- width: 410px;
- height: 100%;
- position: relative;
- display: flex;
- flex-direction: column;
+.imgWarp {
+ position: absolute;
+ left: -550px;
+ z-index: 9999;
+
+ width: 504px;
.tag {
position: absolute;
@@ -31,6 +33,35 @@
overflow: hidden;
}
+}
+
+.left {
+ width: 540px;
+ height: 100%;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+
+
+ .lineWarp {
+ width: 540px;
+ height: 406px;
+ border-radius: 20px;
+ background-color: rgba(57, 122, 183, 0.325);
+ padding: 20px;
+
+ .titleWarp {
+ width: 304px;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(13, 50, 84, 0.487);
+ border-radius: 10px;
+ font-size: 20px;
+ }
+ }
+
.info {
border-radius: 20px;
height: 100%;
@@ -83,6 +114,7 @@
}
.right {
- flex: 1;
+
height: 100%;
+ width: 619px;
}
\ No newline at end of file
diff --git a/src/pages/SecurityServiceOverview/components/BaseInfo/index.tsx b/src/pages/SecurityServiceOverview/components/BaseInfo/index.tsx
index 4ab84052756a1f3cdccc5e0e0f75cbc4d40e4ed0..561ed1250e9128a4f877905e0c8b7da217933ba6 100644
--- a/src/pages/SecurityServiceOverview/components/BaseInfo/index.tsx
+++ b/src/pages/SecurityServiceOverview/components/BaseInfo/index.tsx
@@ -3,9 +3,11 @@ import LabelImgText from '@/components/LabelImgText';
import services from '@/services';
import { imageOptions } from '@/utils/comm';
import { useRequest } from '@umijs/max';
-import { Carousel, Flex, Image } from 'antd';
+import { Carousel, Image } from 'antd';
import Casecirculation from './Casecirculation';
+import DetMap from './DetMap';
import styles from './index.less';
+import LineCharts from '../../SecurityState/SecurityCqi/LineCharts';
const BaseInfo: React.FC<{
eventId: string;
detail: any;
@@ -36,8 +38,8 @@ const BaseInfo: React.FC<{
fontSize: 16,
};
return (
- <Flex className={styles.baseInfoWrap} gap={20}>
- <div className={styles.left}>
+ <div className={styles.baseInfoWrap}>
+ <div className={styles.imgWarp}>
<span className={styles.tag}>{data?.report_object}</span>
<Carousel autoplay autoplaySpeed={5000}>
{[data?.photosZWW]?.map((item) => {
@@ -55,6 +57,14 @@ const BaseInfo: React.FC<{
);
})}
</Carousel>
+ </div>
+ <div className={styles.left}>
+ <div className={styles.lineWarp}>
+<div className={styles.titleWarp}>
+感知源上报-东侧位移监测设备
+</div>
+<LineCharts></LineCharts>
+ </div>
<div className={styles.info}>
<LabelImgText
label={'预警时间：'}
@@ -63,7 +73,7 @@ const BaseInfo: React.FC<{
labelStyle={labelStyle}
/>
<LabelImgText
- label={'预警地址：'}
+ label={'持续时长'}
value={data?.position}
valueStyle={valueStyle}
labelStyle={labelStyle}
@@ -73,6 +83,12 @@ const BaseInfo: React.FC<{
value={data?.warning_context}
valueStyle={valueStyle}
labelStyle={labelStyle}
+ />
+ <LabelImgText
+ label={'研判分析'}
+ value={data?.warning_context}
+ valueStyle={valueStyle}
+ labelStyle={labelStyle}
/>
{/* <h4>位移量（CM）</h4>
<Flex className={styles.monitorWrap} gap={15} align="center">
@@ -88,9 +104,10 @@ const BaseInfo: React.FC<{
</Flex> */}
</div>
</div>
+ <DetMap />
<div className={styles.right}>
<Casecirculation
- casecirculationRecordData={data?.recordList?.map((item) => ({
+ casecirculationRecordData={data?.recordList?.map((item: any) => ({
...item,
remark: item?.remarks,
operationType: item?.dealingStatus,
@@ -101,7 +118,7 @@ const BaseInfo: React.FC<{
}))}
/>
</div>
- </Flex>
+ </div>
);
};
diff --git a/src/pages/SecurityServiceOverview/components/IndustrySign/index.less b/src/pages/SecurityServiceOverview/components/IndustrySign/index.less
index cd3c7fab2da2a4e1e53002a5ebfcac138eecbf76..c8bfbcf0cf8bdebd607c195294d07bcd67f5d2d8 100644
--- a/src/pages/SecurityServiceOverview/components/IndustrySign/index.less
+++ b/src/pages/SecurityServiceOverview/components/IndustrySign/index.less
@@ -72,6 +72,9 @@
}
}
}
+ .searchWarp{
+ display: flex;
+ }
:global {
.ant-tabs {
.ant-tabs-nav {
diff --git a/src/pages/SecurityServiceOverview/components/IndustrySign/index.tsx b/src/pages/SecurityServiceOverview/components/IndustrySign/index.tsx
index 9c8c89b593268a4cf9764e771f7f0b94c4c2b71b..aa11887e5973db494e42ee1ed6858b01e6a07bfb 100644
--- a/src/pages/SecurityServiceOverview/components/IndustrySign/index.tsx
+++ b/src/pages/SecurityServiceOverview/components/IndustrySign/index.tsx
@@ -1,17 +1,17 @@
+import CommonTable from '@/components/CommonTable';
import Modal from '@/components/HncyModal';
+import Tabs from '@/components/Tabs';
import BaseCard from '@/pages/Common/components/BaseCard';
-import LineCharts from '@/pages/SecurityServiceOverview/SecurityState/SecurityCqi/LineCharts';
import services from '@/services';
-import { getCqiStatusStyle } from '@/utils/ui';
+import { SearchOutlined } from '@ant-design/icons';
import { useModel } from '@umijs/max';
-import { useRequest } from 'ahooks';
-import { Flex } from 'antd';
+import { useDebounceFn, useRequest } from 'ahooks';
+import { Flex, Input } from 'antd';
import { useState } from 'react';
import { colorConfig } from '../../SecurityState/RightLayout/RiskNotice';
import BaseInfo from '../BaseInfo';
-import EventPicList from '../EventPicList';
import styles from './index.less';
-
+import { log } from 'echarts/types/src/util/log.js';
/**
*
* @description 行业体征部分
@@ -29,6 +29,11 @@ const IndustrySign = ({ param }: { param: any }) => {
yyrq: '208', //油烟
zm: '203', //照明
};
+ const [searchData, setSearchData] = useState({
+ page: 1,
+ count: 10,
+ });
+
//事件列表
const [listData, setListData] = useState<any>({
items: [],
@@ -103,10 +108,138 @@ const IndustrySign = ({ param }: { param: any }) => {
</Flex>
);
};
+ const dataSource = [
+ {
+ key: '1',
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '2',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '3',
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '4',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '5',
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '6',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '7',
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '8',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '9',
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '10',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ {
+ key: '11',
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号',
+ },
+ ];
+
+ const columns = [
+ {
+ title: '序号',
+ dataIndex: 'name',
+ key: 'name',
+ width: 80,
+ ellipsis: true,
+ render: (text, record, index) => {
+ // 当前页码减1，乘以每页数量，再加上当前行的索引加1
+ return `${(searchData?.page - 1) * dataSource?.length + (index + 1)}`;
+ },
+ },
+ {
+ width: 180,
+ ellipsis: true,
+ title: '桥梁名称',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ width: 150,
+ ellipsis: true,
+ title: '桥梁类型',
+ dataIndex: 'age',
+ key: 'age',
+ },
+ {
+ title: '状态',
+ dataIndex: 'address',
+ key: 'address',
+ width: 80,
+ render: () => {
+ return;
+ },
+ },
+ {
+ title: '管理单位',
+ dataIndex: 'age',
+ key: 'age',
+ width: 200,
+ ellipsis: true,
+ },
+ {
+ title: '位置',
+ dataIndex: 'age',
+ key: 'age',
+ width: 300,
+ ellipsis: true,
+ },
+ ];
+ const { run:InputChange } = useDebounceFn(
+ (e) => {
+ console.log(e.target.value);
+
+ },
+ {
+ wait: 500,
+ },
+ );
return (
<Flex gap={28} className={styles.wrap}>
<Flex vertical gap={15} className={styles.left}>
- <BaseCard
+ {/* <BaseCard
title={param?.title+"指数"}
height={304}
@@ -158,9 +291,33 @@ const IndustrySign = ({ param }: { param: any }) => {
}}
/>
</div>
+ </BaseCard> */}
+ <BaseCard
+ title={param?.title + '概况'}
+ height={300}
+ style={{
+ paddingTop: 20,
+ }}
+ >
+ <div className={styles.list}>
+ {param?.parentData?.children?.map((item, index) => (
+ <Flex
+ className={styles.listItem}
+ justify="space-between"
+ align="center"
+ key={index}
+ >
+ <span className={styles.name}>{item?.typeName}</span>
+ <span>
+ <span className={styles.num}>{item.total}</span>
+ <span>个</span>
+ </span>
+ </Flex>
+ ))}
+ </div>
</BaseCard>
<BaseCard
- title={param?.title+"风险源"}
+ title={param?.title + '类型'}
height={394}
style={{
paddingTop: 20,
@@ -185,46 +342,51 @@ const IndustrySign = ({ param }: { param: any }) => {
</BaseCard>
</Flex>
<div className={styles.right}>
- {/* <Flex className={styles.top} justify='space-between'>
- <Flex
- align='center'
- justify='space-between'
- className={styles.card}
- style={{ background: 'rgba(39, 211, 134, 0.2)' }}
- >
- <span>
- <img src={a3} alt="" />
- <span className={styles.name}>桥梁管理指数</span>
- </span>
- <span className={styles.num} style={{ color: '#57EF58' }}>99.5</span>
- </Flex>
- <Flex
- align='center'
- justify='space-between'
- className={styles.card}
- style={{ background: 'rgba(255, 188, 130, 0.2)' }}
- >
- <span>
- <img src={a2} alt="" />
- <span className={styles.name}>道路管理指数</span>
- </span>
- <span className={styles.num} style={{ color: '#FFA250' }}>99.5</span>
- </Flex>
- <Flex
- align='center'
- justify='space-between'
- className={styles.card}
- style={{ background: 'rgba(130, 173, 255, 0.2)' }}
- >
- <span>
- <img src={a1} alt="" />
- <span className={styles.name}>占道挖掘指数</span>
- </span>
- <span className={styles.num} style={{ color: '#447FF0' }}>99.5</span>
- </Flex>
- </Flex> */}
- {/* <Tabs size="large" defaultActiveKey="1" centered items={tabItems} /> */}
- <EventPicList
+ <div className={styles.searchWarp}>
+ <Tabs
+ size="large"
+ defaultActiveKey="1"
+ centered
+ items={[
+ { key: '1', label: '全部' },
+ { key: '2', label: '异常' },
+ { key: '3', label: '正常' },
+ ]}
+ onChange={(e) => {}}
+ />
+ <Input
+ style={{
+ width: 250,
+ background: 'rgba(50, 111, 167, 0.3)',
+ borderRadius: 20,
+ border: 'rgb(50, 111, 167)',
+ marginLeft: 20,
+ }}
+ onChange={InputChange}
+ placeholder="请输入名称搜索"
+ suffix={<SearchOutlined />}
+ ></Input>
+ </div>
+ <CommonTable
+ dataSource={dataSource}
+ columns={columns}
+ scroll={{ x: 700, y: 550 }}
+ pagination={{
+ total: dataSource?.length,
+ pageSize: searchData?.count,
+ showQuickJumper: false,
+ showSizeChanger: false,
+ onChange: (page, pageSize) => {
+ setSearchData({
+ ...searchData,
+ page: page,
+ count: pageSize,
+ });
+ },
+ // hideOnSinglePage: true,
+ }}
+ />
+ {/* <EventPicList
listData={listData}
listHeight={700}
setParams={(data) => {
@@ -237,7 +399,7 @@ const IndustrySign = ({ param }: { param: any }) => {
...details,
});
}}
- />
+ /> */}
</div>
{/* 事件详情 */}
<Modal
@@ -250,8 +412,8 @@ const IndustrySign = ({ param }: { param: any }) => {
eventId: '',
});
}}
- width={1144}
- height={740}
+ width={2650}
+ height={900}
>
{detailModalOpt?.open && (
<BaseInfo
diff --git a/src/pages/SecurityServiceOverview/components/RiskWarn/index.tsx b/src/pages/SecurityServiceOverview/components/RiskWarn/index.tsx
index d6cfa7baa9fa79426025f834ddcbcbbe756d56ef..9064a4e6963ffed943d63e123c0c04078854f5ae 100644
--- a/src/pages/SecurityServiceOverview/components/RiskWarn/index.tsx
+++ b/src/pages/SecurityServiceOverview/components/RiskWarn/index.tsx
@@ -118,8 +118,8 @@ const RiskWarn = ({ riskModalOpt }: { riskModalOpt: any }) => {
eventId: '',
});
}}
- width={1144}
- height={740}
+ width={2650}
+ height={900}
>
{detailModalOpt?.open && (
<BaseInfo