From b2a3a8b49ff3b48f659b32720c31e4493df20be8 Mon Sep 17 00:00:00 2001 From: fandaiyang <1147379969@qq.com> Date: Thu, 31 Oct 2024 14:26:18 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9F=8E=E5=B8=82=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E8=A6=81=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/UrbanElements/bg1.png | Bin 0 -> 5388 bytes src/assets/images/UrbanElements/gridBg.png | Bin 0 -> 9105 bytes .../Common/components/BaseCard/index.tsx | 2 +- .../DataElement/LineCharts/index.tsx | 76 +++++++++ .../DataElement/index.less | 145 ++++++++++++++++++ .../DataElement/index.tsx | 97 ++++++++++++ .../ManagementElement/index.less | 116 ++++++++++++++ .../ManagementElement/index.tsx | 77 ++++++++++ .../index.less | 19 +++ .../UrbanManagementResourceElements/index.tsx | 14 +- 10 files changed, 543 insertions(+), 3 deletions(-) create mode 100644 src/assets/images/UrbanElements/bg1.png create mode 100644 src/assets/images/UrbanElements/gridBg.png create mode 100644 src/pages/UrbanManagementResourceElements/DataElement/LineCharts/index.tsx create mode 100644 src/pages/UrbanManagementResourceElements/DataElement/index.less create mode 100644 src/pages/UrbanManagementResourceElements/DataElement/index.tsx create mode 100644 src/pages/UrbanManagementResourceElements/ManagementElement/index.less create mode 100644 src/pages/UrbanManagementResourceElements/ManagementElement/index.tsx diff --git a/src/assets/images/UrbanElements/bg1.png b/src/assets/images/UrbanElements/bg1.png new file mode 100644 index 0000000000000000000000000000000000000000..3cd7bbcdf4a606e82df4ad8655899e4eb77b9309 GIT binary patch literal 5388 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/UrbanElements/gridBg.png b/src/assets/images/UrbanElements/gridBg.png new file mode 100644 index 0000000000000000000000000000000000000000..8641d67ba63ecab4654cf17cf1f508e744df02eb GIT binary patch literal 9105 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 { + + const option = useMemo(() => { + const chartData: any = ['100', '90', '80','100', '90', '80','100', '90', '80','100', '90', '80','100', '90', '80','100', '90', '80',] + const showXAis = true + return { + xAxis: { + type: 'category', + boundaryGap: false, + show: showXAis, + data: showXAis ? data?.map(item => item.name) : [], + axisLabel: { + color: '#CBEDFF', + interval: 3 // 设置为0以显示所有坐标点 + }, + axisLine: { + show: false, + }, + }, + yAxis: { + type: 'value', + show: false, + }, + grid: { + left: '0', // 左边距 + right: '0%', // 右边距 + top: '10%', // 上边距 + bottom: '30%' // 下边距 + }, + series: [ + { + data: chartData, + symbol: "none", + type: 'line', + lineStyle: { + color: "#57EFE5", + }, + + areaStyle: { + // 区域填充样式。设置后显示成区域面积图。 + color: { + type: 'linear', + x: 0, + y: 1, + x2: 0, + y2: 0.2, + colorStops: [ + { + offset: 0, + color: 'rgba(87, 239, 229, 0)', // 0% 处的颜色 + }, + + { + offset: 1, + color: 'rgba(87, 239, 229, 0.36)', // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + }, + ], + } + }, [data]) + + return ( + + ) +} + +export default LineCharts \ No newline at end of file diff --git a/src/pages/UrbanManagementResourceElements/DataElement/index.less b/src/pages/UrbanManagementResourceElements/DataElement/index.less new file mode 100644 index 00000000..9b138160 --- /dev/null +++ b/src/pages/UrbanManagementResourceElements/DataElement/index.less @@ -0,0 +1,145 @@ +.wrap { + width: 50%; + border-radius: 40px; + background: linear-gradient( + 180deg, + rgba(27, 50, 89, 0.3), + rgba(27, 50, 89, 0.3) 100% + ); + padding: 36px; + .top { + margin-bottom: 57px; + .title { + font-family: DingTalk JinBuTi; + font-size: 40px; + color: #fff; + } + } + .main { + flex: 1; + .totalSection { + font-family: DingTalk JinBuTi; + padding: 0 30px; + .name { + font-size: 30px; + font-weight: 400; + color: #e4edff; + } + .totalNum { + :global { + .ant-statistic-content-value { + background: linear-gradient( + 180deg, + rgb(170, 255, 246), + rgb(37, 187, 255) + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 700; + line-height: normal; + font-size: 70px; + font-family: DingTalk JinBuTi; + } + } + } + .unit { + font-family: DingTalk JinBuTi; + font-size: 30px; + font-weight: 400; + color: #e4edff; + } + + .todayName { + font-family: DingTalk JinBuTi; + font-size: 18px; + font-weight: 400; + color: #fff; + } + + .todayunit { + font-family: DingTalk JinBuTi; + font-size: 18px; + font-weight: 400; + color: #fff; + } + + .todayNum { + :global { + .ant-statistic-content-value { + color: #09c35c; + font-size: 20px; + font-family: DingTalk JinBuTi; + vertical-align: 5px; + } + } + } + } + + .chartSection { + padding: 0 10px; + .title { + font-size: 20px; + font-weight: 400; + color: #E4EDFF; + } + } + + .cardSection { + padding: 0 10px; + :global { + .ant-statistic-content-value { + background: linear-gradient( + 180deg, + rgb(170, 255, 246), + rgb(37, 187, 255) + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 700; + line-height: normal; + font-size: 50px; + font-family: D-DIN; + } + } + .left { + width: 333px; + height: 169px; + border-radius: 48px; + background: rgba(58, 126, 188, 0.2); + text-align: center; + padding-top: 40px; + .unit { + font-size: 20px; + font-weight: 400; + color: #bccee9; + line-height: normal; + } + .name { + font-size: 18px; + font-weight: 700; + color: #bccee9; + } + } + .right { + flex: 1; + .card { + height: 77px; + background: rgba(58, 126, 188, 0.2); + padding: 0 20px; + .name { + font-size: 18px; + font-weight: 700; + color: #bccee9; + } + .unit { + font-size: 20px; + font-weight: 400; + color: #bccee9; + } + } + } + } + } +} diff --git a/src/pages/UrbanManagementResourceElements/DataElement/index.tsx b/src/pages/UrbanManagementResourceElements/DataElement/index.tsx new file mode 100644 index 00000000..54ed1a59 --- /dev/null +++ b/src/pages/UrbanManagementResourceElements/DataElement/index.tsx @@ -0,0 +1,97 @@ +import { Flex, Statistic, Space, Row, Col } from 'antd' +import type { StatisticProps } from 'antd'; +import CountUp from 'react-countup'; +import styles from './index.less' +import LineCharts from './LineCharts'; + +/** + * + * @description 数据要素 + */ + +const formatter: StatisticProps['formatter'] = (value) => ( + +); + +const noSeparatorformatter: StatisticProps['formatter'] = (value) => ( + +); + + +const DataElement = () => { + return ( + + + 数据要素 + + + + 已汇集数据 + + + 万条 + + + 今日新增 + + 条 + + + + 近一月汇聚趋势 + + + + + + + 个 + + 数据活跃度 + + + + + + 基础信息库 + + + 个 + + + + + + 业务库 + + + 个 + + + + + + 主题库 + + + 个 + + + + + + 专题库 + + + 个 + + + + + + + + ) +} + +export default DataElement \ No newline at end of file diff --git a/src/pages/UrbanManagementResourceElements/ManagementElement/index.less b/src/pages/UrbanManagementResourceElements/ManagementElement/index.less new file mode 100644 index 00000000..3f9b279b --- /dev/null +++ b/src/pages/UrbanManagementResourceElements/ManagementElement/index.less @@ -0,0 +1,116 @@ +.wrap { + width: 50%; + border-radius: 40px; + background: linear-gradient( + 180deg, + rgba(27, 50, 89, 0.3), + rgba(27, 50, 89, 0.3) 100% + ); + padding: 20px 30px 30px; + .top { + margin-bottom: 57px; + .title { + font-family: DingTalk JinBuTi; + font-size: 40px; + color: #fff; + } + .right { + font-size: 20px; + color: #bccee9; + cursor: pointer; + } + } + .main { + flex: 1; + border-radius: 20px; + background: linear-gradient( + 180deg, + rgba(58, 126, 188, 0.01), + rgba(58, 126, 188, 0.1) 100% + ); + padding: 0 100px 50px 100px; + + .card { + width: 228px; + height: 127px; + border-radius: 20px; + background: linear-gradient( + 180deg, + rgba(58, 126, 188, 0), + rgba(58, 126, 188, 0.43) 100% + ); + text-align: center; + padding-top: 20px; + .unit { + font-size: 20px; + font-weight: 400; + color: #bccee9; + line-height: normal; + } + .name { + font-size: 18px; + font-weight: 700; + color: #bccee9; + } + } + } + + .gridSection { + .gridItem { + width: 180px; + height: 117px; + text-align: center; + background-image: url('@/assets/images/UrbanElements/gridBg.png'); + background-repeat: no-repeat; + background-size: 100%; + .unit { + font-size: 20px; + font-weight: 400; + color: #bccee9; + line-height: normal; + } + .name { + font-size: 18px; + font-weight: 700; + color: #fff; + } + } + } + + .bottom { + width: 818px; + height: 110px; + background-image: url('@/assets/images/UrbanElements/bg1.png'); + background-repeat: no-repeat; + background-size: 100%; + background-position: bottom; + .unit { + font-size: 20px; + font-weight: 400; + color: #bccee9; + line-height: normal; + } + .name { + font-size: 18px; + font-weight: 700; + color: #bccee9; + } + } + + :global { + .ant-statistic-content-value { + background: linear-gradient( + 180deg, + rgb(170, 255, 246), + rgb(37, 187, 255) + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-family: D-DIN; + font-size: 50px; + font-weight: 700; + line-height: normal; + } + } +} diff --git a/src/pages/UrbanManagementResourceElements/ManagementElement/index.tsx b/src/pages/UrbanManagementResourceElements/ManagementElement/index.tsx new file mode 100644 index 00000000..3865becb --- /dev/null +++ b/src/pages/UrbanManagementResourceElements/ManagementElement/index.tsx @@ -0,0 +1,77 @@ + +import { Flex, Statistic, Space } from 'antd' +import type { StatisticProps } from 'antd'; +import CountUp from 'react-countup'; +import styles from './index.less' + +/** + * + * @description 管理要素 + */ + +const formatter: StatisticProps['formatter'] = (value) => ( + +); + +const ManagementElement = () => { + return ( + + + 管理要素 + 进入网格基座查看更多 + + + + + + + 万个 + + 部件 + + + + + 万个 + + 资源 + + + + + + + 个 + + 网格单元 + + + + + 个 + + 责任网格 + + + + + 个 + + 资源网格 + + + + + + + 平方米 + + 管辖范围 + + + + + ) +} + +export default ManagementElement \ No newline at end of file diff --git a/src/pages/UrbanManagementResourceElements/index.less b/src/pages/UrbanManagementResourceElements/index.less index b96aa13f..85b65784 100644 --- a/src/pages/UrbanManagementResourceElements/index.less +++ b/src/pages/UrbanManagementResourceElements/index.less @@ -1,3 +1,22 @@ .container { + width: 100%; height: 100%; + .top { + padding: 20px 76px 0 54px; + margin-bottom: 20px; + .title { + font-family: DingTalk JinBuTi; + font-size: 40px; + color: #fff; + } + .right { + font-size: 20px; + color: #BCCEE9; + cursor: pointer; + } + } + .main { + flex: 1; + padding: 0 25px 25px; + } } diff --git a/src/pages/UrbanManagementResourceElements/index.tsx b/src/pages/UrbanManagementResourceElements/index.tsx index 2f6b349e..307f216c 100644 --- a/src/pages/UrbanManagementResourceElements/index.tsx +++ b/src/pages/UrbanManagementResourceElements/index.tsx @@ -1,11 +1,21 @@ import { Flex } from 'antd'; import React from 'react'; +import ManagementElement from './ManagementElement'; +import DataElement from './DataElement'; + import styles from './index.less'; /** @module 城管资源要素 */ const UrbanManagementResourceElements: React.FC = () => { return ( - - + + + 城管资源要素 + 任意网格态势 + + + + + ); }; -- GitLab