diff --git a/src/pages/GlobalModalServices/index.tsx b/src/pages/GlobalModalServices/index.tsx index c54f41d9d05a557b0c56dd70824b8d1b471dd6a8..4728027709151c287f0aeecd760f0d6222ab9336 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 485140808b9438d70cc409d91ba4a8d0fe090cde..dc376c8bba77da69d115eb3e44e6c22b3281601b 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 0b58abf45757aecd6a76e8e7fa1d1b5af7f4925a..0a6cad4fee9f4b7d87060bfc4290e8d3e812b95a 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 0000000000000000000000000000000000000000..de188fc95b5e51b92c31b3aa224a00015393cf64 --- /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 485140808b9438d70cc409d91ba4a8d0fe090cde..074108e09615032288f330b4b250282c68cdf989 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 766cc6a61ebee9f856ff05f3b6f6257ab5358c2d..59a2c7544860aff3d1ef04363fecdbafaeaad771 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 0000000000000000000000000000000000000000..cb9e01d74dde50605b1dc1eb09d4ac43a1c0b511 --- /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 e70914022eb4d9056b9312065f500b2f4cf5e14f..db22f8e67307a578ce1144552486a9e48ef0cde0 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 a5df37c6adcee59d3760bc9bda4827ec0777160a..f2b9c803bad72c9d8e6b23e5c4b7db7a4041703d 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); });