From fafe4fff87c93a3fb06d7d4388679111971c938d Mon Sep 17 00:00:00 2001 From: yms Date: Tue, 7 Jan 2025 13:44:46 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/GlobalModalServices/index.tsx | 1 + .../PipelinePassage/Overview/index.less | 13 ++ .../modals/PipelinePassage/Overview/index.tsx | 94 +++++++++++++- .../modals/PipelinePassage/Overview/option.ts | 119 ++++++++++++++++++ .../PipelineSituation/index.less | 19 +++ .../PipelineSituation/index.tsx | 73 ++++++++++- .../PipelineSituation/option.ts | 30 +++++ .../components/MunicipalFacilities/index.tsx | 6 +- .../MapCantainer/DistrictMap/index.tsx | 3 +- 9 files changed, 345 insertions(+), 13 deletions(-) create mode 100644 src/pages/GlobalModalServices/modals/PipelinePassage/Overview/option.ts create mode 100644 src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/option.ts diff --git a/src/pages/GlobalModalServices/index.tsx b/src/pages/GlobalModalServices/index.tsx index c54f41d9..47280277 100644 --- a/src/pages/GlobalModalServices/index.tsx +++ b/src/pages/GlobalModalServices/index.tsx @@ -253,6 +253,7 @@ const GlobalModalServices: React.ForwardRefRenderFunction< onCancel={() => close(thread)} width={w} height={h} + key={lastModal.modalId} style={{ zIndex: zIndex ?? 1000 }} open titleRender={titleRender.bind(this, lastModal, stacks)} diff --git a/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.less b/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.less index 48514080..dc376c8b 100644 --- a/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.less +++ b/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.less @@ -1,2 +1,15 @@ .container { } +.tabItem { + color: rgb(76, 134, 189); + font-family: DingTalk JinBuTi; + font-size: 18px; + font-weight: 400; + cursor: pointer; +} + +.active { + color: rgb(255, 255, 255); + + font-weight: 400; +} diff --git a/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.tsx b/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.tsx index 0b58abf4..0a6cad4f 100644 --- a/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.tsx +++ b/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/index.tsx @@ -1,8 +1,16 @@ -import React, { useMemo } from 'react'; +import DescriptionItem from '@/components/DescriptionItem'; +import { Flex } from 'antd'; +import classNames from 'classnames'; +import EChartsReact from 'echarts-for-react'; +import { cloneDeep } from 'lodash'; +import React, { memo, useLayoutEffect, useMemo, useRef, useState } from 'react'; import BaseCard from '../components/BaseCard'; - +import styles from './index.less'; +import option from './option'; /** @name 全市已移交纳入管理综合管廊概况 */ -const Overview: React.FC = () => { +const Overview: React.FC = memo(() => { + const [activeTab, setActiveTab] = useState('urbanManagement'); + const chartRef = useRef(); const INFO = useMemo(() => { return [ { @@ -23,9 +31,85 @@ const Overview: React.FC = () => { ]; }, []); + const tabItems = useMemo( + () => [ + { + key: 'urbanManagement', + label: '运行态势', + }, + { + key: 'complaints', + label: '老百姓投诉情况', + }, + ], + [], + ); + + useLayoutEffect(() => { + chartRef.current?.resize(); + }, []); + + const BarOption = useMemo(() => { + const temp = cloneDeep(option) as any; + const xAxis = [ + '市本级', + '天府新区', + '高新区', + '未来科技城', + '双流区', + '金堂县', + '其它区（市）县', + ]; + const yAxis = [1652, 1652, 1652, 1652, 1652, 1652, 1652]; + temp.xAxis[0].data = xAxis; + temp.series[0].data = yAxis; + return temp; + }, []); return ( - + + + {INFO.map((item) => { + return ( + + ); + })} + + + + {tabItems.map((item, index) => { + return ( +
{ + setActiveTab(item.key); + }} + className={classNames(styles.tabItem, { + [styles.active]: activeTab === item.key, + })} + > + {item.label} +
+ ); + })} + + +
+
单位：km
+ +
+ ); -}; +}); export default Overview; diff --git a/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/option.ts b/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/option.ts new file mode 100644 index 00000000..de188fc9 --- /dev/null +++ b/src/pages/GlobalModalServices/modals/PipelinePassage/Overview/option.ts @@ -0,0 +1,119 @@ +const option = { + color: ['#5F8BFF'], + tooltip: { + trigger: 'axis', + borderWidth: '0', + backgroundColor: 'rgba(73,81,92,.95)', + textStyle: { + color: '#fff', + fontSize: 16, + }, + }, + grid: { + left: '0', + right: '0', + bottom: '2%', + top: '20%', + containLabel: true, + }, + legend: { + data: ['投诉量'], + icon: 'circle', + top: 10, + itemGap: 50, + textStyle: { + fontSize: '16px', + color: '#E4EDFF', + }, + }, + xAxis: [ + { + type: 'category', + boundaryGap: true, + axisLine: { + show: false, + }, + axisLabel: { + show: true, + interval: 0, + textStyle: { + padding: [2, 0, 0, 0], + color: '#CBEDFF', + fontSize: 14, + }, + }, + axisTick: { + show: false, + }, + axisPointer: { + type: 'shadow', + }, + data: [], + }, + ], + yAxis: [ + { + type: 'value', + name: '件', + min: 0, + interval: 10, + axisLabel: { + show: false, + }, + nameTextStyle: { + align: 'left', + color: '#CBEDFF', + padding: [0, 0, 20, -20], + fontSize: 16, + }, + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + // name: '投诉量', + type: 'bar', + barWidth: 20, + data: [], + itemStyle: { + borderRadius: 20, + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: '#5DDDFF', // 0% 处的颜色 + }, + { + offset: 1, + color: '#706BFF', // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + label: { + show: true, + position: 'top', + distance: 6, + color: '#FFFFFF', + fontSize: 20, + fontWeight: 700, + }, + }, + ], +}; + +export default option; diff --git a/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/index.less b/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/index.less index 48514080..074108e0 100644 --- a/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/index.less +++ b/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/index.less @@ -1,2 +1,21 @@ .container { + margin-top: 10px; +} + +.legendBg { + width: 244px; + height: 38px; + padding: 0 14px; + border-radius: 7px; + background: rgba(41, 181, 255, 0.12); + display: flex; + align-items: center; +} + +.legendContent { + display: flex; + flex-direction: row; + flex-wrap: wrap; + row-gap: 5px; + column-gap: 65px; } diff --git a/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/index.tsx b/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/index.tsx index 766cc6a6..59a2c754 100644 --- a/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/index.tsx +++ b/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/index.tsx @@ -1,14 +1,81 @@ -import React from 'react'; +import { Badge, Flex } from 'antd'; +import EChartsReact from 'echarts-for-react'; +import { cloneDeep } from 'lodash'; +import React, { useLayoutEffect, useMemo, useRef, useState } from 'react'; import BaseCard from '../components/BaseCard'; - +import styles from './index.less'; +import option from './option'; /** @name 情况 */ const PipelineSituation: React.FC = () => { + const chartRef = useRef(); + + const colors = [ + '#5DDDFF', + '#A550FF', + '#F07283', + '#7664EC', + '#77E67B', + '#35B2FF', + '#FFE335', + '#FF9B5D', + ]; + + useLayoutEffect(() => { + chartRef.current?.resize(); + }, []); + + const [pieData, setPieData] = useState( + [...Array(10)].map((_, i) => { + return { + value: Math.floor(Math.random() * 100), + name: '给水（输水）管道' + i, + }; + }), + ); + + const PieOption = useMemo(() => { + const temp = cloneDeep(option) as any; + temp.color = colors; + temp.series[0].data = pieData; + return temp; + }, []); + + console.log(PieOption); + return ( + > + +
+ +
+ +
+ {pieData.map((item, index) => { + return ( +
+ +
+ ); + })} +
+ + ); }; diff --git a/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/option.ts b/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/option.ts new file mode 100644 index 00000000..cb9e01d7 --- /dev/null +++ b/src/pages/GlobalModalServices/modals/PipelinePassage/PipelineSituation/option.ts @@ -0,0 +1,30 @@ +const option = { + series: [ + { + name: 'Access From', + type: 'pie', + radius: ['70%', '90%'], + center: ['50%', '50%'], + avoidLabelOverlap: false, + padAngle: 5, + itemStyle: {}, + label: { + show: false, + position: 'center', + }, + emphasis: { + label: { + show: true, + fontSize: 10, + fontWeight: 'bold', + }, + }, + labelLine: { + show: false, + }, + data: [], + }, + ], +}; + +export default option; diff --git a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.tsx b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.tsx index e7091402..db22f8e6 100644 --- a/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.tsx +++ b/src/pages/NewHome/NewRightContent/IndustryOperationNew/components/MunicipalFacilities/index.tsx @@ -67,9 +67,9 @@ const MunicipalFacilities: React.FC = () => { { - dispatch.push('PipelinePassage'); - }} + // onClick={() => { + // dispatch.push('PipelinePassage'); + // }} unit="条" valueStyle={commonValueStyle} labelStyle={commonLabelStyle} diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx index a5df37c6..f2b9c803 100644 --- a/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx +++ b/src/pages/SecurityServiceOverview/components/MapCantainer/DistrictMap/index.tsx @@ -105,10 +105,9 @@ const DistrictMap: React.FC = () => { const [eventData, setEventData] = useState([]); useEffect(() => { - services.Physicalsign.getObjectPolygon2({ + services.Physicalsign.getObjectPolygon({ physicalSignType: 1, objectHierarchy: 1, - // objectId: 510107, }).then((res) => { setData(res.data); }); -- GitLab