diff --git a/src/app.ts b/src/app.ts index 382d9eb4ee761980af9b777666bc582c187c3225..a5a11d80ab1298838bb07d219ffe2e8ee5a1e241 100644 --- a/src/app.ts +++ b/src/app.ts @@ -7,8 +7,7 @@ import type { RequestConfig } from '@umijs/max'; import { Base64 } from 'js-base64'; import services from './services'; import { getUrlQuery } from './utils/comm'; -import { setCookie } from './utils/cookie'; -import { checkBeforeLogin } from './utils/loginUtil/SSO'; +import { setSession } from './utils/session'; //request 配置 export const request: RequestConfig = { @@ -21,13 +20,7 @@ export const request: RequestConfig = { // 接收登录参数 let token = getUrlQuery('access_token'); if (token) { - setCookie('token', Base64.decode(token)); -} - -export function render(oldRender: () => void) { - checkBeforeLogin(() => { - oldRender(); - }); + setSession('token', Base64.decode(token)); } export async function getInitialState(): Promise { @@ -35,7 +28,7 @@ export async function getInitialState(): Promise { try { const userPermDataResp = await services.CommQuery.getUserDataPermission(); if (userPermDataResp.code === 200) { - areaId = (userPermDataResp?.data as any)?.areaGrid[0]; + areaId = userPermDataResp?.data?.areaGrid[0]; } } catch (error) { console.error('获取初始数据出错：', error); diff --git a/src/assets/images/SecurityServiceOverview/localtionIcon.png b/src/assets/images/SecurityServiceOverview/localtionIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..20af03c7973b7286c7df83affb8dea7ceede53f9 Binary files /dev/null and b/src/assets/images/SecurityServiceOverview/localtionIcon.png differ diff --git a/src/assets/images/closeBtn.png b/src/assets/images/closeBtn.png new file mode 100644 index 0000000000000000000000000000000000000000..0f5fa106c5516f89f0502e8681c18351bf2e077a Binary files /dev/null and b/src/assets/images/closeBtn.png differ diff --git a/src/assets/images/newMain/rightBack.png b/src/assets/images/newMain/rightBack.png new file mode 100644 index 0000000000000000000000000000000000000000..9ecfafeb43630cff13c5cd123321ef8e3e0d1002 Binary files /dev/null and b/src/assets/images/newMain/rightBack.png differ diff --git a/src/assets/images/urbanSituation/bottom2.png b/src/assets/images/urbanSituation/bottom2.png new file mode 100644 index 0000000000000000000000000000000000000000..f8c896d410b96bce84d17fc26b01a2f9c14b567b Binary files /dev/null and b/src/assets/images/urbanSituation/bottom2.png differ diff --git a/src/components/CommonTable/index.less b/src/components/CommonTable/index.less index 6e452efd44c006b4e293122b5b8268cfbf5f9477..ae120539fc703157d202b73d8c063678e5d520fe 100644 --- a/src/components/CommonTable/index.less +++ b/src/components/CommonTable/index.less @@ -10,15 +10,15 @@ ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ - border-radius: 10px; - background: #4f98e2; + border-radius: 10px !important; + background: #4f98e2 !important; } ::-webkit-scrollbar-track { /*滚动条里面轨道*/ - box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); - border-radius: 10px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; + border-radius: 10px !important; } diff --git a/src/components/ModeSwitch/index.css b/src/components/ModeSwitch/index.css index fb3316e23d142ec9b37b3e93df5b3a7fbe3f5a4e..8c1984fbcdcd76df3b6ddcbf8b62ec30c9a71987 100644 --- a/src/components/ModeSwitch/index.css +++ b/src/components/ModeSwitch/index.css @@ -1,7 +1,7 @@ .container { width: 257px; - height: 40px; - border-radius: 25px; + border-radius: 29px; + height: 58px; background: #123D66; position: relative; cursor: pointer; @@ -10,8 +10,8 @@ .container .slider { position: absolute; width: 131px; - height: 40px; - border-radius: 25px; + border-radius: 29px; + height: 58px; background: linear-gradient(180deg, #1cc0ff, #5294ff 100%); transition: transform 0.3s ease; transform: translateX(0); @@ -32,7 +32,7 @@ width: 80px; font-size: 20px; font-family: '钉钉进步体'; - font-weight: 400; + font-weight: 700; line-height: 24px; text-align: center; transition: color 0.3s ease; diff --git a/src/components/ModeSwitch/index.less b/src/components/ModeSwitch/index.less index 3c8c8e168961cdff23dcc9d04f0ce2c0fd010104..ecbea9f9d942ed137e67c552c18e75e6c1dfaff2 100644 --- a/src/components/ModeSwitch/index.less +++ b/src/components/ModeSwitch/index.less @@ -1,7 +1,9 @@ .container { width: 257px; - height: 40px; - border-radius: 25px; + border-radius: 29px; + height: 58px; + // height: 40px; + // border-radius: 25px; background: #123D66; position: relative; cursor: pointer; @@ -10,8 +12,10 @@ .slider { position: absolute; width: 131px; - height: 40px; - border-radius: 25px; + border-radius: 29px; + height: 58px; + // height: 40px; + // border-radius: 25px; background: linear-gradient(180deg, rgb(28, 192, 255), rgb(82, 148, 255) 100%); transition: transform 0.3s ease; transform: translateX(0); @@ -34,7 +38,7 @@ width: 80px; font-size: 20px; font-family: '钉钉进步体'; - font-weight: 400; + font-weight: 700; line-height: 24px; text-align: center; transition: color 0.3s ease; diff --git a/src/components/ModeSwitch/index.tsx b/src/components/ModeSwitch/index.tsx index 0feb5f43042ee35d53bd3793e5ed0417f3f385a5..5a30f7563368d1e189f577ed4a8c9bb864112b94 100644 --- a/src/components/ModeSwitch/index.tsx +++ b/src/components/ModeSwitch/index.tsx @@ -10,10 +10,10 @@ interface ModeSwitchProps { const ModeSwitch: React.FC = ({ checked, onChange }) => { return (
onChange(!checked)}> -
+
- 专题模式 - 统览模式 + 统览模式 + 专题模式
); diff --git a/src/layouts/Header/index.css b/src/layouts/Header/index.css index d1098d7e9da4d784e407c8b1a349c366b3a86d0a..bfa9c9341f0d7eb20fb408d9a576ca5bcd6cea5a 100644 --- a/src/layouts/Header/index.css +++ b/src/layouts/Header/index.css @@ -66,14 +66,3 @@ .container .rightCard:active { transform: scale(0.95); } -.container .modeSwitch { - min-width: 100px; - height: 32px; -} -.container .modeSwitch .ant-switch-inner { - font-size: 20px; - font-weight: 700; -} -.container .modeSwitch.ant-switch-checked { - background: #1890ff; -} diff --git a/src/layouts/Header/index.less b/src/layouts/Header/index.less index 0066b0da12d5e2adb19a2c0b4912c8e3a49d2d16..a5ced47947e3db6364ffb1555b2ce91816476633 100644 --- a/src/layouts/Header/index.less +++ b/src/layouts/Header/index.less @@ -85,19 +85,4 @@ } } - .modeSwitch { - min-width: 100px; - height: 32px; - - // :global { - .ant-switch-inner { - font-size: 20px; - font-weight: 700; - } - - &.ant-switch-checked { - background: #1890ff; - } - // } - } } diff --git a/src/pages/Common/Sign/IndustrySystem/index.tsx b/src/pages/Common/Sign/IndustrySystem/index.tsx index 23ea33da4eff5725891d60b9c4e501be388e912d..4a31190ab7e1d498b39cba8d6aaa8918e640e477 100644 --- a/src/pages/Common/Sign/IndustrySystem/index.tsx +++ b/src/pages/Common/Sign/IndustrySystem/index.tsx @@ -25,6 +25,15 @@ const IndustrySystem = () => { }, ], }, + { + name: '城研院', + sub: [ + { + name: '成都市城市综合管理数据资源中心', + url: '', + }, + ], + }, { name: '执法总队', sub: [ diff --git a/src/pages/Common/Sign/SignModel/SignStatus/index.tsx b/src/pages/Common/Sign/SignModel/SignStatus/index.tsx index 0fecd2e7587f39a5994e42b32aac56a9d987c222..17db8c0c60ac1c0f45825f69cbf94d2693291fa4 100644 --- a/src/pages/Common/Sign/SignModel/SignStatus/index.tsx +++ b/src/pages/Common/Sign/SignModel/SignStatus/index.tsx @@ -15,7 +15,7 @@ const SignStatus = () => { }, { name: '预警态', - pre: '（85分一下）', + pre: '（85分以下）', desc: '提示问题积压或处置效率下降，需要加大治理力度。', color: 'rgb(255, 162, 80)', }, diff --git a/src/pages/Common/components/EventPicList/index.tsx b/src/pages/Common/components/EventPicList/index.tsx index 4eceeb756771e572e20d20068ee65850654998c6..111f1e2e99fa51cab5cde598c576f4ee260970d5 100644 --- a/src/pages/Common/components/EventPicList/index.tsx +++ b/src/pages/Common/components/EventPicList/index.tsx @@ -72,12 +72,15 @@ const EventPicList: React.FC = ({
{ - showEventDetail && + if(showEventDetail) { setDetailModalOpt({ open: true, eventId: item.eventId, }); - handleDetail && handleDetail(item); + } + if(handleDetail) { + handleDetail(item); + } }} >

diff --git a/src/pages/GlobalModalServices/components/RealtimeCQI/index.tsx b/src/pages/GlobalModalServices/components/RealtimeCQI/index.tsx index c3ff04f7110d13b702eb07ce5d1e4cd919fc1468..54264f77dcb47873a78a10789d47c4905fe3ad9b 100644 --- a/src/pages/GlobalModalServices/components/RealtimeCQI/index.tsx +++ b/src/pages/GlobalModalServices/components/RealtimeCQI/index.tsx @@ -249,7 +249,7 @@ const RealtimeCQI: React.FC<{ objectId: string; }> = ({ ))} - ) : + ) : }

diff --git a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx index 39a65d30d98884e3f8dd8a499601dfa6c0968897..0e5d1dd3b8fee7e4088ce6ff7aea8d2d5922c9d3 100644 --- a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx +++ b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx @@ -1,13 +1,12 @@ // import BMapView from '@/components/BMapView'; import CooglMap from '@/components/CooglMap'; import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider'; -import BMapService from '@/utils/mapService'; +import services from '@/services'; import { getColorByIndex, getCqiStatusStyle } from '@/utils/ui'; import { DownCircleFilled, UpCircleFilled } from '@ant-design/icons'; import { Flex, Space } from 'antd'; import React, { CSSProperties, useEffect, useRef, useState } from 'react'; import styles from './index.less'; -import services from '@/services'; const Map: React.FC = () => { const [expand, setExpand] = useState(); @@ -17,7 +16,10 @@ const Map: React.FC = () => { const [isBmap, setIsBmap] = useState(false); const MapRef = useRef(); - const [areaList, setAreaList] = useState([]) + const [areaList, setAreaList] = useState([]); + const [allAreaMapData, setAllAreaMapData] = useState([]); + + const [selectedArea,setSelectedArea] = useState({}); const data = [ { @@ -111,25 +113,40 @@ const Map: React.FC = () => { setViewport(); }, [MapRef.current]); - - // 重点区域列表 - const getImportantAreaList = async () => { + // 重点区域列表 + const getImportantAreaList = async () => { const params = { physicalSignType: 1, - objectHierarchy: 19 - } - const res = await services.Physicalsign.getGroupObjectPhysicalSignIndex(params) + objectHierarchy: 19, + }; + const res = await services.Physicalsign.getGroupObjectPhysicalSignIndex( + params, + ); console.log(res); - if(res.code === 200) { - setAreaList(res.data) + if (res.code === 200) { + setAreaList(res.data); } - } + }; + + const getObjectPolygon = async () => { + const params = { + physicalSignType: 1, + objectHierarchy: 19, + }; + const res = await services.Physicalsign.getObjectPolygon(params); + if (res.code === 200) { + if (res.data?.length) { + console.log(res.data); + setAllAreaMapData(res.data); + } + } + }; useEffect(() => { - getImportantAreaList() - }, []) + getObjectPolygon(); + getImportantAreaList(); + }, []); - return (
{/* {isBmap ? ( @@ -177,10 +194,9 @@ const Map: React.FC = () => { - { dispatch.push('KeyAreaDetail', { @@ -216,7 +232,39 @@ const Map: React.FC = () => { style={{ borderColor: getColorByIndex(98.5) }} >
- + */} + {allAreaMapData?.map((item: any) => ( + { + dispatch.push('KeyAreaDetail', { + title: item.objectName, + props: { + objectId: item?.objectId, + cqi: item?.qualitySign, + }, + }); + }} + key={item.objectId} + > +
+
+ {item?.objectName} + + {item?.qualitySign} + +
+
+
+ + ))} {/* )} */} @@ -260,9 +308,14 @@ const Map: React.FC = () => { align="center" className={styles.childItem} justify="space-between" + onClick={() => setSelectedArea(child)} >
{child.objectName}
-
+
{child.cqi}
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.less b/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.less index aa615e0c53e426be7b71addfe0d49208b7df2e8d..c39892107406f28f4b8c402abf6a93ec9bea7084 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.less +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.less @@ -22,6 +22,7 @@ } .title { + min-width: 80px; color: rgb(228, 237, 255); font-family: DingTalk JinBuTi; @@ -68,4 +69,21 @@ align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); + div { + width: 100px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + .carouselContainer { + overflow: hidden; + width: 100%; /* 根据需要设置宽度 */ + } + + .carousel { + display: flex; + transition: transform 0.5s ease; /* 添加平滑过渡效果 */ + } + } diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.tsx index a83851610da4deee177759563d59aa9a88e3f33f..65c39fd085f383728a8bc7984816fdafc8216ee1 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.tsx +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/LiveSlideshow/index.tsx @@ -1,33 +1,61 @@ import { Flex } from 'antd'; -import React from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import styles from './index.less'; +import { joinPictureHttp } from '@/utils/comm'; +import Modal from '@/components/HncyModal'; +import EventDetail from '@/pages/Common/Event/EventDetail'; + +const LiveSlideshow: React.FC<{ eventList: any }> = (props) => { + + const { eventList } = props; + + // 事件详情弹窗 + const [detailModalOpt, setDetailModalOpt] = useState<{ + open: boolean; + title: string; + eventId: string; + }>({ + open: false, + title: '', + eventId: '' + }) -const LiveSlideshow: React.FC = () => { return (
实况

轮播
- -
- -
5分钟前
-
非机动车乱停放
-
-
- -
5分钟前
-
非机动车乱停放
-
-
- -
5分钟前
-
非机动车乱停放
-
+ + { + eventList?.map(item => ( +
{ + // setDetailModalOpt({ open: true, title: '事件详情', eventId: item.eventId }) + }}> + +
5分钟前
+
+
+ {item.standardEventTitle} +
+
+
+ )) + } {/*
更

多
*/} + + setDetailModalOpt({ open: false, title: '', eventId: '' })} + width={1160} + height={950} + > + +
); }; diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/InfoWindow/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/InfoWindow/index.tsx index 421707bc61c417211baf25b08916a5c4d93d0911..d734ae63b92cb4ab8e6a537f3cc02afa11f5b7c8 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/InfoWindow/index.tsx +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/InfoWindow/index.tsx @@ -1,9 +1,12 @@ import CooglMap from '@/components/CooglMap'; import { CloseCircleOutlined } from '@ant-design/icons'; import { ConfigProvider, Descriptions, Image } from 'antd'; -import React from 'react'; +import React, { useState } from 'react'; import styles from './index.less'; +import Modal from '@/components/HncyModal'; +import EventDetail from '@/pages/Common/Event/EventDetail'; + interface PropsType { data: any; @@ -13,6 +16,17 @@ interface PropsType { const InfoWindow: React.FC = (props) => { const { data, onClose } = props; + // 事件详情弹窗 + const [detailModalOpt, setDetailModalOpt] = useState<{ + open: boolean; + title: string; + eventId: string; + }>({ + open: false, + title: '', + eventId: '' + }) + const labelStyle = { color: 'rgb(203, 237, 255)', fontSize: 16, @@ -57,7 +71,7 @@ const InfoWindow: React.FC = (props) => { width="100%" src={require('@/assets/images/keyArea/img.png')} > -
待派遣
+
{data?.caseStatusName}
= (props) => { }} > - 2024-05-28 10:20:20 + {data?.reportTime} - 锦江区牛市口街道办事... + {data?.address}
-
查看详情
+
{ + // setDetailModalOpt({ open: true, title: '事件详情', eventId: data.eventId }) + }}>查看详情
); @@ -237,35 +254,46 @@ const InfoWindow: React.FC = (props) => { }; return ( - -
-
- 道路交通设施 -
- + <> + +
+
+ {data?.standardEventTitle} +
+ +
-
- -
{renderContent()}
- -
- + }} + > +
{renderContent()}
+ +
+ + setDetailModalOpt({ open: false, title: '', eventId: '' })} + width={1160} + height={950} + > + + + ); }; diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.less b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.less index dc082d33ec135b6c19c740c6fbf32282c2fed411..41c93cd403c0a3ff3c79423fc7d1ff801cf82a70 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.less +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.less @@ -96,7 +96,7 @@ width: 230px; height: 167px; border-radius: 10px; - background: rgba(116, 183, 255, 0.15); + // background: rgba(116, 183, 255, 0.15); margin: 0 auto; > :last-child { diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx index 2511d2a9cc7468d8744986c24f6fd0bfbb8791f5..ec79b417f2d3ffd7a962b0dadd3ce074ffaf05ac 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx @@ -1,6 +1,5 @@ -import myVideo1 from '@/assets/media/movie.mp4'; - // import BMapView from '@/components/BMapView'; +import EmptySpace from '@/components/EmptySpace'; import services from '@/services'; import gsap from 'gsap'; import React, { useEffect, useRef, useState } from 'react'; @@ -91,7 +90,26 @@ const Map: React.FC = (props) => { } }; + const [eventList, setEventList] = useState([]); + + const getEventListData = async () => { + const params = { + eventStatus: '处置中', + keyAreaId: objectId, // objectId + dateType: 'monthly', // dateType + limit: 3, + }; + const res = await services.Physicalsign.getNormalEventListForKeyAreas( + params, + ); + if (res.code === 200) { + console.log('getTimesData', res.data); + setEventList(res.data); + } + }; + useEffect(() => { + getEventListData(); getObjectPolygon(); }, [objectId]); @@ -191,8 +209,47 @@ const Map: React.FC = (props) => { alt="" > - -
*/} + */} + {/*
*/} +
+ +
+ + {eventList?.map((item: any, index) => { + return ( + { + setSelected({ ...item, type: 2 }); + }} + position={[item?.lon, item?.lat]} + icon={(iconList as any)[5]} + > + ); + })} + {selected && ( + { + setSelected(undefined); + }} + > + )} + +
{expandStatus ? ( @@ -212,12 +269,13 @@ const Map: React.FC = (props) => {
实况直播
-
+ + {/*
-
川大路152号
+
川大路152号
*/}
{/*
移动AI感知源
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/AnalysisItem/index.less b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/AnalysisItem/index.less new file mode 100644 index 0000000000000000000000000000000000000000..d18cf0ec070035d5cd59e3196f1913e55041562b --- /dev/null +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/AnalysisItem/index.less @@ -0,0 +1,36 @@ +.container { + width: 249px; + height: 41px; + border-radius: 7px; + background: rgba(41, 181, 255, 0.12); + padding: 0 13px; + display: flex; + align-items: center; + justify-content: space-between; + font-family: PingFang SC; + font-weight: 500; + font-size: 14px; + color: #BCCEE9; + margin-bottom: 10px; + + .left { + display: flex; + align-items: center; + + .dot { + width: 7px; + height: 7px; + border-radius: 50%; + } + + span { + margin-left: 5px; + } + } + + .count { + font-family: PingFang SC; + font-weight: 800; + font-size: 18px; + } +} diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/AnalysisItem/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/AnalysisItem/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..0fe58e2831efb2ab4e442f4ba5ee55a97028d4fd --- /dev/null +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/AnalysisItem/index.tsx @@ -0,0 +1,16 @@ +import styles from './index.less'; + +const AnalysisItem = ({ item, color }: { item: any, color?: string }) => { + return ( +
+
+
+ {item.name} +
+ {item.count}件 + {item.rate}% +
+ ); +} + +export default AnalysisItem \ No newline at end of file diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/BottomTab/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/BottomTab/index.tsx index b1dbea00c433df3674a6dc85a3fd46ba7fc30a18..92e63c52e8fd83f04700a2c6a5000de6de93e334 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/BottomTab/index.tsx +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/BottomTab/index.tsx @@ -1,23 +1,35 @@ import { Flex } from 'antd'; import classNames from 'classnames'; -import React, { useState } from 'react'; +import React, { ReactNode, useEffect, useMemo, useState } from 'react'; import List from '../List'; import styles from './index.less'; +import services from '@/services'; +import PieCharts from '../PieCharts'; +import AnalysisItem from '../AnalysisItem'; +import EChartsReact from 'echarts-for-react'; + +const BottomTab: React.FC<{ objectId: string, dateType: string }> = (props) => { + const { objectId, dateType } = props; + + const [largeClass, setLargeClass] = useState('category'); -const BottomTab: React.FC = () => { - const [largeClass, setLargeClass] = useState('today'); const [smallClass, setSmallClass] = useState('type1'); + + const [categoryData, setCategoryData] = useState([]) + const [distinctData, setDistinctData] = useState([]) + const [timesData, setTimesData] = useState([]) + const largeTabs = [ { - key: 'today', + key: 'category', name: '高发类型', }, { - key: 'week', + key: 'times', name: '高发时段', }, { - key: 'month', + key: 'distribute', name: '来源分布', }, ]; @@ -35,6 +47,114 @@ const BottomTab: React.FC = () => { name: '细类', }, ]; + + const chartOptions = useMemo(() => { + return { + xAxis: { + type: 'category', + boundaryGap: false, + // show: false, + axisLine: { + show: false, + }, + axisLabel: { + show: true, + color: '#fff', + fontSize: 16, + }, + data: timesData?.map(item => `${item.name}时`) || [], + }, + yAxis: { + type: 'value', + show: false, + }, + grid: { + left: '10%', // 左边距 + right: '10%', // 右边距 + top: '10%', // 上边距 + bottom: '30%', // 下边距 + }, + series: [ + { + data: timesData?.map(item => item.count) || [], + symbol: 'none', + type: 'line', + lineStyle: { + color: '#EB6A6A', + }, + smooth: false, + + areaStyle: { + // 区域填充样式。设置后显示成区域面积图。 + color: { + type: 'linear', + x: 0, + y: 1, + x2: 0, + y2: 0.2, + colorStops: [ + { + offset: 0, + color: 'rgba(235, 106, 106, 0)', // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(235, 106, 106, 0.36)', // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + }, + ], + } + }, [timesData]); + + const getCategoryData = async () => { + const params = { + keyAreaId: objectId, // objectId + dateType: 'monthly', // dateType + limit: 3 + } + const res = await services.Physicalsign.getHighIncidenceTypeRoadCountForKeyAreas(params) + if (res.code === 200) { + console.log('getCategoryData', res.data) + setCategoryData(res.data) + } + } + + const getDistinctData = async () => { + const params = { + keyAreaId: objectId, // objectId + dateType: 'monthly', // dateType + } + const res = await services.Physicalsign.getHighIncidenceSourceCountForKeyAreas(params) + if (res.code === 200) { + console.log('getDistinctData', res.data) + setDistinctData(res.data) + } + } + + const getTimesData = async () => { + const params = { + keyAreaId: objectId, // objectId + dateType: 'monthly', // dateType + } + const res = await services.Physicalsign.getHighIncidenceTimeCountForKeyAreas(params) + if (res.code === 200) { + console.log('getTimesData', res.data) + setTimesData(res.data) + } + } + + + + useEffect(() => { + getCategoryData() + getDistinctData() + getTimesData() + }, [objectId, dateType]) + return (
@@ -57,7 +177,7 @@ const BottomTab: React.FC = () => { })}
-
+ {/*
{smallTabs.map((item, index) => { return (
{
); })} -
+
*/} - {largeClass === 'today' ? : null} + { + largeClass === 'category' ? ( + + ) : ( + <> + { + largeClass === 'times' ? ( + <> + + + ) : ( + <> + +
+ +
+
+ { + distinctData?.map((source: any, index: number) => ( + + )) + } +
+ + + ) + } + + ) + }
); }; diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/List/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/List/index.tsx index 14daf7d61b3c921d20aeed75fa13e464d0397f98..98a35aab4634f945573ff56f891f81e650b350ee 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/List/index.tsx +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/List/index.tsx @@ -1,59 +1,69 @@ import { Flex, Progress, Space } from 'antd'; import React from 'react'; import styles from './index.less'; +import EmptySpace from '@/components/EmptySpace'; -const List: React.FC = () => { - const data = [ - { - name: '污水井盖', - number: 1523, - }, +const List: React.FC<{ data: any }> = (props) => { + const { data } = props; - { - name: '公安井盖（天网井盖）', - number: 80, - }, - { - name: '非机动车停放点', - number: 80, - }, - ]; + // const data = [ + // { + // name: '污水井盖', + // number: 1523, + // }, + + // { + // name: '公安井盖（天网井盖）', + // number: 80, + // }, + // { + // name: '非机动车停放点', + // number: 80, + // }, + // ]; return (
- {data.map((item, index) => { - return ( -
- - -
Top{index + 1}
-
{item.name}
- - -
- {item.number} - 件 -
-
- {item.number} - % + { + data?.length ? ( + <> + {data.map((item, index) => { + return ( +
+ + +
TOP{index + 1}
+
{item.name}
+ + +
+ {item.count} + 件 +
+
+ {item.rate} + % +
+ + +
- - - -
- ); - })} + ); + })} + + ) : + } +
); }; diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/PieCharts/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/PieCharts/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..15ea59375debc990d22f7b93e583813301b059e7 --- /dev/null +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/PieCharts/index.tsx @@ -0,0 +1,63 @@ +import { useMemo, useRef } from 'react' +import ReactEcharts from 'echarts-for-react'; +const PieCharts = ({ + dataSource, + style, + color, +}: { + dataSource: any[]; // 接收数据源 + style?: React.CSSProperties; + color?: string[] +}) => { + + const ref = useRef(null) + + const option = useMemo(() => { + // 排个序 为了颜色显示 + const seriesData = dataSource?.map(item => { + return { + name: item.name, + value: item.count, + } + }) + return { + tooltip: { + trigger: 'item', + // formatter: (params:any) => { + // return `${params?.data?.name}: ${params?.data?.percent}%`; + // }, + }, + color: color ?? ['#FF9B5D', '#FFE335', '#29B5FF'], + series: [ + { + name: '', + type: 'pie', + radius: ['65%', '90%'], + avoidLabelOverlap: false, + padAngle: 5, + label: { + show: false, + position: 'center', + }, + labelLine: { + show: false, + }, + data: seriesData, + }, + ], + } + }, [dataSource]) + + return ( + + ); +}; + +export default PieCharts; + diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/index.tsx index 14ddbc8b1b5c2fe5604e7b99c91721d54983f840..b4c2698092e75099ed623df06e53aa8caf6bc1f8 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/index.tsx +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/index.tsx @@ -1,52 +1,115 @@ import DescriptionItem from '@/components/DescriptionItem'; -import { CaretUpFilled } from '@ant-design/icons'; +import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons'; import { Flex, Space } from 'antd'; import classNames from 'classnames'; import EChartsReact from 'echarts-for-react'; -import React, { useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import BottomTab from './BottomTab'; import styles from './index.less'; import option from './option'; +import services from '@/services'; + +const ProblemInfo: React.FC<{ objectId: string }> = (props) => { + + const { objectId } = props; -const ProblemInfo: React.FC = () => { const [date, setDate] = useState<'today' | 'week' | 'month'>('today'); + const [statistics, setStatistics] = useState<{ + problemCount: number; + disposeCount: number; + disposeRate: number; + }>() + + const [eventTrend, setEventTrend] = useState() + const dateTabs = [ { key: 'today', name: '今日', }, { - key: 'week', + key: 'weekly', name: '本周', }, { - key: 'month', + key: 'monthly', name: '本月', }, ]; - const info = [ - { - name: '立案', - value: '1208', - unit: '件', - }, - { - name: '应结案', - value: '1208', - unit: '件', - }, - { - name: '已结案', - value: '1208', - unit: '件', - }, - { - name: '结案率', - value: '1208', - unit: '%', - }, - ]; + const info = useMemo(() => { + return [ + { + name: '立案', + value: statistics?.problemCount, + unit: '件', + }, + { + name: '应结案', + value: statistics?.problemCount, + unit: '件', + }, + { + name: '已结案', + value: statistics?.disposeCount, + unit: '件', + }, + { + name: '结案率', + value: statistics?.disposeRate, + unit: '%', + }, + ]; + }, [statistics]) + + const chartOptions = useMemo(() => { + return { + ...option, + xAxis: { + ...option.xAxis, + data: eventTrend?.trendList?.map(item => item.name) || [], + }, + series: [ + { + ...option.series[0], + data: eventTrend?.trendList?.map(item => item.value) || [], + }, + ], + } + }, [eventTrend]); + + + const getStatistics = async (type: string = 'today') => { + const params = { + keyAreaId: objectId, + dateType: type + } + const res = await services.Physicalsign.getNormalEventCountForKeyAreas(params) + if (res.code === 200) { + console.log('getStatistics', res.data) + setStatistics(res.data) + } + } + + // 立案趋势 + const getEventTrend = async () => { + const params = { + keyAreaId: objectId, + } + const res = await services.Physicalsign.getNormalEventTrendForKeyAreas(params) + if (res.code === 200) { + console.log('getEventTrend', res.data) + setEventTrend(res.data) + } + } + + + useEffect(() => { + getStatistics(); + getEventTrend() + }, [objectId]); + + return (
@@ -59,6 +122,7 @@ const ProblemInfo: React.FC = () => { key={item.key} onClick={() => { setDate(item.key as any); + getStatistics(item.key) }} className={classNames( styles.btn, @@ -93,8 +157,20 @@ const ProblemInfo: React.FC = () => { 近七日环比上月 - - 1.3 + { + Number(eventTrend?.samePeriodRate) < 0 && ( + + ) || + Number(eventTrend?.samePeriodRate) > 0 && ( + + ) + } + 0 ? '#FF5858' : '#57ef58' }} + > + {eventTrend?.samePeriodRate} + 件 @@ -102,7 +178,7 @@ const ProblemInfo: React.FC = () => {
@@ -110,7 +186,7 @@ const ProblemInfo: React.FC = () => {
@@ -118,12 +194,12 @@ const ProblemInfo: React.FC = () => {
- +
); }; diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/option.ts b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/option.ts index 564e1baa0b475626107406e9cc86fb465ae60fb3..15ee948fe233c5ea1731ff2997ecbcc16bb00d59 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/option.ts +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/ProblemInfo/option.ts @@ -13,21 +13,21 @@ const option: EChartsOption = { color: '#fff', fontSize: 16, }, - data: ['09.15', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + data: [], }, yAxis: { type: 'value', show: false, }, grid: { - left: '5%', // 左边距 - right: '0', // 右边距 + left: '10%', // 左边距 + right: '10%', // 右边距 top: '10%', // 上边距 bottom: '30%', // 下边距 }, series: [ { - data: [100, 50, 60, 70, 50, 40, 50, 60, 40, 40, 80, 30, 40, 100], + data: [], symbol: 'none', type: 'line', lineStyle: { diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/SidebarMenu/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/SidebarMenu/index.tsx index c70005cb1f4d415ac7b68f59081eae732ea4f974..bf38d665963952035e39ecb95fec1cffad026451 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/SidebarMenu/index.tsx +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/SidebarMenu/index.tsx @@ -6,9 +6,10 @@ import styles from './index.less'; const SidebarMenu: React.FC<{ menuClickHandle: (params: any) => void; active: number; - cqi: string + cqi: string, + eventNum: number; }> = (props) => { - const { menuClickHandle, active, cqi } = props; + const { menuClickHandle, active, cqi, eventNum } = props; const menuList = useMemo(() => { return [ @@ -24,14 +25,14 @@ const SidebarMenu: React.FC<{ element: (
- 6件 + {eventNum}件
城市问题
), }, ] - }, [cqi]) + }, [cqi, eventNum]) const menu = [ // { diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/UrbanProblem/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/UrbanProblem/index.tsx index 28ea13c2cba5e757b54ec203d27c17601804237f..065beff375be2122cb161999611d55931e0bb842 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/UrbanProblem/index.tsx +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/UrbanProblem/index.tsx @@ -4,11 +4,12 @@ import Map from '../Map'; import ProblemInfo from '../ProblemInfo'; import styles from './index.less'; -const UrbanProblem: React.FC = () => { +const UrbanProblem: React.FC<{ objectId: string }> = (props) => { + const { objectId } = props; return ( - - + + ); }; diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/index.tsx index c630e8b5ca2532aff38aaf0b1f1e73a540cbbe9d..457eb92dfe2874e824528f225ee3bd171500ef71 100644 --- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/index.tsx +++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/index.tsx @@ -1,15 +1,38 @@ import { Flex } from 'antd'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import AreaCQI from './AreaCQI'; import styles from './index.less'; import SidebarMenu from './SidebarMenu'; import UrbanProblem from './UrbanProblem'; +import services from '@/services'; /** @name 重点区域 */ const KeyAreaDetail: React.FC<{ objectId: string, cqi: string }> = (props) => { const [active, setActive] = useState(0); const { objectId, cqi } = props console.log('KeyAreaDetail', objectId) + + const [eventList, setEventList] = useState([]) + + const getEventListData = async () => { + const params = { + eventStatus: '处置中', + keyAreaId: objectId, // objectId + dateType: 'monthly', // dateType + // limit: 10 + } + const res = await services.Physicalsign.getNormalEventListForKeyAreas(params) + if (res.code === 200) { + console.log('getTimesData', res.data) + setEventList(res.data) + } + } + + useEffect(() => { + getEventListData() + }, []) + + return ( = (props) => { }} active={active} cqi={cqi} + eventNum={eventList?.length} > {active === 0 && } - {active === 1 && } + {active === 1 && } ); }; diff --git a/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.tsx b/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.tsx index 1e2750486c939405fc95acbba00dda00760162af..350bd98bc5a2cd70e7f571e8010e12db38c21af3 100644 --- a/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.tsx +++ b/src/pages/NewHome/NewLeftSidebar/CityRealTimeCQI/index.tsx @@ -35,7 +35,17 @@ const CityRealTimeCQI: React.FC = () => { }; services.Physicalsign.getComparisonIndexInstance(params).then((res) => { if (res.code === 200) { - setCqiData(res.data); + console.log(res.data); + let isAdjust = true; + if (isAdjust && res.data.currentIndex?.indexs) { + const indexs = res.data.currentIndex.indexs.map((item: any) => + item.name === '美观' ? { ...item, value: '--' } : item + ); + const updatedData = { ...res.data, currentIndex: { ...res.data.currentIndex, indexs } }; + setCqiData(updatedData); + } else { + setCqiData(res.data); + } } }); }; diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.less index 877047874120a5715ec56386e33592f830311f74..f3d750586f98d7063b44b8637d9c7b2a0af9b7d3 100644 --- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.less +++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.less @@ -1,10 +1,51 @@ -// .container { -// // width: 438px; -// height: 100%; - -// padding: 20px; -// display: flex; -// flex-direction: column; - - -// } \ No newline at end of file +.container { + // background-color: red; + + .mark { + border-radius: 0px 4px 4px 0px; + + background: linear-gradient( + 135.87deg, + rgb(86, 167, 255) 0%, + rgb(86, 238, 255) 99.142% + ); + width: 10px; + height: 16px; + } + + .title { + color: rgb(189, 206, 233); + font-family: DingTalk JinBuTi; + font-size: 20px; + font-weight: 400; + } + + .litsItem { + margin-bottom: 16px; + + &:last-child { + margin-bottom: 0px; + } + } + + .name { + color: rgb(228, 237, 255); + font-family: 微软雅黑; + font-size: 20px; + font-weight: 400; + } + + .num { + :first-child { + color: rgb(89, 238, 255); + font-family: D-DIN; + font-size: 26px; + font-weight: 700; + } + + :last-child { + color: rgb(228, 237, 255); + font-size: 18px; + } + } +} diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.tsx index c74bb409075fb6f26ac32085ce97766a3ea40ad1..3fd4aab43ab62572f74fe66efe833fc7e675f362 100644 --- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.tsx +++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyArea/index.tsx @@ -1,5 +1,5 @@ +import { Flex, Progress, Space } from 'antd'; import React from 'react'; -import ProcessCard from '../components/ProcessCard'; import styles from './index.less'; const HighFrequencyArea: React.FC<{ @@ -7,15 +7,37 @@ const HighFrequencyArea: React.FC<{ }> = ({ areaStatistics = [] }) => { return (
- {/*
高发区域
*/} - + +
+
高发区域
+ +
+ {areaStatistics.map((item, index) => ( +
+ +
{item.name}
+ +
+ {item?.value} + 件 +
+
+ {item?.percent} + % +
+ + + + +
+ ))} +
); }; diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.less index e1277fa0e78d6272077505c1e5a06fa016dfc4de..f3d750586f98d7063b44b8637d9c7b2a0af9b7d3 100644 --- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.less +++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.less @@ -1,47 +1,51 @@ -// .container { -// height: 100%; -// border-radius: 40px; -// // background: linear-gradient( -// // 180deg, -// // rgba(27, 50, 89, 0.3), -// // rgba(27, 50, 89, 0) 100% -// // ); -// padding: 20px; -// display: flex; -// flex-direction: column; - -// .header { -// margin-bottom: 20px; - -// .title { -// color: #E4EDFF; -// font-size: 22px; -// font-weight: 400; -// margin-bottom: 15px; -// display: block; -// } - -// .tabs { -// :global { -// .ant-tabs-nav { -// margin: 0; -// } -// .ant-tabs-tab { -// padding: 4px 8px; -// font-size: 14px; - -// &.ant-tabs-tab-active { -// .ant-tabs-tab-btn { -// color: #FFFFFF; -// } -// } -// } -// .ant-tabs-ink-bar { -// background: #00E0FF; -// } -// } -// } -// } - -// // ProcessCard会自动填充剩余空间 -// } \ No newline at end of file +.container { + // background-color: red; + + .mark { + border-radius: 0px 4px 4px 0px; + + background: linear-gradient( + 135.87deg, + rgb(86, 167, 255) 0%, + rgb(86, 238, 255) 99.142% + ); + width: 10px; + height: 16px; + } + + .title { + color: rgb(189, 206, 233); + font-family: DingTalk JinBuTi; + font-size: 20px; + font-weight: 400; + } + + .litsItem { + margin-bottom: 16px; + + &:last-child { + margin-bottom: 0px; + } + } + + .name { + color: rgb(228, 237, 255); + font-family: 微软雅黑; + font-size: 20px; + font-weight: 400; + } + + .num { + :first-child { + color: rgb(89, 238, 255); + font-family: D-DIN; + font-size: 26px; + font-weight: 700; + } + + :last-child { + color: rgb(228, 237, 255); + font-size: 18px; + } + } +} diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.tsx index 8e4899c092131d594730b2775fe5253c7acf084b..139544127206bb22cd34d53f0176b1ff58a37ff8 100644 --- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.tsx +++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/HighFrequencyType/index.tsx @@ -1,7 +1,7 @@ import Tabs from '@/components/Tabs'; +import { Flex, Progress, Space } from 'antd'; import React, { useState } from 'react'; -import ProcessCard from '../components/ProcessCard'; - +import styles from './index.less'; const HighFrequencyType: React.FC<{ categoryStatistics?: any[]; onTabChange?: (category: string) => void; @@ -29,20 +29,12 @@ const HighFrequencyType: React.FC<{ }; return ( - //
- //
- // {/* 高发类型 */} - // - //
- + + +
+
高发区域
+ - } - data={categoryStatistics} - strokeColor={{ - '0%': '#38F2E3', - '100%': '#3DC3FF', - }} - /> - // - //
+ + +
+ {categoryStatistics.map((item, index) => ( +
+ +
{item.name}
+ +
+ {item?.value} + 件 +
+
+ {item?.percent} + % +
+ + + + +
+ ))} +
+
); }; diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.css b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.css index 04796e65315a1b2c976a34721f3c3b4510f66ce2..eb7d8a128891ba855021aa1257d6ff61eeda264e 100644 --- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.css +++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.css @@ -2,8 +2,6 @@ width: 100%; height: 100%; border-radius: 40px; - background: linear-gradient(180deg, rgba(27, 50, 89, 0.3), rgba(27, 50, 89, 0) 100%); - padding: 20px; } .wrap .content { flex: 1; @@ -15,18 +13,24 @@ text-align: center; } .wrap .content .card .numCard { + padding: 20px; width: 115px; height: 112px; border-radius: 10px; background: rgba(67, 113, 180, 0.3); text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; color: #bccee9; cursor: pointer; } .wrap .content .card .numCard .name { - font-size: 14px; + font-family: D-DIN; + font-size: 18px; font-weight: 400; - line-height: 1; + line-height: 18px; } .wrap .content .center { width: 557px; @@ -41,10 +45,18 @@ align-items: center; gap: 2vh; font-size: clamp(14px, 1.8vh, 18px); - font-weight: 700; + font-weight: 400; color: #fff; } +.wrap .content .totalName { + font-family: '微软雅黑'; + font-size: 18px; + font-weight: 700; + line-height: 24px; +} .wrap .content .unit { + font-family: '微软雅黑'; + font-size: 14px; font-weight: 400; color: #bccee9; } @@ -54,6 +66,6 @@ -webkit-text-fill-color: transparent; background-clip: text; font-family: D-DIN; - font-size: clamp(20px, 2.5vh, 30px); + font-size: 26px; font-weight: 700; } diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.less index ff033b05dc62af1f77e8dc251c20e25c0095f096..1517bcc10d95a3ac69633fd01ed4cbeaa8a66353 100644 --- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.less +++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.less @@ -18,6 +18,7 @@ text-align: center; .numCard { + padding: 20px; width: 115px; height: 112px; @@ -36,9 +37,11 @@ .name { // font-size: clamp(14px, 1.8vh, 18px); - font-size: 14px; + font-family: D-DIN; + font-size: 18px; font-weight: 400; - line-height: 1; + line-height: 18px; + // line-height: 1; } } } @@ -64,11 +67,20 @@ align-items: center; gap: 2vh; font-size: clamp(14px, 1.8vh, 18px); - font-weight: 700; + font-weight: 400; color: #fff; } + .totalName { + font-family: '微软雅黑'; + font-size: 18px; + font-weight: 700; + line-height: 24px; + } + .unit { + font-family: '微软雅黑'; + font-size: 14px; font-weight: 400; color: #bccee9; } @@ -84,7 +96,8 @@ -webkit-text-fill-color: transparent; background-clip: text; font-family: D-DIN; - font-size: clamp(20px, 2.5vh, 30px); + font-size: 26px; + // font-size: clamp(20px, 2.5vh, 30px); font-weight: 700; } } diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.tsx index fb1a460d5607e0f66e23a3c0d0eebb02112b7ad6..5c58dbdf01eca2f0055e501c2dae2bccfff701fe 100644 --- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.tsx +++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/Problem/index.tsx @@ -1,4 +1,4 @@ -import bottom from '@/assets/images/urbanSituation/bottom.png'; +import bottom from '@/assets/images/urbanSituation/bottom2.png'; import upIcon from '@/assets/images/urbanSituation/up.png'; import Modal from '@/components/HncyModal'; import AnalysisCompletionRate from '@/pages/Common/Event/AnalysisCompletionRate'; @@ -86,11 +86,11 @@ const Problem: React.FC = () => { }, }, { - name: '其他', + name: '其它', value: statisticsData.otherSourceNum, modalConf: { type: 'otherEvent', - title: '其他处置渠道', + title: '其它处置渠道', isOther: '1', }, }, @@ -156,15 +156,24 @@ const Problem: React.FC = () => { }, { name: '人工巡查', - // name: '网格员上报', - value: statisticsData.wgysbNum, + value: statisticsData.rgxcNum, modalConf: { type: 'collectionEvent', title: '人工巡查事件', - // title: '网格员上报事件', - collectionMode: '2', + collectionMode: '1', }, }, + // { + // name: '人工巡查', + // // name: '网格员上报', + // value: statisticsData.wgysbNum, + // modalConf: { + // type: 'collectionEvent', + // title: '人工巡查事件', + // // title: '网格员上报事件', + // collectionMode: '2', + // }, + // }, { name: '其它', value: statisticsData.otherNum, @@ -229,7 +238,7 @@ const Problem: React.FC = () => { style={{ cursor: 'pointer' }} onClick={handleGeneralSituationClick} > - 事件总量 + 事件总量 件 diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.less b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.less index 3a588ae4c1b1f0490c43a0c78e8b92f577752431..6e7b2abc4b65fd7718187a8780a09bb280a5a672 100644 --- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.less +++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.less @@ -28,7 +28,7 @@ } .dateText { - width: 54px; + width: 160px; height: 24px; color: #bccee9; font-family: '微软雅黑'; @@ -36,6 +36,7 @@ font-weight: 400; line-height: 24px; margin-left: auto; + text-align: right; } } diff --git a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.tsx b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.tsx index c5ca8f24e7f03e32ad3462137e1d93e8e608198e..b6d5b1a65e53909ad7bb4f84e1b46c37e67d7acc 100644 --- a/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.tsx +++ b/src/pages/NewHome/NewLeftSidebar/UrbanManagementIssues/index.tsx @@ -89,9 +89,9 @@ const UrbanManagementIssues: React.FC = () => { })} - - {activeTab === 'urbanManagement' ? '今日' : '近一月'} - +
+ {activeTab === 'urbanManagement' ? '2024-11-15至今' : '近一月'} +
{tabItems.find((item) => item.key === activeTab)?.children} diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.tsx index 3c2fbaa2d8746b912e53f920cbec87df6e8cb1d5..c5d9180a1d94182ea5a21924cd99be27bb7fe379 100644 --- a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.tsx +++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Advertisement/index.tsx @@ -21,6 +21,11 @@ const Advertisement: React.FC = () => { lineHeight: '26px', }; + const labelStyle = { + ...commonLabelStyle, + width: '85%', + }; + const commonUnitStyle = { color: '#BCCEE9', fontFamily: '微软雅黑', @@ -41,7 +46,7 @@ const Advertisement: React.FC = () => { unitStyle={commonUnitStyle} decimals={0} /> - + { valueStyle={commonValueStyle} labelStyle={commonLabelStyle} unitStyle={commonUnitStyle} + style={{ marginRight: '60px' }} decimals={0} /> { name="共享单车规范停放率" unit="%" valueStyle={commonValueStyle} - labelStyle={commonLabelStyle} + labelStyle={labelStyle} unitStyle={commonUnitStyle} decimals={0} /> diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.tsx index 3688c0660692441ac55b12ec0c3173be7e7aca3f..5856d96d9d67b67816be076e16c776b73e02d03d 100644 --- a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.tsx +++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/Card/index.tsx @@ -1,4 +1,5 @@ -import { RightOutlined } from '@ant-design/icons'; +// import { RightOutlined } from '@ant-design/icons'; +import rightBack from '@/assets/images/newMain/rightBack.png'; import { ConfigProvider, Flex, Popover } from 'antd'; import classNames from 'classnames'; import React, { PropsWithChildren } from 'react'; @@ -53,7 +54,8 @@ const Card: React.FC> = (props) => { [styles.bindClick]: !Boolean(jumpSystem?.length), })} > - + + {/* */}
diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.tsx index 3f7286d9ed116f75e202f819d4bd1378d2747115..5ebe6d0006dca366abd744b4eab9f6e879bbcf18 100644 --- a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.tsx +++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/CityLighting/index.tsx @@ -13,13 +13,23 @@ const CityLighting: React.FC = () => { fontWeight: 700, }; + // const valueStyle = { + // ...commonValueStyle, + // marginTop: '120px !important', + // }; + const commonLabelStyle = { color: '#BCCEE9', fontFamily: '微软雅黑', fontSize: '20px', fontWeight: 700, lineHeight: '26px', - marginTop: '-10px', + // marginTop: '-10px', + }; + + const labelStyle = { + ...commonLabelStyle, + width: '85%', }; const commonUnitStyle = { @@ -42,13 +52,13 @@ const CityLighting: React.FC = () => { unitStyle={commonUnitStyle} decimals={0} /> - + @@ -57,7 +67,7 @@ const CityLighting: React.FC = () => { name="中心城区亮灯率" unit="%" valueStyle={commonValueStyle} - labelStyle={commonLabelStyle} + labelStyle={labelStyle} unitStyle={commonUnitStyle} decimals={1} /> diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.tsx index 934951c8fb4a417b49832b38dae27f57d6a6af0e..966a46f0f60419453ad6af73878dddb201daa49e 100644 --- a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.tsx +++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/EnvironmentalHealth/index.tsx @@ -21,6 +21,11 @@ const EnvironmentalHealth: React.FC = () => { lineHeight: '26px', }; + const labelStyle = { + ...commonLabelStyle, + width: '85%', + }; + const commonUnitStyle = { color: '#BCCEE9', fontFamily: '微软雅黑', @@ -41,13 +46,13 @@ const EnvironmentalHealth: React.FC = () => { unitStyle={commonUnitStyle} decimals={0} /> - + @@ -56,8 +61,9 @@ const EnvironmentalHealth: React.FC = () => { name="生活垃圾回收利用率" unit="%" valueStyle={commonValueStyle} - labelStyle={commonLabelStyle} + labelStyle={labelStyle} unitStyle={commonUnitStyle} + style={{ marginLeft: '40px' }} decimals={2} /> diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx index 733c7fbcbb01daacbb940aeed883744bca08ca3f..b6404f46c5496a91524068c93691b3f81282f31a 100644 --- a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx +++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/LawEnforcement/index.tsx @@ -41,7 +41,7 @@ const LawEnforcement: React.FC = () => { unitStyle={commonUnitStyle} decimals={1} /> - + { decimals={0} /> - + { unitStyle={commonUnitStyle} decimals={0} /> - + > = (props) => { [styles.bindClick]: !Boolean(jumpSystem?.length), })} > - + diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.tsx b/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.tsx index afd5b89564bd54837ad085ee2ab08da5d75fc6b3..a0715ca79b6a263417e37b6be70fa14429cf856d 100644 --- a/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.tsx +++ b/src/pages/NewHome/NewRightContent/ResourceElements/components/PerceptionSource/index.tsx @@ -47,6 +47,7 @@ const PerceptionSource: React.FC = () => { valueStyle={commonValueStyle} labelStyle={commonLabelStyle} unitStyle={commonUnitStyle} + style={{ marginLeft: '50px' }} /> diff --git a/src/pages/NewHome/NewRightContent/ResourceElements/index.tsx b/src/pages/NewHome/NewRightContent/ResourceElements/index.tsx index 477f1c0112d3caceb7adfcf57aa66012b15bb869..08a0ec583e69c12ee448e6291413fd73e1194e88 100644 --- a/src/pages/NewHome/NewRightContent/ResourceElements/index.tsx +++ b/src/pages/NewHome/NewRightContent/ResourceElements/index.tsx @@ -26,7 +26,7 @@ const ResourceElements: React.FC = () => { children: , popverSystem: [ { - name: '网格化管理平台', + name: '网格基座', url: 'http://10.1.214.174:1800/comprehensivebig', }, ], @@ -36,7 +36,7 @@ const ResourceElements: React.FC = () => { children: , popverSystem: [ { - name: '感知设备管理平台', + name: '物联感知平台', url: 'https://10.1.174.34:13200/iot-platform-screen', }, ], @@ -46,7 +46,7 @@ const ResourceElements: React.FC = () => { return (
- 资源要素 + 城管资源要素
{cards.map((card) => ( diff --git a/src/pages/SecurityServiceOverview/RegionSelect/index.tsx b/src/pages/SecurityServiceOverview/RegionSelect/index.tsx index c7f0e55fe6c666554b80a952123e8dd43f8ecec7..affdba521b6a33a119274dbfa51c6a6cb71483bb 100644 --- a/src/pages/SecurityServiceOverview/RegionSelect/index.tsx +++ b/src/pages/SecurityServiceOverview/RegionSelect/index.tsx @@ -1,7 +1,9 @@ import { Select } from 'antd'; import styles from './index.less'; +import services from '@/services'; import { useModel } from '@umijs/max'; +import { useRequest } from 'ahooks'; /** * @description 区域选择 @@ -9,104 +11,25 @@ import { useModel } from '@umijs/max'; const RegionSelect = () => { const { setSelectAreaId } = useModel('safetyAreaId'); + const { data } = useRequest(services.DataBase.getSjdzInfoData, { + defaultParams: [ + { + typeCode: 'tssj-qulb', + }, + ], + }); + return (